/* Pascat brand: the jungle scene, the black panther, the green-eyed wordmark.
   Light header with the real logo, jungle hero with a solid copy panel and the panther walking the ground line,
   then alternating parchment, white and canopy sections. One lime accent taken from the logo eyes. */
:root {
  --canopy: #0B2A1F;
  --canopy-2: #134032;
  --parchment: #F4F1E8;
  --white: #ffffff;
  --ink: #1A1F1C;
  --leaf: #0F5B3D;
  --lime: #C9F23C;
  --mist: #A9C2B5;
  --slate: #56605A;
  --line-dark: rgba(169, 194, 181, 0.28);
  --line-light: rgba(26, 31, 28, 0.14);
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --max: 74rem;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--body); font-size: 1.0625rem; line-height: 1.6; overflow-wrap: normal; word-break: normal; hyphens: manual; }
img, svg { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.1; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--leaf); outline-offset: 3px; border-radius: 4px; }
.dark :focus-visible, .hero :focus-visible { outline-color: var(--lime); }

.skip { position: absolute; left: -999px; top: 0; background: var(--lime); color: var(--ink); padding: .75rem 1rem; z-index: 60; font-weight: 600; }
.skip:focus { left: var(--gutter); top: .5rem; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.dark { background: var(--canopy); color: var(--parchment); position: relative; overflow: hidden; }
.tone { background: var(--parchment); }
.label { font-family: var(--mono); font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--leaf); }
.dark .label, .hero .label { color: var(--lime); }
.h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); letter-spacing: -.005em; }
.lede { max-width: 40rem; font-size: 1.1875rem; color: var(--slate); }
.dark .lede { color: var(--mist); }
.head { display: grid; gap: .875rem; margin-bottom: 2.75rem; }
.mt-s { margin-top: .875rem; }
.mt-m { margin-top: 1.125rem; }
.mb-s { margin-bottom: .75rem; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .75rem 1.5rem; border-radius: 8px; font: 600 1rem var(--body); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background-color .15s ease, transform .15s ease; }
.btn-lime { background: var(--lime); color: var(--ink); }
.btn-lime:hover { background: #d8f86a; transform: translateY(-1px); }
.btn-leaf { background: var(--leaf); color: #fff; }
.btn-leaf:hover { background: #0b4a31; }
.btn-line { border-color: var(--lime); color: var(--lime); }
.btn-line:hover { background: rgba(201, 242, 60, .14); }
.cta-row { display: flex; flex-wrap: wrap; gap: .875rem; margin-top: 2rem; }

/* Header: real logo on white */
.site-header { background: var(--white); border-bottom: 1px solid var(--line-light); position: sticky; top: 0; z-index: 50; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; }
.brand { display: block; line-height: 0; }
.brand img { height: 2.25rem; width: auto; }
.nav { display: none; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .125rem; align-items: center; }
.nav a { display: block; padding: .75rem .9rem; text-decoration: none; font-weight: 500; font-size: .9375rem; border-radius: 8px; color: var(--ink); }
.nav a:hover { background: var(--parchment); }
.nav a.btn { color: #fff; margin-left: .5rem; }
.nav a.btn:hover { background: #0b4a31; }
.menu-btn { min-height: 2.75rem; min-width: 2.75rem; padding: 0 1rem; background: var(--white); color: var(--ink); border: 1.5px solid #7b857e; border-radius: 10px; font: 600 .9375rem var(--body); cursor: pointer; }
.mobile-nav { display: none; border-top: 1px solid var(--line-light); padding-block: .5rem 1.25rem; }
.mobile-nav.open { display: block; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav li a:not(.btn) { display: block; padding: .95rem 0; text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--line-light); }
.mobile-nav .btn { margin-top: 1rem; width: 100%; }
@media (min-width: 64rem) { .nav { display: block; } .menu-btn, .mobile-nav { display: none !important; } .brand img { height: 2.5rem; } }

/* Hero: the jungle scene, a solid copy panel, the panther on the ground line */
.hero { position: relative; background: #2b8f4c url("jungle.webp") center top / cover no-repeat; padding-top: clamp(2.5rem, 6vw, 5rem); overflow: hidden; border-bottom: 10px solid var(--canopy); }
.hero-grid { display: block; }
.panel { background: rgba(11, 42, 31, .95); color: var(--parchment); border-radius: 10px; padding: clamp(1.5rem, 4vw, 2.75rem); box-shadow: 0 24px 60px rgba(0, 0, 0, .3); border: 1px solid rgba(201, 242, 60, .25); max-width: 36rem; position: relative; z-index: 2; }
.panel h1 { font-size: clamp(2.2rem, 5.6vw, 3.9rem); letter-spacing: -.012em; margin-top: .875rem; }
.panel h1 em { font-style: normal; color: var(--lime); }
.panel .lede { color: var(--mist); margin-top: 1.25rem; }
.hero { padding-bottom: 10.5rem; }
.run-track { position: absolute; left: 0; right: 0; bottom: 1.25rem; height: 9rem; z-index: 1; }
.run { position: absolute; bottom: 0; left: 0; width: clamp(13rem, 40vw, 31rem); animation: dash 15s linear infinite; }
.run-track.paused .run, .run-track.paused .cat, .run-track.paused .leg { animation-play-state: paused; }
@keyframes dash { from { transform: translateX(-105%); } to { transform: translateX(100vw); } }
.cat { position: relative; width: 100%; aspect-ratio: 1400 / 515; animation: bob .35s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.cat img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cat .leg { animation: leg .7s linear infinite; }
.cat .leg.b { animation-delay: -.35s; }
.cat .hn { transform-origin: 29.86% 58.3%; }
.cat .hf { transform-origin: 50.95% 58.3%; }
.cat .fn { transform-origin: 64.57% 58.3%; }
.cat .ff { transform-origin: 79.14% 58.3%; }
@keyframes leg { 0% { transform: rotate(-30deg) translateY(0); } 50% { transform: rotate(30deg) translateY(0); } 75% { transform: rotate(2deg) translateY(-6%); } 100% { transform: rotate(-30deg) translateY(0); } }
@keyframes bob { from { transform: translateY(0) rotate(-.8deg); } to { transform: translateY(-2.5%) rotate(.8deg); } }

.run-btn, .mode-btn { border-radius: 8px; position: absolute; left: var(--gutter); bottom: 0; z-index: 3; min-height: 2.75rem; padding: 0 1rem; border-radius: 999px; border: 1.5px solid var(--lime); background: rgba(11, 42, 31, .92); color: var(--lime); font: 600 .875rem var(--body); cursor: pointer; }
.run-btn:hover, .mode-btn:hover { background: var(--canopy); }
.mode-btn { bottom: 3.5rem; }
@media (min-width: 62rem) { .hero { padding-bottom: 3rem; } .run-track { height: 12rem; bottom: 6rem; } }

/* Proof strip */
.proof-strip { padding-block: 2.5rem; background: var(--white); }
.proof { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.proof strong { display: block; font-family: var(--display); font-size: 1.5rem; color: var(--leaf); font-weight: 600; }
.proof span { color: var(--slate); font-size: .9375rem; }

/* Cards */
.grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.card { background: var(--white); border: 1px solid var(--line-light); border-radius: 10px; padding: 1.5rem 1.75rem; display: grid; gap: .6rem; align-content: start; }
.card h3 { font-size: 1.4rem; }
.card p { color: var(--slate); }
.icon { width: 2.75rem; height: 2.75rem; border-radius: 12px; background: var(--canopy); display: grid; place-items: center; }
.icon svg { width: 1.5rem; height: 1.5rem; stroke: var(--lime); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card .more { font-weight: 600; color: var(--leaf); text-underline-offset: 3px; margin-top: .25rem; }
.dark .card { background: var(--canopy-2); border-color: var(--line-dark); }
.dark .card p { color: var(--mist); }
.dark .card .more { color: var(--lime); }
.tag { font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--leaf); }
.dark .tag { color: var(--lime); }

/* Decorative foliage from the brand art, faint on dark sections */
.fol { position: absolute; top: 0; left: 0; width: 100%; height: auto; opacity: .07; filter: invert(1); pointer-events: none; }
.dark > .wrap { position: relative; }

/* AI and voice */
.split { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 62rem) { .split { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.demo-frame { border: 1px solid var(--line-dark); border-radius: 10px; background: #081f16; padding: 1.5rem; display: grid; gap: 1.1rem; }
.demo-head { display: flex; gap: .5rem; align-items: center; font-family: var(--mono); font-size: .75rem; color: var(--mist); letter-spacing: .08em; text-transform: uppercase; }
.dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--lime); }
.wave { display: flex; align-items: center; gap: 4px; height: 4.5rem; }
.wave i { flex: 1; background: var(--lime); border-radius: 3px; opacity: .85; }
.wave i:nth-child(1) { height: 30%; } .wave i:nth-child(2) { height: 60%; } .wave i:nth-child(3) { height: 90%; } .wave i:nth-child(4) { height: 50%; }
.wave i:nth-child(5) { height: 75%; } .wave i:nth-child(6) { height: 35%; } .wave i:nth-child(7) { height: 95%; } .wave i:nth-child(8) { height: 55%; }
.wave i:nth-child(9) { height: 70%; } .wave i:nth-child(10) { height: 40%; } .wave i:nth-child(11) { height: 85%; } .wave i:nth-child(12) { height: 45%; }
.wave i:nth-child(13) { height: 65%; } .wave i:nth-child(14) { height: 30%; }
.demo-note { color: var(--mist); font-size: .9375rem; }
.checks { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .6rem; }
.checks li { padding-left: 1.75rem; position: relative; color: var(--parchment); }
.checks li::before { content: ""; position: absolute; left: 0; top: .55rem; width: .9rem; height: .5rem; border-left: 3px solid var(--lime); border-bottom: 3px solid var(--lime); transform: rotate(-45deg); }

/* Photo request */
.photo-req { border: 2px dashed var(--leaf); border-radius: 10px; background: var(--white); padding: 1.75rem; display: grid; gap: .875rem; justify-items: start; align-content: center; min-height: 16rem; }
.photo-req img { height: 1.75rem; width: auto; }
.photo-req small { font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.photo-req p { font-size: .9375rem; max-width: 30rem; }

/* Local */
.towns { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .625rem; }
.towns li { padding: .55rem 1.1rem; border: 1px solid var(--line-light); border-radius: 999px; background: var(--white); font-weight: 500; }
.reach { margin-top: 1.5rem; padding-left: 1rem; border-left: 3px solid var(--leaf); color: var(--slate); max-width: 34rem; }

/* Steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); counter-reset: s; }
.steps li { counter-increment: s; border-top: 3px solid var(--leaf); padding-top: 1.1rem; display: grid; gap: .5rem; }
.steps li::before { content: "0" counter(s); font-family: var(--mono); color: var(--leaf); font-size: .875rem; }
.steps h3 { font-size: 1.35rem; }
.steps p { color: var(--slate); }

/* Story */
.story { max-width: 42rem; display: grid; gap: 1.25rem; }
.story p { color: var(--mist); font-size: 1.15rem; }
.story strong { color: var(--parchment); font-weight: 600; }

/* Contact */
.contact { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 62rem) { .contact { grid-template-columns: .9fr 1.1fr; gap: 4rem; } }
.contact-lines { display: grid; gap: 1rem; margin-top: 1.5rem; }
.contact-lines a { font-family: var(--display); font-size: 1.75rem; color: var(--leaf); text-underline-offset: 4px; }
.contact-lines p { color: var(--slate); }
form { background: var(--white); border: 1px solid var(--line-light); border-radius: 10px; padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: 1.125rem; }
.row { display: grid; gap: 1.125rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.field { display: grid; gap: .375rem; }
label { font-weight: 600; font-size: .9375rem; }
input, select, textarea { font: inherit; padding: .75rem .875rem; border: 1.5px solid #7b857e; border-radius: 10px; background: #fff; color: var(--ink); min-height: 3rem; width: 100%; }
textarea { min-height: 7rem; resize: vertical; }
.sent { display: none; padding: 1rem; border-radius: 10px; background: #e6f2c8; font-weight: 500; }
.sent.show { display: block; }

/* Footer */
.site-footer { background: var(--canopy); color: var(--parchment); padding-block: 3.5rem 2rem; }
.foot { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.foot img { height: 2.5rem; width: auto; margin-bottom: 1rem; }
.foot h2 { font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lime); margin-bottom: .75rem; font-weight: 500; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.foot a { display: inline-block; padding: .375rem 0; text-underline-offset: 3px; }
.foot p { color: var(--mist); font-size: .9375rem; }
.legal { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line-dark); color: var(--mist); font-size: .875rem; display: grid; gap: .25rem; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .run, .cat, .cat .leg { animation: none; }
  .run { left: auto; right: 6%; }
  .run-btn { display: none; }
}

/* Inner pages */
.page-hero { padding-block: clamp(2.75rem, 7vw, 5rem); }
.page-hero h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); letter-spacing: -.01em; max-width: 22ch; }
.page-hero .lede { margin-top: 1.25rem; }
.crumbs { margin-bottom: 1.5rem; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .5rem; font-size: .875rem; color: var(--mist); }
.crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--line-dark); }
.crumbs a { text-underline-offset: 3px; }
.nav a[aria-current="page"] { background: var(--parchment); font-weight: 600; }
.link-card { text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease; }
.link-card:hover { border-color: var(--leaf); transform: translateY(-2px); }
.link-card .more { margin-top: .25rem; }
.prose { max-width: 42rem; display: grid; gap: 1.25rem; font-size: 1.125rem; }
.prose p { color: var(--ink); }
.prose h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 1rem; }
.prose ul { margin: 0; padding-left: 1.25rem; display: grid; gap: .5rem; }
.two { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 62rem) { .two { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.checks.on-light li { color: var(--ink); }
.checks.on-light li::before { border-color: var(--leaf); }
.note { border-left: 3px solid var(--leaf); padding-left: 1rem; color: var(--slate); max-width: 40rem; }
.band { text-align: left; }
.band .cta-row { margin-top: 1.5rem; }
.num { font-family: var(--mono); color: var(--leaf); font-size: .875rem; }
@media (prefers-reduced-motion: reduce) { .link-card { transition: none; } }


/* Rows: ruled lists instead of identical cards */
.rows { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.dark .rows { border-top-color: var(--lime); }
.rows li { border-bottom: 1px solid var(--line-light); }
.dark .rows li { border-bottom-color: var(--line-dark); }
.rows a { display: grid; gap: .35rem 1.5rem; padding: 1.35rem .25rem; text-decoration: none; color: inherit; grid-template-columns: 1fr; align-items: baseline; }
.rows a:hover { background-color: rgba(15, 91, 61, .06); }
.dark .rows a:hover { background-color: rgba(201, 242, 60, .06); }
.rows .rt { font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 600; line-height: 1.15; }
.rows .rd { color: var(--slate); max-width: 46ch; }
.dark .rows .rd { color: var(--mist); }
.rows .ra { font-weight: 600; color: var(--leaf); white-space: nowrap; }
.dark .rows .ra { color: var(--lime); }
@media (min-width: 52rem) { .rows a { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto; } }
.big-nums { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.big-nums b { display: block; font-family: var(--display); font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1; color: var(--leaf); font-weight: 600; }
.big-nums span { color: var(--slate); font-size: .9375rem; }
.rule-head { border-left: 4px solid var(--lime); padding-left: 1.1rem; }
.light .rule-head, .tone .rule-head, section:not(.dark) .rule-head { border-left-color: var(--leaf); }
.src { margin-top: 2rem; font-size: .875rem; color: var(--slate); }
.src ul { margin: .5rem 0 0; padding-left: 1.1rem; display: grid; gap: .25rem; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.facts li { padding-left: 1rem; border-left: 3px solid var(--leaf); }

/* Jungle Guide chat */
.jg-btn { position: fixed; right: 1rem; bottom: 1rem; z-index: 80; display: inline-flex; align-items: center; gap: .6rem; min-height: 3.5rem; padding: 0 1.1rem 0 .9rem; border-radius: 999px; border: 2px solid var(--lime); background: var(--canopy); color: var(--parchment); font: 600 .9375rem var(--body); cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.jg-btn:hover { background: var(--canopy-2); }
.jg-btn svg { width: 2.25rem; height: 1.4rem; }
.jg-panel { position: fixed; right: 1rem; bottom: 5.5rem; z-index: 80; width: min(24rem, calc(100vw - 2rem)); height: min(34rem, calc(100vh - 8rem)); background: var(--white); color: var(--ink); border: 1px solid var(--line-light); border-radius: 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); display: none; grid-template-rows: auto 1fr auto auto; overflow: hidden; }
.jg-panel.open { display: grid; }
.jg-head { background: var(--canopy); color: var(--parchment); padding: .85rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.jg-head b { font-family: var(--display); font-size: 1.15rem; letter-spacing: .01em; display: block; }
.jg-head small { color: var(--mist); font-size: .75rem; }
.jg-x { min-width: 2.75rem; min-height: 2.75rem; border: 1px solid var(--line-dark); background: transparent; color: var(--parchment); border-radius: 8px; font: 600 .875rem var(--body); cursor: pointer; }
.jg-log { overflow-y: auto; padding: 1rem; display: grid; gap: .6rem; align-content: start; background: var(--parchment); }
.jg-msg { max-width: 88%; padding: .6rem .85rem; border-radius: 10px; font-size: .9375rem; line-height: 1.45; }
.jg-msg.bot { background: var(--white); border: 1px solid var(--line-light); justify-self: start; }
.jg-msg.me { background: var(--leaf); color: #fff; justify-self: end; }
.jg-msg a { color: var(--leaf); font-weight: 600; }
.jg-chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: .6rem 1rem 0; background: var(--parchment); }
.jg-chip { min-height: 2.75rem; padding: 0 .9rem; border: 1.5px solid var(--leaf); background: var(--white); color: var(--leaf); border-radius: 999px; font: 600 .875rem var(--body); cursor: pointer; }
.jg-chip:hover { background: var(--leaf); color: #fff; }
.jg-form { display: flex; gap: .5rem; padding: .75rem 1rem 1rem; background: var(--parchment); }
.jg-form input { min-height: 2.75rem; flex: 1; min-width: 0; }
.jg-form button { min-height: 2.75rem; padding: 0 1rem; border: 0; border-radius: 8px; background: var(--leaf); color: #fff; font: 600 .9375rem var(--body); cursor: pointer; }
@media (max-width: 30rem) { .jg-btn span { display: none; } .jg-btn { padding: 0 .9rem; } }

/* Interactive jungle: swinging monkeys, fireflies, lantern light */
.jfx { position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: transform .25s ease-out; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(circle 14rem at var(--mx, 50%) var(--my, 50%), rgba(201, 242, 60, .22), rgba(201, 242, 60, 0) 70%); mix-blend-mode: screen; }
.hero.lit::after { opacity: 1; }
.monkey { position: absolute; top: -2px; padding: 0 .75rem; width: 4.5rem; height: 11rem; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; transform-origin: 50% 0; animation: swing 4.2s ease-in-out infinite alternate; }
.monkey svg { width: 100%; height: 100%; display: block; overflow: visible; }
.monkey:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; border-radius: 10px; }
.monkey.m1 { right: 6%; width: 5.5rem; height: 13rem; }
.monkey.m2 { right: 17%; width: 3.6rem; height: 8.5rem; animation-duration: 5.1s; animation-delay: -1.7s; }
.monkey.m3 { right: 27%; width: 3rem; height: 7rem; animation-duration: 3.6s; animation-delay: -.8s; }
.monkey.wow { animation: swing-big .8s ease-in-out 3; }
@keyframes swing { from { transform: rotate(-13deg); } to { transform: rotate(13deg); } }
@keyframes swing-big { 0% { transform: rotate(-38deg); } 50% { transform: rotate(38deg); } 100% { transform: rotate(-38deg); } }
.bubble { position: absolute; top: 62%; left: 50%; min-width: 9rem; max-width: 13rem; padding: .5rem .75rem; border-radius: 10px; background: var(--parchment); color: var(--ink); font: 600 .875rem/1.3 var(--body); text-align: center; opacity: 0; transform: translate(-50%, 0) scale(.9); transition: opacity .2s, transform .2s; pointer-events: none; z-index: 3; }
.monkey.talk .bubble { opacity: 1; transform: translate(-50%, 0) scale(1); }
.fly { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px 3px rgba(201, 242, 60, .65); animation: drift 9s ease-in-out infinite alternate, blink 2.6s ease-in-out infinite; }
@keyframes drift { from { transform: translate(0, 0); } to { transform: translate(34px, -46px); } }
@keyframes blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.hero.paused .monkey, .hero.paused .fly { animation-play-state: paused; }
@media (max-width: 47.99rem) { .hero { padding-top: 8.5rem; } .monkey.m3 { display: none; } .monkey { top: -1.5rem; } .monkey.m1 { right: 4%; } .monkey.m2 { right: 30%; } }
@media (prefers-reduced-motion: reduce) { .monkey, .fly { animation: none; } .monkey.wow { animation: none; } .jfx { transition: none; } .hero::after { display: none; } }

/* Day and night */
.hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s; background: linear-gradient(180deg, #0a1b45, #0b2a3f 55%, #07261b); mix-blend-mode: multiply; }
.hero.night::before { opacity: .78; }
.moon { position: absolute; top: 4.5rem; right: 38%; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: radial-gradient(circle at 36% 34%, #fffdf2, #e9e5cf 70%); box-shadow: 0 0 40px 14px rgba(244, 241, 232, .35); opacity: 0; transition: opacity 1.2s; }
.hero.night .moon { opacity: 1; }
.hero.night .fly { width: 8px; height: 8px; background: #e9ff7a; box-shadow: 0 0 18px 7px rgba(201, 242, 60, .8); }
.hero.night::after { background: radial-gradient(circle 16rem at var(--mx, 50%) var(--my, 50%), rgba(233, 255, 122, .38), rgba(233, 255, 122, 0) 70%); }
.cat .eye { position: absolute; left: 95.1%; top: 31.1%; width: 1.4%; height: 5.2%; transform: translate(-50%, -50%); border-radius: 50%; background: #d6ff4a; box-shadow: 0 0 10px 3px rgba(201, 242, 60, .9); opacity: 0; transition: opacity 1.2s; }
.hero.night .cat .eye { opacity: 1; }
@media (max-width: 47.99rem) { .moon { right: 40%; top: 5.5rem; width: 2.4rem; height: 2.4rem; } }

/* Panther reacts */
.run { pointer-events: auto; cursor: pointer; }
.run:hover, .run:hover .leg, .run:hover .cat:not(.leap) { animation-play-state: paused; }
.run-track.air { z-index: 3; }
.cat.leap { animation: leap .9s cubic-bezier(.3, .7, .4, 1) 1; }
.cat.leap.big { animation: leap-big 1.5s cubic-bezier(.3, .7, .4, 1) 1; }
@keyframes leap { 0% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-110%) rotate(-9deg); } 100% { transform: translateY(0) rotate(0); } }
@keyframes leap-big { 0% { transform: translateY(0) rotate(0); } 45% { transform: translateY(-300%) rotate(-12deg) scale(1.08); } 100% { transform: translateY(0) rotate(0); } }

/* Jungle Guide eyes */
.jg-eye { transform-box: fill-box; transform-origin: center; animation: eyeblink 5.5s infinite; }
.jg-pupil { transition: transform .08s linear; }
@keyframes eyeblink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.08); } }
@media (prefers-reduced-motion: reduce) { .jg-eye { animation: none; } .hero::before, .moon, .cat .eye { transition: none; } .run { cursor: default; } .cat.leap, .cat.leap.big { animation: none; } }

/* Monkey pop-out invitation */
.pop { position: absolute; z-index: 4; top: 5.5rem; right: clamp(1rem, 5vw, 4rem); width: min(27rem, calc(100% - 2rem)); display: flex; align-items: flex-start; gap: .25rem; animation: popdrop .7s cubic-bezier(.2, 1.4, .4, 1) both; }
.pop[hidden] { display: none; }
.pop-monkey { flex: 0 0 5.5rem; height: 12rem; margin-top: -5.5rem; transform-origin: 50% 0; animation: swing 1.4s ease-in-out infinite alternate; }
.pop-monkey svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pop-card { background: var(--parchment); color: var(--ink); border-radius: 12px; padding: 1.1rem 1.25rem 1.25rem; box-shadow: 0 20px 50px rgba(0, 0, 0, .45); border: 2px solid var(--lime); }
.pop-card h2 { font-family: var(--display); font-size: 1.5rem; line-height: 1.15; margin: 0; }
.pop-card p { margin: .5rem 0 0; color: var(--slate); }
.pop-card .cta-row { margin-top: .9rem; }
.pop-card .pop-alt { font-size: .9375rem; }
.pop-card .btn-line { color: var(--leaf); border-color: var(--leaf); }
@keyframes popdrop { from { transform: translateY(-120%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (max-width: 47.99rem) { .pop { top: 6rem; right: 1rem; left: 1rem; width: auto; } .pop-monkey { flex-basis: 3.5rem; height: 8rem; margin-top: -4rem; } }
@media (prefers-reduced-motion: reduce) { .pop, .pop-monkey { animation: none; } }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Eyes watching from the dark foliage */
.eyes { position: absolute; width: 2.6rem; height: .8rem; opacity: 0; animation: watch 9s ease-in-out infinite; }
.eyes::before, .eyes::after { content: ""; position: absolute; top: 0; width: 1rem; height: .6rem; border-radius: 80% 20% 80% 20% / 100% 0 100% 0; background: #d6ff4a; box-shadow: 0 0 10px 3px rgba(201, 242, 60, .7); }
.eyes::before { left: 0; transform: rotate(8deg); }
.eyes::after { right: 0; transform: scaleX(-1) rotate(8deg); }
.eyes.e1 { right: 3%; bottom: 14%; }
.eyes.e2 { left: 2%; top: 30%; animation-delay: -4.5s; transform: scale(.8); }
@keyframes watch { 0%, 12% { opacity: 0; } 20%, 36% { opacity: .95; } 38% { opacity: .1; } 40%, 58% { opacity: .95; } 60% { opacity: .1; } 62%, 74% { opacity: .95; } 84%, 100% { opacity: 0; } }
.hero.paused .eyes { animation-play-state: paused; }
.hero.night .eyes::before, .hero.night .eyes::after { box-shadow: 0 0 16px 6px rgba(201, 242, 60, .85); }
@media (max-width: 47.99rem) { .eyes.e2 { display: none; } }
@media (prefers-reduced-motion: reduce) { .eyes { animation: none; opacity: .0; } }

/* Weather in the jungle */
.wx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero .wx { z-index: 1; }
.page-hero > .wrap { position: relative; z-index: 1; }
.wx .cloudband { position: absolute; inset: 0 -10%; background: radial-gradient(ellipse 40% 30% at 20% 0, rgba(210, 220, 215, .45), transparent 70%), radial-gradient(ellipse 45% 35% at 70% 0, rgba(200, 212, 208, .4), transparent 70%); animation: cloudmove 40s ease-in-out infinite alternate; }
.wx-cloud .cloudband { opacity: .9; }
.wx-rain .cloudband, .wx-storm .cloudband { background: linear-gradient(rgba(60, 80, 90, .55), rgba(60, 80, 90, 0) 70%); }
.wx-snow .cloudband { background: linear-gradient(rgba(220, 232, 240, .3), rgba(220, 232, 240, 0) 65%); }
.wx-mist .cloudband { background: linear-gradient(rgba(220, 235, 228, .15), rgba(220, 235, 228, .5) 90%); animation-duration: 25s; }
@keyframes cloudmove { from { transform: translateX(-4%); } to { transform: translateX(4%); } }
.wx .drop { position: absolute; top: -10%; left: var(--x); width: 1px; height: 1.6rem; background: linear-gradient(rgba(220, 240, 255, 0), rgba(220, 240, 255, .8)); transform: rotate(12deg); animation: rainfall var(--t) linear var(--d) infinite; }
@keyframes rainfall { to { transform: translate3d(-3rem, 120vh, 0) rotate(12deg); } }
.wx .flake { position: absolute; top: -5%; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: #fff; opacity: .9; animation: snowfall var(--t) linear var(--d) infinite; }
@keyframes snowfall { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(1.4rem, 55vh, 0); } 100% { transform: translate3d(-.6rem, 115vh, 0); } }
.wx .flash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: flash 7s linear infinite; }
@keyframes flash { 0%, 90%, 94%, 100% { opacity: 0; } 91% { opacity: .5; } 92% { opacity: .05; } 93% { opacity: .35; } }
.wx-dark::after { content: ""; position: absolute; inset: 0; z-index: 0; background: rgba(4, 12, 32, .5); pointer-events: none; }
.wx-paused .wx *, .hero.paused .wx * { animation-play-state: paused; }
.wx-bar { margin-top: 1.5rem; display: grid; gap: .6rem; max-width: 40rem; padding: .9rem 1rem; border: 1px solid var(--line-dark); border-radius: 10px; background: rgba(11, 42, 31, .72); }
.wx-now { margin: 0; color: var(--parchment); font-weight: 500; }
.wx-controls { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.wx-controls span { color: var(--mist); font-size: .875rem; }
.wx-preview { display: flex; flex-wrap: wrap; gap: .4rem; }
.wx-bar button { min-height: 2.5rem; padding: 0 .85rem; border-radius: 999px; border: 1.5px solid var(--lime); background: transparent; color: var(--lime); font: 600 .875rem var(--body); cursor: pointer; }
.wx-bar button:hover { background: var(--canopy); }
.wx-bar button[hidden] { display: none; }
.wx-btn { border-radius: 8px; position: absolute; left: var(--gutter); bottom: 7rem; z-index: 3; min-height: 2.75rem; padding: 0 1rem; border-radius: 999px; border: 1.5px solid var(--lime); background: rgba(11, 42, 31, .92); color: var(--lime); font: 600 .875rem var(--body); cursor: pointer; }
.wx-btn:hover { background: var(--canopy); }
.welcome { margin: 1rem 0 0; color: var(--parchment); }
.welcome a { color: var(--lime); text-underline-offset: 3px; }
.welcome[hidden] { display: none; }
@media (max-width: 47.99rem) { .wx-btn { bottom: 3.5rem; } .mode-btn { bottom: 0; left: calc(var(--gutter) + 9.5rem); } }
@media (prefers-reduced-motion: reduce) { .wx .cloudband { animation: none; } .wx .flash { display: none; } }
.page-hero.town { background: linear-gradient(rgba(11, 42, 31, .72), rgba(11, 42, 31, .9)), #134032 url("jungle.webp") center / cover no-repeat; }
.page-hero.town .fol { display: none; }

/* Interactive demos: brand builder, print studio, lead router, map grid, voice transcript */
.bd { --b1: #0B2A1F; --b2: #C9F23C; --b3: #F4F1E8; --fd: 'Fraunces', serif; --fw: 600; --ls: 0; --mr: 50%; --clip: none; display: grid; gap: 1.5rem; }
.bd-controls { display: grid; gap: 1rem; padding: 1.25rem; border: 1px solid var(--line-light); border-radius: 12px; background: #fff; }
.bd-controls .row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.bd-controls fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.bd-controls legend { font: 600 .875rem var(--body); color: var(--slate); margin-bottom: .4rem; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chips button, .bd-shuffle, .bd-flip { min-height: 2.5rem; padding: 0 .85rem; border-radius: 999px; border: 1.5px solid var(--leaf); background: transparent; color: var(--leaf); font: 600 .875rem var(--body); cursor: pointer; }
.chips button[aria-pressed="true"], .bd-flip[aria-pressed="true"] { background: var(--leaf); color: #fff; }
.bd-shuffle { justify-self: start; }
.bd-stage { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.tile { border-radius: 12px; border: 1px solid var(--line-light); background: var(--b3); padding: 1rem; display: grid; gap: .6rem; align-content: start; min-width: 0; }
.tile > small { font: 500 .75rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.lk { display: flex; align-items: center; gap: .6rem; min-width: 0; font-family: var(--fd); letter-spacing: var(--ls); }
.mk { flex: 0 0 auto; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; background: var(--b2); color: var(--b1); font-weight: var(--fw); font-size: 1rem; border-radius: var(--mr); clip-path: var(--clip); }
.lt { display: grid; min-width: 0; }
.lt .nm { font-weight: var(--fw); font-size: 1.1rem; line-height: 1.1; overflow-wrap: anywhere; color: var(--b1); }
.lt .tg { font: 500 .75rem var(--body); font-style: normal; color: var(--slate); }
.face { position: relative; aspect-ratio: 7 / 4; border-radius: 8px; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .15); padding: 1rem; display: grid; align-content: space-between; border-left: .6rem solid var(--b1); }
.face .meta { font: 500 .75rem var(--body); color: var(--slate); }
.flip { perspective: 900px; }
.flip .inner { position: relative; aspect-ratio: 7 / 4; transition: transform .7s; transform-style: preserve-3d; }
.flip.on .inner { transform: rotateY(180deg); }
.flip .face { position: absolute; inset: 0; backface-visibility: hidden; aspect-ratio: auto; }
.flip .back { transform: rotateY(180deg); background: var(--b1); border-left: 0; place-content: center; justify-items: center; }
.flip .back .mk { width: 4rem; height: 4rem; font-size: 1.5rem; }
.truck { background: #fff; border-radius: 10px; border: 2px solid #c9c9c0; padding: 1.2rem 1rem; display: grid; gap: .5rem; position: relative; overflow: hidden; }
.truck::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .9rem; background: var(--b1); }
.truck .lk { zoom: 1.15; }
.truck .phone { font: 600 .9rem var(--body); color: var(--b1); padding-bottom: .9rem; }
.webbar { background: #fff; border: 1px solid var(--line-light); border-radius: 8px; overflow: hidden; }
.webbar .top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .6rem .8rem; border-bottom: 1px solid var(--line-light); }
.webbar .top span.cta { background: var(--b1); color: var(--b3); font: 600 .75rem var(--body); padding: .35rem .6rem; border-radius: 6px; white-space: nowrap; }
.webbar .hero-s { background: var(--b1); color: var(--b3); padding: 1.1rem .8rem; font-family: var(--fd); font-weight: var(--fw); letter-spacing: var(--ls); font-size: 1.1rem; }
.webbar .hero-s i { display: inline-block; margin-top: .5rem; background: var(--b2); color: var(--b1); font: 600 .75rem var(--body); padding: .35rem .6rem; border-radius: 6px; font-style: normal; }
.tee { aspect-ratio: 1 / 1; max-width: 15rem; width: 100%; margin-inline: auto; background: var(--b1); clip-path: polygon(20% 0, 38% 0, 50% 7%, 62% 0, 80% 0, 100% 20%, 86% 36%, 76% 28%, 76% 100%, 24% 100%, 24% 28%, 14% 36%, 0 20%); display: grid; place-items: start center; padding-top: 28%; }
.tee .lk { flex-direction: column; text-align: center; gap: .3rem; }
.tee .lt .nm { color: var(--b3); font-size: .85rem; }
.tee .lt .tg { color: var(--b2); }
.tee .mk { width: 2.2rem; height: 2.2rem; font-size: .85rem; }
.hanger { width: min(100%, 9.5rem); aspect-ratio: 9 / 20; margin-inline: auto; background: #fff; border-radius: 10px; box-shadow: 0 6px 18px rgba(0, 0, 0, .15); padding: 2.6rem .7rem .8rem; display: grid; gap: .5rem; align-content: start; justify-items: center; text-align: center; -webkit-mask: radial-gradient(circle at 50% 1.4rem, transparent .8rem, #000 .82rem); border-top: .5rem solid var(--b1); }
.hanger .lk { flex-direction: column; gap: .3rem; }
.hanger p { margin: 0; font: 600 .8rem var(--body); color: var(--b1); }
.hanger .big { font-family: var(--fd); font-weight: var(--fw); font-size: 1.1rem; }
.broch { display: flex; border-radius: 8px; overflow: hidden; box-shadow: 0 6px 18px rgba(0, 0, 0, .15); aspect-ratio: 3 / 2; background: #fff; }
.broch > div { flex: 1 1 0; min-width: 0; overflow: hidden; padding: .8rem; transition: flex-grow .6s; display: grid; align-content: center; gap: .4rem; font: 500 .75rem var(--body); color: var(--slate); }
.broch > div:not(:first-child) { flex-grow: 0; padding-inline: 0; }
.broch.on > div:not(:first-child) { flex-grow: 1; padding-inline: .8rem; }
.broch > div:first-child { background: var(--b1); }
.broch > div:first-child .nm { color: var(--b3); }
.broch > div:first-child .tg { color: var(--b2); }
.broch b { color: var(--b1); font-family: var(--fd); font-size: .9rem; }
.tabs-note { color: var(--slate); font-size: .9375rem; }
/* router */
.router { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); align-items: start; }
.router-col { display: grid; gap: .5rem; }
.router-col h3 { font-size: 1.1rem; margin: 0 0 .25rem; }
.router-reqs button { text-align: left; min-height: 2.75rem; padding: .5rem .9rem; border: 1.5px solid var(--leaf); background: #fff; color: var(--ink); border-radius: 8px; font: 500 1rem var(--body); cursor: pointer; }
.router-reqs button[aria-pressed="true"] { background: var(--leaf); color: #fff; }
.dest { padding: .6rem .9rem; border-radius: 8px; border: 1.5px dashed var(--line-light); color: var(--slate); background: #fff; }
.router[data-route="roof"] .d-roof, .router[data-route="bill"] .d-bill, .router[data-route="job"] .d-job, .router[data-route="spam"] .d-spam { border-style: solid; border-color: var(--leaf); background: var(--canopy); color: var(--lime); font-weight: 600; }
.router.go .dest { transition: background .3s, color .3s; }
.router-out { grid-column: 1 / -1; margin: 0; padding: .9rem 1rem; border-left: 4px solid var(--leaf); background: #fff; border-radius: 0 8px 8px 0; min-height: 3.2rem; }
/* map grid */
.gd { display: grid; gap: 1rem; max-width: 34rem; }
.gd-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; }
.gd-c { aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; font: 600 .75rem var(--body); color: #10201a; min-width: 0; }
.gd-c.g1 { background: #5fd38a; } .gd-c.g2 { background: #c9e86a; } .gd-c.g3 { background: #f2b95b; } .gd-c.g4 { background: #e58a7a; }
.gd-tabs { display: flex; gap: .5rem; flex-wrap: wrap; }
.gd-tabs button { min-height: 2.5rem; padding: 0 .9rem; border-radius: 999px; border: 1.5px solid var(--leaf); background: transparent; color: var(--leaf); font: 600 .875rem var(--body); cursor: pointer; }
.gd-tabs button[aria-pressed="true"] { background: var(--leaf); color: #fff; }
.gd-sum { margin: 0; font-weight: 500; }
.gd-note { margin: 0; color: var(--slate); font-size: .9375rem; }
/* voice */
.vd { display: grid; gap: .75rem; background: var(--canopy); color: var(--parchment); border-radius: 12px; padding: 1.1rem; border: 1px solid var(--line-dark); }
.vd-log { min-height: 13rem; max-height: 17rem; overflow-y: auto; display: grid; gap: .5rem; align-content: start; }
.vd-log p { margin: 0; padding: .5rem .75rem; border-radius: 10px; max-width: 90%; }
.vd-log p b { display: block; font: 500 .6875rem var(--mono); letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.vd-ai { background: var(--canopy-2); }
.vd-caller { background: var(--parchment); color: var(--ink); justify-self: end; }
.vd-card { margin: 0; padding: .75rem 1rem; border: 1px solid var(--lime); border-radius: 10px; color: var(--lime); }
.vd-card[hidden] { display: none; }
.vd-play { justify-self: start; min-height: 2.75rem; padding: 0 1.1rem; border-radius: 999px; border: 1.5px solid var(--lime); background: transparent; color: var(--lime); font: 600 .9375rem var(--body); cursor: pointer; }
.vd small { color: var(--mist); }
@media (prefers-reduced-motion: reduce) { .flip .inner, .broch > div { transition: none; } }

/* ===== v2 design layer: editorial type, depth, texture, motion ===== */
:root { --grain-l: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); --grain-d: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); --paper: #dfe9e2; }
main { overflow-x: clip; }
main > section > .wrap, .site-footer > .wrap { position: relative; z-index: 4; }
.tone { background-image: var(--grain-d); background-color: var(--parchment); }
.dark { background-image: radial-gradient(60% 90% at 88% 0%, rgba(201, 242, 60, .13), rgba(201, 242, 60, 0) 62%), radial-gradient(50% 70% at 0% 100%, rgba(19, 64, 50, .9), rgba(19, 64, 50, 0) 70%); }
.dark::before { content: ""; position: absolute; inset: 0; background: var(--grain-l); opacity: .07; pointer-events: none; z-index: 0; }
.dark.leaf { background-color: var(--leaf); background-image: radial-gradient(60% 90% at 90% 0%, rgba(201, 242, 60, .2), rgba(201, 242, 60, 0) 62%), radial-gradient(50% 80% at 0% 100%, rgba(11, 42, 31, .55), rgba(11, 42, 31, 0) 70%); }
.dark.leaf .lede, .dark.leaf .tag { color: var(--paper); }
.dark.edge { overflow-x: clip; overflow-y: visible; }
.dark.edge::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 5rem; background: url("foliage.webp") center top / cover no-repeat; opacity: .95; pointer-events: none; z-index: 2; }
.dark.edge:has(+ .dark)::after, .dark.edge:has(+ .band)::after { opacity: 0; }
.dark.edge:nth-of-type(even)::after { transform: scaleX(-1); }

.fol { transform: translate3d(0, calc(var(--py, 0) * 1px), 0); }
@media (max-width: 47.99rem) { .dark.edge::after { height: 3.5rem; } }

/* Type scale */
.h2 { font-size: clamp(2.1rem, 5vw, 3.6rem); letter-spacing: -.02em; line-height: 1.04; }
.h2.big { font-size: clamp(2.4rem, 7vw, 5.6rem); letter-spacing: -.03em; line-height: .98; }
.h2 em { font-style: italic; font-weight: 500; color: var(--leaf); }
.dark .h2 em { color: var(--lime); }
.page-hero { padding-block: clamp(3.5rem, 9vw, 7.5rem) clamp(4rem, 9vw, 7.5rem); min-height: 22rem; }
.page-hero h1 { font-size: clamp(2.4rem, 6.4vw, 5.4rem); letter-spacing: -.03em; line-height: .98; max-width: 14ch; }
.page-hero .lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); max-width: 34rem; }
.page-hero.town h1, .page-hero.v-topo h1 { max-width: 17ch; }
.page-hero.v-maps h1, .page-hero.v-leads h1, .page-hero.v-rev h1 { font-size: clamp(2.3rem, 5.4vw, 4.6rem); max-width: 16ch; }
.page-hero .lede, .page-hero h1, .page-hero .cta-row, .crumbs { position: relative; z-index: 2; }
.page-hero { background-image: radial-gradient(55% 100% at var(--gx, 90%) var(--gy, 0%), var(--glow, rgba(201, 242, 60, .16)), rgba(201, 242, 60, 0) 65%), radial-gradient(50% 80% at 0% 100%, rgba(19, 64, 50, .9), rgba(19, 64, 50, 0) 70%); }
.v-web { --gx: 100%; --gy: 20%; } .v-maps { --gx: 70%; --gy: 100%; --glow: rgba(169, 194, 181, .18); } .v-rev { --gx: 30%; --gy: 0%; }
.v-ai { --gx: 100%; --gy: 100%; --glow: rgba(169, 194, 181, .2); } .v-voice { --gx: 80%; --gy: 50%; --glow: rgba(201, 242, 60, .22); } .v-leads { --gx: 0%; --gy: 0%; --glow: rgba(169, 194, 181, .16); }
.v-crm { --gx: 100%; --gy: 0%; --glow: rgba(15, 91, 61, .55); } .v-print { --gx: 60%; --gy: 0%; --glow: rgba(201, 242, 60, .12); } .v-social { --gx: 100%; --gy: 90%; }

/* Hero illustrations, drawn in CSS and inline SVG */
.deco { display: none; }
@media (min-width: 62rem) {
  .deco { display: block; position: absolute; right: var(--gutter); top: 50%; width: min(26rem, 36%); height: auto; transform: translateY(calc(-50% + var(--py, 0) * 1px)); z-index: 1; overflow: visible; }
}
.deco .s { stroke: var(--lime); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.deco .m { stroke: var(--mist); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.deco circle.m { fill: var(--mist); stroke: none; }
.deco .f { fill: var(--lime); stroke: none; }
.deco .dr { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.6s cubic-bezier(.3, .6, .2, 1) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.deco > :nth-child(1){animation-delay:0.09s}
.deco > :nth-child(2){animation-delay:0.18s}
.deco > :nth-child(3){animation-delay:0.27s}
.deco > :nth-child(4){animation-delay:0.36s}
.deco > :nth-child(5){animation-delay:0.45s}
.deco > :nth-child(6){animation-delay:0.54s}
.deco > :nth-child(7){animation-delay:0.63s}
.deco > :nth-child(8){animation-delay:0.72s}
.deco > :nth-child(9){animation-delay:0.81s}
.deco > :nth-child(10){animation-delay:0.90s}
.deco > :nth-child(11){animation-delay:0.99s}
.deco > :nth-child(12){animation-delay:1.08s}
.deco > :nth-child(13){animation-delay:1.17s}
.deco > :nth-child(14){animation-delay:1.26s}
.deco > :nth-child(15){animation-delay:1.35s}
.deco > :nth-child(16){animation-delay:1.44s}

.deco .pulse-f { animation: blink2 2.4s ease-in-out infinite; }
@keyframes blink2 { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.deco .cur { animation: bobc 3s ease-in-out infinite alternate; }
@keyframes bobc { from { transform: translate(0, 0); } to { transform: translate(-30px, -22px); } }
.deco .ring { transform-box: fill-box; transform-origin: center; animation: ringp 4s ease-out infinite; opacity: 0; }
.deco .r2 { animation-delay: 1.3s; } .deco .r3 { animation-delay: 2.6s; }
@keyframes ringp { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(1.05); opacity: 0; } }
.deco .pin { animation: bobc2 2.4s ease-in-out infinite alternate; }
@keyframes bobc2 { from { transform: translateY(0); } to { transform: translateY(-8px); } }
.deco .gp { animation: blink2 3s ease-in-out infinite; }
.deco .star { opacity: .18; animation: starlit 5s ease-in-out infinite; }
.deco .star:nth-child(2) { animation-delay: .3s; } .deco .star:nth-child(3) { animation-delay: .6s; } .deco .star:nth-child(4) { animation-delay: .9s; } .deco .star:nth-child(5) { animation-delay: 1.2s; }
@keyframes starlit { 0%, 12% { opacity: .18; } 30%, 80% { opacity: 1; } 100% { opacity: .18; } }
.deco .node { transform-box: fill-box; transform-origin: center; animation: nodep 3s ease-in-out infinite; }
.deco .n1 { animation-delay: .5s; } .deco .n2 { animation-delay: 1s; } .deco .n3 { animation-delay: 1.5s; } .deco .n4 { animation-delay: 2s; }
@keyframes nodep { 0%, 100% { transform: scale(.7); opacity: .5; } 50% { transform: scale(1.25); opacity: 1; } }
.deco .vb { transform-box: fill-box; transform-origin: center; animation: barp 1.3s ease-in-out infinite alternate; }
.deco .b1 { animation-duration: 1.7s; } .deco .b2 { animation-duration: 1.1s; animation-delay: -.4s; } .deco .b3 { animation-duration: 1.9s; animation-delay: -.8s; } .deco .b4 { animation-duration: 1.4s; animation-delay: -.2s; } .deco .b5 { animation-duration: 1.6s; animation-delay: -1s; }
@keyframes barp { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
.deco .flow { fill: none; stroke: var(--lime); stroke-width: 2.4; stroke-dasharray: 6 10; stroke-linecap: round; animation: flow 1.4s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -32; } }
.deco .mover { opacity: .9; animation: mv 6s ease-in-out infinite; }
@keyframes mv { 0%, 15% { transform: translate(0, 0); } 45%, 60% { transform: translate(124px, -60px); } 90%, 100% { transform: translate(248px, -112px); } }
.deco .tilt { transform-box: fill-box; transform-origin: center; animation: tiltp 6s ease-in-out infinite alternate; }
@keyframes tiltp { from { transform: rotate(-5deg); } to { transform: rotate(3deg); } }
.deco .reg { transform-box: fill-box; transform-origin: center; animation: spin 18s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.deco .cell { opacity: .12; animation: cellp 6s ease-in-out infinite; }
.deco .c1 { animation-delay: .6s; } .deco .c2 { animation-delay: 1.2s; } .deco .c3 { animation-delay: 1.8s; } .deco .c4 { animation-delay: 2.4s; } .deco .c5 { animation-delay: 3s; } .deco .c6 { animation-delay: 3.6s; }
@keyframes cellp { 0%, 8% { opacity: .12; } 20%, 45% { opacity: .9; } 70%, 100% { opacity: .12; } }

/* Branding showpiece */
.page-hero.v-brand { padding-block: clamp(3.5rem, 8vw, 6rem); }
.page-hero.v-brand h1 { font-size: clamp(2.5rem, 6.4vw, 5.4rem); max-width: 13ch; }
.stage-wrap { display: none; }
@media (min-width: 62rem) {
  .stage-wrap { display: block; position: absolute; right: var(--gutter); top: 50%; margin-top: -11rem; width: min(31rem, 44%); perspective: 900px; z-index: 1; }
}
.stage { position: relative; aspect-ratio: 1.12; border: 1px solid var(--line-dark); background: linear-gradient(160deg, rgba(19, 64, 50, .85), rgba(8, 31, 22, .92)); border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); transform: rotateY(calc(var(--ry, -8) * 1deg)) rotateX(calc(var(--rx, 4) * 1deg)); transition: transform .25s ease-out; overflow: hidden; }
.stage .cm { position: absolute; width: 18px; height: 18px; border: 0 solid var(--mist); opacity: .7; }
.stage .cm.a { left: 14px; top: 14px; border-left-width: 2px; border-top-width: 2px; } .stage .cm.b { right: 14px; top: 14px; border-right-width: 2px; border-top-width: 2px; }
.stage .cm.c { left: 14px; bottom: 14px; border-left-width: 2px; border-bottom-width: 2px; } .stage .cm.d { right: 14px; bottom: 14px; border-right-width: 2px; border-bottom-width: 2px; }
.stage .gl { position: absolute; background: var(--lime); opacity: .35; transform-origin: left center; animation: gdraw 1.4s .2s cubic-bezier(.3, .6, .2, 1) both; }
.stage .g1, .stage .g2 { left: 7%; right: 7%; height: 1px; } .stage .g1 { top: 30%; } .stage .g2 { top: 58%; }
.stage .g3, .stage .g4 { top: 9%; bottom: 9%; width: 1px; transform-origin: center top; animation-name: gdrawy; } .stage .g3 { left: 12%; } .stage .g4 { right: 12%; }
@keyframes gdraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes gdrawy { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.lockup { position: absolute; left: 12%; right: 12%; top: 33.5%; height: 22%; display: grid; place-items: center; overflow: hidden; animation: lkreveal 1.6s .5s cubic-bezier(.3, .7, .2, 1) both; }
.lockup img { width: 100%; height: auto; }
.lockup .sweep { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(201, 242, 60, 0) 35%, rgba(201, 242, 60, .55) 50%, rgba(201, 242, 60, 0) 65%); transform: translateX(-120%); animation: sweep 5.5s 2.2s ease-in-out infinite; mix-blend-mode: overlay; }
@keyframes lkreveal { from { clip-path: inset(0 100% 0 0); opacity: 0; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes sweep { 0% { transform: translateX(-120%); } 35%, 100% { transform: translateX(120%); } }
.spec { position: absolute; left: 12%; right: 12%; bottom: 14%; display: flex; align-items: center; gap: .5rem; }
.spec .sw { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid rgba(244, 241, 232, .5); animation: swin .6s both; }
.spec .w1 { background: var(--canopy-2); animation-delay: 1.8s; } .spec .w2 { background: var(--leaf); animation-delay: 2s; } .spec .w3 { background: var(--lime); animation-delay: 2.2s; } .spec .w4 { background: var(--parchment); animation-delay: 2.4s; }
@keyframes swin { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.spec .aa { margin-left: auto; font: 600 2.4rem/1 var(--display); color: var(--parchment); animation: aa 6s ease-in-out infinite alternate; }
@keyframes aa { from { font-weight: 500; letter-spacing: 0; } to { font-weight: 600; letter-spacing: .06em; color: var(--lime); } }
.spec .tf { font: 500 .6875rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mist); }
.stage .cap { position: absolute; left: 16%; top: 19%; font: 500 .6875rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mist); }

/* Reveal on scroll (content is visible without JS) */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--d, 0) * 70ms); }
.js .rv.in { opacity: 1; transform: none; }

/* Numbered, ruled section heads */
main { counter-reset: sec; }
.rule-head { border-left: 0; padding-left: 0; counter-increment: sec; position: relative; padding-top: 1.9rem; }
.rule-head::before { content: counter(sec, decimal-leading-zero); position: absolute; left: 0; top: 0; font: 500 .8125rem/1 var(--mono); letter-spacing: .12em; color: var(--leaf); }
.dark .rule-head::before { color: var(--lime); }
.rule-head::after { content: ""; position: absolute; left: 2.6rem; right: 0; top: .35rem; height: 1px; background: currentColor; opacity: .35; transform-origin: left; }
.js .rule-head::after { transform: scaleX(0); transition: transform 1.1s cubic-bezier(.3, .6, .2, 1) .15s; }
.js .rule-head.in::after { transform: scaleX(1); }
.rule-head .lede { margin-top: .25rem; }
.head { margin-bottom: clamp(2rem, 4vw, 3.5rem); }

/* Rows: numbered, with a sweep on hover */
.rows { counter-reset: r; border-top-width: 1px; }
.rows li { counter-increment: r; }
.rows a { padding: 1.6rem 1rem; background: linear-gradient(var(--leaf), var(--leaf)) left / 0% 100% no-repeat; transition: background-size .45s cubic-bezier(.3, .7, .2, 1), color .25s; }
.rows .rt::before { content: counter(r, decimal-leading-zero); display: inline-block; min-width: 2.4rem; margin-right: .5rem; font: 500 .75rem var(--mono); letter-spacing: .1em; color: var(--leaf); vertical-align: .2em; transition: color .25s; }
.rows .rt { transition: transform .35s cubic-bezier(.3, .7, .2, 1); }
.rows .ra { display: inline-flex; gap: .5rem; align-items: center; }
.rows .ra::after { content: "\2192"; transition: transform .3s; }
.rows a:hover .ra::after, .rows a:focus-visible .ra::after { transform: translateX(.4rem); }
.rows a:hover .rt, .rows a:focus-visible .rt { transform: translateX(.35rem); }
section:not(.dark) .rows a:hover, section:not(.dark) .rows a:focus-visible { background-size: 100% 100%; color: #fff; }
section:not(.dark) .rows a:hover .rd, section:not(.dark) .rows a:focus-visible .rd { color: var(--paper); }
section:not(.dark) .rows a:hover .ra, section:not(.dark) .rows a:focus-visible .ra, section:not(.dark) .rows a:hover .rt::before, section:not(.dark) .rows a:focus-visible .rt::before { color: var(--lime); }
.rows a:focus-visible { outline-offset: -3px; }
.dark .rows .rt::before { color: var(--lime); }
.rows.xl .rt { font-size: clamp(1.7rem, 3.8vw, 2.9rem); letter-spacing: -.02em; }
.rows.xl a { padding-block: 2rem; }
@media (min-width: 52rem) { .rows.xl a { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; } }
.split-rows { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 62rem) {
  .split-rows { grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr); gap: 4rem; }
  .split-rows > .head { position: sticky; top: 7rem; margin-bottom: 0; }
  .split-rows .rows a { grid-template-columns: 1fr auto; grid-template-areas: "t a" "d d"; }
  .split-rows .rows .rt { grid-area: t; } .split-rows .rows .rd { grid-area: d; } .split-rows .rows .ra { grid-area: a; }
  .two > :first-child:has(> h2) { position: sticky; top: 7rem; }
}

/* Steps: oversized numerals, staggered, drawn top rule */
.steps li { border-top: 0; position: relative; padding-top: 1.4rem; }
.steps li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--leaf); transform-origin: left; }
.js .steps li::after { transform: scaleX(0); transition: transform 1s cubic-bezier(.3, .6, .2, 1) .2s; }
.js .steps li.in::after { transform: scaleX(1); }
.steps li::before { font: 600 clamp(3.4rem, 6vw, 5.4rem)/1 var(--display); letter-spacing: -.03em; color: rgba(15, 91, 61, .28); }
.dark .steps li::after { background: var(--lime); }
.dark .steps li::before { color: rgba(201, 242, 60, .4); }
.dark .steps p { color: var(--mist); }
@media (min-width: 52rem) { .steps li:nth-child(even) { margin-top: 2.5rem; } }
.dark .checks.on-light li { color: var(--parchment); }
.dark .checks.on-light li::before { border-color: var(--lime); }
.dark .prose p { color: var(--parchment); }
.dark .prose a, .dark .note a { color: var(--lime); }
.dark .note { color: var(--mist); border-left-color: var(--lime); }
.dark .facts li { border-left-color: var(--lime); }
.dark .src, .dark .src a { color: var(--mist); }

/* Marquee strip */
.marquee { position: relative; z-index: 6; background: var(--lime); color: var(--ink); overflow: hidden; transform: rotate(-1.2deg); margin: -1.1rem -2% 0; padding: .9rem 0; box-shadow: 0 10px 30px rgba(11, 42, 31, .25); }
.mq-track { display: flex; width: max-content; animation: mq 46s linear infinite; }
.marquee:hover .mq-track { animation-play-state: paused; }
.mq-set { display: flex; flex: none; }
.mq-set span { font: 600 clamp(1.15rem, 2.4vw, 1.7rem)/1 var(--display); white-space: nowrap; padding-inline: 1.4rem; display: inline-flex; align-items: center; gap: 2.8rem; }
.mq-set span::after { content: ""; width: .6rem; height: .6rem; background: var(--leaf); transform: rotate(45deg); }
@keyframes mq { to { transform: translateX(-50%); } }
.proof-strip { padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(3rem, 6vw, 4.5rem); }
.big-nums b { font-size: clamp(2.6rem, 6.2vw, 5rem); white-space: nowrap; letter-spacing: -.04em; }
.big-nums li { border-top: 1px solid var(--line-light); padding-top: 1rem; }

/* Big-type dividers and ghost numerals */
.bigtype { overflow: hidden; line-height: 1; margin: -.5rem 0 2.5rem; position: relative; z-index: 1; }
.bigtype span { display: block; white-space: nowrap; font: 600 clamp(4.5rem, 17vw, 15rem)/.95 var(--display); letter-spacing: -.04em; color: rgba(201, 242, 60, .14); transform: translateX(calc(var(--px, 0) * 1px)); }
.ghost { position: absolute; right: -2%; top: 50%; font: 600 clamp(12rem, 34vw, 30rem)/.8 var(--display); letter-spacing: -.06em; color: rgba(201, 242, 60, .07); transform: translateY(calc(-50% + var(--py, 0) * 1px)); pointer-events: none; z-index: 1; }
.stagger { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; counter-reset: sg; }
.stagger li { counter-increment: sg; font: 600 clamp(1.7rem, 4.2vw, 3.2rem)/1.15 var(--display); letter-spacing: -.02em; padding: .6rem 0; border-bottom: 1px solid rgba(244, 241, 232, .28); }
.stagger li::before { content: counter(sg, decimal-leading-zero); font: 500 .75rem var(--mono); letter-spacing: .1em; color: var(--lime); margin-right: 1rem; vertical-align: .6em; }
@media (min-width: 52rem) { .stagger li:nth-child(2) { margin-left: 8%; } .stagger li:nth-child(3) { margin-left: 16%; } .stagger li:nth-child(4) { margin-left: 24%; } .stagger li:nth-child(5) { margin-left: 32%; } }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 52rem) { .tiles { grid-template-columns: 1.3fr 1fr; } .tiles li:nth-child(2) { margin-top: 3rem; } }
.tiles a { display: grid; gap: 1rem; align-content: space-between; min-height: 18rem; padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: 14px; text-decoration: none; color: var(--parchment); background: var(--canopy) var(--grain-l); background-blend-mode: soft-light; position: relative; overflow: hidden; transition: transform .35s cubic-bezier(.3, .7, .2, 1), box-shadow .35s; }
.tiles li:nth-child(2) a { background-color: var(--leaf); }
.tiles a::after { content: ""; position: absolute; right: -4rem; bottom: -4rem; width: 14rem; height: 14rem; border-radius: 50%; background: radial-gradient(circle, rgba(201, 242, 60, .35), rgba(201, 242, 60, 0) 70%); transition: transform .5s; }
.tiles a:hover, .tiles a:focus-visible { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(11, 42, 31, .3); }
.tiles a:hover::after { transform: scale(1.4); }
.tiles a:focus-visible { outline-color: var(--leaf); }
.tiles .tn { font: 600 clamp(2rem, 5vw, 3.6rem)/1 var(--display); letter-spacing: -.03em; position: relative; z-index: 1; }
.tiles .td { color: var(--paper); max-width: 30ch; position: relative; z-index: 1; }
.tiles .ta { font-weight: 600; color: var(--lime); position: relative; z-index: 1; }
.tiles .ta::after { content: " \2192"; }

/* Micro-interactions */
.btn { transition: background-color .2s, transform .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn-lime:hover { box-shadow: 0 10px 28px rgba(201, 242, 60, .35); }
.btn-leaf:hover { box-shadow: 0 10px 24px rgba(15, 91, 61, .35); }
.checks li { transition: transform .25s; }
.checks li:hover { transform: translateX(.3rem); }
.photo-req, .demo-frame { transition: transform .35s, box-shadow .35s; }
.photo-req:hover { transform: rotate(-.6deg) translateY(-3px); box-shadow: 0 16px 36px rgba(11, 42, 31, .15); }
.wave i { transform-origin: center; animation: wv 1.5s ease-in-out infinite alternate; }
.wave i:nth-child(3n) { animation-duration: 1.1s; } .wave i:nth-child(3n+1) { animation-duration: 1.9s; animation-delay: -.5s; }
@keyframes wv { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
.brand img { transition: transform .3s; }
.brand:hover img { transform: rotate(-1.5deg) scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .rule-head::after, .js .steps li::after { opacity: 1; transform: none; transition: none; }
  .deco *, .stage *, .wave i, .mq-track, .lockup, .rows a, .rows .rt, .tiles a, .btn, .checks li { animation: none !important; transition: none !important; }
  .deco .dr { stroke-dashoffset: 0; }
  .stage { transform: none; }
  .fol, .ghost, .deco, .bigtype span { transform: none; }
  .deco { transform: translateY(-50%); }
  .ghost { transform: translateY(-50%); }
  .photo-req:hover { transform: none; }
}
.split-rows .h2.big { font-size: clamp(2.2rem, 4vw, 3.4rem); }

.rows .rt { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-items: baseline; }
.rows .rt::before { margin-right: 0; vertical-align: baseline; }
.rows .ra { justify-self: end; }
@media (min-width: 52rem) { .rows a { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) 9rem; } .rows.xl a { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 9rem; } }
.facts { margin-top: 1.75rem; }
@media (min-width: 62rem) { .page-hero h1 { max-width: min(14ch, 56%); } .page-hero.v-brand h1 { max-width: min(13ch, 52%); } }
@media (min-width: 62rem) { .page-hero.v-maps h1, .page-hero.v-leads h1, .page-hero.v-rev h1 { max-width: min(16ch, 54%); } }

/* Voice demo: tabs, side actions */
.vd-tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
.vd-tabs button { min-height: 2.5rem; padding: 0 .9rem; border-radius: 999px; border: 1.5px solid var(--lime); background: transparent; color: var(--lime); font: 600 .875rem var(--body); cursor: pointer; }
.vd-tabs button[aria-pressed="true"] { background: var(--lime); color: var(--canopy); }
.vd-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.vd-side { border: 1px solid var(--line-dark); border-radius: 10px; padding: .9rem 1rem; min-height: 13rem; }
.vd-side h3 { margin: 0 0 .6rem; font: 500 .75rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mist); }
.vd-acts { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.vd-acts li { padding: .5rem .75rem; border-left: 3px solid var(--lime); background: var(--canopy-2); color: var(--parchment); border-radius: 0 8px 8px 0; animation: vdIn .4s ease both; }
.vd-empty { margin: 0; color: var(--mist); }
.vd-empty[hidden] { display: none; }
.vd a { color: var(--lime); }
@keyframes vdIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vd-acts li { animation: none; } }

/* ---- UI/UX cleanup pass ---- */

/* Lists that are not sequences lose their numbers: services, towns, design items, section heads */
.rule-head { padding-top: 0; counter-increment: none; }
.rule-head::before, .rule-head::after { content: none; display: none; }
.rows .rt::before, .stagger li::before { content: none; display: none; }
.rows .rt { display: block; transition: transform .35s cubic-bezier(.3, .7, .2, 1); }

/* One row layout everywhere: title and action on the first line, description under the title.
   Fixes the town list where the title ran into its description inside a half-width column. */
.rows a, .rows.xl a { grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.5rem; align-items: baseline; }
.rows .rt { grid-column: 1; grid-row: 1; }
.rows .ra { grid-column: 2; grid-row: 1; justify-self: end; }
.rows .rd { grid-column: 1 / -1; grid-row: 2; max-width: 52ch; }
@media (min-width: 52rem) {
  .rows a, .rows.xl a { grid-template-columns: minmax(0, 1fr) auto; }
}
.rows .rt { overflow-wrap: break-word; }

/* Staggered design list: keep the offset, but let long items wrap cleanly */
.stagger li { padding-right: .5rem; }
@media (min-width: 52rem) and (max-width: 74rem) {
  .stagger li:nth-child(n) { margin-left: 0; }
  .stagger li:nth-child(odd) { margin-left: 6%; }
}

/* Product tiles: equal height, level tops */
@media (min-width: 52rem) {
  .tiles { align-items: stretch; }
  .tiles li:nth-child(2) { margin-top: 0; }
  .tiles li, .tiles li > a { height: 100%; }
}

/* Hero scene controls: a tidy stack on the open jungle side, clear of the copy panel and the panther */
@media (min-width: 62rem) {
  .run-btn, .mode-btn, .wx-btn {
    left: auto; right: var(--gutter); min-width: 10.5rem; text-align: center;
  }
  .wx-btn { bottom: 13.25rem; }
  .mode-btn { bottom: 16.5rem; }
  .run-btn { bottom: 19.75rem; }
}

/* Form feedback */
.field-error { color: #8a1c1c; font-size: .9375rem; font-weight: 500; }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: #8a1c1c; box-shadow: 0 0 0 1px #8a1c1c; }
.sent.err { display: block; background: #fbe6e3; color: #5c1212; }
.sent.show:not(.err) { display: block; }

/* Example galleries: live demo cards, screenshots */
.gal { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.gal > li { min-width: 0; }
.gcard { display: grid; gap: .5rem; align-content: start; text-decoration: none; color: inherit; height: 100%; }
.gcard img, .shot img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; border: 1px solid var(--line-light); border-radius: 6px; background: var(--parchment); transition: border-color .2s, box-shadow .25s, transform .25s; }
.shots .shot img { aspect-ratio: 560 / 368; }
.gcard:hover img, .gcard:focus-visible img { border-color: var(--leaf); box-shadow: 0 14px 30px rgba(11, 42, 31, .16); transform: translateY(-3px); }
.gt { font-family: var(--display); font-weight: 600; font-size: 1.3rem; line-height: 1.2; margin-top: .35rem; }
.gcard:hover .gt, .gcard:focus-visible .gt { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.gd2 { color: var(--slate); font-size: .9875rem; line-height: 1.5; max-width: 46ch; }
.gc { font-weight: 600; color: var(--leaf); }
.gc::after { content: " \2192"; }
.gcard[target="_blank"] .gc::after { content: " \2197"; }
.shot { margin: 0; display: grid; gap: .5rem; }
.shot figcaption { display: grid; gap: .25rem; }
.tone .gcard img { background: var(--white); }
@media (prefers-reduced-motion: reduce) { .gcard img { transition: none; } .gcard:hover img, .gcard:focus-visible img { transform: none; } }

/* Seven nav links plus the button: keep each on one line, tighten between 64rem and 75rem */
.nav a { white-space: nowrap; }
@media (min-width: 64rem) and (max-width: 75rem) {
  .nav a { padding-inline: .55rem; font-size: .9rem; }
  .nav a.btn { margin-left: .25rem; padding-inline: .9rem; }
  .brand img { height: 2.25rem; }
}

/* Industry pages */
.feat { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.5rem; }
.feat li { border-top: 1px solid var(--line-light); padding-top: 1rem; display: grid; gap: .35rem; }
.feat h3 { font-size: 1.25rem; }
.feat p { color: var(--slate); max-width: 46ch; }
.subh { font-family: var(--display); font-size: 1.35rem; margin-bottom: .25rem; color: var(--parchment); }
.faqs { display: grid; gap: 0; max-width: 46rem; border-top: 1px solid var(--line-light); }
.qa { border-bottom: 1px solid var(--line-light); padding: 1rem .25rem; }
.qa summary { cursor: pointer; font-weight: 600; font-size: 1.0625rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--leaf); }
.qa[open] summary::after { content: "\2212"; }
.qa p { margin-top: .6rem; color: var(--slate); max-width: 60ch; }
.two > .shot { align-self: start; }
.shot a { display: block; }