/* Fluid Marketing, site styles. Every value comes from tokens.css.
   Design idea: the logo is a row of equal "hops" (arches). The site is built from them. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--fs-body)/1.55 var(--font-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.2em; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
.on-blue :focus-visible, .foot :focus-visible { outline-color: var(--on-blue); }

.skip { position: absolute; left: var(--gutter); top: -4rem; z-index: 50; padding: 0.6rem 1rem; background: var(--ink); color: var(--on-ink); border-radius: var(--radius); }
.skip:focus { top: 0.75rem; }
.wrap { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* Type */
.display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.005em; line-height: 0.98; }
h2.display { font-size: var(--fs-h2); }
.lead { font-size: var(--fs-lead); line-height: 1.4; max-width: 38ch; }
.dot { display: inline-block; position: relative; width: 0.15em; height: 0.15em; border-radius: 50%; background: var(--sun); margin-left: 0.04em; }
.dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--ink); opacity: 0; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1.4rem; border: 1.5px solid var(--ink); border-radius: var(--radius); background: transparent; color: var(--ink); font: 600 1rem/1.2 var(--font-body); text-decoration: none; cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.25s var(--ease-out); }
.btn:hover { transform: translateY(-2px); }
.btn--solid { background: var(--ink); color: var(--on-ink); }
.btn--solid:hover { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.btn--ghost:hover { background: var(--ink); color: var(--on-ink); }
.btn--small { padding: 0.55rem 1rem; font-size: 0.9375rem; }

/* Header: sticky on desktop; the wordmark fills with blue as you read (js/main.js sets --r, 0 to 1) */
@property --r { syntax: "<number>"; inherits: true; initial-value: 0; }
html { scroll-padding-top: 5.5rem; }
.site-head { position: sticky; top: 0; z-index: 20; background: color-mix(in oklch, var(--paper) 95%, transparent); transition: box-shadow 0.3s; }
.site-head.is-stuck { box-shadow: 0 1px 0 var(--line); }
.progress { position: fixed; z-index: 30; top: 0; left: 0; right: 0; height: 3px; background: var(--blue); transform-origin: left; transform: scaleX(var(--r, 0)); display: none; }
.wm__water { transform: translateY(calc(175px - var(--r, 0) * 185px)); }
.wm__wave path { fill: var(--blue); }
@media (max-width: 52rem) { .progress { display: block; } html { scroll-padding-top: 4.5rem; } }
.top { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 2rem; padding-block: 1.1rem; transition: padding 0.3s var(--ease-out); }
.site-head.is-stuck .top { padding-block: 0.7rem; }
.logo { display: block; height: clamp(2.3rem, 3.6vw, 3rem); width: auto; aspect-ratio: 402 / 160; color: var(--ink); }
.nav { display: flex; gap: clamp(1rem, 2.6vw, 2.25rem); }
.nav a { position: relative; text-decoration: none; font-weight: 500; padding-block: 0.25rem; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.4rem; height: 6px; background: var(--ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 6'%3E%3Cpath d='M0 3Q3.5 0 7 3T14 3' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x 0 50% / 14px 6px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 6'%3E%3Cpath d='M0 3Q3.5 0 7 3T14 3' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x 0 50% / 14px 6px; transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease-out); }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }
.top__end { display: flex; align-items: center; gap: 0.75rem; }
.lang { display: inline-flex; border: 1.5px solid var(--ink); border-radius: var(--radius); overflow: hidden; }
.lang button { padding: 0.45rem 0.7rem; background: transparent; color: var(--ink); border: 0; font: 600 0.8125rem/1 var(--font-body); letter-spacing: 0.08em; cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.menu-btn { display: none; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0; border: 1.5px solid var(--ink); border-radius: var(--radius); background: transparent; color: var(--ink); cursor: pointer; }
.menu-btn svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.menu-btn__close, .menu-btn[aria-expanded="true"] .menu-btn__open { display: none; }
.menu-btn[aria-expanded="true"] .menu-btn__close { display: inline; }
.menu-btn:hover { background: var(--ink); color: var(--on-ink); }
/* Once you scroll (and always on phones) the links fold into a menu button on the right. Without JS the links stay visible. */
.js .site-head.is-stuck .menu-btn { display: inline-grid; }
.js .site-head.is-stuck .nav { position: absolute; top: 100%; right: 0; z-index: 25; display: none; flex-direction: column; gap: 0.9rem; min-width: 14rem; padding: 1.25rem 1.5rem; background: var(--paper); border: 2px solid var(--ink); border-radius: 1.25rem; font-size: 1.125rem; }
.js .site-head.is-stuck.is-open .nav { display: flex; }
@media (max-width: 52rem) {
  .nav { order: 3; width: 100%; flex-wrap: wrap; gap: 0.3rem 1.1rem; font-size: 0.9375rem; border-top: 1px solid var(--line); padding-top: 0.6rem; }
  .nav a { white-space: nowrap; }
  .top__end .btn { display: none; }
  .js .menu-btn { display: inline-grid; }
  .js .nav { position: absolute; top: 100%; right: 0; z-index: 25; display: none; flex-direction: column; flex-wrap: nowrap; gap: 0.9rem; width: auto; min-width: 14rem; order: 0; padding: 1.25rem 1.5rem; background: var(--paper); border: 2px solid var(--ink); border-radius: 1.25rem; font-size: 1.125rem; }
  .js .site-head.is-open .nav { display: flex; }
}
@media (prefers-reduced-motion: no-preference) { .js .site-head.is-open .nav { animation: fade-up 0.45s var(--ease-out) both; } }

/* Hero: one calm first screen. Headline and one call to action left, five arches rising week by week right, a sun behind them */
.hero { border-bottom: 2px solid var(--ink); overflow: clip; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); align-items: end; gap: clamp(1rem, 3vw, 3rem); min-height: clamp(26rem, calc(100vh - 6rem), 60rem); min-height: clamp(26rem, calc(100svh - 6rem), 60rem); }
.hero__copy { display: grid; gap: clamp(1rem, 2vw, 1.6rem); align-self: center; padding-block: clamp(1rem, 3vw, 2.5rem); }
.hero h1 { font-size: var(--fs-h1); letter-spacing: 0; }
.line { display: block; clip-path: inset(0 -100vw 0 -100vw); padding-bottom: 0.1em; margin-bottom: -0.1em; }
.line > span { display: block; white-space: nowrap; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero__art { position: relative; align-self: end; }
.rise { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: clamp(0.5rem, 1.4vw, 1.1rem); aspect-ratio: 1 / 0.9; }
.rise i { position: relative; display: block; height: calc(var(--h) * 1%); border-radius: 999px 999px 0 0; background: color-mix(in oklch, var(--blue) 14%, var(--paper)); overflow: hidden; }
.rise i::after { content: ""; position: absolute; inset: 0; background: var(--blue); }
.hero__sun { position: absolute; z-index: 0; left: 61%; top: 0; width: 17%; aspect-ratio: 1; border-radius: 50%; background: var(--sun); }
@media (max-width: 52rem) {
  .hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .hero__copy { align-self: start; padding-bottom: 1.5rem; }
  .hero__art { margin-top: 1rem; }
  .rise { aspect-ratio: 1 / 0.5; }
  .hero__sun { left: 61%; width: 11%; }
}

/* Sections */
.section { padding-block: var(--section); }
.head { display: grid; gap: 1.25rem; margin-bottom: var(--head-gap); max-width: 52rem; }

/* The Fluid Loop: five hops, each one higher than the last */
.loop { padding-block: 0; }
.loop__pin { padding-block: var(--section); }
@media (min-width: 52.01rem) and (min-height: 46rem) {
  /* The section stays pinned while the water pours, so you always see all four arches. Scrolling sets the pace.
     The heading sits in the empty corner above the two low arches, so the whole thing is one stair-shaped composition. */
  .loop { height: calc(100vh + 170vh); height: calc(100svh + 170svh); }
  .loop__pin { position: sticky; top: 5rem; min-height: calc(100vh - 5rem); min-height: calc(100svh - 5rem); display: grid; align-content: center; padding-block: 1rem; }   /* top: 5rem = below the sticky header */
  .loop__stage { position: relative; margin-inline: auto; width: min(100%, max(44rem, calc((100svh - 13.5rem) * 2.3))); }
  .loop .head { position: absolute; top: 0; left: 0; z-index: 1; margin: 0; max-width: calc(60% - 1rem); }
  .loop .head h2 { font-size: clamp(2rem, 0.9rem + 3.2vw, 4.25rem); }
  .loop .hop p { font-size: 0.9375rem; line-height: 1.4; }
}
.hops { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(0.75rem, 2vw, 1.75rem); counter-reset: hop; align-items: start; }
.hop { display: grid; align-content: start; gap: 1.25rem; --k: calc(50 + var(--n) * 24); }
.hop__fig { container-type: inline-size; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 100 / 216; }
.hop__arch { position: relative; width: 100%; height: calc(var(--k) * 1cqw); border: 31cqw solid var(--ink); border-bottom: 0; border-radius: 999px 999px 0 0; display: grid; place-items: end center; transition: border-color 0.3s; }
.hop__inner { display: grid; justify-items: center; gap: 2.5cqw; }
.hop__icon { width: 18cqw; height: 18cqw; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; color: var(--ink); transition: color 0.3s; }
.hop__num { font: 700 18cqw/1 var(--font-display); letter-spacing: -0.04em; margin-bottom: 0; color: var(--ink); transition: color 0.3s; }
.hop:nth-child(5) .hop__arch { border-color: var(--blue); }
.hop:nth-child(5) .hop__num, .hop:nth-child(5) .hop__icon { color: var(--blue); }
.hop:nth-child(5) .hop__fig::before { content: ""; align-self: center; width: 38cqw; aspect-ratio: 1; border-radius: 50%; background: var(--sun); margin-bottom: 8cqw; }
.hop__arch::after { content: ""; position: absolute; inset: -31cqw -31cqw 0; border: 31cqw solid var(--blue); border-bottom: 0; border-radius: 999px 999px 0 0; clip-path: inset(100% 0 0 0); pointer-events: none; }
.hop:hover .hop__arch, .hop:focus-within .hop__arch { border-color: var(--blue); }
.hop:hover .hop__num, .hop:focus-within .hop__num, .hop:hover .hop__icon, .hop:focus-within .hop__icon { color: var(--blue); }
.hop h3 { font: 700 1.5rem/1.1 var(--font-display); letter-spacing: -0.02em; border-top: 2px solid var(--ink); padding-top: 1rem; }
.hop p { color: var(--ink-2); max-width: 28ch; margin-top: -0.6rem; }
@media (max-width: 52rem) {
  .hops { grid-template-columns: 1fr; gap: 2rem; align-items: stretch; }
  .hop { grid-template-columns: 5.5rem 1fr; align-items: end; column-gap: 1.5rem; row-gap: 0.4rem; }
  .hop__fig { grid-row: 1 / span 2; aspect-ratio: auto; }
  .hop h3 { border-top: 0; padding-top: 0; align-self: end; }
  .hop p { margin-top: 0; align-self: start; }
}

/* Results: two cases, each one block with the name, the number and its sentence together, the story and the client quote */
.proof { border-top: 2px solid var(--ink); }
.case { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 2fr); gap: 1.25rem clamp(1.5rem, 5vw, 5rem); padding-block: clamp(1.75rem, 4vw, 3rem); border-bottom: 1px solid var(--line); }
.case__who { font: 700 clamp(2.25rem, 1.3rem + 3vw, 4rem)/1 var(--font-display); letter-spacing: -0.02em; }
.case__role { display: block; margin-top: 0.5rem; font-size: 1.0625rem; color: var(--ink-2); }
.case__body { display: grid; gap: 1.5rem; align-content: start; }
.case__kpi { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
.case__cap { max-width: 30ch; padding-left: 1.5rem; border-left: 2px solid var(--blue); font-size: var(--fs-lead); line-height: 1.3; font-weight: 500; }
.case__text { display: grid; gap: 0.6rem; max-width: 62ch; color: var(--ink-2); }
.case__quote { margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--line); display: grid; gap: 0.9rem; max-width: 62ch; }
.case__quote blockquote { font: 600 clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem)/1.2 var(--font-display); letter-spacing: -0.01em; margin: 0; }
.case__quote figcaption { font-size: 0.9375rem; color: var(--ink-2); }
.quote__marks { display: flex; gap: 0.5rem; }
.quote__marks i { width: 1.1rem; height: 1.6rem; background: var(--sun); border-radius: 999px 999px 0 0; }
.proof__num { font: 700 clamp(2.8rem, 1.6rem + 4.2vw, 5.5rem)/1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.proof__num--word { font-size: clamp(2rem, 1.2rem + 2.8vw, 3.6rem); letter-spacing: -0.01em; line-height: 1.05; }
.note { margin-top: 1.5rem; color: var(--ink-2); max-width: 52ch; }
@media (max-width: 52rem) { .case { grid-template-columns: 1fr; } }

/* About: two founders in arch frames, offset against each other */
.about { background: var(--paper-2); }
.about__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.about__text { display: grid; gap: 1.5rem; }
.about__text .head { margin-bottom: 0; }
.about__stance { font-weight: 600; max-width: 36ch; }
.founders { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2.5rem); }
.founder:nth-child(2) { margin-top: clamp(2rem, 6vw, 5rem); }
.founder__photo { transform: translate3d(var(--bx, 0px), var(--by, 0px), 0) rotate(var(--br, 0deg)); will-change: transform; aspect-ratio: 3 / 4; border-radius: 999px 999px 0 0; border: 1.5px dashed var(--ink-2); display: grid; place-items: end center; padding: 1.25rem; text-align: center; color: var(--ink-2); font-size: 0.9375rem; background: var(--paper); }
.founder figcaption { margin-top: 1rem; display: grid; gap: 0.15rem; }
.founder figcaption b { font: 700 clamp(1.4rem, 1.1rem + 0.9vw, 1.75rem)/1.1 var(--font-display); letter-spacing: -0.02em; }
.founder figcaption span { color: var(--ink-2); font-size: 0.9375rem; }
.founder figcaption .founder__role { justify-self: start; margin-block: 0.5rem 0.3rem; padding: 0.15rem 0.6rem 0.2rem; background: var(--sun); color: var(--ink); border-radius: 999px; font: 600 0.875rem/1.2 var(--font-body); }
.founder__degree { font-size: 0.8125rem; font-style: normal; color: var(--ink-2); }
@media (max-width: 52rem) { .about__grid { grid-template-columns: 1fr; } }

/* Pricing: one big statement on Fluid blue */
.pricing { position: relative; background: var(--blue); color: var(--on-blue); }
.pricing::before { content: ""; position: absolute; left: 0; right: 0; top: -2.4rem; height: 2.5rem; background: var(--blue); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22Q100 4 200 22T400 22V40Z'/%3E%3C/svg%3E") repeat-x 0 100% / 400px 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22Q100 4 200 22T400 22V40Z'/%3E%3C/svg%3E") repeat-x 0 100% / 400px 100%; }
.pricing .wrap { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.pricing__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(1rem, 4vw, 4rem); align-items: end; }
.pricing__big { font: 700 var(--fs-h2)/0.98 var(--font-display); letter-spacing: -0.01em; max-width: 20ch; }
.pricing__lead { font-size: 1.125rem; line-height: 1.4; max-width: 38ch; }
/* Indicative packages: two arch-topped windows, deliberately not identical cards in a row of boxes */
.packages { display: grid; gap: 1.25rem; }
.packages__extra { max-width: 62ch; font-size: 1rem; line-height: 1.4; }
.packages__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); align-items: stretch; }
.pkg { display: grid; align-content: start; gap: 0.75rem; padding: clamp(2.5rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem) clamp(1.75rem, 3vw, 2.5rem); border: 2px solid var(--on-blue); border-radius: 10rem 10rem 2rem 2rem; }
.pkg h3 { text-align: center; font: 700 clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem)/1 var(--font-display); letter-spacing: -0.02em; }
.pkg__tag { font-size: 1rem; line-height: 1.35; opacity: 0.9; max-width: 28ch; margin-inline: auto; text-align: center; min-height: 2.7em; }
.pkg__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; margin-block: 0.5rem; padding-block: 0.9rem; border-block: 1px solid color-mix(in oklch, var(--on-blue) 45%, transparent); font-size: 0.9375rem; }
.pkg__price b { font: 700 clamp(1.6rem, 1.1rem + 1.2vw, 2.2rem)/1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pkg__list { display: grid; gap: 0.15rem; font-size: 1rem; line-height: 1.3; }
.pkg__list li { display: flex; align-items: baseline; gap: 0.7rem; padding-block: 0.3rem; }
.pkg__list li::before { content: ""; flex: none; width: 0.7em; height: 0.9em; border: 2px solid currentColor; border-bottom: 0; border-radius: 999px 999px 0 0; transform: translateY(0.1em); }
@media (max-width: 52rem) { .packages__grid { grid-template-columns: 1fr; } .pkg { padding-top: 3rem; border-radius: 7rem 7rem 2rem 2rem; } }
@media (max-width: 52rem) { .pricing__head { grid-template-columns: 1fr; } }
/* Contact */
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.contact .head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.25rem clamp(1.5rem, 5vw, 5rem); align-items: end; max-width: none; }
.contact__side { display: grid; gap: 0.75rem; max-width: 38ch; }
.contact__side .lead { font-size: 1.125rem; line-height: 1.4; }
.contact__alt { font-size: 0.9375rem; }
.contact__alt a { font-weight: 600; }
.form__mail { color: var(--ink-2); font-size: 0.9375rem; }
.form__mail a { color: var(--ink); font-weight: 600; }
@media (max-width: 52rem) { .contact .head { grid-template-columns: 1fr; } }

/* Footer */
.foot { position: relative; background: var(--ink); color: var(--on-ink); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 4rem; align-items: end; }
.foot__logo { --tag-erode: var(--ink); --tag-w: 1.9; height: clamp(7rem, 12vw, 10rem); width: auto; aspect-ratio: 402 / 248; color: var(--on-ink); }
.foot nav { display: grid; gap: 0.5rem; font-weight: 500; }
.foot nav a { text-decoration: none; }
.foot nav a:hover, .foot__base a:hover { text-decoration: underline; }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: clamp(2rem, 5vw, 4rem); padding-top: 1.25rem; border-top: 1px solid color-mix(in oklch, var(--on-ink) 25%, transparent); color: color-mix(in oklch, var(--on-ink) 70%, var(--ink)); font-size: 0.875rem; }
.foot__legal { margin-top: 0.75rem; font-size: 0.8125rem; color: color-mix(in oklch, var(--on-ink) 70%, transparent); }
@media (max-width: 40rem) { .foot__grid { grid-template-columns: 1fr; } }

/* Motion: one orchestrated entrance, then calm. Content stays visible without JS or with reduced motion. */
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fill-rise { from { transform: translateY(101%); } to { transform: none; } }
@keyframes drop { from { transform: translateY(-1.5em); opacity: 0; } 14% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes ripple { from { inset: 0; opacity: 0.55; } to { inset: -0.3em -1.1em; opacity: 0; } }
@property --wx { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes wave-run { to { --wx: -40cqw; } }
@keyframes shore { to { -webkit-mask-position: -400px 100%; mask-position: -400px 100%; } }
@keyframes sunrise { from { opacity: 0; transform: translateY(45%); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  .top, .hero__copy > :not(h1) { animation: fade-up 0.9s var(--ease-out) both; }
  .line > span { animation: rise 1.1s var(--ease-out) both; animation-delay: calc(0.12s + var(--i, 0) * 0.1s); }
  .hero__copy > .hero__lead { animation-delay: 0.55s; }
  .hero__copy > .hero__cta { animation-delay: 0.65s; }
  .rise i::after { animation: fill-rise 2.2s cubic-bezier(0.35, 0.05, 0.2, 1) calc(0.45s + var(--i) * 0.28s) both; }
  .hero .dot { animation: drop 0.7s cubic-bezier(0.5, 0, 0.9, 0.55) 1.15s both; }
  .hero .dot::after { animation: ripple 1.7s var(--ease-out) 1.8s forwards; }
  .pricing::before { animation: shore 9s linear infinite; }
  .hero__sun { animation: sunrise 1.6s var(--ease-out) 0.9s both; }

  .js .reveal { opacity: 0; transform: translateY(22px); }
  .js .reveal.in { opacity: 1; transform: none; transition: opacity 0.9s var(--ease-out), transform 1s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
  .js .hop__arch { clip-path: inset(100% 0 0 0); }
  .js .hop.in .hop__arch { clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--ease-out), border-color 0.3s; transition-delay: calc(var(--i, 0) * 120ms), 0s; }
  /* Scroll-driven liquid: scrolling through the Fluid Loop pours blue into the five arches, 1 to 4, then the sun rises.
     js/main.js sets --p (0 to 1) on .hops. Each arch gets its own share of that. */
  .js .hops.is-scrub .hop__arch::after {
    clip-path: none;
    --H: calc(var(--k) * 1cqw);
    --Y: calc(var(--H) - var(--f) * (var(--H) + 8cqw));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 8' preserveAspectRatio='none'%3E%3Cpath d='M0 8V4Q5 0 10 4T20 4T30 4T40 4V8Z'/%3E%3C/svg%3E") var(--wx) var(--Y) / 40cqw 8cqw repeat-x, linear-gradient(#000, #000) 0 calc(var(--Y) + 8cqw - 1px) / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 8' preserveAspectRatio='none'%3E%3Cpath d='M0 8V4Q5 0 10 4T20 4T30 4T40 4V8Z'/%3E%3C/svg%3E") var(--wx) var(--Y) / 40cqw 8cqw repeat-x, linear-gradient(#000, #000) 0 calc(var(--Y) + 8cqw - 1px) / 100% 100% no-repeat;
    animation: wave-run 3.5s linear infinite;
  }
  .js .hops.is-scrub .hop { --f: clamp(0, calc(var(--p, 0) * 5 - (var(--n) - 1)), 1); --e: clamp(0, calc((var(--f) - 0.96) * 25), 1); }
  .js .hops.is-scrub .hop__arch { border-color: color-mix(in oklch, var(--ink) calc((1 - var(--e)) * 100%), var(--blue)); }   /* base ring turns blue only once full: no ink fringe at the edges */
  .js .hops.is-scrub .hop__num, .js .hops.is-scrub .hop__icon { color: color-mix(in oklch, var(--ink) calc((1 - var(--e)) * 100%), var(--blue)); }
  .js .hops.is-scrub .hop:nth-child(5) .hop__fig::before { --s: clamp(0, calc((var(--p, 0) - 0.78) / 0.22), 1); opacity: var(--s); transform: translateY(calc((1 - var(--s)) * 70%)); }
}

/* Intro (first visit per session): three equal hops rise as arch-shaped windows in a blue screen, then open up and flood the page.
   html.has-intro / has-intro-out are state classes on <html>; .intro is the overlay element. */
.intro { display: none; position: fixed; inset: 0; z-index: 100; }
html.has-intro, html.has-intro body { overflow: hidden; }
html.has-intro .intro, html.has-intro-out .intro { display: block; }
.intro svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.intro .hole { transform: translateY(34px); animation: hole-hop 1.05s var(--ease-out) calc(0.15s + var(--i) * 0.2s) forwards, hole-flood 1.4s cubic-bezier(0.7, 0, 0.3, 1) calc(1.5s + var(--i) * 0.07s) forwards; }
.intro.is-skip { opacity: 0; transition: opacity 0.3s; }
/* the hero entrance waits until the windows start to open */
html.has-intro .top, html.has-intro .hero__copy > *, html.has-intro .line > span, html.has-intro .rise i::after, html.has-intro .hero__sun, html.has-intro .hero .dot, html.has-intro .hero .dot::after { animation-play-state: paused; }

/* Language switch: a blue wave washes across the screen (js/main.js drives it) */
.wash { max-width: none; position: fixed; z-index: 90; top: 0; left: 0; width: 300vw; height: 100vh; fill: var(--blue); transform: translateX(-300vw); pointer-events: none; will-change: transform; }

@keyframes wm-drift { to { transform: translateX(-60px); } }

@keyframes nav-wave { to { -webkit-mask-position: 14px 50%; mask-position: 14px 50%; } }
@media (prefers-reduced-motion: no-preference) {
  .nav a:hover::after, .nav a:focus-visible::after { animation: nav-wave 0.9s linear infinite; }
  .wm__wave { animation: wm-drift 3s linear infinite; }
}

@keyframes hole-hop { to { transform: none; } }
@keyframes hole-flood { to { transform: scale(40); } }

/* Fluid buttons: on hover a liquid fills the button from below, with a moving wave edge */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before { content: ""; position: absolute; z-index: -1; inset: -10px 0 0 0; background: var(--blue); transform: translateY(110%); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10V5Q10 0 20 5T40 5V10Z'/%3E%3C/svg%3E") 0 0 / 40px 10px repeat-x, linear-gradient(#000, #000) 0 9px / 100% calc(100% - 9px) no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10V5Q10 0 20 5T40 5V10Z'/%3E%3C/svg%3E") 0 0 / 40px 10px repeat-x, linear-gradient(#000, #000) 0 9px / 100% calc(100% - 9px) no-repeat; }
.btn--ghost::before { background: var(--ink); }
@keyframes btn-wave { to { -webkit-mask-position: -40px 0, 0 9px; mask-position: -40px 0, 0 9px; } }

/* Footer: a moving shore above it, wavy underline on links */
.foot::before { content: ""; position: absolute; left: 0; right: 0; top: -2.4rem; height: 2.5rem; background: var(--ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22Q100 4 200 22T400 22V40Z'/%3E%3C/svg%3E") repeat-x 0 100% / 400px 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22Q100 4 200 22T400 22V40Z'/%3E%3C/svg%3E") repeat-x 0 100% / 400px 100%; }
.foot nav a, .foot__base a { position: relative; }
.foot nav a:hover, .foot__base a:hover { text-decoration: none; }
.foot nav a::after, .foot__base a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.3rem; height: 6px; background: var(--on-ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 6'%3E%3Cpath d='M0 3Q3.5 0 7 3T14 3' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x 0 50% / 14px 6px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 6'%3E%3Cpath d='M0 3Q3.5 0 7 3T14 3' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x 0 50% / 14px 6px; transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease-out); }
.foot nav a:hover::after, .foot nav a:focus-visible::after, .foot__base a:hover::after, .foot__base a:focus-visible::after { transform: scaleX(1); }
@keyframes foot-rise { from { transform: translateY(0.6rem); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: color 0.35s, border-color 0.35s, transform 0.25s var(--ease-out); }
  .btn--solid:hover { background: var(--ink); }
  .btn--solid:hover, .btn--solid:focus-visible { color: var(--on-blue); border-color: var(--blue); }
  .btn--ghost:hover { background: transparent; color: var(--on-ink); }
  .btn::before { transition: transform 0.75s var(--ease-out); }
  .btn:hover::before, .btn:focus-visible::before { transform: none; animation: btn-wave 1.1s linear infinite; }
  .foot::before { animation: shore 9s linear infinite; }
  .foot nav a:hover::after, .foot nav a:focus-visible::after, .foot__base a:hover::after, .foot__base a:focus-visible::after { animation: nav-wave 0.9s linear infinite; }
  .foot__logo { transition: transform 0.9s var(--ease-out); }
  .foot__logo:hover { transform: translateY(-0.35rem); }
}

/* Booking calendar: one clean frame, full width so Calendly shows its two-pane layout */
.cal__frame { border: 2px solid var(--ink); border-radius: 1.25rem; overflow: hidden; background: var(--paper); }
.cal__embed { display: block; width: 100%; height: 720px; border: 0; }
@media (max-width: 52rem) { .cal__embed { height: 800px; } }

/* Ripples (js/main.js): thin rings of water that run out from a tap, or the finger while scrolling (never the mouse) */
.ripples { position: fixed; inset: 0; z-index: 80; pointer-events: none; overflow: hidden; }
.ripple { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%; border: 2px solid var(--blue); box-shadow: 0 0 0 1.5px var(--paper); opacity: 0; transform: translate(var(--x), var(--y)) scale(0.08); animation: ripple-out 1.7s var(--ease-out) both; }
.ripple--light { border-color: var(--on-blue); box-shadow: none; }
.ripple--soft { border-width: 1.5px; }
@keyframes ripple-out { 0% { opacity: 0.7; transform: translate(var(--x), var(--y)) scale(0.08); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1); } }

/* The pool: every skill is a block that floats past on the water. Together they make the package. js/main.js clones the blocks so each lane drifts without a gap. */
.pool { position: relative; background: var(--blue); color: var(--on-blue); }
.pool::before { content: ""; position: absolute; left: 0; right: 0; top: -2.4rem; height: 2.5rem; background: var(--blue); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22Q100 4 200 22T400 22V40Z'/%3E%3C/svg%3E") repeat-x 0 100% / 400px 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22Q100 4 200 22T400 22V40Z'/%3E%3C/svg%3E") repeat-x 0 100% / 400px 100%; }
.pool .wrap { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.pool .head { margin-bottom: 0; }
.pool .lead { max-width: 44ch; }
.pool__water { display: grid; gap: clamp(0.9rem, 2vw, 1.4rem); }
.pool__lane { position: relative; overflow: hidden; padding-block: 0.6rem 0.9rem; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.pool__lane::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--on-blue); opacity: 0.3; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 6'%3E%3Cpath d='M0 3Q3.5 0 7 3T14 3' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x 0 50% / 14px 6px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 6'%3E%3Cpath d='M0 3Q3.5 0 7 3T14 3' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x 0 50% / 14px 6px; }
.pool__track { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.pool__track li { flex: none; padding: 0.55rem 1.1rem 0.65rem; background: var(--paper); color: var(--ink); border-radius: 1.1em 1.1em 0.3em 0.3em; font: 600 clamp(1rem, 0.9rem + 0.4vw, 1.25rem)/1.2 var(--font-body); white-space: nowrap; }
.pool__foot { font-size: 1.0625rem; line-height: 1.4; max-width: 60ch; }
.pool__foot a { font-weight: 600; }
@keyframes pool-drift { to { transform: translateX(calc(var(--w) * -1)); } }
@keyframes pool-bob { from { transform: translateY(-0.3rem); } to { transform: translateY(0.3rem); } }
@media (prefers-reduced-motion: no-preference) {
  .pool::before { animation: shore 9s linear infinite; }
  .pool__lane::after { animation: nav-wave 1.6s linear infinite; }
  .pool__lane.is-drifting .pool__track { flex-wrap: nowrap; width: max-content; animation: pool-drift linear infinite; }
  .pool__lane--rev.is-drifting .pool__track { animation-direction: reverse; }
  .pool__lane.is-drifting:hover .pool__track { animation-play-state: paused; }
  .pool__lane.is-drifting li { animation: pool-bob 4.5s ease-in-out infinite alternate; animation-delay: calc(var(--b) * -0.9s); }
}