/* Only Ducks shared styles: tokens, shell, base components. See docs/r2os/development/design.md.
   Page-only styles live in assets/css/<page>.css. */
:root{
  --bg:#ffffff; --grey:#f0f0ec; --ink:#1d1f1e; --mute:#5f5d57; --line:#d9d8d2;
  --green:#0e3b1e; --orange:#ee4d19; --orange-deep:#c72d00; --orange-dark:#9f2300; --paper:#f3efe4; --white:#ffffff;
  --r-card:8px; --r-field:4px; --r-pill:999px; --radius:var(--r-card); --header-h:72px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px)}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important} }
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 Barlow,Arial,sans-serif;font-variant-numeric:tabular-nums}
a{color:inherit}
img{max-width:100%;height:auto}
p{margin:0 0 1em;max-width:62ch}
:focus-visible{outline:3px solid var(--orange-deep);outline-offset:3px}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.d{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:.95;margin:0;text-wrap:balance}
h1.d{font-size:clamp(46px,7vw,112px)}
h2.d{font-size:clamp(32px,4.6vw,64px)}
.eyebrow{font-weight:600;font-size:16px;letter-spacing:0;text-transform:none;color:var(--orange-deep);margin:0 0 10px}
.skip{position:absolute;left:-999px;top:8px;background:var(--orange-deep);color:var(--white);padding:8px 12px;z-index:2000}
.skip:focus{left:8px}

.btn{display:inline-block;background:var(--orange-deep);color:var(--white);text-decoration:none;font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;padding:16px 30px;border-radius:var(--r-pill);border:0;cursor:pointer;font-family:inherit;transition:background .15s}
.btn.ghost{border:2px solid var(--ink)}
/* Button colors come from variables and are applied with higher specificity than any page 'X a' rule (CK-CTA-COLOR). */
.btn{--fg:var(--white);--bg-c:var(--orange-deep);--fg-h:var(--white);--bg-h:var(--orange-dark)}
.btn.ghost{--fg:var(--ink);--bg-c:transparent;--fg-h:var(--white);--bg-h:var(--ink)}
.btn.light{--fg:var(--ink);--bg-c:var(--white);--fg-h:var(--ink);--bg-h:var(--paper)}
a.btn.btn:link,a.btn.btn:visited,button.btn.btn{color:var(--fg);background:var(--bg-c)}
a.btn.btn:link:hover,a.btn.btn:visited:hover,button.btn.btn:hover{color:var(--fg-h);background:var(--bg-h)}
.btn.sm{padding:11px 18px;font-size:12px}
.arrow{color:var(--orange-deep);font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.arrow::after{content:"  →"}

/* header */
header{position:sticky;top:0;z-index:1000;background:var(--bg);border-bottom:1px solid var(--line)}
.top{display:flex;align-items:center;justify-content:space-between;gap:20px;height:var(--header-h)}
.logo{font-family:Anton,Impact,sans-serif;font-size:30px;text-transform:uppercase;text-decoration:none;color:var(--green);display:flex;align-items:center;gap:10px;letter-spacing:.02em;white-space:nowrap}
.logo svg{width:44px;height:44px;flex:none}
.logo span{color:var(--orange-deep)}
nav ul{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
nav a:not(.btn){text-decoration:none;font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
nav a:not(.btn):hover,nav a[aria-current]{color:var(--orange-deep)}
.menu-btn{display:none;width:44px;height:44px;border:2px solid var(--ink);border-radius:var(--r-card);background:transparent;cursor:pointer;position:relative}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{position:absolute;left:10px;right:10px;height:2px;background:var(--ink);content:""}
.menu-btn span{top:19px}
.menu-btn span::before{left:0;right:0;top:-7px}
.menu-btn span::after{left:0;right:0;top:7px}
@media (max-width:860px){
  .menu-btn{display:block}
  nav{position:absolute;z-index:1;left:0;right:0;top:var(--header-h);background:var(--bg);border-bottom:1px solid var(--line);padding:8px 20px 20px;box-shadow:0 18px 32px rgba(0,0,0,.18)}
  nav.open::after{content:"";position:absolute;left:0;right:0;top:100%;height:100vh;background:rgba(29,31,30,.45)}
  .menu-btn[aria-expanded=true] span{background:transparent}
  .menu-btn[aria-expanded=true] span::before{top:0;transform:rotate(45deg)}
  .menu-btn[aria-expanded=true] span::after{top:0;transform:rotate(-45deg)}
  .js nav:not(.open){display:none}
  nav ul{flex-direction:column;align-items:stretch;gap:0}
  nav li{border-top:1px solid var(--line)}
  nav li:first-child{border-top:0}
  nav a:not(.btn){display:block;padding:16px 0;font-size:15px}
  nav a.btn{margin-top:14px;display:block;text-align:center}
}
@media (max-width:520px){ .logo{font-size:22px;gap:8px} .logo svg{width:32px;height:32px} }

/* footer */
footer{background:var(--ink);color:var(--paper);padding:56px 0 44px;font-size:15px;margin-top:40px}
.foot{display:grid;grid-template-columns:1.2fr 1fr 1.4fr;gap:36px;align-items:start}
footer .logo{color:var(--paper)}
footer .logo .ring{stroke:var(--paper)}  /* explicit ring colour on the ink footer (currentColor already does this) */
footer .logo span{color:var(--orange)}
footer p{max-width:none;margin:0 0 8px}
.trust{font-family:Anton,Impact,sans-serif;font-size:26px;line-height:1.1;text-transform:uppercase;margin-top:18px!important;max-width:16ch!important}
.foot-links{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot-links a{text-decoration:none;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:13px}
.foot-links a:hover{color:var(--orange)}
footer .fine{font-size:14px}
@media (max-width:860px){ .foot{grid-template-columns:1fr;gap:28px} }

.stub{padding-block:72px}
.stub h1{margin-bottom:24px}

.nf{padding-block:clamp(64px,12vw,160px)}  /* block only: keeps the .wrap side gutter */
.nf .d{color:var(--green)}
.nf .go{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}