/* 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; font-variation-settings: "wdth" 96, "opsz" 48; }
h2.display { font-size: var(--fs-h2); }
.lead { font-size: var(--fs-lead); line-height: 1.4; max-width: 38ch; }
.label { display: inline-flex; align-items: center; gap: 0.6rem; font: 600 var(--fs-label)/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.label::before { content: ""; width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 1.5px var(--ink); }
.on-blue .label::before { box-shadow: none; }
.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) { .site-head { position: static; } .progress { display: block; } html { scroll-padding-top: 1rem; } }
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 2rem; padding-block: 1.1rem; }
.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); }
@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; }
}

/* Hero: headline left, the logo mark standing on the ground line right, a sun rising behind it */
.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, 64svh, 44rem); }
.hero__copy { display: grid; gap: clamp(1rem, 2vw, 1.6rem); padding-bottom: clamp(2rem, 4vw, 3.5rem); align-self: end; padding-top: clamp(1rem, 2vw, 1.75rem); }
.hero h1 { font-size: var(--fs-h1); letter-spacing: 0; font-variation-settings: "wdth" 96, "opsz" 48; }
.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__note { color: var(--ink-2); font-size: 0.9375rem; }
.hero__art { position: relative; align-self: end; }
.hero__mark { position: relative; z-index: 1; width: 100%; height: auto; aspect-ratio: 228 / 144; }
.mark__empty { fill: #dde5fb; fill: color-mix(in oklch, var(--blue) 14%, var(--paper)); }
.mark__wave path { fill: var(--blue); }
.mark__water { transform: translateY(8px); }
.mark__tilt { transform: rotate(var(--tilt, 0deg)); transform-origin: 134px 92px; }
.hero__sun { position: absolute; z-index: 0; right: 10%; top: -34%; width: 30%; 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: 2.2rem; }
  .hero__sun { top: -26%; right: 6%; width: 28%; }
}

/* 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; 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; font-variation-settings: "wdth" 88; 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: an honest list, no cards */
.proof { border-top: 2px solid var(--ink); }
.proof li { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 1.4fr); align-items: baseline; gap: 0.5rem 2rem; padding-block: clamp(1.4rem, 3vw, 2.2rem); border-bottom: 1px solid var(--line); }
.proof__who { font-weight: 600; }
.proof__num { font: 700 clamp(2.4rem, 1.4rem + 3.6vw, 4.6rem)/1 var(--font-display); letter-spacing: -0.02em; font-variation-settings: "wdth" 94, "opsz" 48; font-variant-numeric: tabular-nums; }
.proof__num--word { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.3rem); letter-spacing: -0.01em; line-height: 1.05; }
.proof__cap { color: var(--ink-2); display: grid; gap: 0.35rem; }
.proof__cap small { display: block; margin-top: 0.3rem; width: fit-content; font-size: 0.8125rem; letter-spacing: 0.02em; text-decoration: underline dashed; text-underline-offset: 0.25em; text-decoration-color: color-mix(in oklch, var(--ink) 40%, transparent); }
.note { margin-top: 1.5rem; color: var(--ink-2); max-width: 52ch; }
@media (max-width: 52rem) { .proof li { grid-template-columns: 1fr; } }

/* Quotes carousel (placeholders until real client quotes arrive) */
.quotes { margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.quotes__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.quotes__track::-webkit-scrollbar { display: none; }
.quote { flex: 0 0 100%; scroll-snap-align: start; padding-right: clamp(0rem, 6vw, 6rem); }
.quote blockquote { font: 600 clamp(1.6rem, 1rem + 2.6vw, 3.2rem)/1.1 var(--font-display); letter-spacing: -0.02em; margin: 0; max-width: 28ch; }
.quote figcaption { margin-top: 1rem; color: var(--ink-2); }
.quotes__bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: 1.75rem; }
.quotes__dots { display: flex; align-items: flex-end; gap: 0.6rem; }
.quotes__dot { width: 1.5rem; height: 2rem; padding: 0; background: transparent; border: 3px solid var(--ink); border-bottom: 0; border-radius: 999px 999px 0 0; cursor: pointer; transition: background-color 0.3s, border-color 0.3s; }
.quotes__dot[aria-current="true"] { background: var(--blue); border-color: var(--blue); }
.quotes__nav { display: flex; gap: 0.6rem; }
.quotes__btn { display: grid; place-items: center; width: 3rem; height: 3rem; background: transparent; color: var(--ink); border: 1.5px solid var(--ink); border-radius: var(--radius); font: 600 1.25rem/1 var(--font-body); cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.quotes__btn:hover { background: var(--ink); color: var(--on-ink); }

/* 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; }
.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: 0.9rem; display: grid; gap: 0.1rem; }
.founder figcaption b { font: 700 1.25rem/1.2 var(--font-display); letter-spacing: -0.02em; }
.founder figcaption span { color: var(--ink-2); font-size: 0.9375rem; }
@media (max-width: 52rem) { .about__grid { grid-template-columns: 1fr; } }

/* Brand: a short sheet about the logo, as a list of specimens */
.brand__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.brand__intro { display: grid; gap: 1.5rem; position: sticky; top: 2rem; }
.brand__list { border-top: 2px solid var(--ink); }
.brand__list li { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1.5rem clamp(1.25rem, 3vw, 2.5rem); align-items: center; padding-block: clamp(1.4rem, 3vw, 2rem); border-bottom: 1px solid var(--line); }
.brand__list h3 { font: 700 1.5rem/1.1 var(--font-display); letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.brand__list p { color: var(--ink-2); max-width: 46ch; }
.brand__list small { display: block; margin-top: 0.6rem; color: var(--ink-2); font-size: 0.8125rem; letter-spacing: 0.01em; }
.spec { display: flex; align-items: center; gap: 0.75rem; min-height: 6.5rem; }
.tile { display: grid; place-items: center; width: 5rem; aspect-ratio: 1; border-radius: 22%; }
.tile svg { width: 72%; height: auto; }
.tile--blue { background: var(--blue); color: var(--on-blue); }
.tile--sun { background: var(--sun); color: var(--ink); }
.spec__crop { height: 6.5rem; width: auto; aspect-ratio: 136 / 160; color: var(--ink); }
.spec__sun { width: 5rem; aspect-ratio: 1; border-radius: 50%; background: var(--sun); }
.swatch { width: 2.4rem; height: 4.6rem; border-radius: 999px 999px 0 0; border: 1px solid var(--line); }
.swatch--blue { background: var(--blue); border-color: var(--blue); }
.swatch--ink { background: var(--ink); border-color: var(--ink); }
.swatch--sun { background: var(--sun); border-color: var(--sun); }
.swatch--paper { background: var(--paper-2); border-color: var(--ink-2); }
@media (max-width: 52rem) { .brand__grid { grid-template-columns: 1fr; } .brand__intro { position: static; } }
@media (max-width: 36rem) { .brand__list li { 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__big { font: 700 clamp(3.25rem, 0.6rem + 11vw, 10.5rem)/0.92 var(--font-display); letter-spacing: -0.005em; font-variation-settings: "wdth" 94, "opsz" 48; margin-left: -0.03em; }
.pricing__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: start; border-top: 2px solid var(--on-blue); padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.pricing__lead { font-size: var(--fs-lead); line-height: 1.35; max-width: 30ch; }
.pricing__listlabel { font: 600 var(--fs-label)/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1rem; }
.pricing__list { columns: 2; column-gap: 2rem; font-size: 1.125rem; line-height: 1.3; }
.pricing__list li { break-inside: avoid; display: flex; align-items: baseline; gap: 0.7rem; padding-block: 0.4rem; }
.pricing__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: 36rem) { .pricing__list { columns: 1; } }
/* Indicative packages: three arch-topped windows, deliberately not identical cards in a row of boxes */
.packages { margin-top: clamp(2.5rem, 6vw, 4.5rem); display: grid; gap: 1.5rem; }
.packages__head { display: grid; gap: 0.75rem; }
.packages__head .pricing__listlabel { margin-bottom: 0; }
.packages__note { max-width: 46ch; font-size: 1.0625rem; line-height: 1.4; }
.packages__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); align-items: stretch; }
.pkg { display: grid; align-content: start; gap: 0.75rem; padding: clamp(4.5rem, 7vw, 6rem) clamp(1.25rem, 2vw, 2rem) clamp(1.5rem, 2.4vw, 2rem); border: 2px solid var(--on-blue); border-radius: 50% 50% 1.25rem 1.25rem / 6.5rem 6.5rem 1.25rem 1.25rem; }
.pkg h3 { 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; 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 { border-radius: 50% 50% 1.25rem 1.25rem / 4.5rem 4.5rem 1.25rem 1.25rem; padding-top: 4rem; } }
@media (max-width: 52rem) { .pricing__row { grid-template-columns: 1fr; } }

/* Contact */
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.contact .head { margin-bottom: 0; }
.form { display: grid; gap: 1.25rem; }
.field { display: grid; gap: 0.5rem; }
.field label { font: 600 var(--fs-label)/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.field input, .field textarea { width: 100%; padding: 0.85rem 1rem; background: #fff; color: var(--ink); border: 1.5px solid var(--ink); border-radius: var(--radius); font: 400 1rem/1.5 var(--font-body); }
.field textarea { min-height: 7.5rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-2); }
.field small { color: var(--ink-2); font-size: 0.875rem; }
.form__row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.form__status { color: var(--ink-2); font-size: 0.9375rem; }
.form__mail { color: var(--ink-2); font-size: 0.9375rem; }
.form__mail a { color: var(--ink); font-weight: 600; }
@media (max-width: 52rem) { .contact__grid { grid-template-columns: 1fr; align-items: start; } }

/* Footer */
.foot { 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 { 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; }
@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-up { from { transform: translateY(190px); } to { transform: translateY(8px); } }
@keyframes slosh { from { transform: translateY(8px); } to { transform: translateY(23px); } }
@keyframes drift { to { transform: translateX(-228px); } }
@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; }
  .hero__copy > .label { animation-delay: 0.05s; }
  .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; }
  .hero__copy > .hero__note { animation-delay: 0.75s; }
  .mark__water { animation: fill-up 3.4s cubic-bezier(0.35, 0.05, 0.2, 1) 0.35s both, slosh 9s ease-in-out 3.9s infinite alternate; }
  .mark__wave { animation: drift 5.5s linear infinite; }
  .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 .mark__water, html.has-intro .mark__wave, 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); } }