/* nurel site system: tokens, type, buttons, inputs, nav, footer. Every page links this. */
@import url('/css/fonts.css');
:root{
  --ink:#14100D; --ink-2:#3a302a; --muted:#6f6259; --line:#e7ddd1;
  --cream:#F6EFE6; --paper:#FBF7F1; --white:#fff;
  --amber:#FFB547; --amber-2:#FF8A1A; --stage:#0d0b0a; --stage-2:#1a120c;
  --display:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --text:'Figtree',ui-sans-serif,system-ui,sans-serif;
  --r-sm:10px; --r:16px; --r-lg:24px;
  --shadow:0 1px 2px rgba(20,16,13,.06),0 12px 40px rgba(20,16,13,.10);
  --nav-h:68px;
  --edge:clamp(20px,3vw,56px); /* page edge for full-bleed layouts (nav, hero copy, rail) */
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important} /* the attribute must beat component display rules (.btn etc.) */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font:400 17px/1.55 var(--text);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--display);letter-spacing:-.03em;line-height:1.02;margin:0;font-weight:750}
.h-xl{font-size:clamp(44px,6.4vw,96px)}
.h-l{font-size:clamp(36px,4.6vw,68px)}
.h-m{font-size:clamp(26px,2.6vw,38px)}
.kicker{font:700 12.5px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lede{font-size:clamp(17px,1.35vw,20px);color:var(--ink-2);max-width:60ch}
.wrap{width:min(1240px,calc(100% - 48px));margin-inline:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:999px;border:0;font:700 15.5px var(--text);text-decoration:none;cursor:pointer;transition:transform .15s ease,background .15s ease}
.btn:active{transform:scale(.98)}
.btn-ink{background:var(--ink);color:#fff}.btn-ink:hover{background:#2b231e}
.btn-light{background:#fff;color:var(--ink)}.btn-light:hover{background:var(--cream)}
.btn-ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.field{height:56px;border-radius:16px;border:1.5px solid var(--line);background:#fff;padding:0 18px;font:500 17px var(--text);color:var(--ink);width:100%}
.field:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgba(255,181,71,.35)}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:12px;z-index:200;background:#fff;padding:8px 14px;border-radius:8px}

/* nav: transparent over dark heroes (.nav-on-dark), solid paper after scroll (.nav-solid) */
.nav{position:fixed;inset:0 0 auto;height:var(--nav-h);z-index:100;display:flex;align-items:center;transition:background .25s ease,box-shadow .25s ease,color .25s ease}
.nav .wrap{display:flex;align-items:center;gap:28px;width:calc(100% - 2 * var(--edge));max-width:none}
.nav-on-dark{color:#fff}
.nav-glass{background:rgba(13,11,10,.58);backdrop-filter:saturate(1.3) blur(14px);-webkit-backdrop-filter:saturate(1.3) blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.07)}
.nav-solid{color:var(--ink);background:rgba(251,247,241,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 var(--line)}
.logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font:800 22px/1 var(--display);letter-spacing:-.04em}
.logo svg{width:26px;height:26px}
.logo .n-stroke{stroke:currentColor}
.nav-links{display:flex;align-items:center;gap:26px;margin-left:auto;font-weight:600;font-size:15px}
.nav-links a{text-decoration:none;opacity:.88}.nav-links a:hover{opacity:1}
.nav-cta{height:42px;padding:0 18px;font-size:14.5px}
.nav-on-dark .nav-cta{background:#fff;color:var(--ink)}
.nav-solid .nav-cta{background:var(--ink);color:#fff}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;color:inherit;width:44px;height:44px;border-radius:12px}
@media (max-width:860px){
  .nav-links{display:none}
  .nav-toggle{display:inline-grid;place-items:center}
  .nav.open{background:var(--paper);color:var(--ink);height:auto;padding-bottom:18px;align-items:flex-start}
  .nav.open .wrap{flex-wrap:wrap;padding-top:13px}
  .nav.open .nav-links{display:flex;flex-direction:column;align-items:flex-start;width:100%;gap:16px;margin:12px 0 0;font-size:19px}
}

.footer{background:var(--stage);color:#cbbfb3;padding:56px 0 40px;font-size:14.5px}
.footer .wrap{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.footer .logo{color:#fff}
.footer nav{display:flex;gap:22px;margin-left:auto;flex-wrap:wrap}
.footer a{text-decoration:none}.footer a:hover{color:#fff}
.footer small{flex-basis:100%;color:#8c7f74;margin-top:18px}
