/* Canestack patterns. Generated by gen.py; the art is masks, so it takes its colour from the theme. */
:root { --pat-lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120' fill='black'%3E%3Crect x='18.5' y='0' width='3' height='120' rx='1.5'/%3E%3Crect x='17.3' y='19.2' width='5.4' height='1.6' rx='.8'/%3E%3Crect x='17.3' y='59.2' width='5.4' height='1.6' rx='.8'/%3E%3Crect x='17.3' y='99.2' width='5.4' height='1.6' rx='.8'/%3E%3Crect x='78.5' y='0' width='3' height='120' rx='1.5'/%3E%3Crect x='77.3' y='19.2' width='5.4' height='1.6' rx='.8'/%3E%3Crect x='77.3' y='59.2' width='5.4' height='1.6' rx='.8'/%3E%3Crect x='77.3' y='99.2' width='5.4' height='1.6' rx='.8'/%3E%3Crect x='0' y='58.5' width='120' height='3' rx='1.5'/%3E%3Cpath d='M20 60 L80 0' stroke='black' stroke-width='1.6' fill='none'/%3E%3Cpath d='M80 120 L20 60' stroke='black' stroke-width='1.6' fill='none' opacity='.5'/%3E%3Cpath d='M15 55 l10 10 M25 55 l-10 10' stroke='black' stroke-width='1.4'/%3E%3Cpath d='M75 55 l10 10 M85 55 l-10 10' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E"); --pat-node: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='1.3' fill='black'/%3E%3C/svg%3E"); }

/* Pattern ink: theme-aware strengths for the masks above. */
:root { --pat-ink: color-mix(in srgb, var(--text) 6%, transparent); --pat-ink-strong: color-mix(in srgb, var(--text) 15%, transparent); }
:root[data-theme="dark"] { --pat-ink: color-mix(in srgb, var(--text) 6%, transparent); --pat-ink-strong: color-mix(in srgb, var(--text) 13%, transparent); }

/* A pattern layer: the element carries the fade, its ::before carries the tiled art. */
.pat { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.pat::before { content: ""; position: absolute; inset: -60px; background: var(--pat-ink); }
.pat-lattice::before { -webkit-mask: var(--pat-lattice) 0 0 / 120px 120px repeat; mask: var(--pat-lattice) 0 0 / 120px 120px repeat; }
.pat-node::before { background: var(--pat-ink-strong); -webkit-mask: var(--pat-node) 0 0 / 28px 28px repeat; mask: var(--pat-node) 0 0 / 28px 28px repeat; }
@media (prefers-reduced-motion: no-preference) {
  .pat-lattice::before { animation: pat-drift 60s linear infinite; }
  @keyframes pat-drift { to { transform: translate(120px, 120px); } }
}

/* Hero: scaffolding behind the mark, fading toward the copy. */
.hero { position: relative; isolation: isolate; overflow: hidden; }
/* Bamboo scaffolding behind the mark: lashed poles, ledgers and braces, fading toward the headline. */
.scaffold-art { position: absolute; z-index: -1; top: 0; right: 0; width: min(900px, 70%); height: 100%; pointer-events: none;
  -webkit-mask-image: linear-gradient(to left, #000 35%, transparent 95%); mask-image: linear-gradient(to left, #000 35%, transparent 95%); }
.scaffold-art { opacity: .55; }
:root[data-theme="dark"] .scaffold-art { opacity: .35; }
.scaffold-art .cane { fill: color-mix(in srgb, var(--c2) 13%, transparent); }
.scaffold-art .node { stroke: color-mix(in srgb, var(--c2) 30%, transparent); }
.scaffold-art .lash rect { fill: color-mix(in srgb, var(--text) 25%, transparent); }
.scaffold-art .l0 { color: var(--c1); } .scaffold-art .l1 { color: var(--c2); } .scaffold-art .l2 { color: var(--c3); }
@media (max-width: 960px) { .scaffold-art { width: 100%; opacity: .6; } }
/* Hero mark: three canes bundled together. */
.hero-bundle { width: min(300px, 70%); height: auto; }
@media (prefers-reduced-motion: no-preference) { .hero-bundle { animation: bundle-float 7s ease-in-out infinite; } @keyframes bundle-float { 50% { transform: translateY(-8px); } } }
@media (max-width: 960px) { .hero-bundle { width: 170px; } }
/* Previous hero illustration (unused). */
.hero-cane { width: min(380px, 85%); height: auto; overflow: visible; }
.hero-cane .hc-leaf { transform-box: fill-box; transform-origin: 100% 50%; }
.hero-cane .hc-leaf { transform-origin: 0% 50%; }
@media (prefers-reduced-motion: no-preference) {
  .hero-cane .hc-leaf { animation: leaf 5s ease-in-out infinite alternate; }
  .hero-cane .hc-stack { animation: stack-bob 6s ease-in-out infinite; }
  @keyframes leaf { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } }
  @keyframes stack-bob { 50% { transform: translateY(-5px); } }
}
@media (max-width: 960px) { .hero-cane { width: 220px; } }

/* What we work on: the three tiles of the mark, outlined, behind the heading. */
#work { position: relative; isolation: isolate; overflow: hidden; }
.tiles-art { position: absolute; z-index: -1; right: max(24px, calc(50% - 600px)); top: 28px; width: 240px; height: auto; opacity: .55; pointer-events: none; }
.tiles-art path { fill: none; stroke-width: 1.5; }
.tiles-art .t1 { stroke: var(--c1); } .tiles-art .t2 { stroke: var(--c2); } .tiles-art .t3 { stroke: var(--c3); }
.tiles-art .rail { stroke: var(--pat-ink-strong); stroke-dasharray: 3 5; }
@media (max-width: 960px) { .tiles-art { display: none; } }

/* Cards: a soft spotlight follows the pointer, and the colour bar grows on hover. */
.pillar, .contacts a { position: relative; overflow: hidden; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.pillar::after, .contacts a::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--c2) 14%, transparent), transparent 70%); }
.pillar:hover, .contacts a:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--c2) 40%, var(--line)); }
.pillar:hover::after, .contacts a:hover::after { opacity: 1; }
.pillar .dot { transition: width .35s ease; }
.pillar:hover .dot { width: 64px; }

/* Stormglass: weather-map isobars in the product's own colours. */
.iso-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.6) 40%, transparent 75%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.6) 40%, transparent 75%); }
.iso { fill: none; stroke-width: 1.1; opacity: .22; }
.iso0 { stroke: var(--c1); } .iso1 { stroke: var(--c2); } .iso2 { stroke: var(--c3); }
@media (prefers-reduced-motion: no-preference) {
  .iso-art { animation: iso-drift 40s ease-in-out infinite alternate; }
  @keyframes iso-drift { to { transform: translateX(-40px); } }
}

/* Story: a grove of canes rising behind the quote, swaying slightly. */
#story { position: relative; isolation: isolate; overflow: hidden; }
.bamboo-art { position: absolute; z-index: -1; left: max(0px, calc(50% - 760px)); bottom: 0; width: 520px; height: 100%; pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, #000 30%, transparent 95%); mask-image: linear-gradient(to top, #000 30%, transparent 95%); }
.bamboo-art .cane { fill: color-mix(in srgb, var(--c2) 16%, transparent); }
.bamboo-art .node { fill: color-mix(in srgb, var(--c2) 34%, transparent); }
.bamboo-art .leaf { fill: color-mix(in srgb, var(--c1) 28%, transparent); }
.bamboo-art .stalk { transform-box: fill-box; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .bamboo-art .stalk { animation: sway 8s ease-in-out infinite alternate; animation-delay: calc(-1 * var(--d)); }
  @keyframes sway { from { transform: rotate(-.8deg); } to { transform: rotate(.9deg); } }
}
@media (max-width: 960px) { .bamboo-art { width: 100%; left: 0; opacity: .6; } }

/* Principles: a node grid, faded at the edges. */
#principles { position: relative; isolation: isolate; }
#principles .pat { -webkit-mask-image: radial-gradient(60% 70% at 85% 30%, #000 10%, transparent 70%); mask-image: radial-gradient(60% 70% at 85% 30%, #000 10%, transparent 70%); }

/* Roadmap: the timeline is a bamboo stem, each milestone a node on it. */
.timeline { position: relative; padding-left: 40px; }
.timeline::before { content: ""; position: absolute; left: 12px; top: 6px; bottom: 6px; width: 6px; border-radius: 3px;
  background: linear-gradient(to bottom, var(--c1), var(--c2) 50%, var(--c3)); opacity: .85; }
.timeline li { position: relative; }
.timeline li::before { content: ""; position: absolute; left: -32px; top: 21px; width: 14px; height: 4px; border-radius: 2px; background: var(--bg-alt); box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 25%, transparent); }
.timeline li:first-child::before { background: var(--c2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c2) 30%, transparent); }

/* Contact and closing call to action. */
#contact { position: relative; isolation: isolate; overflow: hidden; }
#contact .pat { -webkit-mask-image: linear-gradient(to left, #000, transparent 60%); mask-image: linear-gradient(to left, #000, transparent 60%); opacity: .8; }
.cta { position: relative; isolation: isolate; overflow: hidden; }
.cta .pat { -webkit-mask-image: radial-gradient(50% 120% at 50% 50%, transparent 35%, #000 80%); mask-image: radial-gradient(50% 120% at 50% 50%, transparent 35%, #000 80%); }

/* Scroll reveal. Only runs when the script has marked the page; content is visible without it. */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--rd, 0s); }
  .js-reveal [data-reveal].in { opacity: 1; transform: none; }
}

/* Buttons: square corners. The gradient is painted under the border too, so its edges stay clean. */
.btn, .btn-sm { border-radius: 0; }
.btn-primary { background-origin: border-box; }
/* Card colour bars: square ends to match the buttons. */
.pillar .dot { border-radius: 0; }

/* Stormglass windows as a carousel: one large in front, the other two tilted back on either side.
   Applies only once the script has given each window a position; without it the cascade stays. */
.sg { overflow-x: clip; }
.stack.carousel { aspect-ratio: 1 / .43; margin-top: 56px; perspective: 1800px; isolation: isolate; }
.stack.carousel::before { content: ""; position: absolute; inset: 8% 12% 0; z-index: -1; filter: blur(60px); opacity: .5;
  background: radial-gradient(40% 50% at 30% 50%, color-mix(in srgb, #FFB020 55%, transparent), transparent 70%),
              radial-gradient(40% 50% at 70% 50%, color-mix(in srgb, #E2457F 45%, transparent), transparent 70%); }
.stack.carousel::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: -6%; height: 40px; z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.18), transparent 70%); }
.stack.carousel .stack-win { left: 50%; top: 0; width: 70%; transform-origin: 50% 50%;
  transition: transform .7s cubic-bezier(.2,.7,.2,1), opacity .5s ease, filter .5s ease, box-shadow .5s ease; }
.stack.carousel .stack-win[data-pos="center"] { z-index: 3; transform: translateX(-50%); box-shadow: 0 2px 6px rgba(0,0,0,.12), 0 40px 80px -20px rgba(0,0,0,.35); }
.stack.carousel .stack-win[data-pos="left"]   { z-index: 1; transform: translateX(-84%) translateY(7%) scale(.72) rotateY(22deg); opacity: .8; filter: saturate(.75); cursor: pointer; }
.stack.carousel .stack-win[data-pos="right"]  { z-index: 1; transform: translateX(-16%) translateY(7%) scale(.72) rotateY(-22deg); opacity: .8; filter: saturate(.75); cursor: pointer; }
.stack.carousel .stack-win[data-pos="left"]:hover, .stack.carousel .stack-win[data-pos="right"]:hover { opacity: 1; filter: none; }
.stack.carousel .stack-win[data-pos="center"]:hover { transform: translateX(-50%) translateY(-4px); }
.stack.carousel .stack-win[data-pos] img { cursor: inherit; }
.stack.carousel .stack-win[data-pos="center"] img { cursor: zoom-in; }

.stack-tabs { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
.stack-tabs button { font: 600 .9rem/1 var(--font); color: var(--muted); background: var(--panel); border: 1px solid var(--line); padding: 10px 18px; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.stack-tabs button:hover { color: var(--text); border-color: var(--faint); }
.stack-tabs button[aria-selected="true"] { color: #111214; border-color: transparent; background: var(--grad); background-origin: border-box; }

@media (max-width: 760px) {
  .stack.carousel { aspect-ratio: 1 / .66; }
  .stack.carousel .stack-win { width: 100%; }
  /* Hidden side windows sit behind the front one, so they cannot widen the page. */
  .stack.carousel .stack-win[data-pos="left"], .stack.carousel .stack-win[data-pos="right"] { opacity: 0; pointer-events: none; transform: translateX(-50%) scale(.9); }
}
@media (prefers-reduced-motion: reduce) { .stack.carousel .stack-win { transition: none; } }
/* With the tabs naming each window, the labels on the windows themselves are redundant. */
.stack.carousel .stack-label { display: none; }

/* Roadmap stem drawn like the logo's canes: a rounded stalk with a highlight and a cut top,
   each milestone a node ring, the current one lashed with cord. */
.timeline { padding-left: 48px; }
.timeline::before { left: 10px; top: -10px; bottom: 4px; width: 14px; border-radius: 0 0 7px 7px; opacity: 1;
  background:
    linear-gradient(to right, rgba(0,0,0,.18), rgba(255,255,255,.35) 30%, rgba(255,255,255,0) 55%, rgba(0,0,0,.22)),
    linear-gradient(to bottom, #D6F27A, #6ED48F 50%, #3FC0BA);
  clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 100%); }
.timeline li::before { left: -42px; top: 22px; width: 22px; height: 5px; border-radius: 3px;
  background: color-mix(in srgb, #1E6B45 80%, transparent); box-shadow: none; }
.timeline li:first-child::before { height: 12px; top: 18px; border-radius: 4px; box-shadow: none;
  background: repeating-linear-gradient(115deg, #5A4A33 0 3px, #8A7552 3px 6px); }

/* Roadmap stem, flat: one green, a cut top, darker node rings; the current milestone is a wider ring. */
.timeline::before { background: var(--c2); width: 12px; left: 11px; border-radius: 0 0 6px 6px; clip-path: polygon(0 8px, 100% 0, 100% 100%, 0 100%); }
.timeline li::before { left: -41px; width: 20px; height: 4px; top: 23px; border-radius: 2px; background: color-mix(in srgb, var(--c2) 55%, #0B3B24); box-shadow: none; }
.timeline li:first-child::before { height: 8px; top: 21px; border-radius: 3px; background: color-mix(in srgb, var(--c2) 55%, #0B3B24); }