@font-face { font-family: "DM Sans Variable"; src: url("/static/fonts/DMSans-VariableFont_opsz,wght.30bbfaf1881a.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "DM Sans Variable"; src: url("/static/fonts/DMSans-Italic-VariableFont_opsz,wght.01b16af808a5.ttf") format("truetype"); font-weight: 100 900; font-style: italic; font-display: swap; } :root { --color-primary: #245A55; /* Forest */ --color-accent: #ADE5D0; /* Teal */ --color-expressive: #C7362F; --accent-peach: #FFAB91; /* Peach/salmon */ --color-bg: #ffffff; --color-text: #0f1a18; } html, body { margin: 0; padding: 0; font-family: "DM Sans Variable", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; color: var(--color-text); background: var(--color-bg); } /* Paint the canvas (the overscroll/rubber-band area beyond the page) with the dark primary-theme colour so scrolling past the boundary shows dark, not white. Set on only: the body keeps its own background so light-themed sections (mint/light/forest) still render correctly. */ html { background-color: #111918; } .container { width: min(1120px, 92vw); margin: 0 auto; } .eyebrow { letter-spacing: .08em; text-transform: uppercase; font-size: 12px; color: var(--color-primary); } .section-title { font-size: 32px; margin: 0 0 12px; } .btn { display: inline-block; padding: 12px 18px; border-radius: 8px; text-decoration: none; font-weight: 600; } .btn--primary { background: var(--color-primary); color: #fff; } .btn--secondary { background: var(--color-accent); color: #0b302e; } /* The .button component (from the Tailwind layer) sets no cursor, so browsers fall back to the default arrow on