/*
 * MentorFold theme stylesheet.
 * A hand-written translation of the reference design (Tailwind v4 build). Token names, values,
 * breakpoints and timings match the reference exactly. See docs/DESIGN-SPECIFICATION.md.
 *
 * Breakpoints: sm 40rem (640) · md 48rem (768) · lg 64rem (1024) · xl 80rem (1280)
 */

/* ---------------------------------------------------------------- Fonts (self-hosted) */
@font-face { font-family: "Sora"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/sora-latin-ext.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: "Sora"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/sora-latin.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: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/manrope-latin-ext.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: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/manrope-latin.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(../fonts/instrument-serif-latin-ext.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(../fonts/instrument-serif-latin.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(../fonts/instrument-serif-italic-latin-ext.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(../fonts/instrument-serif-italic-latin.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; }

/* ---------------------------------------------------------------- Tokens */
:root {
	--radius: 1rem;
	--navy: oklch(29% .09 258);
	--navy-deep: oklch(25.5% .08 263);
	--electric: oklch(60% .2 255);
	--bright: oklch(66.5% .16 240);
	--light: oklch(97.5% .008 255);
	--soft: oklch(95.5% .025 250);
	--ink: oklch(25% .05 260);
	--on-navy: oklch(99% .004 250);
	--on-navy-muted: oklch(80% .04 250);
	--success: oklch(62% .15 155);
	--destructive: oklch(57.7% .215 27);
	--cursor-1: oklch(60% .2 255);
	--cursor-2: oklch(66.5% .16 240);
	--cursor-3: oklch(29% .09 258);
	--cursor-4: oklch(72% .12 225);
	--cursor-5: oklch(45% .16 260);
	--cursor-6: oklch(78% .09 245);
	--background: oklch(100% 0 0);
	--card: oklch(100% 0 0);
	--muted-foreground: oklch(50% .04 258);
	--border: oklch(92% .015 255);
	--input: oklch(90% .02 255);

	--gradient-brand: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 40%, var(--electric) 100%);
	--gradient-text: linear-gradient(100deg, var(--electric), var(--bright));
	--gradient-glow: radial-gradient(60% 60% at 70% 30%, color-mix(in oklab, var(--bright) 22%, transparent), transparent 70%);
	--shadow-card: 0 1px 0 color-mix(in oklab, var(--navy) 4%, transparent), 0 20px 50px -24px color-mix(in oklab, var(--navy) 28%, transparent);
	--shadow-lift: 0 30px 70px -30px color-mix(in oklab, var(--electric) 45%, transparent);
	--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25);

	--font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
	--font-display: "Sora", ui-sans-serif, system-ui, sans-serif;
	--font-serif: "Instrument Serif", ui-serif, Georgia, serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

	--ease: cubic-bezier(.22, 1, .36, 1);
	--ease-tw: cubic-bezier(.4, 0, .2, 1);

	--r-md: calc(var(--radius) - 2px);
	--r-lg: var(--radius);
	--r-xl: calc(var(--radius) + 4px);
	--r-2xl: calc(var(--radius) + 8px);
	--r-3xl: calc(var(--radius) + 12px);
}

/* ---------------------------------------------------------------- Base / reset (Tailwind preflight equivalent) */
*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; line-height: 1.5; font-family: var(--font-sans); scroll-behavior: smooth; }
body { background: var(--background); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -.03em; }
a { color: inherit; text-decoration: inherit; }
ol, ul, menu { list-style: none; }
img, svg, video, canvas { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
button, input, select, optgroup, textarea { font: inherit; font-feature-settings: inherit; letter-spacing: inherit; color: inherit; background-color: transparent; border-radius: 0; opacity: 1; }
button { cursor: pointer; }
textarea { resize: vertical; }
::placeholder { opacity: 1; }
[hidden]:where(:not([hidden="until-found"])) { display: none !important; }
::selection { background: color-mix(in oklab, var(--electric) 25%, transparent); }
:focus-visible { outline: 2px solid var(--electric); outline-offset: 3px; }

.site { position: relative; overflow-x: clip; }
.container { width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: 1.5rem; }
.section { position: relative; padding-block: 7rem; background: var(--background); }
.section--light { background: var(--light); }
.section--navy { background: var(--navy); overflow: hidden; }
@media (min-width: 48rem) { .section { padding-block: 10rem; } }

.skip-link { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link:focus { position: fixed; left: 1rem; top: 1rem; z-index: 60; width: auto; height: auto; clip: auto; border-radius: 9999px; background: var(--navy); color: var(--on-navy); padding: .5rem 1rem; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.break-all { word-break: break-all; }

/* Utilities ported from the reference */
.eyebrow { font-family: var(--font-display); letter-spacing: .32em; text-transform: uppercase; font-size: .72rem; font-weight: 600; color: var(--electric); }
.grid-lines { background-image: linear-gradient(to right, color-mix(in oklab, var(--navy) 6%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklab, var(--navy) 6%, transparent) 1px, transparent 1px); background-size: 64px 64px; }
.grid-lines-dark { background-image: linear-gradient(90deg, rgb(255 255 255 / .06) 1px, transparent 1px), linear-gradient(rgb(255 255 255 / .06) 1px, transparent 1px); background-size: 64px 64px; }
.text-gradient { background: var(--gradient-text); color: transparent; -webkit-background-clip: text; background-clip: text; }

.icon { flex-shrink: 0; }
.icon-3 { width: .75rem; height: .75rem; }
.icon-4 { width: 1rem; height: 1rem; }
.icon-5 { width: 1.25rem; height: 1.25rem; }
.icon-6 { width: 1.5rem; height: 1.5rem; }
.icon-8 { width: 2rem; height: 2rem; }
.nudge-right, .nudge-up-right { transition: transform .15s var(--ease-tw); }
.group:hover .nudge-right { transform: translateX(.25rem); }
.group:hover .nudge-up-right { transform: translate(.125rem, -.125rem); }

@keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pulse { 50% { opacity: .5; } }
@keyframes dash-flow { to { stroke-dashoffset: -40px; } }

/* ---------------------------------------------------------------- Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 9999px; padding: 1rem 1.75rem; font-weight: 600; line-height: 1.5rem; transition: all .15s var(--ease-tw); }
.btn--navy { background: var(--navy); color: var(--on-navy); box-shadow: var(--shadow-lift); }
.btn--navy:hover { background: var(--electric); }
.btn--outline { border: 1px solid color-mix(in oklab, var(--navy) 15%, transparent); background: var(--card); color: var(--navy); }
.btn--outline:hover { border-color: var(--electric); color: var(--electric); }
.btn--light { background: var(--on-navy); color: var(--navy); padding-inline: 2rem; }
.btn--light:hover { background: var(--bright); color: var(--on-navy); }
.btn--ghost { border: 1px solid color-mix(in oklab, var(--on-navy) 30%, transparent); color: var(--on-navy); padding-inline: 2rem; transition-property: color, background-color, border-color; }
.btn--ghost:hover { background: color-mix(in oklab, var(--on-navy) 10%, transparent); }
.btn--grow { flex: 1 1 0%; box-shadow: none; transition-property: color, background-color, border-color; }
.btn--plain { transition-property: color, background-color, border-color; }
.btn[disabled], .btn[aria-busy="true"] { opacity: .7; cursor: progress; }

/* ---------------------------------------------------------------- Header */
.site-header { position: fixed; inset-inline: 0; top: 0; z-index: 50; padding-block: 1.5rem; transition: all .5s var(--ease-tw); }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
.site-header.is-scrolled { border-bottom: 1px solid color-mix(in oklab, var(--border) 70%, transparent); background: color-mix(in oklab, var(--background) 85%, transparent); padding-block: .75rem; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.site-nav { margin-inline: auto; display: flex; max-width: 80rem; align-items: center; justify-content: space-between; padding-inline: 1.5rem; }
.site-nav__logo { flex-shrink: 0; }
.site-nav__logo-img { height: 2.25rem; width: auto; mix-blend-mode: multiply; }

.nav-pill { position: relative; display: none; align-items: center; gap: .25rem; border-radius: 9999px; border: 1px solid color-mix(in oklab, var(--border) 60%, transparent); background: color-mix(in oklab, var(--background) 60%, transparent); padding: .25rem; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.nav-pill__item { position: relative; }
.nav-pill__link { position: relative; z-index: 10; display: block; border-radius: 9999px; padding: .5rem 1rem; font-size: .875rem; line-height: 1.25rem; font-weight: 500; color: color-mix(in oklab, var(--ink) 70%, transparent); transition: color .15s var(--ease-tw); }
.nav-pill__link:hover { color: var(--navy); }
.nav-pill__link.is-active { color: var(--on-navy); }
.nav-pill__indicator { position: absolute; left: 0; top: .25rem; bottom: .25rem; width: 0; border-radius: 9999px; background: var(--navy); opacity: 0; pointer-events: none; transition: transform .5s cubic-bezier(.3, 1.15, .45, 1), width .5s cubic-bezier(.3, 1.15, .45, 1), opacity .2s; }
.nav-pill.is-ready .nav-pill__indicator.is-on { opacity: 1; }
.no-js .nav-pill__link.is-active { background: var(--navy); }

.btn-talk { display: none; align-items: center; gap: .5rem; border-radius: 9999px; background: var(--electric); padding: .625rem 1.25rem; font-size: .875rem; line-height: 1.25rem; font-weight: 600; color: #fff; box-shadow: var(--shadow-lift); transition: all .15s var(--ease-tw); }
.btn-talk:hover { background: var(--navy); }

.menu-toggle { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border-radius: 9999px; background: var(--navy); color: var(--on-navy); }

@media (min-width: 48rem) { .site-nav__logo-img { height: 2.5rem; } }
@media (min-width: 64rem) {
	.nav-pill { display: flex; }
	.btn-talk { display: inline-flex; }
	.menu-toggle { display: none; }
}

/* Mobile menu (circular reveal from the top-right, like the reference) */
.mobile-menu { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; background: var(--gradient-brand); padding: 1.5rem; overflow-y: auto; clip-path: circle(0% at 92% 4%); transition: clip-path .6s var(--ease); }
.mobile-menu.is-open { clip-path: circle(150% at 92% 4%); }
.mobile-menu__top { display: flex; justify-content: flex-end; }
.mobile-menu__close { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border-radius: 9999px; background: color-mix(in oklab, var(--on-navy) 10%, transparent); color: var(--on-navy); }
.mobile-menu__list { margin-top: 2.5rem; display: flex; flex-direction: column; gap: .5rem; }
.mobile-menu__list li { opacity: 0; transform: translateX(-20px); }
.mobile-menu.is-open .mobile-menu__list li { opacity: 1; transform: none; transition: opacity .3s linear, transform .45s cubic-bezier(.34, 1.4, .64, 1); transition-delay: calc(.15s + var(--i) * .05s); }
.mobile-menu__link { display: flex; align-items: baseline; gap: 1rem; padding-block: .5rem; font-family: var(--font-display); font-size: 2.25rem; line-height: 2.5rem; font-weight: 600; color: var(--on-navy); }
.mobile-menu__num { font-size: .875rem; line-height: 1.25rem; color: var(--bright); }
.mobile-menu__cta { margin-top: auto; border-radius: 9999px; background: var(--on-navy); padding-block: 1rem; text-align: center; font-weight: 600; color: var(--navy); }
.admin-bar .mobile-menu { top: 32px; }
@media (max-width: 782px) { .admin-bar .mobile-menu { top: 46px; } }
@media (min-width: 64rem) { .mobile-menu { display: none !important; } }

/* ---------------------------------------------------------------- Scroll reveal primitives */
.js .reveal { opacity: 0; transform: translateY(var(--ry, 28px)); transition: opacity .8s var(--ease) var(--rd, 0s), transform .8s var(--ease) var(--rd, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }
.split__word { display: inline-block; overflow: hidden; padding-bottom: .12em; vertical-align: bottom; }
.split__word > span { display: inline-block; }
.js .split__word > span { transform: translateY(110%); transition: transform .9s var(--ease) var(--wd, 0s); }
.js .split.is-in .split__word > span { transform: none; }

/* ---------------------------------------------------------------- Section heading */
.section-heading { max-width: 48rem; }
.section-heading--center { margin-inline: auto; text-align: center; }
.section-heading__title { margin-top: 1.25rem; font-size: 2.25rem; font-weight: 600; line-height: 1.05; color: var(--navy); }
.section-heading__text { margin-top: 1.5rem; font-size: 1.125rem; line-height: 1.625; color: var(--muted-foreground); }
.section-heading--dark .eyebrow { color: var(--bright); }
.section-heading--dark .section-heading__title { color: var(--on-navy); }
.section-heading--dark .section-heading__text { color: var(--on-navy-muted); }
@media (min-width: 48rem) { .section-heading__title { font-size: 3.75rem; } }

/* ---------------------------------------------------------------- Hero */
.hero { position: relative; isolation: isolate; display: flex; min-height: 100vh; min-height: 100svh; align-items: center; overflow: hidden; background: var(--background); padding-top: 7rem; }
.hero__grid { position: absolute; inset: 0; z-index: -10; -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent); mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent); }
.hero__glow { position: absolute; inset: 0; z-index: -10; background: var(--gradient-glow); }
.hero__deco { position: absolute; z-index: -10; border-radius: 80px; }
.hero__deco--outline { right: -10rem; top: -10rem; width: 620px; height: 620px; transform: rotate(45deg); border: 1px solid color-mix(in oklab, var(--electric) 15%, transparent); }
.hero__deco--fill { bottom: -14rem; left: -10rem; width: 520px; height: 520px; transform: rotate(12deg); background: var(--soft); }

.hero-chip { position: absolute; display: none; }
.hero-chip--1 { left: 4%; top: 30%; }
.hero-chip--2 { right: 6%; top: 24%; }
.hero-chip--3 { left: 8%; bottom: 22%; }
.hero-chip--4 { right: 4%; bottom: 30%; }
.hero-chip--5 { right: 22%; bottom: 12%; }
.hero-chip__inner { display: flex; align-items: center; gap: .75rem; border-radius: var(--r-2xl); border: 1px solid var(--border); background: color-mix(in oklab, var(--card) 90%, transparent); padding: .75rem 1rem; box-shadow: var(--shadow-card); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: float-y 6s ease-in-out infinite; animation-delay: var(--cd, 0s); }
.hero-chip__icon { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: var(--r-xl); background: var(--soft); color: var(--electric); }
.hero-chip__label { font-family: var(--font-display); font-size: .875rem; line-height: 1.25rem; font-weight: 600; color: var(--navy); }
@media (min-width: 80rem) { .hero-chip { display: block; } }

.hero__content { text-align: center; }
/* No transform/will-change here: a stacking context would isolate the halves' mix-blend-mode
   (white box over the glow). Parallax moves it with `top` instead. */
.hero__mark { position: relative; top: 0; margin: 0 auto 2.5rem; height: 5rem; width: 148px; }
.hero__mark-half { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.hero__mark-half--left { clip-path: inset(0 50% 0 0); }
.hero__mark-half--right { clip-path: inset(0 0 0 50%); }
.hero__eyebrow { color: var(--electric); }
.hero__slash { color: color-mix(in oklab, var(--ink) 30%, transparent); }
.hero__title { margin: 1.5rem auto 0; max-width: 64rem; font-size: 13vw; font-weight: 700; line-height: .92; color: var(--navy); }
.hero__word { display: inline-block; overflow: hidden; padding-bottom: .08em; vertical-align: bottom; }
.hero__word > span { display: inline-block; }
.hero__subtitle { margin: 2rem auto 0; max-width: 42rem; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.75rem; font-weight: 500; color: var(--ink); }
.hero__subtitle-accent { font-family: var(--font-serif); font-size: 1.5rem; line-height: 2rem; font-style: italic; color: var(--electric); }
.hero__text { margin: 1.25rem auto 0; max-width: 42rem; font-size: 1rem; line-height: 1.625; color: var(--muted-foreground); }
.hero__actions { margin-top: 2.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; }
.hero__tagline { margin-top: 3.5rem; font-size: 11px; font-weight: 600; letter-spacing: .28em; color: color-mix(in oklab, var(--ink) 50%, transparent); }

.hero__rings { pointer-events: none; position: absolute; inset: 0; }
.hero__ring { position: absolute; width: 2rem; height: 2rem; border-radius: 9999px; border: 2px solid color-mix(in oklab, var(--electric) 50%, transparent); animation: ring-pulse 2.2s ease-out infinite; }
.hero__ring--1 { left: 12%; top: 22%; }
.hero__ring--2 { right: 14%; top: 40%; animation-delay: .7s; }
.hero__ring--3 { left: 20%; bottom: 18%; animation-delay: 1.4s; }
@keyframes ring-pulse { from { transform: scale(.6); opacity: .8; } to { transform: scale(1.6); opacity: 0; } }

.hero__scroll { position: absolute; bottom: 2rem; right: 2rem; display: none; flex-direction: column; align-items: center; gap: .75rem; writing-mode: vertical-rl; font-size: 10px; font-weight: 600; letter-spacing: .3em; color: color-mix(in oklab, var(--ink) 50%, transparent); }
.hero__scroll-track { position: relative; height: 2.5rem; width: 1px; overflow: hidden; background: color-mix(in oklab, var(--navy) 15%, transparent); writing-mode: horizontal-tb; }
.hero__scroll-thumb { position: absolute; inset-inline: 0; top: 0; height: 1rem; background: var(--electric); animation: scroll-thumb 1.6s ease-in-out infinite; }
@keyframes scroll-thumb { from { transform: translateY(-16px); } to { transform: translateY(40px); } }

@media (min-width: 40rem) {
	.hero__title { font-size: 4.5rem; }
	.hero__actions { flex-direction: row; }
}
@media (min-width: 48rem) {
	.hero__mark { height: 6rem; width: 178px; }
	.hero__title { font-size: 6rem; }
	.hero__subtitle { font-size: 1.5rem; line-height: 2rem; }
	.hero__subtitle-accent { font-size: 1.875rem; line-height: 2.25rem; }
	.hero__text { font-size: 1.125rem; }
	.hero__scroll { display: flex; }
}
@media (min-width: 64rem) {
	.hero__title { font-size: 8.5rem; }
	.hero__rings { display: none; }
}

/* Hero intro choreography (exact delays/durations from the reference) */
@keyframes hero-mark-left { from { opacity: 0; transform: translate(-120px, -30px) rotate(-12deg); } to { opacity: 1; transform: none; } }
@keyframes hero-mark-right { from { opacity: 0; transform: translate(120px, 30px) rotate(12deg); } to { opacity: 1; transform: none; } }
@keyframes hero-word { from { transform: translateY(105%) rotate(4deg); } to { transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-up-20 { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes chip-in { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
.js .hero__mark-half--left { animation: hero-mark-left 1.3s var(--ease) .2s both; }
.js .hero__mark-half--right { animation: hero-mark-right 1.3s var(--ease) .35s both; }
.js .hero__eyebrow { animation: fade-in .3s linear .9s both; }
.js .hero__word > span { animation: hero-word 1s var(--ease) both; animation-delay: calc(.6s + var(--i, 0) * .12s); }
.js .hero__body { animation: fade-up-20 .8s cubic-bezier(.25, .1, .25, 1) 1.3s both; }
.js .hero-chip { animation: chip-in .8s var(--ease) both; animation-delay: calc(1.4s + var(--cd, 0s) * .25); }

/* ---------------------------------------------------------------- About */
.about__grid { display: grid; gap: 4rem; }
.about__title { margin-top: 1.5rem; font-size: 3rem; font-weight: 600; line-height: 1.02; color: var(--navy); }
.about__title-accent { font-family: var(--font-serif); font-weight: 400; font-style: italic; color: var(--electric); }
.about__copy { display: flex; flex-direction: column; gap: 1.25rem; font-size: 1.125rem; line-height: 1.625; color: var(--muted-foreground); }
.about__lead { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.75rem; font-weight: 500; color: var(--ink); }
.pillars { margin: 6rem 1.5rem 0; display: grid; max-width: 80rem; gap: 1px; overflow: hidden; border-radius: 2rem; border: 1px solid var(--border); background: var(--border); }
.pillars__cell { background: var(--card); }
.pillar { position: relative; height: 100%; padding: 2.5rem; transition: background-color .5s var(--ease-tw); }
.pillar:hover { background: var(--navy); }
.pillar__num { font-family: var(--font-display); font-size: .875rem; line-height: 1.25rem; font-weight: 700; color: var(--electric); }
.pillar__title { margin-top: 2.5rem; font-family: var(--font-display); font-size: 3rem; line-height: 1; font-weight: 700; letter-spacing: -.025em; color: var(--navy); transition: color .15s var(--ease-tw); }
.pillar__text { margin-top: 1rem; color: var(--muted-foreground); transition: color .15s var(--ease-tw); }
.pillar:hover .pillar__title { color: var(--on-navy); }
.pillar:hover .pillar__text { color: var(--on-navy-muted); }
@media (min-width: 48rem) {
	.about__title { font-size: 4.5rem; }
	.pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pillar__title { font-size: 3.75rem; }
}
@media (min-width: 64rem) {
	.about__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.about__heading { grid-column: span 7 / span 7; }
	.about__copy { grid-column: span 5 / span 5; padding-top: 4rem; }
}
@media (min-width: 80rem) { .pillars { margin-inline: auto; } }

/* ---------------------------------------------------------------- Services */
.services__head { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; }
.services__count { font-family: var(--font-serif); font-size: 4.5rem; line-height: 1; font-style: italic; color: color-mix(in oklab, var(--electric) 20%, transparent); }
.services__list { margin-top: 5rem; display: flex; flex-direction: column; gap: 2rem; }
.service { display: grid; align-items: center; gap: 2.5rem; overflow: hidden; border-radius: 2rem; border: 1px solid var(--border); background: var(--card); padding: 1.5rem; box-shadow: var(--shadow-card); transition: box-shadow .5s var(--ease-tw); }
.service:hover { box-shadow: var(--shadow-lift); }
.service__body, .service__visual { min-width: 0; }
.service__meta { display: flex; align-items: center; gap: 1rem; }
.service__num { font-family: var(--font-display); font-size: .875rem; line-height: 1.25rem; font-weight: 700; color: var(--electric); }
.service__rule { height: 1px; width: 2.5rem; background: color-mix(in oklab, var(--electric) 40%, transparent); }
.service__tag { color: color-mix(in oklab, var(--ink) 60%, transparent); }
.service__title { margin-top: 1.5rem; font-size: 1.875rem; font-weight: 600; line-height: 1.25; color: var(--navy); }
.service__text { margin-top: 1.25rem; line-height: 1.625; color: var(--muted-foreground); }
.service__items { margin-top: 2rem; display: grid; column-gap: 1.5rem; row-gap: .75rem; }
.service__items li { display: flex; align-items: flex-start; gap: .625rem; font-size: .875rem; line-height: 1.25rem; font-weight: 500; color: var(--ink); }
.service__check { margin-top: .125rem; display: grid; width: 1rem; height: 1rem; flex-shrink: 0; place-items: center; border-radius: 9999px; background: var(--soft); color: var(--electric); }
@media (min-width: 40rem) { .service__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 48rem) {
	.services__head { flex-direction: row; align-items: flex-end; }
	.services__count { font-size: 8rem; }
	.service { padding: 3rem; }
	.service__title { font-size: 2.25rem; }
}
@media (min-width: 64rem) {
	.service { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; }
	.service--flip .service__body { order: 2; }
	.service--flip .service__visual { order: 1; }
}

/* Visual frame shared by the four mock-ups */
.visual { position: relative; aspect-ratio: 5 / 4; overflow: hidden; border-radius: var(--r-3xl); background: var(--gradient-brand); padding: 1.25rem; }
.visual__grid { pointer-events: none; position: absolute; inset: 0; opacity: .6; }
.visual--image { padding: 0; }
.visual--image img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 48rem) { .visual { padding: 1.75rem; } }

/* Visual: dev */
.vdev__browser { position: relative; z-index: 10; height: 78%; width: 86%; border-radius: var(--r-2xl); background: var(--card); box-shadow: var(--shadow-2xl); }
.vdev__bar { display: flex; align-items: center; gap: .375rem; border-bottom: 1px solid var(--border); padding: .75rem 1rem; }
.vdev__dot { width: .625rem; height: .625rem; border-radius: 9999px; }
.vdev__dot--red { background: color-mix(in oklab, var(--destructive) 70%, transparent); }
.vdev__dot--blue { background: color-mix(in oklab, var(--bright) 60%, transparent); }
.vdev__dot--green { background: color-mix(in oklab, var(--success) 70%, transparent); }
.vdev__url { margin-left: .75rem; height: 1.25rem; flex: 1 1 0%; border-radius: 9999px; background: var(--light); padding-inline: .75rem; font-size: 10px; line-height: 1.25rem; color: var(--muted-foreground); }
.vdev__page { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; padding: 1.25rem; }
.vdev__main { grid-column: span 3 / span 3; display: flex; flex-direction: column; gap: .75rem; }
.vdev__line { border-radius: 9999px; background: var(--light); height: .5rem; }
.vdev__line--kicker { height: .75rem; width: 4rem; background: var(--soft); }
.vdev__line--h1 { height: 1.5rem; width: 100%; border-radius: var(--r-md); background: var(--navy); }
.vdev__line--h2 { height: 1.5rem; width: 75%; border-radius: var(--r-md); background: var(--electric); }
.vdev__line--p { width: 100%; }
.vdev__line--p2 { width: 83.333%; }
.vdev__btn { margin-top: .5rem; height: 1.75rem; width: 6rem; border-radius: 9999px; background: var(--electric); }
.vdev__media { grid-column: span 2 / span 2; border-radius: var(--r-xl); background: var(--soft); }
.vdev__code { position: absolute; bottom: 1.25rem; right: 1.25rem; z-index: 20; width: 44%; border-radius: var(--r-xl); background: var(--navy-deep); padding: 1rem; font-family: var(--font-mono); font-size: 10px; line-height: 1.625; color: var(--on-navy-muted); box-shadow: var(--shadow-2xl); }
.vdev__code-line { white-space: pre; }
.js .vdev__code-line { opacity: 0; transform: translateX(-6px); transition: opacity .3s linear var(--d), transform .45s var(--ease) var(--d); }
.js .vdev__code.is-in .vdev__code-line { opacity: 1; transform: none; }
.vdev__ln { margin-right: .5rem; color: color-mix(in oklab, var(--on-navy-muted) 40%, transparent); }
.vdev__code .is-accent { color: var(--bright); }
.vdev__caret { margin-left: .125rem; display: inline-block; height: .75rem; width: .375rem; vertical-align: middle; background: var(--bright); animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }
.vdev__phone { position: absolute; right: 38%; top: 2rem; z-index: 20; display: none; height: 52%; width: 22%; border-radius: var(--r-2xl); border: 4px solid var(--navy-deep); background: var(--card); padding: .5rem; box-shadow: var(--shadow-2xl); }
.vdev__phone-kicker { height: .5rem; width: 2rem; border-radius: 9999px; background: var(--soft); }
.vdev__phone-h1 { margin-top: .5rem; height: 1rem; border-radius: .25rem; background: var(--navy); }
.vdev__phone-h2 { margin-top: .25rem; height: 1rem; width: 75%; border-radius: .25rem; background: var(--electric); }
.vdev__phone-media { margin-top: .75rem; height: 3.5rem; border-radius: var(--r-lg); background: var(--soft); }
@media (min-width: 40rem) { .vdev__phone { display: block; } }
@media (min-width: 48rem) { .vdev__code { font-size: 11px; } }

/* Visual: crm */
.vcrm { position: relative; z-index: 10; display: flex; height: 100%; flex-direction: column; gap: 1rem; }
.vcrm__head { display: flex; align-items: center; justify-content: space-between; }
.vcrm__title { font-family: var(--font-display); font-size: .875rem; line-height: 1.25rem; font-weight: 600; color: var(--on-navy); }
.vcrm__badge { border-radius: 9999px; background: color-mix(in oklab, var(--on-navy) 10%, transparent); padding: .25rem .75rem; font-size: 10px; font-weight: 600; color: var(--on-navy-muted); }
.vcrm__cols { display: grid; flex: 1 1 0%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .625rem; }
.vcrm__col { border-radius: var(--r-xl); background: color-mix(in oklab, var(--on-navy) 8%, transparent); padding: .5rem; }
.vcrm__col-title { margin-bottom: .5rem; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--on-navy-muted); }
.vcrm__card { margin-bottom: .5rem; border-radius: var(--r-lg); background: var(--card); padding: .5rem; }
.js .vcrm__card { opacity: 0; transform: translateY(10px); transition: opacity .3s linear var(--d), transform .5s cubic-bezier(.34, 1.3, .64, 1) var(--d); }
.js .vcrm.is-in .vcrm__card { opacity: 1; transform: none; }
.vcrm__bar { height: .375rem; width: 75%; border-radius: 9999px; background: color-mix(in oklab, var(--navy) 70%, transparent); }
.vcrm__bar--short { margin-top: .375rem; width: 50%; background: var(--soft); }
.vcrm__tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .625rem; }
.vcrm__tool { display: flex; align-items: center; gap: .5rem; border-radius: var(--r-xl); background: var(--card); padding: .625rem .75rem; min-width: 0; }
.vcrm__tool .icon { color: var(--electric); }
.vcrm__tool span { font-size: 11px; font-weight: 600; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Visual: ai */
.vai__lines { position: absolute; inset: 0; z-index: 10; width: 100%; height: 100%; overflow: visible; }
.vai__lines path { fill: none; stroke: var(--bright); stroke-width: 2; }
/* Line drawing: --len is measured by main.js (screen px for non-scaling strokes). Solid without JS. */
.js .draw[style*="--len"] { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset var(--dur, 1s) var(--ease) var(--d, 0s); }
.js .is-in .draw[style*="--len"] { stroke-dashoffset: 0; }
.vai__node { position: absolute; z-index: 20; display: flex; flex-direction: column; align-items: center; gap: .5rem; transform: translate(-50%, -50%); }
.vai__box { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: var(--r-2xl); background: var(--card); color: var(--electric); }
.vai__box--main { width: 5rem; height: 5rem; background: var(--electric); color: #fff; box-shadow: var(--shadow-lift); }
.vai__label { border-radius: 9999px; background: color-mix(in oklab, var(--on-navy) 10%, transparent); padding: .125rem .625rem; font-size: 10px; font-weight: 600; color: var(--on-navy); white-space: nowrap; }
.vai__toast { position: absolute; bottom: 1.25rem; left: 50%; z-index: 20; width: 70%; transform: translateX(-50%); border-radius: var(--r-2xl); background: color-mix(in oklab, var(--card) 95%, transparent); padding: .75rem; font-size: 11px; box-shadow: var(--shadow-2xl); }
.vai__toast-title { font-weight: 600; color: var(--navy); }
.vai__toast-text { margin-top: .25rem; color: var(--muted-foreground); }

/* Visual: biz */
.vbiz { position: relative; z-index: 10; display: grid; height: 100%; grid-template-rows: auto 1fr; gap: 1rem; }
.vbiz__board { border-radius: var(--r-2xl); background: var(--card); padding: 1rem; }
.vbiz__title { font-size: 11px; font-weight: 600; color: var(--navy); }
.vbiz__rows { margin-top: .75rem; display: flex; flex-direction: column; gap: .5rem; }
.vbiz__row { display: flex; align-items: center; gap: .75rem; border-radius: var(--r-xl); background: var(--light); padding: .5rem .75rem; }
.vbiz__row .icon { color: var(--electric); }
.vbiz__row-label { flex: 1 1 0%; font-size: 11px; font-weight: 600; color: var(--ink); }
.vbiz__row-status { font-size: 10px; color: var(--muted-foreground); }
.vbiz__graph { position: relative; border-radius: var(--r-2xl); background: color-mix(in oklab, var(--on-navy) 5%, transparent); }
.vbiz__graph svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vbiz__graph line { stroke: var(--bright); stroke-width: .8; }
.vbiz__graph .is-hub { fill: var(--electric); }
.vbiz__graph .is-node { fill: var(--on-navy); }

/* ---------------------------------------------------------------- Approach */
.approach__grid { position: absolute; inset: 0; }
.approach__inner { position: relative; }
.timeline { position: relative; margin-top: 5rem; }
.timeline__track, .timeline__progress { position: absolute; left: 1.5rem; top: 0; height: 100%; width: 1px; }
.timeline__track { background: color-mix(in oklab, var(--on-navy) 10%, transparent); }
.timeline__progress { transform-origin: top; background: linear-gradient(to bottom, var(--bright), var(--electric)); transform: scaleY(var(--progress, 1)); }
.js .timeline__progress { transform: scaleY(var(--progress, 0)); }
.timeline__list { display: flex; flex-direction: column; gap: 4rem; }
.step { position: relative; display: grid; gap: 1rem; padding-left: 5rem; }
.step__icon { position: absolute; left: 0; top: 0; display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: var(--r-2xl); border: 1px solid color-mix(in oklab, var(--bright) 40%, transparent); background: var(--navy-deep); color: var(--bright); }
.step__num { font-family: var(--font-display); font-size: 3.75rem; line-height: 1; font-weight: 700; color: color-mix(in oklab, var(--on-navy) 10%, transparent); }
.step__title { font-size: 1.875rem; line-height: 2.25rem; font-weight: 600; color: var(--on-navy); }
.step__text { margin-top: .75rem; max-width: 28rem; font-size: 1.125rem; line-height: 1.75rem; color: var(--on-navy-muted); }
@media (min-width: 48rem) {
	.timeline { margin-left: 8%; }
	.timeline__track, .timeline__progress { left: 2rem; }
	.step { grid-template-columns: 200px 1fr; padding-left: 7rem; }
	.step__icon { width: 4rem; height: 4rem; }
	.step__icon .icon { width: 1.5rem; height: 1.5rem; }
	.step__num { font-size: 4.5rem; }
	.step__body--offset { padding-left: 4rem; }
	.step__title { font-size: 2.25rem; line-height: 2.5rem; }
}

/* ---------------------------------------------------------------- Training */
.training__head { display: grid; align-items: end; gap: 3rem; }
.training__lead { font-size: 1.125rem; line-height: 1.625; color: var(--muted-foreground); }
.training__text { margin-top: 1rem; line-height: 1.625; color: var(--muted-foreground); }
.training__figure-wrap { margin-top: 4rem; }
.training__figure { position: relative; overflow: hidden; border-radius: 2rem; }
.training__img { aspect-ratio: 16 / 8; width: 100%; object-fit: cover; }
.js .training__img { transform: scale(1.15); transition: transform 1.6s var(--ease); }
.js .training__figure.is-in .training__img { transform: none; }
.training__shade { position: absolute; inset: 0; background: linear-gradient(to top in oklab, color-mix(in oklab, var(--navy) 80%, transparent) 0%, color-mix(in oklab, var(--navy) 10%, transparent) 50%, transparent 100%); }
.training__caption { position: absolute; bottom: 1.5rem; left: 1.5rem; right: 1.5rem; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.training__caption-text { max-width: 32rem; font-family: var(--font-display); font-size: 1.5rem; line-height: 2rem; font-weight: 600; color: var(--on-navy); }
.training__caption-text span { font-family: var(--font-serif); font-weight: 400; font-style: italic; }
.training__badge { border-radius: 9999px; background: color-mix(in oklab, var(--on-navy) 15%, transparent); padding: .5rem 1rem; font-size: .75rem; line-height: 1rem; font-weight: 600; color: var(--on-navy); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.courses { margin-top: 4rem; display: grid; gap: 1.5rem; }
.course { position: relative; display: flex; height: 100%; flex-direction: column; overflow: hidden; border-radius: var(--r-3xl); border: 1px solid var(--border); background: var(--card); padding: 2rem; box-shadow: var(--shadow-card); transition: all .5s var(--ease-tw); }
.course:hover { transform: translateY(-.25rem); border-color: color-mix(in oklab, var(--electric) 40%, transparent); box-shadow: var(--shadow-lift); }
.course__blob { position: absolute; right: -2.5rem; top: -2.5rem; width: 10rem; height: 10rem; border-radius: 9999px; background: var(--soft); transition: transform .7s var(--ease-tw); }
.course:hover .course__blob { transform: scale(1.5); }
.course__top { position: relative; display: flex; align-items: center; justify-content: space-between; }
.course__icon { display: grid; width: 3.5rem; height: 3.5rem; place-items: center; border-radius: var(--r-2xl); background: var(--navy); color: var(--on-navy); transition: background-color .15s var(--ease-tw); }
.course:hover .course__icon { background: var(--electric); }
.course__num { font-family: var(--font-display); font-size: .875rem; line-height: 1.25rem; font-weight: 700; color: var(--electric); }
.course__title { position: relative; margin-top: 2rem; font-size: 1.5rem; line-height: 1.25; font-weight: 600; color: var(--navy); }
.course__text { position: relative; margin-top: .75rem; flex: 1 1 0%; font-size: .875rem; line-height: 1.625; color: var(--muted-foreground); }
.course__tags { position: relative; margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.course__tags li { border-radius: 9999px; background: var(--light); padding: .25rem .75rem; font-size: .75rem; line-height: 1rem; font-weight: 600; color: var(--navy); }
.course__tags a { color: inherit; }
.course__link { position: relative; margin-top: 2rem; display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; line-height: 1.25rem; font-weight: 600; color: var(--electric); }
.course__link::after { content: ""; position: absolute; inset: -.5rem -.75rem; }
.training__cta { margin-top: 4rem; text-align: center; }
.btn-journey { display: inline-flex; align-items: center; gap: .75rem; border-radius: 9999px; background: var(--gradient-brand); padding: 1.25rem 2.5rem; font-family: var(--font-display); font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; color: var(--on-navy); box-shadow: var(--shadow-lift); transition: transform .15s var(--ease-tw); }
.btn-journey:hover { transform: scale(1.03); }
@media (min-width: 48rem) {
	.training__caption { bottom: 2.5rem; left: 2.5rem; right: 2.5rem; }
	.training__caption-text { font-size: 2.25rem; line-height: 2.5rem; }
	.courses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
	.training__head { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.courses { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- Why */
.reasons { margin-top: 5rem; display: grid; column-gap: 2.5rem; row-gap: 3.5rem; }
.reason { border-top: 1px solid color-mix(in oklab, var(--navy) 15%, transparent); padding-top: 2rem; }
.reason__icon { width: 1.75rem; height: 1.75rem; color: var(--electric); transition: transform .5s var(--ease-tw); }
.reason:hover .reason__icon { transform: rotate(-6deg) scale(1.1); }
.reason__title { margin-top: 1.5rem; font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; color: var(--navy); }
.reason__text { margin-top: .75rem; line-height: 1.625; color: var(--muted-foreground); }
@media (min-width: 48rem) { .reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .reasons { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- Team */
.team__grid { margin-top: 5rem; display: grid; gap: 2.5rem; }
.member { display: grid; gap: 2rem; }
.member__photo { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--r-3xl); background: var(--gradient-brand); }
.js .member__photo { clip-path: inset(100% 0 0 0); transition: clip-path 1.2s var(--ease); }
.js .member__photo.is-in { clip-path: inset(0 0 0 0); }
.member__photo img { width: 100%; height: 100%; object-fit: cover; }
.member__placeholder { display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: center; }
.member__grid { position: absolute; inset: 0; }
.member__initials { position: relative; font-family: var(--font-display); font-size: 4.5rem; line-height: 1; font-weight: 700; color: color-mix(in oklab, var(--on-navy) 90%, transparent); }
.member__soon { position: relative; margin-top: 1rem; font-size: 10px; font-weight: 600; letter-spacing: .3em; color: var(--on-navy-muted); }
.member__name { margin-top: .75rem; font-size: 2.25rem; line-height: 2.5rem; font-weight: 600; color: var(--navy); }
.member__bio { margin-top: 1.25rem; line-height: 1.625; color: var(--muted-foreground); }
.member__skills { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.member__skills li { border-radius: 9999px; border: 1px solid var(--border); padding: .25rem .75rem; font-size: .75rem; line-height: 1rem; font-weight: 600; color: var(--navy); }
.member__social { margin-top: 1.25rem; display: inline-grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: 9999px; border: 1px solid var(--border); color: var(--navy); transition: all .15s var(--ease-tw); }
.member__social:hover { border-color: var(--electric); color: var(--electric); }
@media (min-width: 40rem) { .member { grid-template-columns: minmax(0, 220px) 1fr; } }
@media (min-width: 64rem) {
	.team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.member--offset { margin-top: 6rem; }
}

/* ---------------------------------------------------------------- Work (bento) */
.work__head { display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; }
.work__note { max-width: 20rem; font-size: .875rem; line-height: 1.25rem; color: var(--muted-foreground); }
.bento { margin-top: 4rem; display: grid; grid-auto-rows: 240px; gap: 1.25rem; }
.tile { position: relative; display: block; overflow: hidden; border-radius: var(--r-3xl); }
.tile--image { background: var(--navy); }
.tile--dark { background: var(--gradient-brand); }
.tile--light { background: var(--card); border: 1px solid var(--border); }
.js .tile.reveal { transition-duration: .7s; --ry: 30px; }
.tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .8; transition: transform 1s var(--ease-tw); }
.tile:hover .tile__img { transform: scale(1.05); }
.tile__shade { position: absolute; inset: 0; background: linear-gradient(to top in oklab, var(--navy) 0%, color-mix(in oklab, var(--navy) 30%, transparent) 50%, transparent 100%); }
.tile__grid { position: absolute; inset: 0; }
.tile__inner { position: relative; display: flex; height: 100%; flex-direction: column; justify-content: space-between; padding: 1.75rem; }
.tile__top { display: flex; align-items: flex-start; justify-content: space-between; }
.tile__icon { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: var(--r-2xl); background: color-mix(in oklab, var(--on-navy) 15%, transparent); color: var(--on-navy); }
.tile__badge { border-radius: 9999px; padding: .25rem .75rem; font-size: 10px; font-weight: 600; letter-spacing: .05em; background: color-mix(in oklab, var(--on-navy) 10%, transparent); color: var(--on-navy); }
.tile__cat { font-size: .75rem; line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--bright); }
.tile__title { margin-top: .5rem; font-size: 1.5rem; line-height: 2rem; font-weight: 600; color: var(--on-navy); }
.tile__text { max-height: 0; overflow: hidden; font-size: .875rem; line-height: 1.25rem; opacity: 0; color: var(--on-navy-muted); transition: all .5s var(--ease-tw); }
.tile:hover .tile__text, .tile:focus-visible .tile__text { margin-top: .5rem; max-height: 5rem; opacity: 1; }
.tile--light .tile__icon { background: var(--soft); color: var(--electric); }
.tile--light .tile__badge { background: var(--light); color: var(--navy); }
.tile--light .tile__cat { color: var(--electric); }
.tile--light .tile__title { color: var(--navy); }
.tile--light .tile__text { color: var(--muted-foreground); }
@media (min-width: 48rem) {
	.work__head { flex-direction: row; align-items: flex-end; }
	.bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.tile--wide { grid-column: span 2 / span 2; }
	.tile--large { grid-column: span 2 / span 2; grid-row: span 2 / span 2; }
	.tile--full { grid-column: span 3 / span 3; }
}

/* ---------------------------------------------------------------- CTA */
.cta { overflow: hidden; background: var(--gradient-brand); }
.cta__grid { position: absolute; inset: 0; }
.cta__square { position: absolute; right: -6rem; top: 2.5rem; width: 20rem; height: 20rem; transform: rotate(45deg); border-radius: 60px; border: 1px solid color-mix(in oklab, var(--on-navy) 15%, transparent); animation: cta-rotate 18s ease-in-out infinite; }
.cta__glow { position: absolute; left: -5rem; bottom: 0; width: 16rem; height: 16rem; border-radius: 50px; background: color-mix(in oklab, var(--electric) 30%, transparent); filter: blur(40px); animation: cta-float 10s ease-in-out infinite; }
@keyframes cta-rotate { 0%, 100% { transform: rotate(45deg); } 50% { transform: rotate(60deg); } }
@keyframes cta-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-30px); } }
.cta__inner { position: relative; margin-inline: auto; max-width: 64rem; padding-inline: 1.5rem; text-align: center; }
.cta__title { font-size: 3rem; line-height: 1.02; font-weight: 600; color: var(--on-navy); }
.cta__text { margin: 2rem auto 0; max-width: 42rem; font-size: 1.125rem; line-height: 1.75rem; color: var(--on-navy-muted); }
.cta__actions { margin-top: 3rem; display: flex; flex-direction: column; justify-content: center; gap: .75rem; }
@media (min-width: 40rem) { .cta__actions { flex-direction: row; } }
@media (min-width: 48rem) { .cta__title { font-size: 4.5rem; } }

/* ---------------------------------------------------------------- Contact */
.contact__grid { display: grid; gap: 4rem; }
.contact__intro, .contact__form-wrap { min-width: 0; }
.contact__cards { margin-top: 3rem; display: flex; flex-direction: column; gap: 1rem; }
.contact-card { display: flex; align-items: center; gap: 1.25rem; border-radius: var(--r-3xl); border: 1px solid var(--border); padding: 1.5rem; transition: all .15s var(--ease-tw); min-width: 0; }
.contact-card:hover { border-color: var(--electric); box-shadow: var(--shadow-card); }
.contact-card > span:last-child { min-width: 0; }
.contact-card__icon { display: grid; width: 3.5rem; height: 3.5rem; flex-shrink: 0; place-items: center; border-radius: var(--r-2xl); background: var(--navy); color: var(--on-navy); transition: background-color .15s var(--ease-tw); }
.contact-card:hover .contact-card__icon { background: var(--electric); }
.contact-card__label { display: block; font-size: .75rem; line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-foreground); }
.contact-card__value { margin-top: .25rem; display: block; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; color: var(--navy); overflow-wrap: anywhere; }
.contact-card__value--lg { font-size: 1.5rem; line-height: 2rem; }
/* Reference bug fix: on phones the email card overflowed the screen. Scale only that value to fit. */
@media (max-width: 39.99rem) { .contact-card__value:not(.contact-card__value--lg) { font-size: clamp(.95rem, 4.35vw, 1.25rem); } }

.contact-form { border-radius: 2rem; border: 1px solid var(--border); background: var(--light); padding: 1.5rem; }
.contact-form__grid { display: grid; gap: 1.25rem; }
.field { display: block; font-size: .875rem; line-height: 1.25rem; font-weight: 600; color: var(--navy); }
.field__optional { font-weight: 400; color: var(--muted-foreground); }
.field__control { margin-top: .5rem; width: 100%; border-radius: var(--r-2xl); border: 1px solid var(--input); background: var(--card); padding: .875rem 1rem; color: var(--ink); outline: none; transition: all .15s var(--ease-tw); }
.field__control::placeholder { color: color-mix(in oklab, var(--muted-foreground) 60%, transparent); }
.field__control:focus { border-color: var(--electric); box-shadow: 0 0 0 4px color-mix(in oklab, var(--electric) 15%, transparent); }
select.field__control { -webkit-appearance: menulist; appearance: auto; }
.field__error { display: block; margin-top: .375rem; font-size: .875rem; line-height: 1.25rem; font-weight: 400; color: var(--destructive); }
.field--hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form__actions { margin-top: 2rem; display: flex; flex-direction: column; gap: .75rem; }
.contact-form__note { margin-top: 1rem; font-size: .75rem; line-height: 1rem; color: var(--muted-foreground); }
.form-status { margin-top: 1.25rem; display: flex; align-items: center; gap: .5rem; border-radius: var(--r-2xl); padding: .75rem 1rem; font-size: .875rem; line-height: 1.25rem; font-weight: 500; }
.form-status--ok { background: color-mix(in oklab, var(--success) 10%, transparent); color: var(--success); }
.form-status--err { background: color-mix(in oklab, var(--destructive) 10%, transparent); color: var(--destructive); }
@media (min-width: 40rem) { .contact-form__actions { flex-direction: row; } }
@media (min-width: 48rem) {
	.contact-form { padding: 2.5rem; }
	.contact-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.field--full { grid-column: span 2 / span 2; }
}
@media (min-width: 64rem) {
	.contact__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.contact__intro { grid-column: span 5 / span 5; }
	.contact__form-wrap { grid-column: span 7 / span 7; }
}

/* ---------------------------------------------------------------- Footer */
.site-footer { position: relative; overflow: hidden; background: var(--navy-deep); padding-top: 6rem; color: var(--on-navy-muted); }
.js .site-footer { opacity: 0; transition: opacity .8s cubic-bezier(.25, .1, .25, 1); }
.js .site-footer.is-in { opacity: 1; }
.site-footer__grid { display: grid; gap: 3rem; }
.site-footer__logo { display: inline-block; border-radius: var(--r-2xl); background: var(--on-navy); padding: .75rem 1.25rem; }
.site-footer__logo-img { height: 2.25rem; width: auto; mix-blend-mode: multiply; }
.site-footer__tagline { margin-top: 2rem; font-family: var(--font-display); font-size: 1.5rem; line-height: 2rem; font-weight: 600; color: var(--on-navy); }
.site-footer__desc { margin-top: .75rem; max-width: 24rem; font-size: .875rem; line-height: 1.625; }
.site-footer__heading { color: var(--bright); }
.site-footer__links { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .75rem; font-size: .875rem; line-height: 1.25rem; }
.site-footer__links a { transition: color .15s var(--ease-tw); }
.site-footer__links a:hover { color: var(--on-navy); }
.site-footer__social { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.site-footer__social a { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: 9999px; border: 1px solid color-mix(in oklab, var(--on-navy) 15%, transparent); transition: all .15s var(--ease-tw); }
.site-footer__social a:hover { border-color: var(--bright); color: var(--on-navy); }
.site-footer__watermark { margin-top: 5rem; -webkit-user-select: none; user-select: none; text-align: center; font-family: var(--font-display); font-size: 17vw; line-height: 1; font-weight: 700; letter-spacing: -.05em; color: color-mix(in oklab, var(--on-navy) 5%, transparent); }
.site-footer__bottom { border-top: 1px solid color-mix(in oklab, var(--on-navy) 10%, transparent); }
.site-footer__bar { display: flex; flex-direction: column; justify-content: space-between; gap: .5rem; padding-block: 1.5rem; font-size: .75rem; line-height: 1rem; }
.site-footer__motto { letter-spacing: .25em; color: var(--on-navy); }
@media (min-width: 40rem) { .site-footer__bar { flex-direction: row; } }
@media (min-width: 64rem) {
	.site-footer__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.site-footer__brand { grid-column: span 4 / span 4; }
	.site-footer__col { grid-column: span 2 / span 2; }
}

/* Optional floating WhatsApp button (off by default) */
.wa-float { position: fixed; right: 1.25rem; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); z-index: 45; display: grid; width: 3.5rem; height: 3.5rem; place-items: center; border-radius: 9999px; background: var(--electric); color: #fff; box-shadow: var(--shadow-lift); transition: transform .15s var(--ease-tw), background-color .15s var(--ease-tw); }
.wa-float:hover { transform: scale(1.06); background: var(--navy); }

/* ---------------------------------------------------------------- Collaborative cursors */
.cursor-layer { pointer-events: none; position: absolute; inset: 0; z-index: 40; overflow: hidden; }
.mf-cursor { position: absolute; left: 0; top: 0; will-change: transform; opacity: 0; transition: opacity .3s linear; }
.mf-cursor.is-visible { opacity: 1; }
.mf-cursor__glow { position: absolute; left: -.5rem; top: -.5rem; width: 1.25rem; height: 1.25rem; border-radius: 9999px; opacity: .3; filter: blur(12px); }
.mf-cursor__arrow { position: relative; filter: drop-shadow(0 3px 3px rgb(0 0 0 / .12)); }
.mf-cursor__label { position: absolute; left: 1.25rem; top: 1.25rem; white-space: nowrap; border-radius: 9999px; padding: .25rem .625rem; font-family: var(--font-display); font-size: 11px; font-weight: 600; color: var(--on-navy); box-shadow: var(--shadow-card); }
.mf-cursor__ripple { position: absolute; left: -.75rem; top: -.75rem; width: 1.75rem; height: 1.75rem; border-radius: 9999px; border: 2px solid; animation: cursor-ripple .7s cubic-bezier(.25, .1, .25, 1) forwards; }
@keyframes cursor-ripple { from { transform: scale(.3); opacity: .9; } to { transform: scale(1.8); opacity: 0; } }
[data-cursor-active="true"] { outline: 1.5px dashed var(--cursor-color, var(--electric)); outline-offset: 6px; transition: outline-color .3s; }

/* ---------------------------------------------------------------- Inner pages (blog, pages, 404) */
.inner { padding-block: 10rem 7rem; background: var(--background); min-height: 70vh; }
.inner--center { display: flex; align-items: center; text-align: center; }
.inner--center .hero__actions { margin-top: 2.5rem; }
.inner__container--narrow { max-width: 52rem; }
.inner__header { margin-bottom: 3rem; }
.inner__title { margin-top: 1.25rem; font-size: 2.5rem; line-height: 1.05; font-weight: 600; color: var(--navy); }
.inner__title--xl { font-size: 3.5rem; }
.inner__lead { margin: 1.5rem auto 0; max-width: 36rem; font-size: 1.125rem; line-height: 1.625; color: var(--muted-foreground); }
.inner__media { margin-bottom: 3rem; overflow: hidden; border-radius: 2rem; }
.inner__media img { width: 100%; }
.inner__meta { margin-top: 3rem; }
@media (min-width: 48rem) { .inner__title { font-size: 3.75rem; } .inner__title--xl { font-size: 6rem; } }

.post-grid { display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.post-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-3xl); border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow-card); transition: all .5s var(--ease-tw); }
.post-card:hover { transform: translateY(-.25rem); border-color: color-mix(in oklab, var(--electric) 40%, transparent); box-shadow: var(--shadow-lift); }
.post-card__media img { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; }
.post-card__body { display: flex; flex: 1; flex-direction: column; padding: 2rem; }
.post-card__date { font-family: var(--font-display); font-size: .75rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--electric); }
.post-card__title { margin-top: 1rem; font-size: 1.5rem; line-height: 1.25; font-weight: 600; color: var(--navy); }
.post-card__excerpt { margin-top: .75rem; flex: 1; font-size: .875rem; line-height: 1.625; color: var(--muted-foreground); }

.pagination { margin-top: 3rem; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.pagination .page-numbers { display: inline-flex; min-width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid var(--border); padding-inline: 1rem; font-weight: 600; color: var(--navy); }
.pagination .page-numbers.current, .pagination .page-numbers:hover { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }

.prose { font-size: 1.125rem; line-height: 1.75; color: var(--ink); }
.prose > * + * { margin-top: 1.25em; }
.prose h2, .prose h3, .prose h4 { color: var(--navy); font-weight: 600; line-height: 1.2; margin-top: 2em; }
.prose h2 { font-size: 2rem; }
.prose h3 { font-size: 1.5rem; }
.prose a { color: var(--electric); text-decoration: underline; text-underline-offset: 3px; }
.prose ul { list-style: disc; padding-left: 1.5em; }
.prose ol { list-style: decimal; padding-left: 1.5em; }
.prose blockquote { border-left: 3px solid var(--electric); padding-left: 1.25rem; font-family: var(--font-serif); font-size: 1.5rem; font-style: italic; color: var(--navy); }
.prose img { border-radius: var(--r-2xl); }
.prose pre { overflow-x: auto; border-radius: var(--r-xl); background: var(--navy-deep); padding: 1.25rem; color: var(--on-navy); font-family: var(--font-mono); font-size: .875rem; }
.prose code { font-family: var(--font-mono); font-size: .9em; }
.prose table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--border); padding: .5rem .75rem; text-align: left; }
.alignwide, .alignfull { width: 100%; }
.aligncenter { margin-inline: auto; }
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.wp-caption-text, .wp-element-caption { margin-top: .5rem; font-size: .875rem; color: var(--muted-foreground); }
.sticky .post-card__date::after { content: " · Featured"; }

.search-form { display: flex; gap: .5rem; margin-top: 1.5rem; }
.search-form label { flex: 1; }
.search-form .search-field { width: 100%; border-radius: 9999px; border: 1px solid var(--input); background: var(--card); padding: .875rem 1.25rem; outline: none; }
.search-form .search-field:focus { border-color: var(--electric); box-shadow: 0 0 0 4px color-mix(in oklab, var(--electric) 15%, transparent); }
.search-form .search-submit { border-radius: 9999px; background: var(--navy); color: var(--on-navy); padding: .875rem 1.5rem; font-weight: 600; }

.comments { margin-top: 5rem; border-top: 1px solid var(--border); padding-top: 3rem; }
.comments__title, .comment-reply-title { font-size: 1.75rem; font-weight: 600; color: var(--navy); }
.comments__list { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.5rem; }
.comments__list .children { margin-top: 1.5rem; padding-left: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
.comment-body { border-radius: var(--r-2xl); background: var(--light); padding: 1.5rem; }
.comment-author { display: flex; align-items: center; gap: .75rem; font-weight: 600; color: var(--navy); }
.comment-author img { border-radius: 9999px; }
.comment-metadata { margin-top: .25rem; font-size: .75rem; color: var(--muted-foreground); }
.comment-content { margin-top: .75rem; line-height: 1.625; }
.comment-respond { margin-top: 3rem; }
.comment-form { margin-top: 1.5rem; display: grid; gap: 1rem; }
.comment-form label { display: block; font-size: .875rem; font-weight: 600; color: var(--navy); }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { margin-top: .5rem; width: 100%; border-radius: var(--r-2xl); border: 1px solid var(--input); background: var(--card); padding: .875rem 1rem; outline: none; }
.comment-form input:focus, .comment-form textarea:focus { border-color: var(--electric); box-shadow: 0 0 0 4px color-mix(in oklab, var(--electric) 15%, transparent); }
.comment-form-cookies-consent { display: flex; gap: .5rem; align-items: center; }
.comment-form-cookies-consent label { display: inline; font-weight: 400; }

/* ---------------------------------------------------------------- Reduced motion: everything static and visible */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, ::before, ::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
	.js .reveal, .js .split__word > span, .js .vdev__code-line, .js .vcrm__card, .js .site-footer { opacity: 1; transform: none; }
	.js .draw[style*="--len"] { stroke-dasharray: none; stroke-dashoffset: 0; }
	.js .training__img { transform: none; }
	.js .member__photo { clip-path: none; }
	.hero__ring, .hero__scroll-thumb, .hero-chip__inner, .cta__square, .cta__glow { animation: none !important; }
	.cta__square { transform: rotate(45deg); }
	.cursor-layer { display: none; }
}

/* Failsafe: main.js never ran (delayed/blocked by an optimisation plugin). Show everything at rest. */
.mf-failsafe .reveal, .mf-failsafe .vdev__code-line, .mf-failsafe .vcrm__card, .mf-failsafe .site-footer { opacity: 1 !important; transform: none !important; transition: none !important; }
.mf-failsafe .split__word > span, .mf-failsafe .training__img, .mf-failsafe .member__photo, .mf-failsafe .draw { transition: none !important; }
.mf-failsafe .split__word > span { transform: none !important; }
.mf-failsafe .training__img { transform: none !important; }
.mf-failsafe .member__photo { clip-path: none !important; }
.mf-failsafe .timeline__progress { transform: scaleY(1) !important; }
.mf-failsafe .draw { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }

/* Print */
@media print {
	.site-header, .mobile-menu, .cursor-layer, .hero__rings, .hero__scroll, .wa-float, .contact-form { display: none !important; }
	.js .reveal, .js .split__word > span { opacity: 1 !important; transform: none !important; }
}