/* above 1020px */
@media only screen and (min-width: 1020px) {
    header {
        background-position: center;
        padding-bottom: 8rem;
    }
}
@media only screen and (max-width: 1300px) {
    
}
/* below 1300 */
/* this will control the custom design lists when screen is too small to accommodate */
@media only screen and (max-width: 1300px) {
    .hidden-custom-design {
        display: none;
        background-color: var(--div-gray-bckgrd);
        position: relative;
        z-index: 2;
        top: 0px;
        left: 0;
        right: 0;
    }
    .hidden-custom-design .accordion-dropdown {
        position: relative;
    }
    .custom-design-section .flex {
        flex-direction: column;
    }
    #skewed-rectangle {
        display: none;
    }
    .description.flex {
        flex-direction: row;
    }
    .requirements {
        padding-left: 0;
    }
}

/* -------- screen size below 1020px ------------ */
@media only screen and (max-width: 1078px) {
    h2 {
        font-size: 2.2rem;
    }
    /* nav {
        position: unset;
    } */
    /* hamburger navigation */
    .hamburger-nav {
      display: block;
      /* position: fixed;
      top: 27px;
      right: 20%; */
      font-size: 16px;
    }
    .nav-menu-dropdown {
        display: none;
    }
    .nav-menu {
        display: none;
    }
    nav .menu {
      position: absolute;
      left: 2000px !important;
    }
    nav .nav-container {
        padding: 16px 32px;
    }
    nav img {
        padding: 0;
    }
    .show-hamburgerNav {
      position: absolute;
      left: 0px !important;
      top: 76px !important;
      right: 0px !important;
      display: block;
      background-color: var(--div-gray-bckgrd);
      padding: 1rem;
      text-align: right;
      box-shadow: 1px 3px 5px rgb(0 0 0 / 10%);
    }
    #about-MC-button {
        margin-bottom: 12px;
        border-bottom: 1px solid var(--gray);
        padding-bottom: 12px;
        display: block;
    }
    .show-hamburgerNav button {
      margin-top: 5px;
    }
    .dropdown-menu.show {
      margin-left: 0;
    }
    .search {
      display: none;
    }
    .search-hamburger {
      display: inline;
      position: fixed;
      top: 10px;
      right: 65px;
    }
    .search-hamburger button {
      border: none;
    }
    #searchInput {
      width: 105px;
      border: none;
      border-bottom: 1px solid #efefef;
      padding-top: 10px;
    }
    #services-button:hover {
        background-color: transparent;
        color: var(--button-color);
    }
    #services-button {
        padding: 1rem;
    }
    #menu {
        column-gap: 30px
    }
    #contact-button-technology {
        padding: 1rem 1rem;
    }
    #contact-button-creative {
        padding: 1rem 1rem;
        width: 90%;
    }
    /* --------- header ------------ */
    header {
        background-size: cover;
        background-repeat: no-repeat;
        padding-bottom: 8rem;
        padding: 1rem;
        min-height: 500px;
        margin-top: -6px;
        padding-left: 3rem;
    }
    header h1 {
        padding-top: 0;
        font-size: 6rem;
        padding-bottom: 1rem;
        max-width: 75%;
        line-height: 1;
    }
    
    .portal-nav {
        padding-left: 10rem;
    }
    /* ---------------boxit demo section 1020px ------------ */
    .boxit-right-container {
        margin-top: -120px;
        margin-left: -6%;
    }
    .boxit-upper {
        padding: 1rem 3rem 1rem 5rem;
    }
    .boxit-upper h3 {
        font-size: 1.3rem;
        margin: 12px 0 20px 0;
    }
    #boxit-demo .is-underlined {
        font-size: 15px;
    }
    .boxit-bottom {
        padding: 1rem 2rem 1rem 5rem;
    }
    .arrow {
        width: 18px;
    }
    .boxit-bottom-1, .boxit-bottom-2 {
        text-align: left;
        padding-left: 4rem;
    }

    /* --------------client facing section ----------------*/
    .gray-background {
        padding: 1rem 2rem;
    }
    #client.flex {
        display: block;
        padding: 2rem 10% 7rem;
    }
    .client-left {
        max-width: 60%;
    }
    .client-left h2 {
        margin: 1rem auto;
    }
    .client-left p {
        padding: 10px 0 0 2rem;
        max-width: 90%;
    }
    .gray-background .client-left {
        padding: 2rem 1rem;
    }
    .red-block-button {
        width: 100%;
        margin: 1rem auto;
        padding: 12px;
    }
    /* ------------- mc 1:1 section ------------------- */
    #spaceship {
        width: 50%;
    }
    #mc-one-on-one {
        margin-top: -7%;
    }
    #mc-one-on-one > div {
        margin-left: -12%;
    }
    /* ------------- portal section ---------------------- */
    #portal {
        min-height: 570px;
    }
    #skewed-rectangle {
        /* border-bottom: 570px solid rgb(222 55 57); */
        border-left: 61px solid transparent;
        border-right: 502px solid transparent;
        width: 298px;
        margin: auto;
        left: 106px;
    }
    .portal-left h2 span {
        font-size: 4.5rem;
    }
    .portal-left {
        padding: 3rem 4rem 0 1rem;
    }
    .portal .accordion-title {
        padding-right: 0;
    }
    .accordion-title {
        font-size: 15px;
        padding: 2px;
    }
    /* ----------- MISC section ------------------- */
    .misc-section {
        padding: 2rem;
        background-position: right;
        justify-content: space-evenly;
    }
    .misc-section h2 {
        padding-bottom: 0;
        font-size: 4rem;
        padding-right: 2rem;
    }
    .misc-section .red-block-button {
        padding: 1rem;
        width: unset;
    }
    .misc-section .red-block-button span {
        margin-right: 8px;
        font-size: 14px;
    }
    .misc-section img {
        max-width: 18px;
        margin-bottom: -4px;
    }
    .misc-menu {
        width: 45%;
    }
    /* ----- custom design section ------- */
    .custom-design-section .flex {
        padding: 2rem;
        width: 75%;
        margin: auto;
    }
    .custom-design-section .left {
        width: 40%;
        padding: 1rem 2rem 1rem 1rem;
    }
    .left h2 {
        font-size: 2.25rem;
    }
    .right.menu {
        width: 46%;
        min-width: unset;
    }
    .custom-design-section .accordion-title {
        padding-right: 0;
    }
    /* ------------- groupbuy section ---------- */
    .gb-contents .left, .gb-contents .right {
        width: 45%;
    }
    .gb-request p {
        width: 85%;
        margin: 2rem auto;
    }

}

  /* ------- screen size below  900px ---------*/
@media only screen and (max-width: 900px) {
    .show-hamburgerNav {
        top: 75px !important;
    }
    header div {
        padding: 0 0 17rem 1em;
    }
    .client-left {
        max-width: 50%;
    }
    .client-left p {
        padding: 10px 0 0 0;
    }
    .red-block-button {
        padding: 11px;
    }
    #portal {
        min-height: unset;
    }
    /* additional services section */
    .misc-menu {
        display: block;
        width: 36%;
    }

    .red-button-menu-item {
        width: 85%;
        position: relative;
        margin: 10px auto;
    }
    .misc-section .red-block-button {
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
    }
    .misc-menu a.red-button {
        font-size: 12px;
    }
    .accordion-dropdown div {
        padding: 9px;
    }
    /* -----------footer --------------*/
    footer .right {
        width: unset;
    }
    footer .right h3 {
        padding: 1rem;
        padding-left: 0;
        border-left: none;
    }
    /* ----- team page ------ */
    .intro {
        margin-top: 6rem;
        padding: 1rem;
    }
    .intro div {
        width: 100%;
    }
    .intro h1 {
        font-size: 3rem;
    }
    .intro h1 span {
        font-size: 5rem;
    }
    .team {
        width: 68%;
    }
    .row {
        flex-direction: column;
        align-items: center;
    }
}
@media only screen and (max-width: 770px) {
    /* misc */
    .misc-section {
        display: block;
    }
    .misc-section h2 {
        padding-bottom: 0;
        font-size: 2.9rem;
        padding-right: 0;
        text-align: center;
    }
    .red-button-menu-item {
        width: 100%;
        position: relative;
        margin: 10px auto;
    }
    .misc-section .red-block-button {
        display: flex;
        justify-content: space-between;
    }
    .misc-menu {
        width: 100%;
        margin: 0;
    }
    .misc-menu a.red-button {
        font-size: 12px;
    }
    .misc-section .accordion-dropdown {
        background-color: #f7f7f7;
        width: 100%;
        left: 0;
    }
    .accordion-dropdown div {
        padding: 9px;
    }
        /* boxit */
        #boxit-demo {
            display: block;
            text-align: center;
            margin-bottom: 0;
        }
        img#laptop {
            width: 75%;
            z-index: 2;
            margin-top: 0;
            max-width: 670px;
            margin: auto;
            margin-bottom: 3rem;
        }
        .boxit-right-container {
            margin-top: -110px;
            margin-left: 0;
        }
        .boxit-upper {
            padding: 4rem 0 0;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }
        .boxit-upper h3  {
            margin: 12px 0 20px 0;
            text-align: left;
        }
        #boxit-demo .is-underlined {
            background-color: var(--red);
            color: white;
            padding: 8px 12px;
        }
        .boxit-bottom {
            padding: 10px 2rem 10px 5rem;
            text-align: left;
        }
        .boxit-bottom-1, .boxit-bottom-2 {
            padding-left: 2rem;
        }
}
@media only screen and (max-width: 600px) {
    
    .flex {
        flex-direction: column;
    }
    h2 {
        font-size: 2rem;
    }
    nav {
        padding: 0;
        display: block;
    }
    nav .down-arrow {
        display: none;
    }
    #menu {
        top: 39px;
        width: 71%;
        column-count: 1;
        text-align: right;
        height: auto;
        padding: 1rem 2rem;
    }
    #menu br {
        display: none;
    }
    .sub-item {
        display: none !important;
    }
    nav a {
        font-size: 14px;
    }
    .show-hamburgerNav {
        top: 68px !important;
    }
    .search-hamburger, #home-button {
      display: none;
    }
    .text-left {
      padding: 0 1rem;
    }
    .details p {
        font-size: 13px;
    }
    .grow {
        transition: none; 
    }
    .grow:hover {
        background-color: var(--button-hover-color);
        transform: none;
    }
    a.grow:hover {
        background-color: var(--button-hover-color);
        transform: none;
    }
    /* header  */
    header {
        background-size: contain;
        background-repeat: no-repeat;
        min-height: unset;
        padding-left: 1rem;
    }
    header h2 {
        font-size: 18px;
        padding-top: 0;
    }
    header h1 {
        font-size: 4rem;
        padding: 0 !important;
        max-width: none;
        margin: 0;
        line-height: 1;
    }
    header div {
        padding: 5rem 0 7rem 1rem;
    }

    /* client assessment */
    .red-block-button {
        padding: 1rem;
        width: auto;
    }
    .red-block-button > h2 {
        font-size: 15px;
    }
    .client-left p {
        padding: 10px 0 0 1rem;
        max-width: 93%;
    }
    .gray-background {
        padding: 1rem 2rem 4rem;
    }
    .gray-background .client-left {
        max-width: 100%;
    }
    .gray-background .client-right {
        width: 90%;
        margin-bottom: 2rem;
    }
    /* mc 1:1 */
    #mc-one-on-one {
        margin-top: -15%;
        display: block;
        text-align: center;
    }
    #spaceship {
        width: 80%;
    }
    #mc-one-on-one .right {
        position: relative;
        text-align: left;
        margin: auto;
        margin-top: -12rem;
        padding: 3rem;
    }
    #mc-one-on-one h2 {
        color: var(--red);
        margin: 0rem 0 1rem;
        font-size: 2rem;
    }
    #mc-one-on-one .menu {
        padding-left: 0;
    }
    #mc-one-on-one .accordion-dropdown {
        width: 76%;
    }
    /* portal */
    #portal {
        min-height: 250px;
    }
    .portal {
        align-items: center;
    }
    .portal-header {
        padding: 0;
    }
    .portal-left h2 {
        font-size: 2.5rem;
    }
    #skewed-rectangle {
        display: none;
    }
    .portal-inner {
        padding: 2rem;
    }
    .portal-left {
        padding: 1rem 4rem 0 1rem;
    }
    .portal .menu {
        z-index: 2;
        position: relative;
        padding: 3rem 1rem;
    }
    .portal .accordion-dropdown {
        width: 90.5%;
    }
    .portal-header h2 span {
        font-size: 5rem;
    }


    /* custom design */
    .custom-design-header {
        padding: 5rem 2rem;
    }
    .custom-design-header h2 {
        font-size: 2rem;
    }
    .custom-design-header h2 span {
        font-size: 2.9rem;
    }
    .custom-design-section .flex {
        padding: 2rem;
        display: block;
    }
    .custom-design-section .left {
        width: 85%;
        padding: 0 2rem 1rem 1rem;
    }
    .right.menu {
        width: 90%;
    }
    .requirements {
        width: 100%;
    }
    .requirements p {
        line-height: 1.2;
    }
    p.note {
        width: 100%;
    }
    .description.flex {
        padding-top: 0;
    }
    /* creative */
    .cr-header {
        padding: 2rem 3rem;
    }
    .creative h2 {
        font-size: 3rem;
    }
    /* groupbuy */
    .gb-header {
        padding: 1px;
    }
    .gb-header h2 {
        font-size: 2.5rem;
        text-align: center;
        color: white;
    }   
    .gb-contents {
        display: block;
    }
    .gb-contents .left, .gb-contents .right {
        width: 90%;
        margin: auto;
    }
    .gb-contents li {
        line-height: 1.25;
        margin-bottom: 7px;
    }
    .gb-contents h2 {
        font-size: 2rem;
        margin-top: 2rem;
        margin-bottom: 0;
    }
    .requirements {
        margin-top: 0 !important;
    }
    /* additional services  */
    .misc-menu {
        width: 80%;
        margin: 0 auto;
    }
    /* modal */
    .modal {
        top: 10%;
    }
    .modal-img-container {
        flex-direction: column;
    }
    .modal img {
        max-width: 100%;
    }
    /* footer */
    footer {
        margin: 0 auto;
    }
    footer .container {
        padding: 3rem;
        margin: 0 auto;
    } 
    footer .left {
        width: unset;
        margin: unset;
    }
    footer .logo {
        width: 100%;
        padding: 0;
    }
    footer .logo img {
        margin: 1rem 0;
    }
    footer .social-buttons img {
        margin: 0 2px;
	width: 90%;
    }
    footer .social-buttons {
        display: flex;
    }
    .footer-nav a {
        font-size: 14px;
    }
}
@media only screen and (min-width: 600px){
    #home-icon {
        display: none;
    }
}
@media only screen and (max-width: 420px) {
    /* additional services  */
    .misc-menu {
        width: 100%;
        margin: 0 auto;
    }
}

/* =====================================================================
   MOBILE FIX LAYER  appended at end (keeps desktop intact)
   Targets common overflow/spacing issues and stacks two-column sections.
   Breakpoint chosen to fit your existing mobile scale.
   ===================================================================== */
@media (max-width: 600px) {
  html, body { overflow-x: hidden; }

  /* Global flex layouts: stack and remove huge side paddings */
  .flex { flex-direction: column !important; align-items: stretch !important; }

  .left, .right,
  .presentations .left, .presentations .right,
  .client-left, .client-right {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .presentations .left { padding-right: 16px !important; }
  .presentations .right { padding-left: 16px !important; }

  /* Buttons should be easy to tap and not overflow */
  .red-block-button, .red-button, .white-button {
    width: 100%;
    text-align: center;
  }

  /* Nav clean-up: ensure hamburger menu block fills width when opened */
  .show-hamburgerNav {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  nav .nav-container { padding-left: 16px !important; padding-right: 16px !important; }
  .nav-menu .dropdown-item, .nav-menu .nav-menu-item { padding: 10px 8px; }

  /* Accordion & menus: keep inside viewport */
  .accordion-dropdown,
  .portal .accordion-dropdown {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box;
  }

  /* Portal section spacing */
  .portal-inner { padding: 1rem !important; }
  .portal-header { padding: 1rem !important; }
  .portal-left { padding: 0 1rem !important; }
  .portal .menu { padding: 1rem !important; }

  /* BoxIt block: neutralize large paddings/margins that push content off-screen */
  .boxit-right-container { margin-left: 0 !important; margin-top: 0 !important; }
  .boxit-upper { padding: 1rem !important; }
  .boxit-bottom, .boxit-bottom-1, .boxit-bottom-2 {
    padding: 0.75rem 1rem !important;
  }

  /* Images/iframes fluid */
  img, video, iframe { max-width: 100% !important; height: auto !important; }

  /* Footer columns stack nicely */
  footer .container,
  footer .flex { flex-direction: column !important; }
  footer .left, footer .right, footer .footer-nav {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Slightly wider phones/phablets  reduce over-padding from desktop */
@media (max-width: 770px) {
  .left, .right { padding-left: 16px !important; padding-right: 16px !important; }
  .portal .accordion-title { padding-right: 0 !important; }
  .menu p { padding: 6px 8px !important; }
}

/* ==================== Mobile: Marketing Collateral accordion polish ==================== */
@media (max-width: 600px) {
  /* Make the right-side resources menu full-width and comfortable */
  .menu {
    width: 70% !important;
    padding: 1rem !important;
    box-sizing: border-box;
  }

  /* Tappable accordion titles */
  .accordion-title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px;
    line-height: 1.3;
    border-radius: 8px;
    border: 1px solid var(--div-gray-bckgrd);
    background: #fff;
  }
  .accordion-title .down-arrow {
    width: 18px;
    height: auto;
    margin-left: auto;
    flex: 0 0 auto;
  }

  /* Dropdown panel should never overflow */
  .accordion-dropdown {
    width: 100% !important;
    box-sizing: border-box;
    margin: 8px 0 16px;
    padding: 12px 14px !important;
    background: #fff;
    border-left: 3px solid var(--div-gray-bckgrd);
  }
  .accordion-dropdown .inside-tile {
    padding: 0 !important;
  }

  /* Long links wrap nicely on small screens */
  .accordion-dropdown a, .accordion-dropdown p, .accordion-title span {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}
/* ==================== /Mobile: Marketing Collateral accordion polish ==================== */

/* ==== Mobile: left-align Marketing Collateral accordions so everything lines up ==== */
@media (max-width: 600px) {
  /* Keep a consistent left edge for menu heading, titles, and dropdowns */
  .menu h5,
  .accordion-title,
  .accordion-dropdown {
    text-align: left !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Make the inner text blocks follow the same left edge */
  .accordion-title span,
  .accordion-dropdown p,
  .accordion-dropdown a,
  .accordion-dropdown .inside-tile {
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  /* Remove the dropdown left border so titles and content align perfectly */
  .accordion-dropdown {
    border-left: none !important;
  }

  /* Keep the arrow at the far right while preserving left alignment of text */
  .accordion-title {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .accordion-title .down-arrow {
    margin-left: auto; /* stays on the right edge */
  }
}
/* ==== /Mobile: left-align accordions ==== */

/* ==== Mobile: move accordion dropdown arrows to the LEFT ==== */
@media (max-width: 600px) {
  .accordion-title {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .accordion-title .down-arrow {
    margin-left: 0 !important;
    margin-right: 10px !important;
    width: 18px !important;
  }
}
/* ==== /Mobile: left arrows ==== */

/* =====================================================================
   ENHANCED MOBILE RESPONSIVENESS (non-destructive)
   Targets small screens while preserving desktop and HTML structure.
   ===================================================================== */

/* Phones */
@media (max-width: 600px) {
  html, body { overflow-x: hidden; }

  /* Fluid media */
  img, video, iframe { width: 100% !important; height: auto; display: block; }

  /* Container padding for breathing room */
  .container { padding-left: 16px !important; padding-right: 16px !important; }

  /* Headings scale */
  h1 { font-size: 2rem !important; line-height: 1.2; }
  h2 { font-size: 1.6rem !important; line-height: 1.25; }
  h3 { font-size: 1.25rem !important; line-height: 1.3; }
  p  { font-size: 1rem; line-height: 1.55; }

  /* Nav: hamburger panel fills width, links are tappable */
  .show-hamburgerNav {
    left: 0 !important; right: 0 !important; width: 100% !important;
    max-height: calc(100dvh - 56px); overflow-y: auto;
    box-sizing: border-box;
  }
  .nav-menu .dropdown-item, .nav-menu .nav-menu-item { padding: 12px 10px !important; }

  /* Generic columns -> stack */
  .flex { flex-direction: column !important; align-items: stretch !important; }
  .left, .right,
  .presentations .left, .presentations .right,
  .client-left, .client-right {
    max-width: 100% !important; width: 100% !important;
    padding-left: 16px !important; padding-right: 16px !important;
  }
  .left { padding-right: 16px !important; }
  .right { padding-left: 16px !important; }

  /* Tiles / cards stretch full width */
  .presentation-card, .card, .tile, .inside-tile { width: 100% !important; }

  /* Portal block */
  .portal-inner, .portal-header, .portal-left, .portal .menu {
    padding: 1rem !important; box-sizing: border-box;
  }
  .portal .accordion-dropdown { width: 100% !important; left: 0 !important; right: 0 !important; }

  /* BoxIt blocks — tame large paddings/margins */
  .boxit-right-container { margin-left: 0 !important; margin-top: 0 !important; }
  .boxit-upper { padding: 1rem !important; display: flex; flex-direction: column;}
  .boxit-bottom, .boxit-bottom-1, .boxit-bottom-2 { padding: 0.75rem 1rem !important; }

  /* Buttons: easy to tap */
  .red-block-button, .red-button, .white-button { width: 92%; text-align: center; }

  /* Footer stack */
  footer .container, footer .flex { flex-direction: column !important; }
  footer .left, footer .right, footer .footer-nav {
    width: 100% !important; max-width: 100% !important;
    padding-left: 16px !important; padding-right: 16px !important;
  }
}

/* Phablets up to ~770px: trim desktop spacing */
@media (max-width: 770px) {
  .left, .right { padding-left: 16px !important; padding-right: 16px !important; }
  .menu p { padding: 6px 8px !important; }
}

/* =============================================================
   Mobile: add consistent RIGHT padding to match the left (=600px)
   Prevents text from hugging/overflowing the right edge.
   ============================================================= */
@media (max-width: 600px) {
  /* Core layout wrappers */
  .container,
  nav .nav-container,
  section,
  .flex,
  .left, .right,
  .presentations .left, .presentations .right,
  .portal-inner, .portal-header, .portal-left, .portal .menu,
  .menu,
  .accordion-dropdown,
  .boxit-upper, .boxit-bottom, .boxit-bottom-1, .boxit-bottom-2,
  footer .container, footer .left, footer .right, footer .footer-nav {
    padding-right: 16px !important;
    padding-left: 16px !important;
    box-sizing: border-box;
  }

  /* Safety: long words/URLs wrap instead of overflow */
  h1, h2, h3, h4, h5, h6, p, a, li, span {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}
/* ================================================================================ */

/* ===== Password Gate Styles ===== */
.pw-gate {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(10, 12, 20, 0.85);
  backdrop-filter: blur(3px);
  z-index: 99999;
}
.pw-card {
  width: min(92vw, 420px);
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  text-align: center;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.pw-card h2 { margin: 0 0 8px; color: #222; }
.pw-card p { margin: 0 0 18px; color: #444; }
#pw-form { display: grid; gap: 12px; }
#pw-input {
  border: 1px solid #d0d4dd;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 16px;
  outline: none;
}
#pw-input:focus {
  border-color: #5252a3;
  box-shadow: 0 0 0 4px rgba(82,82,163,0.15);
}
#pw-form button {
  border: 0;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 16px;
  cursor: pointer;
  background: #5252a3;
  color: #fff;
}
#pw-form button:hover { filter: brightness(0.92); }
.pw-error { margin: 2px 0 0; color: #c62828; font-size: 14px; }


/* ===== Boundless Branding for Password Gate ===== */
.pw-logo {
  max-width: 200px;
  margin-bottom: 1rem;
}
.pw-card h2 {
  color: #E73C3E; /* Boundless Red */
  font-weight: 700;
}
#pw-form button {
  background: #5252a3; /* Purple-Blue */
  border: 2px solid #E73C3E;
  font-weight: 600;
  letter-spacing: 0.5px;
}
#pw-form button:hover {
  background: #3f3f85;
  border-color: #c8102e;
}