/* Trash Butlers — marketing site
   Tokens are the canonical set from docs/BRAND.md §5. Never a raw hex below the :root block.
   Layout is fluid by default; breakpoints exist only where a grid has to change shape. */

:root {
  /* ground */
  --chalk:      #F7F6F2;
  --mist:       #F0EFEA;
  --paper:      #FFFFFF;

  /* ink */
  --ink-900:    #121417;
  --ink-700:    #3A3D42;
  --ink-500:    #5D6066;
  --ink-100:    #E0DFD9;

  /* dark ground */
  --graphite:   #16181B;
  --surface:    #1F2226;
  --hairline:   #2E3237;
  --chalk-dk:   #F5F4EF;
  --pearl:      #C9CBCF;
  --iron:       #A9AEB6;

  /* metals — gold is ceremonial, sterling is functional. Never swap jobs. */
  --gilt:       #B08D3E;
  --gilt-deep:  #8A6E2F;
  --gilt-ink:   #7A6118;
  --gilt-dk:    #C39F58;

  /* type */
  --display: "Cinzel", "Iowan Old Style", Georgia, serif;
  --body:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --data:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* fluid scale — one source of truth, no per-breakpoint font overrides */
  --t-h1:    clamp(2.6rem, 1.4rem + 5.4vw, 5.25rem);
  --t-h2:    clamp(1.8rem, 1.2rem + 2.4vw, 2.75rem);
  --t-h3:    clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
  --t-lede:  clamp(1rem, 0.94rem + 0.3vw, 1.15rem);
  --t-body:  clamp(0.94rem, 0.9rem + 0.2vw, 1rem);

  --pad: clamp(1.25rem, 0.4rem + 3.6vw, 5rem);
  --sec: clamp(3.5rem, 2rem + 5vw, 5.75rem);
  --maxw: 78rem;

  --radius: 3px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --rise: 400ms;
}

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

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

body {
  margin: 0;
  background: var(--chalk);
  color: var(--ink-900);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-wrap: balance;          /* headlines break on sense, not on width */
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

a { color: var(--ink-900); text-decoration-color: #A9A8A2; text-underline-offset: 3px; }
a:hover { color: var(--gilt-ink); text-decoration-color: var(--gilt-ink); }

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

[id] { scroll-margin-top: 6rem; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--chalk-dk); color: var(--ink-900); padding: 12px 18px; font-weight: 700;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------- the mark ---------- */

.mark { fill: none; stroke: currentColor; stroke-linejoin: round; stroke-linecap: round; }
.mark--nav   { width: clamp(40px, 4vw, 52px); stroke-width: 3.4; }
.mark--hero  { width: clamp(160px, 22vw, 288px); stroke-width: 1.4; }
.mark--close { width: clamp(88px, 11vw, 120px); stroke-width: 2.2; }

/* line-draw: pathLength="1" normalises every path, and both dash properties
   inherit through <use> into the symbol's shadow content. */
@keyframes draw-in { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.mark--hero {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw-in 1900ms var(--ease) 250ms forwards;
}

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

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 780ms var(--ease), transform 780ms var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal] > * { transition-delay: inherit; }

/* stagger children of a revealed group */
.stagger.is-in > * { animation: rise var(--rise) var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.stagger.is-in > *:nth-child(1) { animation-delay:  60ms; }
.stagger.is-in > *:nth-child(2) { animation-delay: 130ms; }
.stagger.is-in > *:nth-child(3) { animation-delay: 200ms; }
.stagger.is-in > *:nth-child(4) { animation-delay: 270ms; }
.stagger.is-in > *:nth-child(5) { animation-delay: 340ms; }
.stagger.is-in > *:nth-child(6) { animation-delay: 410ms; }

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

.band {
  padding: var(--sec) var(--pad);
  display: flex; flex-direction: column; align-items: center;
}
.band > * { width: 100%; max-width: var(--maxw); }
.band--dark { background: var(--graphite); color: var(--chalk-dk); }
.band--paper { background: var(--paper); border-bottom: 1px solid var(--ink-100); }
.band--chalk { background: var(--chalk); border-top: 1px solid var(--ink-100); }

.eyebrow {
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-500);
}
.band--dark .eyebrow { color: var(--iron); }

.centered { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
.centered h2 { font-size: var(--t-h2); }
.lede { font-size: var(--t-lede); line-height: 1.62; color: var(--ink-700); max-width: 48ch; }
.band--dark .lede { color: var(--pearl); }

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

.btn {
  display: inline-block; border: 1px solid transparent; border-radius: var(--radius);
  font-weight: 700; font-size: clamp(0.94rem, 0.9rem + 0.2vw, 1.0625rem);
  padding: 1.0625rem 2rem; text-decoration: none; text-align: center;
  background: var(--ink-900); color: var(--chalk);
  transition: background-color 320ms var(--ease), color 320ms var(--ease),
              transform 320ms var(--ease), box-shadow 320ms var(--ease);
}
.btn:hover, .btn:focus-visible {
  background: var(--ink-700); color: var(--chalk);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -14px rgba(18, 20, 23, 0.55);
}
.btn:active { transform: translateY(0); }
.btn--light { background: var(--chalk-dk); color: var(--ink-900); }
.btn--light:hover, .btn--light:focus-visible { background: var(--paper); color: var(--ink-900); box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.6); }
.btn--ghost { background: transparent; color: var(--chalk-dk); border-color: var(--chalk-dk); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--chalk-dk); color: var(--ink-900); }

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

.site-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: clamp(0.9rem, 0.6rem + 0.7vw, 1.5rem) var(--pad);
  background: var(--graphite); color: var(--chalk-dk);
  border-bottom: 1px solid transparent;
  transition: padding 380ms var(--ease), border-color 380ms var(--ease), background-color 380ms var(--ease);
}
.site-header.is-stuck {
  padding-top: 0.7rem; padding-bottom: 0.7rem;
  border-bottom-color: var(--hairline);
  background: rgba(22, 24, 27, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}
.wordmark { display: flex; align-items: center; gap: 0.875rem; text-decoration: none; color: inherit; }
.wordmark span {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(0.94rem, 0.85rem + 0.35vw, 1.1875rem); letter-spacing: 0.1em; white-space: nowrap;
}
.wordmark .mark { color: var(--gilt-dk); transition: color 320ms var(--ease); }
.wordmark:hover .mark { color: var(--gilt); }

.site-nav { display: flex; align-items: center; gap: clamp(1rem, 0.2rem + 1.7vw, 2.125rem); }
.site-nav a:not(.btn) {
  position: relative; font-size: 0.875rem; color: var(--pearl); text-decoration: none; white-space: nowrap;
  transition: color 300ms var(--ease);
}
.site-nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: var(--gilt-dk); transform: scaleX(0); transform-origin: left;
  transition: transform 380ms var(--ease);
}
.site-nav a:not(.btn):hover { color: var(--chalk-dk); }
.site-nav a:not(.btn):hover::after { transform: scaleX(1); }
.site-nav .btn { padding: 0.625rem 1.25rem; font-size: 0.875rem; background: transparent; border-color: var(--chalk-dk); color: var(--chalk-dk); }
.site-nav .btn:hover { background: var(--chalk-dk); color: var(--ink-900); }

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

.hero {
  background: var(--graphite); color: var(--chalk-dk);
  padding: clamp(4rem, 1.5rem + 8vw, 8rem) var(--pad);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: clamp(1.75rem, 1rem + 2vw, 2.75rem);
}
.hero > * { max-width: var(--maxw); }
.hero .mark { color: var(--gilt-dk); }
.hero h1 { font-size: var(--t-h1); line-height: 1.06; letter-spacing: 0.02em; }
.hero p { font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem); line-height: 1.55; color: var(--pearl); max-width: 26ch; }
.hero-cta { display: flex; flex-direction: column; align-items: center; gap: 1.125rem; width: 100%; }
.hero-note { font-size: 0.875rem; color: var(--iron); }

/* hero copy fades up behind the drawn mark */
.hero h1, .hero p, .hero-cta { animation: rise 900ms var(--ease) both; }
.hero h1     { animation-delay: 900ms; }
.hero p      { animation-delay: 1040ms; }
.hero-cta    { animation-delay: 1180ms; }

/* ---------- collection strip ---------- */

.collection {
  background: var(--surface);
  padding: clamp(2rem, 1.2rem + 2vw, 2.875rem) var(--pad);
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 0; row-gap: 2.25rem;
  margin: 0 auto; max-width: none;
}
.collection li {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 0.9375rem;
  padding: 0 clamp(0.5rem, 1vw, 0.875rem);
}
.collection li::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: var(--gilt-deep); opacity: 0.6;
}
.collection li:nth-child(6n + 1)::before { display: none; }
.collection svg {
  width: clamp(34px, 3.4vw, 42px); height: auto; color: var(--gilt-dk);
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  transition: color 340ms var(--ease), transform 340ms var(--ease);
}
.collection li:hover svg { color: var(--chalk-dk); transform: translateY(-3px); }
.collection span {
  font-size: clamp(0.625rem, 0.55rem + 0.2vw, 0.72rem); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--chalk-dk); text-align: center; line-height: 1.6;
}

/* ---------- steps ---------- */

.steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.5rem, 0.8rem + 1.8vw, 2.125rem);
  margin-top: clamp(2rem, 1.2rem + 2.4vw, 3.25rem);
}
.steps li { display: flex; flex-direction: column; gap: 0.75rem; }
.steps .num { font-family: var(--data); font-size: 0.8125rem; color: var(--ink-500); }
.steps hr { border: 0; border-top: 1px solid var(--ink-100); margin: 0; width: 100%; }
.steps h3 { font-family: var(--body); font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.1875rem); font-weight: 700; letter-spacing: 0; padding-top: 0.25rem; }
.steps p { color: var(--ink-700); max-width: 34ch; }

/* ---------- what we take ---------- */

.take { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 1rem + 3.5vw, 5rem); align-items: center; }
.take-copy { display: flex; flex-direction: column; gap: 1.375rem; }
.take-copy h2 { font-size: var(--t-h2); line-height: 1.2; }
.take-copy p { font-size: var(--t-lede); line-height: 1.65; color: var(--ink-700); max-width: 38ch; }

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

.thread { width: 100%; max-width: 26rem; justify-self: end; }
.thread-inner {
  background: var(--paper); border: 1px solid var(--ink-100); border-radius: var(--radius);
  padding: 1.5rem 1.25rem; display: flex; flex-direction: column; gap: 0.6875rem;
  box-shadow: 0 1px 2px rgba(18, 20, 23, 0.04), 0 24px 48px -36px rgba(18, 20, 23, 0.4);
}
.bubble { max-width: 88%; padding: 0.6875rem 0.875rem; font-size: 0.875rem; line-height: 1.45; }
.bubble--out {
  align-self: flex-end; max-width: 80%; background: var(--ink-900); color: var(--chalk-dk);
  border-radius: 18px 18px 5px 18px; display: flex; flex-direction: column; gap: 0.5625rem;
}
.bubble--in { align-self: flex-start; background: var(--mist); color: var(--ink-900); border-radius: 18px 18px 18px 5px; }
.snap { border-radius: 8px; overflow: hidden; display: flex; aspect-ratio: 280 / 116; }
.snap svg { width: 100%; height: 100%; }

/* The thread plays itself once, in view. Bubbles keep their layout space while hidden
   and the typing row always occupies its height, so nothing on the page ever shifts. */
.thread-inner .bubble {
  transition: opacity 400ms var(--ease), transform 460ms var(--ease);
}
.js .thread-inner .bubble { opacity: 0; transform: translateY(9px) scale(0.965); }
.js .thread-inner .bubble.is-said { opacity: 1; transform: none; }
.bubble--out { transform-origin: bottom right; }
.bubble--in { transform-origin: bottom left; }

.typing {
  align-self: flex-start; width: fit-content;
  display: inline-flex; align-items: center; gap: 5px;
  height: 34px; padding: 0 0.875rem;
  background: var(--mist); border-radius: 18px 18px 18px 5px;
  opacity: 0; transition: opacity 280ms var(--ease);
}
.typing.is-on { opacity: 1; }
.typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-500);
}
.typing.is-on span { animation: blip 1.3s var(--ease) infinite; }
.typing.is-on span:nth-child(2) { animation-delay: 0.17s; }
.typing.is-on span:nth-child(3) { animation-delay: 0.34s; }
@keyframes blip {
  0%, 62%, 100% { opacity: 0.3; transform: translateY(0); }
  31%           { opacity: 0.95; transform: translateY(-3px); }
}

/* ---------- cadence ---------- */

.cadence-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: clamp(0.875rem, 0.4rem + 1.4vw, 1.75rem);
  margin-top: clamp(1.75rem, 1rem + 2vw, 2.75rem);
}
.cadence-grid article {
  background: var(--paper); border: 1px solid var(--ink-100); border-radius: var(--radius);
  padding: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
  display: flex; flex-direction: column; gap: 0.875rem;
  transition: border-color 380ms var(--ease), transform 380ms var(--ease), box-shadow 380ms var(--ease);
}
.cadence-grid article:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 2px rgba(18, 20, 23, 0.04), 0 22px 44px -34px rgba(18, 20, 23, 0.45);
}
.cadence-grid .standing { border-color: var(--gilt); }
.cadence-grid .standing .eyebrow { color: var(--gilt-ink); }
.cadence-grid h3 { font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.625rem); }
.cadence-grid p { font-size: var(--t-lede); line-height: 1.65; color: var(--ink-700); }

/* A secondary offering: deliberately lighter than the cards above it —
   a hairline and a gold icon, no panel, so it reads as "also available". */
.aside {
  display: flex; align-items: flex-start; gap: clamp(1rem, 0.6rem + 1.2vw, 1.75rem);
  margin-top: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  padding-top: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
  border-top: 1px solid var(--ink-100);
}
.aside svg {
  flex: 0 0 auto; width: clamp(30px, 3vw, 38px); height: auto; color: var(--gilt);
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  margin-top: 0.15rem;
}
.aside h3 { font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.375rem); margin-bottom: 0.5rem; }
.aside p { color: var(--ink-700); max-width: 62ch; }

@media (max-width: 620px) {
  .aside { flex-direction: column; gap: 0.875rem; }
}

/* ---------- trade ---------- */

.trade-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: clamp(0.875rem, 0.4rem + 1.2vw, 1.5rem);
  margin: clamp(2rem, 1.2rem + 2.4vw, 2.875rem) 0;
}
.trade-grid article {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: clamp(1.375rem, 1rem + 1.2vw, 1.875rem);
  display: flex; flex-direction: column; gap: 0.6875rem;
  transition: border-color 380ms var(--ease), transform 380ms var(--ease), background-color 380ms var(--ease);
}
.trade-grid article:hover { border-color: var(--gilt-deep); transform: translateY(-3px); }
.trade-grid .bespoke { border-color: var(--gilt-deep); }
.trade-grid .bespoke:hover { border-color: var(--gilt-dk); }
.trade-grid .bespoke h3 { color: var(--gilt-dk); }
.trade-grid h3 { font-size: var(--t-h3); color: var(--chalk-dk); }
.trade-grid p { line-height: 1.6; color: var(--pearl); }
.trade-cta { display: flex; align-items: center; justify-content: center; gap: 1.375rem; flex-wrap: wrap; }
.trade-cta p { font-size: 0.9375rem; color: var(--pearl); }

/* ---------- before anyone arrives ---------- */

.assurances {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: clamp(1.25rem, 0.6rem + 1.8vw, 2rem);
  margin-top: clamp(1.75rem, 1rem + 2.2vw, 3rem);
}
.assurances article { display: flex; flex-direction: column; gap: 0.75rem; }
.assurances h3 { font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.375rem); }
.assurances p { line-height: 1.6; color: var(--ink-700); max-width: 40ch; }

/* ---------- creed ---------- */

.creed {
  background: var(--mist); border-bottom: 1px solid var(--ink-100);
  padding: clamp(2rem, 1.2rem + 2vw, 3rem) var(--pad); text-align: center;
}
.creed p {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(0.875rem, 0.7rem + 0.7vw, 1.25rem);
  letter-spacing: clamp(0.18em, 0.26em, 0.26em);
  text-transform: uppercase; text-wrap: balance;
}

/* ---------- close ---------- */

.close {
  background: var(--graphite); color: var(--chalk-dk);
  padding: clamp(4.5rem, 2rem + 7vw, 8rem) var(--pad);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: clamp(1.25rem, 0.8rem + 1.4vw, 1.875rem);
}
.close > * { max-width: var(--maxw); }
.close .mark { color: var(--gilt-dk); }
.close h2 { font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4rem); letter-spacing: 0.03em; line-height: 1.12; }
.close p { font-size: var(--t-lede); color: var(--pearl); max-width: 28ch; }
.close-note { font-size: 0.875rem; color: var(--iron); }

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

.site-footer {
  background: var(--mist); padding: clamp(1.5rem, 1rem + 1.2vw, 2.125rem) var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap;
  font-size: 0.8125rem; color: var(--ink-500);
}
.site-footer ul { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.site-footer a { font-size: 0.8125rem; }

/* ---------- breakpoints: only where a grid must change shape ---------- */

@media (max-width: 1180px) {
  .collection { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .collection li:nth-child(6n + 1)::before { display: block; }
  .collection li:nth-child(3n + 1)::before { display: none; }
}

@media (max-width: 1000px) {
  .take { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .take-copy p { max-width: 60ch; }
  .thread { max-width: 30rem; justify-self: stretch; }
}

@media (max-width: 720px) {
  .site-nav a:not(.btn) { display: none; }
  .btn { display: block; width: 100%; }
  .site-nav .btn, .trade-cta .btn { width: auto; }
  .hero-cta .btn, .close .btn { width: 100%; max-width: 26rem; }
  .site-footer { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 620px) {
  .collection { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collection li:nth-child(3n + 1)::before { display: block; }
  .collection li:nth-child(2n + 1)::before { display: none; }
}

/* ---------- motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .mark--hero { stroke-dasharray: none; stroke-dashoffset: 0; }
  .js .thread-inner .bubble { opacity: 1; transform: none; }
  .typing { display: none; }
}