/* Motava shared styles: tokens, type, nav, buttons, footer. Used by every page. */
:root{
  --canvas:#EEF1EC;
  --panel:#F8F9F5;
  --panel-2:#E4E9E3;
  --forest:#173A30;
  --forest-2:#0F2A22;
  --text-primary:#10191C;
  --text-secondary:#4A5856;
  --text-on-dark:#F4F5EF;
  --text-on-dark-2:#B9C8C0;
  --accent:#00CFCB;
  --accent-hover:#3BDCD8;
  --accent-ink:#0A6E6C;
  --accent-muted:rgba(0,207,203,.16);
  --mark:#089A97;
  --hair:rgba(16,25,28,.12);
  --line-strong:rgba(16,25,28,.32);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --display:"Archivo",system-ui,sans-serif;
  --body:"Hanken Grotesk",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --wrap:1180px;
  --gutter:clamp(20px,5vw,56px);
  --radius:18px;
  --tshadow:0 1px 2px rgba(6,10,8,.95),0 3px 12px rgba(6,10,8,.72),0 10px 44px rgba(6,10,8,.7);
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--canvas);color:var(--text-primary);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%}
a{color:var(--accent-ink);text-underline-offset:.18em;text-decoration-thickness:1px;transition:color .25s var(--ease-out)}
a:hover{color:var(--text-primary)}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:6px}
.on-dark :focus-visible{outline-color:var(--accent)}
h1,h2,h3{font-family:var(--display);font-stretch:118%;font-weight:800;letter-spacing:-.015em;line-height:1.04;margin:0;text-wrap:balance}
h2{font-size:clamp(1.9rem,1.05rem + 2.25vw,3rem)}
h3{font-size:clamp(1.25rem,1rem + .8vw,1.6rem);font-weight:700;line-height:1.15}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--text-primary);color:var(--text-on-dark);padding:10px 16px;border-radius:10px;transition:top .25s var(--ease-out)}
.skip:focus{top:12px}
.label,.kicker{font:500 12.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.kicker{display:inline-flex;align-items:center;gap:10px;color:var(--accent-ink);margin-bottom:18px}
.kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-muted)}
.on-dark .kicker{color:var(--accent)}
.lede{font-size:clamp(1.05rem,.98rem + .35vw,1.22rem);color:var(--text-secondary);max-width:58ch}
.on-dark .lede{color:var(--text-on-dark-2)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;font:600 16px/1 var(--body);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background-color .3s var(--ease-out),color .3s var(--ease-out),border-color .3s var(--ease-out),transform .3s var(--ease-out),box-shadow .3s var(--ease-out);white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:var(--text-primary);box-shadow:0 6px 22px -8px rgba(0,160,157,.6)}
.btn-primary:hover{background:var(--accent-hover);color:var(--text-primary);box-shadow:0 10px 28px -8px rgba(0,160,157,.7)}
.btn-line{background:transparent;color:var(--text-primary);border-color:var(--line-strong)}
.btn-line:hover{border-color:var(--text-primary);color:var(--text-primary)}
.btn-ghost-light{background:rgba(10,16,14,.28);color:#fff;border-color:rgba(255,255,255,.6);backdrop-filter:blur(6px)}
.btn-ghost-light:hover{background:rgba(10,16,14,.45);border-color:#fff;color:#fff}
.btn-sm{min-height:40px;padding:0 18px;font-size:15px}
@media (pointer:coarse){.btn{min-height:48px}.btn-sm{min-height:44px}}

/* brand mark (masked SVG so it takes the text colour) */
.mark{display:inline-block;width:38px;aspect-ratio:1657/1285;background:currentColor;-webkit-mask:url(/assets/motava-mark.svg) center/contain no-repeat;mask:url(/assets/motava-mark.svg) center/contain no-repeat}
.wordmark{display:inline-block;width:118px;aspect-ratio:2360/341;background:currentColor;-webkit-mask:url(/assets/motava-wordmark.svg) center/contain no-repeat;mask:url(/assets/motava-wordmark.svg) center/contain no-repeat}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:28px;padding:14px var(--gutter);color:var(--text-primary);transition:background-color .45s var(--ease-out),color .45s var(--ease-out),box-shadow .45s var(--ease-out),backdrop-filter .45s}
.nav.solid{background:rgba(238,241,236,.82);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 var(--hair)}
.nav .brand{display:inline-flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.nav .brand .mark{color:var(--mark);transition:color .45s var(--ease-out)}
.nav .links{display:flex;gap:26px;margin-left:auto}
.nav .links a{color:inherit;text-decoration:none;font-weight:500;font-size:15.5px;opacity:.86;transition:opacity .25s var(--ease-out)}
.nav .links a:hover{opacity:1}
.nav.over{color:#fff}
.nav.over .brand .mark{color:var(--accent)}
.nav.over .links a{text-shadow:0 1px 8px rgba(0,0,0,.5)}
@media (max-width:820px){.nav .links{display:none}.nav .cta{margin-left:auto}.wordmark{width:96px}}

/* footer */
.foot{background:var(--forest-2);color:var(--text-on-dark-2);padding:64px 0 44px}
.foot .wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:end}
.foot .brand{display:inline-flex;align-items:center;gap:12px;color:var(--text-on-dark);text-decoration:none}
.foot .brand .mark{color:var(--accent)}
.foot .tag{margin-top:16px;font:500 13px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--text-on-dark-2)}
.foot .tag b{color:var(--accent);font-weight:500}
.foot nav{display:flex;flex-wrap:wrap;gap:22px;justify-content:flex-end}
.foot nav a{color:var(--text-on-dark);text-decoration:none;opacity:.85}
.foot nav a:hover{opacity:1;color:var(--text-on-dark)}
.foot .copy{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:22px;font-size:14px}
@media (max-width:720px){.foot .wrap{grid-template-columns:1fr}.foot nav{justify-content:flex-start}}

/* simple content pages */
.page{padding:140px 0 96px}
.page h1{font-size:clamp(2.4rem,1.4rem + 3.4vw,4.4rem);margin-bottom:22px}
.prose{max-width:70ch}
.prose h2{font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);margin:44px 0 12px}
.prose p,.prose li{color:var(--text-secondary)}
.prose p+p{margin-top:14px}
.prose ul{padding-left:1.2em}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
}