/* ============================================================
   CYBERSOL — Service-page shared styles.
   One stylesheet for all three service pages. Tokens come from
   ../styles.css (design system). Homepage classes are mirrored
   here so the pages belong to the same system without duplicating
   three separate blocks.
   ============================================================ */
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg-base);color:var(--text-body);overflow-x:hidden}
.svc-site{max-width:100%;overflow:hidden}
.svc-site a:not(.btn){color:var(--accent-text)}
.mono{font-family:var(--font-mono);font-size:.75rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.eyebrow{display:inline-flex;align-items:center;gap:.75rem;flex-wrap:wrap;font-family:var(--font-mono);font-size:.75rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text)}
.eyebrow-line{width:28px;height:1px;flex:none;background:var(--accent-text)}
.dot-sep{width:3px;height:3px;border-radius:999px;background:var(--ink-3);flex:none}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* buttons */
.btn{font-family:var(--font-body);font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:var(--r-sm);cursor:pointer;text-decoration:none;transition:background var(--t),border-color var(--t),color var(--t),transform var(--t-fast),box-shadow var(--t);white-space:nowrap;line-height:1}
.btn:active{transform:translateY(0) scale(.98)}
.btn:focus-visible{outline:2px solid var(--accent-ring);outline-offset:3px}
.btn-sm{padding:.5rem .875rem;font-size:.8125rem}
.btn-md{padding:.75rem 1.25rem;font-size:.9375rem}
.btn-lg{padding:.9375rem 1.75rem;font-size:1rem}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-secondary{background:transparent;color:var(--ink-1);border-color:var(--line-3)}
.btn-secondary:hover{border-color:var(--accent);color:#fff;background:rgba(236,237,245,.06);transform:translateY(-2px)}
/* Disabled: the submit button spends the whole "Sending…" state disabled but was
   styled identically to an enabled one, cursor:pointer included. Presentation only —
   the disabled attribute and aria-busy already did the real work. */
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:default;transform:none;box-shadow:none}
.btn:disabled:hover,.btn[aria-disabled="true"]:hover{transform:none;box-shadow:none}
.btn-primary:disabled:hover{background:var(--accent);border-color:var(--accent)}

/* nav (shared with homepage; adds accessible Services dropdown) */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:1.1rem clamp(20px,5vw,64px);border-bottom:1px solid var(--line-1);background:rgba(7,7,26,.34);backdrop-filter:saturate(140%) blur(4px)}
.nav-logo{height:17px;display:block}
.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links a:not(.btn),.nav-svc-btn{font-family:var(--font-body);font-size:.9375rem;font-weight:500;color:var(--ink-1);transition:color var(--t)}
.nav-links a:hover,.nav-links a.active{color:var(--ink-0)}
.nav-links a:focus-visible{outline:2px solid var(--accent-text);outline-offset:4px;border-radius:2px;color:var(--ink-0)}
.nav-svc{position:relative}
.nav-svc-btn{display:inline-flex;align-items:center;gap:.4rem;background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-body)}
.nav-svc-btn:hover,.nav-svc-btn[aria-expanded="true"]{color:var(--ink-0)}
.nav-svc-btn:focus-visible{outline:2px solid var(--accent-text);outline-offset:4px;border-radius:2px}
.nav-svc-caret{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform var(--t)}
.nav-svc-btn[aria-expanded="true"] .nav-svc-caret{transform:rotate(-135deg) translateY(-1px)}
.nav-svc-panel{position:absolute;top:calc(100% + 14px);left:-16px;min-width:290px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:.5rem;display:flex;flex-direction:column;z-index:60}
.nav-svc-panel a{display:flex;flex-direction:column;gap:.15rem;padding:.7rem .85rem;border-radius:var(--r-sm);color:var(--ink-1)!important;transition:background var(--t)}
.nav-svc-panel a:hover,.nav-svc-panel a:focus-visible{background:var(--surface-3);outline:none}
.nav-svc-panel .np-t{font-family:var(--font-body);font-weight:600;font-size:.9375rem;color:var(--ink-0)}
.nav-svc-panel .np-d{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.nav-burger{display:none;flex-direction:column;gap:4px;background:rgba(7,7,26,.35);border:1px solid var(--line-2);border-radius:var(--r-sm);cursor:pointer;padding:9px 8px}
.nav-burger span{width:20px;height:1.5px;background:var(--ink-0)}
.nav-burger:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
/* Header CTA only — the site-wide .btn focus ring is left alone. */
.nav .btn:focus-visible{outline-color:var(--accent-text)}
.nav-mobile{display:none}

/* breadcrumb */
.crumb{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 1.5rem}
.crumb a{color:var(--ink-3)}
.crumb a:hover{color:var(--ink-1)}
.crumb .sep{color:var(--ink-4)}
.crumb [aria-current]{color:var(--ink-1)}
/* keyboard focus parity for secondary links (buttons/nav/faq/arrow-link handled inline) */
.crumb a:focus-visible,.nav-mobile a:focus-visible,.footer-col a:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:2px;color:var(--ink-0)}

/* hero */
.svc-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line-1);padding:clamp(48px,7vw,96px) clamp(20px,5vw,64px) clamp(48px,7vw,88px)}
.nav + .svc-hero{margin-top:-54px;padding-top:calc(clamp(48px,7vw,96px) + 54px)}
.svc-hero-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto}
.svc-hero-blob{position:absolute;pointer-events:none;z-index:0}
.svc-h1{font-family:var(--font-display);font-weight:800;font-size:clamp(2.5rem,6.4vw,5rem);line-height:1;letter-spacing:-.035em;color:var(--ink-0);margin:1.1rem 0 0;overflow-wrap:break-word}
.svc-hero-sub{font-family:var(--font-body);font-size:clamp(1.0625rem,1.6vw,1.3125rem);line-height:1.55;color:var(--ink-2);max-width:58ch;margin:1.5rem 0 0;text-wrap:pretty}
.svc-hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.25rem}
.svc-hero-meta{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:2.5rem;color:var(--ink-3)}

/* sections */
.svc-main{display:block;position:relative;overflow-x:clip}
.svc-mid-blob{position:absolute;pointer-events:none;z-index:0}
.section{padding:clamp(56px,8vw,120px) clamp(20px,5vw,64px);max-width:var(--maxw);margin:0 auto;position:relative;z-index:1}
.section+.section{padding-top:0}
.sec-label{display:block;font-family:var(--font-mono);font-size:.75rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
.sec-title{font-family:var(--font-display);font-weight:800;font-size:clamp(1.75rem,3.2vw,2.75rem);line-height:1.05;letter-spacing:-.03em;color:var(--ink-0);margin:1rem 0 0}
.sec-lead{font-family:var(--font-body);font-size:1.0625rem;line-height:1.6;color:var(--ink-2);max-width:60ch;margin:1.25rem 0 0}
.sec-head{max-width:820px;margin-bottom:clamp(32px,4vw,52px)}

/* ruled scope / decide list */
.rlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.rlist li{display:grid;grid-template-columns:2.5rem 1fr;gap:.35rem 1.25rem;padding:1.35rem 0;border-bottom:1px solid var(--line-1)}
.rlist .rl-n{grid-row:1;font-family:var(--font-mono);font-size:.75rem;color:var(--ink-3);letter-spacing:.08em}
.rlist .rl-t{grid-row:1;font-family:var(--font-display);font-weight:700;font-size:clamp(1.125rem,1.7vw,1.375rem);letter-spacing:-.02em;color:var(--ink-0)}
.rlist .rl-d{grid-column:2;font-family:var(--font-body);font-size:1rem;line-height:1.55;color:var(--ink-2);max-width:62ch}
.rlist--interactive li{border-left:2px solid transparent;padding-left:clamp(.5rem,2vw,1.25rem);transition:background var(--t),border-color var(--t)}
.rlist--interactive li.is-active{border-left-color:var(--accent);background:var(--surface-1)}
.rlist--interactive li.is-active .rl-n{color:var(--accent-text)}
.rlist--interactive li:focus-visible{outline:2px solid var(--accent-ring);outline-offset:-2px}

/* coverage chips grouped */
.cov-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-1);border:1px solid var(--line-1)}
.cov-item{background:rgba(7,7,26,.5);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);padding:1.15rem clamp(16px,2vw,24px);display:flex;align-items:flex-start;gap:.85rem}
.cov-dot{width:5px;height:5px;flex:none;border:1px solid var(--ink-3);transform:rotate(45deg);margin-top:.5rem}
.cov-t{font-family:var(--font-body);font-size:1rem;color:var(--ink-1);line-height:1.4}

/* note / compare */
.note-body{max-width:64ch;font-family:var(--font-body);font-size:1.0625rem;line-height:1.65;color:var(--ink-1);border-left:2px solid var(--line-electric);padding-left:clamp(16px,2vw,24px)}
.compare{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line-1);border:1px solid var(--line-1)}
.compare li{background:rgba(7,7,26,.5);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);padding:clamp(18px,2.2vw,26px) clamp(16px,2vw,28px);display:flex;flex-direction:column;gap:.4rem}
.compare .cmp-t{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}
.compare .cmp-d{font-family:var(--font-body);font-size:1rem;line-height:1.55;color:var(--ink-1)}

/* process — vertical numbered rail (fits long labels) */
.proc{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.proc li{display:grid;grid-template-columns:3rem 1fr;column-gap:clamp(1rem,3vw,2.5rem);row-gap:.4rem;align-items:baseline;padding:1.6rem 0 1.6rem clamp(.5rem,2vw,1.25rem);border-bottom:1px solid var(--line-1);border-left:2px solid transparent}
.proc li:hover,.proc li:focus-visible{border-left-color:var(--accent);background:rgba(236,237,245,.05)}
.proc .pr-n{grid-column:1;grid-row:1;font-family:var(--font-mono);font-size:.75rem;color:var(--ink-3);letter-spacing:.08em}
.proc li:hover .pr-n,.proc li:focus-visible .pr-n{color:var(--accent-text)}
.proc .pr-t{grid-column:2;grid-row:1;font-family:var(--font-display);font-weight:700;font-size:clamp(1.125rem,1.7vw,1.375rem);letter-spacing:-.02em;color:var(--ink-0)}
.proc .pr-d{grid-column:2;grid-row:2;font-family:var(--font-body);font-size:1rem;line-height:1.55;color:var(--ink-2);max-width:64ch}
.proc li:hover,.proc li:focus-visible{padding-left:clamp(.75rem,2vw,1.5rem)}
.proc li{transition:background var(--t),border-color var(--t)}
.proc li:focus-visible{outline:2px solid var(--accent-ring);outline-offset:-2px}

/* technical artifact */
.artifact{border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface-1);overflow:hidden;box-shadow:var(--shadow-md)}
.artifact-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.1rem 1.5rem;border-bottom:1px solid var(--line-2);background:var(--surface-2)}
.artifact-body{padding:clamp(24px,4vw,56px) clamp(20px,3vw,48px)}
.artifact-cap{font-family:var(--font-body);font-size:.9375rem;line-height:1.55;color:var(--ink-2);margin:0;padding:1.1rem 1.5rem;border-top:1px solid var(--line-2);background:var(--surface-2);max-width:none}
.state-tag{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-mono);font-size:.625rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-text);border:1px solid var(--line-2);border-radius:var(--r-xs);padding:.2rem .5rem}
.state-tag .sdot{width:6px;height:6px;border-radius:999px;background:var(--teal-text)}

/* vulnerability chain (PT flagship artifact) */
.chain{display:flex;align-items:stretch;flex-wrap:wrap;gap:.6rem}
.chain-step{flex:1 1 130px;min-width:130px;display:flex;flex-direction:column;gap:.45rem;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:1rem;background:var(--bg-base)}
.chain-step.is-hot{border-color:var(--line-electric);background:var(--surface-2)}
.chain-step .cs-stage{font-family:var(--font-mono);font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.chain-step.is-hot .cs-stage{color:var(--accent-text)}
.chain-step .cs-vuln{font-family:var(--font-body);font-weight:600;font-size:.9375rem;line-height:1.3;color:var(--ink-1)}
.chain-step.is-hot .cs-vuln{color:var(--ink-0)}
.chain-link{align-self:center;font-family:var(--font-mono);color:var(--ink-3);flex:none}
.chain-bound{align-self:center;display:flex;flex-direction:column;align-items:center;gap:.25rem;flex:none;padding:0 .1rem}
.chain-bound .cb-line{width:1px;height:44px;border-left:1px dashed var(--line-electric)}
.chain-bound .cb-l{font-family:var(--font-mono);font-size:.5625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);writing-mode:vertical-rl;transform:rotate(180deg)}

/* deliverables (two columns) */
.deliv{display:grid;grid-template-columns:1fr 1fr;gap:0}
.deliv-col{display:flex;flex-direction:column}
.deliv-col:first-child{padding-right:clamp(28px,4vw,64px)}
.deliv-col:last-child{padding-left:clamp(28px,4vw,64px);border-left:1px solid var(--line-1)}
.deliv-col.solo{grid-column:1 / -1;border-left:0;padding-left:0;padding-right:0}
.deliv-col>.mono{color:var(--ink-3);margin-bottom:.75rem}
.deliv-list{list-style:none;margin:0;padding:0}
.deliv-list li{display:flex;flex-direction:column;gap:.3rem;padding:1.1rem 0;border-bottom:1px solid var(--line-1)}
.deliv-list li:first-child{border-top:1px solid var(--line-2)}
.deliv-t{font-family:var(--font-display);font-weight:700;font-size:1.0625rem;letter-spacing:-.01em;color:var(--ink-0)}
.deliv-d{font-family:var(--font-body);font-size:.9375rem;line-height:1.55;color:var(--ink-2)}
.deliv-col .arrow-link{margin-top:1.5rem}

/* faq */
.faq{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2);max-width:80ch}
.faq details{border-bottom:1px solid var(--line-1)}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.4rem 0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.0625rem,1.5vw,1.25rem);letter-spacing:-.01em;color:var(--ink-0)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline:2px solid var(--accent-ring);outline-offset:3px;border-radius:2px}
.faq .faq-i{flex:none;width:14px;height:14px;position:relative;transition:transform var(--t)}
.faq .faq-i::before,.faq .faq-i::after{content:"";position:absolute;background:var(--accent-text);top:50%;left:50%}
.faq .faq-i::before{width:14px;height:1.5px;transform:translate(-50%,-50%)}
.faq .faq-i::after{width:1.5px;height:14px;transform:translate(-50%,-50%);transition:transform var(--t)}
.faq details[open] .faq-i::after{transform:translate(-50%,-50%) scaleY(0)}
.faq .faq-a{font-family:var(--font-body);font-size:1rem;line-height:1.65;color:var(--ink-2);margin:0;padding:0 0 1.5rem;max-width:72ch}
.faq .faq-a p{margin:0 0 .85rem}
.faq .faq-a p:last-child{margin-bottom:0}

/* arrow link */
.arrow-link{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-body);font-weight:600;font-size:.9375rem;color:var(--accent-text);transition:gap var(--t),color var(--t);border-radius:var(--r-xs)}
.arrow-link:hover{gap:.85rem;color:#fff}
.arrow-link:focus-visible{outline:2px solid var(--accent-ring);outline-offset:4px;color:#fff}
.arrow-link-i{font-family:var(--font-mono)}

/* related services */
.related{border-top:1px solid var(--line-2)}
.rel-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.25rem;padding:1.5rem 0;border-bottom:1px solid var(--line-1);text-decoration:none;transition:background var(--t),transform var(--t)}
.rel-row:hover{background:rgba(236,237,245,.03);transform:translateX(.5rem)}
.rel-row .rel-k{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.rel-row .rel-t{font-family:var(--font-display);font-weight:700;font-size:clamp(1.125rem,1.8vw,1.5rem);letter-spacing:-.02em;color:var(--ink-0)}
.rel-row .rel-i{font-family:var(--font-mono);color:var(--accent-text);transition:transform var(--t)}
.rel-row:hover .rel-i,.rel-row:focus-visible .rel-i{transform:translateX(4px);color:#fff}
.rel-row:focus-visible{outline:2px solid var(--accent-ring);outline-offset:-2px;background:rgba(236,237,245,.03);transform:translateX(.5rem)}

/* closing cta */
.svc-cta{position:relative;overflow:visible;padding:clamp(72px,10vw,150px) clamp(20px,5vw,64px);border-top:1px solid var(--line-1);text-align:center}
.svc-cta-blob{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:min(1000px,110vw);pointer-events:none;z-index:0}
.svc-cta-inner{position:relative;z-index:2;max-width:720px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.svc-cta-title{font-family:var(--font-display);font-weight:900;font-size:clamp(2rem,4.5vw,3.5rem);line-height:1.03;letter-spacing:-.035em;color:var(--ink-0);margin:0 0 1.5rem}
.svc-cta-copy{font-family:var(--font-body);font-size:1.0625rem;line-height:1.6;color:var(--ink-2);max-width:52ch;margin:0 auto 2.25rem}
.svc-cta-actions{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}

/* footer */
.footer{position:relative;z-index:1;border-top:1px solid var(--line-2);padding:clamp(48px,6vw,80px) clamp(20px,5vw,64px) 2.5rem;max-width:var(--maxw);margin:0 auto}
.footer-top{display:grid;grid-template-columns:1.2fr 2fr;gap:3rem}
.footer-brand img{height:16px}
.footer-brand p{color:var(--ink-3);font-size:.9375rem;line-height:1.6;max-width:34ch;margin:1.1rem 0 0}
.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
/* align-items:flex-start, not the default stretch: these anchors are flex items,
   so blockification was overriding the display:inline-block that tokens/base.css
   sets on .footer-col a, and every link filled the whole column. The hit area
   then covered empty space far to the right of the text. Starting them keeps the
   clickable box on the words; base.css's padding-block holds the 24px target. */
.footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:.85rem}
.footer-col .mono{color:var(--ink-3);margin-bottom:.3rem}
.site .footer-col a{color:var(--ink-2);font-size:.9375rem;text-decoration:none}
.site .footer-col a:hover{color:var(--ink-0)}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:clamp(40px,5vw,72px);padding-top:1.5rem;border-top:1px solid var(--line-1)}
.footer-bottom .mono{color:var(--ink-3)}

@media(max-width:960px){
  .deliv{grid-template-columns:1fr}
  .deliv-col:first-child{padding-right:0;padding-bottom:2rem}
  .deliv-col:last-child{padding-left:0;border-left:0;border-top:1px solid var(--line-1);padding-top:2rem}
}
@media(max-width:860px){
  .nav-links,.nav-cta{display:none}
  .nav-burger{display:flex}
  .nav-mobile{display:flex;flex-direction:column;gap:.35rem;position:absolute;top:100%;left:0;right:0;background:var(--surface-1);border-bottom:1px solid var(--line-2);padding:1.25rem clamp(20px,5vw,64px) 1.5rem;max-height:80vh;overflow-y:auto}
  .nav-mobile .nm-group{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:1rem 0 .35rem}
  .nav-mobile a:not(.btn){color:var(--ink-1);font-family:var(--font-body);font-size:1.0625rem;padding:.6rem 0;text-decoration:none}
  .nav-mobile .btn{margin-top:1rem}
  .cov-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .br-wide{display:none}
  .chain{flex-direction:column;align-items:stretch}
  .chain-step{flex:0 0 auto}
  .chain-link{transform:rotate(90deg)}
  .chain-bound{flex-direction:row;padding:.25rem 0}
  .chain-bound .cb-line{width:40px;height:1px;border-left:0;border-top:1px dashed var(--line-electric)}
  .chain-bound .cb-l{writing-mode:horizontal-tb;transform:none}
}
@media(max-width:520px){
  .rlist li{grid-template-columns:1fr}
  .rlist .rl-n{grid-row:auto}
  .rlist .rl-d{grid-column:1}
  .footer-cols{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn:active,.btn:hover{transform:none}.rel-row:hover,.rel-row:focus-visible{transform:none}.rel-row:hover .rel-i,.rel-row:focus-visible .rel-i{transform:none}.arrow-link:hover,.arrow-link:focus-visible{gap:.5rem}}

/* skip link + main landmark offset */
.skip-link{position:absolute;left:12px;top:-60px;z-index:200;background:var(--accent);color:#fff;font-family:var(--font-body);font-weight:600;font-size:.9375rem;padding:.6rem 1rem;border-radius:var(--r-sm);text-decoration:none;transition:top var(--t)}
.skip-link:focus{top:12px;outline:2px solid #fff;outline-offset:2px}
#main-content{scroll-margin-top:88px}