/* ============================================================
   Zylo AI — shared sub-page design system
   Matches The Composed: same palette, type, chrome and card
   vocabulary, tuned for pages people read rather than scroll
   through. Motion is reveal-on-entry, not pinned acts.
   ============================================================ */

:root {
  --canvas:   #050607;
  --surface:  #0c1210;
  --ink:      #eef4f1;
  --ink-soft: #9db3aa;
  --ink-dim:  #6d7f79;
  --accent:   #34d399;
  --accent-ink: #04120c;
  --line:     rgba(157,179,170,.16);
  --line-str: rgba(157,179,170,.28);
  --font-display: "Archivo", system-ui, sans-serif;
  --font-text: "Geist", system-ui, sans-serif;
  --gutter: clamp(1.2rem, 5vw, 4rem);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --wrap: 68rem;
}

* { box-sizing: border-box; }
html { background: var(--canvas); scroll-behavior: smooth; font-size: clamp(16px, 0.5vw + 9.2px, 21px); } /* fluid root, matched to the home page */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font-family: var(--font-text); font-size: 1rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(52,211,153,.3); color: #fff; }
a { color: inherit; }
img, svg { max-width: 100%; }

/* no-JS floor: nothing that hides content may depend on JS */
html:not(.js) [data-rev] { opacity: 1 !important; transform: none !important; }

/* ---------------- chrome ---------------- */
.site-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; gap: 2rem;
  padding: .85rem var(--gutter);
  background: rgba(5,5,5,.82); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.mark { display: inline-block; text-align: center; white-space: nowrap; text-decoration: none; color: #f4f4f5; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: .02em; line-height: 1; }
.mark b { color: var(--accent); }
.mark small { display: block; font-family: var(--font-text); font-weight: 500; font-size: .5rem; letter-spacing: .8em; text-indent: .8em; white-space: nowrap; color: #7d908a; margin-top: .26rem; }
.site-nav { display: flex; gap: 1.8rem; margin-left: auto; }
.site-nav a { color: #a1a1aa; text-decoration: none; font-size: .96rem; padding: .3rem 0; border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; }
.site-nav a:hover { color: #f4f4f5; border-color: var(--accent); }
.site-nav a[aria-current="page"] { color: var(--ink); border-color: var(--accent); }
.bar-cta { font-weight: 600; font-size: .9rem; color: var(--accent-ink); background: var(--accent); text-decoration: none; border-radius: 8px; padding: .6rem 1.05rem; transition: background .15s; white-space: nowrap; }
.bar-cta:hover { background: #4ae2a8; }

/* mobile menu */
.burger { all: unset; display: none; cursor: pointer; margin-left: auto; width: 2.4rem; height: 2.4rem; place-items: center; border-radius: 8px; border: 1px solid var(--line-str); }
.burger svg { width: 1.2rem; height: 1.2rem; color: var(--ink); }
.burger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mobile-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 59; display: none;
  padding: 5rem var(--gutter) 1.6rem;
  background: rgba(5,6,7,.97); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.mobile-nav.open { display: grid; gap: .2rem; }
.mobile-nav a { text-decoration: none; color: var(--ink-soft); font-size: 1rem; padding: .85rem .2rem; border-bottom: 1px solid var(--line); }
.mobile-nav a[aria-current="page"] { color: var(--accent); }
@media (max-width: 900px) {
  .site-nav { display: none; }
  .burger { display: grid; }
  .bar-cta { display: none; }
}

/* ---------------- page hero ----------------
   The Australia mesh stays. On wide screens the copy sits in a left column
   and the map is weighted right, so words never sit inside the map; a
   scroll-linked fade hands the reader down to the proof strip and the first
   section. Narrow screens centre a shorter copy block over a dimmer map. */
.phero { position: relative; min-height: 76svh; display: grid; align-items: center; overflow: hidden; background: #050505; padding: 7.5rem var(--gutter) 6rem; }
#aether { position: absolute; inset: 0; width: 100%; height: 100%; }
.phero-scrim { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,5,5,.25) 0%, rgba(5,5,5,0) 28%, rgba(5,6,7,0) 62%, var(--canvas) 100%),
    radial-gradient(58% 72% at 26% 52%, rgba(5,5,5,.78), rgba(5,5,5,.2) 62%, rgba(5,5,5,0) 100%); }
.phero-in { position: relative; z-index: 2; width: 100%; max-width: var(--wrap); margin-inline: auto; }
.phero-copy { max-width: 36rem; will-change: transform, opacity; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .68rem; letter-spacing: .22em; color: var(--accent);
  border: 1px solid rgba(52,211,153,.28); background: rgba(52,211,153,.07);
  border-radius: 999px; padding: .42rem 1rem; margin-bottom: 1.4rem;
}
.phero h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.3rem, 4.6vw, 3.6rem); line-height: 1.05; letter-spacing: -0.03em;
  margin: 0 0 1.1rem; text-wrap: balance;
  background: linear-gradient(to bottom, #fff, #a1a1aa);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.phero h1 em { font-style: normal; background: linear-gradient(to bottom, #6ee7b7, #10b981); -webkit-background-clip: text; background-clip: text; color: transparent; }
.phero .lede { font-size: clamp(1rem, 1.35vw, 1.15rem); line-height: 1.6; color: #b0bab5; max-width: 32rem; margin: 0 0 3.6rem; }
.phero .ctas { justify-content: flex-start; }
.ctas { align-items: stretch; }
.ctas .cta, .ctas .cta-ghost { min-height: 3.4rem; line-height: 1.2; padding-top: 0; padding-bottom: 0; }
@media (max-width: 900px) {
  .phero { min-height: 70svh; padding: 6.5rem var(--gutter) 5rem; text-align: center; }
  .phero-copy { margin-inline: auto; }
  .phero .lede { margin-inline: auto; }
  .phero .ctas { justify-content: center; }
  .phero-scrim { background:
    linear-gradient(180deg, rgba(5,5,5,.2) 0%, rgba(5,5,5,0) 28%, rgba(5,6,7,0) 62%, var(--canvas) 100%),
    radial-gradient(80% 64% at 50% 48%, rgba(5,5,5,.55), rgba(5,5,5,.88)); }
}

/* the proof strip: the bridge from the hero into the page */
.proof { position: relative; z-index: 3; max-width: var(--wrap); margin: -2.6rem auto 0; padding: 0 var(--gutter); }
.proof ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  border: 1px solid var(--line-str); border-radius: 14px; background: rgba(9,13,12,.82); backdrop-filter: blur(14px);
  box-shadow: 0 30px 60px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(238,244,241,.06); overflow: hidden; }
.proof li { display: block; padding: 1.05rem 1.25rem; font-size: .66rem; letter-spacing: .14em; line-height: 1.55; text-transform: uppercase; color: var(--ink-soft); border-left: 1px solid var(--line); }
.proof li:first-child { border-left: 0; }
.proof li b { color: var(--ink); font-weight: 600; }
.proof li::before { content: ""; display: inline-block; vertical-align: middle; margin: -2px .6rem 0 0; width: .42rem; height: .42rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgba(52,211,153,.65); }
@media (max-width: 680px) {
  .proof { margin-top: -2rem; }
  .proof ul { grid-template-columns: 1fr 1fr; }
  .proof li { border-left: 0; border-top: 1px solid var(--line); padding: .85rem 1rem; font-size: .6rem; }
  .proof li:nth-child(-n+2) { border-top: 0; }
  .proof li:nth-child(even) { border-left: 1px solid var(--line); }
}

/* ---------------- buttons ---------------- */
.cta { display: inline-flex; align-items: center; gap: .55rem; padding: 1rem 1.9rem; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: 1rem; color: var(--accent-ink); background: var(--accent); box-shadow: 0 18px 40px -18px rgba(52,211,153,.5); transition: background .2s, transform .14s var(--ease); }
.cta:hover { background: #6ee7b7; }
.cta:active { transform: scale(.97); }
.cta svg { width: 1.1rem; height: 1.1rem; }
.cta-ghost { display: inline-flex; align-items: center; gap: .5rem; padding: 1rem 1.9rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.16); color: #f4f4f5; text-decoration: none; font-weight: 600; font-size: 1rem; transition: border-color .2s, color .2s; }
.cta-ghost:hover { border-color: rgba(52,211,153,.6); color: #6ee7b7; }
.ctas { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* ---------------- section furniture ---------------- */
.sec { padding: clamp(3.5rem, 8vw, 6.5rem) var(--gutter); position: relative; }
.sec--alt { background: linear-gradient(180deg, rgba(12,18,16,.5), rgba(5,6,7,0)); }
.wrap { max-width: var(--wrap); margin-inline: auto; }
.wrap--narrow { max-width: 52rem; }
.kicker { display: flex; align-items: center; gap: .6rem; font-size: .68rem; letter-spacing: .2em; color: var(--accent); margin-bottom: .9rem; }
.kicker::before { content: ""; width: 1.4rem; height: 1px; background: var(--accent); }
.kicker.mid { justify-content: center; }
.kicker.mid::after { content: ""; width: 1.4rem; height: 1px; background: var(--accent); }
h2.sh { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.14; letter-spacing: -0.02em; margin: 0 0 1rem; text-wrap: balance; }
h2.sh em { font-style: normal; color: var(--accent); }
.sub { color: var(--ink-soft); max-width: 56ch; line-height: 1.68; margin: 0 0 2rem; }
.sub.mid { margin-inline: auto; text-align: center; }
.head-mid { text-align: center; }
.head-mid .sub { margin-inline: auto; }

/* ---------------- cards ---------------- */
.grid { display: grid; gap: 1.15rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.card {
  border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(180deg, rgba(15,21,19,.92), rgba(8,11,10,.92));
  box-shadow: inset 0 1px 0 rgba(238,244,241,.06), 0 20px 44px -30px rgba(0,0,0,.85);
  padding: 1.5rem 1.5rem 1.45rem; position: relative;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.card:hover { border-color: rgba(52,211,153,.35); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .card:hover { transform: translateY(-3px); }
}
.card .ic { width: 2.6rem; height: 2.6rem; border: 1px solid rgba(52,211,153,.3); border-radius: 11px; display: grid; place-items: center; color: var(--accent); background: rgba(52,211,153,.06); margin-bottom: 1rem; }
.card .ic svg { width: 1.3rem; height: 1.3rem; }
.card .tag { display: inline-block; font-size: .56rem; letter-spacing: .18em; color: var(--accent); border: 1px solid rgba(52,211,153,.28); background: rgba(52,211,153,.06); border-radius: 999px; padding: .3rem .55rem; margin-bottom: .7rem; }
.card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.16rem; margin: 0 0 .45rem; color: var(--ink); line-height: 1.3; }
.card p { color: var(--ink-soft); font-size: .92rem; line-height: 1.62; margin: 0; }
.card ul { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .5rem; }
.card li { color: var(--ink-soft); font-size: .88rem; line-height: 1.5; padding-left: 1.35rem; position: relative; }
.card li::before { content: ""; position: absolute; left: 0; top: .5em; width: .5rem; height: .5rem; border-radius: 50%; border: 1.4px solid var(--accent); }
.card .foot { margin-top: 1.1rem; padding: .9rem 0 0; background: none; border-top: 1px solid var(--line); font-size: .74rem; letter-spacing: .1em; color: var(--ink-dim); }
/* a card may close on a point worth setting apart from its bullets - the practitioner capstone, say */
.card .foot .note { display: block; margin-top: .7rem; letter-spacing: 0; font-size: .84rem; line-height: 1.55; color: var(--ink-soft); }
.card .foot .note b { display: block; margin-bottom: .25rem; font-size: .6rem; letter-spacing: .18em; color: var(--accent); font-weight: 500; }

/* numbered engagement blocks */
.eng { display: grid; grid-template-columns: auto 1fr; gap: 1.6rem; padding: 1.7rem 0; border-top: 1px solid var(--line); }
.eng:last-child { border-bottom: 1px solid var(--line); }
.eng .n { font-family: var(--font-display); font-weight: 600; font-size: .8rem; letter-spacing: .12em; color: var(--accent); padding-top: .25rem; white-space: nowrap; }
.eng h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.15rem, 2vw, 1.45rem); margin: 0 0 .2rem; color: var(--ink); }
.eng .meta { font-size: .64rem; letter-spacing: .16em; color: var(--ink-dim); margin-bottom: .7rem; }
.eng p { color: var(--ink-soft); max-width: 62ch; margin: 0 0 .8rem; line-height: 1.66; }
.eng ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.eng li { color: var(--ink-soft); font-size: .9rem; padding-left: 1.35rem; position: relative; line-height: 1.5; }
.eng li::before { content: ""; position: absolute; left: 0; top: .55em; width: .45rem; height: .45rem; border-radius: 50%; background: rgba(52,211,153,.55); }

/* spec plate */
.spec { display: grid; margin-top: .4rem; }
.spec-row { display: grid; grid-template-columns: 11rem 1fr; gap: 1.4rem; padding: .95rem 0; border-top: 1px solid var(--line); }
.spec-row:last-child { border-bottom: 1px solid var(--line); }
.spec-row .k { font-size: .64rem; letter-spacing: .16em; color: var(--ink-dim); padding-top: .2rem; }
.spec-row .v { color: var(--ink); font-size: .95rem; line-height: 1.55; }

/* ---------------- the process path: a pinned, scroll-driven act ----------------
   The section owns ~2.8 viewport-heights of scroll; a sticky frame holds the
   heading, the line and four stage columns whose centres sit under the dots.
   As the reader scrolls, the line draws, each dot ignites and its stage text
   appears beneath it. Narrow screens get a vertical timeline instead. */
.pathact { min-height: 280vh; padding-top: 0; padding-bottom: 0; }
.path-sticky { position: sticky; top: 0; min-height: 100svh; display: grid; align-content: center; padding: 5.5rem 0 3.5rem; }
.pathact .head-mid { margin-bottom: .6rem; }
.pathact .head-mid .sub { margin-bottom: 1.4rem; }
.pathfx { display: block; width: 100%; height: auto; overflow: visible; }
.pnode .ringo { fill: none; stroke: rgba(157,179,170,.35); stroke-width: 1.4; transition: stroke .35s; }
.pnode .core { fill: #101714; stroke: rgba(157,179,170,.4); stroke-width: 1; transition: fill .35s, stroke .35s; }
.pnode .aura { opacity: 0; transition: opacity .5s var(--ease); }
.pnode .ping { transform-box: fill-box; transform-origin: center; opacity: 0; }
.pnode.on .ringo { stroke: var(--accent); }
.pnode.on .core { fill: var(--accent); stroke: #a7f3d0; }
.pnode.on .aura { opacity: .55; }
@media (prefers-reduced-motion: no-preference) {
  .pnode.just .ping { animation: ping .9s var(--ease) both; }
  @keyframes ping { from { opacity: .9; transform: scale(.6); } to { opacity: 0; transform: scale(2.4); } }
}
.pathsteps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: .2rem; }
.pathsteps .st { text-align: center; padding: 0 1rem; }
.pathsteps .st .sn { font-size: .6rem; letter-spacing: .18em; color: var(--accent); margin: 0 auto .5rem; max-width: none; }
.pathsteps .st h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.14rem; margin: 0 0 .45rem; color: var(--ink); }
.pathsteps .st p { color: var(--ink-soft); font-size: .88rem; line-height: 1.6; margin: 0 auto; max-width: 30ch; }
@media (prefers-reduced-motion: no-preference) {
  .pathact .st { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
  .pathact .st.on { opacity: 1; transform: none; }
}
/* no JS: nothing pins, everything shows, and the dots sit where the script would put them */
html:not(.js) .pathact { min-height: 0; }
html:not(.js) .path-sticky { position: static; min-height: 0; }
html:not(.js) .pathact .st { opacity: 1; transform: none; }
html:not(.js) .pnode[data-t="0"] { transform: translate(125px, 44px); }
html:not(.js) .pnode[data-t="0.3333"] { transform: translate(375px, 44px); }
html:not(.js) .pnode[data-t="0.6667"] { transform: translate(625px, 44px); }
html:not(.js) .pnode[data-t="1"] { transform: translate(875px, 44px); }

/* prose */
.prose p { color: var(--ink-soft); line-height: 1.75; max-width: 62ch; margin: 0 0 1.1rem; }
.prose p strong, .prose strong { color: var(--ink); font-weight: 600; }
.prose ul { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: .6rem; max-width: 62ch; }
.prose li { color: var(--ink-soft); line-height: 1.65; padding-left: 1.35rem; position: relative; }
.prose li::before { content: ""; position: absolute; left: 0; top: .6em; width: .45rem; height: .45rem; border-radius: 50%; background: rgba(52,211,153,.55); }
.prose h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--ink); margin: 2rem 0 .6rem; }
.lead-line { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem, 2.4vw, 1.7rem); line-height: 1.4; letter-spacing: -0.01em; color: var(--ink); max-width: 34ch; }

/* faq */
.faq { display: grid; gap: .6rem; }
.faq details { border: 1px solid var(--line); border-radius: 12px; background: rgba(10,14,13,.6); overflow: hidden; }
.faq details[open] { border-color: rgba(52,211,153,.28); }
.faq summary { cursor: pointer; list-style: none; padding: 1.1rem 1.3rem; font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink); display: flex; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; color: var(--accent); font-size: 1.3rem; line-height: 1; font-weight: 400; transition: transform .2s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 1.3rem 1.2rem; color: var(--ink-soft); line-height: 1.7; max-width: 66ch; }
.faq .a p { margin: 0 0 .8rem; }
.faq .a p:last-child { margin: 0; }

/* callout */
.callout { border: 1px solid rgba(52,211,153,.25); background: rgba(52,211,153,.05); border-radius: 14px; padding: 1.4rem 1.5rem; }
.callout p { margin: 0; color: var(--ink-soft); line-height: 1.68; }
.callout strong { color: var(--ink); }

/* ---------------- close band: split composition on a dot field ----------------
   Copy and buttons on the left, the three contact tiles stacked on the right and
   pulled down so the last tile sits level with the primary button. No seam above:
   the band fades in from the section before it and out into the footer. */
.closeband { position: relative; overflow: hidden; isolation: isolate; text-align: center;
  padding: clamp(4rem, 9vw, 7rem) var(--gutter) clamp(3.6rem, 7vw, 5.5rem); }
/* the dot field and its fade live on a background layer, so the copy and buttons are never dimmed */
.closeband::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(rgba(157,179,170,.34) .9px, transparent 1.3px) 0 0 / 16px 16px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 70%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 22%, #000 70%, transparent); }
.close-in { position: relative; z-index: 1; max-width: var(--wrap); margin-inline: auto; }
.closeband h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 3.6vw, 2.7rem); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 .9rem; text-wrap: balance; }
.closeband p { color: var(--ink-soft); max-width: 46ch; margin: 0 auto 2rem; line-height: 1.68; }
/* one line of practical detail between the paragraph and the buttons, where a page has it to give;
   it sits above the buttons so the buttons stay the copy column's bottom edge (what the panel aligns to) */
.closeband .fine { margin-top: -1.1rem; margin-bottom: 1.8rem; font-size: .82rem; color: var(--ink-dim); }
/* the founder panel: no face of its own - the dot field runs through it; a label, founders as hairline rows,
   the email as the last row. Reads as part of the band, not a card laid on top of it. */
.founders { text-align: left; max-width: 26rem; margin: 0 auto; padding: 0; }
.founders-k { font-size: .6rem; letter-spacing: .2em; color: var(--ink-dim); margin: 0 0 .35rem; padding-bottom: .55rem; border-bottom: 1px solid rgba(157,179,170,.22); }

/* the founder panel was removed for now, so the band is a single centred column again */

.fr { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-items: center; column-gap: .9rem; text-decoration: none; padding: .85rem 0; border-top: 1px solid rgba(157,179,170,.14); }
.fr:first-of-type { border-top: 0; }
.fr--mail { border-top-color: rgba(157,179,170,.22); }
.fr:last-of-type { border-bottom: 1px solid rgba(157,179,170,.22); }
.fr-body { min-width: 0; }
.fr b { display: block; color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: .98rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s; }
.fr:hover b { color: var(--accent); }
.fr-meta { display: block; margin-top: .16rem; font-size: .8rem; line-height: 1.3; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-val { color: var(--accent); font-variant-numeric: tabular-nums; }
.fc-mono { width: 2.6rem; height: 2.6rem; border-radius: 10px; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: .78rem; line-height: 1; letter-spacing: .06em;
  color: var(--accent); background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.3); }

/* ---------------- footer ---------------- */
/* ---------------- footer ---------------- */
.foot { border-top: 1px solid var(--line); padding: 2.8rem var(--gutter) 1.8rem; background: #040506; }
/* the band already fades to the footer's ground, so the footer's own rule would draw a line across the fade */
.foot { border-top-color: transparent; }
.foot-grid { max-width: var(--wrap); margin-inline: auto; display: grid; grid-template-columns: 1.8fr 1fr 1fr; gap: 2rem; align-items: start; }
.foot .foot-h { font-size: .64rem; letter-spacing: .18em; color: var(--ink-dim); margin: 0 0 .9rem; font-weight: 500; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.foot a { color: var(--ink-soft); text-decoration: none; font-size: .88rem; }
.foot a:hover { color: var(--ink); }
.foot .blurb { color: var(--ink-soft); font-size: .88rem; line-height: 1.65; max-width: 34ch; margin: .8rem 0 0; }
.foot-base { max-width: var(--wrap); margin: 2.4rem auto 0; padding-top: 1.4rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between; font-size: .74rem; color: var(--ink-dim); }

/* ---------------- reveal ---------------- */
@media (prefers-reduced-motion: no-preference) {
  [data-rev] { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  /* capability tiles: a deliberate, slow fade-up rather than the snappy reveal the rest of the page uses */
  .grid-reveal .card[data-rev] { transform: translateY(44px) scale(.98); transition-duration: 2s; transition-timing-function: cubic-bezier(.45, .05, .2, 1); }
  [data-rev].in { opacity: 1; transform: none; }
}

/* landscape phones: let the hero grow to its content instead of clipping */
@media (max-height: 500px) {
  .phero { min-height: auto; padding: 5.5rem var(--gutter) 3rem; }
}

/* ---------------- responsive ---------------- */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .pathact { min-height: 0; padding-top: clamp(3.5rem, 8vw, 6.5rem); padding-bottom: clamp(3.5rem, 8vw, 6.5rem); }
  .path-sticky { position: static; min-height: 0; padding: 0; }
  .pathact .pathfx { display: none; }
  .pathsteps { grid-template-columns: 1fr; gap: 0; position: relative; padding-left: 2.4rem; margin-top: 1.4rem; }
  .pathsteps::before { content: ""; position: absolute; left: .58rem; top: .7rem; bottom: .9rem; width: 2px; border-radius: 2px; background: linear-gradient(180deg, #0f9f6e, rgba(52,211,153,.12)); }
  .pathsteps .st { text-align: left; padding: 0 0 1.7rem; position: relative; }
  .pathsteps .st p { margin: 0; max-width: 46ch; }
  .pathsteps .st::before { content: ""; position: absolute; left: -2.4rem; top: .2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 1.5px solid rgba(157,179,170,.4); background: var(--canvas); transition: border-color .35s, background .35s, box-shadow .35s; }
  .pathsteps .st.on::before { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 14px rgba(52,211,153,.6); }
  .pathsteps .st:last-child { padding-bottom: 0; }
}
@media (max-width: 680px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .eng { grid-template-columns: 1fr; gap: .5rem; }
  .spec-row { grid-template-columns: 1fr; gap: .25rem; }
  .foot-grid { grid-template-columns: 1fr; }
}