/* =========================================================
     Home page Who We Serve: Desktop Horizontal Tabs + Mobile Drawer Accordion
     ========================================================= */

  .who-serve-section{
    padding: var(--section-space-normal, clamp(60px, 6.5vw, 84px)) 0;
    background: #fff;
  }

  .who-serve-section .section-head{
    margin-bottom: clamp(28px, 3.5vw, 40px);
  }

  /* Desktop Horizontal Tab Bar */
  .who-serve-desktop-tabs{
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 24px;
    background: var(--light, #F5F7FA);
    padding: 6px;
    border: 1px solid var(--border, #D9DEE8);
    border-radius: 8px;
  }

  .who-serve-tab-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted, #5B6472);
    font-family: var(--font-primary);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--motion-fast, 0.16s) ease, color var(--motion-fast, 0.16s) ease, box-shadow var(--motion-fast, 0.16s) ease;
  }

  .who-serve-tab-btn:hover{
    background: rgba(13, 20, 48, 0.06);
    color: var(--deep-navy, #0B1726);
  }

  .who-serve-tab-btn.is-active{
    background: var(--deep-navy, #0D1430);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(13, 20, 48, 0.18);
  }

  /* Desktop Showcase Panel */
  @media(min-width: 901px){
    .who-serve-panel{
      display: none;
    }

    .who-serve-panel.is-active{
      display: block;
      animation: fadeInTab 240ms var(--ease-out);
    }

    .who-serve-trigger{
      display: none; /* Hide mobile accordion button on desktop */
    }

    .who-serve-panel-body{
      display: grid !important;
      grid-template-columns: 1.15fr 0.85fr;
      background: var(--surface-dark, #0D1430);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 20px 48px rgba(11, 23, 38, 0.28);
    }

    .who-serve-copy{
      padding: clamp(36px, 4vw, 54px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
    }

    .who-serve-copy .panel-eyebrow{
      color: var(--red, #C51E24);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    .who-serve-copy h3{
      margin: 0 0 16px;
      color: #FFFFFF !important;
      font-family: var(--font-primary);
      font-size: clamp(24px, 2.3vw, 32px);
      font-weight: 700;
      line-height: 1.18;
      letter-spacing: -0.01em;
      -webkit-text-fill-color: #FFFFFF !important;
    }

    .who-serve-copy p{
      margin: 0 0 20px;
      color: rgba(255, 255, 255, 0.80) !important;
      font-size: 15.5px;
      line-height: 1.68;
      max-width: 540px;
    }

    .who-serve-features{
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px 24px;
      margin: 0 0 28px;
      padding: 16px 0;
      border-top: 1px solid rgba(255, 255, 255, 0.12);
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
      list-style: none;
    }

    .who-serve-features li{
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 4px 0;
      border: 0;
      color: #FFFFFF !important;
      font-size: 13.5px;
      font-weight: 600;
    }

    .who-serve-features li::before{
      content: "✓";
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      color: var(--red, #C51E24);
      font-weight: 900;
      font-size: 12px;
    }

    .who-serve-media{
      min-height: 480px;
      height: 100%;
      background: #060B18;
      overflow: hidden;
      position: relative;
    }

    .who-serve-media img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      transition: transform 400ms ease;
    }

    .who-serve-panel-body:hover .who-serve-media img{
      transform: scale(1.03);
    }
  }

  @keyframes fadeInTab {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Mobile Accordion Drawer (≤900px) */
  @media(max-width:900px){
    .who-serve-desktop-tabs{
      display: none; /* Hide top tab bar on mobile */
    }

    .who-serve-accordion{
      display: block;
      border: 1px solid var(--border, #D9DEE8);
      border-radius: 12px;
      overflow: hidden;
      background: #fff;
    }

    .who-serve-panel{
      display: block;
      border-bottom: 1px solid var(--border, #D9DEE8);
    }

    .who-serve-panel:last-child{
      border-bottom: 0;
    }

    .who-serve-trigger{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 18px 20px;
      border: 0;
      background: #fff;
      color: var(--deep-navy, #0B1726);
      font-family: var(--font-primary);
      font-size: 15px;
      font-weight: 700;
      text-align: left;
      cursor: pointer;
    }

    .who-serve-trigger .who-serve-index{
      color: var(--red, #C51E24);
      font-size: 12px;
      font-weight: 700;
      margin-right: 4px;
    }

    .who-serve-trigger::after{
      content: "+";
      color: var(--red, #C51E24);
      font-size: 20px;
      font-weight: 700;
      margin-left: auto;
    }

    .who-serve-panel.is-active .who-serve-trigger{
      background: var(--deep-navy, #0D1430);
      color: #fff;
    }

    .who-serve-panel.is-active .who-serve-trigger::after{
      content: "−";
      color: #fff;
    }

    .who-serve-panel-body{
      display: none;
      background: var(--deep-navy, #0D1430);
      color: #fff;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .who-serve-panel.is-active .who-serve-panel-body{
      display: block;
    }

    .who-serve-media{
      height: 220px;
      overflow: hidden;
    }

    .who-serve-media img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .who-serve-copy{
      padding: 24px 20px 28px;
    }

    .who-serve-copy .panel-eyebrow{
      color: var(--red, #C51E24);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 8px;
      display: block;
    }

    .who-serve-copy h3{
      color: #fff !important;
      font-size: 20px;
      line-height: 1.25;
      margin: 0 0 12px;
    }

    .who-serve-copy p{
      color: rgba(255, 255, 255, 0.8) !important;
      font-size: 14.5px;
      line-height: 1.6;
      margin: 0 0 16px;
    }

    .who-serve-features{
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      margin: 0 0 20px;
      padding: 12px 0;
      border-top: 1px solid rgba(255, 255, 255, 0.12);
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
      list-style: none;
    }

    .who-serve-features li{
      color: #fff !important;
      font-size: 13px;
      font-weight: 600;
    }

    .who-serve-features li::before{
      content: "✓ ";
      color: var(--red, #C51E24);
      font-weight: 900;
    }

    .who-serve-cta{
      width: 100%;
      justify-content: center;
    }
  }

  @media(max-width:520px){
    .who-serve-features{
      grid-template-columns:1fr;
      gap:0;
    }

    .who-serve-media{
      height:190px;
    }
  }

  .client-proof-section{
    padding:var(--space-section-y) 0;
    background:#F5F7FA;
    border-top:1px solid #d6deea;
    border-bottom:1px solid #d6deea;
  }

  .client-proof-section .section-head{
    margin-bottom:28px;
  }

  .client-logo-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    border:1px solid #d6deea;
    background:#fff;
  }

  .client-logo-card{
    min-height:112px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:14px 20px;
    border-right:1px solid #d6deea;
    border-bottom:1px solid #d6deea;
    background:#fff;
  }

  .client-logo-card:nth-child(3n){
    border-right:0;
  }

  .client-logo-card:nth-last-child(-n + 3){
    border-bottom:0;
  }

  .client-logo-card img{
    display:block;
    max-width:92%;
    max-height:94px;
    object-fit:contain;
  }

  .client-logo-card.logo-torobo img,
  .client-logo-card.logo-reliance img,
  .client-logo-card.logo-bureau img{
    max-height:102px;
  }

  .client-logo-card.logo-transworld img,
  .client-logo-card.logo-hawai img{
    max-width:92%;
  }

  .client-proof-note{
    margin:16px 0 0;
    color:#667085;
    font-size:13.5px;
    line-height:1.5;
  }

  @media(max-width:900px){
    .client-proof-section{
      padding:56px 0;
    }

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

    .client-logo-card{
      min-height:100px;
      padding:14px 16px;
    }

    .client-logo-card:nth-child(3n){
      border-right:1px solid #d6deea;
    }

    .client-logo-card:nth-child(2n){
      border-right:0;
    }

    .client-logo-card:nth-last-child(-n + 3){
      border-bottom:1px solid #d6deea;
    }

    .client-logo-card:nth-last-child(-n + 2){
      border-bottom:0;
    }

    .client-logo-card img{
      max-height:82px;
    }

    .client-logo-card.logo-torobo img,
    .client-logo-card.logo-reliance img,
    .client-logo-card.logo-bureau img{
      max-height:90px;
    }
  }

  @media(max-width:520px){
    .client-logo-grid{
      grid-template-columns:1fr;
    }

    .client-logo-card,
    .client-logo-card:nth-child(2n),
    .client-logo-card:nth-child(3n){
      border-right:0;
    }

    .client-logo-card:nth-last-child(-n + 2){
      border-bottom:1px solid #d6deea;
    }

    .client-logo-card:last-child{
      border-bottom:0;
    }

    .client-logo-card img{
      max-height:86px;
    }

    .client-logo-card.logo-torobo img,
    .client-logo-card.logo-reliance img,
    .client-logo-card.logo-bureau img{
      max-height:96px;
    }
  }
  /* Homepage hero refinement */

  #home.hero{
    padding:0;
    background:linear-gradient(118deg,#0b132f 0%,#111d45 52%,#071026 100%);
  }

  #home.hero:before{
    background:
      linear-gradient(105deg,rgba(196,39,46,.075),transparent 38%),
      linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px);
    background-size:auto,88px 88px,88px 88px;
  }

  #home .hero-content{
    max-width:680px;
  }

  #home.hero h1{
    max-width:760px;
    font-size:clamp(2.25rem, 4.5vw, 3rem);
    line-height:1.1;
    letter-spacing:-0.025em;
    font-weight:600;
    text-wrap:balance;
    background:linear-gradient(180deg, #FFFFFF 0%, #9B9B9B 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    color:#FFFFFF;
    margin-bottom:1.25rem;
  }

  #home .hero-copy{
    max-width:640px;
    color:rgba(255,255,255,.85);
    font-family:var(--font-primary);
    font-size:1.125rem;
    line-height:1.75rem;
    font-weight:400;
    text-wrap:pretty;
    margin-bottom:1.75rem;
  }

  #home .hero-actions{
    gap:.875rem;
    margin-top:0;
    margin-bottom:0;
  }

  #home .hero-actions .btn{
    min-height:52px;
    padding:0 28px;
    border-radius:2px;
    font-size:1rem;
    line-height:1.5rem;
    font-weight:600;
  }

  #home .hero-actions .btn-primary{
    box-shadow:none;
    background:var(--red, #C51E24);
    color:#FFFFFF;
  }

  #home .hero-cta-subtext{
    margin-top:1rem;
    margin-bottom:0;
    color:rgba(255,255,255,.70);
    font-size:0.875rem;
    line-height:1.25rem;
    font-weight:400;
    text-wrap:pretty;
  }

  #home .hero-photo img{
    object-position:54% center;
    filter:brightness(1.05) contrast(1.02) saturate(.96);
  }

  #home .hero-photo:before{
    background:
      linear-gradient(90deg,
        rgba(8,15,42,.74) 0%,
        rgba(8,15,42,.48) 32%,
        rgba(8,15,42,.20) 62%,
        rgba(8,15,42,.04) 100%
      ),
      linear-gradient(180deg,rgba(8,15,42,.08),rgba(8,15,42,.18));
  }

  #home .hero-photo:after{
    background:linear-gradient(to top,rgba(8,15,42,.30),transparent 42%);
  }

  @media(max-width:900px){
    #home .hero-content{
      padding:42px 0 22px;
    }

    #home.hero h1{
      font-size:clamp(2rem, 8vw, 2.5rem);
      line-height:1.15;
      letter-spacing:-0.02em;
    }

    #home .hero-copy{
      font-size:1rem;
      line-height:1.5rem;
    }

    #home .hero-actions{
      margin-top:0;
    }

    #home .hero-photo{
      height:300px;
    }

    #home .hero-photo:before{
      background:linear-gradient(to bottom,rgba(8,15,42,.08),rgba(8,15,42,.22));
    }
  }

  /* =========================================================
     Homepage corporate CTA consistency
     Keeps all homepage red actions flat and controlled.
     ========================================================= */

  body .btn-primary{
    border-radius:2px;
    box-shadow:none !important;
    transform:none;
    transition:background var(--motion-fast) ease, border-color var(--motion-fast) ease;
  }

  body .client-logo-card:active{
    transform:scale(0.98) !important;
  }

  body .btn-primary:focus-visible,
  body .btn-outline:focus-visible,
  body .btn-outline-white:focus-visible{
    outline:2px solid var(--red, #C51E24) !important;
    outline-offset:3px;
  }

  body .btn-outline,
  body .btn-outline-white{
    border-radius:2px;
    box-shadow:none !important;
    transform:none;
    transition:background var(--motion-fast) ease, border-color var(--motion-fast) ease;
  }

  /* Problem section: tighter mobile spacing */
  @media(max-width:900px){
    .problem-item{
      padding:18px 0 !important;
    }
    .problem-item span{
      margin-bottom:10px !important;
    }
    .problem-item h3{
      font-size:1.1875rem !important;
      line-height:1.5rem !important;
      margin-bottom:8px !important;
    }
    .problem-item p{
      font-size:0.875rem !important;
      line-height:1.25rem !important;
    }
  }

  /* ===============================
     Tagline Reveal Section (Rule B11)
  ================================ */
  .tagline-reveal-section {
    background-color: var(--color-navy-dark, #070e18) !important;
    padding: var(--space-section-y) 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .tagline-reveal-text {
    font-family: var(--font-primary);
    font-size: clamp(24px, 3.2vw, 36px);
    line-height: 1.4;
    font-weight: 600;
    max-width: 820px;
    margin: 0 auto;
    text-wrap: balance;
  }

  .tagline-reveal-text span {
    color: #ffffff;
    opacity: 0.4;
    display: inline-block;
    transition: opacity 600ms cubic-bezier(0.32, 0.72, 0, 1);
    margin-right: 0.22em;
  }

  .tagline-reveal-text span.is-active {
    opacity: 1;
  }

  /* ===============================
     Pre-Footer Full-Bleed Dark CTA (Option A)
  ================================ */
  .bottom-cta-section {
    background: var(--surface-dark, #0D1430) !important;
    color: #FFFFFF !important;
    padding: clamp(64px, 7vw, 96px) 0 !important;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 0 !important;
  }

  .bottom-cta-section .container {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: clamp(32px, 4vw, 56px);
    align-items: center;
  }

  .bottom-cta-title {
    color: #FFFFFF !important;
    font-size: clamp(2rem, 3.2vw, 2.75rem) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.015em !important;
    margin: 0 0 16px 0 !important;
    text-wrap: balance;
    -webkit-text-fill-color: #FFFFFF !important;
  }

  .bottom-cta-description {
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: clamp(1rem, 1.15vw, 1.125rem) !important;
    line-height: 1.68 !important;
    margin: 0 !important;
    max-width: 600px;
  }

  .bottom-cta-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    align-items: flex-start !important;
  }

  .bottom-cta-actions .cta-button-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    align-items: center !important;
  }

  .bottom-cta-direct {
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 14px !important;
    margin: 0 !important;
  }

  .bottom-cta-direct a {
    color: rgba(255, 255, 255, 0.88) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .bottom-cta-card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    display: contents !important;
  }

  @media (max-width: 900px) {
    .bottom-cta-section .container {
      grid-template-columns: 1fr !important;
      gap: 28px !important;
    }
    .bottom-cta-title {
      font-size: clamp(1.75rem, 6vw, 2.25rem) !important;
    }
  }

  /* ============================
     Floating Brand Cookie Toast
     ============================ */
  .cookie-banner,
  .cookie-notice {
    position: fixed;
    bottom: 24px;
    left: 24px;
    max-width: 380px;
    background-color: rgba(11, 23, 38, 0.94); /* Deep Brand Navy Glass */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 9999;
    transition: opacity 300ms ease, transform 300ms ease;
  }

  .cookie-banner.is-hidden,
  .cookie-notice.is-hidden {
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
  }

  .cookie-text,
  .cookie-notice-text {
    font-family: var(--font-primary, "Geist", sans-serif);
    font-size: 13px;
    line-height: 18px;
    color: #E2E8F0;
    margin: 0;
  }

  .cookie-text a,
  .cookie-notice-text a {
    color: #FFFFFF;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 150ms ease;
  }

  .cookie-text a:hover,
  .cookie-notice-text a:hover {
    color: #94A3B8;
  }

  .cookie-actions,
  .cookie-notice-actions {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .cookie-btn-accept,
  .cookie-notice-accept {
    background-color: var(--color-red, #C51E24);
    color: #FFFFFF;
    font-family: var(--font-primary, "Geist", sans-serif);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 200ms cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: none;
  }

  .cookie-btn-accept:hover,
  .cookie-notice-accept:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    color: #FFFFFF;
  }

  .cookie-btn-accept:active,
  .cookie-notice-accept:active {
    transform: scale(0.98);
  }

  .cookie-btn-decline,
  .cookie-notice-decline {
    background: transparent !important;
    color: #94A3B8 !important;
    font-family: var(--font-primary, "Geist", sans-serif);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 12px;
    border: none !important;
    cursor: pointer;
    transition: color 150ms ease;
    box-shadow: none;
  }

  .cookie-btn-decline:hover,
  .cookie-notice-decline:hover {
    color: #FFFFFF !important;
    background: transparent !important;
  }

  /* Responsive: Full width margin on small mobile screens */
  @media (max-width: 640px) {
    .cookie-banner,
    .cookie-notice {
      left: 16px;
      right: 16px;
      bottom: 16px;
      max-width: none;
    }
  }

/* =========================================================
   Homepage hero trust line and client case
   ========================================================= */

#home .hero-trust{
  display:flex;
  flex-wrap:wrap;
  gap:6px 0;
  margin:22px 0 0;
  padding:0;
  list-style:none;
  color:rgba(255,255,255,.7);
  font-size:.8125rem;
}

#home .hero-trust li + li::before{
  content:"\00B7";
  margin:0 10px;
  color:rgba(255,255,255,.45);
}

.who-serve-secondary{
  display:inline-block;
  margin-top:14px;
  color:rgba(255,255,255,.82);
  font-size:14px;
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
}

.who-serve-secondary:hover{
  color:#fff;
}

.client-case{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 24px;
  margin-top:20px;
  padding:20px 24px;
  background:#fff;
  border:1px solid #d6deea;
  border-left:3px solid var(--red);
}

.client-case-label{
  color:var(--red);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.client-case p{
  flex:1 1 320px;
  margin:0;
  color:var(--ink);
  line-height:1.6;
}

.client-case a{
  color:var(--red);
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
}

.client-case a:hover{
  text-decoration:underline;
}

@media(min-width:901px){
  #home .hero-copy{
    max-width:560px;
  }
}


/* =========================================================
   Phone scroll reduction: swipe rows, 2-column logos,
   and a sticky action bar. Desktop is unchanged.
   ========================================================= */

.swipe-hint,
.mobile-cta-bar{
  display:none;
}

@media(max-width:767px){
  .swipe-hint{
    display:block;
    margin:12px 0 0;
    color:var(--muted);
    font-size:13px;
    font-weight:500;
  }

  #solutions .alarm-problem-grid,
  #process .process-timeline{
    display:flex;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:20px;
    margin-inline:-20px;
    padding:0 20px 4px;
    background:transparent;
    border:0;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

  #solutions .alarm-problem-grid::-webkit-scrollbar,
  #process .process-timeline::-webkit-scrollbar{
    display:none;
  }

  #solutions .alarm-problem{
    flex:0 0 82%;
    border:1px solid var(--border);
    scroll-snap-align:start;
  }

  #process .process-timeline{
    margin-top:28px;
  }

  #process .process-timeline-item,
  #process .process-timeline-item:last-child{
    flex:0 0 78%;
    display:block;
    padding:22px;
    border:1px solid var(--border);
    background:#fff;
    scroll-snap-align:start;
  }

  #process .process-timeline-item span{
    margin-bottom:14px;
  }

  .mobile-cta-bar{
    display:flex;
    gap:10px;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:150;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:#fff;
    border-top:1px solid var(--border);
    box-shadow:0 -8px 24px rgba(8,15,42,.12);
    transform:translateY(110%);
    transition:transform 250ms cubic-bezier(0.32, 0.72, 0, 1);
  }

  .mobile-cta-bar.is-visible{
    transform:none;
  }

  .mobile-cta-bar .btn{
    flex:1;
    justify-content:center;
    min-height:48px;
  }

  .mobile-cta-whatsapp{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:0 16px;
    border:1px solid var(--border);
    border-radius:2px;
    color:var(--deep-navy);
    font-size:15px;
    font-weight:600;
    text-decoration:none;
  }
}

@media(max-width:520px){
  .client-logo-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .client-logo-card,
  .client-logo-card:nth-child(3n){
    min-height:88px;
    padding:12px;
    border-right:1px solid #d6deea;
    border-bottom:1px solid #d6deea;
  }

  .client-logo-card:nth-child(2n){
    border-right:0;
  }

  .client-logo-card:nth-last-child(-n + 2){
    border-bottom:0;
  }

  .client-logo-card img{
    max-height:64px;
  }

  .client-logo-card.logo-torobo img,
  .client-logo-card.logo-reliance img,
  .client-logo-card.logo-bureau img{
    max-height:72px;
  }
}

@media(max-width:767px){
  /* Keep the edge-to-edge swipe rows from widening the page. */
  #solutions,
  #process{
    overflow-x:hidden;
    overflow-x:clip;
  }
}

@media(max-width:767px){
  /* The hint sits in the two-column grid, so pull it up by the column gap. */
  #process .swipe-hint{
    margin-top:-16px;
  }
}


@media(max-width:767px){
  /* Compact director section on phones; all text kept. */
  .commitment-section{
    padding:48px 0;
  }

  .commitment-inner{
    gap:24px;
  }

  .commitment-copy blockquote{
    font-size:22px;
    line-height:1.35;
  }

  .commitment-signoff{
    margin-top:18px;
    padding-top:14px;
  }

  .commitment-proof{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:16px;
  }

  .commitment-proof-row{
    padding:14px 0;
  }

  .commitment-proof-row:last-child{
    grid-column:1 / -1;
  }

  .commitment-proof-row strong{
    margin-bottom:4px;
    font-size:15px;
  }

  .commitment-proof-row span{
    font-size:14px;
    line-height:1.5;
  }
}


.tagline-secondary-link{
  display:block;
  margin-top:18px;
  color:rgba(255,255,255,.78);
  font-size:15px;
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
}

.tagline-secondary-link:hover{
  color:#fff;
}