/* HNW Solutions: foundations. Tokens, resets, type primitives, font pairings. */ :root{ --midnight:#0E1F33;--ink:#1B2A3E;--graphite:#2C2C2C;--slate:#6E7884;--pewter:#9AA3AE; --brass:#B08D57;--bronze:#8A6F45;--brass-soft:#D9C6A4; --bone:#FBF9F4;--on-dark:#FBF9F4;--parchment:#F4EFE6;--linen:#E8E1D3;--mist:#E6EAEE;--paper:#FFFFFF; --success:#4A6B4F;--warning:#B07D2C;--danger:#8C3A35;--info:#3A5470; --fg-1:var(--graphite);--fg-2:var(--slate);--fg-3:var(--pewter);--fg-inverse:var(--bone); --bg-page:var(--bone);--bg-surface:var(--parchment);--bg-elevated:var(--paper);--bg-inverse:var(--midnight); --border-hairline:var(--linen);--border-strong:rgba(14,31,51,.16);--border-on-dark:rgba(255,255,255,.12); --font-display:ui-serif,Georgia,"Times New Roman",serif; --font-body:system-ui,-apple-system,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace; --ds:.74; --w-light:300;--w-regular:400;--w-medium:500;--w-semibold:600;--w-bold:700; --lh-tight:1.06;--lh-snug:1.2;--lh-normal:1.5;--lh-relaxed:1.65; --tr-eyebrow:.18em; --r-1:2px;--r-2:4px;--r-3:6px; --shadow-1:0 1px 2px rgba(14,31,51,.04),0 1px 1px rgba(14,31,51,.03); --shadow-2:0 2px 8px rgba(14,31,51,.06),0 1px 2px rgba(14,31,51,.04); --shadow-3:0 12px 32px rgba(14,31,51,.1),0 2px 6px rgba(14,31,51,.06); --ease-standard:cubic-bezier(.32,.08,.24,1);--ease-emphasis:cubic-bezier(.16,1,.3,1); --dur-fast:140ms;--dur-base:240ms;--dur-slow:420ms; --container-max:1240px;--container-narrow:880px;--gutter:32px;--header-h:84px; } /* ---- Dark theme. Flips only the neutral ramp; brand navy, brass and --on-dark are deliberately unchanged so buttons and dark sections keep their identity. --- */ html[data-theme="dark"]{ --bone:#0A1622;--parchment:#11283C;--paper:#16324B;--linen:rgba(255,255,255,.11); --graphite:#EDE8DD;--slate:#A3AEBB;--pewter:#75808E;--ink:#1B3A57; --border-strong:rgba(255,255,255,.22);--border-on-dark:rgba(255,255,255,.14); --shadow-1:0 1px 2px rgba(0,0,0,.35);--shadow-2:0 2px 10px rgba(0,0,0,.4);--shadow-3:0 14px 36px rgba(0,0,0,.5); color-scheme:dark; } /* ---- Font pairing options, all system stacks. No downloads, no network. --- Set data-font on to lock one in. --ds keeps headline sizes even between families with different x-heights. */ html[data-font="garamond"]{--font-display:Garamond,"Adobe Garamond Pro","EB Garamond","Palatino Linotype",Georgia,serif;--ds:.9} html[data-font="palatino"]{--font-display:Palatino,"Palatino Linotype","Book Antiqua",Georgia,serif;--ds:.78} html[data-font="hoefler"]{--font-display:"Hoefler Text","Big Caslon",Baskerville,Palatino,Georgia,serif;--ds:.8} html[data-font="charter"]{--font-display:Charter,"Bitstream Charter","Sitka Text",Cambria,Georgia,serif;--font-body:"Avenir Next",Avenir,Corbel,system-ui,sans-serif;--ds:.78} /* ---- Reset ------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} html,body{margin:0;padding:0} body{background:var(--bg-page);color:var(--fg-1);font-family:var(--font-body);font-size:16px;line-height:var(--lh-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden} img,svg{display:block;max-width:100%} button{font:inherit;cursor:pointer;color:inherit} input,select,textarea{font:inherit} a{color:var(--midnight);text-decoration:none} a:hover{color:var(--brass)} ul,ol{margin:0;padding:0} h1,h2,h3,h4,p,dd,dl,figure,blockquote{margin:0} :focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:1px} /* ---- Layout primitives ------------------------------------------------- */ .container{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)} .container-narrow{max-width:var(--container-narrow);margin:0 auto;padding:0 var(--gutter)} .section{padding:96px 0;scroll-margin-top:calc(var(--header-h) + 8px)} .section-tight{padding:64px 0;scroll-margin-top:calc(var(--header-h) + 8px)} .section-dark{background:var(--midnight);color:var(--on-dark)} .section-dark .eyebrow{color:var(--brass-soft)} .section-parchment{background:var(--parchment)} .hairline{height:1px;background:var(--border-hairline)} .skip-link{position:absolute;left:16px;top:-60px;z-index:200;background:var(--midnight);color:var(--on-dark);padding:12px 18px;border-radius:var(--r-1);font-size:13px;transition:top var(--dur-fast)} .skip-link:focus{top:16px;color:var(--on-dark)} /* ---- Type primitives --------------------------------------------------- */ .eyebrow{font-family:var(--font-body);font-weight:var(--w-medium);font-size:11px;letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--brass)} .display{font-family:var(--font-display);font-weight:var(--w-regular);line-height:var(--lh-tight);letter-spacing:-.02em;color:var(--fg-1)} .rule-brass{width:36px;height:0;border:0;border-top:1.5px solid var(--brass);margin:24px 0} .tabular,.figure{font-family:var(--font-mono);font-feature-settings:"tnum" 1,"lnum" 1} /* ---- Buttons ----------------------------------------------------------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-body);font-size:14px;font-weight:var(--w-medium);letter-spacing:.02em;min-height:46px;padding:12px 24px;border-radius:var(--r-1);border:1px solid transparent;transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);white-space:nowrap} .btn-primary{background:var(--midnight);color:var(--on-dark);border-color:var(--midnight)} .btn-primary:hover{background:var(--ink);color:var(--on-dark)} .btn-primary.on-dark{background:var(--on-dark);color:var(--midnight);border-color:var(--on-dark)} .btn-primary.on-dark:hover{background:var(--brass-soft);border-color:var(--brass-soft);color:var(--midnight)} .btn-secondary{background:transparent;color:var(--midnight);border-color:var(--midnight)} .btn-secondary:hover{background:var(--midnight);color:var(--on-dark)} .btn-tertiary{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:14px;font-weight:var(--w-medium);color:var(--midnight);min-height:44px;padding:4px 0;border:0;background:0 0;box-shadow:inset 0 -1px 0 var(--brass)} .btn-tertiary:hover{color:var(--brass)} .arrow-r{width:12px;height:1px;background:currentColor;position:relative;flex:none} .arrow-r::after{content:"";position:absolute;right:-1px;top:-3px;width:6px;height:6px;border-right:1px solid currentColor;border-top:1px solid currentColor;transform:rotate(45deg)} /* ---- Form fields ------------------------------------------------------- */ .field{display:flex;flex-direction:column;gap:6px} .field label{font-family:var(--font-body);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);font-weight:var(--w-medium)} .field input,.field select,.field textarea{font-family:var(--font-body);font-size:16px;padding:13px 14px;background:var(--paper);border:1px solid var(--border-strong);border-radius:var(--r-1);color:var(--fg-1);transition:border-color var(--dur-fast);width:100%;min-height:48px} .field textarea{resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--brass);outline-offset:2px;border-color:var(--midnight)} @media (max-width:640px){:root{--gutter:20px}.section{padding:64px 0}.section-tight{padding:48px 0}} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}