/* =========================================================
   Hexoflow — global styles
   Brand ratio: 70% near-black / 20% panel / 10% electric cyan
   ========================================================= */

/* Archivo, served from this site (no request to Google Fonts: faster first paint, and visitors'
   IP addresses aren't sent to Google). Variable font: weights 400–800, widths 100–125%. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;      /* dark scrollbars, form controls and loading canvas to match the site */

  /* Brand */
  --bg: #0A0A0F;           /* 70% — backgrounds, nav, hero, footer */
  --bg-rgb: 10, 10, 15;
  --panel: #16161F;        /* 20% — cards, panels, dividers */
  --panel-deep: #101017;   /* illustration wells inside panels */
  --accent: #06B6D4;       /* 10% — CTAs, links, active states, key icons */
  --accent-rgb: 6, 182, 212;
  --accent-hover: #22D3EE;
  --on-accent: #0A0A0F;    /* text on cyan: near-black passes contrast (8.1:1), white does not (2.4:1) */

  /* Neutrals (text only) */
  --text: #ECECEF;         /* 16.8:1 on --bg */
  --text-muted: #A1A1AA;   /* 7.7:1 on --bg, 7.0:1 on --panel */
  --text-faint: #7A7A83;   /* placeholders and empty selects: 4.65:1 on --bg (AA needs 4.5) */
  --error: #F87171;        /* invalid fields and form errors: 6.2:1 on --panel */
  --neutral-rgb: 161, 161, 170;
  --line: rgba(var(--neutral-rgb), 0.16);

  /* Type — one variable family: headings run wide (expanded), body text at normal width */
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wide: 122%;            /* headline width */
  --semi: 108%;            /* buttons, labels, wordmark */
  --h2-size: clamp(1.45rem, 1.15rem + 1.25vw, 1.9rem);

  /* Layout */
  --container: 1160px;
  --gutter: 1.25rem;
  --radius: 14px;          /* cards and panels; big showcase panels use 18px, wells and fields 12px */
  --radius-sm: 4px;
  --header-h: 68px;
  --section-y: clamp(4rem, 8vw, 6.5rem);

  /* The flow rail: a line running down the page that every section plugs into (desktop) */
  --rail-gap: 3rem;        /* space between the rail and the content */
  --rail: rgba(var(--accent-rgb), .3);
  --node: 13px;            /* hexagon junction size */
  --hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  /* Dotted canvas, like the workspace in n8n or Make: wherever a workflow is drawn */
  --dots: radial-gradient(circle, rgba(var(--neutral-rgb), .2) 1px, transparent 1.5px);
  /* Hexagon lattice, the cell shape of the logo: the site's background texture.
     Two strengths, because a background layer can't carry its own opacity. */
  --hexgrid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45.03' height='78' viewBox='0 0 45.03 78'%3E%3Cpath d='M0 -26L22.52 -13L22.52 13L0 26L-22.52 13L-22.52 -13ZM45.03 -26L67.55 -13L67.55 13L45.03 26L22.52 13L22.52 -13ZM22.52 13L45.03 26L45.03 52L22.52 65L0 52L0 26ZM0 52L22.52 65L22.52 91L0 104L-22.52 91L-22.52 65ZM45.03 52L67.55 65L67.55 91L45.03 104L22.52 91L22.52 65Z' fill='none' stroke='%23A1A1AA' stroke-opacity='.075' stroke-width='1'/%3E%3C/svg%3E") 0 0 / 45.03px 78px;
  --hexgrid-faint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45.03' height='78' viewBox='0 0 45.03 78'%3E%3Cpath d='M0 -26L22.52 -13L22.52 13L0 26L-22.52 13L-22.52 -13ZM45.03 -26L67.55 -13L67.55 13L45.03 26L22.52 13L22.52 -13ZM22.52 13L45.03 26L45.03 52L22.52 65L0 52L0 26ZM0 52L22.52 65L22.52 91L0 104L-22.52 91L-22.52 65ZM45.03 52L67.55 65L67.55 91L45.03 104L22.52 91L22.52 65Z' fill='none' stroke='%23A1A1AA' stroke-opacity='.07' stroke-width='1'/%3E%3C/svg%3E") 0 0 / 45.03px 78px;
  /* a hairline of cyan light along the top edge of a band, brightest in the middle */
  --edge-light: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .45) 50%, transparent) top / 100% 1px no-repeat;

  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem); /* anchor links clear the sticky header */
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}
/* ---------- Background ----------
   The lattice runs down the page margins and fades out before it reaches the text column,
   so the page has texture without anything sitting behind what people read.
   Panel bands are opaque and cover it; they carry their own (below). */
body::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--hexgrid);
  background-position: center top;
  -webkit-mask: linear-gradient(to right, #000, transparent 24%, transparent 76%, #000);
          mask: linear-gradient(to right, #000, transparent 24%, transparent 76%, #000);
}
@media (max-width: 767px) { body::before { opacity: .6; } }

/* With JavaScript, the live signal network (main.js) replaces that still lattice.
   It's full strength at the sides and dimmed behind the text column so reading stays easy. */
.has-net body::before { display: none; }
/* Pause/play for the moving background: small, in the corner, out of the way of content */
.bg-net-toggle {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 40;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(var(--bg-rgb), .92);
  border: 1px solid var(--line);
  color: var(--text-muted);
  transition: color .2s, border-color .2s;
}
.bg-net-toggle[hidden] { display: none; }
.bg-net-toggle:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), .6); }
.bg-net-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bg-net {
  position: fixed; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  pointer-events: none;
  -webkit-mask: linear-gradient(to right, #000 8%, rgba(0, 0, 0, .42) 32%, rgba(0, 0, 0, .42) 68%, #000 92%);
          mask: linear-gradient(to right, #000 8%, rgba(0, 0, 0, .42) 32%, rgba(0, 0, 0, .42) 68%, #000 92%);
}
@media (max-width: 767px) {
  .bg-net {
    -webkit-mask: linear-gradient(#000, rgba(0, 0, 0, .55));
            mask: linear-gradient(#000, rgba(0, 0, 0, .55));
  }
}
img, svg { display: block; max-width: 100%; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent); color: var(--on-accent); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 100;
  background: var(--accent); color: var(--on-accent); padding: .6rem 1rem; border-radius: var(--radius-sm);
  transition: top .2s;
}
.skip-link:focus { top: 1rem; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 768px) { :root { --gutter: 2rem; } }

.section { padding-block: var(--section-y); }
.section--panel {
  /* edge light, then the lattice showing only in the top-right corner (a panel-coloured
     fade sits over the rest of it), then the panel colour itself */
  background:
    var(--edge-light),
    radial-gradient(ellipse 60% 100% at 100% 0%, transparent 15%, var(--panel) 80%),
    var(--hexgrid-faint),
    var(--panel);
  border-block: 1px solid var(--line);
}
/* with the live network behind the page, the bands turn slightly see-through instead */
.has-net .section--panel,
.has-net .section--panel:nth-of-type(even) {
  background: var(--edge-light), rgba(22, 22, 31, .84);
}
/* alternate the corner from band to band so the page doesn't repeat itself */
.section--panel:nth-of-type(even) {
  background:
    var(--edge-light),
    radial-gradient(ellipse 60% 100% at 0% 100%, transparent 15%, var(--panel) 80%),
    var(--hexgrid-faint),
    var(--panel);
}
.section--flush-top { padding-top: 0; }

/* ---------- Typography ---------- */
h1, h2, h3 {
  font-weight: 700;
  font-stretch: var(--wide);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.95rem, 1.35rem + 2.3vw, 2.85rem); line-height: 1.06; }
h2 { font-size: var(--h2-size); line-height: 1.15; }
h3 { font-size: 1.1875rem; line-height: 1.3; font-weight: 600; font-stretch: 100%; letter-spacing: -0.01em; }

p { text-wrap: pretty; }

.lead {
  font-size: 1.125rem;
  color: var(--text-muted);
  max-width: 38rem;
}

.section-head { margin-bottom: 2.5rem; max-width: 40rem; }
.section-head p { color: var(--text-muted); margin-top: .75rem; }
.section-head--split {
  max-width: none;
  display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;
}
@media (min-width: 768px) {
  .section-head--split { flex-direction: row; justify-content: space-between; align-items: flex-end; }
}

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-weight: 600;
  font-stretch: var(--semi);
  font-size: .9375rem;
  line-height: 1.2;
  padding: .8rem 1.25rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s, transform .1s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn svg { flex-shrink: 0; }
.btn-sm { padding: .55rem .95rem; font-size: .875rem; }
.btn-lg { padding: .95rem 1.5rem; font-size: 1rem; }

.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); box-shadow: 0 8px 24px -10px rgba(var(--accent-rgb), .8); }
.btn-ghost { border-color: rgba(var(--neutral-rgb), .35); color: var(--text); }
.btn-ghost:hover { border-color: var(--text); }

.text-link {
  display: inline-block;
  margin-top: 2rem;
  color: var(--accent); font-weight: 600;
  text-underline-offset: 4px;
}
.text-link:hover { text-decoration: underline; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(var(--bg-rgb), .9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h);
}
.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 700; font-stretch: var(--wide); font-size: 1.125rem; letter-spacing: -0.01em;
}
.brand img { width: 40px; height: auto; }

/* Phones and tablets: "Book a free call" sits beside the menu button, visible without opening the menu */
.header-cta { margin-left: auto; margin-right: .5rem; }
@media (min-width: 900px) { .header-cta { display: none; } }
/* the menu then doesn't need a second copy of the button */
@media (max-width: 899px) { .site-nav > .btn { display: none; } }
/* small phones: tighten so logo, button and menu fit on one row */
@media (max-width: 379px) {
  .header-cta { padding: .5rem .7rem; font-size: .8125rem; margin-right: .25rem; }
  .header-cta-free { display: none; }   /* "Book a call" */
  .brand { font-size: 1rem; gap: .45rem; }
  .brand img { width: 34px; }
}

.nav-toggle {
  width: 44px; height: 44px;
  display: grid; place-content: center; gap: 6px;
}
.nav-toggle-bar {
  display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px;
  transition: transform .25s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }

/* Mobile nav: dropdown panel under the header */
.site-nav {
  position: absolute; inset: var(--header-h) 0 auto 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: .5rem var(--gutter) 1.75rem;
  display: flex; flex-direction: column; gap: 1.25rem;
  /* The panel sticks to the header, so the page can't scroll it into view:
     cap it at the space below the header and let it scroll itself (landscape phones) */
  max-height: calc(100vh - var(--header-h));
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0; visibility: hidden;
  transition: opacity .2s, visibility .2s;
}
.site-nav.is-open { opacity: 1; visibility: visible; }
.site-nav ul { display: flex; flex-direction: column; }
.site-nav ul a {
  display: block; padding: .85rem 0;
  font-size: 1.125rem; font-weight: 600;
  border-bottom: 1px solid var(--line);
  color: var(--text-muted);
  transition: color .2s;
}
.site-nav ul a:hover, .site-nav ul a[aria-current="page"] { color: var(--text); }
.site-nav .btn { align-self: flex-start; }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .site-nav {
    position: static; flex-direction: row; align-items: center; gap: 2rem;
    padding: 0; background: none; border: 0;
    max-height: none; overflow: visible;
    opacity: 1; visibility: visible;
  }
  .site-nav ul { flex-direction: row; gap: 1.75rem; }
  .site-nav ul a {
    padding: .25rem 0; border: 0;
    font-size: .9375rem; font-weight: 500;
    position: relative;
  }
  .site-nav ul a[aria-current="page"]::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
    background: var(--accent);
  }
}

/* ---------- Floating header ----------
   The bar floats as a rounded pill over the page; links are pills too, the current page outlined in cyan.
   (Overrides the flat full-width header above.) */
:root { --header-h: 76px; }
.site-header {
  top: 0;
  padding-top: .75rem;
  background: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 0;
}
.site-header .header-inner {
  width: calc(100% - 2 * var(--gutter));
  max-width: calc(var(--container) - 2 * var(--gutter));
  height: 60px;
  padding-inline: 1.25rem .5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  position: relative;                 /* the phone menu panel lines up with this bar */
  /* solid enough to read over the background without a blur: a blur has to be redrawn on every
     scroll frame because the animated network moves behind the bar */
  background: rgba(var(--bg-rgb), .9);
  box-shadow: 0 14px 34px -22px rgba(0, 0, 0, .9);
  transition: background-color .3s, border-color .3s;
}
.site-header.is-scrolled .header-inner { background: rgba(var(--bg-rgb), .95); border-color: rgba(var(--neutral-rgb), .24); }
.site-header .nav-toggle { border-radius: 999px; }
/* the smallest phones: slimmer bar edges so logo, button and menu fit on one row */
@media (max-width: 379px) {
  .site-header .header-inner { width: calc(100% - 1.5rem); padding-inline: .85rem .25rem; }
  .site-header .brand { font-size: .95rem; gap: .4rem; }
  .site-header .brand img { width: 30px; }
  .site-header .header-cta { padding: .45rem .65rem; margin-right: .1rem; }
  .site-header .nav-toggle { width: 38px; }
}

/* phones and tablets: the menu opens as a rounded panel under the bar */
@media (max-width: 899px) {
  .site-nav {
    /* the rounded bar is the panel's frame (position: relative above), so this lines up with its edges */
    inset: calc(100% + .5rem) 0 auto 0;
    padding: .5rem 1.25rem 1.25rem;
    background: var(--panel);
    box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .9);
    border: 1px solid var(--line);
    border-radius: 20px;
    max-height: calc(100vh - var(--header-h) - 1.5rem);
    max-height: calc(100dvh - var(--header-h) - 1.5rem);
    transform: translateY(-6px);
    transition: opacity .25s, visibility .25s, transform .3s var(--ease);
  }
  .site-nav.is-open { transform: none; }
  .site-nav ul li:last-child a { border-bottom: 0; }
}
@media (min-width: 900px) {
  .site-nav { gap: 1rem; }
  .site-nav ul { gap: .25rem; }
  .site-nav ul a {
    padding: .5rem .95rem;
    border: 1px solid transparent;
    border-radius: 999px;
    transition: color .2s, background-color .2s, border-color .2s;
  }
  .site-nav ul a:hover { background: rgba(var(--neutral-rgb), .08); }
  .site-nav ul a[aria-current="page"] { color: var(--text); background: rgba(var(--accent-rgb), .1); border-color: rgba(var(--accent-rgb), .45); }
  .site-nav ul a[aria-current="page"]::after { content: none; }
}

/* Smooth scrolling (Lenis). Its own glide replaces the browser's smooth scroll while it runs. */
html.lenis { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Page-to-page: pages crossfade instead of flashing, and the header stays put (browsers that
   support cross-document view transitions; others simply load the page as before) */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; animation-timing-function: var(--ease); }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* FAQ answers slide open and closed (supporting browsers; others open instantly as before) */
:root { interpolate-size: allow-keywords; }
.faq details::details-content {
  block-size: 0; overflow: clip;
  transition: block-size .4s var(--ease), content-visibility .4s allow-discrete;
}
.faq details[open]::details-content { block-size: auto; }

/* The floating bar slims a little once the page scrolls */
.site-header .header-inner { transition: background-color .3s, border-color .3s, height .35s var(--ease); }
.site-header.is-scrolled .header-inner { height: 54px; }

/* Cards rise gently under a mouse pointer */
@media (hover: hover) {
  .work-card, .project-card, .service-item, .dash-kpi {
    transition: transform .4s var(--ease), border-color .25s, box-shadow .4s var(--ease);
  }
  .work-card:hover, .project-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -28px rgba(0, 0, 0, .9); }
  .service-item:hover { transform: translateY(-3px); }
}

/* Scroll reveal (class added by main.js only when motion is allowed) */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js-reveal .reveal.is-in { opacity: 1; transform: none; }

/* rounded buttons everywhere, to match the bar */
.btn, .filter-btn { border-radius: 999px; }
.btn { transition: background-color .25s, border-color .25s, color .25s, box-shadow .25s, transform .15s; }

/* ---------- Home hero ---------- */
.hero {
  position: relative;
  padding-top: clamp(3rem, 7vw, 5.5rem);
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
}
/* behind the call card: cyan light pooling on a patch of the lattice, both fading out to the page */
.hero::after {
  --pool: 76% 44%;
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 55% at var(--pool), rgba(var(--accent-rgb), .16), transparent 70%),
    var(--hexgrid);
  background-position: 0 0, center top;
  -webkit-mask: radial-gradient(48% 72% at var(--pool), #000 25%, transparent 80%);
          mask: radial-gradient(48% 72% at var(--pool), #000 25%, transparent 80%);
}
@media (max-width: 1023px) { .hero::after { --pool: 50% 76%; } }
.has-net .hero::after {
  background: radial-gradient(40% 55% at var(--pool), rgba(var(--accent-rgb), .18), transparent 70%);
  -webkit-mask: none; mask: none;
}
.hero-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 1.45fr 1fr; gap: 3rem; } }

.hero-copy h1 { max-width: 22ch; }
.hero-copy h1 .line { display: inline-block; }
/* The headline: large, tight and set at normal width (wide type at this size would run off the column),
   the second sentence in cyan */
.hero-copy h1 {
  max-width: none;
  font-stretch: 100%;
  font-size: clamp(2.5rem, 1.35rem + 3.9vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.025em;
}
.hero-copy h1 .line + .line { color: var(--accent); }
/* a clearing in the network behind the hero copy, so signals never run through the headline */
.has-net .hero-copy { position: relative; }
.has-net .hero-copy::before {
  content: ""; position: absolute; inset: -3rem -4rem; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--bg-rgb), .92) 55%, transparent);
}   /* each sentence wraps as a unit when it can */
.hero-copy .lead { margin-top: 1.25rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hero-note { margin-top: 1rem; font-size: .9375rem; color: var(--text-muted); }
@media (max-width: 479px) { .hero-actions .btn { width: 100%; } }

/* The one animated element: a live-looking workflow, set on a dotted builder canvas */
.hero { overflow-x: clip; }   /* the canvas reaches past the column; never past the page */
.flow-stage {
  position: relative;
  display: grid; justify-items: center;
  animation: stage-in .8s var(--ease) .15s both;
}
@media (min-width: 1024px) { .flow-stage { padding-block: 1.5rem; } }
@keyframes stage-in { from { opacity: 0; transform: translateY(14px); } }
.flow-stage::before {
  content: ""; position: absolute; inset: -2rem -3rem;
  background: var(--dots) center / 22px 22px;
  -webkit-mask: radial-gradient(closest-side, #000 45%, transparent);
          mask: radial-gradient(closest-side, #000 45%, transparent);
  pointer-events: none;
}
.flow {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.25rem;
  max-width: 440px; width: 100%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    0 40px 80px -40px rgba(var(--accent-rgb), .35),
    0 30px 60px -30px rgba(0, 0, 0, .9);
}
.flow-head {
  display: flex; align-items: center; gap: .6rem;
  font-size: .875rem; color: var(--text-muted);
  padding: 0 .25rem 1rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1rem;
}
.flow-dot { width: 9px; height: 10px; clip-path: var(--hex); background: var(--accent); }
.flow-status { margin-left: auto; font-weight: 600; font-size: .8125rem; color: var(--accent); }

.flow-steps { display: grid; gap: 1.5rem; }
.flow-step {
  position: relative;
  display: grid; grid-template-columns: auto 1fr auto; gap: .85rem; align-items: center;
  padding: .8rem .95rem;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
}
.flow-step:not(:last-child)::after {
  content: ""; position: absolute; left: calc(.95rem + 17px); top: 100%;
  width: 2px; height: 1.5rem; background: var(--line);
}

.flow-icon {
  width: 36px; height: 38px;
  display: grid; place-items: center;
  background: var(--panel); color: var(--text-muted);
  clip-path: var(--hex);
}
.flow-icon svg { width: 18px; height: 18px; }
/* Still frame (and the reduced-motion view): the AI step is the one lit up */
.flow-step--agent { border-color: rgba(var(--accent-rgb), .55); }
.flow-step--agent .flow-icon { background: var(--accent); color: var(--on-accent); }

/* The call plays through: each step lights up in turn, two seconds apiece */
.flow-step { animation: step-live 8s infinite; }
.flow-step .flow-icon { animation: icon-live 8s infinite; }
/* …and the wire below a step carries the signal on to the next one */
.flow-step:not(:last-child)::after { animation: wire-live 8s infinite; }
/* negative delays start every step mid-cycle, so only one is ever lit (step 2 lights at 2s, step 3 at 4s…) */
.flow-step:nth-child(2), .flow-step:nth-child(2) .flow-icon, .flow-step:nth-child(2)::after { animation-delay: -6s; }
.flow-step:nth-child(3), .flow-step:nth-child(3) .flow-icon, .flow-step:nth-child(3)::after { animation-delay: -4s; }
.flow-step:nth-child(4), .flow-step:nth-child(4) .flow-icon { animation-delay: -2s; }
@keyframes step-live {
  0%, 22%   { border-color: rgba(var(--accent-rgb), .6); background-color: rgba(var(--accent-rgb), .07); }
  28%, 100% { border-color: var(--line); background-color: var(--bg); }
}
@keyframes icon-live {
  0%, 22%   { background-color: var(--accent); color: var(--on-accent); }
  28%, 100% { background-color: var(--panel); color: var(--text-muted); }
}
@keyframes wire-live {
  0%, 14%   { background-color: var(--line); }
  20%, 27%  { background-color: var(--accent); }
  33%, 100% { background-color: var(--line); }
}
.flow-text { display: flex; flex-direction: column; line-height: 1.35; }
.flow-text strong { font-size: .9375rem; font-weight: 600; }
.flow-text small { font-size: .8125rem; color: var(--text-muted); }
.flow-time { font-size: .8125rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.flow-foot {
  display: flex; align-items: center; gap: .45rem;
  margin-top: 1rem; padding: 0 .25rem;
  font-size: .8125rem; color: var(--text-muted);
}
.flow-cursor {
  width: 7px; height: 1.05em;
  background: var(--accent);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.tools {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--text-muted);
  font-size: .9375rem;
}
.tools strong { color: var(--text); font-weight: 600; }
/* the tools as a row of small rounded tags */
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.tool-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.tool-list li {
  padding: .3rem .8rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(var(--panel-rgb, 22, 22, 31), .6);
  font-size: .875rem; color: var(--text-muted);
  transition: color .25s, border-color .25s;
}
@media (hover: hover) { .tool-list li:hover { color: var(--text); border-color: rgba(var(--accent-rgb), .45); } }

/* Voice meter in the call card's header: it wakes up while the agent is on the call (steps 2–4) */
.flow-voice {
  display: inline-flex; align-items: center; gap: 2px; height: 12px; margin-left: .35rem;
  opacity: .35;
  animation: voice-on 8s infinite;
}
.flow-voice i { width: 2px; height: 100%; border-radius: 1px; background: var(--accent); transform: scaleY(.3); animation: voice 1s ease-in-out infinite alternate; }
.flow-voice i:nth-child(2) { animation-delay: -.6s; }
.flow-voice i:nth-child(3) { animation-delay: -.2s; }
.flow-voice i:nth-child(4) { animation-delay: -.8s; }
.flow-voice i:nth-child(5) { animation-delay: -.4s; }
@keyframes voice { to { transform: scaleY(1); } }
@keyframes voice-on { 0%, 22% { opacity: .35; } 26%, 72% { opacity: 1; } 78%, 100% { opacity: .35; } }

/* The booking lands on the dashboard: a small tile hooked onto the call card's corner.
   Its count ticks up the moment "Confirmation sent" lights (6s into the 8s cycle). */
.flow-tile {
  position: relative; z-index: 1;
  justify-self: end;
  margin-top: -1.75rem;
  margin-right: max(0px, calc((100% - 440px) / 2 - 1.75rem));
  display: grid; grid-template-columns: auto auto; align-items: end; gap: .1rem 1.25rem;
  padding: .75rem .9rem .8rem;
  background: var(--bg);
  border: 1px solid rgba(var(--accent-rgb), .45);
  border-radius: 12px;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .9);
  animation: tile-ping 8s infinite;
}
.flow-tile-label { grid-column: 1 / -1; font-size: .75rem; color: var(--text-muted); }
.flow-tile-count {
  display: grid; overflow: hidden;
  font-size: 1.375rem; font-weight: 700; font-stretch: var(--wide); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.flow-tile-count > span { grid-area: 1 / 1; animation: count-old 8s infinite; }
.flow-tile-count > span + span { opacity: 0; color: var(--accent); animation-name: count-new; }
.flow-tile-bars { display: flex; align-items: end; gap: 3px; height: 22px; }
.flow-tile-bars i { width: 5px; border-radius: 1px; background: rgba(var(--neutral-rgb), .35); }
.flow-tile-bars i:nth-child(1) { height: 45%; }
.flow-tile-bars i:nth-child(2) { height: 70%; }
.flow-tile-bars i:nth-child(3) { height: 55%; }
.flow-tile-bars i:nth-child(4) { height: 85%; }
.flow-tile-bars i:nth-child(5) { height: 60%; }
.flow-tile-bars i:nth-child(6) { height: 75%; }
.flow-tile-bars i:nth-child(7) { height: 95%; background: var(--accent); }
@keyframes count-old { 0%, 74% { opacity: 1; transform: none; } 77%, 96% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 1; transform: none; } }
@keyframes count-new { 0%, 74% { opacity: 0; transform: translateY(8px); } 77%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes tile-ping {
  0%, 74%, 90%, 100% { box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .9); }
  78% { box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .18), 0 20px 40px -20px rgba(0, 0, 0, .9); }
}

/* ---------- Home: services list ---------- */
.service-list { position: relative; display: grid; gap: 2rem 1.5rem; }
@media (min-width: 700px) { .service-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .service-list { grid-template-columns: repeat(4, 1fr); }
  /* one line through all four sockets: the services are parts of one system */
  .service-list::before {
    content: ""; position: absolute; top: 26px; height: 1px;
    left: 26px; right: calc((100% - 4.5rem) / 4 - 26px);
    background: var(--rail);
  }
}
.service-item { display: block; }
.service-item .line-icon {
  position: relative; z-index: 1;
  width: 52px; height: 52px; padding: 13px;
  background: var(--panel); clip-path: var(--hex);
  transition: background-color .2s, color .2s;
}
.service-item:hover .line-icon { background: var(--accent); color: var(--on-accent); }
.service-item:hover h3 { color: var(--accent); }
.service-item h3 { margin: 1.1rem 0 .5rem; transition: color .2s; }
.service-item p { color: var(--text-muted); font-size: .96875rem; }

.line-icon {
  width: 26px; height: 26px; color: var(--accent);
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Home: example AI dashboard ----------
   Drawn with the same parts as the call card (panel, wells, hexagon dot, cursor),
   so it reads as part of one system rather than a screenshot pasted in. */
.dash {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(1rem, 3vw, 1.5rem);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 40px 80px -50px rgba(var(--accent-rgb), .3);
}
.dash-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 0 .25rem 1rem; margin-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  font-size: .875rem; color: var(--text-muted);
}
.dash-title { display: inline-flex; align-items: center; gap: .6rem; }
.dash-range { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 6px; font-size: .8125rem; }
.dash-range button {
  padding: .2rem .65rem; border-radius: 4px;
  color: var(--text-muted); font-size: inherit;
  transition: color .2s, background-color .2s;
}
.dash-range button:hover { color: var(--text); }
.dash-range button[aria-pressed="true"] { background: var(--bg); color: var(--text); }

.dash-grid { display: grid; gap: 1rem; }
@media (min-width: 900px) { .dash-grid { grid-template-columns: 7fr 5fr; } .dash-kpis { grid-column: 1 / -1; } }
.dash-kpis { display: grid; gap: 1rem; }
@media (min-width: 600px) { .dash-kpis { grid-template-columns: repeat(3, 1fr); } }

/* the wells: near-black insets inside the panel, as in the call card */
.dash-kpi, .dash-chart, .dash-ask {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem 1.1rem;
}
.dash-kpi { position: relative; display: grid; gap: .1rem; }
.dash-kpi::before {   /* the same cyan tab used on the About page's spec lists */
  content: ""; position: absolute; top: -1px; left: 1.1rem; width: 2rem; height: 2px; background: var(--accent);
}
.dash-kpi-label { font-size: .8125rem; color: var(--text-muted); }
.dash-kpi-value { font-size: 1.75rem; font-weight: 700; font-stretch: var(--wide); line-height: 1.2; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.dash-kpi-note { font-size: .8125rem; color: var(--text-muted); }
/* Phones: each figure becomes one compact row, number on the right, so the three don't stack into a tower */
@media (max-width: 599px) {
  .dash-kpis { gap: .6rem; }
  .dash-kpi { grid-template-columns: 1fr auto; column-gap: 1rem; align-items: center; padding: .8rem 1rem; }
  .dash-kpi-label, .dash-kpi-note { grid-column: 1; }
  .dash-kpi-value { grid-column: 2; grid-row: 1 / span 2; font-size: 1.5rem; }
}

.dash-chart-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: .8125rem; color: var(--text-muted); }
.dash-key { display: inline-flex; align-items: center; gap: .4rem; }
.dash-key i { width: 8px; height: 9px; clip-path: var(--hex); }
.dash-key-day { background: rgba(var(--neutral-rgb), .45); }
.dash-key-night { background: var(--accent); margin-left: .6rem; }
.dash-bars {
  display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; align-items: end;
  height: 9.5rem; margin-top: 1.25rem; padding-bottom: 1px;
  border-bottom: 1px solid var(--line);
  background: var(--dots) center / 16px 16px;
}
.dash-bars li { border-radius: 2px 2px 0 0; background: rgba(var(--neutral-rgb), .32); transition: height .45s var(--ease); }
.dash-bars li.n { background: var(--accent); }
.dash-bars .h0 { height: 3%; }  .dash-bars .h1 { height: 10%; } .dash-bars .h2 { height: 18%; }
.dash-bars .h3 { height: 27%; } .dash-bars .h4 { height: 36%; } .dash-bars .h5 { height: 46%; }
.dash-bars .h6 { height: 57%; } .dash-bars .h7 { height: 68%; } .dash-bars .h8 { height: 82%; }
.dash-bars .h9 { height: 96%; }
.dash-axis { display: flex; justify-content: space-between; margin-top: .5rem; font-size: .75rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Ask the dashboard: the question sits right like a sent message, the answer left with the agent's hexagon */
.dash-ask { display: grid; gap: .9rem; align-content: start; font-size: .9375rem; }
.dash-q {
  justify-self: end; max-width: 92%;
  padding: .6rem .85rem;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px 8px 2px 8px;
}
.dash-a { position: relative; padding-left: 1.4rem; color: var(--text-muted); line-height: 1.6; }
.dash-a::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 9px; height: 10px; clip-path: var(--hex); background: var(--accent);
}
.dash-a .flow-cursor { display: inline-block; vertical-align: -.15em; margin-left: .3rem; height: 1em; }
.dash-caption { margin-top: 1rem; padding-inline: .25rem; font-size: .8125rem; color: var(--text-muted); }

/* ---------- Home: recent work ---------- */
.work-grid { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .work-grid { grid-template-columns: repeat(3, 1fr); } }

.work-card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .2s;
}
/* Spec-sheet corner marks on project cards */
.work-card::after, .project-card::after {
  --tick: rgba(var(--neutral-rgb), .4);
  content: ""; position: absolute; inset: 9px; pointer-events: none;
  background:
    linear-gradient(var(--tick), var(--tick)) top left / 10px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) top left / 1px 10px no-repeat,
    linear-gradient(var(--tick), var(--tick)) top right / 10px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) top right / 1px 10px no-repeat,
    linear-gradient(var(--tick), var(--tick)) bottom left / 10px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) bottom left / 1px 10px no-repeat,
    linear-gradient(var(--tick), var(--tick)) bottom right / 10px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) bottom right / 1px 10px no-repeat;
}
.work-visual {
  display: flex; align-items: center; justify-content: center;
  padding: 2.25rem 1.25rem;
  background: var(--dots) center / 16px 16px, var(--panel-deep);
  border-bottom: 1px solid var(--line);
}
.node {
  font-size: .75rem; font-weight: 600; font-stretch: var(--semi);
  padding: .45rem .65rem;
  border-radius: var(--radius-sm);
  background: var(--panel);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.node--hl { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.wire { flex: 1; max-width: 2.25rem; min-width: .6rem; height: 2px; background: rgba(var(--neutral-rgb), .3); }

/* Card text — shared by the Home work cards and the Portfolio project cards */
.work-body, .project-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.work-client, .project-client { font-size: .875rem; color: var(--text-muted); margin-bottom: .4rem; }
.work-body h3 { margin-bottom: .6rem; }
.work-body > p:not(.work-client),
.project-body > p:not(.project-client) { color: var(--text-muted); font-size: .96875rem; margin-bottom: 1.25rem; }

.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; }
.tags li {
  font-size: .8125rem; font-weight: 500;
  padding: .2rem .55rem;
  border-radius: 4px;
  border: 1px solid var(--line);
  color: var(--text-muted);
}

/* ---------- Home: missed-call calculator ---------- */
.calc { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .calc { grid-template-columns: 7fr 5fr; gap: 1.5rem; } }
.calc-inputs, .calc-result {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.25rem);
}
.calc-inputs { display: grid; gap: 1.75rem; }
.calc-label { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .6rem; }
.calc-label label { font-weight: 600; font-size: .9375rem; }
.calc-label output { font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
/* Sliders: a thin track that fills with cyan up to the handle (--fill is set by the script) */
.calc input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px; margin: 0;
  background: transparent; cursor: pointer;
}
.calc input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--accent) var(--fill, 50%), rgba(var(--neutral-rgb), .22) var(--fill, 50%));
}
.calc input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 20px; margin-top: -8px;
  background: var(--accent); clip-path: var(--hex); border: 0;
}
.calc input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(var(--neutral-rgb), .22); }
.calc input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); }
.calc input[type="range"]::-moz-range-thumb { width: 18px; height: 20px; border: 0; border-radius: 0; background: var(--accent); clip-path: var(--hex); }
.calc-result { display: flex; flex-direction: column; justify-content: center; }
.calc-result-label { font-size: .9375rem; color: var(--text-muted); }
.calc-total {
  margin: .35rem 0 .75rem;
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3rem); font-weight: 700; font-stretch: var(--wide); line-height: 1.1; letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.calc-note { color: var(--text-muted); font-size: .96875rem; }
.calc-note span { color: var(--text); font-weight: 600; }
.calc-result .btn { margin-top: 1.5rem; align-self: flex-start; }
.calc-method { margin-top: 1.5rem; color: var(--text-muted); font-size: .9375rem; }

/* ---------- Home: questions ---------- */
.faq { max-width: 48rem; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.15rem 0;
  font-weight: 600; font-size: 1.0625rem;
  cursor: pointer; list-style: none;
  transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
/* plus sign; its upright bar folds away when the answer is open */
.faq summary::after {
  content: ""; flex-shrink: 0; width: 14px; height: 14px;
  background:
    linear-gradient(var(--accent), var(--accent)) center / 100% 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 2px 100% no-repeat;
  transition: background-size .2s var(--ease);
}
.faq details[open] summary::after { background-size: 100% 2px, 2px 0; }
.faq details p { color: var(--text-muted); max-width: 40rem; padding-bottom: 1.25rem; }
/* Wide screens: the heading on the left, the questions beside it */
@media (min-width: 1024px) {
  .faq-layout { display: grid; grid-template-columns: 5fr 7fr; gap: 3rem; align-items: start; }
  .faq-layout .section-head { margin-bottom: 0; }
}

/* ---------- Closing call to action ---------- */
.cta {
  --cta-top: var(--section-y);
  --cta-pad: clamp(1.5rem, 4vw, 2.5rem);
  padding-top: var(--cta-top);
  padding-bottom: var(--section-y);
}
/* After a plain section the two paddings would stack into a double-height gap;
   after a coloured panel the full padding is kept so the CTA doesn't hug the panel edge */
.section:not(.section--panel) + .cta { --cta-top: 0px; }
.cta-box {
  position: relative;
  display: grid; gap: 1.75rem;
  padding: var(--cta-pad);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
/* the end of the flow: the same dotted canvas, fading in behind the buttons */
.cta-box::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--dots) right center / 22px 22px;
  -webkit-mask: linear-gradient(to left, #000, transparent 70%);
          mask: linear-gradient(to left, #000, transparent 70%);
  pointer-events: none;
}
.cta-box > * { position: relative; }
@media (min-width: 900px) {
  .cta-box { grid-template-columns: 1fr auto; align-items: start; gap: 3rem; }
  .cta-actions { align-self: end; }
}
.cta-box h2 { max-width: 24ch; }
.cta-box p { color: var(--text-muted); margin-top: .75rem; max-width: 36rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 479px) { .cta-actions .btn { width: 100%; } }

/* ---------- Inner page hero ---------- */
.page-hero {
  padding-top: clamp(3rem, 7vw, 5rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.page-hero h1 { max-width: 22ch; }
.page-hero .lead { margin-top: 1.25rem; }
.page-hero .hero-actions { margin-top: 2rem; }
@media (max-width: 479px) { .page-hero .hero-actions .btn { width: 100%; } }

/* Breadcrumb above a landing page's heading */
.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; font-size: .875rem; color: var(--text-muted); }
.crumbs a { color: var(--text-muted); text-decoration: underline; text-decoration-color: rgba(var(--neutral-rgb), .4); text-underline-offset: 3px; }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current] { color: var(--text); }

/* a link inside running text or a list */
.inline-link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.inline-link:hover { color: var(--accent-hover); }

/* ---------- Services page ---------- */
.service-row {
  display: grid; gap: 1rem 3rem;
  padding-block: 2.5rem;
  border-bottom: 1px solid var(--line);
}
/* Drawn on the row, not the .container wrapper, so it's the same width as the other dividers */
.service-row:first-child { border-top: 1px solid var(--line); }
@media (min-width: 900px) { .service-row { grid-template-columns: 5fr 7fr; } }
.service-row h2 { font-size: 1.5rem; margin-top: 1rem; }
.service-row-body > p { color: var(--text-muted); max-width: 40rem; }
.service-row .tick-list { margin-top: 1.25rem; }
/* each service drawn as the three-step flow it runs, in the same parts as the project diagrams */
.service-flow {
  display: flex; align-items: center;
  margin-top: 1.5rem; padding: 1.1rem 1rem;
  max-width: 24rem;
  background: var(--dots) center / 16px 16px, var(--panel-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.service-flow .wire { max-width: 2.5rem; min-width: .4rem; }
.service-row > * { min-width: 0; }
/* a full-width example under a service row (the dashboard, the automation) */
.service-showcase { padding-block: 0 2.5rem; border-bottom: 1px solid var(--line); }
.service-row:has(+ .service-showcase) { border-bottom: 0; padding-bottom: 1.75rem; }

/* ---------- Services: example automation ----------
   The same panel as the dashboard; the workflow is drawn on the dotted canvas like an n8n/Make editor */
.auto-status {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .8125rem; font-weight: 600; color: var(--accent);
}
.auto-status i { width: 8px; height: 9px; clip-path: var(--hex); background: var(--accent); animation: blink 2s steps(1) infinite; }

.auto-canvas {
  padding: 1.5rem 1.1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--dots) center / 16px 16px, var(--bg);
}
.auto-flow { display: grid; gap: 1.25rem; }
.auto-node {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: center;
  padding: .75rem .85rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  animation: auto-live 10s infinite;
}
.auto-icon { width: 34px; height: 36px; display: grid; place-items: center; background: var(--bg); color: var(--text-muted); clip-path: var(--hex); animation: auto-icon 10s infinite; }
.auto-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.auto-text { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.auto-text strong { font-size: .9375rem; font-weight: 600; }
.auto-text small { font-size: .8125rem; color: var(--text-muted); }
/* wires between steps: down on phones, across on wide screens */
.auto-node:not(:last-child)::after {
  content: ""; position: absolute; left: calc(.85rem + 16px); top: 100%;
  width: 2px; height: 1.25rem; background: rgba(var(--accent-rgb), .35);
}
@media (min-width: 1000px) {
  .auto-flow { grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
  .auto-node { grid-template-columns: 1fr; justify-items: start; align-content: start; }
  .auto-node:not(:last-child)::after { left: 100%; top: 2.1rem; width: 1.5rem; height: 2px; }
}
/* one step lit at a time, two seconds each, like the call card on Home */
.auto-node:nth-child(2), .auto-node:nth-child(2) .auto-icon { animation-delay: 2s; }
.auto-node:nth-child(3), .auto-node:nth-child(3) .auto-icon { animation-delay: 4s; }
.auto-node:nth-child(4), .auto-node:nth-child(4) .auto-icon { animation-delay: 6s; }
.auto-node:nth-child(5), .auto-node:nth-child(5) .auto-icon { animation-delay: 8s; }
@keyframes auto-live {
  0%, 17%   { border-color: rgba(var(--accent-rgb), .6); background-color: rgba(var(--accent-rgb), .07); }
  22%, 100% { border-color: var(--line); background-color: var(--panel); }
}
@keyframes auto-icon {
  0%, 17%   { background-color: var(--accent); color: var(--on-accent); }
  22%, 100% { background-color: var(--bg); color: var(--text-muted); }
}

.auto-below { display: grid; gap: 1rem; }
@media (min-width: 900px) {
  .auto-below { grid-template-columns: 7fr 5fr; }
  .auto-below .dash-kpis { grid-column: auto; align-content: start; }   /* figures left, run log right */
}
.auto-log {
  display: grid; align-content: start;
  padding: .4rem 1.1rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  font-size: .875rem;
}
.auto-log li {
  display: grid; grid-template-columns: auto 1fr; gap: .1rem .9rem;
  padding: .6rem 0; border-bottom: 1px solid var(--line);
}
.auto-log li:last-child { border-bottom: 0; }
.auto-log time { grid-row: span 2; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.auto-result { color: var(--text-muted); }
.auto-result::before { content: ""; display: inline-block; width: 7px; height: 8px; margin-right: .45rem; clip-path: var(--hex); background: var(--accent); }   /* the diagram must never widen its grid column on small phones */
@media (max-width: 379px) {
  .service-flow { padding-inline: .6rem; }
  .service-flow .node { padding-inline: .45rem; }
}

.tick-list { display: grid; gap: .5rem; }
.tick-list li { display: flex; align-items: baseline; gap: .7rem; font-size: .96875rem; }
.tick-list li::before {
  content: ""; width: 14px; height: 14px; flex-shrink: 0; transform: translateY(2px);
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.process { position: relative; display: grid; gap: 2rem; }
@media (min-width: 640px) { .process { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .process { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
  /* the steps sit on one line, in order */
  .process::before {
    content: ""; position: absolute; top: calc(var(--node) / 2); height: 1px;
    left: calc(var(--node) / 2); right: calc((100% - 4.5rem) / 4 - var(--node) / 2);
    background: var(--rail);
  }
}
.process-step { position: relative; padding-top: 1.6rem; }
.process-step::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: var(--node); height: var(--node);
  background: var(--accent); clip-path: var(--hex);
}
.process-num { display: block; font-weight: 600; color: var(--accent); margin-bottom: .6rem; font-variant-numeric: tabular-nums; }
.process-step h3 { margin-bottom: .4rem; }
.process-step p { color: var(--text-muted); font-size: .96875rem; }

/* ---------- Portfolio ---------- */
.filter-bar { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.filter-btn {
  padding: .45rem .9rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(var(--neutral-rgb), .25);
  font-size: .9375rem; font-weight: 500;
  color: var(--text-muted);
  transition: color .2s, border-color .2s, background-color .2s;
}
.filter-btn:hover { color: var(--text); border-color: rgba(var(--neutral-rgb), .6); }
.filter-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.project-grid { display: grid; gap: 1.25rem; }
@media (min-width: 700px) { .project-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .project-grid { grid-template-columns: repeat(3, 1fr); } }

.project-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .25s, box-shadow .25s;
}
.project-card[hidden] { display: none; }

.project-visual {
  aspect-ratio: 16 / 9;
  background: var(--dots) center / 16px 16px, var(--panel-deep);
  border-bottom: 1px solid var(--line);
  display: grid; place-items: center;
  padding: 1rem;
}
.project-visual svg { width: 100%; height: 100%; overflow: visible; }
.pv-line path { fill: none; stroke: rgba(var(--neutral-rgb), .35); stroke-width: 2; stroke-linecap: round; transition: stroke .25s; }
.pv-node > *, .pv-frame { fill: var(--bg); stroke: rgba(var(--neutral-rgb), .35); stroke-width: 1.5; }
.pv-accent { fill: var(--accent); }
.pv-accent-mark { fill: none; stroke: var(--on-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pv-dot { fill: var(--bg); stroke: var(--accent); stroke-width: 2; }

.project-title { font-size: 1.1875rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; margin-bottom: .6rem; }

/* Card hover effects only on devices with a real pointer: on touch screens a tap
   would leave the card stuck in its hover state until the user tapped elsewhere */
@media (hover: hover) {
  .work-card:hover { border-color: rgba(var(--accent-rgb), .6); }
  .work-card:hover::after, .project-card:hover::after { --tick: var(--accent); }
  .project-card:hover {
    border-color: rgba(var(--accent-rgb), .7);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .3), 0 16px 48px -24px rgba(var(--accent-rgb), .55);
  }
  .project-card:hover .pv-line path { stroke: rgba(var(--neutral-rgb), .6); }
}

.empty-note { color: var(--text-muted); padding: 2rem 0; }

/* ---------- About ---------- */
.pain-list { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
@media (min-width: 700px) { .pain-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .pain-list { grid-template-columns: repeat(4, 1fr); } }
.pain-list li { border-top: 1px solid var(--line); padding-top: 1rem; color: var(--text-muted); font-size: .96875rem; }
/* a short cyan tab on the top edge of list items, like a labelled part on a spec sheet */
.pain-list li, .principles li { position: relative; }
.pain-list li::before, .principles li::before {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 2rem; height: 2px; background: var(--accent);
}
.pain-list strong { display: block; color: var(--text); font-weight: 600; margin-bottom: .2rem; }

.statement { margin-top: 2.5rem; font-size: 1.1875rem; font-weight: 500; max-width: 40rem; }

.principles { display: grid; gap: 2rem 1.5rem; }
@media (min-width: 900px) { .principles { grid-template-columns: repeat(3, 1fr); } }
.principles li { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.principles h3 { margin-bottom: .5rem; }
.principles p { color: var(--text-muted); font-size: .96875rem; }

.founder { display: grid; gap: 2rem; }
@media (min-width: 900px) { .founder { grid-template-columns: 4fr 8fr; gap: 4rem; align-items: start; } }
.founder-role { margin-top: .5rem; color: var(--text-muted); }
.founder-bio > p { color: var(--text-muted); margin-bottom: 1.1rem; max-width: 40rem; }
.founder-bio > p:first-child { color: var(--text); font-size: 1.1875rem; font-weight: 500; }
.skill-list { margin-top: 2rem; border-top: 1px solid var(--line); max-width: 40rem; }
.skill-list > div { display: grid; gap: .15rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 600px) { .skill-list > div { grid-template-columns: 12rem 1fr; gap: 1rem; } }
.skill-list dt { font-weight: 600; }
.skill-list dd { color: var(--text-muted); }

.support-grid { display: grid; gap: 2.5rem; }
@media (min-width: 1000px) { .support-grid { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } }
.support-copy p { color: var(--text-muted); margin-bottom: 1.1rem; max-width: 36rem; }

.compare { display: grid; gap: 1rem; }
@media (min-width: 560px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare-col { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; }
.compare-col--us { border-color: rgba(var(--accent-rgb), .6); }
.compare-label { font-weight: 600; font-size: .9375rem; margin-bottom: 1rem; }
.compare-col--us .compare-label { color: var(--accent); }
.compare-path { display: grid; gap: 1rem; }
.compare-path li {
  position: relative;
  padding: .55rem .8rem;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-size: .9375rem;
}
.compare-path li:not(:last-child)::after {
  content: ""; position: absolute; left: 1.1rem; top: 100%;
  width: 2px; height: 1rem; background: var(--line);
}
.compare-col:not(.compare-col--us) .compare-path li { color: var(--text-muted); }
.compare-col--us .compare-path li:last-child { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }

.new-block { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .new-block { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.new-block p { color: var(--text-muted); max-width: 36rem; }
.new-block .tick-list { margin-top: 1.25rem; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: 7fr 5fr; gap: 1.5rem; } }

.form-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.25rem);
}
.form-card h2 { font-size: 1.375rem; }
.form-intro { color: var(--text-muted); margin: .4rem 0 1.75rem; }

.contact-form { display: grid; gap: 1.2rem; }
.field-row { display: grid; gap: 1.2rem; }
@media (min-width: 600px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .45rem; }
.field label { font-weight: 600; font-size: .9375rem; }
.optional { color: var(--text-muted); font-weight: 400; }

.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit; font-size: 1rem;
  color: var(--text);
  background: var(--bg);
  border: 1.5px solid rgba(var(--neutral-rgb), .22);
  border-radius: 12px;
  padding: .8rem .95rem;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 9rem; line-height: 1.55; }
.field ::placeholder { color: var(--text-faint); opacity: 1; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(var(--neutral-rgb), .45); }
.field input:focus, .field select:focus, .field textarea:focus {
  /* transparent, not "none": Windows High Contrast drops box-shadows but draws outlines in a visible colour */
  outline: 2px solid transparent;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .2);
}
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--error); }
.field select {
  appearance: none; -webkit-appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23A1A1AA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .95rem center;
  background-size: 18px;
  cursor: pointer;
}
.field select:has(option[value=""]:checked) { color: var(--text-faint); }
.field select option { background: var(--panel); color: var(--text); }
.form-submit {
  justify-self: start; margin-top: .25rem;
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s, transform .1s, opacity .2s;   /* .btn's list plus opacity for the inactive state */
}
@media (max-width: 599px) { .form-submit { width: 100%; } }

/* Privacy consent: the submit button stays inactive until this is ticked */
.consent { display: flex; align-items: flex-start; gap: .65rem; font-size: .9375rem; color: var(--text-muted); }
.consent input {
  flex-shrink: 0; width: 1.125rem; height: 1.125rem; margin: .2rem 0 0;
  accent-color: var(--accent); cursor: pointer;
}
.consent label { cursor: pointer; }
.consent a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.consent a:hover { color: var(--accent-hover); }

.form-submit:disabled { opacity: .45; cursor: not-allowed; }
.form-submit:disabled:hover { background: var(--accent); box-shadow: none; }
.form-submit:disabled:active { transform: none; }

.form-status { font-size: .9375rem; color: var(--error); }
.form-status a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.options {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.option { padding: 1.5rem; border-bottom: 1px solid var(--line); }
.option:last-child { border-bottom: 0; }
.option h2 { font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; }
.option p { color: var(--text-muted); font-size: .9375rem; margin-top: .15rem; }
.option .btn { margin-top: 1rem; width: 100%; }
.option-link { display: inline-block; margin-top: .6rem; color: var(--accent); font-weight: 600; font-size: 1.0625rem; word-break: break-all; }
.option-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.reassure { margin-top: 2rem; color: var(--text-muted); }

/* Social icons (footer + contact) */
.social { display: flex; gap: .5rem; margin-top: 1.25rem; }
.social a {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  color: var(--text-muted);
  transition: color .2s, border-color .2s;
}
.social a:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), .6); }
.social svg { width: 18px; height: 18px; }
.option .social { margin-top: .9rem; }

/* ---------- Privacy Policy popup (Contact page) ---------- */
.modal {
  width: min(640px, calc(100% - 2 * var(--gutter)));
  max-height: min(85vh, 760px);
  max-height: min(85dvh, 760px);
  margin: auto;
  padding: 0;              /* clicks on the dialog box itself only come from the backdrop */
  overflow: hidden;        /* only the body scrolls, so the title and close button stay put */
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.modal[open] { display: flex; flex-direction: column; animation: modal-in .2s var(--ease); }
.modal::backdrop {
  background: rgba(var(--bg-rgb), .8);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal[open]::backdrop { animation: backdrop-in .2s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes backdrop-in { from { opacity: 0; } }

.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem 1rem 1.5rem;
  border-bottom: 1px solid var(--line);
}
.modal-head h2 { font-size: 1.375rem; }
.modal-close {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  color: var(--text-muted);
  transition: color .2s, border-color .2s;
}
.modal-close:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), .6); }
.modal-close svg { width: 18px; height: 18px; }

.modal-body { padding: 1.5rem; overflow-y: auto; overscroll-behavior: contain; }
.modal-body p, .modal-body li { color: var(--text-muted); font-size: .96875rem; }
.modal-body p + p, .modal-body ul + p { margin-top: .75rem; }
.modal-body h3 { font-size: 1.0625rem; margin: 1.75rem 0 .5rem; }
.modal-body ul { list-style: disc; padding-left: 1.25rem; }
.modal-body li + li { margin-top: .5rem; }
.modal-body li::marker { color: var(--text-faint); }
.modal-body strong { color: var(--text); font-weight: 600; }
.modal-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.modal-body a:hover { color: var(--accent-hover); }
.modal-body .modal-updated { font-size: .875rem; }

/* ---------- Thank-you / 404 ---------- */
.notice { padding-bottom: var(--section-y); }
.notice .lead + .lead { margin-top: .75rem; }
.notice-icon {
  width: 50px; height: 54px; clip-path: var(--hex);
  display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent);
  margin-bottom: 1.5rem;
}
.notice-icon svg { width: 26px; height: 26px; }

/* ---------- The flow rail (desktop) ----------
   A line runs down every page in line with the logo. Each section heading plugs into it with a
   hexagon junction and a short branch, ending at the closing call-to-action panel. */
@media (min-width: 1024px) {
  main > section { position: relative; }
  main > section::before {
    content: ""; position: absolute; top: 0; bottom: 0; width: 1px;
    left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
    background: var(--rail);
    pointer-events: none;
  }
  /* the rail fades in below the header at the top of each page, and draws itself down on load */
  main > section:first-child::before {
    background: linear-gradient(to bottom, transparent, var(--rail) clamp(3rem, 7vw, 5.5rem));
    transform-origin: top;
    animation: rail-draw .9s var(--ease) both;
  }
  /* it ends at the junction of the closing call to action… */
  main > .cta::before {
    bottom: auto;
    height: calc(var(--cta-top) + 1px + var(--cta-pad) + .575 * var(--h2-size));
  }
  /* …or, on pages without one, fades out */
  main > section:last-child:not(.cta)::before {
    background: linear-gradient(to bottom, var(--rail) 50%, transparent);
  }
  main > section:first-child:last-child::before {
    background: linear-gradient(to bottom, transparent, var(--rail) clamp(3rem, 7vw, 5.5rem), var(--rail) 50%, transparent);
  }
  main .container { padding-left: calc(var(--gutter) + var(--rail-gap)); }

  .hero-copy h1, .page-hero h1, .section-head > h2, .section-head > div > h2, .founder h2, .new-block > h2, .service-row h2, .cta-box h2 {
    --reach: var(--rail-gap);                       /* distance from the heading back to the rail */
    --node-y: calc(.575em - var(--node) / 2);       /* centred on the first line of the heading */
    position: relative;
  }
  .hero-copy h1, .page-hero h1 { --node-y: calc(.53em - var(--node) / 2); }
  .cta-box h2 { --reach: calc(var(--rail-gap) + var(--cta-pad) + 1px); }

  /* junction */
  .hero-copy h1::before, .page-hero h1::before, .section-head > h2::before, .section-head > div > h2::before, .founder h2::before,
  .new-block > h2::before, .service-row h2::before, .cta-box h2::before {
    content: ""; position: absolute;
    top: var(--node-y); left: calc(-1 * var(--reach) - var(--node) / 2);
    width: var(--node); height: var(--node);
    background: var(--accent); clip-path: var(--hex);
  }
  /* branch from the junction to the heading */
  .hero-copy h1::after, .page-hero h1::after, .section-head > h2::after, .section-head > div > h2::after, .founder h2::after,
  .new-block > h2::after, .service-row h2::after, .cta-box h2::after {
    content: ""; position: absolute; height: 1px;
    top: calc(var(--node-y) + var(--node) / 2);
    left: calc(-1 * var(--reach) + var(--node) / 2 + 4px);
    width: calc(var(--reach) - var(--node) / 2 - 12px);
    background: rgba(var(--accent-rgb), .45);
  }

  /* page load: once the rail has drawn past it, the first junction snaps on and branches out */
  main > section:first-child h1::before { animation: node-on .3s var(--ease) .3s both; }
  main > section:first-child h1::after { transform-origin: left; animation: branch-out .35s var(--ease) .45s both; }
}
@keyframes rail-draw { from { transform: scaleY(0); } }
@keyframes node-on { from { transform: scale(0); } }
@keyframes branch-out { from { transform: scaleX(0); } }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line); padding-top: 3.5rem;
  /* the lattice rises from the bottom edge and is gone by the links (without JavaScript) */
  background:
    var(--edge-light),
    linear-gradient(to top, transparent, var(--bg) 85%),
    var(--hexgrid),
    var(--bg);
}
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; gap: 3rem; } }
.footer-brand p { color: var(--text-muted); margin-top: 1rem; max-width: 22rem; font-size: .9375rem; }
.footer-title { font-size: .9375rem; font-weight: 600; letter-spacing: 0; margin-bottom: .9rem; }
.site-footer ul:not(.social) { display: grid; gap: .5rem; }
.site-footer ul:not(.social) a { color: var(--text-muted); font-size: .9375rem; transition: color .2s; }
.site-footer ul:not(.social) a:hover { color: var(--text); }
.has-net .site-footer { background: var(--edge-light), rgba(var(--bg-rgb), .55); }
.footer-bottom {
  margin-top: 3rem; padding-bottom: 1.5rem;
  font-size: .875rem; color: var(--text-muted);
}
/* Divider on the text, not the padded .container, so it lines up with the content above */
.footer-bottom p {
  padding-top: 1.5rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem;
}
.footer-bottom a { color: var(--text-muted); text-decoration: underline; text-decoration-color: rgba(var(--neutral-rgb), .4); text-underline-offset: 3px; transition: color .2s; }
.footer-bottom a:hover { color: var(--text); }

/* ---------- Legal pages (Terms) ---------- */
.legal { max-width: 46rem; }
.legal > p, .legal li { color: var(--text-muted); }
.legal h2 { font-size: 1.25rem; margin: 2.5rem 0 .75rem; }
.legal ul { list-style: disc; padding-left: 1.25rem; display: grid; gap: .5rem; margin-top: .75rem; }
.legal li::marker { color: var(--text-faint); }
.legal p + p { margin-top: .75rem; }
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--accent-hover); }

/* ---------- Phones: a slightly smaller, denser scale ----------
   Text stays comfortably readable (body 15.5px, reading text 13px+; chart and diagram labels
   stay 12px as on desktop), but each screen shows
   more of the design and less wall of text. Tablets and desktops are unchanged. */
@media (max-width: 599px) {
  :root {
    --section-y: 3.25rem;
    --h2-size: 1.3rem;
  }
  body { font-size: .96875rem; line-height: 1.6; }
  h1 { font-size: 1.7rem; line-height: 1.08; }
  h3 { font-size: 1.0625rem; }
  .lead { font-size: 1rem; }
  .hero-copy h1 { font-size: 2.15rem; }
  .hero { padding-top: 2rem; padding-bottom: 2.5rem; }
  .hero-copy .lead { margin-top: 1rem; }
  .hero-actions { margin-top: 1.5rem; gap: .6rem; }
  .hero-note { font-size: .875rem; }
  .page-hero { padding-top: 2rem; padding-bottom: 1.75rem; }
  .page-hero .lead { margin-top: .9rem; }
  .btn-lg { padding: .85rem 1.3rem; font-size: .9375rem; }
  .section-head { margin-bottom: 1.75rem; }
  .section-head p { margin-top: .5rem; }

  /* lists of items: tighter gaps, smaller icons */
  .service-list { gap: 1.5rem; }
  .service-item .line-icon { width: 44px; height: 44px; padding: 11px; }
  .service-item h3 { margin: .8rem 0 .35rem; }
  .service-item p, .principles p, .process-step p, .pain-list li, .tick-list li,
  .work-body > p:not(.work-client), .project-body > p:not(.project-client) { font-size: .9375rem; }
  .principles { gap: 1.5rem; }
  .process { gap: 1.5rem; }
  .work-body, .project-body { padding: 1.15rem; }
  .service-row { padding-block: 1.75rem; }
  .service-flow { margin-top: 1rem; }
  .tools { margin-top: 2.25rem; padding-top: 1.1rem; }
  .tool-list li { font-size: .8125rem; padding: .25rem .7rem; }

  /* the call card and dashboards */
  .flow { padding: 1rem; }
  .flow-steps { gap: 1.1rem; }
  .flow-step { padding: .65rem .8rem; }
  .flow-step:not(:last-child)::after { height: 1.1rem; left: calc(.8rem + 17px); }
  .flow-text strong { font-size: .875rem; }
  .dash { padding: .85rem; }
  .dash-bars { height: 7.5rem; }
  .calc-total { font-size: 2rem; }

  /* lighter effects for smoother scrolling on phones */
  .js-reveal .reveal { transform: translateY(12px); transition-duration: .55s; }

  /* FAQ, call-to-action and footer */
  .faq summary { font-size: 1rem; padding: 1rem 0; }
  .cta-box { gap: 1.25rem; }
  .site-footer { padding-top: 2.5rem; }
  .footer-grid { gap: 1.75rem; }
  .footer-bottom { margin-top: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* "AI receptionist for HVAC" link under the HVAC item on Home */
.principles .inline-link { display: inline-block; margin-top: .6rem; font-size: .96875rem; }