/* Hallmark · macrostructure: Split Studio · H1 hero knobs: size=display, alignment=left-bias
 * theme: custom · vibe: "agtech, ciencia, campo y precisión" · paper: oklch(96% 0.012 145) · accent: oklch(68% 0.135 128)
 * display: Sora · body: Manrope · axes: light / geometric-sans / chromatic-green ~128°
 * studied: no · context: inferred · nav: N1b frost-on-scroll · footer: Ft5 Statement · contrast: pass (40–41) · slop: pass (42–45)
 * Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5 */
html { overflow-x: clip; scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.58; }
*, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } img { display: block; max-inline-size: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; } h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; font-weight: 700; letter-spacing: -0.055em; line-height: 0.98; min-width: 0; overflow-wrap: anywhere; } h1 { font-size: var(--text-display); } h2 { font-size: var(--text-2xl); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }.section-shell { width: min(var(--page-max), 100%); margin-inline: auto; padding-inline: var(--page-gutter); }.kicker { color: var(--color-muted); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.13em; line-height: 1.2; text-transform: uppercase; }
.button { align-items: center; background: var(--color-accent); border: var(--rule-hair) solid var(--color-accent); border-radius: var(--radius-pill); color: var(--color-accent-ink); display: inline-flex; font-size: var(--text-sm); font-weight: 700; gap: var(--space-sm); justify-content: center; min-height: 3.1rem; padding-inline: var(--space-lg); transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); white-space: nowrap; }.button span,.text-link span { font-size: var(--text-md); line-height: 1; transition: transform var(--dur-short) var(--ease-out); }.button:hover { background: var(--color-paper); border-color: var(--color-paper); }.button:hover span,.text-link:hover span { transform: translateX(3px); }.button:active { transform: translateY(1px); }.button:disabled,.menu-toggle:disabled { cursor: not-allowed; opacity: 0.55; }.button:focus-visible,.text-link:focus-visible,.primary-nav a:focus-visible,.product-row:focus-visible,.site-footer a:focus-visible,.menu-toggle:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.text-link { align-items: center; display: inline-flex; font-size: var(--text-sm); font-weight: 700; gap: var(--space-xs); min-height: 2.75rem; white-space: nowrap; }.text-link--light { color: var(--color-light); }
.site-header { color: var(--color-light); inset: 0 0 auto; position: fixed; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), backdrop-filter var(--dur-short) var(--ease-out); z-index: var(--z-sticky); }.site-header.is-scrolled { background-color: color-mix(in oklch, var(--color-paper-dark) 78%, transparent); backdrop-filter: blur(18px) saturate(130%); border-block-end: var(--rule-hair) solid color-mix(in oklch, var(--color-light) 18%, transparent); }.site-header__inner { align-items: center; display: grid; gap: var(--space-md); grid-template-columns: auto 1fr auto; margin-inline: auto; max-width: var(--page-max); min-height: 6rem; padding-inline: var(--page-gutter); }.brand { align-items: center; display: inline-flex; min-height: 3.5rem; }.brand img { height: auto; width: 10.25rem; }.primary-nav { align-items: center; display: flex; gap: clamp(var(--space-sm), 1.6vw, var(--space-lg)); justify-content: center; }.primary-nav a { color: color-mix(in oklch, var(--color-light) 78%, transparent); font-size: var(--text-sm); font-weight: 600; min-height: 2.75rem; padding-block: var(--space-sm); transition: color var(--dur-short) var(--ease-out); white-space: nowrap; }.primary-nav a:hover { color: var(--color-light); }.button--header { background: color-mix(in oklch, var(--color-light) 12%, transparent); border-color: color-mix(in oklch, var(--color-light) 25%, transparent); color: var(--color-light); min-height: 2.75rem; }.button--header:hover { background: var(--color-light); border-color: var(--color-light); color: var(--color-ink); }.menu-toggle { background: transparent; border: 0; color: var(--color-light); display: none; min-height: 2.75rem; padding: var(--space-xs); width: 2.75rem; }.menu-toggle i { background: currentColor; display: block; height: 1px; margin: var(--space-xs) auto; width: 1.25rem; }.mobile-menu { background: var(--color-paper-dark); border-block-start: var(--rule-hair) solid var(--color-rule-dark); display: grid; gap: var(--space-xs); padding: var(--space-md) var(--page-gutter) var(--space-lg); }.mobile-menu a:not(.button) { color: var(--color-light); font-weight: 600; min-height: 2.75rem; padding-block: var(--space-xs); }.mobile-menu .button { justify-self: start; margin-block-start: var(--space-xs); }
.hero { color: var(--color-light); display: grid; isolation: isolate; min-height: 52rem; overflow: hidden; padding: clamp(7.5rem, 11vw, 9rem) var(--page-gutter) clamp(9rem, 13vw, 11rem); position: relative; }.hero__image,.hero__wash,.hero__grid { inset: 0; position: absolute; }.hero__image { height: 100%; object-fit: cover; width: 100%; z-index: -4; }.hero__wash { background: linear-gradient(90deg, color-mix(in oklch, var(--color-overlay) 88%, transparent), color-mix(in oklch, var(--color-overlay) 48%, transparent) 53%, color-mix(in oklch, var(--color-overlay) 28%, transparent)); z-index: -3; }.hero__grid { background-image: linear-gradient(color-mix(in oklch, var(--color-light) 12%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklch, var(--color-light) 12%, transparent) 1px, transparent 1px); background-size: 9rem 9rem; mask-image: linear-gradient(90deg, var(--color-ink), transparent 72%); opacity: 0.44; z-index: -2; }.hero__content { align-self: center; max-width: 62rem; position: relative; }.hero__kicker { color: color-mix(in oklch, var(--color-light) 78%, transparent); margin-block-end: var(--space-lg); }.hero h1 { font-size: clamp(4.4rem, 8vw, 9.2rem); max-width: 12ch; text-shadow: 0 2px 22px color-mix(in oklch, var(--color-overlay) 35%, transparent); }.hero h1 span { display: block; }.hero h1 .hero__accent { color: var(--color-accent); letter-spacing: -0.075em; }.hero__copy { color: color-mix(in oklch, var(--color-light) 84%, transparent); font-size: var(--text-md); margin-block: var(--space-xl); max-width: 65ch; }.hero__actions { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-xl); }.hero__readout { align-items: center; bottom: var(--space-xl); display: flex; font-family: var(--font-mono); font-size: var(--text-xs); gap: var(--space-sm); letter-spacing: 0.08em; position: absolute; right: var(--page-gutter); text-transform: uppercase; }.hero__readout-line { background: var(--color-accent); height: 1px; width: 2.5rem; }.hero__readout b { color: var(--color-accent); font-size: inherit; font-weight: 700; }.hero__scroll { bottom: var(--space-xl); font-size: var(--text-sm); left: var(--page-gutter); position: absolute; }.hero__scroll span { color: var(--color-accent); margin-inline-start: var(--space-xs); }.hero__orbit { border: var(--rule-hair) solid color-mix(in oklch, var(--color-light) 28%, transparent); border-radius: var(--radius-pill); height: 23rem; pointer-events: none; position: absolute; width: 23rem; z-index: -1; }.hero__orbit--one { right: 7%; top: 21%; transform: rotate(-24deg); }.hero__orbit--two { border-color: color-mix(in oklch, var(--color-accent) 58%, transparent); height: 11rem; right: 22%; top: 35%; width: 11rem; }
.hero__rain { inset: 0; overflow: hidden; pointer-events: none; position: absolute; z-index: -1; }.hero__drop { background: color-mix(in oklch, var(--color-light) 46%, transparent); border-radius: var(--radius-pill); height: 4.75rem; left: 56%; opacity: 0; position: absolute; top: -7rem; transform: rotate(16deg); width: 1px; animation: hero-waterfall var(--dur-particle) var(--ease-in-out) infinite; }.hero__drop::after { background: color-mix(in oklch, var(--color-accent) 62%, transparent); border-radius: var(--radius-pill); content: ""; height: 0.28rem; left: -0.08rem; position: absolute; top: -0.28rem; width: 0.28rem; }.hero__drop--leaf { background: color-mix(in oklch, var(--color-accent) 72%, transparent); border-radius: 90% 8% 90% 8%; height: 1.05rem; width: 0.48rem; }.hero__drop--leaf::after { background: color-mix(in oklch, var(--color-light) 55%, transparent); height: 1px; left: 0.22rem; top: 0.16rem; transform: rotate(22deg); width: 0.75rem; }.hero__drop:nth-child(1) { animation-delay: -1100ms; left: 58%; }.hero__drop:nth-child(2) { animation-delay: -4200ms; left: 68%; }.hero__drop:nth-child(3) { animation-delay: -2300ms; left: 76%; animation-duration: var(--dur-particle-slow); }.hero__drop:nth-child(4) { animation-delay: -6000ms; left: 86%; }.hero__drop:nth-child(5) { animation-delay: -4800ms; left: 91%; animation-duration: var(--dur-particle-slow); }.hero__drop:nth-child(6) { animation-delay: -3100ms; left: 63%; }.hero__drop:nth-child(7) { animation-delay: -7200ms; left: 82%; }.hero__drop:nth-child(8) { animation-delay: -5100ms; left: 72%; animation-duration: var(--dur-particle-slow); }.hero__drop:nth-child(9) { animation-delay: -800ms; left: 95%; }.hero__drop--leaf { animation-name: hero-leaf-fall; } @keyframes hero-waterfall { 0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(16deg); } 14% { opacity: 0.72; } 80% { opacity: 0.24; } 100% { opacity: 0; transform: translate3d(-3rem, 48rem, 0) rotate(16deg); } } @keyframes hero-leaf-fall { 0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-26deg); } 16% { opacity: 0.72; } 84% { opacity: 0.15; } 100% { opacity: 0; transform: translate3d(-8rem, 45rem, 0) rotate(155deg); } }
.signal-band { background: var(--color-paper-dark); color: var(--color-light); overflow: hidden; padding-block: var(--space-md); }.signal-band__track { align-items: center; display: flex; font-family: var(--font-display); font-size: clamp(0.92rem, 1.5vw, 1.25rem); font-weight: 600; gap: var(--space-lg); justify-content: center; letter-spacing: -0.02em; min-width: max-content; padding-inline: var(--space-lg); }.signal-band i { color: var(--color-accent); font-style: normal; }
.concept { display: grid; gap: var(--space-2xl); grid-template-columns: minmax(0, 1.13fr) minmax(16rem, 0.62fr); padding-block: var(--space-4xl); position: relative; }.concept__copy { padding-block-start: var(--space-xl); }.concept__copy h2 { margin-block: var(--space-lg) var(--space-sm); }.concept__emphasis { color: var(--color-accent); font-family: var(--font-display); font-size: clamp(2rem, 3.8vw, 3.7rem); font-weight: 700; letter-spacing: -0.06em; line-height: 1; }.concept__image { grid-column: 2; grid-row: 1 / span 2; margin: 0; }.concept__image img { aspect-ratio: 3 / 4; filter: saturate(0.82) contrast(1.05); height: 100%; object-fit: cover; width: 100%; }.concept__image figcaption { color: var(--color-muted); font-size: var(--text-xs); margin-block-start: var(--space-sm); max-width: 28ch; }.concept__note { align-self: end; max-width: 35rem; }.concept__note p { font-size: var(--text-md); }.tiny-rule { background: var(--color-accent); display: block; height: 2px; margin-block: var(--space-xl) var(--space-sm); width: 4rem; }.concept__note > span:last-child { color: var(--color-muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.solution-worlds { background: var(--color-paper-dark); color: var(--color-light); padding-block: var(--space-4xl); }.solution-worlds__intro { margin-block-end: var(--space-3xl); }.solution-worlds__intro .kicker { color: var(--color-accent); margin-block-end: var(--space-md); }.solution-worlds__intro h2 { max-width: 14ch; }.world { min-height: 38rem; overflow: hidden; position: relative; }.world + .world { margin-block-start: var(--space-xl); }.world > img,.world__shade { inset: 0; position: absolute; }.world > img { filter: saturate(0.72); height: 100%; object-fit: cover; transform: scale(1.01); transition: transform var(--dur-long) var(--ease-out); width: 100%; }.world:hover > img { transform: scale(1.035); }.world__shade { background: linear-gradient(90deg, color-mix(in oklch, var(--color-overlay) 90%, transparent), color-mix(in oklch, var(--color-overlay) 28%, transparent)); }.world--livestock .world__shade { background: linear-gradient(270deg, color-mix(in oklch, var(--color-overlay) 90%, transparent), color-mix(in oklch, var(--color-overlay) 28%, transparent)); }.world__content { align-items: end; display: grid; gap: var(--space-lg); grid-template-columns: minmax(3rem, 0.3fr) minmax(0, 1.1fr) minmax(13rem, 0.7fr) minmax(8rem, 0.38fr); inset: auto var(--page-gutter) var(--space-2xl); position: absolute; }.world__index { color: var(--color-accent); font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; }.world .kicker { color: color-mix(in oklch, var(--color-light) 68%, transparent); margin-block-end: var(--space-sm); }.world h3 { font-size: clamp(2.2rem, 4.6vw, 5rem); }.world__text { color: color-mix(in oklch, var(--color-light) 85%, transparent); font-size: var(--text-sm); max-width: 25ch; }
.products { padding-block: var(--space-4xl); }.products__head { display: block; margin-block-end: var(--space-3xl); }.products__head .kicker { margin-block-end: var(--space-lg); }.products__head h2 { max-width: 12ch; }.product-list { border-block: var(--rule-hair) solid var(--color-rule); }.product-row { align-items: center; border-block-start: var(--rule-hair) solid var(--color-rule); display: grid; gap: var(--space-lg); grid-template-columns: minmax(2.5rem, 0.25fr) minmax(7rem, 0.6fr) minmax(0, 1.2fr) auto; min-height: 8rem; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }.product-row:first-child { border-block-start: 0; }.product-row:hover { background: var(--color-paper-2); }.product-row__number,.product-row__kind { color: var(--color-muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }.product-row strong { font-family: var(--font-display); font-size: clamp(1.4rem, 3.1vw, 3.2rem); letter-spacing: -0.055em; line-height: 1; overflow-wrap: anywhere; }.product-row__action { align-items: center; display: flex; font-size: var(--text-sm); font-weight: 700; gap: var(--space-xs); white-space: nowrap; }.product-row__action b { color: var(--color-accent); font-size: var(--text-md); transition: transform var(--dur-short) var(--ease-out); }.product-row:hover .product-row__action b { transform: translate(2px, -2px); }
.science { background: var(--color-paper-2); min-height: 42rem; overflow: hidden; position: relative; }.science__image { bottom: 0; clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%); height: 100%; position: absolute; right: 0; width: 54%; }.science__image::after { background: color-mix(in oklch, var(--color-paper-dark) 33%, transparent); content: ""; inset: 0; position: absolute; }.science__image img { filter: saturate(0.66); height: 100%; object-fit: cover; width: 100%; }.science__content { padding-block: var(--space-4xl); position: relative; width: min(var(--page-max), 62%); }.science__content h2 { margin-block: var(--space-lg); max-width: 12ch; }.science__content > p:not(.kicker) { font-size: var(--text-md); max-width: 35rem; }.science__labels { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-block-start: var(--space-xl); }.science__labels span { border: var(--rule-hair) solid var(--color-rule-dark); color: var(--color-ink-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.07em; padding: var(--space-xs) var(--space-sm); text-transform: uppercase; }.science__field { inset: 0; pointer-events: none; position: absolute; }.science__node { background: var(--color-accent); border-radius: var(--radius-pill); height: 0.5rem; position: absolute; width: 0.5rem; z-index: var(--z-base); }.science__node--a { left: 49%; top: 35%; }.science__node--b { left: 56%; top: 49%; }.science__node--c { left: 64%; top: 29%; }.science__line { background: color-mix(in oklch, var(--color-accent) 70%, transparent); height: 1px; position: absolute; transform-origin: left; width: 12rem; }.science__line--a { left: 49%; top: 36%; transform: rotate(35deg); }.science__line--b { left: 56%; top: 49%; transform: rotate(-43deg); }
.water { color: var(--color-light); min-height: 38rem; overflow: hidden; position: relative; }.water > img,.water__wash { inset: 0; position: absolute; }.water > img { filter: saturate(0.55); height: 100%; object-fit: cover; width: 100%; }.water__wash { background: linear-gradient(90deg, color-mix(in oklch, var(--color-overlay) 90%, transparent), color-mix(in oklch, var(--color-overlay) 33%, transparent)); }.water__content { padding-block: var(--space-4xl); position: relative; }.water .kicker { color: var(--color-accent); }.water h2 { margin-block: var(--space-lg); max-width: 16ch; }.water__content > p:not(.kicker) { color: color-mix(in oklch, var(--color-light) 88%, transparent); font-size: var(--text-md); max-width: 36rem; }
.trust { align-items: center; display: grid; gap: var(--space-3xl); grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.7fr); padding-block: var(--space-4xl); }.trust h2 { margin-block-start: var(--space-lg); max-width: 13ch; }.trust__copy { display: grid; gap: var(--space-xl); }.trust__copy > p { font-size: var(--text-md); max-width: 30rem; }.trust__seal { align-items: center; border: var(--rule-hair) dashed var(--color-rule-dark); color: var(--color-muted); display: flex; font-size: var(--text-sm); justify-content: center; min-height: 8.5rem; padding: var(--space-lg); text-align: center; }
.mexico { display: grid; gap: var(--space-2xl); grid-template-columns: minmax(0, 1.35fr) minmax(10rem, 0.65fr); padding-block: var(--space-4xl) var(--space-3xl); }.mexico__large h2 { margin-block-start: var(--space-lg); max-width: 16ch; }.mexico__numbers { align-self: end; display: grid; gap: var(--space-md); }.mexico__numbers p { align-items: baseline; border-block-end: var(--rule-hair) solid var(--color-rule); display: flex; gap: var(--space-lg); padding-block-end: var(--space-sm); }.mexico__numbers b { color: var(--color-accent); font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: -0.05em; }.mexico__numbers span { font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; }.mexico__copy { font-size: var(--text-md); grid-column: 1; max-width: 43rem; }
.final-cta { background: var(--color-paper-dark); color: var(--color-light); overflow: hidden; position: relative; }.final-cta::after { border: var(--rule-hair) solid color-mix(in oklch, var(--color-accent) 60%, transparent); border-radius: var(--radius-pill); content: ""; height: 30rem; position: absolute; right: -8rem; top: -15rem; width: 30rem; }.final-cta__inner { align-items: start; display: grid; gap: clamp(var(--space-2xl), 8vw, var(--space-4xl)); grid-template-columns: minmax(0, 0.92fr) minmax(20rem, 0.72fr); padding-block: var(--space-4xl); position: relative; z-index: var(--z-base); }.final-cta .kicker { color: var(--color-accent); }.final-cta h2 { margin-block: var(--space-lg); max-width: 15ch; }.final-cta__lead > p:not(.kicker) { color: color-mix(in oklch, var(--color-light) 76%, transparent); font-size: var(--text-md); max-width: 37rem; }.final-cta__lead .text-link { margin-block-start: var(--space-xl); }.contact-form { border-block: var(--rule-hair) solid color-mix(in oklch, var(--color-light) 30%, transparent); display: grid; gap: var(--space-lg); padding-block: var(--space-lg); }.contact-form__head { align-items: baseline; display: flex; gap: var(--space-lg); justify-content: space-between; }.contact-form__head p { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.04em; line-height: 1.1; }.contact-form__head span { color: color-mix(in oklch, var(--color-light) 58%, transparent); font-size: var(--text-xs); max-width: 19ch; text-align: end; }.contact-form__grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(2, minmax(0, 1fr)); }.form-field { display: grid; gap: var(--space-xs); }.form-field > span { color: color-mix(in oklch, var(--color-light) 70%, transparent); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }.form-field input,.form-field select,.form-field textarea { appearance: none; background: color-mix(in oklch, var(--color-light) 8%, transparent); border: var(--rule-hair) solid color-mix(in oklch, var(--color-light) 30%, transparent); border-radius: var(--radius-sm); color: var(--color-light); font-family: var(--font-body); font-size: var(--text-base); min-height: 3rem; outline: 2px solid transparent; outline-offset: 2px; padding: var(--space-sm) var(--space-md); transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); width: 100%; }.form-field textarea { min-height: 6.7rem; resize: vertical; }.form-field select { background-image: linear-gradient(45deg, transparent 50%, var(--color-light) 50%), linear-gradient(135deg, var(--color-light) 50%, transparent 50%); background-position: calc(100% - 1.1rem) 1.25rem, calc(100% - 0.8rem) 1.25rem; background-repeat: no-repeat; background-size: 0.32rem 0.32rem, 0.32rem 0.32rem; padding-inline-end: var(--space-2xl); }.form-field input::placeholder,.form-field textarea::placeholder { color: color-mix(in oklch, var(--color-light) 46%, transparent); }.form-field input:hover,.form-field select:hover,.form-field textarea:hover { background: color-mix(in oklch, var(--color-light) 13%, transparent); }.form-field input:focus-visible,.form-field select:focus-visible,.form-field textarea:focus-visible { border-color: var(--color-accent); outline-color: var(--color-focus); }.form-field input:invalid:not(:placeholder-shown),.form-field textarea:invalid:not(:placeholder-shown),.form-field select:invalid { border-color: var(--color-accent); }.form-field input:disabled,.form-field select:disabled,.form-field textarea:disabled { cursor: not-allowed; opacity: 0.55; }.button--form { justify-self: start; margin-block-start: var(--space-xs); }.button--form:disabled { background: color-mix(in oklch, var(--color-light) 28%, transparent); border-color: color-mix(in oklch, var(--color-light) 28%, transparent); color: color-mix(in oklch, var(--color-ink) 62%, transparent); }
.site-footer { background: var(--color-overlay); color: var(--color-light); padding: var(--space-3xl) var(--page-gutter) var(--space-xl); }.site-footer__mast { align-items: end; display: flex; gap: var(--space-xl); justify-content: space-between; margin-inline: auto; max-width: var(--page-max); }.site-footer__mast img { width: 11rem; }.site-footer__mast p { color: color-mix(in oklch, var(--color-light) 65%, transparent); font-size: var(--text-sm); }.site-footer__links { border-block: var(--rule-hair) solid var(--color-rule-dark); display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); margin: var(--space-2xl) auto; max-width: var(--page-max); padding-block: var(--space-lg); }.site-footer__links a { color: color-mix(in oklch, var(--color-light) 76%, transparent); font-size: var(--text-sm); font-weight: 600; min-height: 2.75rem; padding-block: var(--space-sm); transition: color var(--dur-short) var(--ease-out); white-space: nowrap; }.site-footer__links a:hover { color: var(--color-accent); }.site-footer__meta { color: color-mix(in oklch, var(--color-light) 48%, transparent); display: flex; font-size: var(--text-xs); justify-content: space-between; margin-inline: auto; max-width: var(--page-max); }
.reveal { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (max-width: 73rem) { .primary-nav { gap: var(--space-sm); }.primary-nav a { font-size: 0.7rem; }.button--header { font-size: 0.7rem; padding-inline: var(--space-md); }.world__content { grid-template-columns: minmax(2rem, 0.2fr) minmax(0, 1fr) minmax(10rem, 0.55fr); }.world__content .text-link { grid-column: 2; }.world__text { grid-column: 3; grid-row: 1 / span 2; } }
@media (max-width: 60rem) { .primary-nav,.button--header { display: none; }.site-header__inner { grid-template-columns: 1fr auto; }.menu-toggle { display: block; }.hero { min-height: 44rem; }.concept,.products__head,.trust,.mexico,.final-cta__inner { grid-template-columns: minmax(0, 1fr); }.concept__image { grid-column: 1; grid-row: auto; max-width: 28rem; }.concept__note { grid-row: 3; }.world__content { grid-template-columns: minmax(2rem, 0.22fr) minmax(0, 1fr); }.world__text { grid-column: 2; grid-row: auto; }.world__content .text-link { grid-column: 2; }.science__image { clip-path: none; height: 36%; top: auto; width: 100%; }.science__content { padding-block: var(--space-3xl) 23rem; width: min(var(--page-max), 100%); }.science__field { opacity: 0.6; }.science__node--a { left: 64%; top: 64%; }.science__node--b { left: 74%; top: 74%; }.science__node--c { left: 83%; top: 61%; }.science__line--a { left: 64%; top: 65%; }.science__line--b { left: 74%; top: 74%; }.mexico__copy { grid-column: auto; }.trust__copy { max-width: 38rem; } }
@media (max-width: 40rem) { .brand img { width: 8.5rem; }.hero { min-height: 48rem; padding-block: 8rem 10rem; }.hero__wash { background: linear-gradient(90deg, color-mix(in oklch, var(--color-overlay) 90%, transparent), color-mix(in oklch, var(--color-overlay) 45%, transparent)); }.hero h1 { font-size: clamp(3.75rem, 16vw, 5.15rem); }.hero__copy { font-size: var(--text-base); }.hero__actions { align-items: flex-start; flex-direction: column; gap: var(--space-md); }.hero__readout { display: none; }.hero__scroll { font-size: var(--text-xs); }.hero__orbit--one { right: -8rem; top: 19%; }.hero__orbit--two { right: 3rem; top: 35%; }.signal-band__track { justify-content: flex-start; }.concept { gap: var(--space-xl); padding-block: var(--space-3xl); }.concept__image { max-width: 100%; }.solution-worlds { padding-block: var(--space-3xl); }.world { min-height: 38rem; }.world__content { bottom: var(--space-xl); gap: var(--space-md); grid-template-columns: minmax(2rem, 0.15fr) minmax(0, 1fr); }.world__text { font-size: var(--text-xs); }.product-row { gap: var(--space-xs); grid-template-columns: minmax(2.2rem, 0.2fr) minmax(0, 1fr) auto; min-height: 7rem; }.product-row__kind { display: none; }.product-row strong { font-size: clamp(1.25rem, 6.6vw, 1.75rem); }.product-row__action { font-size: var(--text-xs); }.products__head { margin-block-end: var(--space-2xl); }.science { min-height: 48rem; }.science__content { padding-block-start: var(--space-3xl); }.science__labels { gap: var(--space-xs); }.science__labels span { font-size: 0.61rem; }.water { min-height: 34rem; }.water h2,.final-cta h2 { font-size: clamp(2.35rem, 10vw, 3.6rem); }.contact-form__head { align-items: start; flex-direction: column; }.contact-form__head span { text-align: start; }.contact-form__grid { grid-template-columns: minmax(0, 1fr); }.button--form { width: 100%; }.site-footer__mast { align-items: flex-start; flex-direction: column; }.site-footer__meta { gap: var(--space-sm); }.button,.text-link { min-height: 2.9rem; }.site-footer { padding-block-start: var(--space-2xl); } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: 150ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 150ms !important; }.reveal { opacity: 1; transform: none; }.world > img { transform: none; } }
/* Contrast refinements for hero, navigation and footer. */
.site-header { background-color: color-mix(in oklch, var(--color-paper) 82%, transparent); backdrop-filter: blur(18px) saturate(125%); border-block-end: var(--rule-hair) solid color-mix(in oklch, var(--color-ink) 12%, transparent); color: var(--color-ink); }
.site-header.is-scrolled { background-color: color-mix(in oklch, var(--color-paper) 94%, transparent); border-block-end-color: color-mix(in oklch, var(--color-ink) 16%, transparent); }
.primary-nav a { color: color-mix(in oklch, var(--color-ink) 86%, transparent); font-size: var(--text-base); font-weight: 800; }
.primary-nav a:hover { color: var(--color-accent-ink); }
.button--header { background: color-mix(in oklch, var(--color-paper) 64%, transparent); border-color: color-mix(in oklch, var(--color-ink) 25%, transparent); color: var(--color-ink); }
.button--header:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.menu-toggle { color: var(--color-ink); }
.mobile-menu { background: var(--color-paper); border-block-start-color: color-mix(in oklch, var(--color-ink) 14%, transparent); }
.mobile-menu a:not(.button) { color: var(--color-ink); font-weight: 800; }
.hero h1 { font-size: clamp(4rem, 6.6vw, 7.6rem); }
.site-footer { background: var(--color-paper); color: var(--color-ink); }
.site-footer__mast p { color: color-mix(in oklch, var(--color-ink) 68%, transparent); }
.site-footer__links { border-block-color: color-mix(in oklch, var(--color-ink) 24%, transparent); }
.site-footer__links a { color: color-mix(in oklch, var(--color-ink) 84%, transparent); font-weight: 700; }
.site-footer__links a:hover { color: var(--color-accent-ink); }
.site-footer__meta { color: color-mix(in oklch, var(--color-ink) 62%, transparent); }
@media (max-width: 40rem) { .hero h1 { font-size: clamp(3.35rem, 14vw, 4.4rem); } }