@layer djb.reset,djb.base,djb.theme,djb.elements,djb.classes,djb.global,djb.nodes,djb.custom;@font-face{font-family:"Figtree";font-style:normal;font-weight:300;font-display:swap;src:url("/wp-content/djia-builder/public/fonts/figtree-latin-ext-300.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:"Figtree";font-style:normal;font-weight:300;font-display:swap;src:url("/wp-content/djia-builder/public/fonts/figtree-latin-300.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:"Figtree";font-style:normal;font-weight:400;font-display:swap;src:url("/wp-content/djia-builder/public/fonts/figtree-latin-ext-400.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:"Figtree";font-style:normal;font-weight:400;font-display:swap;src:url("/wp-content/djia-builder/public/fonts/figtree-latin-400.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:"Figtree";font-style:normal;font-weight:500;font-display:swap;src:url("/wp-content/djia-builder/public/fonts/figtree-latin-ext-500.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:"Figtree";font-style:normal;font-weight:500;font-display:swap;src:url("/wp-content/djia-builder/public/fonts/figtree-latin-500.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:"Figtree";font-style:normal;font-weight:600;font-display:swap;src:url("/wp-content/djia-builder/public/fonts/figtree-latin-ext-600.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:"Figtree";font-style:normal;font-weight:600;font-display:swap;src:url("/wp-content/djia-builder/public/fonts/figtree-latin-600.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:"Figtree";font-style:normal;font-weight:700;font-display:swap;src:url("/wp-content/djia-builder/public/fonts/figtree-latin-ext-700.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:"Figtree";font-style:normal;font-weight:700;font-display:swap;src:url("/wp-content/djia-builder/public/fonts/figtree-latin-700.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url("/wp-content/djia-builder/public/fonts/instrument-serif-latin-ext-400-italic.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url("/wp-content/djia-builder/public/fonts/instrument-serif-latin-400-italic.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url("/wp-content/djia-builder/public/fonts/instrument-serif-latin-ext-400.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url("/wp-content/djia-builder/public/fonts/instrument-serif-latin-400.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@layer djb.reset{*,*::before,*::after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%;line-height:1.5}body{margin:0;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6,p,figure,blockquote,ul,ol,dl,dd{margin:0}img,svg,video,canvas,picture{display:block;max-width:100%}img,video{height:auto}button,input,select,textarea{font:inherit;color:inherit}a{color:inherit}[hidden]{display:none}@supports (-webkit-touch-callout:none){input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file]),select,textarea{font-size:max(16px,1em)!important}}.djb-skip-link{position:absolute;left:-9999px;top:0;z-index:100000;padding:.75em 1em;background:#fff;color:#000}.djb-skip-link:focus{left:1rem;top:1rem}@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto}}html{-webkit-text-size-adjust:revert;text-size-adjust:revert;line-height:revert}
body{min-height:revert;-webkit-font-smoothing:revert}
img, svg, video, canvas, picture{display:revert;max-width:revert}
img, video{height:revert}
button, input, select, textarea{font:revert;color:revert}
a{color:revert}/* ==========================================================================
   2. BASE RESET & TYPOGRAPHY
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }}@layer djb.base{:root{--color-primary:#03e29c;--color-primary-hover:#00c98a;--color-primary-soft:#ede9fe;--color-dark:#0a2129;--color-text:#0a2129;--color-text-muted:#5d586f;--color-background:#ffffff;--color-surface:#ffffff;--color-border:rgba(10,33,41,.12);--color-white:#ffffff;--color-success:#15803d;--color-warning:#b45309;--space-2xs:0.25rem;--space-xs:0.5rem;--space-sm:0.75rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:clamp(2.25rem, 1.8rem + 2vw, 3rem);--space-3xl:clamp(3rem, 2.2rem + 3vw, 4rem);--space-4xl:clamp(4rem, 2.8rem + 5vw, 6rem);--space-5xl:clamp(5rem, 3rem + 8vw, 8rem);--text-xs:0.75rem;--text-sm:0.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:clamp(1.375rem, 1.2rem + 0.8vw, 1.625rem);--text-3xl:clamp(1.625rem, 1.3rem + 1.4vw, 2.125rem);--text-4xl:clamp(2rem, 1.5rem + 2.2vw, 2.75rem);--text-5xl:clamp(2.5rem, 1.7rem + 3.6vw, 3.75rem);--radius-sm:4px;--radius-md:8px;--radius-lg:14px;--radius-full:999px;--shadow-sm:0 1px 2px rgba(18,14,31,.06), 0 1px 3px rgba(18,14,31,.08);--shadow-md:0 4px 12px rgba(18,14,31,.08), 0 2px 4px rgba(18,14,31,.05);--shadow-lg:0 18px 40px rgba(18,14,31,.12), 0 6px 12px rgba(18,14,31,.06);--container-wide:1440px;--container-default:1200px;--container-narrow:760px;--font-heading:Figtree, Arial, sans-serif;--font-body:Figtree, Arial, sans-serif;--font-accent:"Instrument Serif", Georgia, serif}}@layer djb.elements{.djb-svg{max-width:revert}}@layer djb.global{[data-tk-wrap]{display:contents}
.djb-button>span:not([class]){display:contents}

.post-content>.djb-code:not(:first-child)>pre{margin-top:1.1em}
/* ==========================================================================
   GLOBAL  →  Fluent Snippets `Global –` CSS snippets (split along banners)
   ========================================================================== */
/* @global:start v3 */
/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  --color-primary: #03e29c;
  --color-primary-dark: #00c98a;
  --color-primary-hover: #00ffaf;
  --color-primary-ink: #029566;
  --color-primary-soft: #e4f3ea;
  --color-primary-mist: #dcf7ec;
  --color-dark: #0a2129;
  --color-dark-deep: #071a20;
  --color-dark-surface: #0f2d37;
  --color-dark-raised: #143a46;
  --color-text: #0a2129;
  --color-text-secondary: #3b5058;
  --color-text-muted: #5d6f76;
  --color-text-faint: #c3ced2;
  --color-text-on-dark: #ffffff;
  --color-text-on-dark-muted: #9fb3b9;
  --color-text-on-dark-faint: #3d5a63;
  --color-background: #ffffff;
  --color-background-hero: #f8faf5;
  --color-surface: #ffffff;
  --color-gray: #ecf1f4;
  --color-gray-2: #dde5ea;
  --color-border: rgba(10,33,41,.12);
  --color-border-dark: rgba(255,255,255,.14);
  --color-glow: rgba(3,226,156,.55);
  --color-success: #03e29c;
  --color-warning: #ff8a5c;
  --color-white: #ffffff;
  --font-heading: "Matter", "Figtree", system-ui, sans-serif;   /* Matter (licensed) is used when present, Figtree is the free stand-in */
  --font-body: "Matter", "Figtree", system-ui, sans-serif;
  --font-accent: "Instrument Serif", Georgia, serif;
  --color-primary-line: #02b57d;
  --color-primary-light: #66ffd0;
  --container-wide: 1780px; --container-default: 1280px; --container-narrow: 880px;
  --space-2xs: .25rem; --space-xs: .5rem; --space-sm: .75rem; --space-md: 1rem; --space-lg: 1.5rem;
  --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --space-4xl: 6rem; --space-5xl: 8rem;
  --radius-sm: 14px; --radius-md: 16px; --radius-lg: clamp(16px, 2.07vw, 32px); --radius-xl: clamp(20px, 2.6vw, 40px); --radius-pill: 9999px;
  --shadow-sm: 0 1px 2px rgba(10,33,41,.06);
  --shadow-md: 0 18px 40px -18px rgba(10,33,41,.28);
  --shadow-lg: 0 40px 80px -30px rgba(10,33,41,.45);
  --transition-fast: 150ms; --transition-base: 250ms; --transition-slow: 450ms; --transition-entrance: 900ms;
  --ease-standard: cubic-bezier(.1,0,.2,1);
  --ease-io: cubic-bezier(.625,.05,0,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --header-bar-height: clamp(64px, 7vw, 100px);
  --gutter: 20px;
  --fs-body: clamp(1rem, .95rem + .25vw, 1.1rem);
  --fs-big: clamp(18px, 16.875px + .1953vw, 20px);
  --fs-h2: clamp(1.9rem, .5rem + 3.08vw, 6rem);
  --fs-h3: clamp(1.4rem, .55rem + 1.55vw, 3rem);
  --fs-xl: clamp(2.8rem, 2.625rem + 3.36vw, 9rem);
}
@media (max-width: 600px) { :root { --fs-h2: 33px; --fs-h3: 1.54rem; } }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.5; letter-spacing: -.02em; color: var(--color-text); background: var(--color-background); -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; letter-spacing: -.02em; }
h1 { font-size: var(--fs-xl); line-height: 1.12; }
h2 { font-size: var(--fs-h2); line-height: 1.4; }
h3 { font-size: var(--fs-h3); font-weight: 500; line-height: 1.4; }
.u-green, h1 em, h2 em, h3 em { font-style: normal; color: var(--color-primary); }
/* italic display-serif accent word */
.u-serif { font-family: var(--font-accent); font-style: italic; font-weight: 400; letter-spacing: -.01em; font-size: 1.1em; line-height: .9; }
.u-serif--grad { display: inline-block; padding-right: .16em; margin-right: -.1em; background: linear-gradient(90deg, var(--color-primary), var(--color-primary-line) 55%, var(--color-primary-hover)); -webkit-background-clip: text; background-clip: text; color: transparent; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 6px; }
.icon { display: inline-flex; flex-shrink: 0; width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */
.l-container { width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: 20px; }
@media (min-width: 768px) { .l-container { padding-inline: 40px; } }
@media (min-width: 1024px) { .l-container { padding-inline: 5.55vw; } }
@media (min-width: 1622px) { .l-container { padding-inline: 90px; } }
.l-section { position: relative; padding-block: 60px; }
@media (min-width: 1024px) { .l-section { padding-block: clamp(90px, 7.6vw, 170px); } }
.l-section--tight { padding-block: 30px; }
@media (min-width: 1024px) { .l-section--tight { padding-block: clamp(40px, 3.8vw, 60px) clamp(30px, 3vw, 46px); } }
.l-section--flush-top { padding-top: 0; }
.l-section--dark { background: var(--color-dark); color: var(--color-text-on-dark); }
.l-section--glow { background: radial-gradient(circle at 75% 135%, var(--color-glow) 0, transparent 42%), var(--color-dark); color: var(--color-text-on-dark); }
.l-section--rounded { border-radius: var(--radius-xl); margin-inline: 10px; }
@media (min-width: 1024px) { .l-section--rounded { margin-inline: 20px; } }

/* ==========================================================================
   4. SECTION HEADER + TEXT MOTION
   ========================================================================== */
.section-header__eyebrow { display: block; font-size: clamp(16px, 11.5px + .78125vw, 24px); font-weight: 400; line-height: 1.4; color: var(--color-text); margin-bottom: var(--space-md); }
.section-header__eyebrow--green { color: var(--color-primary-dark); }
.l-section--dark .section-header__eyebrow, .l-section--glow .section-header__eyebrow, [data-dark] .section-header__eyebrow { color: var(--color-text-on-dark); }
.section-header__title { margin-bottom: var(--space-md); }
.section-header__title sup { font-size: .32em; font-weight: 600; vertical-align: super; display: inline-grid; place-items: center; min-width: 2.2em; height: 2.2em; border: 1.5px solid currentColor; border-radius: 50%; margin-left: .2em; }
.section-header__description { font-size: var(--fs-body); color: var(--color-text-muted); max-width: 32rem; }
.section-header__description--big { font-size: var(--fs-big); }
.l-section--dark .section-header__description, .l-section--glow .section-header__description, [data-dark] .section-header__description { color: var(--color-text-on-dark-muted); }
.section-header--split { display: grid; gap: var(--space-xl); align-items: end; margin-bottom: var(--space-2xl); }
@media (min-width: 1024px) { .section-header--split { grid-template-columns: 1.2fr 1fr; } }
.section-header--center { text-align: center; max-width: 46rem; margin-inline: auto; margin-bottom: var(--space-2xl); }
.section-header--center .section-header__description { margin-inline: auto; }

/* Split words: lines rise, stretch back and fade in while they scroll into view */
.split-words .wm { display: inline-block; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.split-words .wm > span { display: inline-block; transform-origin: 50% 100%; will-change: transform, opacity; }
/* Word reveal statement: words light up one by one with scroll */
[data-words] .w { opacity: .14; transition: opacity .25s linear; }
[data-words] .w.is-on { opacity: 1; }
.no-js [data-words] .w { opacity: 1; }
/* Mask lines (hero titles) */
.line-mask { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.line-mask > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease-out); }
.is-in .line-mask > span { transform: none; }
.is-in .line-mask:nth-child(2) > span { transition-delay: .08s; }
.is-in .line-mask:nth-child(3) > span { transition-delay: .16s; }
/* Fade-up reveal */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal--d1 { transition-delay: .1s; } .reveal--d2 { transition-delay: .2s; } .reveal--d3 { transition-delay: .3s; }
.no-js .reveal { opacity: 1; transform: none; }

/* ==========================================================================
   5. BUTTON (border pill; fill rises from below, label swaps upward)
   ========================================================================== */
.button { --button-fill: var(--color-dark); --button-hover-text: var(--color-white); position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; min-height: 2.83em; padding: .6em 1.5em; border-radius: var(--radius-pill); border: 1px solid var(--color-primary-line); background: transparent; color: var(--color-text); font-size: max(14px, 1.06vw); font-weight: 400; letter-spacing: -.02em; line-height: 1.2; cursor: pointer; white-space: nowrap; }
.button::before { content: ""; position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 300%; border-radius: 80%; background: var(--button-fill); transform: translateY(40%); transition: transform .45s var(--ease-standard), border-radius .45s var(--ease-standard); }
.button:hover::before, .button:focus-visible::before { transform: translateY(0); border-radius: 0; }
.button__text, .button__text-hover { display: flex; align-items: center; gap: .6em; transition: transform .45s var(--ease-standard); }
.button__text-hover { position: absolute; inset: 0; justify-content: center; color: var(--button-hover-text); transform: translateY(130%); }
.button:hover .button__text, .button:focus-visible .button__text { transform: translateY(-130%); }
.button:hover .button__text-hover, .button:focus-visible .button__text-hover { transform: translateY(0); }
.button__chev { width: 1.4em; height: 1.4em; stroke-width: 1; }
.button--fill { background: var(--color-primary-hover); border-color: var(--color-primary); color: var(--color-dark); --button-fill: var(--color-white); --button-hover-text: var(--color-dark); }
.button--light { color: var(--color-text-on-dark); border-color: var(--color-primary); --button-fill: var(--color-primary); --button-hover-text: var(--color-dark); }
.button--white { background: var(--color-white); border-color: var(--color-white); --button-fill: var(--color-dark); --button-hover-text: var(--color-white); }
.button--ghost-dark { border-color: rgba(10,33,41,.28); }
.button--small { min-height: 2.6em; padding: .45em 1.1em; font-size: max(13px, .9vw); }
/* header pill: label stays, the arrow runs through its circle, the pill follows the pointer a little */
.button--header { min-height: 3.125rem; gap: 1.15em; padding: 5px 5px 5px 24px; border: 0; background: var(--color-white); color: var(--color-dark); font-size: clamp(.8125rem, .92vw, .9375rem); font-weight: 500; letter-spacing: .03em; text-transform: uppercase; box-shadow: 0 6px 10px rgba(0,0,0,.04), 0 2px 4px rgba(0,0,0,.04), 0 0 0 1px rgba(10,33,41,.08); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), background-color .4s; }
.button--header::before { display: none; }
.button--header .button__text { gap: 1.15em; }
.button--header .button__text-hover { display: none; }
.button--header:hover .button__text, .button--header:focus-visible .button__text { transform: none; }
.button__circle { display: inline-grid; place-items: center; box-sizing: content-box; width: 18px; height: 18px; padding: 12px; border-radius: 50%; background: var(--color-primary); color: var(--color-dark); transition: padding .5s cubic-bezier(.34, 1.56, .64, 1), transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.button__circle .icon { width: 18px; height: 18px; stroke-width: 1.5; }
.button--header:hover .button__circle, .button--header:focus-visible .button__circle { transform: scale(1.12); padding-left: 16px; padding-right: 8px; animation: arrowThru .6s cubic-bezier(.65, 0, .35, 1); }
.button--header:hover .button__circle .icon, .button--header:focus-visible .button__circle .icon { animation: arrowFade .6s cubic-bezier(.65, 0, .35, 1); }

@media (max-width: 600px) { .button { font-size: 16.8px; } }

/* Filter pills */
.pill-group { display: flex; flex-wrap: wrap; gap: .45rem; }
.pill { position: relative; display: inline-flex; align-items: center; min-height: 2.3rem; padding: 0 1.05rem; border-radius: var(--radius-pill); border: 1px solid var(--color-gray-2); background: var(--color-white); font-size: .88rem; font-weight: 500; cursor: pointer; transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base); }
.pill:hover { border-color: var(--color-text); }
.pill[aria-pressed="true"] { background: var(--color-dark); border-color: var(--color-dark); color: var(--color-white); }
.pill[aria-pressed="true"]::before { content: ""; position: absolute; left: -2px; top: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--color-primary); }

/* Circle counter (number in a dark circle + label, rotating) */
.circle-count { display: inline-flex; align-items: center; gap: 16px; font-size: max(16px, 6px + .833vw); }
.circle-count__circle { display: inline-grid; place-items: center; width: max(56px, 13.9px + 3.235vw); height: max(56px, 13.9px + 3.235vw); border-radius: 50%; background: var(--color-dark); color: var(--color-white); font-weight: 600; font-size: max(17px, 5.76px + .95vw); overflow: hidden; }
.rotator { position: relative; display: inline-grid; overflow: hidden; vertical-align: bottom; }
.rotator__item { grid-area: 1 / 1; transform: translateY(110%); transition: transform .9s var(--ease-io); }
.rotator__item.is-on { transform: none; }
.rotator__item.is-out { transform: translateY(-110%); }
.rotator__item.is-reset { transition: none; }

/* ==========================================================================
   6. FORM PRIMITIVES
   ========================================================================== */
.form-group { display: grid; gap: .45rem; }
.form-label { font-size: .875rem; font-weight: 500; }
.form-input { width: 100%; min-height: 3.25rem; padding: .85rem 1.1rem; border: 1px solid var(--color-border-dark); border-radius: var(--radius-sm); background: rgba(255,255,255,.04); color: var(--color-text-on-dark); transition: border-color var(--transition-fast), background var(--transition-fast); }
.form-input::placeholder { color: var(--color-text-on-dark-muted); }
.form-input:focus { outline: none; border-color: var(--color-primary); background: rgba(255,255,255,.07); }
textarea.form-input { min-height: 7rem; resize: vertical; }
.form-error { display: none; font-size: .8rem; color: var(--color-warning); }
.form-group--error .form-input { border-color: var(--color-warning); }
.form-group--error .form-error { display: block; }

/* ==========================================================================
   7. SITE HEADER
   ========================================================================== */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; pointer-events: none; }
.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); height: var(--header-bar-height); }
.site-header__bar { position: relative; z-index: 56; }
.site-header__bar > * { pointer-events: auto; }
.logo { display: inline-flex; align-items: center; }
.logo__image { width: auto; height: clamp(28px, 2.6vw, 38px); object-fit: contain; transition: filter var(--transition-base); }
.logo--light .logo__image, .site-header--on-dark .logo__image { filter: brightness(0) invert(1); }
.site-header__actions { display: flex; align-items: center; gap: .5rem; }
.site-header__cta { display: none; }
@media (min-width: 768px) { .site-header__cta { display: inline-flex; } }
.site-header--hidden .site-header__bar { transform: translateY(-120%); }
.site-header__bar { transition: transform .6s var(--ease-io); }
/* Frosted band behind the header once the page is scrolled; hides with the header, turns dark over dark sections */
.site-header__under { position: absolute; inset: 0 0 auto; z-index: 0; height: var(--header-bar-height); background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; pointer-events: none; transition: opacity .35s, transform .6s var(--ease-io), background-color .3s; }
.is-scrolled .site-header__under { opacity: 1; }
.site-header--hidden .site-header__under { transform: translateY(calc(-100% - 12px)); }
.site-header--on-dark .site-header__under { background: rgba(10,33,41,.6); }
.menu-is-open .site-header__under { opacity: 0; }
.menu-toggle { position: relative; display: inline-flex; align-items: center; gap: 16px; min-height: 3.125rem; padding: 5px 5px 5px 24px; border: 0; border-radius: var(--radius-pill); background: var(--color-dark); color: var(--color-white); font-size: clamp(.8125rem, .92vw, .9375rem); font-weight: 500; letter-spacing: .03em; text-transform: uppercase; cursor: pointer; transition: background-color .4s, color .4s, transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.menu-toggle__label { display: grid; overflow: hidden; line-height: 1.3; }
.menu-toggle__label > span { grid-area: 1 / 1; transition: transform .55s cubic-bezier(.65, 0, .35, 1); }
.menu-toggle__label > span + span { transform: translateY(110%); }
.menu-toggle:hover .menu-toggle__label > span:first-child { transform: translateY(-110%); }
.menu-toggle:hover .menu-toggle__label > span + span { transform: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__label > span:first-child { transform: translateY(-110%); }
.menu-toggle[aria-expanded="true"] .menu-toggle__label > span + span { transform: none; }
.menu-toggle__dots { display: grid; grid-auto-flow: column; place-content: center; gap: 5px; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.16); transition: transform .6s cubic-bezier(.65, 0, .35, 1), background-color .4s; }
.menu-toggle__dots::before, .menu-toggle__dots::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--color-primary); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.menu-toggle:hover .menu-toggle__dots { transform: scale(1.1); }
.menu-toggle:hover .menu-toggle__dots::before { transform: translateX(-2px); }
.menu-toggle:hover .menu-toggle__dots::after { transform: translateX(2px); }
.menu-toggle[aria-expanded="true"] .menu-toggle__dots { transform: rotate(90deg); }
html:not(.menu-is-open) .site-header--on-dark .menu-toggle { background: var(--color-white); color: var(--color-dark); }
html:not(.menu-is-open) .site-header--on-dark .menu-toggle__dots { background: rgba(10,33,41,.09); }
@media (max-width: 600px) { .menu-toggle { padding: 0; gap: 0; min-height: 0; background: transparent; } .menu-toggle__label { display: none; } .menu-toggle__dots { width: 40px; height: 40px; background: var(--color-dark); } .site-header--on-dark .menu-toggle__dots { background: var(--color-white); } }

/* ==========================================================================
   8. FULLSCREEN MENU (offcanvas)
   ========================================================================== */
.menu-overlay { position: fixed; inset: 0; z-index: 54; background: rgba(10,33,41,.4); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); opacity: 0; pointer-events: none; transition: opacity .4s ease-out; }
.menu-is-open .menu-overlay { opacity: 1; pointer-events: auto; }
.menu-is-open { overflow: hidden; }
.menu-is-open .site-header__bar { transform: none; }
.menu-is-open .logo__image { filter: brightness(0) invert(1); }
.offcanvas-panel { position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center; width: 100%; max-width: min(940px, calc(100vw - 40px)); max-height: calc(100% - 40px); margin: auto; pointer-events: none; visibility: hidden; transform: translateY(-100vh); transition: transform .6s, opacity .5s ease-out, visibility .6s; }
.offcanvas-panel.brx-offcanvas-open { visibility: visible; pointer-events: auto; transform: none; transition: transform .58s cubic-bezier(.19, 1, .22, 1) .06s; }
.offcanvas-panel.is-closing { visibility: visible; transform: scale(.95); opacity: 0; transition: transform .5s ease-out .15s, opacity .5s ease-out .15s; }
.offcanvas-panel__box { width: 100%; max-height: calc(100dvh - 40px); overflow: auto; scrollbar-width: none; padding: 0 clamp(24px, 5.5vw, 79px); border-radius: clamp(20px, 2.2vw, 32px); background: radial-gradient(circle at 73% 145%, var(--color-primary) 0, transparent 42%), var(--color-dark); color: var(--color-white); transform: scaleY(1.35); transform-origin: center bottom; transition: transform .4s cubic-bezier(.19, 1, .22, 1); }
.brx-offcanvas-open .offcanvas-panel__box { transform: none; transition: transform .34s cubic-bezier(.19, 1, .22, 1) .3s; }
.offcanvas-panel__head, .offcanvas-panel__item, .offcanvas-panel__foot, .offcanvas-panel__social a { opacity: 0; transform: translateY(10px); transition: opacity .3s ease-out, transform .3s ease-out; }
.brx-offcanvas-open .offcanvas-panel__head, .brx-offcanvas-open .offcanvas-panel__item, .brx-offcanvas-open .offcanvas-panel__foot, .brx-offcanvas-open .offcanvas-panel__social a { opacity: 1; transform: none; }
.brx-offcanvas-open .offcanvas-panel__head { transition-delay: .54s; }
.brx-offcanvas-open .offcanvas-panel__item:nth-child(1) { transition-delay: .6s; } .brx-offcanvas-open .offcanvas-panel__item:nth-child(2) { transition-delay: .66s; }
.brx-offcanvas-open .offcanvas-panel__item:nth-child(3) { transition-delay: .72s; } .brx-offcanvas-open .offcanvas-panel__item:nth-child(4) { transition-delay: .78s; }
.brx-offcanvas-open .offcanvas-panel__item:nth-child(5) { transition-delay: .84s; } .brx-offcanvas-open .offcanvas-panel__item:nth-child(6) { transition-delay: .9s; }
.brx-offcanvas-open .offcanvas-panel__item:nth-child(7) { transition-delay: .96s; } .brx-offcanvas-open .offcanvas-panel__item:nth-child(8) { transition-delay: 1.02s; }
.brx-offcanvas-open .offcanvas-panel__foot { transition-delay: 1.08s; }
.brx-offcanvas-open .offcanvas-panel__social a:nth-child(1) { transition-delay: 1.14s; } .brx-offcanvas-open .offcanvas-panel__social a:nth-child(2) { transition-delay: 1.2s; } .brx-offcanvas-open .offcanvas-panel__social a:nth-child(3) { transition-delay: 1.26s; }
.offcanvas-panel__head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding-top: min(clamp(28px, 5.5vw, 80px), 6vh); background: var(--color-dark); }
.offcanvas-panel__label { font-size: clamp(1.15rem, 1.6vw, 1.42rem); font-weight: 500; }
.offcanvas-panel__close { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,.15); cursor: pointer; transition: background-color .25s; }
.offcanvas-panel__close:hover { background: rgba(255,255,255,.25); }
.offcanvas-panel__close::before, .offcanvas-panel__close::after { content: ""; position: absolute; width: 14px; height: 1.5px; background: var(--color-white); transform: rotate(-45deg); transition: transform .4s; }
.offcanvas-panel__close::after { transform: rotate(45deg); }
.offcanvas-panel__close:hover::before { transform: rotate(-45deg) scale(1.15); } .offcanvas-panel__close:hover::after { transform: rotate(45deg) scale(1.15); }
.offcanvas-panel__menu { display: flex; flex-direction: column; gap: min(1rem, 1.3vh); margin-top: min(clamp(16px, 2.6vw, 40px), 3vh); }
.offcanvas-panel__item { overflow: hidden; }
.offcanvas-panel__link { display: inline-flex; align-items: center; font-size: min(clamp(2rem, 1.16rem + 2.34vw, 3.5rem), 5.6vh); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; color: var(--color-white); transition: color .25s; }
.offcanvas-panel__roll { display: inline-block; overflow: hidden; line-height: 1.15; padding-bottom: .04em; }
.offcanvas-panel__roll > span { display: inline-block; transform-origin: center top; }
.offcanvas-panel__link:hover .offcanvas-panel__roll > span { animation: menuRoll .6s ease-in-out; }
.offcanvas-panel__link[aria-current="page"] { color: var(--color-primary); }
.offcanvas-panel__count { display: inline-grid; place-items: center; margin-left: 2rem; width: clamp(40px, 4.86vw, 70px); height: clamp(40px, 4.86vw, 70px); border-radius: 50%; border: 1px solid rgba(255,255,255,.3); font-size: clamp(1rem, 1.6vw, 1.5rem); font-weight: 300; letter-spacing: 0; }
.offcanvas-panel__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; padding-block: min(clamp(28px, 4vw, 56px), 4vh) min(clamp(28px, 5.5vw, 80px), 6vh); }
.offcanvas-panel__foot-title { display: block; margin-bottom: 6px; font-size: .875rem; opacity: .5; }
.offcanvas-panel__social { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.offcanvas-panel__social a { position: relative; font-size: .9375rem; }
.offcanvas-panel__social a::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px; background: currentColor; clip-path: inset(0 100% 0 0); transition: clip-path .35s var(--ease-out); }
.offcanvas-panel__social a:hover::after { clip-path: inset(0); }

@media (max-width: 600px) { .offcanvas-panel__box { border-radius: 16px; padding-inline: 28px; } .offcanvas-panel__link { font-size: 29px; } .offcanvas-panel__count { width: 40px; height: 40px; margin-left: 1rem; font-size: 14.5px; } }

/* ==========================================================================
   9. RUNNING TEXT
   ========================================================================== */
.running-text { overflow: hidden; padding-block: 0; }
.running-text__track { display: flex; width: max-content; animation: runningText 34s linear infinite; }
.running-text__group { display: flex; align-items: center; gap: .35em; padding-right: .35em; font-size: max(40px, 11.875px + 4.8828vw); font-weight: 600; letter-spacing: -.01em; line-height: 1.15; white-space: nowrap; }
.running-text__group em { font-style: normal; color: var(--color-primary); }
@media (min-width: 1600px) { .running-text__group { font-size: 5.625vw; } }
.running-text__star { width: .32em; height: .32em; color: var(--color-primary); stroke-width: 2.4; }

/* ==========================================================================
   10. PAGE HERO (inner pages)
   ========================================================================== */
.page-hero { position: relative; overflow: hidden; padding-top: calc(var(--header-bar-height) + 26.25px + 5.86vw); padding-bottom: clamp(50px, 6vw, 100px); background: var(--color-background); }
.page-hero::before { content: ""; position: absolute; right: -20vw; top: -30vw; width: 70vw; height: 70vw; border-radius: 50%; background: radial-gradient(circle, rgba(3,226,156,.55) 0, rgba(3,226,156,.12) 35%, transparent 65%); filter: blur(10px); pointer-events: none; }
.page-hero__inner { position: relative; display: grid; gap: var(--space-2xl); }
.page-hero__title { max-width: 14ch; }
.page-hero__row { display: grid; gap: var(--space-xl); align-items: end; }
@media (min-width: 1024px) { .page-hero__row { grid-template-columns: 1fr 1fr; } }
.page-hero__lede { font-size: var(--fs-big); color: var(--color-text); max-width: 32rem; justify-self: start; }
@media (min-width: 1024px) { .page-hero__lede { justify-self: end; } }
.page-hero__meta { font-size: .95rem; color: var(--color-text-muted); }

/* ==========================================================================
   11. PROCESS STACK (background turns dark, sticky progress)
   ========================================================================== */
.op-section { background-color: var(--color-white); transition: background-color .8s var(--ease-io), color .8s var(--ease-io); }
.op-section[data-dark] { background-color: var(--color-dark); color: var(--color-text-on-dark); }
.op-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 75% 135%, var(--color-glow) 0, transparent 42%); opacity: 0; transition: opacity .8s var(--ease-io); }
.op-section[data-dark]::before { opacity: 1; }
.op-section__inner { position: relative; }
.op-section__head { display: grid; gap: var(--space-xl); align-items: end; margin-bottom: var(--space-3xl); }
@media (min-width: 1024px) { .op-section__head { grid-template-columns: 1fr auto; } }
.op-section__intro { color: var(--color-text-muted); max-width: 44rem; margin-top: var(--space-lg); font-size: clamp(19px, 1.45vw, 24px); line-height: 1.5; transition: color .8s; }
.op-section[data-dark] .op-section__intro { color: var(--color-text-on-dark-muted); }
.op-section__head h2 { max-width: 46rem; }
@media (min-width: 1024px) { .op-section__head h2 { max-width: 47vw; } }
.op-section__hint { position: sticky; top: calc(100vh - 5.5rem); z-index: 2; height: 0; display: flex; justify-content: flex-end; pointer-events: none; }
.op-section__hint-inner { display: inline-flex; align-items: center; gap: .55rem; height: 3.2rem; transform: translateY(-50%); color: var(--color-text-on-dark-muted); font-size: clamp(1.05rem, 1.6vw, 1.42rem); opacity: 0; transition: opacity .6s var(--ease-io); }
.op-section[data-dark] .op-section__hint-inner { opacity: 1; }
.op-section__ring { flex: none; width: clamp(2.2rem, 3.55vw, 3.2rem); height: clamp(2.2rem, 3.55vw, 3.2rem); border-radius: 50%; border: 2px solid var(--color-text-on-dark-faint); border-top-color: var(--color-text-on-dark-muted); transform: rotate(calc(var(--op-p, 0) * 1440deg)); }
.op-section__rail { position: absolute; top: 0; bottom: 0; right: 6.67vw; width: 8px; display: none; }
@media (min-width: 1024px) { .op-section__rail { display: block; } }
.op-section__rail-bar { position: sticky; top: 38.9vh; display: block; height: clamp(140px, 22vh, 220px); border-radius: 16px; background: rgba(255,255,255,.12); overflow: hidden; opacity: 0; transition: opacity .6s var(--ease-io); }
.op-section[data-dark] .op-section__rail-bar { opacity: 1; }
.op-section__rail-fill { position: absolute; inset: 0; display: block; border-radius: inherit; background: var(--color-primary); transform-origin: 50% 0; transform: scaleY(var(--op-p, 0)); }
.op-row { display: grid; gap: var(--space-xl); padding-block: 60px; }
@media (min-width: 1024px) { .op-row { grid-template-columns: 4fr 5fr; gap: 40px; min-height: clamp(480px, 41.7vw, 800px); padding-block: clamp(90px, 7.6vw, 170px); } }
.op-row__side { align-self: start; }
@media (min-width: 1024px) { .op-row__side { position: sticky; top: clamp(100px, 15.5vh, 150px); } }
.op-row__kicker { display: block; width: fit-content; margin-bottom: .2rem; font-size: max(24px, 7.8px + 1.594vw); font-weight: 500; line-height: 1.4; background: linear-gradient(45deg, var(--color-primary), var(--color-primary-light) 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.op-row__title { font-size: var(--fs-h2); font-weight: 600; line-height: 1.4; }
.op-row__body { display: grid; gap: clamp(8px, 3vw, 48px); }
@media (min-width: 1024px) { .op-row__body { padding-top: 10.8vw; padding-right: 5.6vw; } }
.op-row__text { font-size: max(16px, 4px + 1.8vw); font-weight: 500; line-height: 1.5; }
@media (max-width: 767px) { .op-row__text { font-weight: 500; } .op-section__hint { display: none; } }
.op-section:not([data-dark]) .button--light { color: var(--color-text); }
.op-section__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-lg); margin-top: var(--space-2xl); }

/* ==========================================================================
   12. FAQ (native Accordion)
   ========================================================================== */
.faq__layout { display: grid; gap: var(--space-2xl); align-items: start; }
@media (min-width: 1024px) { .faq__layout { grid-template-columns: minmax(0, 41.7fr) minmax(0, 58.3fr); gap: 4.5vw; } .faq__intro { position: sticky; top: calc(var(--header-bar-height) + 2rem); } }
.faq__intro .section-header__description { margin-block: var(--space-lg); font-size: clamp(17px, 1.25vw, 22px); line-height: 1.5; max-width: 26em; }
@media (max-width: 767px) { .faq__intro { text-align: center; } .faq__intro .section-header__description { margin-inline: auto; } .reviews { min-height: 864px; } }
.faq__list { border-top: 1px solid var(--color-border); }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item__header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); padding: clamp(20px, 1.56vw, 30px) 0; cursor: pointer; }
.faq-item__question { font-size: clamp(16px, 11.5px + .78125vw, 24px); font-weight: 500; line-height: 1.5; transition: color var(--transition-base); }
.faq-item__header:hover .faq-item__question { color: var(--color-primary-ink); }
.faq-item__icon { display: inline-grid; place-items: center; flex: none; width: clamp(36px, 2.3vw, 44px); height: clamp(36px, 2.3vw, 44px); border-radius: 50%; border: 1px solid var(--color-border); font-size: 1.05rem; transition: transform .5s var(--ease-io), background var(--transition-base), border-color var(--transition-base); }
.faq-item.brx-open .faq-item__icon { transform: rotate(45deg); background: var(--color-primary); border-color: var(--color-primary); }
.faq-item__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease-io); }
.faq-item.brx-open .faq-item__body { grid-template-rows: 1fr; }
.faq-item__answer { overflow: hidden; color: var(--color-text-muted); max-width: 82%; font-size: 16px; line-height: 1.5; }
.faq-item__answer p { padding-bottom: clamp(20px, 1.56vw, 30px); }
.faq-item__answer a { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   13. REVIEWS (tilted running rows + glass card)
   ========================================================================== */
.reviews { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; min-height: clamp(810px, 427px + 26.6vw, 936px); padding-block: var(--space-4xl); background: var(--color-dark); color: var(--color-text-on-dark); perspective: 1400px; }
.reviews__rows { display: grid; gap: var(--space-md); transform: rotateX(18deg) rotateZ(-6deg) scale(1.15); transform-origin: 50% 50%; }
.reviews__row { display: flex; width: max-content; gap: var(--space-md); animation: runningText 70s linear infinite; }
.reviews__row--reverse { animation-direction: reverse; animation-duration: 80s; margin-left: -10rem; }
.reviews:hover .reviews__row { animation-play-state: paused; }
.review-card { flex: 0 0 clamp(300px, 31.9vw, 560px); display: flex; flex-direction: column; justify-content: space-between; gap: clamp(20px, 1.8vw, 32px); padding: clamp(24px, 2.08vw, 40px); border-radius: clamp(18px, 1.67vw, 32px); background: rgba(255,255,255,.05); border: 1px solid var(--color-border-dark); }
.review-card__quote { font-size: clamp(16px, 13px + .26vw, 19px); line-height: 1.5; }
.review-card__person { display: flex; align-items: center; gap: 14px; font-size: 16px; line-height: 1.35; }
.review-card__initials { display: inline-grid; place-items: center; flex: none; width: clamp(46px, 3.6vw, 56px); height: clamp(46px, 3.6vw, 56px); border-radius: 50%; background: var(--color-primary); color: var(--color-dark); font-weight: 600; font-size: 14px; }
.review-card__name { display: block; font-weight: 700; color: var(--color-primary); }
.review-card__role { display: block; color: var(--color-text-on-dark-muted); font-size: 16px; }
.reviews__card { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(90vw, clamp(320px, 27.3vw, 520px)); padding: clamp(32px, 3.05vw, 60px) clamp(24px, 3.89vw, 76px); text-align: center; border-radius: var(--radius-lg); background: rgba(10,33,41,.7); border: 1px solid var(--color-border-dark); -webkit-backdrop-filter:blur(18px);backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: var(--shadow-lg); }
.reviews__eyebrow { display: block; color: var(--color-primary); margin-bottom: var(--space-md); font-size: clamp(16px, 11.5px + .78125vw, 24px); line-height: 1.4; }
.reviews__title { line-height: 1.15; margin-bottom: var(--space-lg); }
@media (max-width: 600px) { .review-card__person { font-size: 13.3px; } .review-card__role { font-size: 13.3px; } }

/* ==========================================================================
   14. NEXT CHAPTER + CTA CARD
   ========================================================================== */
.next-chapter { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-lg); padding: clamp(1.75rem, 4vw, 3.5rem); border-radius: var(--radius-lg); border: 1px solid var(--color-gray-2); transition: border-color var(--transition-base), background var(--transition-base); }
.next-chapter:hover { border-color: var(--color-primary); background: var(--color-background-hero); }
.next-chapter__label { display: block; font-size: .95rem; color: var(--color-text-muted); margin-bottom: .4rem; }
.next-chapter__title { font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; }
.cta-card { position: relative; overflow: hidden; padding: clamp(2rem, 4.5vw, 4.5rem); border-radius: var(--radius-xl); background: radial-gradient(circle at 75% 135%, var(--color-glow) 0, transparent 48%), var(--color-dark); color: var(--color-text-on-dark); }
.cta-card__status { display: inline-flex; align-items: center; gap: .6rem; padding: .4rem .45rem .4rem .9rem; border-radius: var(--radius-pill); background: rgba(255,255,255,.06); border: 1px solid var(--color-border-dark); font-size: 16px; font-weight: 500; }
.cta-card__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 4px rgba(3,226,156,.18); animation: pulseDot 2s ease-in-out infinite; }
.cta-card__avatars { display: inline-flex; }
.cta-card__avatar { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--color-primary); color: var(--color-dark); font-size: .62rem; font-weight: 700; border: 2px solid var(--color-dark); }
.cta-card__avatar--alt { margin-left: -.45rem; background: var(--color-white); }
.cta-card__title { margin-block: var(--space-xl) var(--space-lg); }
.cta-card__text { color: var(--color-text-on-dark-muted); max-width: 52ch; margin-bottom: var(--space-xl); font-size: clamp(17px, 1.35vw, 22px); line-height: 1.5; }
.cta-card__note { margin-top: var(--space-lg); font-size: 15px; color: var(--color-text-on-dark-muted); }
.cta-card__art { display: block; width: min(70vw, 300px); height: auto; margin: var(--space-2xl) auto 0; overflow: visible; }
@media (min-width: 900px) { .cta-card__art { position: absolute; right: 9%; top: 50%; width: clamp(200px, 17vw, 320px); margin: 0; transform: translateY(-50%); } }
.cta-card__art-halo { fill: rgba(255,255,255,.04); }
.cta-card__art-line { fill: none; stroke: var(--color-white); stroke-width: 2.4; stroke-linejoin: round; }
.cta-card__art-dot { fill: var(--color-primary); animation: ctaDots 1.6s ease-in-out infinite; }
.cta-card__art-dot:nth-of-type(3) { animation-delay: .2s; } .cta-card__art-dot--b { animation-delay: .4s; }
.cta-card__art-check { fill: none; stroke: var(--color-primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: ctaCheck 3.2s ease-in-out infinite; }
.cta-card__art-spark, .cta-card__art-tick { fill: none; stroke: var(--color-primary); stroke-width: 2; stroke-linecap: round; opacity: .8; }
@keyframes ctaDots { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes ctaCheck { 0%, 15% { stroke-dashoffset: 60; } 45%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -60; } }

/* ==========================================================================
   15. SITE FOOTER
   ========================================================================== */
.site-footer { position: relative; overflow: hidden; background: var(--color-primary-soft); padding-block: clamp(56px, 3.8vw, 72px); }
.site-footer__brand { display: block; overflow: hidden; padding-bottom: clamp(24px, 4.6vw, 66px); color: var(--color-dark); }
.site-footer__brand-in { display: flex; align-items: baseline; font-size: calc((100vw - 40px) / 7.1); font-weight: 700; letter-spacing: -.055em; line-height: .78; white-space: nowrap; transform: translateY(40%); opacity: 0; transition: transform 1.1s cubic-bezier(.19, 1, .22, 1), opacity .8s ease-out; }
.site-footer__brand.is-in .site-footer__brand-in, .no-js .site-footer__brand-in { transform: none; opacity: 1; }
@media (min-width: 768px) { .site-footer__brand-in { font-size: calc((100vw - 80px) / 7.1); } }
@media (min-width: 1024px) { .site-footer__brand-in { font-size: calc((min(100vw, 1780px) - 2 * min(5.55vw, 90px)) / 7.1); } }
.site-footer__brand-dot { flex: none; width: .19em; height: .19em; margin: 0 .03em 0 .06em; border-radius: 50%; background: var(--color-primary); }
.site-footer__brand-sub { font-weight: 300; letter-spacing: -.04em; }
.site-footer__grid { position: relative; display: grid; gap: clamp(10px, 1vw, 16px); }
@media (min-width: 900px) { .site-footer__grid { grid-template-columns: repeat(3, 1fr); } }
.site-footer__grid > :not(.site-footer__slash) { opacity: 0; transform: translateY(40px); transition: opacity .6s ease-out, transform .6s ease-out; }
.site-footer__grid.is-in > :not(.site-footer__slash), .no-js .site-footer__grid > :not(.site-footer__slash) { opacity: 1; transform: none; }
.site-footer__grid.is-in > :nth-child(2) { transition-delay: .1s; } .site-footer__grid.is-in > :nth-child(4) { transition-delay: .2s; }
.site-footer__card { position: relative; z-index: 1; display: flex; flex-direction: column; padding: clamp(24px, 2.14vw, 32px); border-radius: var(--radius-lg); background: var(--color-white); }
.site-footer__card--nav { min-height: clamp(311px, 28.5vw, 560px); }
.site-footer__menu { display: grid; gap: .45rem; }
.site-footer__menu-link { display: inline-flex; align-items: center; gap: .55rem; font-size: clamp(1.5rem, .55rem + 1.55vw, 3rem); font-weight: 600; line-height: 1.4; letter-spacing: -.02em; transition: color var(--transition-base); }
.site-footer__menu-link:hover { color: var(--color-primary-line); }
.site-footer__badge { font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: 0; padding: .4em .7em; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-dark); }
.site-footer__legal { display: flex; gap: 1.75rem; margin-top: auto; padding-top: var(--space-xl); font-size: .875rem; color: var(--color-text-muted); }
.site-footer__legal-link:hover { color: var(--color-text); }
.site-footer__stack { display: grid; gap: clamp(10px, 1.25vw, 18px); grid-template-rows: auto auto 1fr; }
.site-footer__contact { flex-direction: row; align-items: center; gap: .8rem; min-height: clamp(68px, 6.3vw, 100px); font-size: clamp(18px, 11.5px + .78125vw, 24px); font-weight: 500; transition: background var(--transition-base); }
.site-footer__contact:hover { background: var(--color-gray); }
.site-footer__contact-icon { width: 13px; height: 13px; color: var(--color-text); transition: transform .45s var(--ease-io); }
.site-footer__contact:hover .site-footer__contact-icon { transform: rotate(90deg); }
.site-footer__status-card { justify-content: space-between; gap: var(--space-xl); }
.site-footer__status { display: inline-flex; align-items: center; gap: .55rem; font-size: .875rem; }
.site-footer__status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--color-primary-dark); animation: pulseDot 1.8s ease-out infinite; }
.site-footer__status-title { font-size: clamp(1.5rem, .55rem + 1.55vw, 3rem); font-weight: 600; line-height: 1.4; letter-spacing: -.02em; }
.site-footer__status-accent { background: linear-gradient(90deg, var(--color-primary-line), var(--color-dark)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.site-footer__status-link { display: flex; justify-content: space-between; align-items: center; padding-block: 10px; font-size: 1rem; color: var(--color-text-muted); }
.site-footer__status-link .icon { width: 17px; height: 17px; }
.site-footer__status-link:hover { color: var(--color-text); }
.site-footer__dark { justify-content: space-between; min-height: clamp(214px, 28.5vw, 560px); background: var(--color-dark); color: var(--color-white); }
.site-footer__dark-title { font-size: clamp(1.5rem, .55rem + 1.55vw, 3rem); font-weight: 400; line-height: 1.4; }
.site-footer__socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.2rem; }
.site-footer__social { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); color: var(--color-white); transition: box-shadow .3s, background-color .3s, color .3s; }
.site-footer__social .icon { width: 18px; height: 18px; stroke-width: 1.5; }
.site-footer__social:hover { box-shadow: inset 0 0 0 1px var(--color-primary); background: var(--color-primary); color: var(--color-dark); }
.site-footer__copy { display: flex; justify-content: space-between; align-items: center; font-size: .875rem; color: var(--color-text-on-dark-muted); }
.site-footer__totop { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.12); color: var(--color-white); transition: background-color .3s, color .3s, transform .5s var(--ease-out), opacity .2s; }
.site-footer__totop .icon { width: 16px; height: 16px; }
.site-footer__totop:hover { background: var(--color-primary); color: var(--color-dark); transform: translateY(-3px); }
html:not(.no-js) .site-footer__totop:not(.is-docked) { opacity: 0; }
.site-footer__slash { position: absolute; z-index: 0; top: clamp(80px, 7vw, 120px); bottom: calc(-1 * clamp(70px, 9vw, 150px)); right: calc(-1 * min(3.5vw, 60px)); width: min(21vw, 330px); border-radius: 14px; background: var(--color-primary); transform: skewX(-22deg); transform-origin: 50% 100%; pointer-events: none; }
@media (max-width: 899px) { .site-footer__slash { display: none; } }

@media (max-width: 600px) { .site-footer__card { border-radius: 16px; } }

/* ==========================================================================
   16. BACK TO TOP (floats, then docks into the footer card)
   ========================================================================== */
.back-to-top { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--color-dark); color: var(--color-white); opacity: 0; pointer-events: none; will-change: transform; transition: opacity .3s, background-color .3s, color .3s; }
.back-to-top .icon { width: 16px; height: 16px; }
.back-to-top--visible { opacity: 1; pointer-events: auto; }
.back-to-top--on-dark { background: var(--color-white); color: var(--color-dark); }
.back-to-top--near { background: var(--color-dark-raised); color: var(--color-white); }
.back-to-top:hover { background: var(--color-primary); color: var(--color-dark); }

/* ==========================================================================
   17. POINTER DOT (fine pointers only)
   ========================================================================== */
.pointer-dot { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; opacity: 0; transform: translate3d(var(--px, -100px), var(--py, -100px), 0); transition: opacity .3s; will-change: transform; }
.pointer-dot--on { opacity: 1; }
.pointer-dot__dot { position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--color-primary-hover); box-shadow: 0 0 0 1px rgba(10,33,41,.18); transition: width .45s cubic-bezier(.2, .8, .2, 1), height .45s cubic-bezier(.2, .8, .2, 1), margin .45s cubic-bezier(.2, .8, .2, 1), background-color .3s, border-radius .3s, transform .3s; }
.pointer-dot__label { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(.4); opacity: 0; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-dark); white-space: nowrap; transition: opacity .25s, transform .45s cubic-bezier(.2, .8, .2, 1); }
.pointer-dot--link .pointer-dot__dot { width: 54px; height: 54px; margin: -27px 0 0 -27px; background: transparent; border: 1.5px solid var(--color-primary-hover); box-shadow: none; }
.pointer-dot--view .pointer-dot__dot { width: 104px; height: 104px; margin: -52px 0 0 -52px; background: var(--color-primary-hover); border: 0; }
.pointer-dot--view .pointer-dot__label { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.pointer-dot__label::after { content: " ↗"; }
.pointer-dot--text .pointer-dot__dot { width: 3px; height: 22px; margin: -11px 0 0 -1.5px; border-radius: 2px; }
.pointer-dot--down .pointer-dot__dot { transform: scale(.8); }

/* ==========================================================================
   PAGE TRANSITION — native cross-document View Transition (Chrome, Edge, Safari 18+):
   the old page sinks back and fades, the new one slides up with rounded corners
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition { background: var(--color-dark); }
::view-transition-group(root) { animation: none; }
::view-transition-image-pair(root) { isolation: isolate; }
::view-transition-old(root) { z-index: 1; mix-blend-mode: normal; animation: pageOut .8s cubic-bezier(.7, 0, .2, 1) both; }
::view-transition-new(root) { z-index: 2; mix-blend-mode: normal; overflow: hidden; border-radius: 32px; animation: pageIn .8s cubic-bezier(.7, 0, .2, 1) both, pageRadius .32s ease-out .42s both; }

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes pageOut { from { transform: none; opacity: 1; } to { transform: translateY(-12%) scale(.92); opacity: .1; } }
@keyframes pageIn { from { transform: translateY(100%) scale(.95); } to { transform: none; } }
@keyframes pageRadius { from { border-radius: 32px; } to { border-radius: 0; } }
@keyframes runningText { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes arrowThru { 0% { padding-left: 12px; padding-right: 12px; } 42% { padding-left: 24px; padding-right: 0; } 43% { padding-left: 0; padding-right: 24px; } 100% { padding-left: 16px; padding-right: 8px; } }
@keyframes arrowFade { 0%, 100% { opacity: 1; } 38%, 50% { opacity: 0; } }
@keyframes menuRoll { 0% { transform: translateY(0) scaleY(1); } 42% { transform: translateY(-135%) scaleY(1.5); } 43% { transform: translateY(100%) scaleY(1.5); } 100% { transform: translateY(0) scaleY(1); } }
@keyframes stepIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes spinRing { to { transform: rotate(360deg); } }
@keyframes floatY { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes pulseDot { 0%, 100% { box-shadow: 0 0 0 4px rgba(3,226,156,.2); } 50% { box-shadow: 0 0 0 8px rgba(3,226,156,0); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
.u-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.u-no-scroll { overflow: hidden; }
.lang-switch{display:inline-flex;align-items:center;gap:2px;margin-left:auto;margin-right:14px;padding:3px;border-radius:999px;background:rgba(255,255,255,.08)}
.lang-switch__link{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:30px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:500;letter-spacing:.06em;line-height:1;color:rgba(255,255,255,.72);text-decoration:none;cursor:pointer;transition:background-color .3s,color .3s}
.lang-switch__link:hover{color:var(--color-white)}
.lang-switch__link--active{background:var(--color-primary);color:var(--color-dark)}
.lang-switch__link--active:hover{color:var(--color-dark)}
.site-header__under{background:rgba(236,243,240,.94);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid rgba(10,33,41,.08);box-shadow:0 8px 28px -12px rgba(10,33,41,.22)}
.site-header--on-dark .site-header__under{background:rgba(10,33,41,.9);border-bottom-color:rgba(255,255,255,.08);box-shadow:0 8px 28px -12px rgba(0,0,0,.5)}
.work-card__tags .djb-post-taxonomy__list,.work-card__tags .djb-post-taxonomy__item,.project-card__tags .djb-post-taxonomy__list,.project-card__tags .djb-post-taxonomy__item{display:contents}
.work-card__tags.djb-post-taxonomy,.project-card__tags.djb-post-taxonomy{align-items:normal;line-height:inherit}
.work-card__tags .djb-post-taxonomy__term{ display: inline-flex; align-items: center; height: 32px; padding: 0px 16px; border-radius: var(--radius-pill); border: 1px solid var(--color-text-muted); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); font-size: 14px; font-weight: 500; }
@media (min-width: 993px){.work-card__tags .djb-post-taxonomy__term{ height: 40px; padding: 0px 24px; font-size: 1rem; }}
.project-card__tags .djb-post-taxonomy__term{ display: inline-flex; align-items: center; height: 40px; padding: 0px 24px; border-radius: 100px; border: 1px solid var(--color-text-muted); color: var(--color-white); font-size: 16px; font-weight: 500; line-height: 1; }
@media (max-width: 600px){.project-card__tags .djb-post-taxonomy__term{ height: 32px; padding: 0px 16px; font-size: 14px; }}}