/* chrome.css — what every page shares: tokens, the floating pill nav, the
 * eyebrow chip, the footer identity. Loaded by the main, blog and authority
 * layouts so the header and footer are the same site everywhere. */

:root{
  --teal-deep:#1E3759;          /* filled pills: white on it 12:1 */
  --grey-chip:rgba(var(--ink-rgb),.06);
  --sora:'Sora','Geist',system-ui,sans-serif;
}

:root{--r-pill:999px;--r-xs:8px;--r:16px;--bg2:var(--surface);--acc-ink:var(--on-accent)}
.acc{color:var(--coral)}

/* footer identity (its rules were written against base.css, which the authority pages do not load) */
.brand{display:flex;align-items:center;gap:11px}
.brand-pic{width:38px;height:38px;border-radius:50%;overflow:hidden;border:2px solid var(--acc);flex:none}
.brand-pic img{width:100%;height:100%;object-fit:cover;display:block}
.brand-name{font-weight:600;font-size:16px;white-space:nowrap}
.brand-name b{color:var(--acc)}

/* ---- floating pill nav ---------------------------------------------------- */
.rail .rail-inner{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
.rail .rail-nav{display:contents}
.rail .rail-nav ul{justify-self:center;background:rgba(var(--ink-rgb),.055);border-radius:var(--r-pill);padding:4px;gap:2px}
.rail .rail-nav ul a{padding:7px 16px;border:0;font-size:14px;font-weight:600;color:var(--ink-soft);
  text-transform:none;letter-spacing:0;font-family:inherit}
html[lang="en"] .rail .rail-nav ul a{text-transform:none;letter-spacing:0;font-size:14px}
.rail .rail-nav ul a:hover{color:var(--ink)}
.rail .rail-nav ul a[aria-current="page"]{background:rgba(var(--teal-rgb),.14);color:var(--teal-deep);border:0}
.rail .rail-tools{justify-self:end}
.rail-id{justify-self:start}
.rail .rail-contact{padding-block:0;padding-inline:16px 4px;gap:10px;background:var(--teal-deep);border-color:var(--teal-deep)}
.rail .rail-contact > svg{display:none}
.rail .rail-contact:hover{background:var(--teal-bright);border-color:var(--teal-bright)}
.rail-contact-ico{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.2);flex:none}
.rail-contact-ico svg{width:13px;height:13px}
@media (max-width:980px){
  .rail .rail-inner{grid-template-columns:1fr auto}
  .rail .rail-nav ul{position:fixed;justify-self:auto;background:var(--surface);border-radius:0;
    padding:calc(var(--s8) + 10px) var(--s5) var(--s5);gap:0}
  .rail .rail-nav ul a{padding:16px 6px;font-size:17px;border-radius:0}
  .rail .rail-nav ul a[aria-current="page"]{background:none}
}
@media (max-width:640px){
  .rail .rail-contact{width:36px;padding:0;gap:0}
  .rail .rail-contact > svg{display:block}
  .rail-contact-txt,.rail-contact-ico{display:none}
}
@media (pointer:coarse) and (max-width:640px){.rail .rail-contact{width:44px}}

/* ---- section head: grey chip with a coral diamond, then the H2 ------------- */
.eyebrow-pill{font-family:inherit;font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--ink-soft);background:var(--grey-chip);border:0;padding:5px 14px 5px 12px;gap:8px;line-height:1.7}
.eyebrow-pill::before{content:"";width:7px;height:7px;flex:none;border-radius:1.5px;
  background:var(--coral);transform:rotate(45deg)}
html[lang="ar"] .eyebrow-pill{font-size:14px}
html[lang="en"] .sec-head h2{font-family:var(--sora);text-transform:uppercase;font-weight:700;
  letter-spacing:-.025em;line-height:1.04;font-size:clamp(28px,4.4vw,54px)}