:root {
  --ink: #171914;
  --ink-2: #292c24;
  --paper: #ece8dd;
  --paper-bright: #f6f3eb;
  --moss: #899469;
  --sprout: #b8bd8a;
  --tangerine: #ad6348;
  --clay: #7e4b3b;
  --sun: #c4ad72;
  --line: rgba(23, 25, 20, .18);
  --light-line: rgba(246, 243, 235, .22);
  --sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", Arial, sans-serif;
  --display: "Arial Narrow", "Noto Sans TC", "PingFang TC", sans-serif;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --edge: clamp(1.25rem, 4.4vw, 5.6rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; overflow-x: hidden; }
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
:focus-visible { outline: 2px solid var(--tangerine); outline-offset: 5px; }
.skip-link { position: fixed; z-index: 99; left: 1rem; top: -4rem; padding: .75rem 1rem; background: var(--paper-bright); transition: top .2s; }
.skip-link:focus { top: 1rem; }

.site-header { position: absolute; z-index: 20; top: 0; left: 0; display: flex; width: 100%; height: 7.25rem; padding: 1.5rem var(--edge); align-items: center; justify-content: space-between; color: var(--paper-bright); }
.brand { display: inline-flex; align-items: center; gap: .7rem; min-width: 12.5rem; }
.brand-mark { width: 2.45rem; height: 2.45rem; fill: none; stroke: var(--sprout); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.brand-type { display: grid; gap: .02rem; line-height: 1; letter-spacing: .04em; }
.brand-type strong { font-size: 1.35rem; font-weight: 800; }
.brand-type small { font-size: .54rem; letter-spacing: .17em; opacity: .84; }
.site-nav { display: flex; gap: clamp(1.1rem, 2.5vw, 3rem); margin-left: auto; margin-right: 2.7rem; font-size: .76rem; letter-spacing: .08em; }
.site-nav a { position: relative; opacity: .75; transition: opacity .25s; }
.site-nav a::after { content: ""; position: absolute; inset: auto 0 -.5rem; height: 1px; background: var(--sprout); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease-out); }
.site-nav a:hover { opacity: 1; }.site-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.motion-toggle { display: inline-flex; gap: .5rem; border: 1px solid rgba(250,249,241,.36); border-radius: 99px; background: transparent; padding: .6rem .85rem; align-items: center; color: var(--paper-bright); cursor: pointer; font-size: .67rem; letter-spacing: .08em; transition: background .25s, color .25s; }
.motion-toggle:hover { background: var(--paper-bright); color: var(--ink); }
.motion-dot { display: block; width: .42rem; height: .42rem; border-radius: 50%; background: var(--sprout); box-shadow: 0 0 0 .17rem rgba(198, 221, 93, .18); }
.motion-toggle[aria-pressed="true"] .motion-dot { background: var(--tangerine); box-shadow: none; }

.hero { position: relative; isolation: isolate; display: grid; min-height: min(58rem, 100svh); padding-top: 7.25rem; overflow: hidden; background: radial-gradient(circle at 74% 43%, #343e1d 0, #202719 22%, var(--ink) 63%); color: var(--paper-bright); }
#ecosystem-canvas { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; opacity: .8; pointer-events: none; }
.hero-noise { position: absolute; z-index: -1; inset: 0; opacity: .11; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.hero-orbit { position: absolute; z-index: -2; width: 70vw; height: 70vw; border: 1px solid rgba(198,221,93,.14); border-radius: 50%; pointer-events: none; }
.hero-orbit-one { right: -14vw; top: -17vw; }.hero-orbit-two { right: 1vw; top: 4vw; width: 46vw; height: 46vw; border-color: rgba(255,101,52,.14); }
.hero-grid { display: grid; grid-template-columns: minmax(14rem, 1fr) minmax(25rem, 1.38fr) minmax(16rem, .72fr); grid-template-rows: auto 1fr; width: 100%; padding: 2.5rem var(--edge) 3rem; align-items: end; }
.eyebrow { display: flex; align-items: center; gap: .6rem; margin: 0 0 1.2rem; color: var(--moss); font-size: .64rem; font-weight: 700; letter-spacing: .15em; }
.eyebrow-line { display: inline-block; width: 1.9rem; height: 1px; background: currentColor; }.hero-eyebrow { grid-column: 1 / -1; align-self: start; color: var(--sprout); }.hero-index { margin-left: auto; color: var(--paper-bright); opacity: .7; }
.hero-copy { align-self: center; max-width: 44rem; padding: clamp(1rem, 4vh, 2.8rem) 0 0; }
.hero-kicker { margin: 0 0 1.5rem; color: var(--sprout); font-size: clamp(.78rem, 1vw, 1rem); letter-spacing: .12em; line-height: 1.55; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 8.7em; margin-bottom: 1.5rem; font-family: var(--display); font-size: clamp(3.35rem, 5.2vw, 6.6rem); font-weight: 800; letter-spacing: -.075em; line-height: .97; text-wrap: balance; }
h1 em, .closing h2 em { color: var(--sprout); font-style: normal; }
.hero-summary { max-width: 26rem; margin-bottom: 2.1rem; color: rgba(251,249,242,.77); font-size: .94rem; line-height: 1.9; }
.hero-link, .closing-link { display: inline-flex; align-items: center; gap: 1.4rem; color: var(--paper-bright); font-size: .76rem; letter-spacing: .08em; }
.hero-link span, .closing-link { border-bottom: 1px solid rgba(251,249,242,.6); padding-bottom: .65rem; }.hero-link i { display: grid; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--tangerine); place-items: center; color: var(--paper-bright); font-size: 1rem; font-style: normal; transition: transform .3s var(--ease-out); }.hero-link:hover i { transform: translate(3px, 3px); }
.hero-object { position: relative; align-self: center; justify-self: center; width: min(34vw, 30rem); aspect-ratio: 1; margin-top: 1rem; }
.seed-core { position: absolute; z-index: 3; top: 50%; left: 50%; display: grid; width: 37%; aspect-ratio: 1; border-radius: 50%; place-items: center; transform: translate(-50%, -50%); background: radial-gradient(circle at 30% 28%, #fff29b 0 6%, var(--sun) 26%, var(--tangerine) 63%, var(--clay) 100%); box-shadow: 0 0 4rem rgba(244,196,70,.37), inset -.8rem -1rem 1.6rem rgba(118,43,8,.24); }
.seed-core::before, .seed-core::after { content: ""; position: absolute; inset: 19%; border: 1px solid rgba(255,255,255,.52); border-radius: 50%; }.seed-core::after { inset: 32%; border-width: 2px; }
.seed-core span { position: absolute; width: 42%; height: 8%; border-radius: 50%; background: rgba(255,249,232,.75); transform: rotate(var(--r)) translateX(77%); }.seed-core span:nth-child(1) { --r: 12deg; }.seed-core span:nth-child(2) { --r: 131deg; }.seed-core span:nth-child(3) { --r: 255deg; }
.seed-ring { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(198,221,93,.5); border-radius: 50%; transform: translate(-50%, -50%) rotate(-24deg); }.seed-ring::before { content: ""; position: absolute; top: -2px; left: 12%; width: .45rem; height: .45rem; border-radius: 50%; background: var(--sprout); box-shadow: 0 0 1rem var(--sprout); }.seed-ring-a { width: 59%; height: 82%; }.seed-ring-b { width: 89%; height: 53%; border-color: rgba(255,101,52,.7); transform: translate(-50%, -50%) rotate(35deg); }.seed-ring-c { width: 108%; height: 32%; border-color: rgba(244,196,70,.5); transform: translate(-50%, -50%) rotate(-64deg); }.seed-ring-b::before { left: 73%; background: var(--tangerine); box-shadow: 0 0 1rem var(--tangerine); }.seed-ring-c::before { left: 42%; background: var(--sun); box-shadow: 0 0 1rem var(--sun); }
.object-caption { position: absolute; right: -1rem; bottom: 4%; margin: 0; color: var(--paper-bright); font-size: .54rem; letter-spacing: .15em; line-height: 1.5; text-align: right; opacity: .65; }
.hero-facts { display: grid; gap: .3rem; align-self: end; justify-self: end; width: min(100%, 16.5rem); padding-bottom: .5rem; }.fact { display: grid; grid-template-columns: 4.65rem 1fr; align-items: baseline; border-top: 1px solid rgba(251,249,242,.21); padding: .95rem 0 .1rem; }.fact strong { color: var(--paper-bright); font-size: 1rem; font-weight: 700; letter-spacing: -.04em; }.fact-primary strong { color: var(--sprout); }.fact span { color: rgba(251,249,242,.65); font-size: .65rem; letter-spacing: .08em; }
.hero-scroll { position: absolute; left: var(--edge); bottom: 1.5rem; display: flex; align-items: center; gap: .65rem; margin: 0; color: rgba(251,249,242,.5); font-size: .55rem; letter-spacing: .16em; }.hero-scroll span { display: block; width: 2.4rem; height: 1px; background: var(--sprout); }

.section-shell { padding-right: var(--edge); padding-left: var(--edge); }.manifesto { display: grid; grid-template-columns: minmax(8rem, .48fr) 2fr; min-height: 70vh; padding-top: clamp(6rem, 12vw, 12rem); padding-bottom: clamp(6rem, 12vw, 11rem); background: var(--paper-bright); }.section-label { display: flex; gap: .8rem; align-items: baseline; color: var(--ink); }.section-label span { font-size: .65rem; font-weight: 700; }.section-label p { margin: 0; font-size: .58rem; font-weight: 700; letter-spacing: .16em; }.manifesto-content { display: grid; grid-template-columns: 1.8fr .7fr; gap: 3rem; }.display-quote { margin: 0; font-family: var(--display); font-size: clamp(2.6rem, 5.1vw, 5.7rem); font-weight: 800; letter-spacing: -.07em; line-height: 1.12; }.display-quote em { color: var(--tangerine); font-style: normal; }.manifesto-note { align-self: end; max-width: 17rem; border-left: 1px solid var(--ink); padding-left: 1rem; }.manifesto-note p { font-size: .86rem; line-height: 1.85; }.signature-line { display: block; margin-top: 2rem; font-size: .54rem; font-weight: 700; letter-spacing: .12em; }

.system { padding-top: clamp(6rem, 10vw, 10rem); padding-bottom: clamp(6rem, 10vw, 10rem); background: #dbe0c7; }.section-heading { display: grid; grid-template-columns: minmax(8rem, .48fr) 2fr; }.section-heading h2, .intelligence h2, .products h2, .assurance h2, .places h2, .closing h2 { margin: 0; font-family: var(--display); font-size: clamp(2.7rem, 5.2vw, 6.2rem); font-weight: 800; letter-spacing: -.07em; line-height: .98; text-wrap: balance; }.cycle-stage { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: clamp(5rem, 10vw, 10rem); }.cycle-axis { position: absolute; top: 1.35rem; left: 4%; width: 92%; height: 1px; background: rgba(21,24,17,.35); }.cycle-axis::before { content: ""; position: absolute; right: 0; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--tangerine); }.cycle-axis span { position: absolute; left: 0; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--tangerine); }.cycle-card { position: relative; min-height: 20.5rem; padding: 4.6rem 1.25rem 1.25rem; overflow: hidden; background: var(--paper-bright); }.cycle-card:nth-of-type(2) { transform: translateY(2.8rem); background: var(--ink); color: var(--paper-bright); }.cycle-card:nth-of-type(3) { transform: translateY(-1.5rem); background: var(--tangerine); }.cycle-card:nth-of-type(4) { transform: translateY(1.5rem); background: var(--sun); }.cycle-no { position: absolute; top: 1.15rem; left: 1.25rem; font-size: .62rem; font-weight: 700; }.cycle-card h3 { position: relative; z-index: 2; margin: 1.8rem 0 .6rem; font-size: 1.35rem; letter-spacing: -.03em; }.cycle-card p { position: relative; z-index: 2; max-width: 13rem; margin: 0; font-size: .77rem; line-height: 1.75; }.cycle-icon { position: relative; z-index: 2; width: 4rem; height: 4rem; }.cycle-icon i { position: absolute; display: block; background: currentColor; }.icon-grow i:nth-child(1) { width: 2px; height: 3.8rem; left: 2rem; top: .1rem; }.icon-grow i:nth-child(2), .icon-grow i:nth-child(3) { width: 2rem; height: 1.2rem; border-radius: 100% 0 100% 0; top: .6rem; transform: rotate(-36deg); transform-origin: right bottom; }.icon-grow i:nth-child(3) { top: 1.5rem; transform: rotate(43deg) scaleX(-1); }.icon-craft i:nth-child(1) { width: 3.8rem; height: 3.8rem; border: 1px solid currentColor; background: transparent; border-radius: 50%; }.icon-craft i:nth-child(2), .icon-craft i:nth-child(3) { width: 1px; height: 5rem; left: 1.9rem; top: -.6rem; transform: rotate(45deg); }.icon-craft i:nth-child(3) { transform: rotate(-45deg); }.icon-return i { width: 3.1rem; height: 3.1rem; border: 2px solid currentColor; border-left-color: transparent; border-radius: 50%; background: transparent; }.icon-return i:nth-child(2) { left: .05rem; top: -.22rem; width: 0; height: 0; border: .4rem solid transparent; border-right-color: currentColor; background: transparent; transform: rotate(-30deg); }.icon-return i:nth-child(3) { left: 2.8rem; top: 2.75rem; width: 0; height: 0; border: .4rem solid transparent; border-left-color: currentColor; background: transparent; transform: rotate(-30deg); }.icon-share i { width: 1.1rem; height: 1.1rem; border-radius: 50%; }.icon-share i:nth-child(2) { left: 2.7rem; top: 1.5rem; }.icon-share i:nth-child(3) { left: .85rem; top: 3rem; }.icon-share::before, .icon-share::after { content: ""; position: absolute; top: 1.6rem; left: .7rem; width: 2.1rem; height: 1px; background: currentColor; transform: rotate(31deg); transform-origin: left; }.icon-share::after { top: 1.85rem; transform: rotate(-48deg); }.cycle-card::after { content: ""; position: absolute; right: -22%; bottom: -47%; width: 85%; aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%; opacity: .16; }.system-annotation { display: grid; grid-template-columns: .88fr 1.5fr; gap: 3rem; max-width: 67rem; margin: 8.5rem 0 0 auto; }.system-annotation p { max-width: 22rem; margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -.035em; line-height: 1.4; }.annotation-tags { display: flex; flex-wrap: wrap; align-content: start; gap: .5rem; }.annotation-tags span { border: 1px solid rgba(21,24,17,.5); border-radius: 99px; padding: .58rem .72rem; font-size: .58rem; font-weight: 700; letter-spacing: .1em; }

.assurance { padding: clamp(6rem, 11vw, 11rem) 0 0; overflow: hidden; background: var(--ink); color: var(--paper-bright); }.assurance-head { display: grid; grid-template-columns: minmax(8rem,.48fr) 1.45fr .6fr; gap: 2rem; align-items: end; }.section-label-light { color: var(--sprout); }.eyebrow-light { color: var(--sprout); }.assurance-lead { max-width: 16rem; margin: 0 0 .5rem; color: rgba(251,249,242,.67); font-size: .82rem; line-height: 1.85; }.trace-window { position: relative; min-height: 30rem; margin-top: 7rem; padding: 2.5rem var(--edge); overflow: hidden; background: linear-gradient(118deg, #34421b, #242b16 41%, #12150e 75%); }.trace-window::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(198,221,93,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(198,221,93,.1) 1px, transparent 1px); background-size: 4rem 4rem; mask-image: linear-gradient(to right, #000, transparent 90%); }.trace-glow { position: absolute; top: 50%; left: 40%; width: 34rem; height: 34rem; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(244,196,70,.45), transparent 68%); filter: blur(20px); }.trace-grid { position: relative; display: grid; grid-template-columns: .7fr 2.3fr; min-height: 25rem; align-items: center; }.trace-intro { align-self: start; }.trace-intro p { margin: 0; font-family: var(--display); font-size: clamp(1.8rem, 3vw, 3.45rem); font-weight: 800; letter-spacing: -.055em; line-height: .95; }.trace-intro span { display: block; margin-top: 1rem; font-size: .55rem; letter-spacing: .16em; opacity: .65; }.trace-path { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 100%; margin: 0; padding: 0; list-style: none; }.trace-path::before { content: ""; position: absolute; top: 50%; left: 3%; width: 94%; height: 1px; background: linear-gradient(90deg, var(--sprout), var(--tangerine), var(--sun)); }.trace-path li { position: relative; z-index: 1; display: grid; width: 9.3rem; min-height: 10.8rem; padding: 1rem; align-content: end; background: rgba(21,24,17,.85); box-shadow: 0 1rem 2rem rgba(0,0,0,.17); backdrop-filter: blur(.4rem); }.trace-path li:nth-child(2) { transform: translateY(-3rem); }.trace-path li:nth-child(3) { transform: translateY(2rem); }.trace-path li:nth-child(4) { transform: translateY(-2rem); }.trace-path li:nth-child(5) { transform: translateY(1rem); }.trace-path li::before { content: ""; position: absolute; top: -1.18rem; left: 1rem; width: .55rem; height: .55rem; border: 2px solid var(--ink); border-radius: 50%; background: var(--sprout); }.trace-path li:nth-child(2)::before { background: var(--tangerine); }.trace-path li:nth-child(3)::before { background: var(--sun); }.trace-path li span { margin-bottom: auto; color: var(--sprout); font-size: .6rem; }.trace-path strong { font-size: 1rem; }.trace-path small { margin-top: .35rem; color: rgba(251,249,242,.55); font-size: .49rem; letter-spacing: .13em; }.standard-strip { display: flex; min-height: 8.4rem; align-items: center; justify-content: space-between; gap: 2rem; }.standard-strip > p { margin: 0; color: var(--sprout); font-size: .57rem; font-weight: 700; letter-spacing: .16em; }.standard-strip div { display: flex; flex-wrap: wrap; gap: clamp(1rem, 3vw, 3.5rem); }.standard-strip span { color: rgba(251,249,242,.78); font-family: var(--display); font-size: clamp(1.1rem, 1.8vw, 1.8rem); font-weight: 800; letter-spacing: -.04em; }

.intelligence { display: grid; grid-template-columns: .86fr 1.14fr; gap: 2rem; min-height: 51rem; padding-top: clamp(6rem, 12vw, 12rem); padding-bottom: clamp(6rem, 12vw, 12rem); background: var(--paper-bright); }.intelligence-copy { max-width: 38rem; }.intelligence-copy .eyebrow { margin-top: 6.5rem; }.intelligence-copy h2 { max-width: 10em; }.intelligence-copy > p:last-child { max-width: 22rem; margin: 2.5rem 0 0; font-size: .9rem; line-height: 1.9; }.signal-field { position: relative; display: grid; min-height: 38rem; overflow: hidden; border-radius: 50% 50% 0 0; background: radial-gradient(circle at 50% 46%, #687a2e, #2b381a 47%, var(--ink) 82%); place-items: center; }.signal-field::before { content: ""; position: absolute; width: 66%; aspect-ratio: 1; border: 1px solid rgba(198,221,93,.32); border-radius: 50%; }.signal-field::after { content: ""; position: absolute; width: 38%; aspect-ratio: 1; border: 1px solid rgba(244,196,70,.35); border-radius: 50%; }.signal-centre { position: relative; z-index: 2; display: grid; width: 9.5rem; aspect-ratio: 1; border-radius: 50%; background: var(--sun); place-items: center; align-content: center; box-shadow: 0 0 4rem rgba(244,196,70,.38); color: var(--ink); text-align: center; }.signal-centre span { font-family: var(--display); font-size: 3rem; font-weight: 800; letter-spacing: -.1em; }.signal-centre small { font-size: .43rem; font-weight: 800; letter-spacing: .12em; }.signal-card { position: absolute; z-index: 3; display: grid; min-width: 10.5rem; border: 1px solid rgba(251,249,242,.35); background: rgba(21,24,17,.54); padding: .85rem .9rem; color: var(--paper-bright); cursor: pointer; text-align: left; backdrop-filter: blur(.4rem); transition: transform .35s var(--ease-out), border-color .25s, background .25s; }.signal-card:hover, .signal-card:focus-visible { border-color: var(--sprout); background: rgba(42,55,25,.9); transform: translateY(-.3rem); }.signal-card span { color: var(--sprout); font-size: .55rem; }.signal-card strong { margin: .7rem 0 .2rem; font-size: .9rem; }.signal-card small { color: rgba(251,249,242,.6); font-size: .47rem; letter-spacing: .1em; }.signal-card-one { top: 18%; left: 7%; }.signal-card-two { top: 19%; right: 6%; }.signal-card-three { bottom: 18%; left: 6%; }.signal-card-four { right: 8%; bottom: 15%; }.signal-radar { position: absolute; inset: 0; }.signal-radar i { position: absolute; top: 50%; left: 50%; width: 1px; height: 48%; transform-origin: top; background: linear-gradient(var(--sprout), transparent); opacity: .55; }.signal-radar i:nth-child(1) { transform: rotate(28deg); }.signal-radar i:nth-child(2) { transform: rotate(124deg); }.signal-radar i:nth-child(3) { transform: rotate(208deg); }.signal-radar i:nth-child(4) { transform: rotate(293deg); }

.places { display: grid; grid-template-columns: 1.08fr .92fr; min-height: 48rem; background: var(--ink); color: var(--paper-bright); }.places-panel { position: relative; display: grid; padding: clamp(5rem, 9vw, 9rem) var(--edge) 3rem; overflow: hidden; }.places-panel::before { content: ""; position: absolute; top: 0; right: -7rem; width: 17rem; height: 100%; background: repeating-linear-gradient(175deg, transparent 0 1.5rem, rgba(198,221,93,.18) 1.5rem 1.56rem); transform: skewX(-15deg); }.places-copy { position: relative; z-index: 2; }.places h2 { max-width: 9em; margin-top: 6rem; }.places-note { position: relative; z-index: 2; align-self: end; max-width: 21rem; margin: 0; color: rgba(251,249,242,.72); font-size: .9rem; line-height: 1.9; }.place-coordinates { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: .65rem 1.2rem; margin-top: 2.7rem; }.place-coordinates span { font-size: .55rem; letter-spacing: .1em; }.place-coordinates b { color: var(--sprout); font-weight: 600; }.place-visual { position: relative; overflow: hidden; background: linear-gradient(#d8b170 0 8%, #809f49 8% 42%, #385629 42% 77%, #1c2b16 77%); }.sun-disc { position: absolute; top: 12%; left: 20%; width: 18rem; height: 18rem; border-radius: 50%; background: var(--sun); box-shadow: 0 0 5rem rgba(244,196,70,.45); }.field-lines { position: absolute; z-index: 2; right: -7%; bottom: -20%; width: 130%; height: 80%; transform: perspective(40rem) rotateX(58deg) rotateZ(-9deg); transform-origin: bottom; background: repeating-linear-gradient(90deg, transparent 0 2.3rem, rgba(21,24,17,.85) 2.35rem 2.95rem, transparent 3rem 5.2rem), repeating-linear-gradient(0deg, transparent 0 2.3rem, rgba(241,238,228,.25) 2.35rem 2.43rem); }.place-horizon { position: absolute; z-index: 3; top: 34%; width: 100%; height: 20%; background: linear-gradient(175deg, transparent 45%, #263a1d 46% 47%, transparent 48%), radial-gradient(ellipse at 54% 105%, #1b2d15 0 28%, transparent 29%), radial-gradient(ellipse at 8% 115%, #2d481f 0 28%, transparent 29%); }

.products { padding-top: clamp(6rem, 12vw, 12rem); padding-bottom: clamp(6rem, 11vw, 11rem); background: var(--paper); }.products-head { display: grid; grid-template-columns: minmax(8rem,.48fr) 1.25fr .5fr; gap: 2rem; align-items: end; }.products-head h2 { max-width: 10em; }.products-head > p { max-width: 17rem; margin: 0; font-size: .8rem; line-height: 1.85; }.product-marquee { width: calc(100% + (var(--edge) * 2)); margin: clamp(5rem, 9vw, 9rem) 0 3rem calc(var(--edge) * -1); overflow: hidden; border-block: 1px solid var(--line); padding: 1.15rem 0; }.marquee-track { display: flex; width: max-content; animation: marquee 28s linear infinite; }.marquee-track span { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 1.2rem; padding-right: 1.2rem; font-family: var(--display); font-size: clamp(1.5rem, 3vw, 3.3rem); font-weight: 800; letter-spacing: -.06em; white-space: nowrap; }.marquee-track i { width: .52rem; height: .52rem; border-radius: 50%; background: var(--tangerine); }.product-card-grid { display: grid; grid-template-columns: 1.2fr .95fr .95fr 1.1fr; gap: .8rem; }.product-card { position: relative; min-height: 24rem; overflow: hidden; padding: 1.3rem; }.product-card > span { display: block; font-size: .58rem; font-weight: 700; }.product-card h3 { position: relative; z-index: 2; margin: auto 0 .2rem; padding-top: 13.5rem; font-size: clamp(1.2rem, 1.8vw, 1.8rem); letter-spacing: -.05em; }.product-card p { position: relative; z-index: 2; margin: 0; font-size: .52rem; font-weight: 700; letter-spacing: .12em; }.product-card-orange { background: var(--tangerine); }.product-card-cream { background: #e7e4d5; }.product-card-green { background: var(--moss); }.product-card-dark { background: var(--ink); color: var(--paper-bright); }.vegetable-shape { position: absolute; }.shape-carrot { top: 2.5rem; right: 13%; width: 7rem; height: 13.6rem; border-radius: 80% 12% 70% 16%; transform: rotate(33deg); background: linear-gradient(90deg, #b73310, #ff9a40 55%, #ffc16a); box-shadow: inset 1.3rem 0 1rem rgba(109,29,5,.23); }.shape-carrot::before { content: ""; position: absolute; top: -3rem; left: 1.2rem; width: 5.5rem; height: 4rem; background: repeating-conic-gradient(from 20deg, #264e21 0 20deg, transparent 21deg 44deg); transform: rotate(-57deg); }.shape-pea { top: 5rem; left: 13%; width: 14rem; height: 6.5rem; border: 1rem solid #79982f; border-top-color: transparent; border-radius: 0 0 100% 80%; transform: rotate(-23deg); }.shape-pea::before { content: "●  ●  ●"; position: absolute; top: -1.1rem; left: 1rem; color: #a7c653; font-size: 1.8rem; letter-spacing: .3rem; white-space: nowrap; transform: rotate(19deg); }.shape-leaf { top: 4rem; right: -1.2rem; width: 15rem; height: 13rem; border-radius: 100% 0 100% 0; transform: rotate(-18deg); background: linear-gradient(145deg, #d6ea71, #5d852d 48%, #2a551d); }.shape-leaf::before { content: ""; position: absolute; top: 7.5rem; left: -1rem; width: 18rem; height: 1px; background: rgba(249,253,191,.7); transform: rotate(18deg); }.shape-leaf::after { content: ""; position: absolute; inset: 15% 5% 5% 25%; background: repeating-linear-gradient(-50deg, transparent 0 1.4rem, rgba(249,253,191,.5) 1.45rem 1.5rem); transform: rotate(18deg); }.product-cross { position: absolute; top: 15%; right: 11%; color: var(--sprout); font-family: var(--display); font-size: 14rem; font-weight: 200; line-height: 1; }

.closing { position: relative; display: grid; min-height: 47rem; overflow: hidden; background: linear-gradient(135deg, #3a4a20, #171c11 59%, #0d0f0b); color: var(--paper-bright); place-items: center; text-align: center; }.closing::before { content: ""; position: absolute; inset: 0; opacity: .3; background: repeating-radial-gradient(circle at 50% 80%, transparent 0 2rem, rgba(198,221,93,.2) 2.06rem 2.13rem); }.closing-content { position: relative; z-index: 2; }.closing-content .eyebrow { justify-content: center; }.closing h2 { margin-bottom: 3rem; font-size: clamp(3.1rem, 6vw, 7.2rem); }.closing-link { padding-bottom: .85rem; }.closing-link span { display: inline-block; margin-left: .7rem; color: var(--sprout); font-size: 1.2rem; transition: transform .25s var(--ease-out); }.closing-link:hover span { transform: translateY(-.3rem); }.closing-planet { position: absolute; z-index: 1; bottom: -32rem; width: 53rem; height: 53rem; border: 1px solid rgba(198,221,93,.32); border-radius: 50%; background: repeating-radial-gradient(circle at 40% 35%, rgba(198,221,93,.18) 0 1px, transparent 2px 10px); box-shadow: 0 0 8rem rgba(198,221,93,.12); }.closing-planet::before { content: ""; position: absolute; inset: 18%; border: 1px solid rgba(244,196,70,.28); border-radius: 50%; }.closing-planet span { position: absolute; width: 1rem; height: 1rem; border-radius: 50%; background: var(--sprout); box-shadow: 0 0 1rem var(--sprout); }.closing-planet span:nth-child(1) { left: 15%; top: 26%; }.closing-planet span:nth-child(2) { right: 20%; top: 45%; background: var(--sun); box-shadow: 0 0 1rem var(--sun); }.closing-planet span:nth-child(3) { left: 42%; bottom: 16%; background: var(--tangerine); box-shadow: 0 0 1rem var(--tangerine); }.closing-meta { position: absolute; z-index: 2; bottom: 1.6rem; margin: 0; font-size: .52rem; letter-spacing: .16em; opacity: .65; }.site-footer { display: flex; min-height: 4.8rem; padding: 0 var(--edge); align-items: center; justify-content: space-between; background: var(--paper-bright); color: var(--ink); font-size: .56rem; font-weight: 700; letter-spacing: .1em; }

.js [data-reveal] { opacity: 0; transform: translateY(2.5rem); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }.js [data-reveal].is-visible { opacity: 1; transform: translateY(0); }.js .cycle-card:nth-of-type(2), .js .cycle-card:nth-of-type(3), .js .cycle-card:nth-of-type(4) { transition-delay: var(--delay, 0ms); }.js .cycle-card:nth-of-type(2) { --delay: 80ms; }.js .cycle-card:nth-of-type(3) { --delay: 160ms; }.js .cycle-card:nth-of-type(4) { --delay: 240ms; }
.js.static-mode [data-reveal] { opacity: 1; transform: none; transition: none; }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes orbit-slow { to { transform: translate(-50%, -50%) rotate(336deg); } }
@keyframes breathe { 50% { transform: translate(-50%, -50%) scale(1.06); } }
.js:not(.static-mode) .seed-ring { animation: orbit-slow 22s linear infinite; }.js:not(.static-mode) .seed-ring-b { animation-duration: 17s; animation-direction: reverse; }.js:not(.static-mode) .seed-ring-c { animation-duration: 25s; }.js:not(.static-mode) .seed-core { animation: breathe 5s ease-in-out infinite; }.static-mode .marquee-track { animation-play-state: paused; }.static-mode .seed-ring { transform: translate(-50%, -50%) rotate(336deg); }.static-mode .seed-ring-b { transform: translate(-50%, -50%) rotate(-325deg); }.static-mode .seed-ring-c { transform: translate(-50%, -50%) rotate(312deg); }

@media (max-width: 980px) {
  .site-header { height: 5.8rem; padding-top: 1rem; padding-bottom: 1rem; }.site-nav { display: none; }.hero { min-height: 52rem; padding-top: 5.8rem; }.hero-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto; padding-top: 1.7rem; }.hero-eyebrow { grid-column: 1 / -1; }.hero-copy { grid-row: 2; padding-top: 1rem; }.hero-object { grid-row: 2; width: min(42vw, 25rem); }.hero-facts { grid-column: 1 / -1; grid-row: 3; display: flex; width: 100%; gap: 1rem; justify-content: space-between; }.fact { display: block; flex: 1; }.fact span { display: block; margin-top: .35rem; }.manifesto, .section-heading, .assurance-head, .products-head { grid-template-columns: 1fr; }.section-label { margin-bottom: 2rem; }.manifesto-content { grid-template-columns: 1.35fr .65fr; }.cycle-stage { grid-template-columns: 1fr 1fr; }.cycle-axis { display: none; }.cycle-card:nth-of-type(2), .cycle-card:nth-of-type(3), .cycle-card:nth-of-type(4) { transform: none; }.system-annotation { grid-template-columns: 1fr; margin-top: 5rem; }.assurance-head { gap: 0; }.assurance-lead { margin-top: 2rem; }.trace-grid { grid-template-columns: 1fr; gap: 3rem; }.trace-path li { width: 18%; min-height: 9.2rem; padding: .7rem; }.trace-path strong { font-size: .78rem; }.intelligence { grid-template-columns: 1fr; }.intelligence-copy .eyebrow { margin-top: 2.8rem; }.signal-field { min-height: 34rem; }.places { grid-template-columns: 1fr; }.places-panel { min-height: 36rem; }.place-visual { min-height: 27rem; }.products-head > p { margin-top: 2rem; }.product-card-grid { grid-template-columns: 1fr 1fr; }.product-card { min-height: 19rem; }.product-card h3 { padding-top: 9rem; }
}
@media (max-width: 620px) {
  .site-header { height: 5rem; }.brand { min-width: 0; }.brand-mark { width: 2rem; height: 2rem; }.brand-type strong { font-size: 1.1rem; }.brand-type small { font-size: .45rem; }.motion-toggle { padding: .5rem .65rem; }.motion-label { font-size: .56rem; }.hero { min-height: 46rem; padding-top: 5rem; }.hero-grid { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; padding-top: 1.25rem; }.hero-copy { grid-row: 2; }.hero-kicker { margin-bottom: .9rem; }h1 { font-size: clamp(3.1rem, 13.5vw, 4.6rem); }.hero-summary { max-width: 21rem; font-size: .82rem; line-height: 1.75; }.hero-object { grid-row: 3; align-self: end; justify-self: end; width: min(65vw, 19rem); margin-top: -1.5rem; }.object-caption { right: 0; }.hero-facts { grid-row: 4; gap: .6rem; }.fact strong { font-size: .84rem; }.fact span { font-size: .54rem; }.hero-scroll { display: none; }.manifesto { grid-template-columns: 1fr; }.manifesto-content { grid-template-columns: 1fr; gap: 3rem; }.display-quote { font-size: clamp(2.4rem, 11.3vw, 4rem); }.manifesto-note { max-width: 20rem; }.section-heading h2, .intelligence h2, .products h2, .assurance h2, .places h2 { font-size: clamp(2.55rem, 11vw, 4.1rem); }.cycle-stage { grid-template-columns: 1fr; gap: .8rem; margin-top: 4rem; }.cycle-card { min-height: 14.5rem; }.cycle-card h3 { margin-top: .8rem; }.system-annotation { margin-top: 3.5rem; }.assurance { padding-top: 5rem; }.trace-window { min-height: 38rem; margin-top: 4rem; padding-top: 1.7rem; }.trace-grid { min-height: 34rem; gap: 1rem; }.trace-path { flex-wrap: wrap; gap: .6rem; align-content: center; padding: 1.4rem 0; }.trace-path::before { top: 50%; width: 88%; left: 6%; transform: rotate(90deg); }.trace-path li { width: calc(50% - .3rem); min-height: 7rem; transform: none !important; }.trace-path li::before { display: none; }.standard-strip { display: block; padding-top: 2rem; padding-bottom: 2rem; }.standard-strip div { margin-top: 1.4rem; }.signal-field { min-height: 31rem; margin-inline: calc(var(--edge) * -1); border-radius: 0; }.signal-card { min-width: 7.8rem; padding: .65rem; }.signal-card strong { font-size: .76rem; }.signal-card small { font-size: .4rem; }.signal-card-one { left: 4%; }.signal-card-two { right: 4%; }.signal-card-three { left: 4%; }.signal-card-four { right: 4%; }.places-panel { min-height: 32rem; }.places h2 { margin-top: 3.5rem; }.places-note { align-self: center; }.place-visual { min-height: 21rem; }.products-head { gap: 0; }.products-head > p { margin-top: 1.5rem; }.product-card-grid { grid-template-columns: 1fr; }.product-card { min-height: 16rem; }.product-card h3 { padding-top: 7.5rem; }.product-marquee { margin-top: 4rem; }.closing { min-height: 38rem; }.closing h2 { font-size: clamp(2.8rem, 12vw, 4.8rem); }.closing-planet { bottom: -22rem; width: 39rem; height: 39rem; }.site-footer { display: grid; gap: .55rem; padding-top: 1rem; padding-bottom: 1rem; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }.js [data-reveal] { opacity: 1; transform: none; transition: none; }.marquee-track, .seed-ring, .seed-core { animation: none !important; }.hero-object * { animation: none !important; }
}

/* 2026-08-12 visual and motion refinement: calm, tactile, low-saturation. */
.motion-toggle { border-color: rgba(246,243,235,.3); }.motion-dot { box-shadow: 0 0 0 .17rem rgba(184,189,138,.12); }
.hero { background: radial-gradient(circle at 74% 43%, #363a2e 0, #22251f 22%, var(--ink) 63%); }.hero #ecosystem-canvas { opacity: .64; }.hero-noise { opacity: .052; }.hero-orbit { border-color: rgba(184,189,138,.14); }.hero-orbit-two { border-color: rgba(173,99,72,.13); }
.hero-summary, .assurance-lead, .places-note { color: rgba(246,243,235,.72); }.hero-link span, .closing-link { border-color: rgba(246,243,235,.5); }.hero-link i { background: var(--tangerine); }.hero-link:hover i { background: var(--sun); color: var(--ink); }
.hero-object { --parallax-x: 0px; --parallax-y: 0px; transform: translate3d(var(--parallax-x), var(--parallax-y), 0); transition: transform 1.25s cubic-bezier(.16,1,.3,1); }.seed-core { background: radial-gradient(circle at 30% 28%, #eee3b9 0 6%, var(--sun) 26%, var(--tangerine) 63%, var(--clay) 100%); box-shadow: 0 0 4rem rgba(196,173,114,.22), inset -.8rem -1rem 1.6rem rgba(75,47,35,.24); }.seed-ring { border-color: rgba(184,189,138,.36); }.seed-ring-b { border-color: rgba(173,99,72,.42); }.seed-ring-c { border-color: rgba(196,173,114,.38); }.seed-ring::before { box-shadow: 0 0 .8rem rgba(184,189,138,.55); }.seed-ring-b::before { box-shadow: 0 0 .8rem rgba(173,99,72,.48); }.seed-ring-c::before { box-shadow: 0 0 .8rem rgba(196,173,114,.48); }
.system { background: #d7d8c8; }.trace-window { background: linear-gradient(118deg, #36382b, #25271f 41%, #151610 75%); }.trace-window::before { background-image: linear-gradient(rgba(184,189,138,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(184,189,138,.07) 1px, transparent 1px); }.trace-glow { background: radial-gradient(circle, rgba(196,173,114,.23), transparent 68%); }.trace-path li { background: rgba(23,25,20,.84); }
.signal-field { background: radial-gradient(circle at 50% 46%, #626b4e, #2a2e23 47%, var(--ink) 82%); }.signal-field::before { border-color: rgba(184,189,138,.26); }.signal-field::after { border-color: rgba(196,173,114,.28); }.signal-centre { box-shadow: 0 0 4rem rgba(196,173,114,.22); }.signal-card:hover, .signal-card:focus-visible { background: rgba(48,54,42,.9); }
.places-panel::before { background: repeating-linear-gradient(175deg, transparent 0 1.5rem, rgba(184,189,138,.14) 1.5rem 1.56rem); }.place-visual { background: linear-gradient(#c6b58a 0 8%, #829064 8% 42%, #4e6041 42% 77%, #20281c 77%); }.sun-disc { box-shadow: 0 0 5rem rgba(196,173,114,.26); }.field-lines { background: repeating-linear-gradient(90deg, transparent 0 2.3rem, rgba(23,25,20,.76) 2.35rem 2.95rem, transparent 3rem 5.2rem), repeating-linear-gradient(0deg, transparent 0 2.3rem, rgba(236,232,221,.18) 2.35rem 2.43rem); }.place-horizon { background: linear-gradient(175deg, transparent 45%, #34472d 46% 47%, transparent 48%), radial-gradient(ellipse at 54% 105%, #243720 0 28%, transparent 29%), radial-gradient(ellipse at 8% 115%, #3a5130 0 28%, transparent 29%); }
.marquee-track { animation-duration: 52s; }.product-card-cream { background: #e3dfd2; }.shape-carrot { background: linear-gradient(90deg, #70412f, #b97453 55%, #d1a27a); box-shadow: inset 1.3rem 0 1rem rgba(75,47,35,.2); }.shape-carrot::before { background: repeating-conic-gradient(from 20deg, #3f5939 0 20deg, transparent 21deg 44deg); }.shape-pea { border-color: #71815a; border-top-color: transparent; }.shape-pea::before { color: #bbc39b; }.shape-leaf { background: linear-gradient(145deg, #c3c49b, #687a56 48%, #3d5334); }.shape-leaf::before { background: rgba(232,232,207,.58); }.shape-leaf::after { background: repeating-linear-gradient(-50deg, transparent 0 1.4rem, rgba(232,232,207,.4) 1.45rem 1.5rem); }
.closing { background: linear-gradient(135deg, #37402f, #1b1e17 59%, #10110e); }.closing::before { background: repeating-radial-gradient(circle at 50% 80%, transparent 0 2rem, rgba(184,189,138,.14) 2.06rem 2.13rem); }.closing-planet { border-color: rgba(184,189,138,.24); background: repeating-radial-gradient(circle at 40% 35%, rgba(184,189,138,.12) 0 1px, transparent 2px 10px); box-shadow: 0 0 8rem rgba(184,189,138,.08); }.closing-planet::before { border-color: rgba(196,173,114,.22); }.closing-planet span { box-shadow: 0 0 .8rem rgba(184,189,138,.55); }
.js [data-reveal] { transform: translateY(1.35rem); transition-duration: .82s; }html.js.static-mode [data-reveal] { opacity: 1; transform: none; transition: none; }.magnetic-link { --magnetic-x: 0px; --magnetic-y: 0px; transform: translate3d(var(--magnetic-x), var(--magnetic-y), 0); transition: transform .42s cubic-bezier(.16,1,.3,1); will-change: transform; }.magnetic-link.is-magnetic-active { transition-duration: .14s; }
.signal-radar::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 18deg, transparent 0 70%, rgba(184,189,138,.13) 79%, transparent 88%); animation: radar-sweep 18s linear infinite; }.js:not(.static-mode) .hero.hero-ready .hero-object { animation: object-emerge 1.15s .08s cubic-bezier(.16,1,.3,1) both; }.js:not(.static-mode) .seed-ring { animation-duration: 42s; }.js:not(.static-mode) .seed-ring-b { animation-duration: 34s; }.js:not(.static-mode) .seed-ring-c { animation-duration: 48s; }.js:not(.static-mode) .seed-core { animation-duration: 9.5s; }
@keyframes object-emerge { from { opacity: 0; filter: blur(5px); } to { opacity: 1; filter: blur(0); } }@keyframes radar-sweep { to { transform: rotate(360deg); } }.static-mode .signal-radar::after { animation: none; }.static-mode .hero-object { --parallax-x: 0px; --parallax-y: 0px; }
@media (max-width: 620px) { .hero #ecosystem-canvas { opacity: .52; }.hero-object { opacity: .8; }.signal-radar::after { animation: none; }.magnetic-link { transform: none !important; } }
@media (prefers-reduced-motion: reduce) { .signal-radar::after { animation: none !important; }.magnetic-link { transform: none !important; } }