/* ---------- Fonts, served from this site (latin set; the files cover every weight the pages use) ---------- */
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 600; font-stretch: 100%; font-display: swap; src: url(assets/instrument-sans.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: "Newsreader"; font-style: normal; font-weight: 300 600; font-display: swap; src: url(assets/newsreader.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: "Newsreader"; font-style: italic; font-weight: 300; font-display: swap; src: url(assets/newsreader-italic.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; }
/* Aelumo prototype — base tokens.
   Type scale, spacing, colours and button shapes follow agiloft.com (measured at 1440px).
   Typefaces: Newsreader (headings), Instrument Sans (body). No gradients on text or buttons. */
:root {
  --black: #000000;
  --near-black: #080808;
  --navy: #141C25;      /* Agiloft's dark alternate section */
  --grey: #F6F6F6;      /* Agiloft's light alternate section */
  --white: #FFFFFF;
  --ink: #0D0D0D;
  --muted: #606060;
  --orange: #FF772E;        /* the logo's orange, used for every orange element */
  --orange-light: #FF772E;  /* kept as a name; same colour so text, buttons and hovers match */

  --on-dark: #FFFFFF;
  --on-dark-muted: #DEDEDE;
  --line-dark: rgba(255, 255, 255, .14);
  --line-light: rgba(13, 13, 13, .14);

  --serif: "Newsreader", Georgia, serif;
  --sans: "Instrument Sans", system-ui, -apple-system, sans-serif;

  --wrap: 1232px;
  --gutter: 32px;
  --section: 112px;     /* vertical section padding */
  --nav-h: 76px;        /* 18px above and below the button */
  --peek: 176px;        /* approximate height of the testimonial band (used to size hero artwork) */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-btn: cubic-bezier(.25, .46, .45, .94); /* Agiloft's button easing */
}

* { box-sizing: border-box; }
/* the page ends in black (footer), so the area a phone shows when you pull past the end is black too */
html { scroll-behavior: smooth; background: #000; }
html:has(.legal-page) { background: var(--white); }
body.legal-page { background: var(--white); }
body {
  margin: 0; background: #000; /* phones tint the strip above the page with this colour; every section paints its own background */ color: var(--ink);
  font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 24px;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, figure, blockquote { margin: 0; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------- Type (Agiloft scale) ---------- */
.h1, .h2, .h2-sm, .h3, .h4 { font-family: var(--serif); font-weight: 300; font-optical-sizing: auto; text-wrap: balance; }
.h1.h1--hero { font-size: clamp(40px, 4.45vw, 64px); line-height: 1.08; letter-spacing: -.015em; }
.h1 { font-size: clamp(44px, 6.1vw, 88px); line-height: 1.05; letter-spacing: -.01em; }
.h2 { font-size: clamp(36px, 4.45vw, 64px); line-height: 1.1; letter-spacing: -.015em; }
.h2-sm { font-size: clamp(34px, 3.9vw, 56px); line-height: 1; letter-spacing: -.02em; }
.h3 { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.1; letter-spacing: -.02em; }
.h4 { font-size: 28px; line-height: 1.1; letter-spacing: -.02em; }
.title { font-family: var(--sans); font-weight: 400; font-size: 22px; line-height: 26.4px; letter-spacing: -.6px; }
.body-lg { font-size: 18px; line-height: 27px; letter-spacing: -.18px; color: var(--muted); }
.body { font-size: 16px; line-height: 24px; color: var(--muted); }
.eyebrow { font-size: 12px; line-height: 16px; letter-spacing: .6px; text-transform: uppercase; color: var(--ink); }
.accent { color: var(--orange); }

/* ---------- Buttons (square, solid, no gradients) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 24px; border-radius: 0; border: 1px solid transparent;
  font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 24px; white-space: nowrap; cursor: pointer;
  transition: background-color .3s var(--ease-btn), color .3s var(--ease-btn), border-color .3s var(--ease-btn), transform .3s var(--ease-btn);
}
.btn--sm { padding: 8px 12px; font-size: 14px; line-height: 22px; }
.btn--orange { background: var(--orange); border-color: var(--orange); color: var(--ink); font-weight: 500; }
.btn--orange:hover { background: var(--orange-light); border-color: var(--orange-light); }
.btn--black { background: var(--ink); border-color: var(--ink); color: var(--white); }
.btn--white { background: var(--white); border-color: var(--white); color: var(--ink); }
/* hover: an orange layer wipes in from the left; the button keeps its size */
.btn--black, .btn--white { position: relative; isolation: isolate; overflow: hidden; }
.btn--black::before, .btn--white::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 0; z-index: -1; background: var(--orange-light);
  transition: width .3s var(--ease-btn);
}
.btn--black:hover, .btn--white:hover { border-color: var(--orange-light); color: var(--ink); }
.btn--black:hover::before, .btn--white:hover::before { width: 100%; }
/* secondary = bordered */
.btn--line { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--white); }
.btn--line-dark { background: transparent; border-color: rgba(255, 255, 255, .6); color: var(--white); }
.btn--line-dark:hover { background: var(--white); color: var(--ink); }
.btn:focus-visible, .iconbtn:focus-visible, a:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.link { display: inline-flex; gap: 6px; font-size: 16px; line-height: 24px; color: var(--ink); border-bottom: 1px solid currentColor; }
.link span { transition: transform .25s var(--ease); }
.link:hover span, .card:hover .link span { transform: translateX(4px); }
.link--dark { color: var(--white); }

.chip {
  display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 0;
  font-size: 12px; font-weight: 500; letter-spacing: .3px; text-transform: uppercase;
  color: var(--ink); border: 1px solid var(--line-light); background: var(--white);
}
.chip--dark { color: var(--orange-light); border-color: rgba(255, 119, 46, .5); background: transparent; }

.iconbtn {
  width: 40px; height: 40px; border-radius: 0; display: grid; place-items: center; cursor: pointer;
  background: transparent; color: var(--ink); border: 1px solid var(--ink);
  transition: background-color .2s, color .2s;
}
.iconbtn svg { width: 16px; height: 16px; }
.iconbtn:hover { background: var(--ink); color: var(--white); }

/* ---------- Nav: small, black, logo with its glow ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h); background: transparent; overflow: hidden; transition: background-color .5s ease; }
.nav.is-solid { background: var(--black); }
.nav__inner { height: 58px; margin-top: 9px; display: flex; align-items: center; gap: 44px; }
.nav__logo { flex: none; display: block; width: 106px; height: 24px; position: relative; }
/* the glow asset has 250 units of padding around the wordmark, so it is drawn larger and pulled back into place */
.nav__logo img { position: absolute; left: -30.6px; top: -34.2px; /* lifted 3.6px so the letters' mid-height lines up with the links */ width: 166.6px; height: 85.5px; max-width: none; pointer-events: none; }
.nav__links { display: flex; gap: 28px; font-size: 14px; line-height: 20px; color: var(--on-dark-muted); }
/* short divider between the logo and the menu */
.nav__links { position: relative; }
.nav__links::before { content: ""; position: absolute; left: -22px; top: 50%; width: 1px; height: 18px; margin-top: -9px; background: rgba(255, 255, 255, .28); }
.nav__links a { transition: color .2s; }
.nav__links a:hover { color: var(--white); }
.nav .btn { margin-left: auto; }

/* ---------- Top: hero + testimonials on one dark canvas ---------- */
.top { position: relative; isolation: isolate; overflow: hidden; background: var(--black); color: var(--white); }
.fx { position: absolute; pointer-events: none; z-index: 0; }
.fx canvas { display: block; width: 100%; height: 100%; }
.fx-rays { inset: 0 0 auto 0; height: calc(100svh - var(--peek)); min-height: 560px; opacity: .9; }
/* aurora rises from the bottom edge and fades out behind the quotes */
.fx-aurora { left: 0; right: 0; bottom: 0; height: 400px; opacity: .85;
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 100%); mask-image: linear-gradient(to bottom, #000 50%, transparent 100%); }
.fx-aurora canvas { transform: scaleY(-1); }
.tether { position: absolute; left: 0; width: 100%; z-index: 30; pointer-events: none; mix-blend-mode: screen; }
.tether canvas { display: block; width: 100%; height: 100%; }
.fx-cursor { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; mix-blend-mode: screen; }

/* first screen: hero grows to fill whatever the testimonial band leaves, so both always fit without scrolling */
.top--screen { min-height: 100svh; display: flex; flex-direction: column; }
.top--screen .hero { flex: 1; }
/* testimonials sit low on the first screen: half the earlier space beneath them (28px, was 56px) */
.top--screen .proof__inner { padding-bottom: 28px; }
.hero { position: relative; z-index: 2; padding-top: var(--nav-h); display: flex; }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 56px; padding-top: 32px; padding-bottom: 24px; }
.hero__copy { display: grid; justify-items: start; gap: 24px; }
.hero__copy .body-lg { max-width: 36em; color: var(--on-dark-muted); }
/* forced line breaks that only apply on wide screens; on narrow ones the text wraps naturally */
@media (max-width: 1080px) { .br-desk { display: none; } }
.hero__copy .btn { margin-top: 4px; }
/* rotating everyday question: small, italic, quiet; the fixed height stops the button jumping when a line wraps */
.hero__ask { min-height: 56px; display: flex; align-items: center; max-width: 30em;
  font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 20px; line-height: 28px; letter-spacing: -.005em; color: rgba(255, 255, 255, .78); }
/* the orange line belongs to the text itself, so it is exactly as tall as the question (one line or two) */
.hero__ask span { padding-left: 18px; border-left: 1px solid var(--orange); opacity: 0; transform: translateY(6px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.hero__ask span.is-on { opacity: 1; transform: none; }
.hero__figure {
  width: 100%; max-width: min(620px, calc((100svh - var(--peek) - var(--nav-h) - 96px) * 1.25)); justify-self: center;
  --hairline-plate: #000000; --hairline-hi: #FF772E; --hairline-edge: #c9c9cf; --hairline-mid: #6b6b73; --hairline-lo: #2e2e33; --hairline-stroke: 1;
}

/* Custom hero illustration (hero-figure.js), drawn in the Hairline style */
.hf { position: relative; aspect-ratio: 5 / 4; }
.hf svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hf path, .hf line, .hf circle { vector-effect: non-scaling-stroke; }
.hf__link { stroke: var(--hairline-mid); stroke-width: 1; stroke-dasharray: 3 4; transition: opacity .2s; }
.hf__tile { cursor: pointer; }
.hf__sil { fill: var(--hairline-plate); stroke: var(--hairline-mid); stroke-width: 1; stroke-linejoin: round; }
.hf__top { fill: var(--hairline-plate); stroke: var(--hairline-edge); stroke-width: 1; stroke-linejoin: round; transition: stroke .25s; }
.hf__stroke { fill: none; stroke: var(--hairline-edge); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; transition: stroke .25s; }
.hf__glyph { fill: var(--hairline-edge); transition: fill .25s; }
.hf__tile.is-over .hf__top { stroke: var(--orange); }
.hf__tile.is-over .hf__stroke { stroke: #fff; }
.hf__tile.is-over .hf__glyph { fill: #fff; }
.hf__tile--hub .hf__top, .hf__tile--hub .hf__sil { stroke: var(--orange); }
.hf__mark { pointer-events: none; }
.hf__ring { fill: none; stroke: var(--orange); stroke-width: 2.4; }
.hf__spark { fill: #fff; }
.hf__tile--hub.is-lit { filter: drop-shadow(0 0 10px rgba(255, 119, 46, .55)); }
/* label above a tile: what the fragment is, and what it becomes */
.hf__tip {
  position: absolute; z-index: 3; transform: translate(-50%, calc(-100% - 6px)); pointer-events: none; white-space: nowrap;
  display: grid; gap: 1px; padding: 8px 12px 9px; background: #000; border: 1px solid var(--hairline-edge);
  opacity: 0; transition: opacity .2s var(--ease);
}
.hf__tip::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 10px; background: var(--hairline-edge); }
.hf__tip.is-on { opacity: 1; }
.hf__tip span { font-size: 11px; line-height: 14px; letter-spacing: .6px; text-transform: uppercase; color: var(--orange); }
.hf__tip b { font-weight: 500; font-size: 14px; line-height: 18px; color: var(--white); }

/* Saved orbit animation (saved-orbit.html) */
.hero__stage { position: relative; background: var(--black); overflow: hidden; display: grid; place-items: center; padding: 48px 40px; }
.hero__glow {
  position: absolute; left: 50%; top: 50%; width: 130%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 119, 46, .2), rgba(255, 119, 46, .06) 48%, transparent 72%);
  pointer-events: none;
}

/* ---------- Orbit ---------- */
.orbit { position: relative; width: 100%; max-width: min(560px, calc(100svh - var(--peek) - var(--nav-h) - 96px)); min-width: 280px; aspect-ratio: 1; }
.orbit__ring, .orbit__fx { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit__ring { filter: drop-shadow(0 0 5px rgba(255, 119, 46, .9)) drop-shadow(0 0 26px rgba(255, 119, 46, .5)) drop-shadow(0 0 80px rgba(255, 119, 46, .32)); }
.orbit__track { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 1; }
.orbit__track--inner { stroke-dasharray: 2 7; stroke: rgba(255, 255, 255, .2); }
.orbit__people { fill: rgba(255, 255, 255, .55); transform-origin: 300px 300px; animation: spin 46s linear infinite reverse; }
.orbit__spark { fill: #fff; filter: drop-shadow(0 0 8px rgba(255, 170, 48, .9)) drop-shadow(0 0 30px rgba(255, 119, 46, .7)); transform-origin: 0 0; transition: transform .6s var(--ease); }
.orbit.is-thinking .orbit__spark { animation: think 1s ease-in-out infinite; }
.orbit__link { stroke: var(--orange-light); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset .55s var(--ease), opacity .3s; }
.orbit__link.is-on { stroke-dashoffset: 0; opacity: .9; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes think { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18) rotate(45deg); } }

.dept { position: absolute; width: 0; height: 0; }
.dept__dot {
  position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%;
  background: #8d8d92; box-shadow: 0 0 0 5px var(--black);
  transition: background-color .4s, box-shadow .4s, transform .4s var(--ease);
}
.dept__label { position: absolute; top: 14px; left: 0; transform: translateX(-50%); white-space: nowrap; font-size: 12px; line-height: 16px; letter-spacing: .2px; color: rgba(255, 255, 255, .55); transition: color .4s; }
.dept.is-alert .dept__dot { background: var(--orange); transform: scale(1.25); animation: ping 1.3s ease-out infinite; }
.dept.is-alert .dept__label, .dept.is-done .dept__label { color: var(--white); }
.dept.is-done .dept__dot { background: var(--white); transform: scale(1.15); box-shadow: 0 0 0 5px var(--black), 0 0 18px 4px rgba(255, 119, 46, .7); }
@keyframes ping {
  0% { box-shadow: 0 0 0 5px var(--black), 0 0 0 5px rgba(255, 119, 46, .8); }
  100% { box-shadow: 0 0 0 5px var(--black), 0 0 0 20px rgba(255, 119, 46, 0); }
}

/* Problem and reply bubbles */
.bubble {
  position: absolute; z-index: 3; width: min(340px, 78%); padding: 14px 16px 15px;
  border-radius: 2px; border: 1px solid var(--line-dark);
  background: rgba(20, 20, 22, .84); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .45s var(--ease);
  pointer-events: none; color: var(--white);
}
.bubble.is-on { opacity: 1; transform: none; }
.bubble--problem { left: 19%; top: 12%; }
.bubble--reply { right: 0; top: 62%; border-color: rgba(255, 119, 46, .55); }
.bubble__head { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; margin-bottom: 8px; }
.bubble__alert { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.bubble__who { font-weight: 600; }
.bubble__sep, .bubble__ctx { color: var(--on-dark-muted); opacity: .75; }
.bubble__avatar { width: 20px; height: 20px; }
.bubble__head .chip { margin-left: auto; height: 22px; font-size: 11px; }
.bubble__text { font-size: 15px; line-height: 21px; letter-spacing: -.1px; color: var(--white); }
.bubble__foot { display: flex; align-items: center; gap: 7px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line-dark); font-size: 13px; line-height: 18px; color: var(--orange-light); opacity: 0; transition: opacity .4s; }
.bubble__foot svg { width: 15px; height: 15px; flex: none; }
.bubble__typing { display: none; gap: 5px; padding: 6px 0 4px; }
.bubble__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--orange-light); animation: blink 1s infinite; }
.bubble__typing i:nth-child(2) { animation-delay: .15s; }
.bubble__typing i:nth-child(3) { animation-delay: .3s; }
.bubble.is-typing .bubble__typing { display: flex; }
.bubble.is-typing .bubble__text, .bubble.is-typing .bubble__foot { display: none; }
.bubble.is-resolved .bubble__foot { opacity: 1; }
@keyframes blink { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* ---------- Testimonial band ---------- */
.proof { position: relative; z-index: 2; color: var(--white); }
.proof .quote__meta, .proof .quote__metric span, .proof .proof__count, .proof .quote__logo { color: var(--on-dark-muted); }
.proof .quote__meta b, .proof .link { color: var(--white); }
.proof .quote__metric { border-color: rgba(255, 255, 255, .25); }
.proof .iconbtn { color: var(--white); border-color: rgba(255, 255, 255, .6); }
.proof .iconbtn:hover { background: var(--white); color: var(--ink); }
.proof__inner { display: flex; align-items: center; gap: 32px; padding-top: 28px; padding-bottom: 56px; }
.proof__viewport { flex: 1; min-width: 0; overflow: hidden; }
/* testimonials slide sideways as before, and each one also fades out as it leaves and in as it arrives */
.proof__track { display: flex; transition: transform .6s var(--ease); }
.proof__track > .quote { opacity: 0; transition: opacity .45s ease; }
.proof__track > .quote.is-active { opacity: 1; transition: opacity .6s ease .1s; }
.quote { flex: 0 0 100%; min-width: 0; display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; align-items: stretch; column-gap: 28px; }
/* the divider sits the same distance (40px) from the logo on its left and the metric text on its right */
.quote__main { margin-right: 12px; }
/* quote on the left, client logo top right beside it, name line underneath */
.quote__main { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-content: start; min-width: 0; }
.quote__main .quote__meta { grid-column: 1; grid-row: 2; }
/* avatar sits level with the first line of the quote */
.quote__photo { filter: grayscale(1) contrast(1.05); /* black-and-white avatars; delete this filter to bring colour back */ width: 70px; height: 70px; margin-top: 5px; align-self: start; border-radius: 50%; background: #dedede; object-fit: cover; }
.quote__text { font-family: var(--serif); font-weight: 300; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.4; letter-spacing: -.005em; text-wrap: pretty; }
.quote__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 10px; font-size: 14px; line-height: 20px; color: var(--muted); }
.quote__meta b { font-weight: 600; color: var(--ink); }
.quote__meta .link { font-size: 14px; line-height: 20px; }
/* metric: centred, bold number, label at the quote's size */
.quote__metric { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; padding-left: 40px; border-left: 1px solid var(--line-light); }
.quote__metric b { display: block; margin-top: 1px; /* kept inside the slider's clipping edge so the digits are never cut off */ font-family: var(--serif); font-weight: 600; font-size: 45px; line-height: 50px; letter-spacing: -.02em; }
.quote__metric span { display: block; margin-top: 6px; font-family: var(--serif); font-weight: 300; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.3; color: var(--muted); max-width: 12em; text-wrap: balance; }
/* a slide without a number shows a key word in the same slot */
.quote__metric--words b { font-size: 35px; line-height: 50px; }
/* client logos are forced to plain white whatever their original colours (their shape comes from transparency) */
/* small, top right of the quote, just before the divider */
.quote__logo { grid-column: 2; grid-row: 1; align-self: start; justify-self: end; margin-top: 4px; height: 24px; width: auto; max-width: 128px; object-fit: contain; filter: brightness(0) invert(1); opacity: .9; }
.proof__controls { display: flex; align-items: center; gap: 10px; flex: none; align-self: flex-start; margin-top: 3px; /* level with the first line of the quote */ }
.proof__count { font-size: 14px; min-width: 40px; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- Sections ---------- */
/* sections use half the base spacing above and below (hero, testimonials and footer have their own) */
.section { padding: calc(var(--section) / 2) 0; background: var(--white); }
section[id] { scroll-margin-top: var(--nav-h); }
/* the paragraph's last line sits on the same line of text as the headline's last line */
.section__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: end; align-items: last baseline; }
.section__head .eyebrow { margin-bottom: 20px; }

/* ---------- Who we are ---------- */
.about__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: center; }
.about__copy { display: grid; gap: 20px; justify-items: start; }
.about__copy .eyebrow { margin-bottom: 0; }
.about__copy .h2-sm { margin-bottom: 12px; }
.about__copy .body-lg { max-width: 36em; }
.about__figure { display: grid; justify-items: center; gap: 4px; }
.about__figure picture { display: block; width: 100%; max-width: 480px; }
/* the portrait file has a see-through background (ink only, with a soft round edge), so it sits on any section colour on every device */
.about__portrait { width: 100%; max-width: 480px; height: auto; aspect-ratio: 1; object-fit: cover; }
.about__figure figcaption { display: grid; justify-items: center; gap: 2px; font-size: 14px; line-height: 20px; color: var(--muted); }
.about__figure figcaption b { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 28px; color: var(--ink); }
.about .eyebrow { color: var(--orange); }
/* straight orange underline for the key phrase */
.underline { color: var(--ink); text-decoration: underline solid var(--orange); text-decoration-thickness: 1.5px; text-underline-offset: 6px; text-decoration-skip-ink: none; }
/* drawn version: the line grows from left to right (across both lines when the phrase wraps) once .is-drawn is set */
.underline[data-draw] { text-decoration: none; padding-bottom: 5px; background: linear-gradient(var(--orange), var(--orange)) no-repeat 0 100% / 0 1.5px; transition: background-size 2.2s cubic-bezier(.45, 0, .2, 1); }
.underline[data-draw].is-drawn { background-size: 100% 1.5px; }
@media (prefers-reduced-motion: reduce) { .underline[data-draw] { transition: none; } }
/* this section is tighter than the others: half the usual space above and below */
.about { padding-top: calc(var(--section) / 2); padding-bottom: calc(var(--section) / 2); }

/* ---------- Expertise: deliverable cards ---------- */
.dcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 72px; }
.dcard { display: flex; flex-direction: column; background: var(--grey); border: 1px solid transparent; transition: border-color .3s var(--ease-btn), background-color .3s var(--ease-btn); }
.dcard:hover { border-color: var(--orange); }
.dcard__art {
  aspect-ratio: 5 / 4; margin: 8px 24px 0; overflow: hidden;
  --hairline-plate: #F6F6F6; --hairline-hi: #FF772E; --hairline-edge: #0D0D0D; --hairline-mid: #8a8a8a; --hairline-lo: #cfcfcf; --hairline-stroke: 1;
}
/* custom isometric scenes (iso.js): same line weights and greys as the other figures */
.dcard__art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dcard__art svg * { vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.iso-t { fill: #F6F6F6; stroke: #0D0D0D; stroke-width: 1; }
.iso-s { fill: #F6F6F6; stroke: #8a8a8a; stroke-width: 1; }
.iso-hot { stroke: var(--orange); stroke-width: 1.4; }
.iso-e { fill: none; stroke: #0D0D0D; stroke-width: 1; }
.iso-m { fill: none; stroke: #8a8a8a; stroke-width: 1; }
.iso-h { fill: none; stroke: var(--orange); stroke-width: 1.4; }
.iso-dash { fill: none; stroke: #8a8a8a; stroke-width: 1; stroke-dasharray: 3 4; }
.iso-thick { stroke-width: 1.6; }
.iso-glass { fill: rgba(246, 246, 246, .55); stroke: #0D0D0D; stroke-width: 1.6; }
.iso-spark { fill: var(--orange); stroke: none; }
.iso-f { fill: #F6F6F6; stroke: none; }
.iso-floor { fill: #EAEAEA; stroke: #0D0D0D; stroke-width: 1; }
.iso-em { stroke-width: 1.7; }
.iso-hf { fill: var(--orange); stroke: var(--orange); stroke-width: 1; }
.iso-lens { fill: #fff; stroke: none; }
.iso-flag { fill: #F6F6F6; stroke: var(--orange); stroke-width: 1.4; }
.dcard__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; flex: 1; padding: 24px 28px 28px; border-top: 1px solid var(--line-light); }
.dcard__when { min-height: 32px; font-size: 12px; line-height: 16px; letter-spacing: .6px; text-transform: uppercase; color: var(--orange); font-weight: 600; }
.expertise .eyebrow { color: var(--orange); }
/* titles keep room for two lines so every card's paragraph starts level; the lists sit at the bottom */
.dcard .title { min-height: 0; }   /* every title now fits one line, so the paragraph follows it directly */
.dcard__list { margin-top: auto !important; }
.dcard__list { margin-bottom: 0 !important; }
/* the list sits at the bottom of the card; 19px from its last line to the card edge (half the earlier 38px) */
.dcard__body { padding-bottom: 9px; }
.dcard__when span { color: var(--orange); font-weight: 600; }
.dcard__list { list-style: none; margin: 4px 0 8px; padding: 0; width: 100%; font-size: 14px; line-height: 20px; color: var(--ink); }
.dcard__list li { padding: 10px 0 10px 22px; border-top: 1px solid var(--line-light); position: relative; }
.dcard__list li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 6px; height: 6px; background: var(--orange); }
.dcard .link { margin-top: auto; }
.dcard:hover .link span { transform: translateX(4px); }

/* ---------- Dark (navy) section variant ---------- */
.section--navy { background: var(--navy); color: var(--white); }
.section--navy .eyebrow { color: var(--orange-light); }
.section--navy .body-lg { color: var(--on-dark-muted); }

/* ---------- Industries selector ---------- */
.ind__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px; margin-top: 36px; align-items: stretch; }
.ind__side { display: flex; flex-direction: column; gap: 24px; min-height: 0; }
/* the list scrolls inside its own frame, with a soft fade at the bottom edge */
.ind__list { display: flex; flex-direction: column; max-height: 432px; overflow-y: auto; border-top: 1px solid var(--line-dark); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .3) transparent;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent); padding-bottom: 32px; }
.ind__tab {
  flex: none; display: flex; align-items: baseline; gap: 16px; width: 100%; padding: 17px 16px 17px 20px; text-align: left; cursor: pointer;
  font-family: var(--sans); font-size: 18px; line-height: 26px; letter-spacing: -.2px; color: rgba(255, 255, 255, .6);
  background: transparent; border: 0; border-bottom: 1px solid var(--line-dark); position: relative;
  transition: color .3s var(--ease-btn), background-color .3s var(--ease-btn), padding-left .3s var(--ease-btn);
}
.ind__tab::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--orange); transition: width .3s var(--ease-btn); }
.ind__num { font-size: 12px; letter-spacing: .6px; color: rgba(255, 255, 255, .45); font-variant-numeric: tabular-nums; transition: color .3s; }
.ind__tab:hover { color: var(--white); }
.ind__tab[aria-selected="true"] { color: var(--white); background: rgba(255, 255, 255, .06); padding-left: 28px; }
.ind__tab[aria-selected="true"]::before { width: 3px; }
.ind__tab[aria-selected="true"] .ind__num { color: var(--orange-light); }
.ind__tab:focus-visible { outline: 2px solid var(--orange-light); outline-offset: -2px; }
.ind__note { font-size: 14px; line-height: 22px; color: var(--on-dark-muted); }
.ind__note .link { font-size: 14px; line-height: 22px; }

.ind__panel { background: rgba(255, 255, 255, .04); border: 1px solid var(--line-dark); padding: 40px 40px 16px; }   /* as tall as its content, with no empty space at the bottom */
.ind__panel:focus-visible { outline: 2px solid var(--orange-light); outline-offset: 3px; }
.ind__content { animation: ind-in .45s var(--ease) both; }
@keyframes ind-in { from { opacity: 0; transform: translateY(8px); } }
.ind__content .h4 { max-width: 22em; text-wrap: pretty; }
.ind__rows { margin-top: 36px; }
.ind__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding: 22px 0; border-top: 1px solid var(--line-dark); }
.ind__row--head { padding: 0 0 12px; border-top: 0; font-size: 12px; line-height: 16px; letter-spacing: .6px; text-transform: uppercase; font-weight: 600; }
.ind__row--head span { display: flex; align-items: center; gap: 8px; }
.ind__row--head svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
/* a warm red and a clear green chosen to sit beside the orange without fighting it */
.ind__bad { color: #F0556A; }
.ind__good { color: #3ECF8E; }

/* the bottleneck and the solution are set in the same type and colour */
.ind__problem { font-size: 16px; line-height: 24px; color: var(--on-dark-muted); }
.ind__fix { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 24px; color: var(--on-dark-muted); }

/* ---------- Process ---------- */
.section--grey { background: var(--grey); }
/* process: a tall stacked figure on the left; from each foundation a black line runs right to its phase name.
   The description under a name opens when that name or its foundation is hovered (or focused). */
.proc .eyebrow { color: var(--orange); }
/* the figure keeps empty room above the stack for the blocks that lift; the section pulls it up so that room,
   and no more, separates the stack from the headline */
.pstack { --fh: min(84vh, 780px); position: relative; margin-top: calc(56px - var(--fh) * .212); padding-bottom: 0; display: grid; grid-template-columns: auto minmax(0, 1fr);
  --hairline-plate: #F6F6F6; --hairline-hi: #FF772E; --hairline-edge: #0D0D0D; --hairline-mid: #8a8a8a; --hairline-lo: #cfcfcf; --hairline-stroke: 1; }
.pstack__fig { height: var(--fh); aspect-ratio: 14 / 31; }
.pstack__fig svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pstack__labels { position: relative; }
.pstack__card { position: absolute; left: 0; right: 0; display: flex; align-items: flex-start; gap: 28px; outline: none; cursor: default; }
.pstack__card[data-layer="0"] { top: var(--layer-0, 80%); }
.pstack__card[data-layer="1"] { top: var(--layer-1, 60%); }
.pstack__card[data-layer="2"] { top: var(--layer-2, 40%); }
.pstack__card[data-layer="3"] { top: var(--layer-3, 20%); }
.pstack__line { flex: 0 0 clamp(72px, 16vw, 260px); height: 1px; background: var(--ink); margin-left: -16px; position: relative; }
.pstack__line::after { content: ""; position: absolute; right: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.pstack__text { margin-top: -39px; position: relative; flex: 1; min-width: 0; }
.pstack__num { font-size: 12px; line-height: 16px; letter-spacing: .6px; text-transform: uppercase; color: var(--orange); font-weight: 600; margin-bottom: 6px; }
/* the description sits beside the name, so opening it never collides with the phase below */
.nobr { white-space: nowrap; }
/* top: the paragraph's first line sits level with the PHASE 0X caption */
.pstack__desc { position: absolute; left: 310px; top: -4px; width: min(24em, calc(100% - 310px)); opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .45s var(--ease); pointer-events: none; }
.pstack__desc > p { color: var(--muted); }
.pstack__get { margin-top: 16px; font-size: 12px; line-height: 16px; letter-spacing: .6px; text-transform: uppercase; }
.pstack__list { list-style: none; margin: 6px 0 0; padding: 0; font-size: 14px; line-height: 20px; color: var(--ink); }
.pstack__list li { position: relative; padding: 7px 0 7px 18px; border-top: 1px solid var(--line-light); }
.pstack__list li::before { content: ""; position: absolute; left: 1px; top: 14px; width: 6px; height: 6px; background: var(--orange); }
.pstack__card:hover .pstack__desc, .pstack__card:focus-visible .pstack__desc, .pstack__card.is-open .pstack__desc { opacity: 1; transform: none; }
/* below 1200px there is no room for captions beside the figure: the figure sits on top and the four phases are
   listed under it, each with its description and deliverables always shown (nothing depends on hovering) */
@media (max-width: 1199px) {
  .pstack { display: flex; flex-direction: column; gap: 8px; margin-top: 0; padding-bottom: 0; }
  .pstack__fig { height: auto; width: min(100%, 280px); align-self: center; margin-top: -84px; }
  .pstack__labels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 40px; }
  .pstack__card { position: static; }
  .pstack__card[data-layer="0"] { order: 1; } .pstack__card[data-layer="1"] { order: 2; }
  .pstack__card[data-layer="2"] { order: 3; } .pstack__card[data-layer="3"] { order: 4; }
  .pstack__line { display: none; }
  .pstack__text { margin-top: 0; display: block; }
  .pstack__desc { position: static; width: auto; opacity: 1; transform: none; margin-top: 10px; pointer-events: auto; }
}
@media (max-width: 700px) { .pstack__labels { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
/* simplest-fix order: white cards in a row, each with a small abstract orange line drawing above the question */
/* far enough below the stack that the bottom phase's open description and list clear it with room to spare */
.fix { margin-top: 104px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 104px; align-items: start; }   /* a wide gutter keeps the paragraph clear of the cards */
.fix__head { display: grid; gap: 20px; }
.fix__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line-light); border: 1px solid var(--line-light); }
.fix__card:hover { outline: 1px solid var(--orange); position: relative; z-index: 1; }
.fix__card { transition: outline-color .2s; outline: 1px solid transparent; background: var(--white); padding: 16px 14px 16px; display: flex; flex-direction: column; min-height: 176px; }
.fix__art { width: 100%; max-width: 110px; height: auto; margin: 4px 0 0; overflow: visible; align-self: center; }   /* the drawing is centred; the text below stays left-aligned */
.fix__art * { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.fx-l { stroke: var(--orange); stroke-width: 1.2; }
.fx-l2 { stroke: var(--orange); stroke-width: 1; opacity: .32; }
.fix__art .fx-d { fill: var(--orange); stroke: none; }
.fix__art .fx-halo { fill: var(--orange); stroke: none; opacity: .14; transform-box: fill-box; transform-origin: center; transition: transform .5s var(--ease), opacity .5s; }
.fix__card:hover .fx-halo { transform: scale(1.45); opacity: .22; }
.fix__num { margin-top: 16px; font-size: 11px; line-height: 14px; letter-spacing: .6px; color: var(--orange); font-weight: 600; }
.fix__name { margin-top: 16px; font-family: var(--sans); font-weight: 500; font-size: 15px; line-height: 20px; letter-spacing: -.2px; color: var(--ink); }
.fix__q { margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--muted); }
@media (max-width: 1100px) { .fix { grid-template-columns: minmax(0, 1fr); gap: 48px; } }
@media (max-width: 900px) {
  .fix { margin-top: 56px; }
  .fix__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fix__card { min-height: 0; }
}
.ladder { margin-top: 72px; background: var(--white); padding: 40px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: end; }
.ladder__head { display: grid; gap: 14px; align-self: start; }
.ladder__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; align-items: end; counter-reset: l; }
.ladder__steps li { display: flex; flex-direction: column; gap: 4px; font-size: 12px; line-height: 16px; color: var(--muted); counter-increment: l; }
.ladder__steps b { font-family: var(--sans); font-weight: 500; font-size: 15px; line-height: 20px; color: var(--ink); letter-spacing: -.2px; }
.ladder__steps li > span:last-child { min-height: 48px; }
/* bars step upward: each option costs more than the one before */
.ladder__bar { display: block; height: calc(14px + var(--i) * 14px); margin-bottom: 10px; background: var(--grey); border-top: 2px solid var(--ink); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease); transition-delay: calc(var(--i) * 70ms); }
.ladder__steps li:nth-last-child(-n+2) .ladder__bar { border-top-color: var(--orange); }
.ladder.is-in .ladder__bar { transform: scaleY(1); }

/* ---------- Tools: logo honeycomb ---------- */
.section--black { background: var(--black); color: var(--white); }
.section--black .eyebrow { color: var(--orange-light); }
.section--black .body-lg { color: var(--on-dark-muted); }
.tools { position: relative; overflow: hidden; isolation: isolate; }
.tools > .wrap { position: relative; z-index: 1; }
.tools .fx-dots { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 70%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 70%, transparent); }
.tools__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.tools__copy { display: grid; gap: 24px; justify-items: start; }
/* on wide screens the text block sits low, its last line level with the bottom edge of the logo field */
/* (the lowest logos sit a little above the bottom of their box, so the text is lifted by the same amount) */
@media (min-width: 901px) { .tools__copy { align-self: end; margin-bottom: clamp(36px, 4.25vw, 62px); } }
.tools__copy .eyebrow { margin-bottom: -4px; }
.tools__cats { list-style: none; margin: 40px 0 0; padding: 0; width: 100%; font-size: 16px; line-height: 24px; color: var(--white); display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; }
.tools__cats li { padding: 12px 0 12px 22px; border-top: 1px solid var(--line-dark); position: relative; }
.tools__cats li { cursor: pointer; transition: color .25s, padding-left .3s var(--ease); outline: none; }
.tools__cats li:hover, .tools__cats li.is-on, .tools__cats li:focus-visible { color: var(--orange-light); padding-left: 28px; }
/* while a category is in focus its logos keep full strength and the rest step back */
.hive.is-focus .hive__item:not(.is-cat) span { opacity: .22; }
.hive.is-focus .hive__item.is-cat span { box-shadow: 0 0 0 2px var(--orange); }
.ind__intro { font-family: var(--serif); font-weight: 300; font-size: 24px; line-height: 1.2; letter-spacing: -.015em; max-width: 26em; text-wrap: pretty; }
.tools__cats li::before { content: ""; position: absolute; left: 2px; top: 21px; width: 6px; height: 6px; background: var(--orange); }

.hive { position: relative; aspect-ratio: 1 / .92; overflow: hidden; touch-action: pan-y; --hive-size: 80px; margin-top: -6px; }   /* pan-y: a finger can still scroll the page from here */
/* the logos fade out toward the edge so the dotted background shows through; the name label stays outside the fade */
.hive__mask { position: absolute; inset: 0; overflow: hidden; -webkit-mask-image: radial-gradient(closest-side, #000 76%, transparent 100%); mask-image: radial-gradient(closest-side, #000 76%, transparent 100%); }
.hive__field { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.hive__item { position: absolute; left: calc(var(--hive-size) / -2); top: calc(var(--hive-size) / -2); width: var(--hive-size); height: var(--hive-size); will-change: transform; }
.hive__item span { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--white); position: relative; transition: box-shadow .3s, opacity .35s; }
/* the logo is drawn in its brand colour through a mask, so one file works for any colour */
.hive__item span::after { content: ""; position: absolute; inset: 24%; background: var(--brand);
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; opacity: 0; transition: opacity .4s ease; }
.hive__item span.has-icon::after { opacity: 1; }
.hive__item:hover { z-index: 2; }
.hive__item:hover span { box-shadow: 0 0 0 3px var(--orange), 0 0 40px rgba(255, 119, 46, .55); }
/* soft fade at the card edges */

.hive__label { position: absolute; left: 20px; bottom: 18px; z-index: 3; display: flex; align-items: baseline; gap: 10px; font-size: 16px; line-height: 24px; pointer-events: none; }
.hive__label b { font-weight: 500; }
.hive__label span { font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--orange-light); }
.hive__hint { position: absolute; right: 20px; bottom: 20px; z-index: 3; font-size: 12px; line-height: 16px; letter-spacing: .6px; text-transform: uppercase; color: rgba(255, 255, 255, .5); pointer-events: none; }

/* ---------- Who we work with ---------- */
.who__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 72px; }
.who__card { background: var(--grey); display: grid; grid-template-rows: auto 1fr; }
.who__art { aspect-ratio: 5 / 4; width: min(100%, 440px); margin: 8px auto 0; overflow: hidden;
  --hairline-plate: #F6F6F6; --hairline-hi: #FF772E; --hairline-edge: #0D0D0D; --hairline-mid: #8a8a8a; --hairline-lo: #cfcfcf; --hairline-stroke: 1; }
.who__body { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 32px 40px 40px; border-top: 1px solid var(--line-light); }
.who__tag { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; line-height: 16px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.who__tag b { font-weight: 600; color: var(--orange); }
.who__body .h4 { min-height: 2.2em; }
.who__rows { margin: 8px 0 0; width: 100%; }
.who__rows div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--line-light); font-size: 16px; line-height: 24px; }
.who__rows dt { font-size: 12px; line-height: 24px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.who__rows dd { margin: 0; color: var(--ink); }
.who__method { width: 100%; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line-light); }
.who__method p { font-size: 12px; line-height: 16px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.who__method ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 0; counter-reset: m; }
.who__method li { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; background: var(--white); border: 1px solid var(--line-light); font-size: 13px; font-weight: 500; }
.who__method li + li { margin-left: 22px; position: relative; }
.who__method li + li::before { content: "→"; position: absolute; left: -18px; color: var(--orange); font-weight: 400; }

/* ---------- CTA (reuses the hero's dark canvas: .top + .fx layers) ---------- */
.cta { padding: 84px 0 68px; }
.fx-dots { inset: 0; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 92%); mask-image: linear-gradient(to bottom, #000 55%, transparent 92%); }
.cta__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: start; /* the left column starts at the icon, level with the top of the card */ }
.cta__main { display: grid; justify-items: start; gap: 24px; }
.cta__main .body-lg { max-width: 34em; color: var(--on-dark-muted); }
.cta__main .btn { margin-top: 8px; }
/* the "o" breathes: a quick swell to a saturated orange glow, a hold at the peak, then it eases back */
/* pushed down so the icon's top edge is level with the top of the "Success story" caption in the card */
.cta__iconbox { width: 56px; height: 56px; margin-top: 44px; margin-bottom: 8px; }
.cta__icon { width: 56px; height: 56px; animation: glow-breathe 5s ease-in-out infinite; }
@keyframes glow-breathe {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 119, 46, .9)) drop-shadow(0 0 12px rgba(255, 119, 46, .4)) drop-shadow(0 0 30px rgba(255, 119, 46, 0)); }
  /* 1.3s up, 1.9s held at the peak, 1.5s down, 0.3s rest */
  26%, 64% { filter: drop-shadow(0 0 6px rgba(255, 119, 46, 1)) drop-shadow(0 0 24px rgba(255, 119, 46, .95)) drop-shadow(0 0 64px rgba(255, 119, 46, .75)); }
  94% { filter: drop-shadow(0 0 3px rgba(255, 119, 46, .9)) drop-shadow(0 0 12px rgba(255, 119, 46, .4)) drop-shadow(0 0 30px rgba(255, 119, 46, 0)); }
}
.cta__points { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 14px; line-height: 20px; color: var(--on-dark-muted); }
.cta__points li { display: flex; align-items: center; gap: 8px; }
.cta__points li::before { content: ""; width: 6px; height: 6px; background: var(--orange); }

.cta__story { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; padding: 40px; border: 1px solid var(--line-dark); background: rgba(12, 12, 13, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.cta__story .eyebrow { color: var(--orange-light); }
.cta__story blockquote { text-wrap: pretty; line-height: 1.25; }
.cta__story figcaption { display: flex; align-items: center; gap: 16px; width: 100%; font-size: 14px; line-height: 20px; color: var(--on-dark-muted); }
.cta__story figcaption b { font-weight: 600; color: var(--white); }
.cta__who { white-space: nowrap; } /* name, title and company each on their own line; no line breaks mid-way */
.cta__story .quote__photo { flex: none; width: 56px; height: 56px; margin: 0; }
.cta__story .quote__logo { margin: 0 0 0 auto; height: 34px; max-width: 130px; }
.cta__metrics { margin: 0; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.cta__metrics div { padding: 20px 16px 20px 0; }
.cta__metrics div + div { padding-left: 16px; border-left: 1px solid var(--line-dark); }
.cta__metrics dt { color: var(--orange); font-family: var(--serif); font-weight: 300; font-size: 34px; line-height: 40px; letter-spacing: -.02em; white-space: nowrap; }
.cta__metrics dd { margin: 6px 0 0; font-size: 12px; line-height: 16px; color: var(--on-dark-muted); }

/* ---------- Diagonal text reveal (Agiloft's "diag-mask": a soft 45-degree wipe, 0.9s, linear) ---------- */
[data-diag] {
  -webkit-mask: linear-gradient(45deg, transparent 0%, transparent 13.5%, rgba(0, 0, 0, .99) 31.5%, rgba(0, 0, 0, .99) 58.5%, transparent 77.4%, transparent 100%) no-repeat;
  mask: linear-gradient(45deg, transparent 0%, transparent 13.5%, rgba(0, 0, 0, .99) 31.5%, rgba(0, 0, 0, .99) 58.5%, transparent 77.4%, transparent 100%) no-repeat;
  -webkit-mask-size: 7000px 120%; mask-size: 7000px 120%;
  -webkit-mask-position: -6000px 0; mask-position: -6000px 0;
}
[data-diag].is-in { animation: diag-in .9s linear both; }
@keyframes diag-in { to { -webkit-mask-position: -3300px 0; mask-position: -3300px 0; } }

/* ---------- Footer ---------- */
.footer { background: var(--black); color: var(--on-dark-muted); padding: 56px 0 32px; font-size: 14px; line-height: 22px; }
.footer__top { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: 40px; }
.footer__brand { display: grid; gap: 24px; align-content: start; max-width: 320px; }
/* plain white wordmark: the black-and-white logo, inverted (no colour, no glow) */
.footer__logo { display: block; width: 106px; }
.footer__logo img { width: 100%; height: auto; filter: brightness(0) invert(1); }
.footer__col { display: grid; gap: 10px; align-content: start; }
.footer__col .eyebrow { color: rgba(255, 255, 255, .5); margin-bottom: 8px; }
.footer a { transition: color .2s; }
.footer a:hover { color: var(--white); }
.footer__bottom { margin-top: 72px; padding-top: 24px; border-top: 1px solid var(--line-dark); display: flex; justify-content: space-between; gap: 24px; color: rgba(255, 255, 255, .5); }
.footer__bottom a { margin-left: 24px; }

/* ---------- Booking flow (book.html): fit check, then pick a time ---------- */
.book-page { background: var(--black); }
.book { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; }
.book .fx-rays { height: 100%; min-height: 0; opacity: .7; }
.book__bar, .book__stage, .book__foot { position: relative; z-index: 2; }
.book__bar { height: var(--nav-h); padding: 9px var(--gutter); display: flex; align-items: center; justify-content: space-between; overflow: hidden; }
.book__close { font-size: 14px; line-height: 20px; color: var(--on-dark-muted); display: inline-flex; gap: 8px; transition: color .2s; }
.book__close:hover { color: var(--white); }
.book__stage { display: grid; place-items: center; padding: 40px var(--gutter); }
.step { width: 100%; max-width: 720px; display: grid; gap: 28px; justify-items: start; animation: step-in .45s var(--ease) both; }
.step--center { justify-items: center; text-align: center; }
@keyframes step-in { from { opacity: 0; transform: translateY(14px); } }
.step__count { font-size: 12px; line-height: 16px; letter-spacing: .6px; text-transform: uppercase; color: var(--orange-light); }
.step__q { font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; }
.step__hint { font-size: 16px; line-height: 24px; color: var(--on-dark-muted); max-width: 34em; margin-top: -12px; }
.step__note { font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, .55); }

.opts { width: 100%; display: grid; gap: 10px; }
.opt {
  display: flex; align-items: center; gap: 16px; width: 100%; padding: 16px 18px; text-align: left; cursor: pointer;
  font-family: var(--sans); font-size: 17px; line-height: 24px; color: var(--white);
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line-dark); border-radius: 0;
  transition: border-color .25s var(--ease-btn), background-color .25s var(--ease-btn), transform .25s var(--ease-btn);
}
.opt kbd { flex: none; width: 26px; height: 26px; display: grid; place-items: center; font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--on-dark-muted); border: 1px solid rgba(255, 255, 255, .28); transition: all .25s var(--ease-btn); }
.opt:hover { border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .06); }
.opt:hover kbd, .opt.is-picked kbd { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.opt.is-picked { border-color: var(--orange); background: rgba(255, 119, 46, .12); }
.opt:focus-visible, .field:focus-visible, .slot:focus-visible, .day:focus-visible { outline: 2px solid var(--orange-light); outline-offset: 2px; }

.field { width: 100%; padding: 16px 18px; font-family: var(--sans); font-size: 17px; line-height: 24px; color: var(--white); background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .28); border-radius: 0; }
.field::placeholder { color: rgba(255, 255, 255, .4); }
textarea.field { min-height: 132px; resize: vertical; }
.field.is-bad { border-color: #ff6b5e; }
.field__err { font-size: 14px; line-height: 20px; color: #ff8d82; min-height: 20px; margin-top: -16px; }
.check { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 22px; color: var(--on-dark-muted); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--orange); border-radius: 0; }
.step__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.step__actions .step__note kbd { font-family: var(--sans); padding: 1px 6px; border: 1px solid rgba(255, 255, 255, .28); font-size: 12px; }

/* three-step form */
.step { gap: 26px; }
.step--wide { max-width: 1100px; }   /* wide enough for Calendly's side-by-side layout */
.step__intro { display: grid; gap: 22px; padding-bottom: 8px; }
/* every question uses the same rhythm: 4px from the question to its helper line, 10px to the answer area */
.grp { border: 0; margin: 0; padding: 0; min-width: 0; width: 100%; display: grid; gap: 10px; }
.grp legend, .fld > span { padding: 0; font-size: 17px; line-height: 24px; color: var(--white); }
.grp legend { margin-bottom: 10px; }
.fld > span em, .grp legend em { font-style: normal; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--on-dark-muted); margin-left: 8px; }
.grp__help { font-size: 14px; line-height: 20px; color: var(--on-dark-muted); margin-top: -6px; }
.fld { width: 100%; display: grid; gap: 10px; }
.fld .grp__help { margin-top: -6px; }
.fld-row { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.fld .field__err, .grp .field__err { margin-top: 0; min-height: 0; }
.fld .field__err:empty, .grp .field__err:empty { display: none; }
.opt--check { padding: 13px 16px; font-size: 16px; }
.opt--check kbd { color: transparent; }
.opt--check:hover kbd { background: transparent; border-color: rgba(255, 255, 255, .55); }
.opt--check.is-picked kbd { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { cursor: pointer; padding: 11px 16px; font-family: var(--sans); font-size: 15px; line-height: 20px; color: var(--white); background: rgba(255, 255, 255, .03); border: 1px solid var(--line-dark); border-radius: 0; transition: border-color .2s, background-color .2s, color .2s; }
.pill:hover { border-color: rgba(255, 255, 255, .55); }
.pill[aria-checked="true"] { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.pill:focus-visible { outline: 2px solid var(--orange-light); outline-offset: 2px; }
.textlink { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.textlink:hover { color: var(--orange-light); }
.textlink.is-off { opacity: .45; cursor: default; text-decoration: none; }
.cal { width: 100%; min-height: 420px; border: 1px solid var(--line-dark); background: rgba(255, 255, 255, .03); overflow: hidden; }
.cal > .calendly-inline-widget, .cal iframe { display: block; width: 100%; min-height: 760px; border: 0; }
.cal__empty { min-height: 420px; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 32px; text-align: center; font-size: 15px; line-height: 22px; color: var(--on-dark-muted); }
.cal__empty b { font-family: var(--serif); font-weight: 300; font-size: 26px; line-height: 1.2; color: var(--white); }
.cal__empty span { max-width: 32em; }
@media (hover: none) { .opt--check:hover:not(.is-picked) { border-color: var(--line-dark); background: rgba(255, 255, 255, .03); } .pill:hover:not([aria-checked="true"]) { border-color: var(--line-dark); } }
@media (max-width: 640px) { .fld-row { grid-template-columns: minmax(0, 1fr); } .book__stage { place-items: start center; } }

/* pick a time */
.sched { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.sched h3 { font-size: 12px; line-height: 16px; letter-spacing: .6px; text-transform: uppercase; color: var(--on-dark-muted); font-weight: 400; margin: 0 0 12px; }
.days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.day, .slot { cursor: pointer; font-family: var(--sans); color: var(--white); background: rgba(255, 255, 255, .03); border: 1px solid var(--line-dark); border-radius: 0; transition: border-color .2s, background-color .2s, color .2s; }
.day { padding: 10px 4px; display: grid; gap: 2px; justify-items: center; font-size: 12px; line-height: 16px; color: var(--on-dark-muted); }
.day b { font-family: var(--serif); font-weight: 300; font-size: 24px; line-height: 28px; color: var(--white); }
.slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.slot { padding: 12px 4px; font-size: 15px; line-height: 20px; }
.day:hover, .slot:hover { border-color: rgba(255, 255, 255, .55); }
.day[aria-pressed="true"], .slot[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.day[aria-pressed="true"] b { color: var(--ink); }
.sched__tz { grid-column: 1 / -1; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, .55); }

.summary { width: 100%; border-top: 1px solid var(--line-dark); }
.summary div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-dark); font-size: 16px; line-height: 24px; text-align: left; }
.summary dt { font-size: 12px; line-height: 24px; letter-spacing: .6px; text-transform: uppercase; color: var(--on-dark-muted); }
.summary dd { margin: 0; }
.step__icon { width: 56px; height: 56px; animation: glow-breathe 5s ease-in-out infinite; }
.altlinks { width: 100%; display: grid; gap: 10px; }
.altlinks a { display: flex; justify-content: space-between; gap: 16px; padding: 16px 18px; border: 1px solid var(--line-dark); background: rgba(255, 255, 255, .03); font-size: 17px; line-height: 24px; transition: border-color .25s; }
.altlinks a:hover { border-color: var(--orange); }
.altlinks small { display: block; font-size: 14px; line-height: 20px; color: var(--on-dark-muted); }

.book__foot { padding: 20px var(--gutter) 28px; display: grid; grid-template-columns: 1fr minmax(0, 320px) 1fr; align-items: end; gap: 24px; }
.book__back { justify-self: start; background: none; border: 0; padding: 8px 0; cursor: pointer; font-family: var(--sans); font-size: 14px; line-height: 20px; color: var(--on-dark-muted); transition: color .2s; }
.book__back:hover { color: var(--white); }
.book__progress { grid-column: 2; display: grid; gap: 8px; font-size: 12px; line-height: 16px; letter-spacing: .6px; text-transform: uppercase; color: var(--on-dark-muted); }
.book__progress div { height: 2px; background: rgba(255, 255, 255, .16); }
.book__progress i { display: block; height: 100%; width: 0; background: var(--orange); transition: width .5s var(--ease-btn); }

/* ---------- Base style section (temporary) ---------- */
.style { background: var(--white); padding: var(--section) 0; }
.style__intro { max-width: 36em; margin-top: 16px; }
.style .h2 { margin-top: 16px; }
.style__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
.style__block { border: 1px solid var(--line-light); padding: 32px; display: grid; gap: 20px; align-content: start; }
.style__block--wide { grid-column: 1 / -1; }
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.swatch { background: var(--c); color: #fff; padding: 40px 12px 10px; font-size: 12px; line-height: 16px; border: 1px solid var(--line-light); }
.swatch--light { color: var(--ink); }
.swatch b { display: block; font-weight: 600; font-size: 13px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.row--dark { background: var(--black); padding: 24px; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card { display: grid; gap: 12px; align-content: start; justify-items: start; padding: 20px 20px 24px; background: var(--grey); border: 1px solid transparent; transition: border-color .3s; }
.card:hover { border-color: var(--orange); }
.card__art { width: 100%; aspect-ratio: 16 / 10; border: 1px dashed rgba(13, 13, 13, .3); display: grid; place-items: center; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.card--dark { background: var(--navy); color: var(--white); }
.card--dark .body { color: var(--on-dark-muted); }
.card--dark .card__art { border-color: rgba(255, 255, 255, .3); color: var(--on-dark-muted); }
.type-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line-light); }
.type-row small { font-size: 12px; line-height: 16px; color: var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .quote__metric b { font-size: 36px; line-height: 40px; }
}
@media (max-width: 900px) {
  .nav__links { display: none; }
  .top--screen { min-height: 0; }
  .hero__inner { grid-template-columns: minmax(0, 1fr); padding-top: 64px; padding-bottom: 24px; gap: 32px; }
  .hero__figure { max-width: 520px; }
  .fx-rays { height: 720px; }
  .style__grid { grid-template-columns: minmax(0, 1fr); }
  .section__head { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .dcards { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 48px; }
  .proc__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; margin-top: 56px; }
  .proc__steps::before, .proc__line { display: none; }
  .proc__step { padding-top: 28px; }
  .proc__step .h4 { min-height: 0; }
  .ladder { grid-template-columns: minmax(0, 1fr); padding: 28px 24px; margin-top: 56px; }
  .ladder__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 8px; }
  .tools__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .about__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .about__portrait { max-width: 360px; }
  .who__grid { grid-template-columns: minmax(0, 1fr); margin-top: 48px; }
  .cta { padding: 64px 0 56px; }
  .cta__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
  /* industries: the list becomes a row of tabs you swipe sideways */
  .ind__grid { grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
  .ind__list { flex-direction: row; max-height: none; overflow-x: auto; overflow-y: hidden; border-top: 0; padding-bottom: 0; gap: 8px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); padding-right: 40px; }
  .ind__tab { width: auto; white-space: nowrap; padding: 10px 14px; font-size: 15px; line-height: 22px; border: 1px solid var(--line-dark); gap: 10px; }
  .ind__tab[aria-selected="true"] { padding-left: 14px; border-color: var(--orange-light); }
  .ind__tab::before { display: none; }
  .ind__side { order: 0; }
  .ind__note { order: 3; }
  .ind__panel { min-height: 0; padding: 28px 24px 8px; }
  .swatches { grid-template-columns: repeat(2, 1fr); }
  :root { --section: 80px; }
}
@media (max-width: 640px) {
  :root { --gutter: 20px; }
  .hero__inner { padding-top: 48px; }
  .dept__label { font-size: 11px; }
  .bubble { width: 86%; padding: 12px 14px 13px; }
  .bubble__text { font-size: 14px; line-height: 20px; }
  .bubble--problem { left: 10%; top: 5%; }
  .bubble--reply { top: 60%; }
  .proof__inner { flex-direction: column; align-items: stretch; gap: 18px; }
  .quote__metric { border-color: rgba(255, 255, 255, .25); }
  .quote { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; }
  .quote__photo { width: 48px; height: 48px; margin-top: 2px; }
  .quote__main { grid-template-columns: minmax(0, 1fr); }
  .quote__logo { grid-column: 1; grid-row: 3; justify-self: start; margin-top: 12px; }
  .quote__main { margin-right: 0; }
  .quote__metric { text-align: left; align-items: baseline; }
  .quote__metric b { font-size: 36px; line-height: 40px; }
  .quote__metric span { margin-top: 0; max-width: none; }
  .quote__metric { grid-column: 1 / -1; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--line-light); display: flex; flex-direction: row; justify-content: flex-start; align-items: baseline; gap: 12px; }
  .proof__controls { justify-content: flex-start; align-self: stretch; margin-top: 0; }
  .quote__metric b { margin-top: 0; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .dcards { grid-template-columns: minmax(0, 1fr); }
  .cta__story { padding: 28px 22px; }
  .who__body { padding: 24px 22px 28px; }
  .who__rows div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .who__body .h4 { min-height: 0; }
  .sched { grid-template-columns: minmax(0, 1fr); }
  .book__foot { grid-template-columns: auto minmax(0, 1fr); }
  .book__progress { grid-column: 2; }
  .summary div { grid-template-columns: 96px minmax(0, 1fr); }
  .opt { font-size: 16px; padding: 14px; }
  .cta__metrics dt { font-size: 26px; line-height: 32px; }
  .proc__steps { grid-template-columns: minmax(0, 1fr); }
  .ladder__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ind__row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ind__row--head span:last-child { display: none; }
  .ind__panel { padding: 24px 20px 4px; }
  .type-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}
/* short laptop screens: tighten the first screen so hero and testimonials still fit together */
@media (min-width: 901px) and (max-height: 740px) {
  .hero__inner { padding-top: 16px; padding-bottom: 8px; }
  .hero__copy { gap: 18px; }
  .proof__inner { padding-top: 20px; padding-bottom: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .orbit__people, .orbit.is-thinking .orbit__spark, .dept.is-alert .dept__dot, .bubble__typing i { animation: none; }
  .bubble, .proof__track, .orbit__link, .btn, .btn::before, .hero__ask span { transition: none; }
  .ind__content, .cta__icon, .step, .step__icon { animation: none; }
  [data-diag] { -webkit-mask: none; mask: none; }
  .proc__line, .proc__step, .proc__node, .ladder__bar { transition: none; }
}

/* ---------- touch and small-screen corrections (kept last so they win) ---------- */
@media (max-width: 900px) {
  .tools__cats { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; margin-top: 24px; font-size: 15px; }
}
@media (max-width: 480px) { .tools__cats { grid-template-columns: minmax(0, 1fr); } }
/* use cases, stacked rows: the column heads go, and each part carries its own label */
@media (max-width: 640px) {
  .ind__row--head { display: none; }
  .ind__problem::before, .ind__fix::before { display: block; margin-bottom: 6px; font-family: var(--sans); font-size: 11px; line-height: 16px; letter-spacing: .6px; text-transform: uppercase; font-weight: 600; }
  .ind__problem::before { content: "✕  Common problem"; color: #F0556A; }
  .ind__fix::before { content: "✓  Our solution"; color: #3ECF8E; }
  .ind__rows .ind__row:first-of-type + .ind__row { border-top: 0; }
  /* the same small gap under both labels, and one even gap between the problem and its solution */
  .ind__fix { gap: 0; }
  .ind__row { gap: 16px; padding: 20px 0; }
}
/* on touch screens a tapped element keeps its hover look; drop the hover-only effects there */
@media (hover: none) {
  .fix__card:hover { outline-color: transparent; }
  .fix__card:hover .fx-halo { transform: none; opacity: .14; }
  .tools__cats li:hover:not(.is-on) { color: inherit; padding-left: 22px; }
  .dcard:hover { border-color: transparent; }
}

/* ---------- Legal pages (privacy.html, terms.html): a plain reading column ---------- */
.legal-page { background: var(--white); color: var(--ink); }
.legal__bar { height: var(--nav-h); padding: 9px var(--gutter); display: flex; align-items: center; justify-content: space-between; background: var(--black); overflow: hidden; }
.legal__back { font-size: 14px; line-height: 20px; color: var(--on-dark-muted); display: inline-flex; gap: 8px; transition: color .2s; }
.legal__back:hover { color: var(--white); }
.legal { padding: 72px var(--gutter) 96px; }
.legal__doc { max-width: 720px; margin: 0 auto; }
.legal__doc .eyebrow { color: var(--orange); margin-bottom: 16px; }
.legal__date { margin-top: 16px; font-size: 14px; line-height: 20px; color: var(--muted); }
.legal__doc h2 { margin: 48px 0 12px; font-family: var(--serif); font-weight: 300; font-size: 28px; line-height: 1.15; letter-spacing: -.02em; }
.legal__doc p + p { margin-top: 14px; }
.legal__doc h2 + p, .legal__doc p { font-size: 17px; line-height: 27px; color: #2b2b2b; }
.legal__doc a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--orange); }
.legal__doc a:hover { color: var(--orange); }
.legal__foot { border-top: 1px solid var(--line-light); padding: 24px var(--gutter) 32px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; line-height: 20px; color: var(--muted); }
.legal__foot a { margin-left: 24px; }
.legal__foot a:hover { color: var(--ink); }
@media (max-width: 640px) { .legal { padding: 48px var(--gutter) 64px; } .legal__doc h2 { font-size: 24px; margin-top: 36px; } .legal__foot a { margin: 0 24px 0 0; } }

/* text for search engines and screen readers that has a visual equivalent on the page (for example the tool logos) */
.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; }

/* navigation button: a white outline with white text */
.nav .btn--line-dark { border-color: var(--white); }

/* ---------- phones and touch screens: buttons are simply tappable, with no hover animation ---------- */
@media (hover: none), (max-width: 900px) {
  .btn, .btn::before { transition: none !important; }
  .btn--black::before, .btn--white::before { display: none; }
  .btn--white:hover { border-color: var(--white); color: var(--ink); }
  .btn--black:hover { border-color: var(--ink); color: var(--white); }
  .btn--orange:hover { background: var(--orange); border-color: var(--orange); }
  .btn--line:hover { background: transparent; color: var(--ink); }
  .btn--line-dark:hover { background: transparent; color: var(--white); }
}
@media (max-width: 900px) {
  /* tools: the tool's name gets its own space under the logo field so it never covers the logos */
  .hive { overflow: visible; margin-bottom: 40px; }
  .hive__label { left: 0; bottom: -34px; }
}
@media (max-width: 640px) {
  /* testimonials: the figure and its caption sit on one centre line */
  .quote__metric { align-items: center; }
}

/* use cases: the call to action follows straight on from the end of the audience introduction */
.ind__cta { display: block; width: fit-content; margin: 18px 0 0; white-space: nowrap; font-family: var(--sans); font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: 0; color: var(--orange);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.ind__cta span { display: inline-block; transition: transform .25s var(--ease-btn); }
.ind__cta:hover span { transform: translateX(4px); }
.ind__cta:focus-visible { outline: 2px solid var(--orange-light); outline-offset: 4px; }
/* wide screens: the list of categories is exactly as tall as the card beside it, and fades only at the card's bottom edge */
@media (min-width: 901px) {
  .ind__side { position: relative; }
  .ind__list { position: absolute; inset: 0; max-height: none; }
}
/* our process: caption and headline centred, with no paragraph beside them */
.proc .section__head { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }

/* section captions use the same semi-bold as the PHASE 01-04 labels */
.section__head .eyebrow, .about__copy .eyebrow, .tools__copy .eyebrow, .cta__story .eyebrow { font-weight: 600; }
/* a phrase that stays on one line while there is room for it */
@media (min-width: 701px) { .keep { white-space: nowrap; } }
/* line breaks: paragraphs never leave a lone last word; short two-line items split evenly */
main p, footer p, main blockquote { text-wrap: pretty; }
main li, .fix__q, .ind__problem, .ind__fix p { text-wrap: balance; }

/* ---------- Scroll-in animations (only under html.anim, set in the page head) ----------
   Text: a soft left-to-right wipe. Blocks and cards: a short fade and rise, one after another.
   The script removes the attribute when an animation ends, so nothing is left masked or transformed. */
@keyframes wipe-in { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.anim [data-wipe] { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 33.3%, transparent 66.6%); mask-image: linear-gradient(90deg, #000 0, #000 33.3%, transparent 66.6%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; mask-clip: no-clip; }
.anim [data-wipe].is-in { animation: wipe-in .9s linear var(--d, 0s) both; }
.anim [data-rise] { opacity: 0; }
.anim [data-rise].is-in { animation: rise-in .6s cubic-bezier(.22, .61, .36, 1) var(--d, 0s) both; }
.quote__metric b { font-variant-numeric: tabular-nums; }
/* the solution cards' grey grid lines appear only once every card has landed */
/* no grid background: every card carries its own grey border. Each card draws its right and bottom edge;
   the first row adds a top edge and the first column a left edge, so shared edges are drawn once, not doubled. */
.fix__grid { border: 0; padding: 0; gap: 0; background: none; }
.fix__card { border: solid var(--line-light); border-width: 0 1px 1px 0; outline-offset: -1px; }
@media (min-width: 901px) { .fix__card:nth-child(-n+4) { border-top-width: 1px; } .fix__card:nth-child(4n+1) { border-left-width: 1px; } }
@media (max-width: 900px) { .fix__card:nth-child(-n+2) { border-top-width: 1px; } .fix__card:nth-child(2n+1) { border-left-width: 1px; } }
/* closing section: the three points under the button arrive one after another, each with its dot */
.anim .cta__points li { opacity: 0; }
.anim .cta__points.is-in li { animation: rise-in .6s cubic-bezier(.22, .61, .36, 1) both; }
.anim .cta__points.is-in li:nth-child(2) { animation-delay: .3s; }
.anim .cta__points.is-in li:nth-child(3) { animation-delay: .6s; }
.cta__metrics dt { font-variant-numeric: tabular-nums; }
/* five menu links: each stays on one line, and they sit a little closer on narrow laptop and tablet widths */
.nav__links a { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1080px) { .nav__links { gap: 18px; } }
/* narrow laptops and landscape tablets: some service titles need two lines there, so every title reserves two and the descriptions stay level */
@media (min-width: 901px) and (max-width: 1240px) { .dcard .title { min-height: 52.8px; } }
.cta__story blockquote { text-wrap: balance; }
/* touch screens: footer links get a taller tap area without changing how far apart they look */
@media (max-width: 900px) { .footer__col { gap: 0; } .footer__col a { padding: 6px 0; } .footer__col .eyebrow { margin-bottom: 4px; } }

/* one testimonial: no arrows or counter, and the quote uses the full width */
.proof--single .proof__controls { display: none; }
/* In-app browsers (Telegram, Instagram and others on iPhone) show the page under their own see-through bars.
   These two black strips sit just outside the top and bottom of the screen, so scrolling content never shows
   through above the menu and no white shows below the page. They are invisible in ordinary browsers. */
body:not(.legal-page)::before, body:not(.legal-page)::after { content: ""; position: fixed; left: 0; right: 0; height: 240px; background: #000; z-index: 60; pointer-events: none; }
body:not(.legal-page)::before { top: -240px; }
body:not(.legal-page)::after { bottom: -240px; }

/* anything marked hidden stays hidden, whatever layout its class would give it */
[hidden] { display: none !important; }
/* testimonial band hidden: the hero has the whole first screen, so its artwork may use the room the band took */
.top:has(.proof[hidden]) { --peek: 32px; }