/* ==========================================================================
   TradeForma — homepage ("Private Trading House" edition)
   Ivory editorial spreads, champagne details, black reserved for hero
   and the worldwide/contact bands. Shared foundation lives in tf.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Homepage-only contrast tokens.
   --gold-deep (#93763c) measures 4.11:1 on ivory — fine for furniture, short
   of the 4.5:1 small-text floor. These are darker derivations of the same
   champagne and warm-grey family, scoped to the homepage body so tf.css stays
   untouched for every other page.
   -------------------------------------------------------------------------- */
.tf-home {
  --gold-deep-ink: #856830; /* 5.0:1 on --paper — small gold type */
  --label-ink: #6f6a5f;     /* 5.2:1 on --paper — quiet uppercase eyebrow */
  --rule-row: #948d7c;      /* 3.2:1 on --paper — ledger hairline */
}

/* Mid-size Fraunces cap for homepage serif components */
.discipline h3,
.sectors .sector-name {
  font-variation-settings: "opsz" 32, "WONK" 0;
}

/* ==========================================================================
   Hero — full-bleed duotone photograph under a layered ink scrim.
   The frame is high-key (a glazed terminal hall), so a thin veil is not
   enough: a flat wash sets the floor and three directional gradients shape
   where the type sits, keeping the middle of the photograph readable.
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--ink-deep);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  filter: grayscale(0.34) contrast(1.06) brightness(0.92) sepia(0.15);
}
/* Scrim: a flat ink floor plus three gradients — a bottom wash for the type
   stack and stat bar, a top wash for the header chrome and the kicker, and a
   left wash so the headline never sits on the brightest part of the frame.
   Measured worst case (brightest pixel under each block, 320-1440px wide and
   700-1200px tall): kicker 5.1:1, lede 6.2:1, stat strip 13.7:1.

   The gradient layers stack multiplicatively, so where all three are weak —
   the right of the 390px copy column, over the near-white suitcase/trouser
   highlight — they composed to ~0.26 alpha and the lede fell to ~2.6:1. The
   flat floor is therefore raised to a full-bleed veil (0.34) that lifts the
   floor everywhere, and a dedicated localized wash sits behind the content
   band (see `.hero-content::before`) for the worst-case highlight. Together
   they are additive, not multiplicative, so no text zone composes below
   0.62 alpha. The photo keeps its art direction: mid-frame stays lightest and
   the veil is uniform ink, so it darkens without greying the image out. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgba(10, 9, 8, 0.34);
  background-image:
    linear-gradient(to top,
      rgba(10, 9, 8, 0.94) 0%,
      rgba(10, 9, 8, 0.88) 12%,
      rgba(10, 9, 8, 0.72) 26%,
      rgba(10, 9, 8, 0.46) 42%,
      rgba(10, 9, 8, 0.14) 58%,
      rgba(10, 9, 8, 0) 78%),
    linear-gradient(to bottom,
      rgba(10, 9, 8, 0.82) 0%,
      rgba(10, 9, 8, 0.58) 14%,
      rgba(10, 9, 8, 0.24) 28%,
      rgba(10, 9, 8, 0) 44%),
    linear-gradient(100deg,
      rgba(10, 9, 8, 0.42) 0%,
      rgba(10, 9, 8, 0.14) 46%,
      rgba(10, 9, 8, 0) 74%);
}
.hero-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  padding-top: 9rem;
  /* Own stacking context, so the wash below can sit at a negative index
     without falling behind the hero photograph. */
  isolation: isolate;
}
/* Localized wash behind the kicker/lede/CTA band. The full-bleed veil lifts
   the general floor; this is the guarantee for the brightest pixel each block
   can land on. It is anchored to the text band (not the viewport), so its base
   tracks the stack as the lede rewraps, and it is darkest at the bottom where
   the veil has faded out and the photograph is brightest. Depth is set against
   black, because the gradient is composited over the already-veiled photo:
   floor = 1 - (1 - veil) * (1 - local) -> 0.34 + 0.42 = 0.62 alpha under the
   kicker, ~0.65 under the lede, ~0.67 under the CTA row. Worst-case contrast
   on the brightest highlight at 390px and 1440px: kicker 7.9:1, lede 8.3:1. */
.hero-content::before {
  content: "";
  position: absolute;
  z-index: -1;                      /* isolated by .hero-content above */
  left: 0;
  right: 0;
  top: -5rem;                       /* reach up under the header chrome */
  bottom: 0;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.46) 34%,
    rgba(0, 0, 0, 0.3) 62%,
    rgba(0, 0, 0, 0.12) 84%,
    rgba(0, 0, 0, 0) 100%);
}
.hero-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(251, 250, 247, 0.94);
  margin-bottom: clamp(1.4rem, 2.6vw, 2.2rem);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hero-kicker::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--gold);
  flex: none;
}
.hero-title {
  font-size: clamp(3.1rem, 8.6vw + 0.5rem, 8.2rem);
  max-width: 12ch;
}
.hero-lede {
  max-width: 34rem;
  margin-top: clamp(1.5rem, 2.8vw, 2.4rem);
  font-size: clamp(1.02rem, 0.5vw + 0.9rem, 1.2rem);
  line-height: 1.65;
  color: rgba(251, 250, 247, 0.94);
}
/* .hero-ctas lives in tf.css (shared with the 404 page) */

.hero-strip {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(251, 250, 247, 0.32);
  margin-top: clamp(2.6rem, 5vh, 4.5rem);
}
.hero-strip .wrap {
  display: flex;
  align-items: baseline;
  gap: 2.5rem;
  padding-block: 1.05rem;
  color: rgba(251, 250, 247, 0.9);
}
.hero-strip .hs-right { margin-left: auto; }

/* Quiet the decorative chart over the photographic hero so type stays primary */
.hero .hero-chart {
  width: min(52vw, 720px);
  opacity: 0.3;
}

/* Hero entrance — the one orchestrated moment */
@media (prefers-reduced-motion: no-preference) {
  .rise {
    opacity: 0;
    transform: translateY(26px);
    animation: rise 0.9s cubic-bezier(0.2, 0.65, 0.2, 1) forwards;
  }
  .rise.d1 { animation-delay: 0.12s; }
  .rise.d2 { animation-delay: 0.24s; }
  .rise.d3 { animation-delay: 0.38s; }
  .rise.d4 { animation-delay: 0.52s; }
  .rise.d5 { animation-delay: 0.66s; }
  .hero-media img {
    animation: heroZoom 2.4s cubic-bezier(0.3, 0.5, 0.2, 1) forwards;
  }
  .hero .arc-draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: arcDraw 1.9s cubic-bezier(0.5, 0, 0.15, 1) 0.55s forwards;
  }
}
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes heroZoom { from { transform: scale(1.045); } to { transform: scale(1); } }
@keyframes arcDraw { to { stroke-dashoffset: 0; } }

/* ==========================================================================
   Statement + disciplines
   ========================================================================== */
.disciplines {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 7rem);
  margin-top: clamp(4.5rem, 8vw, 8rem);
}
.discipline { border-top: 1px solid var(--ink); padding-top: 1.6rem; }
.discipline h3 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: clamp(1.55rem, 1.2vw + 1.1rem, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.discipline p {
  margin-top: 1.1rem;
  color: var(--smoke);
  font-size: 1rem;
  max-width: 46ch;
}

/* Sectors manifest — ledger rows with folio numerals.
   The eyebrow carries no trailing rule: the ink rule that opens the ledger
   already closes that band, and two rules 1rem apart read as a mistake. */
.sectors { margin-top: clamp(4.5rem, 8vw, 8.5rem); }
.sectors-label {
  color: var(--label-ink);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sectors ol { list-style: none; margin: 0; padding: 0; counter-reset: sector; }
.sectors li {
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  padding-block: clamp(1.05rem, 1.8vw, 1.5rem);
  border-bottom: 1px solid var(--rule-row);
  counter-increment: sector;
  transition: background-color 0.3s ease;
}
.sectors li:first-child { border-top: 1px solid var(--ink); }
.sectors li::before {
  content: "0" counter(sector);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--gold-deep-ink);
  font-feature-settings: "tnum" 1;
  flex: none;
  width: 2.2em;
}
.sectors .mark { display: none; }
.sectors .sector-name {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(1.25rem, 1vw + 0.95rem, 1.7rem);
  line-height: 1.3;
  transition: color 0.3s ease, transform 0.3s var(--ease-luxe);
}
.sectors li:hover { background: var(--paper-dim); }
.sectors li:hover .sector-name { color: var(--ink); transform: translateX(6px); }

/* ==========================================================================
   Worldwide
   ========================================================================== */
.worldwide .worldwide-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(3rem, 6vw, 7rem);
  align-items: end;
}
.worldwide h2 {
  font-size: clamp(2.5rem, 4.8vw + 0.6rem, 5.2rem);
  max-width: 20ch;
}
.worldwide .worldwide-copy p {
  color: var(--mist);
  max-width: 46ch;
}
.worldwide .worldwide-copy p + p { margin-top: 1.1rem; }
.worldwide .coords {
  margin-top: 2rem;
  color: var(--mist-2);
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Proof strip — four honest facts, gold value + one-line note per cell */
.proof {
  list-style: none;
  margin: clamp(2rem, 3.5vw, 3rem) 0 0;
  padding: 0;
  border-top: 1px solid var(--rule-d);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}
.proof li {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-top: 1rem;
}
.proof-value {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 500;
  font-variation-settings: "WONK" 0;
  font-size: 1.35rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--gold);
  text-wrap: balance;
}
.proof-note {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--mist-2);
}
.worldwide-chart {
  width: 100%;
  height: auto;
  margin-bottom: -3%;
}
.worldwide-media {
  margin-top: clamp(3.5rem, 6vw, 6rem);
}
.worldwide-media picture {
  display: block;
  width: 100%;
}
.worldwide-media img {
  width: 100%;
  aspect-ratio: 21 / 8;
  object-fit: cover;
  filter: grayscale(0.55) contrast(1.03) brightness(0.9) sepia(0.22);
}
.worldwide-media figcaption {
  padding-top: 0.9rem;
  color: var(--mist-2);
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}

/* Scroll-triggered chart draw */
@media (prefers-reduced-motion: no-preference) {
  .worldwide .arc-draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }
  .worldwide.in-view .arc-draw {
    animation: arcDraw 2s cubic-bezier(0.5, 0, 0.15, 1) 0.15s forwards;
  }
  .worldwide .node, .worldwide .node-ring {
    opacity: 0;
    transition: opacity 0.5s ease 1.6s;
  }
  .worldwide.in-view .node, .worldwide.in-view .node-ring { opacity: 1; }
}

/* ==========================================================================
   American Pharm — the house brand, treated like a maison label
   ========================================================================== */
.brand {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(3rem, 6vw, 7rem);
  align-items: center;
}
.brand-body .eyebrow { margin-bottom: 1.2rem; }
.brand h2 {
  font-size: clamp(2.4rem, 4vw + 0.6rem, 4.4rem);
}
.brand .brand-reg {
  font-size: 0.45em;
  vertical-align: super;
  letter-spacing: 0;
  color: var(--gold-deep-ink);
}
.brand-copy {
  margin-top: 1.6rem;
  color: var(--smoke);
  max-width: 44ch;
}
.brand-facts {
  margin-top: clamp(2.2rem, 4vw, 3.4rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.brand-facts div {
  border-left: 1px solid var(--gold);
  padding-left: 1.1rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink);
}
.brand-media {
  background: var(--paper-dim);
  border: 1px solid var(--rule-l);
  padding: clamp(1rem, 2vw, 1.75rem);
  position: relative;
}
.brand-media::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--gold-soft);
  pointer-events: none;
}
.brand-media picture { display: block; width: 100%; }
.brand-media img { width: 100%; height: auto; }
.brand-link {
  display: inline-flex;
  margin-top: clamp(2rem, 3.5vw, 3rem);
}

/* ==========================================================================
   How it works — affordance + small gold type
   Every step shows its one-line description at rest, so a full-contrast "+"
   on all four titles promised an accordion that never existed and was dropped.
   That left the four clickable steps with no visible affordance at all on
   touch, where there is no hover to reveal one. Restore a deliberately quiet
   at-rest marker: a small gold chevron at reduced contrast (the gold-deep ink
   at 0.5 alpha), which reads as "there is more here" without competing with
   the titles. Hover/focus swaps it for a full-contrast "+" and the expanded
   step shows "–". Both glyphs are always in the box and cross-fade on
   opacity, so nothing reflows and there is no layout shift on tap.
   ([aria-expanded] on the step is the programmatic state; the marks are
   decorative duplicates of it.)
   ========================================================================== */
.flow-step h3::before {
  content: "\203A";                 /* › */
  display: inline-block;
  margin-left: 0.5em;
  color: var(--gold-deep-ink);
  opacity: 0.5;
  font-family: var(--sans);
  font-weight: 500;
  transition: opacity 0.25s ease, color 0.25s ease;
}
.flow-step h3::after {
  content: "+";
  display: inline-block;
  width: 0;
  margin-left: 0;
  overflow: hidden;
  color: var(--gold-deep-ink);
  opacity: 0;
  font-family: var(--sans);
  font-weight: 500;
  transition: opacity 0.25s ease, width 0.25s ease, margin-left 0.25s ease;
}
/* Pointer or keyboard focus: the marker firms up and becomes a "+" */
.flow-step:hover h3::before,
.flow-step:focus-visible h3::before,
.flow-step:focus-within h3::before { opacity: 0; }

.flow-step:hover h3::after,
.flow-step:focus-visible h3::after,
.flow-step:focus-within h3::after {
  content: "+";
  width: 1ch;
  margin-left: 0.5em;
  opacity: 1;
}
/* Open step: the marker is the state, so it is always full contrast */
.flow-step[aria-expanded="true"] h3::before { content: none; }
.flow-step[aria-expanded="true"] h3::after {
  content: "–";
  width: 1ch;
  margin-left: 0.5em;
  opacity: 1;
}
.flow-step:hover h3,
.flow-step[aria-expanded="true"] h3 { color: var(--gold-deep-ink); }
.flow-step .step-num { color: var(--gold-deep-ink); }
.text-link-ink:hover { color: var(--gold-deep-ink); border-color: var(--gold-deep-ink); }

/* ==========================================================================
   Responsive — homepage
   ========================================================================== */
@media (max-width: 1020px) {
  .worldwide .worldwide-head { grid-template-columns: 1fr; align-items: start; }
  .worldwide-chart { max-width: 520px; margin-bottom: 0; }
  .brand { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .disciplines { grid-template-columns: 1fr; gap: 3rem; }
  /* Shared editorial indent: once the disciplines stack into one column they
     must hang off the same axis as the statement and its body copy, leaving
     the gold rule alone in the margin. */
  .discipline { padding-left: clamp(1.4rem, 3vw, 2.6rem); }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }
  .hero-chart { opacity: 0.4; }
  .hero-title { max-width: none; font-size: clamp(2.7rem, 13vw, 3.6rem); line-height: 1.04; }
  .hero-strip .hs-mid { display: none; }
  /* .hero-ctas mobile rules live in tf.css (shared with the 404 page) */
  .brand-facts { grid-template-columns: 1fr; gap: 1.1rem; }
  .brand-facts div { padding-block: 0.2rem; }
  .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem 1.25rem; }
  .proof-value { font-size: 1.2rem; }
  .worldwide-media img { aspect-ratio: 16 / 10; }
  .worldwide-media figcaption { flex-direction: column; gap: 0.3rem; }

  /* At 390px the hero copy stack is taller, so the kicker rides ~38% down the
     frame where the desktop top wash has already faded out. Hold it longer on
     small screens only, leaving the silhouettes in the middle band alone. The
     first layer restates the full-bleed veil from the base scrim: this media
     query replaces background-image wholesale, and the veil has to stay
     identical at every width for the worst-case floor to hold. */
  .hero-media::after {
    background-image:
      linear-gradient(rgba(10, 9, 8, 0.34), rgba(10, 9, 8, 0.34)),
      linear-gradient(to top,
        rgba(10, 9, 8, 0.94) 0%,
        rgba(10, 9, 8, 0.88) 12%,
        rgba(10, 9, 8, 0.72) 26%,
        rgba(10, 9, 8, 0.46) 42%,
        rgba(10, 9, 8, 0.14) 58%,
        rgba(10, 9, 8, 0) 78%),
      linear-gradient(to bottom,
        rgba(10, 9, 8, 0.88) 0%,
        rgba(10, 9, 8, 0.7) 16%,
        rgba(10, 9, 8, 0.52) 30%,
        rgba(10, 9, 8, 0.22) 42%,
        rgba(10, 9, 8, 0) 56%),
      linear-gradient(100deg,
        rgba(10, 9, 8, 0.42) 0%,
        rgba(10, 9, 8, 0.14) 46%,
        rgba(10, 9, 8, 0) 74%);
  }

  /* Comparison matrix, stacked. The desktop answer-diamond rule outranks the
     mobile one, so the ::before slot was still a 7px gold square: it swallowed
     the "With TradeForma" label, and the cell's own 2px gold border pushed its
     text 2px right of the "old way" axis. Reset it to a plain block label —
     which also brings the label back — and share one axis between the pair. */
  .compare .compare-row.with > div:last-child::before {
    content: "With TradeForma";
    display: block;
    width: auto;
    height: auto;
    background: none;
    transform: none;
    margin: 0 0 6px;
    color: var(--gold-deep-ink);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  /* One gold spine on the block itself — matching .flow-detail — instead of a
     2px border inside the answer cell that shifted its own left edge. */
  .compare { border-left: 2px solid var(--gold); }
  .compare-row .c-new { border-left: 0; }
}

/* Reduced motion — homepage-specific animation guards */
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; }
  .arc-draw { stroke-dashoffset: 0 !important; }
  .worldwide .node, .worldwide .node-ring { opacity: 1 !important; }
}