/* ==========================================================
   WI LABS — RESPONSIVE LAYER
   Extends the existing system: paper #F5F2EB, ink #1A1815,
   vermilion #C65A2E, muted #6F695F. Bricolage Grotesque /
   Instrument Sans / Space Mono. Hairline rules, zero radius.

   Every rule is prefixed .wl so it outranks the per-page
   stylesheets regardless of load order. Nothing outside the
   accessibility block applies above 900px, so the desktop
   layout is untouched.
   ========================================================== */

/* --- 1 · no horizontal scroll ---------------------------- */
html,body{overflow-x:clip;}

/* --- 2 · accessibility floor ----------------------------- */
.wl a:focus-visible,.wl button:focus-visible,.wl input:focus-visible,
.wl textarea:focus-visible,.wl select:focus-visible{
  outline:2px solid #C65A2E;outline-offset:3px;
}
@media(prefers-reduced-motion:reduce){
  .wl *,.wl *::before,.wl *::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}
.wl .wl-navtoggle{display:none;}

/* --- 3 · mobile navigation ------------------------------- */
/* The desktop nav is a horizontal run of bordered mono cells.
   Below 900px that run rotates into a full-bleed vertical
   stack of the same cells. The toggle is one more cell.      */
@media(max-width:900px){
  .wl *{min-width:0;}
  .wl{overflow-wrap:break-word;}
  .wl img,.wl svg{max-width:100%;}

  .wl .wl-navin{height:64px;padding-left:24px;padding-right:24px;gap:16px;}
  .wl .wl-navin>a:first-child img,.wl .wl-logo img{height:20px;}

  .wl .wl-navtoggle{
    display:inline-flex;align-items:center;justify-content:center;
    margin-left:auto;min-height:44px;padding:0 18px;
    border:1px solid #1A1815;border-radius:0;
    background:#F5F2EB;color:#1A1815;
    font-family:'Space Mono',monospace;font-size:11.5px;font-weight:500;
    letter-spacing:0.1em;line-height:1;white-space:nowrap;cursor:pointer;
    -webkit-appearance:none;appearance:none;
    transition:background .15s,color .15s;
  }
  .wl .wl-nav.wl-open .wl-navtoggle{background:#1A1815;color:#F5F2EB;}

  .wl .wl-navlinks{
    display:block;position:absolute;top:100%;left:0;right:0;
    background:#F5F2EB;border-bottom:1px solid #1A1815;
  }
  .wl .wl-navlinks a,.wl .wl-navlinks a:first-child{
    border:0;border-top:1px solid #1A1815;
    min-height:56px;padding:0 24px;
    font-size:12px;letter-spacing:0.14em;justify-content:flex-start;
  }
  .wl .wl-navlinks a.wl-cta{padding:0 24px;}

  /* JS present: collapsed until opened. No JS: links stay visible. */
  .wl .wl-nav.wl-js .wl-navlinks{display:none;}
  .wl .wl-nav.wl-js.wl-open .wl-navlinks{display:block;}
}
@media(max-width:560px){
  .wl .wl-navin{padding-left:20px;padding-right:20px;}
  .wl .wl-navlinks a,.wl .wl-navlinks a:first-child,
  .wl .wl-navlinks a.wl-cta{padding-left:20px;padding-right:20px;}
}

/* --- 4 · gutters and section rhythm ---------------------- */
@media(max-width:900px){
  .wl .wl-wrap{padding-left:24px;padding-right:24px;}
  .wl [style*="max-width:1360px"]{padding-left:24px !important;padding-right:24px !important;}

  .wl [style*="padding:80px 32px 96px"],
  .wl [style*="padding:88px 32px 96px"]{padding-top:60px !important;padding-bottom:68px !important;}
  .wl [style*="padding:88px 32px 0"]{padding-top:60px !important;}

  .wl [style*="padding:72px 4px 64px"]{padding:44px 0 48px !important;}
  .wl [style*="padding:64px 4px 72px"]{padding:48px 0 52px !important;}
  .wl [style*="padding:64px 4px 64px"]{padding:48px 0 48px !important;}
  .wl [style*="padding:44px 4px 8px"]{padding:36px 0 8px !important;}
  .wl [style*="padding:48px 0 56px"]{padding:40px 0 44px !important;}
  .wl [style*="padding:56px 4px 56px"]{padding:40px 0 44px !important;}
  .wl [style*="padding:28px 40px 8px 4px"]{padding:26px 0 30px !important;}
  .wl [style*="padding:28px 4px 8px 40px"]{padding:26px 0 6px !important;}
  .wl [style*="padding:26px 16px 26px 32px"]{padding:22px 20px !important;}
  .wl [style*="padding:72px 56px 64px"]{padding:52px 24px 48px !important;}
  .wl [style*="padding:64px 56px 88px"]{padding:48px 24px 60px !important;}
  .wl [style*="padding:44px 40px 52px"]{padding:34px 24px 40px !important;}
  .wl [style*="padding:40px 40px 44px"],
  .wl [style*="padding:36px 40px 44px"]{padding:32px 24px 36px !important;}
  .wl [style*="padding:18px 40px"]{padding:18px 24px !important;}
}
@media(max-width:560px){
  .wl .wl-wrap{padding-left:20px;padding-right:20px;}
  .wl [style*="max-width:1360px"]{padding-left:20px !important;padding-right:20px !important;}
}

/* --- 5 · grids ------------------------------------------- */
@media(max-width:900px){
  .wl .wl-grid12,.wl .wl-grid2,.wl .wl-grid3,.wl .wl-fgrid{grid-template-columns:1fr !important;}
  .wl .wl-grid4{grid-template-columns:repeat(2,1fr) !important;}
  .wl .wl-grid6{grid-template-columns:repeat(3,1fr) !important;}
}
@media(max-width:560px){
  .wl .wl-grid4{grid-template-columns:1fr !important;}
  .wl .wl-grid6{grid-template-columns:repeat(2,1fr) !important;}
}

/* Vertical hairlines become horizontal once the cells stack. */
@media(max-width:900px){
  .wl .wl-grid12>[style*="border-right:1px solid #1A1815"],
  .wl .wl-grid2>[style*="border-right:1px solid #1A1815"],
  .wl .wl-grid3>[style*="border-right:1px solid #1A1815"]{
    border-right:0 !important;border-bottom:1px solid #1A1815;
  }
  .wl .wl-grid12>[style*="border-right:1px solid rgba(245,242,235,0.4)"],
  .wl .wl-grid2>[style*="border-right:1px solid rgba(245,242,235,0.4)"],
  .wl .wl-grid3>[style*="border-right:1px solid rgba(245,242,235,0.4)"]{
    border-right:0 !important;border-bottom:1px solid rgba(245,242,235,0.4);
  }
}
@media(max-width:560px){
  .wl .wl-grid4>[style*="border-right:1px solid #1A1815"]{
    border-right:0 !important;border-bottom:1px solid #1A1815;
  }
  .wl .wl-grid4>[style*="border-right:1px solid rgba(245,242,235,0.4)"]{
    border-right:0 !important;border-bottom:1px solid rgba(245,242,235,0.4);
  }
}

/* --- 6 · partner strip: rules drawn by position ----------- */
/* Six logos reflow 3-up then 2-up. The cell borders are
   re-drawn from the new position so no rule lands on an
   outer edge and no row is left half-underlined.            */
@media(max-width:900px){
  .wl .wl-grid6>*{border-right:1px solid #1A1815 !important;border-bottom:1px solid #1A1815;}
  .wl .wl-grid6>*:nth-child(3n){border-right:0 !important;}
  .wl .wl-grid6>*:nth-last-child(-n+3){border-bottom:0;}
}
@media(max-width:560px){
  .wl .wl-grid6>*:nth-child(3n){border-right:1px solid #1A1815 !important;}
  .wl .wl-grid6>*:nth-child(2n){border-right:0 !important;}
  .wl .wl-grid6>*:nth-last-child(-n+3){border-bottom:1px solid #1A1815;}
  .wl .wl-grid6>*:nth-last-child(-n+2){border-bottom:0;}
}

/* Client strip: an odd last cell spans the row. */
@media(max-width:900px){
  .wl .wl-clients .wl-cl:last-child:nth-child(odd){grid-column:1/-1;}
  .wl .wl-clients .wl-cl:last-child{border-right:0;border-bottom:0;}
  .wl .wl-clients .wl-cl:nth-last-child(2):nth-child(odd){border-bottom:0;}
}

/* --- 7 · program rows: number + arrow, then title, then blurb */
@media(max-width:760px){
  .wl [style*="grid-template-columns:110px 1.1fr 1.3fr 60px"]{
    grid-template-columns:1fr auto !important;
    gap:8px 16px !important;padding:26px 0 !important;align-items:start !important;
  }
  .wl [style*="grid-template-columns:110px 1.1fr 1.3fr 60px"]>*:nth-child(1){grid-area:1/1;}
  .wl [style*="grid-template-columns:110px 1.1fr 1.3fr 60px"]>*:nth-child(4){grid-area:1/2;justify-self:end !important;}
  .wl [style*="grid-template-columns:110px 1.1fr 1.3fr 60px"]>*:nth-child(2){grid-area:2/1/auto/-1;}
  .wl [style*="grid-template-columns:110px 1.1fr 1.3fr 60px"]>*:nth-child(3){grid-area:3/1/auto/-1;}
}

/* --- 8 · certification rows: code, name, vendor ---------- */
@media(max-width:760px){
  .wl [style*="grid-template-columns:170px 1fr auto"]{
    grid-template-columns:1fr !important;
    gap:6px !important;padding:22px 0 !important;align-items:start !important;
  }
}

/* --- 9 · button pairs stack into two full-width cells ----- */
@media(max-width:600px){
  .wl .wl-btn,.wl .wl-btn2{
    width:100%;justify-content:center;min-height:54px;padding:16px 22px;
  }
  .wl .wl-btn2{border-left:1px solid;border-top:1px solid;}
  .wl [style*="padding:16px 26px"][style*="display:inline-flex"]{
    width:100% !important;justify-content:center !important;min-height:54px;
  }
  .wl [style*="border-left:0"][style*="padding:16px 26px"]{
    border-left:1px solid !important;border-top:1px solid !important;
  }
}

/* --- 10 · labels, display type, tap targets -------------- */
@media(max-width:720px){
  .wl .wl-eyebrow{flex-direction:column;gap:6px;padding:18px 0;}
}
@media(max-width:560px){
  .wl .wl-eyebrow{font-size:10px;letter-spacing:0.09em;}
  .wl [style*="padding:16px 28px"][style*="justify-content:space-between"]{
    padding:14px 20px !important;font-size:10px !important;
  }
  .wl [style*="padding:16px 28px"][style*="justify-content:space-between"]>span{white-space:nowrap;}
}
@media(max-width:520px){
  .wl .wl-h1{font-size:clamp(42px,12.5vw,54px);}
  .wl .wl-num{font-size:64px;}
}
@media(max-width:900px){
  /* footer link columns: comfortable tap pitch without changing the rhythm */
  .wl [style*="flex-direction:column"][style*="gap:11px"]{gap:2px !important;}
  .wl [style*="flex-direction:column"][style*="gap:11px"] a{min-height:38px;display:flex;align-items:center;}
  .wl .wl-tag,.wl .wl-chip{min-height:44px;display:inline-flex;align-items:center;}
  .wl .wl-faqq{padding:20px;font-size:15.5px;}
  .wl .wl-faq.open .wl-faqa{max-height:1200px;}
}

/* --- 11 · contact page: full-height split ---------------- */
@supports(min-height:100dvh){
  .wl-contact{min-height:100dvh;}
}