/* Boecia Talent homepage (approved 5 Oct 2026, from preview-taste/living). Light page, one living hero, calm sections below.
   Radius system: 10px for buttons, 20px for large surfaces. One accent: honey. */
@font-face { font-family: "Schibsted Grotesk"; font-weight: 500; font-display: swap; src: url("/assets/fonts/schibsted-grotesk-latin-500-normal.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: "Schibsted Grotesk"; font-weight: 500; font-display: swap; src: url("/assets/fonts/schibsted-grotesk-latin-ext-500-normal.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 600; font-display: swap; src: url("/assets/fonts/schibsted-grotesk-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 400; font-display: swap; src: url("/assets/fonts/manrope-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 600; font-display: swap; src: url("/assets/fonts/manrope-latin-600-normal.woff2") format("woff2"); }
/* Arial sized to match each brand font (measured), so the swap when the real font arrives moves nothing */
@font-face { font-family: "Manrope Fallback"; font-weight: 400; src: local("Arial"); size-adjust: 101.37%; ascent-override: 105.55%; descent-override: 29.59%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Fallback"; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 97.91%; ascent-override: 109.29%; descent-override: 30.64%; line-gap-override: 0%; }
@font-face { font-family: "Schibsted Fallback"; font-weight: 500; src: local("Arial"); size-adjust: 104.94%; ascent-override: 93.39%; descent-override: 24.78%; line-gap-override: 0%; }
@font-face { font-family: "Schibsted Fallback"; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 99.5%; ascent-override: 98.49%; descent-override: 26.13%; line-gap-override: 0%; }

:root {
  --grain: url("data:image/png;base64,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");
  --paper: #FBFAF6; --bone: #EFF1EC; --cream: #F4EEDF;
  --ink: #15241F; --ink-soft: rgb(21 36 31 / .72); --ink-faint: rgb(21 36 31 / .12);
  --honey: #E9B44C; --honey-deep: #8A5B12; --leaf: #7FB069;
  --display: "Schibsted Grotesk", "Schibsted Fallback", system-ui, sans-serif;
  --body: "Manrope", "Manrope Fallback", system-ui, sans-serif;
  --gutter: clamp(1.25rem, .5rem + 3vw, 3rem);
  --section: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --r-sm: 10px; --r-lg: 20px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.65 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 500; letter-spacing: -.03em; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--honey-deep); outline-offset: 3px; border-radius: 4px; }
.wrap { width: 100%; max-width: 76rem; margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--ink); color: var(--paper); padding: .6rem 1rem; border-radius: var(--r-sm); }
.skip:focus { top: 1rem; }

/* Header: transparent over the hero, frosted once the page scrolls (class set by ui.js) */
.nav-bar { position: fixed; inset: 0 0 auto; z-index: 30; height: 72px; display: flex; align-items: center; transition: background-color .4s var(--ease), box-shadow .4s var(--ease); }
.nav-bar.scrolled { background: var(--paper); box-shadow: 0 1px 0 var(--ink-faint), 0 8px 24px -18px rgb(21 36 31 / .35); }
.nav-row { display: flex; align-items: center; gap: 2rem; }
.brand img { width: 8.25rem; }
.brand .logo-dark { display: none; }
.nav-bar nav { margin-left: auto; }
.nav-bar ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.9rem; }
.nav-bar nav a, .lang { font-weight: 600; font-size: .9375rem; text-decoration: none; color: var(--ink-soft); transition: color .2s; }
.nav-bar nav a:hover, .lang:hover { color: var(--ink); }
.lang { border: 1px solid var(--ink-faint); border-radius: var(--r-sm); padding: .4rem .65rem; }
@media (max-width: 52em) { .nav-bar nav { display: none; } .lang { margin-left: auto; } }

/* Phone menu (below 52em): a button opens the links as a panel under the header (ui.js). Shown only when
   scripts run (head.js always sets .motion or .still), so it never appears without a way to work. */
.menu-btn { display: none; }
@media (max-width: 52em) {
  .lang { display: grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding: 0 .65rem; }
  :is(.motion, .still) .menu-btn { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; margin-left: -1.25rem; padding: 0; border: 1px solid var(--ink-faint); border-radius: var(--r-sm); background: rgb(255 255 255 / .6); color: var(--ink); cursor: pointer; }
  .menu-btn i, .menu-btn i::before, .menu-btn i::after { display: block; width: 18px; height: 1.5px; border-radius: 2px; background: currentColor; transition: translate .3s var(--ease), rotate .3s var(--ease), background-color .2s; }
  .menu-btn i { position: relative; }
  .menu-btn i::before, .menu-btn i::after { content: ""; position: absolute; left: 0; }
  .menu-btn i::before { translate: 0 -6px; }
  .menu-btn i::after { translate: 0 6px; }
  .nav-open .menu-btn i { background-color: transparent; }
  .nav-open .menu-btn i::before { translate: 0 0; rotate: 45deg; }
  .nav-open .menu-btn i::after { translate: 0 0; rotate: -45deg; }
  :is(.motion, .still) .nav-bar nav { display: block; position: fixed; top: 72px; left: 0; right: 0; margin: 0; padding: .25rem var(--gutter) 1.25rem;
    background: var(--paper); box-shadow: 0 1px 0 var(--ink-faint) inset, 0 28px 40px -28px rgb(21 36 31 / .4);
    opacity: 0; translate: 0 -8px; visibility: hidden; transition: opacity .25s var(--ease), translate .3s var(--ease), visibility 0s .3s; }
  .nav-open .nav-bar nav { opacity: 1; translate: 0 0; visibility: visible; transition: opacity .25s var(--ease), translate .3s var(--ease), visibility 0s; }
  :is(.motion, .still) .nav-bar ul { flex-direction: column; gap: 0; }
  :is(.motion, .still) .nav-bar nav a { display: block; padding: 1rem 0; font: 500 1.375rem/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); }
  :is(.motion, .still) .nav-bar li + li a { border-top: 1px solid var(--ink-faint); }
  .nav-open .nav-bar { background: var(--paper); box-shadow: none; }
}

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.1rem; padding: .8rem 1.5rem; border-radius: var(--r-sm); font: 600 1rem/1 var(--body); text-decoration: none; white-space: nowrap; transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s; }
.btn-ink { background: var(--ink); color: var(--paper); box-shadow: 0 8px 24px -12px rgb(21 36 31 / .5); }
.btn-ink:hover { background: #1F342D; box-shadow: 0 12px 28px -12px rgb(21 36 31 / .55); }
.btn-glass { background: rgb(255 255 255 / .82); color: var(--ink); box-shadow: inset 0 0 0 1px rgb(21 36 31 / .14); }
.btn-glass:hover { background: rgb(255 255 255 / .85); }
.btn-line { color: var(--ink); box-shadow: inset 0 0 0 1.5px rgb(21 36 31 / .2); }
.btn-line:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Hero */
.hero { position: relative; isolation: isolate; min-height: min(100svh, 58rem); display: flex; flex-direction: column; padding-top: 72px; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: -3; pointer-events: none;
  /* Poster: matches the first frame of the living field; also the no-JS and no-WebGL look */
  background:
    radial-gradient(60% 70% at 88% 18%, rgb(233 180 76 / .55), rgb(233 180 76 / 0) 70%),
    radial-gradient(45% 55% at 70% 62%, rgb(244 214 150 / .55), rgb(244 214 150 / 0) 70%),
    radial-gradient(40% 45% at 100% 85%, rgb(138 91 18 / .18), rgb(138 91 18 / 0) 70%),
    radial-gradient(55% 60% at 40% 0%, rgb(220 228 218 / .7), rgb(220 228 218 / 0) 70%),
    var(--paper); }
.hero-bg::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); background-size: 128px 128px; opacity: .5; mix-blend-mode: multiply; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero canvas.field { z-index: -2; opacity: 0; transition: opacity .8s var(--ease); }
.hero canvas.field.on { opacity: 1; }
.hero canvas.pollen { z-index: -1; opacity: 0; transition: opacity 1.2s var(--ease); }
.hero canvas.pollen.on { opacity: 1; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; z-index: -1; pointer-events: none; background: linear-gradient(rgb(251 250 246 / 0), var(--paper)); }
.hero-copy { margin-block: auto; padding-block: clamp(2.5rem, 2rem + 6vh, 6rem) 1rem; }
.hero h1 { font-size: clamp(2.75rem, 1.5rem + 4.9vw, 5.6rem); line-height: 1.02; letter-spacing: -.04em; }
.hero h1 .slogan { display: block; max-width: 12.5ch; }
.tagline { margin-top: 1.25rem; font: 600 clamp(1.05rem, 1rem + .35vw, 1.25rem)/1.3 var(--body); color: var(--honey-deep); }
.intro { margin-top: .75rem; max-width: 31rem; font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); color: var(--ink-soft); }
.hero .actions { margin-top: 2rem; }
.ground { position: relative; flex: none; height: clamp(3.5rem, 8vh, 5.5rem); margin-top: 1.5rem; }
.sprout { position: absolute; bottom: 0; left: 50%; height: 100%; translate: -50% 0; aspect-ratio: 110 / 106; }
.sprout img { width: 100%; height: 100%; }
/* Every sprout stands on a short patch of ground (a fading soil line and a soft shadow), so it never floats. */
.ground::after, .close-ground::after { content: ""; position: absolute; left: 50%; bottom: 0; width: min(18rem, 64vw); height: 2px; translate: -50% 0; border-radius: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgb(138 91 18 / 0), rgb(138 91 18 / .32) 35%, rgb(138 91 18 / .32) 65%, rgb(138 91 18 / 0)); }
.ground::before, .close-ground::before { content: ""; position: absolute; left: 50%; bottom: -.55rem; width: 8.5rem; height: 1.1rem; translate: -50% 0; pointer-events: none;
  background: radial-gradient(closest-side, rgb(138 91 18 / .2), rgb(138 91 18 / 0)); }
.hero h1 .tagline { display: block; max-width: 31rem; letter-spacing: normal; text-wrap: pretty; }

/* Sprout bloom on scroll (approved). Static open flower where scroll timelines are not supported. */
.bloom { position: absolute; left: 47.5%; top: 36%; width: 62%; translate: -50% -100%; overflow: visible; }
.bloom .stem { fill: none; stroke: var(--leaf); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 80; }
.bloom .petal { fill: var(--honey); transform-origin: 0 0; }
.bloom .core { fill: var(--honey-deep); transform-origin: 0 0; }
@supports (animation-timeline: scroll()) {
  .motion .bloom .stem { animation: bloom-stem linear both; animation-timeline: scroll(root); animation-range: 0px 140px; }
  .motion .bloom .petal { animation: bloom-open linear both; animation-timeline: scroll(root); }
  .motion .bloom g:nth-of-type(1) .petal { animation-range: 110px 260px; }
  .motion .bloom g:nth-of-type(2) .petal { animation-range: 140px 290px; }
  .motion .bloom g:nth-of-type(3) .petal { animation-range: 170px 320px; }
  .motion .bloom g:nth-of-type(4) .petal { animation-range: 200px 350px; }
  .motion .bloom g:nth-of-type(5) .petal { animation-range: 230px 380px; }
  .motion .bloom .core { animation: bloom-open linear both; animation-timeline: scroll(root); animation-range: 260px 400px; }
  @keyframes bloom-stem { from { stroke-dashoffset: 80; } to { stroke-dashoffset: 0; } }
  @keyframes bloom-open { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
}

/* Sections */
.offers { padding-block: var(--section) calc(var(--section) * .8); }
.offers-grid { display: grid; gap: 3.5rem; }
@media (min-width: 56em) { .offers-grid { grid-template-columns: 1fr 1fr; gap: 0; } .offer:first-child { padding-right: clamp(2.5rem, 5vw, 5rem); } .offer + .offer { padding-left: clamp(2.5rem, 5vw, 5rem); border-left: 1px solid var(--ink-faint); } }
.offer { display: grid; gap: 1.2rem; align-content: start; }
.offer h2 { font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem); line-height: 1.08; }
.lead { color: var(--ink-soft); }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.checks li { position: relative; padding-left: 1.6rem; }
.checks li::before { content: ""; position: absolute; left: 0; top: .55em; width: .62rem; height: .62rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--honey), var(--honey-deep)); }
.offer .btn { justify-self: start; margin-top: .5rem; }

.how { background: var(--bone); padding-block: var(--section); }
.how h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
.routes { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
@media (min-width: 56em) { .routes { grid-template-columns: 1fr 1fr; } }
.route { background: var(--paper); border-radius: var(--r-lg); padding: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); box-shadow: 0 1px 0 rgb(21 36 31 / .04), 0 24px 48px -32px rgb(21 36 31 / .25); }
.route h3 { font-size: 1.25rem; margin-bottom: 1.4rem; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 1.1rem; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 2.4rem 1fr; align-items: baseline; }
.steps li::before { content: counter(s); font: 500 1.05rem var(--display); color: var(--honey-deep); }

.why { padding-block: var(--section); }
.why-grid { display: grid; gap: 2.5rem; }
@media (min-width: 56em) { .why-grid { grid-template-columns: .85fr 1.15fr; gap: clamp(3rem, 6vw, 7rem); align-items: start; } }
.why h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
.names { margin-top: 1.25rem; display: grid; font: 500 clamp(2.4rem, 1.6rem + 3vw, 4rem)/1.02 var(--display); letter-spacing: -.035em; }
.names span:last-child { color: var(--honey-deep); }
.why-text { font-size: clamp(1.125rem, 1rem + .45vw, 1.375rem); line-height: 1.7; color: var(--ink-soft); max-width: 38rem; }

.close { padding-block: 0 var(--section); }
.close-box { display: grid; justify-items: center; text-align: center; gap: 1.75rem; padding-top: var(--section); border-top: 1px solid var(--ink-faint); }
.close-line { font: 500 clamp(2rem, 1.4rem + 2.4vw, 3.4rem)/1.05 var(--display); letter-spacing: -.035em; }
.close .actions { justify-content: center; }

.site-footer { border-top: 1px solid var(--ink-faint); padding-block: 2rem 5.5rem; font-size: .9375rem; color: var(--ink-soft); }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem; }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.footer-row a { text-decoration: none; }
.footer-row a:hover { text-decoration: underline; }
.copy { margin-left: auto; }

/* ===== Ideas for the page below the hero (preview: switched on and off by page/variants.js) =====
   Each idea is a body class. Lite tier (.tier-lite on html): fewer moving parts, same look. */
.lower { position: relative; }
.why, .close { position: relative; isolation: isolate; }
canvas.pollen { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; opacity: 0; transition: opacity 1.2s var(--ease); }
canvas.pollen.on { opacity: 1; }

/* A. The light continues: the hero's light flows down the whole page with no seams (page/ambient.js).
   The hero fades out at its bottom (no line, no fade to plain paper); a honey glow runs behind every section,
   starting under that fade; pollen drifts through the whole page. */
body.v-a .hero::after { display: none; }
body.v-a .hero-bg, body.v-a .hero canvas.field, body.v-a .hero canvas.pollen { -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.ambient { display: none; position: absolute; left: 0; right: 0; top: -50vh; bottom: 0; z-index: -1; overflow: hidden; pointer-events: none; }
/* A continuous wash (the tile repeats with no edges: each glow fades out inside its tile), plus a few larger soft glows.
   Kept still: drifting them cost about 5% of the main thread on desktop; the drifting lights give the motion. */
body.v-a .ambient { display: block;
  background:
    radial-gradient(48% 22% at 80% 25%, rgb(233 180 76 / .2), rgb(233 180 76 / 0)),
    radial-gradient(48% 22% at 20% 75%, rgb(244 214 150 / .42), rgb(244 214 150 / 0));
  background-size: 100% max(60rem, 120vh); }
.ambient i { position: absolute; width: max(min(70rem, 130vw), 34rem); aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; }
.ambient i:nth-child(1) { left: 84%; top: 6%; background: radial-gradient(closest-side, rgb(233 180 76 / .24), rgb(233 180 76 / 0)); }
.ambient i:nth-child(2) { left: 12%; top: 34%; background: radial-gradient(closest-side, rgb(244 214 150 / .3), rgb(244 214 150 / 0)); }
.ambient i:nth-child(3) { left: 88%; top: 62%; background: radial-gradient(closest-side, rgb(233 180 76 / .16), rgb(233 180 76 / 0)); }
.ambient i:nth-child(4) { left: 24%; top: 90%; background: radial-gradient(closest-side, rgb(244 214 150 / .3), rgb(244 214 150 / 0)); }
body.v-a .how { background: none; }
body.v-a .close-box { border-top: 0; }
.drift { position: fixed; top: 0; left: 0; right: 0; height: 100lvh; z-index: -1; pointer-events: none; }

/* B. Glass cards: frosted cards with a soft lift; a honey glow follows the mouse (page/glow.js) */
body.v-b .offers-grid { gap: 1.25rem; }
body.v-b :is(.offer, .route, .perk, .role) {
  position: relative; isolation: isolate; border: 0;
  padding: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgb(255 255 255 / .82), rgb(255 255 255 / .55));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .95), 0 0 0 1px rgb(21 36 31 / .05), 0 28px 44px -32px rgb(21 36 31 / .3);
  transition: translate .5s var(--ease), box-shadow .5s var(--ease), opacity .9s var(--ease), transform .9s var(--ease);
}
body.v-b :is(.offer, .route, .perk, .role)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity .45s var(--ease);
  background: radial-gradient(24rem circle at var(--mx, 50%) var(--my, 0%), rgb(233 180 76 / .22), rgb(233 180 76 / 0) 65%);
}
@media (hover: hover) {
  body.v-b :is(.offer, .route, .perk, .role):hover { translate: 0 -4px; box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px rgb(21 36 31 / .06), 0 44px 70px -38px rgb(21 36 31 / .36); }
  body.v-b :is(.offer, .route, .perk, .role):hover::before { opacity: 1; }
}
.tier-lite body.v-b :is(.offer, .route, .perk, .role)::before { display: none; }

/* C. Steps light up: a honey line fills through the numbers as you scroll (page/steps.js) */
body.v-c .steps { position: relative; gap: 1.5rem; }
body.v-c .steps li { position: relative; grid-template-columns: 3rem 1fr; align-items: start; }
body.v-c .steps li::before {
  position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font: 500 .95rem/1 var(--display); color: var(--ink-soft); background: var(--paper); box-shadow: inset 0 0 0 1.5px rgb(21 36 31 / .16);
  transition: background-color .5s var(--ease), color .5s var(--ease);
}
/* The glow is a soft disc that fades in (animating a blurred shadow on several numbers at once cost slow frames) */
body.v-c .steps li::after { content: ""; position: absolute; left: -9px; top: -9px; width: 48px; height: 48px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease); will-change: opacity;
  background: radial-gradient(closest-side, rgb(233 180 76 / .6), rgb(233 180 76 / .18) 60%, rgb(233 180 76 / 0)); }
body.v-c .steps li.lit::after { opacity: 1; }
body.v-c .steps li.lit::before { background: var(--honey); color: var(--ink); box-shadow: none; }
body.v-c .steps::before, body.v-c .steps::after { content: ""; position: absolute; left: 14px; top: var(--l-top, 15px); width: 2px; height: var(--l-len, 0px); border-radius: 2px; }
body.v-c .steps::before { background: rgb(21 36 31 / .1); }
body.v-c .steps::after { background: linear-gradient(var(--honey), var(--honey-deep)); transform-origin: top; transform: scaleY(var(--p, 0)); will-change: transform; }
/* The moving line and the glows sit on their own small layers: updating them never repaints the cards and their soft shadows */
.tier-lite body.v-c .steps::after { transition: transform .7s var(--ease); }

/* D. Dark story band: "Why Boecia" on deep ink with glowing pollen (page/story.js) */
body.v-d .why { overflow: hidden; background: var(--ink); color: var(--cream); }
body.v-d .why::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(55% 75% at 88% 15%, rgb(233 180 76 / .16), rgb(233 180 76 / 0) 70%), radial-gradient(45% 65% at 5% 95%, rgb(233 180 76 / .1), rgb(233 180 76 / 0) 70%); }
body.v-d .why .names span:last-child { color: var(--honey); }
body.v-d .why-text { color: rgb(244 238 223 / .8); }
body.v-d .close-box { border-top: 0; }

/* E. The ending blooms: the sprout above the last line opens into the flower as you scroll, like the hero's
   (CSS scroll timeline). Without scroll timelines, or under reduced motion, the flower shows open.
   Ranges end early (30% of the pass) so it fully opens even on tall screens near the end of the page. */
.close-ground { display: none; position: relative; width: clamp(5rem, 4rem + 3vw, 7rem); aspect-ratio: 110 / 106; margin-bottom: .5rem; }
body.v-e .close-ground { display: block; view-timeline: --close-bloom block; }
.close-ground .bloom .stem, .close-ground .bloom .petal, .close-ground .bloom .core { animation: none; }
@supports (animation-timeline: view()) {
  .motion body.v-e .close-ground .bloom .stem { animation: bloom-stem linear both; animation-timeline: --close-bloom; animation-range: cover 0% cover 12%; }
  .motion body.v-e .close-ground .bloom .petal, .motion body.v-e .close-ground .bloom .core { animation: bloom-open linear both; animation-timeline: --close-bloom; }
  .motion body.v-e .close-ground .bloom g:nth-of-type(1) .petal { animation-range: cover 10% cover 20%; }
  .motion body.v-e .close-ground .bloom g:nth-of-type(2) .petal { animation-range: cover 12% cover 22%; }
  .motion body.v-e .close-ground .bloom g:nth-of-type(3) .petal { animation-range: cover 14% cover 24%; }
  .motion body.v-e .close-ground .bloom g:nth-of-type(4) .petal { animation-range: cover 16% cover 26%; }
  .motion body.v-e .close-ground .bloom g:nth-of-type(5) .petal { animation-range: cover 18% cover 28%; }
  .motion body.v-e .close-ground .bloom .core { animation-range: cover 22% cover 30%; }
}

/* F. The match, after Valentin's reference: illustrated profile avatars on rings around the Boecia logo,
   a role label on top; for each role a few profiles light up, get a check badge and dashed lines flow
   to the logo. The inner ring (the vetted shortlist) is always badged. (page/match.js) */
.match { display: none; padding-block: calc(var(--section) * .5) var(--section); }
body.v-f .match { display: block; }
.match-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 56em) { .match-grid { grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 5rem); } }
.eyebrow { font: 600 .9375rem/1.2 var(--body); color: var(--honey-deep); }
.match h2 { margin-top: .75rem; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1.06; }
.match .lead { margin-top: 1rem; }
.match-viz { position: relative; width: min(100%, 40rem); aspect-ratio: 1; justify-self: center; }
.match-viz::after { content: ""; position: absolute; left: 50%; top: 50%; width: 52%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgb(233 180 76 / .3), rgb(244 214 150 / .14) 60%, rgb(244 214 150 / 0)); }
.match-spin, .match-net { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.match-spin canvas { width: 100%; height: 100%; }
.motion.tier-full body.v-f .match-spin { animation: match-turn 240s linear infinite paused; }
.motion.tier-full body.v-f .match-viz.live .match-spin { animation-play-state: running; } /* only while on screen */
@keyframes match-turn { to { rotate: 360deg; } }
.match-core { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 18%; height: auto; border-radius: 50%;
  box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--ink-faint), 0 22px 44px -18px rgb(21 36 31 / .5); }
.match-chip { position: absolute; left: 50%; top: 3.5%; translate: -50% 0; display: inline-flex; align-items: center; gap: .6rem; padding: .5rem 1.1rem .5rem .5rem; border-radius: 999px; background: #fff; white-space: nowrap;
  font: 600 .9375rem/1 var(--body); box-shadow: inset 0 0 0 1px var(--ink-faint), 0 14px 32px -16px rgb(21 36 31 / .4); }
.match-chip i { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--bone); color: var(--honey-deep); font: 600 .75rem/1 var(--body); font-style: normal; }
.match-chip span { transition: opacity .35s var(--ease); }
.match-chip.swap span { opacity: 0; }

/* Pages for companies and for engineers (/companies/, /engineers/, /es/empresas/, /es/ingenieros/), 6 Oct 2026:
   the homepage's parts with a shorter hero, cards for what you get, roles, one route of steps, a dark band, questions. */
.hero-sub { min-height: min(88svh, 50rem); }
.hero-sub .eyebrow { margin-bottom: 1.1rem; }
.hero-sub h1 { font-size: clamp(2.5rem, 1.35rem + 4.1vw, 4.9rem); line-height: 1.04; max-width: 14ch; }
.hero-sub .intro { max-width: 34rem; margin-top: 1.25rem; }
.nav-bar nav a[aria-current="page"] { color: var(--ink); text-decoration: underline 2px var(--honey); text-underline-offset: .55em; }

.sec-title, .sec-head h2, .how-head h2, .faq h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1.06; }
.sec-head { display: grid; gap: 1rem; max-width: 46rem; }

.perks { padding-block: var(--section) calc(var(--section) * .55); }
.perk-grid, .role-grid { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 40em) { .perk-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 68em) { .perk-grid { grid-template-columns: repeat(4, 1fr); } }
.perk { display: grid; align-content: start; gap: 1.5rem; }
body.v-b .perk { padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); }
.perk i { width: .8rem; height: .8rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--honey), var(--honey-deep)); box-shadow: 0 0 0 6px rgb(233 180 76 / .16); }
.perk p { font: 500 1.1875rem/1.35 var(--display); letter-spacing: -.015em; }

.sub .match { padding-block: calc(var(--section) * .45) calc(var(--section) * .6); }
.roles { padding-block: calc(var(--section) * .45) 0; }
.why h2 { line-height: 1.06; }
@media (min-width: 48em) { .role-grid { grid-template-columns: 1fr 1fr; } }
.role { display: grid; align-content: start; gap: .8rem; }
.role h3 { font-size: 1.375rem; }
.role p { color: var(--ink-soft); }
.more { justify-self: start; margin-top: .4rem; font-weight: 600; color: var(--honey-deep); text-decoration: none; }
.more:hover { text-decoration: underline; text-underline-offset: .2em; }
.who-grid, .how-grid, .faq-grid { display: grid; gap: 2.25rem; }
@media (min-width: 56em) { .who-grid, .how-grid, .faq-grid { grid-template-columns: .85fr 1.15fr; gap: clamp(3rem, 6vw, 7rem); align-items: start; } }
.who-list { display: grid; gap: 1.5rem; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.chips li { padding: .75rem 1.2rem; border-radius: 999px; font-weight: 600; background: rgb(255 255 255 / .72);
  box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px rgb(21 36 31 / .06), 0 14px 28px -22px rgb(21 36 31 / .4); }

.how-head { display: grid; gap: 1.75rem; justify-items: start; }

.band-list { display: grid; gap: 1.75rem; }
.band .checks { gap: .9rem; color: rgb(244 238 223 / .86); }
.band-note { color: rgb(244 238 223 / .72); }
.band-note a { color: var(--honey); text-underline-offset: .2em; }

.faq { padding-block: var(--section) 0; }
.qa { border-bottom: 1px solid var(--ink-faint); }
.qa:first-child { border-top: 1px solid var(--ink-faint); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.3rem; cursor: pointer; list-style: none;
  font: 500 1.1875rem/1.35 var(--display); letter-spacing: -.015em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; flex: none; width: 2rem; height: 2rem; border-radius: 50%; transition: rotate .35s var(--ease), background-color .25s;
  background: linear-gradient(var(--honey-deep) 0 0) center / 11px 1.5px no-repeat, linear-gradient(var(--honey-deep) 0 0) center / 1.5px 11px no-repeat, rgb(255 255 255 / .7);
  box-shadow: inset 0 0 0 1px var(--ink-faint); }
.qa[open] summary::after { rotate: 45deg; }
.qa summary:hover::after { background-color: #fff; }
.qa p { padding: 0 3.5rem 1.4rem 0; color: var(--ink-soft); }
.qa a { text-underline-offset: .2em; }
.close-sub { margin-top: -.75rem; color: var(--ink-soft); }

/* Inner pages (forms, guides, contact, privacy, 404), 6 Oct 2026: the homepage's light look. A short hero with the
   silk colours as a still background and rising pollen (js/home/page.js), then the content on paper. */
.page-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; padding-top: calc(72px + clamp(2.25rem, 1.25rem + 4vw, 4.5rem)); }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60% 80% at 88% 10%, rgb(233 180 76 / .45), rgb(233 180 76 / 0) 70%),
    radial-gradient(45% 65% at 68% 70%, rgb(244 214 150 / .5), rgb(244 214 150 / 0) 70%),
    radial-gradient(50% 70% at 35% 0%, rgb(220 228 218 / .7), rgb(220 228 218 / 0) 70%),
    var(--paper);
  -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background-image: var(--grain); background-size: 128px 128px; opacity: .35; mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(#000 50%, transparent); mask-image: linear-gradient(#000 50%, transparent); }
.page-hero-copy { display: grid; gap: 1.1rem; justify-items: start; }
.page-hero h1 { font-size: clamp(2.4rem, 1.3rem + 4.2vw, 4.6rem); line-height: 1.04; letter-spacing: -.04em; max-width: 16ch; }
.page-hero .intro { margin-top: 0; max-width: 36rem; }
.page-hero .intro a { color: var(--ink); font-weight: 600; text-decoration-color: var(--honey); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.page .ground { margin-top: clamp(1.75rem, 1rem + 3vw, 3.5rem); }
.form-area { padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) var(--section); }
.form-box { max-width: 46rem; padding: clamp(1.25rem, .6rem + 2.4vw, 2.75rem); border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgb(255 255 255 / .9), rgb(255 255 255 / .7));
  box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px rgb(21 36 31 / .05), 0 28px 44px -32px rgb(21 36 31 / .3); }
iframe.tally { display: block; width: 100%; min-height: 32rem; border: 0; }
.form-fallback { max-width: 46rem; margin-top: 1.25rem; font-size: .9375rem; color: var(--ink-soft); }
.form-fallback a { color: var(--ink); font-weight: 600; text-underline-offset: .2em; }
.prose { padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) var(--section); }
.prose > * { max-width: 46rem; }
.prose h2 { margin-top: 3rem; font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.25rem); line-height: 1.12; }
.prose h3 { margin-top: 1.75rem; font-size: 1.25rem; line-height: 1.3; letter-spacing: -.015em; }
.prose > :first-child { margin-top: 0; }
.prose p, .prose ul { margin-top: 1rem; color: var(--ink-soft); }
.prose > p:first-child { color: var(--ink); font-size: clamp(1.125rem, 1rem + .4vw, 1.3rem); }
.prose h3 + p { margin-top: .5rem; }
.prose ul { list-style: none; padding: 0; display: grid; gap: .6rem; }
.prose li { position: relative; padding-left: 1.6rem; }
.prose li::before { content: ""; position: absolute; left: 0; top: .6em; width: .55rem; height: .55rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--honey), var(--honey-deep)); }
.prose a { color: var(--ink); font-weight: 600; text-decoration-color: var(--honey); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.prose strong { color: var(--ink); }
.prose .btn-ink, .prose .btn-ink:hover { color: var(--paper); text-decoration: none; }
.guide-cta { margin-top: 3.5rem; display: grid; gap: 1.25rem; justify-items: start; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgb(255 255 255 / .9), rgb(255 255 255 / .6));
  box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px rgb(21 36 31 / .05), 0 28px 44px -32px rgb(21 36 31 / .3); }
.guide-cta p { margin: 0; color: var(--ink); font: 500 clamp(1.25rem, 1.1rem + .5vw, 1.5rem)/1.3 var(--display); letter-spacing: -.02em; }
.btn-honey { background: var(--honey); color: var(--ink); }
.btn-honey:hover { background: #F0C46A; }
.notfound { min-height: min(86svh, 46rem); }
.notfound-grid { display: grid; gap: 3rem; margin-block: auto; }
@media (min-width: 48em) { .notfound-grid { grid-template-columns: 1fr 1fr; } }
.notfound-col { display: grid; gap: 1rem; justify-items: start; align-content: start; }
.notfound h1, .notfound-title { font: 500 clamp(2rem, 1.4rem + 2.6vw, 3.5rem)/1.05 var(--display); letter-spacing: -.035em; }
.notfound .btn { margin-top: .5rem; }

/* Reveal on enter (ui.js). Hidden only when motion is on and the script has run. Low specificity on purpose,
   so the glass cards can add their own transitions. */
:where(.motion.ui-ready) [data-r] { transition: opacity .9s var(--ease), transform .9s var(--ease); }
:where(.motion.ui-ready) [data-hide] { opacity: 0; transform: translateY(18px); }
/* Buttons: a small squash on press */
.btn { transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s, scale .2s var(--ease); }
.btn:active { scale: .97; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }