/* ==========================================================
   MALINE — MOBILE UI CONSOLIDATION
   2026-08-09
   Loaded last on every page to resolve legacy responsive
   collisions and make touch/mobile behaviour consistent.
   ========================================================== */

:root{
  --ui-arrow-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 13 13 3M6 3h7v7' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------
   ONE ARROW LANGUAGE — vector based, not font glyph based.
   This removes the iOS/Android/Desktop glyph differences.
   ---------------------------------------------------------- */
.button::after,
.text-link::after,
.menu-services a::after,
.footer-email-link::after,
.hero-quicklinks a::after,
.hero-intro-actions a::after,
.contact-social-tags .tag::after,
.svc-inline-link::after,
.shop-editorial-bottom>a::after{
  content:""!important;
  display:inline-block;
  width:.86em;
  height:.86em;
  flex:0 0 .86em;
  background:currentColor;
  -webkit-mask:var(--ui-arrow-mask) center/contain no-repeat;
  mask:var(--ui-arrow-mask) center/contain no-repeat;
  transition:transform .25s var(--ease);
}

/* Existing button arrow spans were duplicating .button::after. */
.button>span[aria-hidden="true"]{
  display:none!important;
}

/* Downward directional buttons use the same icon, simply rotated. */
.mn-hero-foot .button::after,
.shop-editorial-bottom>a::after{
  transform:rotate(135deg);
}

/* Vectorise the large/special arrows too. */
.capability-arrow,
.big-cta-arrow,
.client-card-arrow,
.client-card-view b,
.svc-capability>span,
.svc-cta .container>span,
.mn-system-arrow,
.shop-product-corner,
.home-next-system-list b,
.home-next-lab-rail b,
.home-shop-card-meta b,
.mn-signal-track i,
.workstream-control,
.shop-gallery-arrow{
  font-size:0!important;
}

.capability-arrow::before,
.big-cta-arrow::before,
.client-card-arrow::before,
.client-card-view b::before,
.svc-capability>span::before,
.svc-cta .container>span::before,
.mn-system-arrow::before,
.shop-product-corner::before,
.home-next-system-list b::before,
.home-next-lab-rail b::before,
.home-shop-card-meta b::before,
.mn-signal-track i::before,
.workstream-control::before,
.shop-gallery-arrow::before{
  content:"";
  display:block;
  width:1rem;
  height:1rem;
  background:currentColor;
  -webkit-mask:var(--ui-arrow-mask) center/contain no-repeat;
  mask:var(--ui-arrow-mask) center/contain no-repeat;
}

.big-cta-arrow::before{width:42%;height:42%}
.capability-arrow::before{width:1rem;height:1rem}
.svc-cta .container>span::before{width:1em;height:1em}
.mn-signal-track i::before,
.home-next-lab-rail b::before{width:.8rem;height:.8rem}

.workstream-control::before,
.shop-gallery-arrow::before{
  width:1.05rem;
  height:1.05rem;
}
.workstream-control[data-workstream-next]::before,
.shop-gallery-arrow--next::before{transform:rotate(45deg)}
.workstream-control[data-workstream-prev]::before,
.shop-gallery-arrow--prev::before{transform:rotate(-135deg)}

.menu-close{
  position:relative;
  font-size:0!important;
}
.menu-close::before,
.menu-close::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:1.12rem;
  height:1.5px;
  background:currentColor;
  transform-origin:center;
}
.menu-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.menu-close::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* ----------------------------------------------------------
   MOBILE GLOBALS
   ---------------------------------------------------------- */
@media(max-width:48rem){
  :root{
    --gutter:clamp(1rem,4.5vw,1.25rem);
    --nav-h:calc(4.45rem + env(safe-area-inset-top));
    --section:clamp(4.35rem,15vw,6rem);
  }

  html,
  body{
    max-width:100%;
    overflow-x:hidden;
  }
  @supports(overflow:clip){
    html,
    body{overflow-x:clip}
  }

  .container{
    width:100%;
    padding-left:max(var(--gutter),env(safe-area-inset-left));
    padding-right:max(var(--gutter),env(safe-area-inset-right));
  }

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

  /* ---------- Header ---------- */
  .site-header{
    height:var(--nav-h);
    padding-top:env(safe-area-inset-top);
  }
  .nav-inner{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:.55rem!important;
  }
  .brand{
    width:6.15rem!important;
    height:2.25rem!important;
    min-width:0;
  }
  .nav-actions{
    gap:.42rem!important;
    min-width:0;
  }
  .site-header .nav-actions>.button{
    min-height:2.7rem;
    padding:.58rem .78rem;
    gap:.42rem;
    white-space:nowrap;
    font-size:.61rem;
    letter-spacing:.065em;
    border-width:1px;
    flex:none;
  }
  .site-header .nav-actions>.button::after{
    width:.72rem;
    height:.72rem;
    flex-basis:.72rem;
  }
  .menu-toggle,
  .menu-close{
    width:2.7rem!important;
    height:2.7rem!important;
    flex:0 0 2.7rem;
    border-width:1px;
  }
  .menu-toggle-lines{
    width:1rem;
    gap:4px;
  }
  .menu-toggle-lines i{
    height:1.5px;
  }

  /* ---------- Full-screen mobile menu ----------
     Make the scroll area explicit so capabilities never get cut off. */
  .full-menu-inner{
    height:100dvh;
    min-height:0;
    grid-template-rows:auto minmax(0,1fr)!important;
    padding-top:max(.9rem,env(safe-area-inset-top));
    padding-bottom:max(1rem,env(safe-area-inset-bottom));
  }
  .menu-top{
    min-height:3rem;
  }
  .menu-logo{
    width:6.15rem!important;
    height:2.25rem!important;
  }
  .menu-grid{
    min-height:0;
    align-self:stretch!important;
    align-content:start!important;
    align-items:start!important;
    grid-template-columns:1fr!important;
    gap:1.45rem!important;
    padding:1.25rem 0 2rem!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .menu-grid::-webkit-scrollbar{display:none}
  .menu-primary{
    display:grid;
    gap:.02rem!important;
  }
  .menu-primary a{
    min-height:2.7rem;
    font-size:clamp(2.05rem,10vw,3.15rem)!important;
    line-height:.9!important;
    gap:.7rem;
  }
  .menu-primary a::before{
    width:1.35rem;
    flex:0 0 1.35rem;
    font-size:.55rem;
  }
  .menu-services-title{
    margin-bottom:.55rem!important;
    font-size:.63rem;
  }
  .menu-services{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:.42rem!important;
  }
  .menu-services li:nth-child(n){
    display:list-item!important;
  }
  .menu-services a{
    width:100%;
    min-height:2.65rem!important;
    padding:.48rem .58rem!important;
    display:flex!important;
    align-items:center;
    justify-content:space-between;
    gap:.45rem;
    border-radius:.65rem!important;
    font-size:.72rem!important;
    line-height:1.15;
  }
  .menu-services a::after{
    width:.7rem;
    height:.7rem;
    flex-basis:.7rem;
  }
  .menu-bottom{display:none!important}

  /* ---------- Buttons / touch ---------- */
  .button{
    min-height:2.75rem;
    max-width:100%;
    padding:.66rem .9rem;
    gap:.5rem;
    font-size:.68rem;
    letter-spacing:.07em;
    touch-action:manipulation;
  }
  .button::after,
  .text-link::after{
    width:.78rem;
    height:.78rem;
    flex-basis:.78rem;
  }
  .tag{
    min-height:2.35rem;
    align-items:center;
  }

  /* ---------- Shared page heroes ---------- */
  .page-hero{
    min-height:auto!important;
    padding-top:calc(var(--nav-h) + 3rem)!important;
    padding-bottom:3.8rem!important;
  }
  .page-hero h1{
    max-width:11ch;
    font-size:clamp(3.6rem,15vw,5.8rem);
  }
  .page-hero p{
    margin-top:1.35rem;
  }
  .page-hero .hero-orbit{
    width:64vw;
    right:-28vw;
    top:12%;
    opacity:.55;
  }

  /* ---------- Footer ----------
     Explicitly beats the old .footer-grid rules in responsive.css. */
  .site-footer--v2{
    padding:3rem 0 max(1.25rem,env(safe-area-inset-bottom))!important;
  }
  .site-footer--v2 .footer-top-rule{
    margin-bottom:2rem;
  }
  .site-footer--v2 .footer-grid.footer-grid--v2{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:0!important;
  }
  .site-footer--v2 .footer-grid--v2>*{
    min-width:0;
    grid-column:1/-1!important;
    padding:1.5rem 0;
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  .site-footer--v2 .footer-grid--v2>.footer-brand{
    padding-top:0;
  }
  .site-footer--v2 .footer-grid--v2>.footer-connect-block{
    border-top:0!important;
  }
  .site-footer--v2 .footer-logo{
    width:10.5rem!important;
    margin-bottom:1.15rem;
  }
  .footer-brand-copy{
    max-width:27rem;
    font-size:.96rem;
    line-height:1.45;
  }
  .footer-email-link{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    max-width:100%;
    margin-top:1rem;
    font-size:.76rem;
    overflow-wrap:anywhere;
  }
  .site-footer--v2 .footer-title{
    margin-bottom:.9rem;
    font-size:.6rem;
  }
  .site-footer--v2 .footer-nav-block .footer-links{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:.62rem 1rem!important;
  }
  .site-footer--v2 .footer-service-links--two-col{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:.62rem 1rem!important;
  }
  .site-footer--v2 .footer-links a{
    width:auto;
    font-size:.84rem;
    line-height:1.25;
  }
  .footer-socials--row{
    grid-template-columns:repeat(4,2.8rem)!important;
    gap:.48rem!important;
  }
  .site-footer--v2 .footer-social-icon{
    width:2.8rem!important;
    height:2.8rem!important;
  }
  .footer-connect-note{
    margin-top:1rem;
    font-size:.65rem;
  }
  .footer-bottom--v2{
    margin-top:1.5rem!important;
    padding-top:1.15rem!important;
    grid-template-columns:1fr 1fr!important;
    gap:.72rem 1rem!important;
    font-size:.58rem!important;
    line-height:1.35!important;
  }
  .footer-bottom--v2>*{
    justify-self:start!important;
  }
  .footer-bottom--v2>*:first-child{
    grid-column:1/-1;
  }
  .footer-bottom--v2 .footer-time:nth-of-type(2){
    justify-self:end!important;
    text-align:right;
  }
  .footer-bottom--v2 a:last-child{
    justify-self:end!important;
  }

  /* ========================================================
     HOMEPAGE
     ======================================================== */
  .home-page .hero--collage{
    min-height:48rem!important;
    padding-top:var(--nav-h)!important;
  }
  .home-page .hero-collage-inner{
    min-height:calc(48rem - var(--nav-h))!important;
  }
  .home-page .hero-topline{
    inset:.75rem var(--gutter) auto!important;
  }
  .home-page .hero-quicklinks{
    width:100%;
    flex-wrap:nowrap;
    gap:.3rem;
  }
  .home-page .hero-quicklinks a{
    min-height:1.9rem;
    padding:.38rem .52rem;
    gap:.3rem;
    white-space:nowrap;
    font-size:.51rem;
    letter-spacing:.055em;
  }
  .home-page .hero-quicklinks a::after{
    width:.62rem;
    height:.62rem;
    flex-basis:.62rem;
  }
  .home-page .hero-wordmark{
    top:43%!important;
  }
  .home-page .hero-wordmark-track>span{
    font-size:clamp(6.5rem,27vw,8.8rem)!important;
  }

  /* Current homepage uses hero-tile--*, while responsive.css was still
     targeting old hero-media-* selectors. */
  .home-page .hero-tile--faros{
    left:-12%!important;
    top:13%!important;
    width:43vw!important;
  }
  .home-page .hero-tile--campaign{
    right:-10%!important;
    top:12%!important;
    width:39vw!important;
  }
  .home-page .hero-tile--hotel{
    display:none!important;
  }
  .home-page .hero-note{
    display:none!important;
  }
  .home-page .hero-sculpture{
    left:50%!important;
    top:45%!important;
    width:70vw!important;
    height:70vw!important;
  }
  .home-page .hero-sculpture span{
    font-size:72vw!important;
  }
  .home-page .hero-seal{
    left:1.5%!important;
    top:52%!important;
    width:29vw!important;
  }
  .home-page .hero-doodle{
    left:1%!important;
    bottom:20%!important;
    width:22vw!important;
  }

  /* responsive.css changed this to a light card without changing its
     inherited white text, which made copy look missing on mobile. */
  .home-page .hero-intro{
    left:var(--gutter)!important;
    right:var(--gutter)!important;
    bottom:1rem!important;
    width:auto!important;
    transform:none!important;
    grid-template-columns:1fr!important;
    gap:.65rem!important;
    padding:.85rem .9rem!important;
    background:rgba(17,17,15,.94)!important;
    color:var(--paper)!important;
    border:1px solid rgba(255,255,255,.14)!important;
    backdrop-filter:blur(10px);
  }
  .home-page .hero-intro p{
    font-size:.72rem!important;
    line-height:1.4;
  }
  .home-page .hero-intro-actions{
    display:flex!important;
    justify-content:flex-start!important;
    gap:1rem!important;
  }
  .home-page .hero-intro-actions a{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    font-size:.58rem;
    color:var(--paper);
  }
  .home-page .hero-scroll{display:none!important}

  .home-page .home-growth-copy{
    margin-top:2.1rem!important;
  }
  .home-page .growth-focus-list{
    gap:.38rem;
  }
  .home-page .growth-focus-list span{
    min-height:2rem;
    padding:.38rem .6rem;
    font-size:.61rem;
  }

  .home-page .workstream-section{
    --workstream-card:78vw;
    padding-block:1.75rem;
  }
  .home-page .workstream-stage{
    margin-inline:.45rem;
    padding-bottom:4.5rem;
  }
  .home-page .workstream-control{
    width:2.85rem;
    height:2.85rem;
  }

  .home-page .home-capabilities-head{
    margin-bottom:2rem;
  }
  .home-page .capability-card{
    min-height:16.5rem!important;
    padding:1.15rem;
  }
  .home-page .capability-card h3{
    font-size:clamp(2rem,10vw,3.1rem);
    margin-bottom:.85rem;
  }
  .home-page .capability-card>small{
    margin-top:1.1rem;
  }
  .home-page .capability-arrow{
    width:2.45rem;
    height:2.45rem;
  }

  .home-page .home-next-lab-grid,
  .home-page .home-shop-grid{
    padding-top:4.25rem!important;
    padding-bottom:4.25rem!important;
    gap:2.6rem!important;
  }
  .home-page .home-next-lab-copy h2,
  .home-page .home-shop-copy h2{
    font-size:clamp(3.5rem,15vw,5.35rem)!important;
  }
  .home-page .home-next-lab-panel{
    min-width:0;
    overflow:hidden!important;
  }
  .home-page .home-next-system-list{
    overflow:hidden!important;
  }
  .home-page .home-next-system-list a{
    grid-template-columns:1.65rem minmax(0,1fr) 1rem!important;
    min-height:4rem!important;
    padding:.7rem!important;
  }
  .home-page .home-next-system-list small{
    display:none!important;
  }
  .home-page .home-next-core{
    min-height:13rem!important;
  }
  .home-page .home-next-core-node{
    max-width:7rem;
    font-size:.42rem!important;
  }

  .home-page .home-shop-stage{
    min-height:29rem!important;
    margin-inline:0!important;
    contain:layout!important;
  }
  .home-page .home-shop-card{
    width:42%!important;
    max-width:13rem!important;
  }
  .home-page .home-shop-card--tee{left:0!important;top:13%!important}
  .home-page .home-shop-card--tote{left:29%!important;top:4%!important}
  .home-page .home-shop-card--stickers{right:0!important;top:18%!important}
  .home-page .home-shop-stamp{
    width:7rem!important;
    right:3%!important;
    bottom:0!important;
  }

  .home-page .client-relationships-heading{
    gap:1.2rem!important;
  }
  .home-page .client-portfolio-button{
    margin:0;
  }
  .home-page .client-marquee-wall{
    --client-card-w:44vw!important;
    --client-card-h:30vw!important;
  }

  .home-page .growth-outcome-card{
    min-height:18.5rem!important;
    padding:1.2rem!important;
  }
  .home-page .growth-outcome-card h3{
    font-size:clamp(2rem,10vw,3.1rem)!important;
  }
  .home-page .serving-market{
    min-height:20rem!important;
    padding:1.25rem!important;
  }

  /* ========================================================
     PORTFOLIO
     ======================================================== */
  .client-showcase{
    padding-top:4rem;
  }
  .client-showcase-intro{
    gap:1rem!important;
  }
  .client-showcase-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:.7rem!important;
  }
  .client-card-caption{
    min-height:4.6rem!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:.45rem!important;
    padding:.72rem!important;
  }
  .client-card-number{
    display:none!important;
  }
  .client-card-name{
    font-size:.88rem!important;
    line-height:1.05;
  }
  .client-card-arrow::before{
    width:.8rem;
    height:.8rem;
  }
  .client-modal{
    padding:.35rem!important;
  }
  .client-modal-panel{
    width:100%!important;
    max-height:calc(100dvh - .7rem)!important;
    border-radius:1rem!important;
  }
  .client-modal-logo-stage{
    min-height:15rem!important;
    border-radius:.72rem!important;
  }
  .client-modal-close{
    right:.65rem!important;
    top:.65rem!important;
    width:2.75rem!important;
    height:2.75rem!important;
  }
  .client-modal-content{
    padding:1.1rem .75rem 1.3rem!important;
  }
  .client-modal-content h2{
    margin:.55rem 0 1rem!important;
    font-size:clamp(2.65rem,13vw,4.4rem)!important;
  }
  .client-modal-facts{
    grid-template-columns:1fr!important;
    gap:.7rem!important;
    margin:1.3rem 0!important;
  }

  /* ========================================================
     CONTACT
     ======================================================== */
  .contact-layout{
    gap:3rem!important;
  }
  .contact-sidebar{
    display:grid;
    gap:0;
  }
  .contact-sidebar .card{
    padding:1.05rem!important;
  }
  .contact-social-tags{
    gap:.4rem!important;
  }
  .contact-social-tags .tag{
    min-height:2.25rem;
    padding:.42rem .6rem;
    gap:.35rem;
    font-size:.62rem;
  }
  .form-grid{
    grid-template-columns:1fr!important;
    gap:1rem!important;
  }
  .form-field--full{
    grid-column:1!important;
  }
  .form-grid input,
  .form-grid textarea,
  .form-grid select{
    min-height:3.5rem;
    font-size:1rem; /* prevents iOS zoom */
  }

  /* ========================================================
     MALINE NEXT
     ======================================================== */
  .mn-hero-inner{
    padding-top:calc(var(--nav-h) + 1.8rem)!important;
    padding-bottom:2.2rem!important;
  }
  .mn-hero-copy{
    padding-block:4rem!important;
  }
  .mn-hero-copy h1{
    font-size:clamp(3.85rem,18vw,5.8rem)!important;
  }
  .mn-hero-copy p{
    margin-top:1.5rem!important;
    font-size:1rem!important;
  }
  .mn-hero-foot{
    gap:1.1rem!important;
  }
  .mn-systems{
    padding-top:4.25rem!important;
    padding-bottom:5rem!important;
  }
  .mn-systems-head{
    margin-bottom:2.5rem!important;
  }
  .mn-systems-head h2{
    font-size:clamp(3.5rem,15vw,5.4rem)!important;
  }
  .mn-system-row{
    min-height:5.4rem!important;
    grid-template-columns:2rem minmax(0,1fr) 1rem!important;
    gap:.65rem!important;
  }
  .mn-system-number{
    font-size:.52rem!important;
  }
  .mn-system-title{
    font-size:1.42rem!important;
  }
  .mn-preview{
    min-height:0!important;
  }
  .mn-preview-screen{
    min-height:17rem!important;
  }
  .mn-preview-copy{
    padding:1rem!important;
  }
  .mn-preview-features{
    grid-template-columns:1fr!important;
  }
  .mn-architecture{
    grid-template-columns:1fr!important;
    padding:.75rem!important;
  }
  .mn-architecture-core{
    grid-column:auto!important;
    margin:1.25rem auto 1.5rem!important;
  }
  .mn-open{
    padding:4.75rem 0!important;
  }
  .mn-open-grid h2{
    font-size:clamp(3.7rem,17vw,5.8rem)!important;
  }

  /* ========================================================
     SHOP
     ======================================================== */
  .shop-editorial-hero>.container{
    padding-top:calc(var(--nav-h) + 1.9rem)!important;
    padding-bottom:2rem!important;
  }
  .shop-editorial-topline{
    gap:.35rem!important;
  }
  .shop-editorial-hero h1{
    padding-block:3.5rem!important;
    font-size:clamp(5rem,24vw,8rem)!important;
  }
  .shop-editorial-bottom{
    gap:.85rem!important;
  }

  /* Keep filters + bag compact in one sticky row instead of the old
     mobile two-row stack. */
  .shop-catalogue-bar-inner{
    min-height:4rem!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:.55rem!important;
    align-items:center!important;
    padding-top:.55rem!important;
    padding-bottom:.55rem!important;
    flex-direction:initial!important;
  }
  .shop-filters{
    width:auto!important;
    min-width:0;
    display:flex!important;
    gap:.28rem!important;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .shop-filters::-webkit-scrollbar{display:none}
  .shop-filters button{
    min-height:2.35rem!important;
    flex:0 0 auto;
    padding:.45rem .58rem!important;
    white-space:nowrap;
    font-size:.56rem!important;
  }
  .shop-catalogue-actions{
    width:auto!important;
    justify-content:flex-end!important;
    gap:.35rem!important;
  }
  .shop-inline-bag{
    min-height:2.35rem!important;
    padding:.45rem .62rem!important;
    font-size:.58rem!important;
  }
  .shop-products-intro{
    padding-top:3.2rem!important;
    padding-bottom:2rem!important;
  }
  .shop-products-intro h2{
    font-size:clamp(3.6rem,16vw,5.5rem)!important;
  }
  .shop-product-grid{
    row-gap:2.2rem!important;
  }
  .shop-product-panel{
    max-height:96dvh!important;
  }
  .shop-modal-media{
    height:48dvh!important;
    min-height:0!important;
  }
  .shop-gallery-thumbs{
    grid-auto-columns:4rem!important;
  }
  .shop-modal-copy{
    padding:1.35rem 1rem 2.25rem!important;
  }
  .shop-modal-copy h2{
    font-size:clamp(3rem,14vw,4.8rem)!important;
  }
  .shop-gallery-arrow{
    width:2.55rem!important;
    height:2.55rem!important;
  }
  .shop-cart{
    width:min(100vw,32rem)!important;
  }
  .shop-checkout{
    padding:.4rem!important;
  }
  .shop-checkout-panel{
    max-height:96dvh!important;
    overflow:auto!important;
  }

  /* ========================================================
     SERVICES
     ======================================================== */
  .svc-hero-grid{
    padding-top:calc(var(--nav-h) + 1.75rem)!important;
    padding-bottom:2.5rem!important;
    gap:1.5rem!important;
  }
  .svc-hero .crumbs{
    margin-bottom:1.6rem!important;
    font-size:.66rem!important;
  }
  .svc-hero h1{
    font-size:clamp(3.65rem,16vw,5.7rem)!important;
  }
  .svc-hero-lede{
    margin-top:1.3rem!important;
    font-size:.98rem!important;
  }
  .svc-scope{
    margin-top:1.25rem!important;
    gap:.35rem!important;
  }
  .svc-scope span{
    padding:.42rem .55rem!important;
    font-size:.53rem!important;
  }
  .svc-hero-visual{
    min-height:19rem!important;
  }
  .svc-viz{
    width:min(86vw,22rem)!important;
  }
  .svc-problem-card{
    min-height:12rem!important;
    padding:1.15rem!important;
  }
  .svc-capability{
    min-height:12rem!important;
    padding:1.15rem!important;
  }
  .svc-section-head{
    margin-bottom:2.4rem!important;
  }
  .svc-section-head .h2{
    font-size:clamp(3rem,13vw,4.9rem)!important;
  }
  .svc-step{
    min-height:0!important;
    grid-template-columns:2.6rem minmax(0,1fr)!important;
    padding:1.25rem 0!important;
  }
  .svc-cta>a{
    padding:3.8rem 0!important;
  }
  .svc-cta h2{
    font-size:clamp(3.6rem,15vw,5.7rem)!important;
  }
  .svc-cta .container>span{
    margin-top:1.1rem!important;
  }

  /* ---------- Legal ---------- */
  .legal-layout{
    gap:2rem!important;
  }
  .toc{
    padding-bottom:1rem;
    border-bottom:1px solid var(--line);
  }
}

/* Very narrow phones */
@media(max-width:22.5rem){
  .brand{
    width:5.65rem!important;
  }
  .site-header .nav-actions>.button{
    padding:.55rem .62rem;
    font-size:.56rem;
  }
  .menu-toggle,
  .menu-close{
    width:2.55rem!important;
    height:2.55rem!important;
    flex-basis:2.55rem;
  }
  .menu-services{
    grid-template-columns:1fr!important;
  }
  .site-footer--v2 .footer-nav-block .footer-links,
  .site-footer--v2 .footer-service-links--two-col{
    grid-template-columns:1fr!important;
  }
}

/* Touch devices should not retain desktop hover transformations after taps. */
@media(hover:none),(pointer:coarse){
  .button:hover,
  .text-link:hover,
  .footer-links a:hover,
  .footer-social-icon:hover,
  .capability-card:hover,
  .svc-problem-card:hover,
  .svc-capability:hover,
  .svc-step:hover,
  .home-shop-card:hover,
  .client-card:hover,
  .shop-product-card:hover{
    transform:none!important;
  }
  .capability-card:hover{
    box-shadow:none!important;
    border-radius:0!important;
  }
  .svc-problem-card:hover::before,
  .svc-capability:hover::before{
    transform:scaleY(0)!important;
  }
  .svc-problem-card:hover,
  .svc-capability:hover{
    color:inherit!important;
  }
  .svc-capability:hover p{
    color:rgba(243,240,233,.52)!important;
  }
  .footer-links a:hover{
    text-decoration:none!important;
  }
}
/* ==========================================================
   CIRCULAR ARROW OPTICAL-CENTER FIX
   The arrow box was mathematically centered, but the NE arrow
   has more visual weight toward its arrowhead. This second mask
   shifts the glyph slightly down/left *inside its own SVG box*,
   so arrows inside circles look optically centered without
   changing any text-link arrows.
   ========================================================== */
:root{
  --ui-arrow-mask-circle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.55 13.45 12.55 3.45M5.55 3.45h7v7' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Circle-only controls use the optically centered version.
   Text + arrow links keep the original mask exactly as before. */
.capability-arrow,
.big-cta-arrow,
.workstream-control,
.shop-gallery-arrow,
.shop-product-corner{
  line-height:0!important;
  text-align:center;
}

.capability-arrow::before,
.big-cta-arrow::before,
.workstream-control::before,
.shop-gallery-arrow::before,
.shop-product-corner::before{
  margin:0!important;
  background:currentColor;
  -webkit-mask:var(--ui-arrow-mask-circle) center/contain no-repeat!important;
  mask:var(--ui-arrow-mask-circle) center/contain no-repeat!important;
}

/* Ensure the icon box itself is dead-center in every circle, independent
   of native button line-height/baseline behaviour. */
.capability-arrow,
.workstream-control{
  position:relative;
}
.big-cta-arrow{
  position:absolute;
}
.shop-gallery-arrow,
.shop-product-corner{
  /* These are already absolutely positioned by their component styles. */
}

.capability-arrow::before,
.big-cta-arrow::before,
.workstream-control::before,
.shop-gallery-arrow::before,
.shop-product-corner::before{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  transform-origin:50% 50%;
}

/* Preserve directional rotations while keeping the icon's center anchored. */
.workstream-control[data-workstream-next]::before,
.shop-gallery-arrow--next::before{
  transform:translate(-50%,-50%) rotate(45deg)!important;
}
.workstream-control[data-workstream-prev]::before,
.shop-gallery-arrow--prev::before{
  transform:translate(-50%,-50%) rotate(-135deg)!important;
}

/* On mobile the large CTA arrow is changed from absolute to in-flow by
   responsive.css; keep it a positioned containing block for its icon. */
@media(max-width:48rem){
  .big-cta-arrow{
    position:relative!important;
  }
}