/* Isak Legal — shared chrome: variables, navigation, dropdown, mobile menu, footer.
   Loaded before each page's own <style> block, so page rules still win.
   Edit here once; do not paste chrome rules back into individual pages. */

:root{--black:#000;--olo:#00F5C4;--white:#FFF;--ink:#0E1015;--gut:max(1.25rem,5vw)}
/* --gut: the one side gutter for nav, footer, hero and, below 1000px, the content grids; 5vw on desktop, never under 20px on phones */
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--black)} /* the canvas behind the page (overscroll, behind mobile browser bars) matches the black footer and head */
body{font-family:'Inter',-apple-system,'Helvetica Neue',Arial,sans-serif;color:var(--ink);background:var(--white);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--black);transition:transform .35s ease,background .35s ease,box-shadow .35s ease}
nav.hidden{transform:translateY(-100%)}
nav.light{background:var(--white);box-shadow:0 1px 0 rgba(0,0,0,.08)}
nav .bar{display:flex;align-items:center;justify-content:space-between;padding:1.4rem var(--gut)}
nav .left{display:flex;align-items:center;gap:3rem}
nav .right{display:flex;align-items:center;gap:1.8rem}
nav .mark img{height:1.55rem;width:auto;display:block}
nav .mark .logo-black{display:none}
nav.light .mark .logo-white{display:none}
nav.light .mark .logo-black{display:block}
nav .links{display:flex;gap:2.2rem;align-items:center}
nav .links > a{color:var(--white);font-size:.95rem;font-weight:500;opacity:.9;transition:opacity .2s,color .2s,border-color .2s;border-bottom:1px solid transparent;padding-bottom:2px}
nav .links > a:hover:not(.cur){opacity:1;border-bottom-color:currentColor}
nav .links > a.cur{opacity:1;border-bottom-color:var(--olo)}
nav .langs{display:flex;gap:1rem}
nav .langs a{color:var(--white);font-size:.85rem;font-weight:500;opacity:.75;cursor:pointer;transition:opacity .2s,color .2s;letter-spacing:.04em;border-bottom:1px solid transparent;padding-bottom:2px}
nav .langs a:hover{opacity:1}
nav .langs a.active{opacity:1;border-bottom-color:var(--olo)}
nav .search{background:none;border:none;cursor:pointer;color:var(--white);padding:.3rem;display:flex;transition:color .2s}
nav .search svg{width:1.25rem;height:1.25rem}
nav.light .links > a,nav.light .langs a,nav.light .dd .trig{color:var(--ink)}
nav.light .search{color:var(--ink)}
nav .dd{position:relative}
nav .dd .trig{color:var(--white);font-size:.95rem;font-weight:500;opacity:.9;cursor:default;display:inline-flex;align-items:center;gap:.45rem;border-bottom:1px solid transparent;padding-bottom:2px;transition:opacity .2s,border-color .2s}
nav .dd .trig.on{opacity:1;border-bottom-color:var(--olo)}
nav .dd .trig::after{content:"";width:.4em;height:.4em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-.25em;transition:transform .25s ease,margin-top .25s ease}
nav .dd .trig{background:none;border:0;border-bottom:1px solid transparent;font-family:inherit;line-height:inherit;padding:0 0 2px;margin:0;cursor:pointer}
nav .dd:hover .trig:not(.on),nav .dd.open .trig:not(.on){opacity:1;border-bottom-color:currentColor}
nav .dd:hover .trig::after,nav .dd.open .trig::after{transform:rotate(225deg);margin-top:.2em}
nav .dd .submenu{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:1.2rem;display:none;z-index:110}
nav .dd:hover .submenu,nav .dd.open .submenu{display:block}
nav .dd .panel{position:relative;background:var(--white);border-radius:10px;box-shadow:0 18px 50px rgba(0,0,0,.28);padding:1.2rem 0 1.1rem;min-width:19rem}
nav .dd .panel::before{content:"";position:absolute;top:-6px;left:50%;margin-left:-7px;width:14px;height:14px;background:var(--white);transform:rotate(45deg);border-radius:2px}
nav .dd .panel .ph{display:block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#999;padding:.3rem 2.2rem .5rem}
nav .dd .panel .ph:not(:first-child){margin-top:.7rem}
nav .dd .panel a{display:block;color:var(--ink);font-size:.98rem;font-weight:500;padding:.6rem 2.2rem;white-space:nowrap;transition:color .15s}
nav .dd .panel a:hover{color:#777}
nav .dd .panel a.here{color:#999;cursor:default}
/* two-column dropdown (Capabilities): anchored to the trigger's left edge so it never runs off-screen */
nav .dd.wide .submenu{left:0;transform:none}
nav .dd.wide .panel::before{left:2.6rem;margin-left:0}
nav .dd .panel.cols2{display:grid;grid-template-columns:max-content max-content} /* max-content, not auto: the panel is absolutely positioned inside a narrow trigger, and auto tracks stop at the columns' min-width, so the longest label overflowed the divider */
nav .dd .panel.cols2 > .all{grid-column:1/-1;padding-bottom:.9rem;margin-bottom:.5rem;border-bottom:1px solid rgba(0,0,0,.08)}
nav .dd .panel.cols2 .col{min-width:15.5rem}
nav .dd .panel.cols2 .col + .col{border-left:1px solid rgba(0,0,0,.08)}
nav .dd .panel.cols2 .col .ph{margin-top:0}
@media(max-width:860px){nav .links{gap:1.2rem}nav .links > a,nav .dd .trig{font-size:.85rem}}
/* ---- centered page grid: left rail for vertical labels + content column ---- */
.grid{display:grid;grid-template-columns:190px minmax(0,880px);justify-content:center;column-gap:5rem;padding:0 4vw}
@media(max-width:1000px){.grid{grid-template-columns:minmax(0,1fr);padding:0 var(--gut)}}
/* ---- page head (black, breadcrumb + title, aligned to content column) ---- */
.pagehead{background:var(--black);color:var(--white);padding-top:9rem;padding-bottom:4.5rem;position:relative;overflow:hidden}
/* a faint olo light in the top right corner of the black head; --hue-a sets the strength */
.pagehead::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 62vw 78vh at 100% 0%,rgba(0,245,196,var(--hue-a,.20)) 0%,rgba(0,245,196,calc(var(--hue-a,.20)*.4)) 32%,rgba(0,245,196,0) 66%)}
/* the fixed nav sits on the head: same light, same corner, so there is no seam (the home page has its own nav and hero) */
html:not([data-custom-nav]) nav:not(.light)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 62vw 78vh at 100% 0%,rgba(0,245,196,var(--hue-a,.20)) 0%,rgba(0,245,196,calc(var(--hue-a,.20)*.4)) 32%,rgba(0,245,196,0) 66%)}
.pagehead>*{position:relative}
.pagehead .crumb{grid-column:2;font-size:.95rem;margin-bottom:1.4rem;color:var(--white)}
.pagehead .crumb span{opacity:.75}
.pagehead .crumb b{font-weight:500;color:var(--olo)}
.pagehead .crumb i{font-style:normal;opacity:.5;padding:0 .5rem}
.pagehead h1{grid-column:2;font-size:clamp(2.4rem,6vw,4.6rem);font-weight:900;letter-spacing:-.035em;line-height:1.05}
@media(max-width:1000px){.pagehead .crumb,.pagehead h1{grid-column:1}}
/* ---- vertical rail labels ---- */
.vh{grid-column:1;writing-mode:vertical-rl;transform:rotate(180deg);font-size:clamp(2.4rem,4.2vw,4.2rem);font-weight:900;letter-spacing:-.02em;line-height:1;justify-self:end;align-self:start;position:sticky;top:7rem;white-space:nowrap;color:var(--ink)}
@media(max-width:1000px){.vh{writing-mode:horizontal-tb;transform:none;position:static;justify-self:start;font-size:2rem;margin-bottom:1.2rem}}
.content{grid-column:2;min-width:0}
@media(max-width:1000px){.content{grid-column:1}}
.sec{padding-top:5rem;padding-bottom:3.5rem} /* longhand on purpose: the shorthand used to zero the .grid side padding on .grid.sec */
/* ---- typographic pieces ---- */
.lead{font-size:clamp(1.25rem,2vw,1.6rem);font-weight:700;line-height:1.4;letter-spacing:-.01em}
.lead .u{border-bottom:3px solid var(--olo)}
.body-copy{margin-top:1.6rem;font-size:1.05rem;color:#3a3f3c;max-width:760px}
.body-copy p + p{margin-top:1rem}
h2.sub,h3.sub{font-size:clamp(1.4rem,2.2vw,1.9rem);font-weight:900;letter-spacing:-.02em;margin:3.2rem 0 1.8rem}
/* ---- featured insight cards ---- */
.fcards{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
@media(max-width:720px){.fcards{grid-template-columns:1fr}}
.fcard{border:1px solid rgba(0,0,0,.45);padding:1.7rem 1.7rem 1.5rem;min-height:230px;display:flex;flex-direction:column;transition:border-color .25s,box-shadow .25s}
.fcard:hover{border-color:var(--olo);box-shadow:0 6px 24px rgba(0,245,196,.25)}
.fcard .meta{font-size:.85rem;font-weight:600;margin-bottom:.9rem}
.fcard .meta i{font-style:normal;opacity:.4;padding:0 .45rem}
.fcard h4{font-size:clamp(1.1rem,1.6vw,1.4rem);font-weight:700;line-height:1.3;letter-spacing:-.01em;flex-grow:1}
.fcard .see{font-size:.9rem;font-weight:500;margin-top:1.4rem}
.fcard .see::after{content:" →";transition:margin-left .2s}
.fcard:hover .see::after{margin-left:.35rem}
/* ---- article list rows ---- */
a.arow{display:block} /* a link row is a block: the rule line and the padding apply, so each date sits with its own title */
.arow{border-bottom:1px solid rgba(0,0,0,.25);padding:1.7rem 0}
.arow:first-of-type{border-top:1px solid rgba(0,0,0,.25)}
.arow .meta{font-size:.85rem;font-weight:600;margin-bottom:.4rem}
.arow .meta i{font-style:normal;opacity:.4;padding:0 .45rem}
.arow h4{font-size:1.2rem;font-weight:700;letter-spacing:-.01em}
.arow p{font-size:.95rem;color:#555;margin-top:.4rem;max-width:720px}
/* ---- resources accordion ---- */
details{border-top:1px solid rgba(0,0,0,.45)}
details:last-of-type{border-bottom:1px solid rgba(0,0,0,.45)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:1.7rem 0;font-size:clamp(1.2rem,1.9vw,1.55rem);font-weight:700;letter-spacing:-.01em}
summary::-webkit-details-marker{display:none}
summary .pm{flex-shrink:0;font-weight:500;font-size:1.7rem;line-height:1;transition:color .2s}
summary:hover .pm{color:var(--olo)}
details .pm::before{content:"+"}
details[open] .pm::before{content:"−"}
.drawer{background:#F4F6F5;padding:2.1rem 2.4rem;margin-bottom:1.8rem}
.drawer .grp{font-weight:700;font-size:.98rem;margin:1.4rem 0 .55rem}
.drawer .grp:first-child{margin-top:0}
.drawer .lnk{display:block;width:fit-content;font-size:.95rem;margin:.5rem 0;padding-left:1.6rem;position:relative}
.drawer .lnk::before{content:"↗";position:absolute;left:0;top:0;font-size:.85rem}
.drawer a.lnk span{border-bottom:1px solid var(--ink)}
.drawer a.lnk:hover span{border-color:var(--olo);background:rgba(0,245,196,.25)}
.drawer .lnk.todo{color:#999}
.drawer .lnk.todo::before{content:"○"}
/* ---- promo band ---- */
.promo{background:var(--olo);color:var(--ink);padding:2.2rem 2.6rem;margin-top:3.5rem;font-size:1.05rem;line-height:1.7}
.promo a{font-weight:700;border-bottom:1.5px solid var(--ink)}
.promo a:hover{opacity:.65}
/* ---- how-we-help list / related rows (capability pages) ---- */
.svlist{list-style:none}
.svlist li{border-bottom:1px solid rgba(0,0,0,.3);padding:1.35rem 0;font-size:1.06rem;font-weight:500;max-width:860px}
.svlist li:first-child{border-top:1px solid rgba(0,0,0,.3)}
a.rrow{display:flex;justify-content:space-between;align-items:baseline;gap:2rem;border-bottom:1px solid rgba(0,0,0,.3);padding:1.5rem 0}
a.rrow:first-of-type{border-top:1px solid rgba(0,0,0,.3)}
a.rrow h4{font-size:1.2rem;font-weight:700}
a.rrow .go{font-size:.9rem;font-weight:500;white-space:nowrap}
a.rrow .go::after{content:"→";display:inline-block;margin-left:.4rem;transition:transform .2s}
a.rrow:hover .go::after{transform:translateX(.35rem)}
/* ---- CTA band ---- */
.ctasec{background:var(--black);color:var(--white);margin-top:5rem;padding:4.5rem 0}
.ctasec .content p.k{font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--olo)}
.ctasec a.big{display:block;font-size:clamp(1.5rem,3.2vw,2.5rem);font-weight:900;letter-spacing:-.02em;width:fit-content;border-bottom:3px solid var(--olo);margin-top:1.4rem;transition:opacity .25s}
.ctasec a.big:hover{opacity:.75}
.stamp{margin:3.5rem 0 0;font-size:.8rem;color:#888;max-width:760px}
/* ---- back to top ---- */
.btt{position:fixed;right:2rem;bottom:2rem;background:var(--white);color:var(--ink);border:1.5px solid var(--ink);padding:.75rem 1.3rem;font-size:.9rem;font-weight:500;cursor:pointer;display:none;z-index:90;font-family:inherit;transition:background .2s,border-color .2s}
.btt:hover{background:var(--olo);border-color:var(--olo)}
.btt.show{display:block}
footer{background:#000;color:rgba(255,255,255,.8);padding:4.5rem var(--gut) 2.5rem;font-size:.92rem;margin-top:5rem}
.ctasec + footer{margin-top:0}
footer .cols{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:3rem}
footer img.flogo{height:2.2rem;width:auto;display:block}
footer .faddress{margin-top:1.8rem;font-size:.85rem;line-height:1.7;color:rgba(255,255,255,.65)}
footer .sitemap{display:grid;grid-template-columns:repeat(4,auto);gap:3.2rem}
@media(max-width:1100px){footer .sitemap{grid-template-columns:repeat(2,auto);gap:2.4rem 3rem}}
@media(max-width:640px){footer .sitemap{grid-template-columns:1fr;gap:2rem}}
footer .col h4{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:.9rem;font-weight:700}
footer .col a{display:block;margin-bottom:.55rem;color:var(--white)}
footer .col a:hover{opacity:.7}
footer .bottombar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;border-top:1px solid rgba(255,255,255,.2);margin-top:3.5rem;padding-top:1.5rem;font-size:.8rem;opacity:.75}
footer .bottombar .bl{display:flex;flex-wrap:wrap;align-items:baseline}
footer .bottombar .bl i{font-style:normal;opacity:.4;padding:0 .6rem}
footer .bottombar a{color:inherit;border:0;transition:opacity .2s}
footer .bottombar a:hover{opacity:.7}

/* ---- keyboard focus: one visible, consistent ring everywhere ---- */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
/* the accent ring only on black surfaces (1.41:1 on white would fail the 3:1 non-text contrast minimum) */
nav:not(.light) a:focus-visible,nav:not(.light) button:focus-visible,.mmenu a:focus-visible,.mmenu button:focus-visible,.mclose:focus-visible,footer a:focus-visible,footer button:focus-visible,.hero a:focus-visible{outline-color:var(--olo);outline-offset:4px}
:focus:not(:focus-visible){outline:none}

/* ---- skip link: first tab stop, visible only when focused ---- */
.skip{position:absolute;left:-9999px;top:0;z-index:400;background:var(--olo);color:#0E1015;
  font-weight:700;font-size:.9rem;padding:.7rem 1.1rem;text-decoration:none}
.skip:focus{left:1rem;top:1rem}

/* translated editions: German, Ukrainian and Russian words run long, so on narrow screens
   they may hyphenate (the page's lang attribute selects the rules) and, failing that, break */
.rrow h4{min-width:0}
@media (max-width:720px){
  html:not([lang="en"]) main{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}
  html:not([lang="en"]) .vh{white-space:normal}
}