/* ==========================================================================
   Untwisted AI — untwisted.com.au
   One motif: the three-strand thread. Tangled, then resolved.
   Palette rule: berry is the only brand colour used for text on cream.
   Gold, teal and coral are graphic-only on light grounds (they fail contrast
   as text). All three are text-safe on the ink ground.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Grounds */
  --bone:      #FDF8F1;
  --paper:     #FFFEFB;   /* raised cards, deliberately not pure white */
  --ink:       #1A1418;   /* dark sections + body text */
  --ink-soft:  #241C21;

  /* Text */
  --text:      #241C21;
  --muted:     #6A5F65;
  --on-dark:   #F4EEE6;
  --on-dark-muted: rgba(244,238,230,.62);

  /* The one accent */
  --berry:     #8C2C54;
  --berry-deep:#6E2141;
  --berry-tint:#F5EAEF;

  /* Strand colours — graphics, and text on ink only */
  --teal:      #218380;
  --gold:      #FFBC42;
  --coral:     #F07167;

  --sand:      #F4EDE1;   /* a second warm ground, so the page is not one field of cream */
  --line:      #E9DED2;
  --line-dark: rgba(244,238,230,.16);

  /* Type */
  --display: 'Cabinet Grotesk', 'Segoe UI', Helvetica, Arial, sans-serif;
  --body:    'Hanken Grotesk', 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Rhythm */
  --gut:     clamp(1rem, 2.4vw, 2rem);
  --pad-x:   clamp(1.25rem, 5vw, 4rem);
  --sec-y:   clamp(2.5rem, 4.6vw, 4.25rem);
  --radius:  14px;
  --header-h: 74px;
  --banner-h: 46px;   /* the sticky press strip under the header */

  --ease:    cubic-bezier(.16, 1, .3, 1);
}

/* --------------------------------------------------------------- reset */

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

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bone);
  color: var(--text);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Paper grain + a warm wash, so the ground is never a flat fill. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1100px 520px at 88% -6%, rgba(255,188,66,.16), transparent 62%),
    radial-gradient(820px 460px at -8% 88%, rgba(33,131,128,.10), transparent 60%);
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

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

:where(a) { color: var(--berry); text-underline-offset: .22em; text-decoration-thickness: 1px; }
:where(a):hover { color: var(--berry-deep); }

:focus-visible {
  outline: 2px solid var(--berry);
  outline-offset: 3px;
  border-radius: 3px;
}
/* The header is an ink surface too, so its focus rings follow the same rule.
   A berry ring on near-black is 3.1:1 and reads as a smudge. */
.on-ink :focus-visible,
.site-header :focus-visible { outline-color: var(--gold); }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--gold);
  color: var(--ink);
  padding: .7em 1.1em;
  border-radius: 0 0 8px 0;
  text-decoration: none;
  font-size: .9375rem;
}
.skip:focus { left: 0; color: var(--ink); }
.skip:focus-visible { outline-color: var(--ink); }

/* --------------------------------------------------------------- type */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.025em;
  color: var(--ink);
  text-wrap: balance;
}

h1, .h1 {
  font-size: clamp(2.4rem, 6.1vw, 4.9rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.038em;
}
h2, .h2 { font-size: clamp(1.85rem, 4.2vw, 3.15rem); font-weight: 800; letter-spacing: -.032em; }
h3, .h3 { font-size: clamp(1.25rem, 2vw, 1.7rem); letter-spacing: -.024em; }
h4       { font-size: 1.0625rem; letter-spacing: -.01em; }

p { max-width: 62ch; }
p + p { margin-top: 1.1em; }

.lead {
  font-size: clamp(1.125rem, 1.7vw, 1.375rem);
  line-height: 1.52;
  color: var(--text);
  max-width: 46ch;
}

.label {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .17em;
  color: var(--berry);
  display: block;
  font-variant-numeric: tabular-nums;
}
.on-ink .label { color: var(--gold); }

.muted { color: var(--muted); }
.on-ink .muted { color: var(--on-dark-muted); }

.small { font-size: .9375rem; line-height: 1.6; }

/* --------------------------------------------------------------- layout */

.wrap {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--pad-x);
  padding-inline: max(var(--pad-x), env(safe-area-inset-left));
}

section { padding-block: var(--sec-y); }
.sec-tight { padding-block: calc(var(--sec-y) * .62); }

.g12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gut);
}

/* Dark bands. Colour-block cuts do the pacing, never a gradient between. */
.on-ink {
  background: var(--ink);
  color: var(--on-dark);
}
.on-ink h1, .on-ink h2, .on-ink h3, .on-ink h4 { color: var(--on-dark); }
.on-ink .lead { color: var(--on-dark); }
.on-ink a { color: var(--gold); }
.on-ink a:hover { color: #fff; }

.on-sand { background: var(--sand); }
.on-sand + .on-sand { padding-top: 0; }

.on-gold { background: var(--gold); }
.on-gold .label { color: var(--berry); }
.on-gold .btn { background: var(--berry); color: #fff; }
.on-gold .btn:hover { background: var(--berry-deep); }
.on-gold .link-arrow { color: var(--ink); }

.on-berry { background: var(--berry); color: #fff; }
.on-berry h1, .on-berry h2, .on-berry h3 { color: #fff; }
.on-berry .label { color: var(--gold); }

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .78em 1.4em;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--berry);
  color: #fff;
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: -.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { background: var(--berry-deep); color: #fff; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { background: var(--berry-tint); color: var(--berry-deep); border-color: #E0CBD5; }

.on-ink .btn { background: var(--gold); color: var(--ink); }
.on-ink .btn:hover { background: #FFD07A; color: var(--ink); }
.on-ink .btn-ghost { background: transparent; color: var(--on-dark); border-color: var(--line-dark); }
.on-ink .btn-ghost:hover { background: rgba(244,238,230,.08); color: #fff; }

.on-berry .btn { background: var(--gold); color: var(--ink); }
.on-berry .btn:hover { background: #FFD07A; }

.link-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: .45em;
  font-weight: 600;
  font-size: .9375rem;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  border-bottom-color: color-mix(in srgb, currentColor 34%, transparent);
  padding-bottom: 2px;
  position: relative;
}
/* Drawn on hover over the held-back rule, left to right. */
.link-arrow::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.link-arrow:hover::after { transform: scaleX(1); }
.link-arrow span { transition: transform .25s var(--ease); display: inline-block; }
.link-arrow:hover span { transform: translateX(4px); }

/* --------------------------------------------------------------- header */

/* Ink, so the header, the gold press bar and the dark hero read as one stack
   rather than three unrelated bands in the first 140 pixels. Opaque rather than
   translucent: it sits over cream sections for most of the page and a blurred
   dark bar over cream looked accidental. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--ink);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.site-header[data-scrolled='true'] { border-bottom-color: var(--line-dark); }

.header-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gut);
  min-height: 74px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--on-dark);
  flex: 0 0 auto;
}
.brand svg { width: 46px; height: auto; }
.brand-name {
  font-family: var(--display);
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
}
/* Berry on the ink header is technically legible at this size but reads murky,
   and it would fight the hero's gold accent directly under it. */
.brand-name em { font-style: normal; color: var(--gold); }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.1rem); }
.nav a {
  color: var(--on-dark);
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 500;
  position: relative;
  padding-block: .35em;
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav a:hover::after, .nav a[aria-current='page']::after { transform: scaleX(1); }
/* .nav a is more specific than .btn, so the pill has to reclaim its own colour.
   Gold, not berry: the header is an ink surface and the site's rule is that the
   accent follows the ground it sits on. */
.nav a.btn { background: var(--gold); color: var(--ink); }
.nav a.btn:hover { background: #FFD07A; color: var(--ink); }
.nav a.btn::after { display: none; }
/* Berry is 2.25:1 on the ink header. Gold matches the underline it already
   carries, so the current page reads as one mark rather than two colours. */
.nav a[aria-current='page'] { color: var(--gold); }

.nav-toggle {
  display: none;
  background: none;
  color: var(--on-dark);
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  padding: .5em .9em;
  gap: .5em;
  align-items: center;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink);
    border-bottom: 1px solid var(--line-dark);
    padding: .5rem var(--pad-x) 1.5rem;
  }
  .nav[hidden] { display: none; }
  .nav a { padding-block: .85em; border-bottom: 1px solid var(--line-dark); font-size: 1.0625rem; }
  .nav a::after { display: none; }
  .nav .btn { margin-top: 1rem; justify-content: center; }
}

/* --------------------------------------------------------------- thread */

.thread-svg { width: 100%; height: auto; }
.thread-svg path { fill: none; stroke-linecap: round; }


/* Hero. The rope runs straight across the middle of the first screen, tangled
   on the left and clear on the right, with the headline above it and the call
   to action below. The reader crosses the knot on the way to the button, which
   is the whole argument of the business in one image.

   Dark ground on purpose: a full-width rope on ink reads as a band of light,
   where on cream it reads as a detail. The artwork is a separate file with the
   halo drawn in ink, because an <img> cannot be recoloured from CSS.

   No pin, no scrub, no scroll listener and no JavaScript, so nothing here can
   drift, collide or behave differently at one viewport width than another. */
.hero-cross {
  min-height: calc(82svh - var(--header-h) - var(--banner-h));
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  align-items: center;
  padding-block: clamp(1.25rem, 2vw, 1.75rem);
  overflow: hidden;
}
.hero-hl { max-width: 17ch; align-self: center; }
.hero-hl em { font-style: normal; color: var(--gold); }

/* Full width already, being a direct child of the section rather than the wrap.
   The artwork carries preserveAspectRatio="none" to stretch to the band and a
   non-scaling stroke so the line weight stays even and the distortion never
   shows. */
/* Sized off width, not height. The rope's thickness on screen is a proportion
   of how long it runs, so tying it to vh made it flatten on a wide window.
   17vw puts the drawn strands at the same rope-to-page-width ratio as the
   design, and the floor keeps it readable on a phone. */
.hero-band { height: clamp(132px, 17vw, 260px); }
.hero-band img,
.hero-band > svg.braid { display: block; width: 100%; height: 100%; }

.hero-foot {
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.hero-foot .lead { max-width: 38ch; }

@media (max-width: 780px) {
  .hero-cross { grid-template-rows: auto auto auto; row-gap: clamp(1.5rem, 5vh, 3rem); }
  .hero-hl { max-width: none; }
}

.beat { width: min(42rem, 100%); }



.beat[data-at="learn"] { margin-top: clamp(1.75rem, 3.4vw, 3rem); }
.beat[data-at="build"] { margin-top: clamp(1.5rem, 3vw, 2.6rem); }
.beat[data-at="adopt"] { margin-top: clamp(1.5rem, 3vw, 2.6rem); }
.beat[data-at="close"] { margin-top: clamp(1.75rem, 3.4vw, 3rem); }

.beat.is-wide { width: min(46rem, 100%); }

/* The knot used to sit in the right-hand column beside the rope. With the rope
   doing its whole job in the hero, it holds the full width itself, split the
   same way as the sections under it. */
.beat-knot { align-items: start; }
.beat-knot-head { grid-column: 1 / span 6; }
.beat-knot-body { grid-column: 8 / -1; }
@media (max-width: 900px) {
  .beat-knot-head, .beat-knot-body { grid-column: 1 / -1; }
  .beat-knot-body { margin-top: 1.25rem; }
}
.beat-note { margin-top: 1.1rem; max-width: 40ch; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1.4rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
/* Already sitting in a row beside the paragraph, so it needs no stacking gap. */
.hero-foot .hero-actions { margin-top: 0; }

.beat-mark {
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1rem;
}
/* The strand colour is a rule, never type: teal, gold and coral all fail
   contrast as text on the cream. */
.beat-mark::before {
  content: '';
  width: 42px;
  height: 5px;
  border-radius: 3px;
  background: var(--strand);
  flex: 0 0 auto;
}
.beat-line {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.2vw, 2.6rem);
  line-height: 1.14;
  letter-spacing: -.03em;
  color: var(--ink);
  max-width: 24ch;
}
.beat-close {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -.038em;
  color: var(--berry);
}

@media (max-width: 899px) {
  .hero-run {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 1.25rem;
    padding-left: clamp(12px, 3vw, 20px);
  }
  .beat, .beat.is-wide, .beat.is-lead { width: auto; }
  .beat[data-at="intro"] { padding-block: 1.5rem 0; }
  .beat-line { max-width: none; }
}

/* Section index. The numbering system stays; the horizontal triple rule that
   used to sit above it does not, because three stacked colour bars read as a
   flag rather than as the mark. */
.sec-index {
  display: block;
  margin-bottom: .9rem;
  padding-top: .8rem;
  border-top: 1px solid var(--line);
  width: 100%;
}
.on-ink .sec-index { border-top-color: var(--line-dark); }

/* --------------------------------------------------------------- press */

/* Berry, so the one brand colour does a real job in the first 120 pixels
   instead of appearing once halfway down the page. It sticks under the header
   and the logos run past it, which means a reader who never scrolls still sees
   all seven mastheads. The logo files are pre-flattened ink silhouettes, so
   they invert cleanly to a bone knockout instead of needing a second set. */
.press {
  position: sticky;
  top: var(--header-h);
  z-index: 50;
  background: var(--berry);
  border-bottom: 1px solid rgba(244, 238, 230, .18);
  padding-block: .55rem;
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2vw, 1.5rem);
  padding-inline: var(--pad-x) 0;
  overflow: hidden;
}
.press-title {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: #FFFFFF;
  max-width: none;
  flex: none;
  white-space: nowrap;
}
@media (max-width: 520px) { .press-title { display: none; } }

/* The track holds the set twice and travels exactly half its own width, so the
   second copy is sitting where the first one started at the moment it resets.
   No script measures anything, which is why it cannot drift. */
.press-marquee {
  position: relative;
  flex: 1 1 auto;
  /* Without this the track's max-content width sets the flex item's floor and
     the whole page gains a horizontal scrollbar on a phone. */
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
          mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
}
.press-row {
  display: flex;
  width: max-content;
  align-items: center;
  animation: pressMarq 46s linear infinite;
}
.press:hover .press-row { animation-play-state: paused; }
@keyframes pressMarq { to { transform: translateX(-50%); } }

.press-row img {
  height: 17px;
  width: auto;
  /* The widest wordmarks are near 10:1, so a single height makes them run two
     to three times the length of everything else. The cap trims those two back
     to the weight of the rest of the set. */
  max-width: 118px;
  margin-inline: clamp(1.1rem, 2.6vw, 2.1rem);
  object-fit: contain;
  filter: invert(1);
  opacity: 1;
}
/* Optical sizing, one line per mark. A single height across seven logos this
   different in proportion leaves the ABC circle a speck and The Age a banner. */
.press-row .pl-abc         { height: 30px; }
.press-row .pl-newscomau   { height: 21px; }
.press-row .pl-safm        { height: 20px; }
.press-row .pl-salife      { height: 17px; }
.press-row .pl-advertiser  { height: 15px; }
.press-row .pl-the-age     { height: 14px; }
.press-row .pl-bna         { height: 13px; }

@media (prefers-reduced-motion: reduce) {
  .press-row { animation: none; }
}

/* --------------------------------------------------------------- sections */

.sec-head { grid-column: 1 / -1; max-width: 44rem; margin-bottom: clamp(1.15rem, 2.2vw, 1.75rem); }
.sec-head .label { margin-bottom: .9rem; }

/* Broken grid: text hangs in cols 1-6, the aside sits 8-12 with col 7 empty. */
.split { align-items: start; }
.split > .split-main { grid-column: 1 / span 6; }
.split > .split-aside { grid-column: 8 / span 5; }
@media (max-width: 900px) {
  .split > .split-main, .split > .split-aside { grid-column: 1 / -1; }
  .split > .split-aside { margin-top: 2rem; }
}

/* Quote cards — the things people actually say */
.knot-quotes { display: grid; gap: 1rem; }
.knot-quotes li {
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--coral);
  border-radius: var(--radius);
  padding: 1.15rem 1.35rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
}
.knot-quotes li:nth-child(2) { border-left-color: var(--gold); margin-left: clamp(0px, 3vw, 34px); }
.knot-quotes li:nth-child(3) { border-left-color: var(--teal); margin-left: clamp(0px, 6vw, 68px); }

/* Pillars — three strands, three offers. Deliberately uneven. */
.pillars { gap: var(--gut); }
.pillar {
  grid-column: span 4;
  border-top: 5px solid var(--strand, var(--berry));
  padding-top: 1.4rem;
}
.pillar:nth-child(2) { margin-top: clamp(0px, 3vw, 42px); }
.pillar .idx {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .17em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.pillar h3 { margin: .5rem 0 .6rem; }
.pillar p { font-size: 1rem; color: var(--muted); max-width: 34ch; }
@media (max-width: 820px) {
  .pillar { grid-column: 1 / -1; }
  .pillar:nth-child(2) { margin-top: 0; }
}

/* Before / after */
.ba { grid-column: span 6; border-radius: var(--radius); padding: 1.75rem 1.65rem; }
.ba h3 { font-size: 1.15rem; margin-bottom: 1rem; }
.ba ul { list-style: none; padding: 0; }
.ba li { padding: .55rem 0; border-bottom: 1px solid currentColor; font-size: 1.0625rem; }
.ba li:last-child { border-bottom: 0; }
.ba-before { background: var(--berry-tint); color: var(--berry); }
.ba-before h3 { color: var(--berry); }
.ba-before li { border-bottom-color: rgba(140,44,84,.16); }
.ba-after { background: var(--teal); color: #fff; }
.ba-after h3 { color: #fff; }
.ba-after li { border-bottom-color: rgba(255,255,255,.22); }
@media (max-width: 760px) { .ba { grid-column: 1 / -1; } }

/* Statement band */
.statement {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 3.15rem);
  line-height: 1.16;
  letter-spacing: -.032em;
  max-width: 26ch;
}
.on-berry .statement { max-width: 30ch; }
.statement mark { background: none; color: var(--gold); }

/* About preview / person */
.person { align-items: center; }
.person-photo { grid-column: 1 / span 4; }
.person-photo img { border-radius: var(--radius); width: 100%; }
.person-body { grid-column: 6 / span 7; }
@media (max-width: 900px) {
  .person-photo { grid-column: 1 / span 7; }
  .person-body { grid-column: 1 / -1; margin-top: 1.75rem; }
}

.creds { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
/* Stacked down the narrow column beside the photo, rather than wrapped as a
   pill cloud, which is what the wide layout wants. */
.creds.is-stacked { flex-direction: column; align-items: flex-start; gap: .45rem; margin-top: 0; }
.creds li {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .45em .85em;
  color: var(--muted);
}
.on-ink .creds li { border-color: var(--line-dark); color: var(--on-dark-muted); }

/* Testimonials */
/* Real messages rather than typed-out quotes. They are treated as physical
   things, tilted and overlapping, because the whole point is that they are
   screenshots somebody actually sent and not copy somebody wrote. The shadow is
   what sells them as paper, so it is motivated rather than decoration.

   The sender names were cropped off the top of each before they shipped: the
   site attributes them anonymously and those names were never cleared. */
.notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: clamp(.85rem, 1.6vw, 1.4rem);
  max-width: none;
}
.note {
  margin: 0;
  background: var(--paper);
  border: 0;
  border-radius: 8px;
  padding: clamp(1rem, 1.8vw, 1.35rem) clamp(1rem, 1.8vw, 1.35rem) clamp(.85rem, 1.4vw, 1.1rem);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .75);
}
.note img { width: 100%; height: auto; border-radius: 4px; }
.note figcaption {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  color: var(--muted);
  margin-top: 1rem;
}
/* Three across rather than a diagonal stagger. The stagger used the full width
   but left most of it empty, which read as a hole in the page rather than as
   air. The rotations stay, because the tilt is what sells them as paper. */
.note:nth-child(1) { transform: rotate(-.7deg); }
.note:nth-child(2) { transform: rotate(.5deg); }
.note:nth-child(3) { transform: rotate(-.4deg); }
@media (max-width: 860px) {
  .notes { grid-template-columns: 1fr; }
  .note { width: min(100%, 26rem); }
}

.notes-note {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--on-dark-muted);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  max-width: none;
}

@media (prefers-reduced-motion: reduce) {
  .note { transform: none; }
}

/* Service rows — asymmetric, numbered, strand-coloured */
.svc { padding-block: clamp(1.75rem, 3.2vw, 2.75rem); border-top: 1px solid var(--line); }
.svc:first-of-type { border-top: 0; }
/* The strand colour lives in the dot glyph, which is decorative. The number
   is text, so it takes a colour that actually passes contrast on cream. */
.svc-num {
  grid-column: 1 / span 1;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding-top: .5rem;
}
.svc-main { grid-column: 2 / span 6; }
.svc-spec { grid-column: 9 / span 4; }
.svc-main h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.svc-main h2 .dot {
  display: inline-block;
  width: .34em; height: .34em;
  border-radius: 50%;
  background: var(--strand);
  vertical-align: .18em;
  margin-left: .22em;
}
.svc-spec dl { display: grid; gap: .9rem; margin: 0; }
.svc-spec dt {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  color: var(--muted);
  margin-bottom: .3rem;
}
.svc-spec dd { margin: 0; font-size: .9375rem; line-height: 1.5; }
@media (max-width: 940px) {
  .svc-num { grid-column: 1 / -1; }
  .svc-main, .svc-spec { grid-column: 1 / -1; }
  .svc-spec { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
}

/* Chatbot versus workflow. The page shows the difference rather than claiming
   it, which the teardown library flags as the one move that separates a good
   service site from a template with nice colours.

   Tabs are radio inputs with labels, so switching between the three jobs needs
   no JavaScript and keyboard users get arrow keys for free. */
.tabs { border: 0; padding: 0; margin: clamp(2rem, 4vw, 3rem) 0 0; min-inline-size: 0; }

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

.tab-radio { position: absolute; opacity: 0; pointer-events: none; }
.tab-label {
  display: inline-block;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .14em;
  color: var(--on-dark-muted);
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  padding: .6em 1.1em;
  margin: 0 .5rem .75rem 0;
  cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease);
}
.tab-label:hover { color: var(--on-dark); border-color: rgba(244,238,230,.4); }
/* All three radios come first, so a general sibling combinator can reach both
   the label row and the panel it belongs to. */
.tab-labels { display: flex; flex-wrap: wrap; }
.tab-panels { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.tab-panel { display: none; }

#sc-prep:checked    ~ .tab-panels [data-p="sc-prep"],
#sc-leads:checked   ~ .tab-panels [data-p="sc-leads"],
#sc-content:checked ~ .tab-panels [data-p="sc-content"] { display: block; }

#sc-prep:checked    ~ .tab-labels [for="sc-prep"],
#sc-leads:checked   ~ .tab-labels [for="sc-leads"],
#sc-content:checked ~ .tab-labels [for="sc-content"] {
  color: var(--ink);
  background: var(--gold);
  border-color: var(--gold);
}
#sc-prep:focus-visible    ~ .tab-labels [for="sc-prep"],
#sc-leads:focus-visible   ~ .tab-labels [for="sc-leads"],
#sc-content:focus-visible ~ .tab-labels [for="sc-content"] {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.compare { gap: var(--gut); align-items: start; }
.compare-col { grid-column: span 6; }
@media (max-width: 820px) { .compare-col { grid-column: 1 / -1; } }
.compare-card {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 1.4rem 1.4rem 1.5rem;
  height: 100%;
}
/* The light card sits inside an ink section, so it has to opt back out of the
   inherited on-dark text colours or it goes bone-on-white. */
.on-ink .compare-card { color: var(--text); }
.on-ink .compare-card h3 { color: var(--ink); }
.on-ink .compare-card .muted { color: var(--muted); }
.on-ink .compare-card .compare-tag { color: var(--muted); }

.compare-card.is-after { background: var(--ink); border-color: rgba(244,238,230,.22); }
.on-ink .compare-card.is-after,
.compare-card.is-after { color: var(--on-dark); }
.on-ink .compare-card.is-after h3,
.compare-card.is-after h3 { color: var(--on-dark); }
.compare-tag {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .17em;
  color: var(--muted);
  margin-bottom: .9rem;
  display: block;
}
.on-ink .compare-card.is-after .compare-tag,
.compare-card.is-after .compare-tag { color: var(--gold); }
.fake-mail {
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--muted);
  border-left: 3px solid var(--line);
  padding-left: 1rem;
  margin-top: 1rem;
}

.steps { list-style: none; padding: 0; margin-top: 1rem; display: grid; gap: .85rem; }
.steps li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .75rem; align-items: start; }
.steps i {
  font-style: normal;
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--gold);
  padding-top: .28em;
  font-variant-numeric: tabular-nums;
}
.steps b { display: block; font-weight: 600; font-size: .9375rem; }
.steps span { font-size: .875rem; color: var(--on-dark-muted); line-height: 1.5; }

/* The steps tick through on a loop whilst the card beside them sits there
   doing nothing, forever. The contrast is the argument, so it is worth the one
   piece of motion on the page. Eight seconds, two per step, CSS only. */
.steps li {
  animation: step-run 8s linear infinite;
  animation-delay: calc(var(--i) * 2s);
}
.steps li b, .steps li i { transition: color .3s var(--ease); }
@keyframes step-run {
  0%, 1%   { opacity: .45; }
  3%, 22%  { opacity: 1; }
  25%, 100% { opacity: .45; }
}

.compare-payoff {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  line-height: 1.25;
  letter-spacing: -.025em;
  color: var(--on-dark);
  max-width: 34ch;
  margin-top: clamp(2rem, 4vw, 3.25rem);
}

@media (prefers-reduced-motion: reduce) {
  .steps li { animation: none; opacity: 1; }
}

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.2rem 2.5rem 1.2rem 0;
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  font-weight: 700;
  letter-spacing: -.02em;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  position: absolute;
  right: .35rem; top: 50%;
  width: 13px; height: 13px;
  border-right: 2px solid var(--berry);
  border-bottom: 2px solid var(--berry);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .faq-body { padding-bottom: 1.4rem; }
.faq .faq-body p { font-size: 1rem; color: var(--muted); max-width: 68ch; }

/* Form */
.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .4rem; }
.field label { font-size: .875rem; font-weight: 600; }
.field input, .field textarea, .field select {
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 10px;
  padding: .8em .95em;
  font-size: 1rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--berry);
  box-shadow: 0 0 0 3px rgba(140,44,84,.14);
}
.field textarea { min-height: 148px; resize: vertical; }
/* The native select chrome does not match the other fields on any platform, so
   the arrow is drawn here and the default is turned off. */
.field select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236A5F65' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}
.form-note { font-size: .875rem; color: var(--muted); }

.contact-direct { display: grid; gap: 1.35rem; }
.contact-direct dt {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  color: var(--muted);
  margin-bottom: .25rem;
}
.contact-direct dd { margin: 0; font-size: 1.0625rem; }

/* --------------------------------------------------------------- footer */

.site-footer {
  background: var(--ink);
  color: var(--on-dark);
  border-top: 1px solid var(--line-dark);
  padding-block: clamp(2rem, 3.4vw, 2.75rem) 1.6rem;
}
.footer-top { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gut); }
.footer-brand { grid-column: 1 / span 5; }
.footer-brand .thread-svg { stroke-width: 73; max-width: 380px; margin-top: 1.5rem; }
.footer-nav { grid-column: 7 / span 3; }
.footer-contact { grid-column: 10 / span 3; }
.footer-nav h2, .footer-contact h2 {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .17em;
  color: var(--on-dark-muted);
  margin-bottom: .9rem;
}
.footer-nav ul, .footer-contact ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.footer-nav a, .footer-contact a { color: var(--on-dark); text-decoration: none; font-size: .9375rem; }
.footer-nav a:hover, .footer-contact a:hover { color: var(--gold); }
.footer-stamp a { color: var(--on-dark); text-decoration-color: var(--line-dark); }
.footer-stamp a:hover { color: var(--gold); }
.footer-stamp {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-dark);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--on-dark-muted);
}
@media (max-width: 860px) {
  .footer-brand, .footer-nav, .footer-contact { grid-column: 1 / -1; }
  .footer-nav, .footer-contact { margin-top: 2rem; }
}

/* --------------------------------------------------------------- page hero */

/* Every page opens the same way the homepage does: ink ground, the rope closing
   it off. The band is shorter here because the page title carries the screen,
   not the rope. */
.page-hero { padding-block: clamp(2rem, 4vw, 3.5rem) 0; }
/* Taller than it was with five strands: one line has no density to carry, so
   it needs the room to show its travel. */
.page-band {
  height: clamp(112px, 13vw, 196px);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  position: relative;
}

/* The join to the section below. The strand is drawn over it rather than above
   it, so the line sits half on the ink and half on the page and reads as a
   waterline. That removes the offset entirely: with the five-strand rope the
   page had to be nudged below the strand centres to bury the halo, and a fringe
   of ground still showed wherever a strand ran steeply. Nothing can show
   through underneath a line that is painted on top of the boundary. */
.page-flood {
  position: absolute;
  inset: 0;
  z-index: 0;
  color: var(--flood, var(--bone));
  pointer-events: none;
}
.page-flood svg { width: 100%; height: 100%; }
.page-band .braid { position: relative; z-index: 1; }

/* The flood ends exactly where the band does, so a fractional band height can
   leave a hairline of ground between it and the section below. Sealed rather
   than solved by stretching the flood, which would shift the line off the
   strand it has to sit under. */
.page-band::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--flood, var(--bone));
  z-index: 0;
}
.page-hero .label { margin-bottom: 1rem; }
.page-hero h1 { font-size: clamp(2.35rem, 6vw, 4.5rem); max-width: 16ch; }
.page-hero .lead { margin-top: 1.35rem; max-width: 52ch; }

/* --------------------------------------------------------------- reveal */

.rv { opacity: 0; transform: translateY(22px); }
.rv.in {
  opacity: 1;
  transform: none;
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}

/* The headline arrives from under a mask rather than fading up. A fade reads as
   a page still loading; a mask reads as a decision.

   It masks per line, and only where the line breaks are chosen by hand. Masking
   a whole multi-line heading looks wrong for the length of the animation: the
   top line clears while the lower ones are still cut through the middle, which
   reads as a rendering fault. Headings that reflow get .rise instead.

   The padding and the negative margin that cancels it are not optional:
   overflow hidden clips descenders otherwise, and a sheared 'y' is the tell
   that gives the technique away.

   The resting state is the base state and the animation runs backwards from
   off-screen, so the words are readable even if the animation never runs. */
.mask {
  display: block;
  overflow: hidden;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
.mask > * { display: block; }

@keyframes mask-up { from { transform: translateY(106%); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(16px); } }

/* On load, for the header of every page. */
.hero-cross .mask > *,
.page-hero .mask > * {
  animation: mask-up 1s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 90ms + 140ms);
}
.hero-cross .rise,
.page-hero .rise {
  animation: rise-in .9s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 90ms + 140ms);
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .rv { opacity: 1; transform: none; }
  .hero-track { height: auto; }
  .hero-stage { position: static; min-height: 0; }
  .thread-legend li { opacity: 1; }
  .hero-meta span:last-child { visibility: hidden; }
  .hero-track { height: auto; }
  .hero-stage { position: static; height: auto; overflow: visible; }
  .beats { position: static; transform: none !important; }
  .beat { position: static; opacity: 1; transform: none; width: auto; margin-top: 2.25rem; }
  .braid-track { transform: translateX(-42%) !important; }
}