/* Quorotto site — brand v2 "Docket" */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..800&display=swap');

:root{
  --docket:#F5D547; --docket-deep:#E3BE1F; --flimsy:#FBF1B8; --flimsy-light:#FDF8DC;
  --carbon:#232B6B; --carbon-deep:#161B4A; --carbon-70:#5A6096; --carbon-40:#A3A7C7;
  --rule:#E3E5EF; --mist:#F4F5F9; --paper:#FFFFFF; --pink:#E8B4C0;
  --paid:#1F7A4D; --due:#A35A0B; --over:#B8322A;
  --wide:118%; --semi:112%;
  --gutter:clamp(20px,4vw,48px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-size:17px;line-height:1.6;color:var(--carbon);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--carbon);outline-offset:3px}
.on-dark :focus-visible,.foot :focus-visible{outline-color:var(--docket)}
.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-999px;top:8px;background:var(--carbon);color:#fff;padding:8px 14px;z-index:100}
.skip:focus{left:8px}

/* type */
.display{font-stretch:var(--wide);font-weight:750;letter-spacing:-.028em;line-height:.96}
h1,h2,h3{font-stretch:var(--semi);font-weight:720;letter-spacing:-.02em;line-height:1.04}
h2{font-size:clamp(34px,4.6vw,60px)}
h3{font-size:clamp(22px,2vw,26px)}
.lede{font-size:clamp(18px,1.6vw,21px);line-height:1.5;max-width:40ch}
.num{font-variant-numeric:tabular-nums}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:4px;border:2px solid var(--carbon);background:var(--carbon);color:#fff;font:inherit;font-size:16px;font-weight:600;text-decoration:none;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.btn:hover{background:var(--carbon-deep);border-color:var(--carbon-deep)}
.btn.line{background:transparent;color:var(--carbon)}
.btn.line:hover{background:var(--carbon);color:#fff}
.btn.yellow{background:var(--docket);border-color:var(--docket);color:var(--carbon)}
.btn.yellow:hover{background:var(--docket-deep);border-color:var(--docket-deep)}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--rule)}
.nav.on-yellow{background:var(--docket);border-color:transparent}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.brand img{height:30px;width:auto}
.nav-links{display:flex;align-items:center;gap:30px;list-style:none}
.nav-links a{text-decoration:none;font-size:15px;font-weight:500}
.nav-links a:not(.btn):hover,.nav-links a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.nav-links .btn{min-height:42px;padding:0 18px;font-size:15px}
@media (max-width:820px){.nav-links li:not(.cta){display:none}.brand img{height:26px}}

/* footer */
.foot{background:var(--carbon-deep);color:#fff;padding-block:64px 40px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;align-items:start}
.foot img{height:32px;width:auto;margin-bottom:18px}
.foot p,.foot li{font-size:15px;color:#C9CCE3;line-height:1.7}
.foot ul{list-style:none}
.foot a{text-decoration:none}.foot a:hover{color:#fff;text-decoration:underline}
.foot h4{font-size:15px;font-weight:600;margin-bottom:10px;color:var(--docket)}
.foot-base{margin-top:48px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--carbon-40)}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr}}