.elementor-1237 .elementor-element.elementor-element-68d5f14{--display:flex;--min-height:350px;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:20px 0px;--row-gap:20px;--column-gap:0px;--overlay-opacity:0.5;--margin-top:-80px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1237 .elementor-element.elementor-element-68d5f14:not(.elementor-motion-effects-element-type-background), .elementor-1237 .elementor-element.elementor-element-68d5f14 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://itpower.co.in/wp-content/uploads/2026/06/About-us-header-image.png");background-position:center center;background-size:cover;}.elementor-1237 .elementor-element.elementor-element-68d5f14::before, .elementor-1237 .elementor-element.elementor-element-68d5f14 > .elementor-background-video-container::before, .elementor-1237 .elementor-element.elementor-element-68d5f14 > .e-con-inner > .elementor-background-video-container::before, .elementor-1237 .elementor-element.elementor-element-68d5f14 > .elementor-background-slideshow::before, .elementor-1237 .elementor-element.elementor-element-68d5f14 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1237 .elementor-element.elementor-element-68d5f14 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';background-color:#000000;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-1237 .elementor-element.elementor-element-c844739{text-align:center;}.elementor-1237 .elementor-element.elementor-element-c844739 .elementor-heading-title{font-family:"Glacial Indifference-Bold", Sans-serif;font-size:42px;font-weight:600;line-height:32px;letter-spacing:0.5px;color:#FFFFFF;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-1237 .elementor-element.elementor-element-08f353c{text-align:center;font-family:"Glacial Indifference-Regular", Sans-serif;font-size:25px;font-weight:400;letter-spacing:1px;color:#FFFFFF;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;width:var( --container-widget-width, 90% );max-width:90%;--container-widget-width:90%;--container-widget-flex-grow:0;border-radius:0px 0px 0px 0px;}.elementor-1237 .elementor-element.elementor-element-94ce5f5{--display:flex;--min-height:0px;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;--align-content:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1237 .elementor-element.elementor-element-650486d{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1237 .elementor-element.elementor-element-1de9818{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;width:100%;max-width:100%;}.elementor-1237 .elementor-element.elementor-element-825914e{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:0px 030px;--row-gap:0px;--column-gap:030px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1237 .elementor-element.elementor-element-825914e:not(.elementor-motion-effects-element-type-background), .elementor-1237 .elementor-element.elementor-element-825914e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-1237 .elementor-element.elementor-element-e78b84f{text-align:center;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;width:var( --container-widget-width, 35% );max-width:35%;--container-widget-width:35%;--container-widget-flex-grow:0;}.elementor-1237 .elementor-element.elementor-element-e78b84f img{width:100%;}.elementor-1237 .elementor-element.elementor-element-0297252{text-align:start;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;width:var( --container-widget-width, 40% );max-width:40%;--container-widget-width:40%;--container-widget-flex-grow:0;}.elementor-1237 .elementor-element.elementor-element-0297252 .elementor-heading-title{font-family:"Glacial Indifference-Bold", Sans-serif;font-size:35px;font-weight:400;letter-spacing:3px;color:#FFFFFF;}.elementor-widget-button .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );background-color:var( --e-global-color-accent );}.elementor-1237 .elementor-element.elementor-element-88e8731 .elementor-button{font-family:"Glacial Indifference-Bold", Sans-serif;font-size:20px;font-weight:400;letter-spacing:1px;fill:#ED3437;color:#ED3437;background-color:#000000;border-style:solid;border-width:2px 2px 2px 2px;border-color:#ED3437;border-radius:8px 8px 8px 8px;padding:08px 16px 08px 016px;}.elementor-1237 .elementor-element.elementor-element-88e8731{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}@media(min-width:768px){.elementor-1237 .elementor-element.elementor-element-68d5f14{--width:100%;}.elementor-1237 .elementor-element.elementor-element-94ce5f5{--width:100%;}.elementor-1237 .elementor-element.elementor-element-825914e{--content-width:1400px;}}@media(max-width:1024px){.elementor-1237 .elementor-element.elementor-element-68d5f14{--gap:0px 0px;--row-gap:0px;--column-gap:0px;}}@media(max-width:767px){.elementor-1237 .elementor-element.elementor-element-825914e{--gap:010px 0px;--row-gap:010px;--column-gap:0px;}.elementor-1237 .elementor-element.elementor-element-e78b84f{--container-widget-width:1000px;--container-widget-flex-grow:0;width:var( --container-widget-width, 1000px );max-width:1000px;}.elementor-1237 .elementor-element.elementor-element-0297252 .elementor-heading-title{font-size:18px;}.elementor-1237 .elementor-element.elementor-element-0297252{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;--container-widget-width:1000px;--container-widget-flex-grow:0;width:var( --container-widget-width, 1000px );max-width:1000px;}.elementor-1237 .elementor-element.elementor-element-88e8731{width:100%;max-width:100%;}}/* Start custom CSS for html, class: .elementor-element-1de9818 *//* ============================================================
       DESIGN TOKENS — shared across both layouts
    ============================================================ */
      .gpx-wrap {
        --gpx-cream: #f8eedf;
        --gpx-black: #0a0a0a;
        --gpx-orange: #f58634;
        --gpx-orange-soft: #f9a23c;
        --gpx-red: #d62b2b;
        --gpx-text-dark: #1a1a1a;
        --gpx-text-gray: #6b6b6b;
        --gpx-text-light: #f5f5f5;
        --gpx-text-gray-light: #c9c9c9;
        --gpx-radius: 18px;
        --gpx-gap: 28px;
        --gpx-ease: cubic-bezier(0.4, 0, 0.2, 1);

        font-family: "Glaciel Indiffernce", Arial, sans-serif;
        color: var(--gpx-text-dark);
        max-width: 1600px;
        box-sizing: border-box;
        /* No margin/padding on the wrap itself */
        margin: 0;
        padding: 0;
      }
      .gpx-wrap * {
        box-sizing: border-box;
      }
      .gpx-wrap img {
        max-width: none;
      }

      /* ============================================================
       SHARED EYEBROW / TITLE
    ============================================================ */
      .gpx-eyebrow {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--gpx-orange);
        margin: 0 0 10px;
      }
      .gpx-eyebrow::before {
        content: "";
        width: 22px;
        height: 2px;
        background: #f58634;
        display: inline-block;
      }

      .gpx-title-head {
        color: rgb(0, 0, 0, 0.8);
         font-family: "Glaciel Indiffernce", Arial, sans-serif !important;
          font-size: 
        24px !important;
        font-weight: 600 !important;

      }

      .gpx-title {
        font-size: 38px;
        font-weight: 800;
        margin: 0 0 8px;
        letter-spacing: -0.01em;
        line-height: 1.2;
         font-family: "Glaciel Indiffernce", Arial, sans-serif !important;
      }
      .gpx-subtitle {
        color: var(--gpx-text-gray);
        font-size: 16px;
        margin: 0 0 48px;
        max-width: 560px;
        line-height: 1.55;
        
      }

      /* Directors section gets bottom margin; others collapse to zero */
      .gpx-section {
        margin-bottom: 0;
      }
      .gpx-section--directors {
        margin-bottom: 64px;
      }
      .gpx-section:last-child {
        margin-bottom: 0;
      }

      /* Only directors section has a visible header */
      .gpx-section-head-director {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin-bottom: 28px;
        padding-bottom: 14px;
        border-bottom: 1px solid #ece6d9;
      }
      .gpx-section-head-director h3 {
        font-size: 22px;
        font-weight: 800;
        margin: 0;
        line-height: 1.3;
      }
      .gpx-section-head-director span {
        font-size: 13px;
        color: black;
      }

      /* ============================================================
       DESKTOP / TABLET GRID  (hidden on mobile)
    ============================================================ */
      .gpx-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--gpx-gap);
      }

      /* Gap between non-director grids */
      .gpx-section + .gpx-section .gpx-grid {
        margin-top: var(--gpx-gap);
      }

      @media (max-width: 1024px) {
        .gpx-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      /* Hide desktop grid on mobile */
      @media (max-width: 767px) {
        .gpx-grid {
          display: none;
        }
      }

      /* ============================================================
       CARD — desktop/tablet
    ============================================================ */
      .gpx-card {
        position: relative;
        border-radius: var(--gpx-radius);
        background: var(--gpx-cream);
        padding: 3px 5px 3px;
        text-align: center;
        cursor: pointer;
        overflow: hidden;
        transition:
          background 0.35s var(--gpx-ease),
          transform 0.35s var(--gpx-ease),
          box-shadow 0.35s var(--gpx-ease);
        border: 1px solid #f0e6d2;
        /* Prevent orange tap flash on desktop too */
        -webkit-tap-highlight-color: transparent;
        -webkit-user-select: none;
        user-select: none;
      }

      .gpx-card:hover,
      .gpx-card:focus-visible {
        background: var(--gpx-black);
        border-color: var(--gpx-black);
        transform: translateY(-4px);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
        outline: none;
      }
      .gpx-card:focus-visible {
        box-shadow:
          0 0 0 3px var(--gpx-orange-soft),
          0 18px 40px rgba(0, 0, 0, 0.28);
      }

      .gpx-card-photo-wrap {
        position: relative;
        width: 148px;
        height: 148px;
        margin: 0 auto 22px;
        border-radius: 50%;
        overflow: hidden;
        background: transparent;
      }

      .gpx-card-photo {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain !important;
        object-position: center 25%;
        display: block;
      }
      .gpx-card-photo--base {
        opacity: 1;
        transition: opacity 0.45s var(--gpx-ease);
      }
      .gpx-card-photo--hover {
        opacity: 0;
        transition: opacity 0.45s var(--gpx-ease);
      }
      .gpx-card:hover .gpx-card-photo--hover,
      .gpx-card:focus-visible .gpx-card-photo--hover {
        opacity: 1;
      }
      .gpx-card:hover .gpx-card-photo--base,
      .gpx-card:focus-visible .gpx-card-photo--base {
        opacity: 0;
      }

      .gpx-card-name {
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 0.01em;
        color: var(--gpx-text-dark);
        margin: 0 0 10px;
        transition: color 0.35s var(--gpx-ease);
        line-height: 1.3;
         font-family: "Glaciel Indiffernce", Arial, sans-serif !important;
      }

      .gpx-card-divider {
        width: 46px;
        height: 3px;
        margin: 0 auto 10px;
        border-radius: 2px;
        background: linear-gradient(
          90deg,
          var(--gpx-red),
          var(--gpx-orange-soft)
        );
      }

      .gpx-card-role {
        font-size: 16px;
        font-weight: 700;
        color: var(--gpx-text-gray);
        margin: 0;
        transition: color 0.35s var(--gpx-ease);
        line-height: 1.4;
        font-family: "Glaciel Indiffernce", Arial, sans-serif !important;
      }

      .gpx-card:hover .gpx-card-name,
      .gpx-card:focus-visible .gpx-card-name {
        color: #fff;
      }
      .gpx-card:hover .gpx-card-role,
      .gpx-card:focus-visible .gpx-card-role {
        color: var(--gpx-text-gray-light);
      }

      .gpx-card-social-hint {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transform: translateY(-4px);
        transition:
          opacity 0.35s var(--gpx-ease),
          transform 0.35s var(--gpx-ease);
      }
      .gpx-card:hover .gpx-card-social-hint,
      .gpx-card:focus-visible .gpx-card-social-hint {
        opacity: 1;
        transform: translateY(0);
      }
      .gpx-card-social-hint svg {
        width: 14px;
        height: 14px;
        fill: var(--gpx-orange-soft);
      }

      /* ============================================================
       DESKTOP MODAL
    ============================================================ */
      .gpx-modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(10, 10, 10, 0.72);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        opacity: 0;
        visibility: hidden;
        transition:
          opacity 0.3s ease,
          visibility 0.3s ease;
        z-index: 99999;
      }
      .gpx-modal-overlay.gpx-is-open {
        opacity: 1;
        visibility: visible;
      }

      .gpx-modal {
        position: relative;
        width: 100%;
        max-width: 760px;
        max-height: 90vh;
        background: #fff;
        border-radius: 22px;
        overflow: hidden;
        display: flex;
        align-items: stretch;
        transform: translateY(18px) scale(0.96);
        transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
        box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
      }
      .gpx-modal-overlay.gpx-is-open .gpx-modal {
        transform: translateY(0) scale(1);
      }

      /* Photo column: fills full modal height, never scrolls */
      .gpx-modal-photo-col {
        flex: 0 0 38%;
        position: relative;
        min-height: 320px;
        background: #e2dac6;
        /* Stretch to match whatever height the info col grows to */
        align-self: stretch;
      }
      .gpx-modal-photo {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center 20%;
        display: block;
      }

      /* Info column: scrolls independently when content is long */
      .gpx-modal-info-col {
        flex: 1 1 auto;
        padding: 48px 38px 40px;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        min-width: 0;
        overflow-y: auto;
        max-height: 90vh;
        scrollbar-width: thin;
        scrollbar-color: #ddd4c2 transparent;
         font-family: "Glaciel Indiffernce", Arial, sans-serif !important;
      }
      .gpx-modal-info-col::-webkit-scrollbar {
        width: 5px;
      }
      .gpx-modal-info-col::-webkit-scrollbar-track {
        background: transparent;
      }
      .gpx-modal-info-col::-webkit-scrollbar-thumb {
        background: #ddd4c2;
        border-radius: 10px;
      }

      .gpx-modal-close {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: none;
        background: rgba(0, 0, 0, 0.06);
        color: var(--gpx-text-dark);
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition:
          background 0.25s ease,
          color 0.25s ease,
          transform 0.25s ease;
        padding: 0;
        z-index: 2;
         font-family: "Glaciel Indiffernce", Arial, sans-serif !important;
      }
      .gpx-modal-close:hover {
        background: var(--gpx-orange);
        color: #fff;
        transform: rotate(90deg);
      }

      .gpx-modal-name {
        font-size: 24px;
        font-weight: 700;
        color: var(--gpx-text-dark);
        margin: 0 0 6px;
        line-height: 1.3;
         font-family: "Glaciel Indiffernce", Arial, sans-serif !important;
      }
      .gpx-modal-role {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #f58634;
        margin: 0 0 18px;
         font-family: "Glaciel Indiffernce", Arial, sans-serif !important;
      }
      .gpx-modal-about {
        font-size: 15px;
        line-height: 1.65;
        color: var(--gpx-text-gray);
        margin: 0 0 24px;
         font-family: "Glaciel Indiffernce", Arial, sans-serif !important;
      }
      .gpx-modal-about:empty {
        display: none;
        margin: 0;
      }

      .gpx-modal-socials {
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .gpx-modal-socials a {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: #f1eee6;
        display: flex;
        align-items: center;
        justify-content: center;
        transition:
          background 0.25s ease,
          transform 0.25s ease;
      }
      .gpx-modal-socials a svg {
        width: 16px;
        height: 16px;
        fill: var(--gpx-text-dark);
        transition: fill 0.25s ease;
      }
      .gpx-modal-socials a:hover {
        background: var(--gpx-orange);
        transform: translateY(-3px);
      }
      .gpx-modal-socials a:hover svg {
        fill: #fff;
      }
      .gpx-modal-socials:empty {
        display: none;
      }

      @media (max-width: 640px) {
        .gpx-modal {
          flex-direction: column;
          max-height: 92vh;
          overflow: hidden;
        }
        .gpx-modal-photo-col {
          flex: 0 0 220px;
          min-height: 220px;
          position: relative; /* reset sticky for mobile column layout */
          align-self: auto;
          height: 220px;
        }
        .gpx-modal-info-col {
          padding: 28px 24px 28px;
          max-height: none;
          /* Take remaining space and scroll */
          flex: 1 1 auto;
          overflow-y: auto;
        }
      }

      /* ============================================================
       MOBILE LAYOUT — accordion rows  (visible only ≤767px)
    ============================================================ */
      .gpx-mob-list {
        display: none;
        list-style: none;
        margin: 0;
        padding: 0;
      }

      @media (max-width: 767px) {
        /* Show mobile list */
        .gpx-mob-list {
          display: block;
        }

        /* Wrap — NO padding/margin at all */
        .gpx-wrap {
          padding: 0;
          margin: 0;
        }

        /* Directors section keeps its bottom margin */
        .gpx-section--directors {
          margin-bottom: 32px;
        }

        /* All sections: no extra spacing */
        .gpx-section {
          margin-bottom: 0;
        }

        /* 
        FIX: Border doubling issue.
        Use border-top on each item only. The section gets a bottom border
        so the last item has a closing line without doubling.
      */
        .gpx-mob-list {
          border-bottom: 1px solid #ede5d6;
        }

        .gpx-mob-item {
          border-top: 1px solid #ede5d6;
        }

        /* ---- Row: collapsed state ---- */
        .gpx-mob-row {
          display: flex;
          align-items: center;
          gap: 14px;
          padding: 14px 0;
          cursor: pointer;
          /* Remove ALL tap highlight / selection flash */
          -webkit-tap-highlight-color: transparent;
          -webkit-touch-callout: none;
          -webkit-user-select: none;
          user-select: none;
          background: none;
          border: none;
          width: 100%;
          text-align: left;
          /* Prevent any active-state colour bleed */
          outline: none;
        }
        /* Only show focus ring on keyboard navigation */
        .gpx-mob-row:focus-visible {
          outline: 2px solid var(--gpx-orange);
          outline-offset: 2px;
          border-radius: 4px;
        }
        /* Explicitly kill any browser active state colour */
        .gpx-mob-row:active {
          background: none;
          -webkit-tap-highlight-color: transparent;
        }

        /* Avatar */
        .gpx-mob-avatar {
          position: relative;
          flex-shrink: 0;
          width: 48px;
          height: 48px;
          border-radius: 50%;
          overflow: hidden;
          background: #e8dfd0;
        }
        .gpx-mob-avatar img {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center 20%;
          display: block;
          /* Prevent long-press highlight on images */
          -webkit-user-drag: none;
          pointer-events: none;
        }
        .gpx-mob-avatar .gpx-mob-avatar--base {
          opacity: 1;
          transition: opacity 0.35s ease;
        }
        .gpx-mob-avatar .gpx-mob-avatar--hover {
          opacity: 0;
          transition: opacity 0.35s ease;
        }
        /* Show hover photo when row is open */
        .gpx-mob-item.gpx-mob-open .gpx-mob-avatar--base {
          opacity: 0;
        }
        .gpx-mob-item.gpx-mob-open .gpx-mob-avatar--hover {
          opacity: 1;
        }

        /* Text block */
        .gpx-mob-info {
          flex: 1 1 auto;
          min-width: 0;
        }
        .gpx-mob-name {
          font-size: 15px;
          font-weight: 700;
          color: var(--gpx-text-dark);
          margin: 0 0 3px;
          line-height: 1.3;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
           font-family: "Glaciel Indiffernce", Arial, sans-serif !important;
        }
        .gpx-mob-role {
          font-size: 11px;
          font-weight: 600;
          letter-spacing: 0.09em;
          text-transform: uppercase;
          color: var(--gpx-text-gray);
          margin: 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
           font-family: "Glaciel Indiffernce", Arial, sans-serif !important;
        }

        /* + / × toggle button */
        .gpx-mob-toggle {
          flex-shrink: 0;
          width: 30px;
          height: 30px;
          border-radius: 50%;
          border: 1.5px solid #ddd4c2;
          background: transparent;
          display: flex;
          align-items: center;
          justify-content: center;
          transition:
            background 0.25s ease,
            border-color 0.25s ease,
            transform 0.35s ease;
          pointer-events: none; /* row itself handles click */
          /* No tap highlight on this either */
          -webkit-tap-highlight-color: transparent;
        }
        .gpx-mob-toggle svg {
          width: 14px;
          height: 14px;
          fill: none;
          stroke: var(--gpx-text-gray);
          stroke-width: 2;
          stroke-linecap: round;
          transition:
            stroke 0.25s ease,
            transform 0.35s ease;
        }
        .gpx-mob-item.gpx-mob-open .gpx-mob-toggle {
          background: var(--gpx-orange);
          border-color: var(--gpx-orange);
        }
        .gpx-mob-item.gpx-mob-open .gpx-mob-toggle svg {
          stroke: #fff;
          transform: rotate(45deg);
        }

        /* ---- Drawer: expanded state ---- */
        .gpx-mob-drawer {
          overflow: hidden;
          max-height: 0;
          transition:
            max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.3s ease,
            padding 0.3s ease;
          opacity: 0;
          padding: 0 0 0 62px; /* indent to align with text (avatar 48 + gap 14) */
        }
        .gpx-mob-item.gpx-mob-open .gpx-mob-drawer {
          max-height: 600px;
          opacity: 1;
          padding: 0 0 20px 62px;
        }

        .gpx-mob-bio {
          font-size: 13.5px;
          line-height: 1.65;
          color: var(--gpx-text-gray);
          margin: 0 0 14px;
        }
        .gpx-mob-bio:empty {
          display: none;
          margin: 0;
        }

        /* Social links in drawer */
        .gpx-mob-socials {
          display: flex;
          align-items: center;
          gap: 10px;
        }
        .gpx-mob-socials:empty {
          display: none;
        }
        .gpx-mob-socials a {
          width: 34px;
          height: 34px;
          border-radius: 50%;
          background: #f1eee6;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: background 0.2s ease;
          text-decoration: none;
          -webkit-tap-highlight-color: transparent;
        }
        .gpx-mob-socials a svg {
          width: 15px;
          height: 15px;
          fill: var(--gpx-text-dark);
          transition: fill 0.2s ease;
          pointer-events: none;
        }
        .gpx-mob-socials a:active,
        .gpx-mob-socials a:hover {
          background: var(--gpx-orange);
        }
        .gpx-mob-socials a:active svg,
        .gpx-mob-socials a:hover svg {
          fill: #fff;
        }

        /* Directors heading stays, tighten on mobile */
        .gpx-section-head-director {
          margin-bottom: 16px;
        }
      }

      /* ============================================================
       ASTRA THEME OVERRIDE
       Astra's global button:hover/focus rule catches .gpx-mob-row
       (which is a <button>) and applies a yellow background.
       These overrides beat that specificity using !important.
    ============================================================ */
      .gpx-wrap .gpx-mob-row:hover,
      .gpx-wrap .gpx-mob-row:focus,
      .gpx-wrap .gpx-mob-row:active {
        color: inherit;
        background-color: transparent !important;
        border-color: transparent !important;
      }

      /* Kill Astra styles on the toggle circle too */
      .gpx-wrap .gpx-mob-toggle:hover,
      .gpx-wrap .gpx-mob-toggle:focus {
        background-color: transparent !important;
        border-color: #ddd4c2 !important;
      }

      /* Restore the open-state orange toggle correctly */
      .gpx-wrap .gpx-mob-item.gpx-mob-open .gpx-mob-toggle {
        background-color: var(--gpx-orange) !important;
        border-color: var(--gpx-orange) !important;
      }/* End custom CSS */