/* Qarhami Web 2.5 — the partner pages (Qarhami × ABI, Qarhami × Tint) under the site-wide header.
   The header and footer come from chrome.css (scoped to #hdr, #mnav and #qx-foot). This file adds:
   the space the fixed header needs, the page's own section bar (.lnav) that sticks under it, the
   hero kicker inside the H1, and the offsets that depend on both bars. Loaded after each page's CSS. */

:root{--qhdr:76px;--lnavh:56px}
@media(max-width:760px){:root{--lnavh:52px}}

/* the site header is fixed: the page starts below it */
body{padding-top:var(--qhdr)}
body.admin-bar .lnav{top:calc(var(--qhdr) + 32px)}
@media screen and (max-width:782px){body.admin-bar .lnav{top:calc(var(--qhdr) + 46px)}}
@media screen and (max-width:600px){body.admin-bar .lnav{top:var(--qhdr)}}

/* in-page targets land below both bars */
main [id],#top{scroll-margin-top:calc(var(--qhdr) + var(--lnavh) + 14px)}
.walk__stageCol{top:calc(var(--qhdr) + var(--lnavh) + 22px)}

/* the hero no longer sits under the header */
.phero{padding-top:clamp(30px,4.2vw,60px)}

/* ---------- section bar -------------------------------------------------- */
.lnav{
  position:sticky;top:var(--qhdr);z-index:80;
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
}
.lnav__in{position:relative;display:flex;align-items:center;gap:18px;height:var(--lnavh)}
.lnav__id{display:inline-flex;align-items:center;gap:10px;flex:none;min-width:0;
  font-family:"Nexa","Poppins",sans-serif;font-weight:900;font-size:.95rem;letter-spacing:-.005em;color:var(--ink);white-space:nowrap}
.lnav__id img{width:28px;height:28px;border-radius:8px;object-fit:contain;background:#fff;border:1px solid var(--line);padding:2px;flex:none}
.lnav__id i{font-style:normal;font-family:"Poppins",sans-serif;font-weight:500;color:var(--in-500);margin:0 2px}
.lnav__links{display:flex;align-items:center;gap:2px;margin-left:6px;min-width:0}
.lnav__links>a{padding:7px 12px;border-radius:var(--r-pill);font-size:.86rem;font-weight:500;color:var(--ink-64);
  white-space:nowrap;transition:background .2s,color .2s}
.lnav__links>a:hover{background:var(--in-50);color:var(--in-700)}
.lnav__links>a.is-on{background:var(--in-50);color:var(--in-700)}
.lnav__panelcta{display:none}
.lnav__cta{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.lnav .btn--xs{height:36px;padding:0 16px;font-size:.82rem;box-shadow:none}
.lnav .btn--xs:hover{transform:none}
.lnav__s{display:none}
.lnav__more{display:none;align-items:center;gap:6px;height:36px;padding:0 12px 0 14px;flex:none;
  border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;color:var(--gun);
  font:500 .84rem/1 "Poppins",sans-serif;cursor:pointer}
.lnav__more svg{transition:transform .25s var(--ease)}
.lnav.is-open .lnav__more svg{transform:rotate(180deg)}
.lnav__more:focus-visible,.lnav a:focus-visible{outline:3px solid var(--in-300,#a594f0);outline-offset:2px}

/* the links fold into a panel once they no longer fit on one line */
@media(max-width:1180px){
  .lnav__more{display:inline-flex}
  .lnav__links{
    position:absolute;top:calc(100% + 8px);left:var(--gutter);right:var(--gutter);margin:0;
    flex-direction:column;align-items:stretch;gap:2px;padding:8px;
    background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-3);
    opacity:0;visibility:hidden;transform:translateY(-6px);transition:.22s var(--ease);
    max-height:calc(100vh - var(--qhdr) - var(--lnavh) - 24px);overflow-y:auto;
  }
  .lnav.is-open .lnav__links{opacity:1;visibility:visible;transform:none}
  .lnav__links>a{padding:13px 14px;font-size:1rem;color:var(--gun);border-radius:var(--r-md)}
  .lnav__cta{order:2}
  .lnav__more{order:3}
}
@media(min-width:620px) and (max-width:1180px){
  .lnav__links{left:auto;width:340px}
}
@media(max-width:760px){
  .lnav__in{gap:10px}
  .lnav__cta .btn--ghost{display:none}
  .lnav__moret{display:none}
  .lnav__more{width:40px;padding:0;justify-content:center}
  .lnav__l{display:none}
  .lnav__s{display:inline}
  .lnav__panelcta{display:flex;flex-direction:column;gap:8px;padding:10px 6px 4px;margin-top:6px;border-top:1px solid var(--line-soft)}
  .lnav__panelcta .btn{width:100%}
}
@media(max-width:360px){
  .lnav__id span{font-size:.88rem}
  .lnav__id img{display:none}
}
@media (prefers-reduced-motion:reduce){.lnav__links,.lnav__more svg{transition:none}}

/* ---------- hero: the page's keyword line sits inside the H1 ------------- */
.phero h1 .h1-k{
  display:flex;align-items:center;gap:10px;margin:0 0 14px;
  font-family:"Poppins",sans-serif;font-size:.74rem;font-weight:600;line-height:1.4;
  letter-spacing:.14em;text-transform:uppercase;color:var(--in-600);white-space:normal;
}
.phero h1 .h1-k::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--in-500);flex:none}
.phero .lockup{margin-top:0}
.phero h1{margin-top:26px}

/* ---------- small additions ---------------------------------------------- */
.dual__more{margin:22px 0 0;text-align:center;font-size:.88rem;color:var(--ink-64)}
.dual__more a{color:var(--in-600);font-weight:500;border-bottom:1px solid var(--in-100)}
.dual__more a:hover{color:var(--in-700);border-bottom-color:var(--in-300,#a594f0)}
.tm-note{margin:26px 0 0;font-size:.74rem;line-height:1.6;color:var(--ink-48)}
.sec-head h2,.phero h1{text-wrap:balance}