/* ==========================================================================
   Social Spark Digital Solutions
   main.css — structure, components, motion

   Cascade order: base → layout → components → page blocks → motion → media
   Selectors are kept flat (single class) so nothing silently overrides
   spacing further down the file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 1.5rem);
}

body {
  margin: 0;
  background-color: var(--page);
  background-image: var(--grain);
  background-repeat: repeat;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-0);
  font-weight: 400;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
canvas { display: block; max-width: 100%; }

img { height: auto; }

a { color: inherit; text-decoration: none; }

button,
input,
textarea,
select { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection { background: var(--magenta); color: #fff; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

p { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  top: 0; left: 0;
  z-index: 9999;
  padding: 0.75rem 1.25rem;
  background: var(--magenta);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 0 0 var(--r-sm) 0;
  transform: translateY(-120%);
}

.skip:focus { transform: translateY(0); }

/* --------------------------------------------------------------------------
   2. Layout primitives
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--pad, var(--s-7));
}

.section--tight { --pad: var(--s-6); }
.section--loose { --pad: var(--s-8); }

/* Alternating bands. Tinted rather than darkened — the page never drops
   into shade, it just changes hue. */
.section--tint { background: var(--tint); }
.section--warm { background: var(--tint-warm); }
.section--paper { background: var(--paper); }

/* Soft colour wash bled into the corner of a section. Decorative only. */
.section--wash::before,
.section--wash::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(34rem, 70vw);
  aspect-ratio: 1;
  border-radius: var(--r-pill);
  filter: blur(70px);
  opacity: 0.42;
  pointer-events: none;
}

.section--wash::before {
  top: -14%; right: -8%;
  background: radial-gradient(circle, var(--magenta), transparent 68%);
}

.section--wash::after {
  bottom: -18%; left: -10%;
  background: radial-gradient(circle, var(--cyan), transparent 68%);
}

.section--wash > .shell { position: relative; z-index: 1; }

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

/* --------------------------------------------------------------------------
   3. Typography components
   -------------------------------------------------------------------------- */

/* Pill-shaped section label. Picks up whichever brand colour the block
   sets via --chan. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.9rem 0.4rem 0.65rem;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--chan, var(--magenta)) 12%, var(--paper));
  color: var(--chan-ink, var(--magenta-ink));
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  border-radius: var(--r-pill);
  background: var(--chan, var(--magenta));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chan, var(--magenta)) 22%, transparent);
}

.eyebrow--violet { --chan: var(--violet); --chan-ink: var(--violet-ink); }
.eyebrow--cyan   { --chan: var(--cyan);   --chan-ink: var(--cyan-ink); }
.eyebrow--yellow { --chan: var(--yellow); --chan-ink: var(--yellow-ink); }
.eyebrow--orange { --chan: var(--orange); --chan-ink: var(--orange-ink); }
.eyebrow--mint   { --chan: var(--mint);   --chan-ink: var(--mint-ink); }

.display   { font-size: var(--t-4); font-weight: 800; }
.display-l { font-size: var(--t-5); font-weight: 900; letter-spacing: -0.04em; }
.h2        { font-size: var(--t-3); }
.h3        { font-size: var(--t-2); font-weight: 800; letter-spacing: -0.022em; }
.h4        { font-size: var(--t-1); font-weight: 700; letter-spacing: -0.015em; }

/* Gradient-filled words inside a heading. The fallback colour matters:
   background-clip:text is well supported, but a failure here would leave
   the headline invisible. */
.grad {
  color: var(--magenta-ink);
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.grad--warm { background-image: var(--grad-warm); }
.grad--cool { background-image: var(--grad-cool); }
.grad--sun  { background-image: var(--grad-sun); }

/* Hand-drawn-feeling underline swash behind a word.
   isolation:isolate is load-bearing: the swash sits at z-index -1 so the
   word paints on top of it, and without a stacking context here that -1
   would drop it behind the section's own background instead. */
.swish {
  position: relative;
  isolation: isolate;
  white-space: nowrap;
}

.swish::after {
  content: "";
  position: absolute;
  left: -0.06em; right: -0.06em;
  bottom: 0.02em;
  height: 0.32em;
  z-index: -1;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--yellow) 60%, transparent);
  transform: rotate(-1.1deg);
}

.lede {
  font-size: var(--t-1);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 52ch;
}

.body { max-width: var(--measure); color: var(--text-dim); }

.body + .body { margin-top: var(--s-3); }

.body strong { color: var(--text); font-weight: 600; }

.mono {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.center { text-align: center; }
.center .lede { margin-inline: auto; }
.center .eyebrow { margin-inline: auto; }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.75rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--grad-brand);
  background-size: 180% 100%;
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: var(--sh-glow);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
              background-position 0.6s var(--ease);
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px);
  background-position: 100% 0;
  box-shadow: 0 22px 46px -16px rgba(255, 45, 141, 0.55);
}

.btn:active { transform: translateY(0); }

/* Outlined secondary. Same pill, no fill. */
.btn--ghost {
  background: var(--paper);
  color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--line), var(--sh-sm);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--violet) 45%, transparent), var(--sh-md);
  color: var(--violet-ink);
}

/* For use on the deep-ground CTA and footer. */
.btn--light {
  background: #fff;
  color: var(--violet-ink);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.5);
}

.btn--light:hover,
.btn--light:focus-visible {
  box-shadow: 0 22px 46px -16px rgba(0, 0, 0, 0.6);
  color: var(--magenta-ink);
}

.btn--sm { padding: 0.7rem 1.25rem; font-size: var(--t--1); }
.btn--lg { padding: 1.15rem 2.25rem; font-size: var(--t-0); }

.btn__arrow { transition: transform 0.35s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Inline text link with a gradient underline that swipes on hover. */
.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  font-size: var(--t--1);
  color: var(--violet-ink);
  padding-bottom: 3px;
}

.link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  border-radius: var(--r-pill);
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}

.link:hover::after,
.link:focus-visible::after { transform: scaleX(1); }

.link .btn__arrow { transition: transform 0.35s var(--ease); }
.link:hover .btn__arrow { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   5. Header / navigation
   -------------------------------------------------------------------------- */

.head {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--head-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--page) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease),
              background 0.3s var(--ease);
}

.head--stuck {
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px -22px rgba(58, 24, 112, 0.55);
}

.head__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  flex: none;
}

/* Mark sized up from the previous build, and the caption below it is now
   set in a colour that actually reads. Both were noted as feedback. */
.brand__mark {
  width: 3rem;
  height: 3rem;
  flex: none;
  color: var(--text);
  /* The mark is two-tone: currentColor draws the rocket and window body,
     --mark-bg knocks out the screen and the rocket's separating halo. It
     has to match whatever the mark is sitting on. */
  --mark-bg: var(--page);
  transition: transform 0.6s var(--ease);
}

.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.06); }

.brand__name {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand__name b {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--text);
}

.brand__name span {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--violet-ink);
  margin-top: 5px;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 2vw, 1.9rem);
}

.nav__link {
  position: relative;
  font-size: var(--t--1);
  font-weight: 600;
  color: var(--text-dim);
  padding-block: 0.4rem;
  transition: color 0.25s var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  border-radius: var(--r-pill);
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease);
}

.nav__link:hover { color: var(--text); }

.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }

.nav__link[aria-current="page"] { color: var(--violet-ink); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.burger {
  display: none;
  width: 2.9rem; height: 2.9rem;
  place-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-sm);
  cursor: pointer;
}

.burger span,
.burger span::before,
.burger span::after {
  display: block;
  width: 18px; height: 2px;
  border-radius: var(--r-pill);
  background: var(--text);
  transition: transform 0.35s var(--ease), opacity 0.2s linear;
}

.burger span { position: relative; }

.burger span::before,
.burger span::after {
  content: "";
  position: absolute;
  left: 0;
}

.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }

.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(88vh, 54rem);
  padding-block: var(--s-6) var(--s-6);
  overflow: hidden;
}

/* Three soft colour fields drifting behind the headline. This is what
   replaces the old black ground — light, but never flat. */
.hero__aura {
  position: absolute;
  inset: -20% -10%;
  z-index: 0;
  pointer-events: none;
}

.hero__aura i {
  position: absolute;
  display: block;
  border-radius: var(--r-pill);
  filter: blur(80px);
  opacity: 0.55;
  animation: float 18s var(--ease-io) infinite alternate;
}

.hero__aura i:nth-child(1) {
  width: 38rem; height: 38rem;
  top: 2%; right: 2%;
  background: radial-gradient(circle, var(--magenta), transparent 66%);
}

.hero__aura i:nth-child(2) {
  width: 32rem; height: 32rem;
  top: 34%; right: 22%;
  background: radial-gradient(circle, var(--violet), transparent 66%);
  animation-duration: 23s;
  animation-delay: -6s;
}

.hero__aura i:nth-child(3) {
  width: 30rem; height: 30rem;
  bottom: -6%; left: -6%;
  background: radial-gradient(circle, var(--cyan), transparent 66%);
  animation-duration: 26s;
  animation-delay: -12s;
  opacity: 0.4;
}

.hero__aura i:nth-child(4) {
  width: 22rem; height: 22rem;
  top: 8%; left: 26%;
  background: radial-gradient(circle, var(--yellow), transparent 66%);
  animation-duration: 21s;
  animation-delay: -3s;
  opacity: 0.34;
}

/* The ring assembly: a sized, positioned box holding the animated canvas
   with the brand lockup centred inside it. Both children are inset:0 on
   this box, so the lockup lands on the canvas's own centre — which is
   where spark.js draws the ring around. */
.hero__ring {
  position: absolute;
  top: 46%;
  right: clamp(-8rem, -3vw, 0rem);
  width: min(38rem, 56vw);
  aspect-ratio: 1;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
  /* Makes cqw below resolve against the ring's own width, so the lockup
     holds its proportion to the ring instead of to the viewport. */
  container-type: inline-size;
}

.hero__ring-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.9;
}

/* Sized in cqw — percentages of the ring box — so the lockup keeps its
   proportion to the ring at every width. The name is set two lines deep so
   it can run larger than a single line would allow inside a circle.

   Sizes are bounded by the ring's CLEAR inner radius, not the ~78% of the
   box that the arcs' centreline sits on. spark.js draws at R = 0.39 × box,
   and the innermost channel (yellow, radius 0.955, width 0.042) puts its
   inner edge at 0.934R — about 36% of the box, i.e. a clear diameter of
   ~73%. Sizing against the 78% centreline is what previously pushed the
   tagline and the second name line out over the arcs. Corners are what
   bind here, not widths: check sqrt(halfWidth² + dyFromCentre²) < 0.364 ×
   box for the topmost and bottommost elements before enlarging any of
   these. */
.hero__ring-brand {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.5cqw;
  text-align: center;
}

/* Soft light backing so the name reads cleanly over the drifting aura
   blobs behind it. */
.hero__ring-brand::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 82%; height: 82%;
  transform: translate(-50%, -50%);
  border-radius: var(--r-pill);
  background: radial-gradient(circle, color-mix(in srgb, var(--page) 92%, transparent) 42%, transparent 70%);
  z-index: -1;
}

.hero__ring-mark {
  width: 18cqw;
  height: auto;
  color: var(--text);
  --mark-bg: var(--page);
}

.hero__ring-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 13.5cqw;
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: var(--text);
}

/* Second word picks up the brand gradient, echoing the headline. */
.hero__ring-name em {
  display: block;
  font-style: normal;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero__ring-brand span {
  font-family: var(--font-mono);
  font-size: 2.7cqw;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--violet-ink);
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.hero__title {
  font-size: var(--t-5);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.0;
  margin-block: var(--s-3) var(--s-4);
  max-width: 16ch;
}

.hero__lede {
  font-size: var(--t-1);
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 54ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin-top: var(--s-5);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-6);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  max-width: 46rem;
}

.hero__meta li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--t--1);
  font-weight: 500;
  color: var(--text-dim);
}

.hero__meta li::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: var(--r-pill);
  background: var(--dot, var(--magenta));
}

/* --------------------------------------------------------------------------
   7. Intro strip — the one-line promise under the hero
   -------------------------------------------------------------------------- */

.strip {
  position: relative;
  background: var(--grad-brand);
  color: #fff;
  padding-block: var(--s-5);
  overflow: hidden;
}

.strip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grain);
  opacity: 0.5;
  pointer-events: none;
}

.strip__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--s-3) var(--s-5);
  align-items: center;
}

.strip__key {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--t-2);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.strip__body {
  font-size: var(--t-0);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.92);
}

/* --------------------------------------------------------------------------
   8. Marquee — the service list, running as a ticker
   -------------------------------------------------------------------------- */

.marquee {
  border-block: 1px solid var(--line);
  padding-block: 1rem;
  overflow: hidden;
  background: var(--paper);
}

.marquee__track {
  display: flex;
  width: max-content;
  gap: var(--s-4);
  animation: slide 46s linear infinite;
}

.marquee__track span {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--text-dim);
  white-space: nowrap;
}

.marquee__track span::after {
  content: "";
  width: 8px; height: 8px;
  border-radius: var(--r-pill);
  background: var(--dot, var(--magenta));
}

@keyframes slide {
  to { transform: translateX(calc(-50% - var(--s-2))); }
}

/* --------------------------------------------------------------------------
   9. Section headers
   -------------------------------------------------------------------------- */

.head-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: var(--s-3) var(--s-5);
  align-items: end;
  margin-bottom: var(--s-5);
}

.head-block__title { margin-top: var(--s-3); }

.head-block__aside {
  color: var(--text-dim);
  max-width: 46ch;
  padding-bottom: 0.4rem;
}

/* Centred variant, for full-width bands. */
.head-block--center {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

.head-block--center .head-block__aside { max-width: 56ch; }

/* --------------------------------------------------------------------------
   10. Service cards
   -------------------------------------------------------------------------- */

.grid-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--s-3);
}

/* The shell caps this grid at three columns, so an odd service count leaves
   one card alone on the final row. Centring it reads as deliberate; flush
   left reads as a card that fell off the row above. */
@media (min-width: 62rem) {
  .grid-services > :last-child:nth-child(3n + 1) { grid-column: 2; }
}

.svc {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-4) var(--s-4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
              border-color 0.4s var(--ease);
}

/* Colour bar across the top, revealed on hover. */
.svc::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 4px;
  background: var(--chan, var(--magenta));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}

/* Colour wash rising from the base. */
.svc::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(circle at 50% 118%, color-mix(in srgb, var(--chan) 20%, transparent), transparent 62%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}

.svc > * { position: relative; z-index: 1; }

.svc:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-lg);
  border-color: color-mix(in srgb, var(--chan) 35%, transparent);
}

.svc:hover::before { transform: scaleX(1); }
.svc:hover::after  { opacity: 1; }

/* Full-bleed illustration across the top of the card. Negative margins pull
   it out of the card's padding; the card's own overflow:hidden clips it to
   the rounded corners. */
.svc__art {
  width: calc(100% + var(--s-4) * 2);
  margin: calc(var(--s-4) * -1) calc(var(--s-4) * -1) var(--s-3);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.svc:hover .svc__art { transform: scale(1.04); }

.svc__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-2);
  letter-spacing: -0.024em;
  line-height: 1.08;
}

.svc__body {
  color: var(--text-dim);
  font-size: var(--t--1);
  line-height: 1.65;
}

.svc__list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: auto;
  padding-top: var(--s-3);
}

.svc__list li {
  position: relative;
  padding-left: 1.35rem;
  font-size: var(--t--1);
  color: var(--text-dim);
}

/* Tick mark, drawn in CSS so it inherits the channel colour. */
.svc__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.52em;
  width: 0.42rem; height: 0.72rem;
  border: solid var(--chan, var(--magenta));
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

/* --------------------------------------------------------------------------
   11. Feature / value cards
   -------------------------------------------------------------------------- */

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--s-5);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--s-3);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--s-3);
}

.value {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.value:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }

/* Plain variant with no card chrome, for use inside tinted bands. */
.value--bare {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.value--bare:hover { transform: none; box-shadow: none; }

.value__icon {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--chan, var(--violet)) 14%, var(--paper));
  color: var(--chan, var(--violet));
}

.value__icon svg { width: 1.4rem; height: 1.4rem; }

.value__key {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-1);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
}

.value__body {
  color: var(--text-dim);
  font-size: var(--t--1);
  line-height: 1.68;
}

/* --------------------------------------------------------------------------
   11b. Tracks — the two halves of the business, stated side by side

   The firm does marketing and it builds software. Presented as two peer
   cards rather than one list with an odd item on the end, so neither side
   reads as an afterthought bolted onto the other.
   -------------------------------------------------------------------------- */

.track {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5) var(--s-4) var(--s-4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
              border-color 0.4s var(--ease);
}

/* Colour bar along the top edge — the only thing distinguishing the two
   cards at a glance, which is the point. */
.track::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: var(--chan-grad, var(--grad-brand));
}

.track:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: color-mix(in srgb, var(--chan, var(--magenta)) 35%, var(--line));
}

.track__num {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chan-ink, var(--violet-ink));
}

.track__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--t-2);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--text);
}

.track__body {
  color: var(--text-dim);
  font-size: var(--t-0);
  line-height: 1.68;
}

/* Capability chips. Deliberately terse — the detail lives on the service
   pages, this is only meant to establish scope. */
.track__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-top: auto;
  padding-top: var(--s-2);
  list-style: none;
}

.track__tags li {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.04em;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  color: var(--chan-ink, var(--violet-ink));
  background: color-mix(in srgb, var(--chan, var(--violet)) 10%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--chan, var(--violet)) 22%, transparent);
}

/* --------------------------------------------------------------------------
   12. Numbered approach steps
   -------------------------------------------------------------------------- */

.steps { display: grid; gap: var(--s-3); }

.step {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: var(--s-2) var(--s-4);
  align-items: start;
  padding: var(--s-4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.step:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }

.step__no {
  display: grid;
  place-items: center;
  width: 3.25rem; height: 3.25rem;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--chan, var(--magenta)) 14%, var(--paper));
  color: var(--chan-ink, var(--magenta-ink));
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--t-1);
  letter-spacing: -0.02em;
}

.step__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-2);
  letter-spacing: -0.024em;
  line-height: 1.05;
}

.step__meta {
  display: inline-block;
  margin-top: 0.45rem;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.step__body {
  grid-column: 2;
  color: var(--text-dim);
  font-size: var(--t--1);
  line-height: 1.68;
}

/* Row layout: number, title, body across three columns on wide screens. */
.steps--row .step { grid-template-columns: 4rem minmax(0, 0.8fr) minmax(0, 1.4fr); }
.steps--row .step__body { grid-column: 3; }

/* --------------------------------------------------------------------------
   13. Client / portfolio cards
   -------------------------------------------------------------------------- */

.clients {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--s-3);
}

.client {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: var(--s-4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
              border-color 0.4s var(--ease);
}

.client:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-lg);
  border-color: color-mix(in srgb, var(--chan) 40%, transparent);
}

/* Illustration plate, standing in until real client logos exist.
   object-fit:contain over the channel gradient means a real logo — square,
   wide, or with a transparent background — drops straight in without being
   cropped or stretched. The placeholder art is already 16:9, so it fills. */
.client__art {
  width: calc(100% + var(--s-4) * 2);
  margin: calc(var(--s-4) * -1) calc(var(--s-4) * -1) var(--s-3);
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--chan-grad, var(--grad-brand));
  transition: transform 0.6s var(--ease);
}

.client:hover .client__art { transform: scale(1.04); }

.client__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-1);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-top: 0.35rem;
}

.client__tag {
  align-self: flex-start;
  padding: 0.25rem 0.7rem;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--chan, var(--magenta)) 12%, var(--paper));
  color: var(--chan-ink, var(--magenta-ink));
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.client__body {
  color: var(--text-dim);
  font-size: var(--t--1);
  line-height: 1.68;
}

/* --------------------------------------------------------------------------
   14. Testimonials
   -------------------------------------------------------------------------- */

.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--s-3);
}

.quote {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-4) var(--s-4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

/* Oversized opening quote mark, set in the channel colour. */
.quote::before {
  content: "\201C";
  position: absolute;
  top: 0.15em; left: 0.5rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 5rem;
  line-height: 1;
  color: color-mix(in srgb, var(--chan, var(--magenta)) 22%, transparent);
  pointer-events: none;
}

.quote__text {
  position: relative;
  font-size: var(--t-1);
  font-weight: 500;
  line-height: 1.5;
  color: var(--text);
}

.quote__by {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: auto;
  padding-top: var(--s-2);
  border-top: 1px solid var(--line);
  font-size: var(--t--1);
  color: var(--text-dim);
}

.quote__by i {
  flex: none;
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--r-pill);
  background: var(--chan-grad, var(--grad-brand));
}

/* --------------------------------------------------------------------------
   15. Statement / pull block
   -------------------------------------------------------------------------- */

.statement {
  position: relative;
  padding-block: var(--s-7);
  background: var(--grad-deep);
  color: var(--on-dark);
  overflow: hidden;
}

/* Halftone dot field, echoing the four-colour print idea. */
.statement::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.9) 1px, transparent 1px);
  background-size: 15px 15px;
  opacity: 0.08;
  mask-image: linear-gradient(120deg, transparent 18%, #000 55%, transparent 90%);
  pointer-events: none;
}

.statement__quote {
  position: relative;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--t-3);
  line-height: 1.1;
  letter-spacing: -0.03em;
  max-width: 22ch;
}

.statement__by {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
}

/* --------------------------------------------------------------------------
   16. Service detail sections (services page)
   -------------------------------------------------------------------------- */

.detail-svc {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--s-4) var(--s-6);
  align-items: start;
  padding: var(--s-5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
}

.detail-svc__head { display: flex; flex-direction: column; gap: var(--s-3); }

.detail-svc__art {
  width: 100%;
  max-width: 27rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
}

.detail-svc__title {
  font-size: var(--t-3);
  line-height: 1.05;
}

.detail-svc__body {
  color: var(--text-dim);
  line-height: 1.7;
  max-width: 46ch;
}

/* "Includes:" panel. */
.includes {
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--chan, var(--magenta)) 7%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--chan, var(--magenta)) 18%, transparent);
}

.includes__key {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chan-ink, var(--magenta-ink));
  margin-bottom: var(--s-2);
}

.includes ul { display: flex; flex-direction: column; gap: 0.6rem; }

.includes li {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--t--1);
  color: var(--text-dim);
}

.includes li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.15em;
  width: 1.05rem; height: 1.05rem;
  border-radius: var(--r-pill);
  background: var(--chan, var(--magenta));
  opacity: 0.18;
}

.includes li::after {
  content: "";
  position: absolute;
  left: 0.36rem; top: 0.36em;
  width: 0.3rem; height: 0.55rem;
  border: solid var(--chan-ink, var(--magenta-ink));
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

/* --------------------------------------------------------------------------
   17. FAQ
   -------------------------------------------------------------------------- */

.faq { display: grid; gap: var(--s-2); }

.faq details {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  padding-inline: var(--s-4);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.faq details[open] {
  border-color: color-mix(in srgb, var(--violet) 35%, transparent);
  box-shadow: var(--sh-md);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-block: var(--s-3);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-1);
  letter-spacing: -0.015em;
  transition: color 0.3s var(--ease);
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary:hover { color: var(--violet-ink); }

.faq summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--violet) 12%, transparent);
  color: var(--violet-ink);
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 400;
  transition: transform 0.35s var(--ease);
}

.faq details[open] summary::after { transform: rotate(45deg); }

.faq p {
  padding-bottom: var(--s-3);
  color: var(--text-dim);
  font-size: var(--t--1);
  line-height: 1.72;
  max-width: var(--measure);
}

/* --------------------------------------------------------------------------
   18. Forms
   -------------------------------------------------------------------------- */

.form {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
}

.form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--s-3);
}

.field { display: flex; flex-direction: column; gap: 0.45rem; }

.field label,
.field legend {
  font-size: var(--t--1);
  font-weight: 600;
  color: var(--text);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--page);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--t--1);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease),
              box-shadow 0.3s var(--ease);
}

.field textarea { resize: vertical; min-height: 8.5rem; }

.field input::placeholder,
.field textarea::placeholder { color: var(--text-faint); }

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--violet);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--violet) 14%, transparent);
}

.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible { outline: none; }

/* Checkbox row of service interests. */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.chip { position: relative; }

.chip input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}

.chip span {
  display: block;
  padding: 0.55rem 1.05rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--page);
  font-size: var(--t--1);
  font-weight: 500;
  color: var(--text-dim);
  transition: all 0.3s var(--ease);
}

.chip:hover span { border-color: color-mix(in srgb, var(--violet) 40%, transparent); }

.chip input:checked + span {
  border-color: transparent;
  color: #fff;
  background: var(--grad-brand);
  box-shadow: var(--sh-sm);
}

.chip input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.form__note {
  font-size: var(--t--1);
  color: var(--text-faint);
  line-height: 1.6;
}

.form__status {
  padding: var(--s-3);
  border: 1.5px solid var(--violet);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--violet) 8%, transparent);
  font-size: var(--t--1);
  color: var(--text);
}

.form__status[hidden] { display: none; }

/* --------------------------------------------------------------------------
   19. Contact details
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
  gap: var(--s-5);
  align-items: start;
}

.details { display: flex; flex-direction: column; gap: var(--s-2); }

.detail {
  display: grid;
  grid-template-columns: 2.9rem minmax(0, 1fr);
  gap: 0 var(--s-3);
  align-items: center;
  padding: var(--s-3);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
}

.detail__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.9rem; height: 2.9rem;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--chan, var(--violet)) 14%, var(--paper));
  color: var(--chan, var(--violet));
}

.detail__icon svg { width: 1.3rem; height: 1.3rem; }

.detail dt {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.detail dd {
  margin: 0;
  font-size: var(--t-0);
  font-weight: 600;
  line-height: 1.35;
}

.detail dd a { transition: color 0.25s var(--ease); }
.detail dd a:hover { color: var(--violet-ink); }

/* --------------------------------------------------------------------------
   20. CTA band
   -------------------------------------------------------------------------- */

.cta {
  position: relative;
  padding-block: var(--s-7);
  background: var(--grad-deep);
  color: var(--on-dark);
  overflow: hidden;
}

/* Two colour fields bleeding in from the edges. */
.cta::before,
.cta::after {
  content: "";
  position: absolute;
  width: min(40rem, 90vw);
  aspect-ratio: 1;
  border-radius: var(--r-pill);
  filter: blur(90px);
  opacity: 0.5;
  pointer-events: none;
}

.cta::before {
  left: 50%; bottom: -55%;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--magenta), transparent 64%);
}

.cta::after {
  right: -12%; top: -40%;
  background: radial-gradient(circle, var(--violet), transparent 64%);
}

.cta__inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  text-align: center;
}

.cta__title { font-size: var(--t-4); max-width: 18ch; }

.cta .lede { color: var(--on-dark-dim); max-width: 52ch; }

.cta .eyebrow {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.cta__inner .btn { margin-top: var(--s-2); }

/* --------------------------------------------------------------------------
   21. Footer
   -------------------------------------------------------------------------- */

.foot {
  position: relative;
  background: var(--deep);
  color: var(--on-dark);
  padding-block: var(--s-6) var(--s-4);
}

.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--s-5) var(--s-4);
}

.foot .brand__mark { color: #fff; --mark-bg: var(--deep); }
.foot .brand__name b { color: #fff; }
.foot .brand__name span { color: var(--magenta); }

.foot__blurb {
  color: var(--on-dark-dim);
  font-size: var(--t--1);
  line-height: 1.7;
  max-width: 34ch;
  margin-top: var(--s-3);
}

.foot__social {
  display: flex;
  gap: 0.5rem;
  margin-top: var(--s-3);
}

.foot__social a {
  display: grid;
  place-items: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}

.foot__social a:hover {
  background: var(--grad-brand);
  transform: translateY(-2px);
}

.foot__social svg { width: 1.05rem; height: 1.05rem; }

.foot__col h4 {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--magenta);
  margin-bottom: var(--s-3);
}

.foot__col ul { display: flex; flex-direction: column; gap: 0.7rem; }

.foot__col a,
.foot__col li {
  font-size: var(--t--1);
  color: var(--on-dark-dim);
  transition: color 0.25s var(--ease);
}

.foot__col a:hover { color: #fff; }

.foot__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.foot__base p {
  font-size: var(--t--1);
  color: var(--on-dark-dim);
}

.foot__swatch { display: flex; gap: 4px; }

.foot__swatch i {
  width: 26px; height: 6px;
  display: block;
  border-radius: var(--r-pill);
}

/* --------------------------------------------------------------------------
   22. Motion
   -------------------------------------------------------------------------- */

@keyframes float {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-4%, 6%, 0) scale(1.12); }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

.enter { animation: rise 0.9s var(--ease) both; }
.enter-1 { animation-delay: 0.05s; }
.enter-2 { animation-delay: 0.15s; }
.enter-3 { animation-delay: 0.3s; }
.enter-4 { animation-delay: 0.45s; }
.enter-5 { animation-delay: 0.6s; }

/* Scroll reveals, driven by IntersectionObserver in motion.js */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.reveal.is-in { opacity: 1; transform: none; }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal-stagger.is-in > * { opacity: 1; transform: none; }

.reveal-stagger.is-in > *:nth-child(1) { transition-delay: 0.04s; }
.reveal-stagger.is-in > *:nth-child(2) { transition-delay: 0.11s; }
.reveal-stagger.is-in > *:nth-child(3) { transition-delay: 0.18s; }
.reveal-stagger.is-in > *:nth-child(4) { transition-delay: 0.25s; }
.reveal-stagger.is-in > *:nth-child(5) { transition-delay: 0.32s; }
.reveal-stagger.is-in > *:nth-child(6) { transition-delay: 0.39s; }

/* --------------------------------------------------------------------------
   23. Media queries
   -------------------------------------------------------------------------- */

/* The ring shrinks with the viewport faster than the hero copy does, so
   below this the lockup is stepped down and the ring pushed further right
   to keep clear of the lede. */
@media (max-width: 1150px) {
  .hero__ring { right: -6vw; }
  .hero__ring-mark { width: 17.5cqw; }
  .hero__ring-name { font-size: 13cqw; }
  .hero__ring-brand span { font-size: 2.7cqw; }
}

@media (max-width: 1000px) {
  .detail-svc { grid-template-columns: 1fr; }
  .steps--row .step { grid-template-columns: 4rem minmax(0, 1fr); }
  .steps--row .step__body { grid-column: 2; }

  /* Past here the ring is too small and too close to the copy to carry
     the name legibly — it goes back to being background texture. */
  .hero__ring-brand { display: none; }
}

@media (max-width: 900px) {
  .head-block { grid-template-columns: 1fr; align-items: start; }
  .strip__inner { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
}

@media (max-width: 820px) {
  .burger { display: grid; }

  .nav {
    position: fixed;
    inset: var(--head-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-3) var(--gutter) var(--s-4);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-md);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  }

  .nav.is-open { opacity: 1; visibility: visible; transform: none; }

  .nav__link {
    padding-block: var(--s-3);
    border-bottom: 1px solid var(--line-soft);
    font-size: 1rem;
  }

  .nav__link::after { display: none; }

  .nav .btn { margin-top: var(--s-3); justify-content: center; }

  .hero { min-height: auto; padding-block: var(--s-5) var(--s-6); }

  /* The ring slides mostly off the right edge here. The lockup is already
     hidden at 1000px; this just dims what's left. */
  .hero__ring { right: -32%; }
  .hero__ring-canvas { opacity: 0.5; }

  .hero__title { max-width: none; }
  .form { padding: var(--s-4) var(--s-3); }
}

@media (max-width: 520px) {
  .brand__mark { width: 2.6rem; height: 2.6rem; }
  .brand__name b { font-size: 1rem; }
  .brand__name span { font-size: 0.5625rem; letter-spacing: 0.14em; }
  .hero__meta { gap: var(--s-2); }
  .step { grid-template-columns: 1fr; }
  .step__body { grid-column: 1; }
  .detail-svc { padding: var(--s-4) var(--s-3); }
}

/* --------------------------------------------------------------------------
   24. Reduced motion — hold the design, drop the movement
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .reveal,
  .reveal-stagger > * { opacity: 1; transform: none; }

  .marquee__track,
  .hero__aura i { animation: none; }
}

@media print {
  body { background: #fff; color: #000; }
  .head, .hero__ring, .hero__aura, .marquee, .cta::before, .cta::after { display: none; }
}