/* ==========================================================================
   t3trends.com — single-report landing page (2027 edition, pre-order)

   Editorial system restored July 24, 2026 — ink/paper/brass, Fraunces +
   Newsreader, italic-for-emphasis, hairline rules, deliberately irregular
   block-to-block typography. This is the direction Stefan asked for
   specifically for this page: "we need to make some of the things
   headings and bigger font and sometimes capital, sometimes exclamation
   and then sometimes the copy a little left, a little right... to make
   the page visually think back on a typical infographics kind of [layout]."
   A prior pass replaced this with the flat T3 Sixty corporate system
   (Theinhardt, uniform weight-by-scale hierarchy) — technically correct
   brand usage, but it made the one report meant to look different from
   the rest of T3's collateral look exactly like the rest of T3's
   collateral. Size, weight, case, and alignment shift block to block on
   purpose below — some lines huge and centered, some small and offset —
   per Stefan's own framing: "how you lay it out almost doesn't matter."
   Page-specific styles only — theme.css must load first.
   ========================================================================== */

section{ padding:clamp(4.5rem,10vw,8rem) 0; position:relative; }

.t3t-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-family-body);
  font-weight:var(--font-weight-medium);
  font-size:11.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--color-brass);
  margin-bottom:22px;
}
.t3t-eyebrow .t3t-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--color-brass);
  animation:t3tPulse 1.8s ease-in-out infinite;
}
@keyframes t3tPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@media (prefers-reduced-motion:reduce){ .t3t-eyebrow .t3t-dot{ animation:none; } }
.t3t-hero-cta{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:24px; }
.t3t-trust-line{ font-size:13px; color:var(--color-ash-soft); }
.t3t-trust-line strong{ color:var(--color-ink); font-weight:var(--font-weight-medium); }

/* ==========================================================================
   INTRO COPY CAROUSEL — the four moments (CHANGE!, "22 years...",
   Acquisition Mania pt.1/2) cycle through this left column only; the
   report cover + buy button on the right (.t3t-intro-anchor) never move.
   Reuses the "22 Years..." section's own eyebrow/h2/body-paragraph format
   for every slide — no separate giant-type treatment — so cycling through
   them feels like one consistent voice, not four different designs.
   Simple display-toggle (assets/js/slider.js) rather than a sliding track:
   slide lengths vary ("Acquisition Mania!" vs. a full paragraph), and
   toggling avoids forcing every slide to a matched height. ========================================================================== */
.t3t-intro-carousel{ position:relative; }
/* Fixed-height slide area so the section (and the anchored book cover
   beside it) never resizes as the copy changes slide to slide — "Change
   Like You've Never Seen Before." (6-line body) vs. "Acquisition Mania!"
   (2-line body) would otherwise make the whole row jump. Sized to
   comfortably fit the longest slide (slide 1) at every breakpoint. */
/* Two-tier rather than one clamp: the layout itself changes at the 900px
   breakpoint (stacked full-width column below it, ~55% two-column width
   above), so natural content height doesn't scale monotonically with
   viewport width — a narrow phone (text wraps a lot despite small type)
   can need more room than a mid-size tablet (wider column, same type).
   Both tiers measured against the actual tallest slide at each range. */
.t3t-intro-carousel [data-slider-track]{ min-height:480px; }
@media (min-width:900px){
  .t3t-intro-carousel [data-slider-track]{ min-height:clamp(420px,40vw,540px); }
}
.t3t-ic-slide{ display:none; }
.t3t-ic-slide.is-active{ display:block; animation:t3tIcFadeIn .5s ease; }
@keyframes t3tIcFadeIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce){
  .t3t-ic-slide.is-active{ animation:none; }
}
/* Slide picker — bottom center of the whole section (spans both columns),
   not tucked into the copy column where it read oddly. */
.t3t-ic-controls{
  position:absolute;
  left:0; right:0; bottom:1.75rem;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
}
.t3t-slider-arrow{
  width:34px; height:34px;
  flex:none;
  border:1px solid var(--color-rule-dark);
  background:transparent;
  color:var(--color-bone);
  font-size:18px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.t3t-slider-arrow:hover{ background:var(--color-brass); border-color:var(--color-brass); color:var(--color-ink); }
.t3t-slider-dots{ display:flex; gap:10px; }
.t3t-slider-dot{
  width:8px; height:8px;
  border-radius:50%;
  border:1px solid var(--color-brass-dim);
  background:transparent;
  padding:0;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease, border-color .2s ease;
}
.t3t-slider-dot:hover{ border-color:var(--color-brass); }
.t3t-slider-dot.is-active{ background:var(--color-brass); border-color:var(--color-brass); transform:scale(1.3); }

/* ---------- Origin/credibility line ----------
   Editorial pull-quote treatment: a large decorative Fraunces quote mark
   behind the text, right-aligned quote, brass byline underneath. ---------- */
.t3t-origin-block{ background:var(--color-paper-soft); border-top:1px solid var(--color-rule-light); border-bottom:1px solid var(--color-rule-light); padding:clamp(3rem,7vw,4.5rem) 0; }
.t3t-origin-inner{ position:relative; text-align:left; }
.t3t-origin-mark{
  position:absolute;
  top:-2.5rem; left:0;
  font-family:var(--font-family-serif);
  font-style:italic;
  font-size:clamp(100px,14vw,200px);
  line-height:1;
  color:var(--color-brass-dim);
  z-index:0;
  user-select:none;
}
.t3t-origin-quote{ position:relative; z-index:1; margin:0; }
.t3t-origin-line{
  max-width:42em;
  margin:0;
  text-align:left;
  font-family:var(--font-family-serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(18px,2.1vw,23px);
  line-height:1.5;
  color:var(--color-ink);
}

/* ---------- Product reveal ---------- */
.t3t-reveal-block{ text-align:center; padding-top:clamp(3.5rem,7vw,5rem); }
.t3t-reveal-rule-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(1rem,3vw,2rem);
  margin-top:1.25rem;
}
.t3t-reveal-rule{ flex:1 1 auto; max-width:9rem; height:1px; background:var(--color-rule-light); }
.t3t-reveal-headline{
  font-size:clamp(40px,7.5vw,90px);
  font-weight:600;
  letter-spacing:-.01em;
  margin:0;
  white-space:nowrap;
}
.t3t-reveal-sub{
  font-family:var(--font-family-serif);
  font-style:italic;
  font-weight:300;
  font-size:clamp(17px,2vw,21px);
  color:var(--color-ash);
  margin:0;
}

/* ---------- Intro (folded-in former hero) ---------- */
.t3t-intro{ position:relative; overflow:hidden; background:var(--color-ink); color:var(--color-bone); padding:clamp(4rem,8vw,6rem) 0 clamp(6rem,10vw,8rem); }
.t3t-intro .t3t-eyebrow{ color:var(--color-brass-light); }
.t3t-intro-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(2.5rem,5vw,4.5rem);
  align-items:center;
}
.t3t-intro-grid > *{ min-width:0; }
@media (max-width:900px){ .t3t-intro-grid{ grid-template-columns:1fr; gap:2.5rem; } }
.t3t-intro-grid h2{
  color:var(--color-bone);
  font-size:clamp(28px,4.4vw,var(--text-display-lg));
  line-height:1.06;
  letter-spacing:-.02em;
  margin-bottom:1.4rem;
}
.t3t-intro-sub{
  font-family:var(--font-family-serif);
  font-style:italic;
  font-weight:300;
  font-size:clamp(1.05rem,1.6vw,1.3rem);
  line-height:1.5;
  color:var(--color-ash-soft);
  max-width:34em;
  margin-bottom:2.2rem;
}
.t3t-intro .t3t-trust-line{ color:var(--color-ash-soft); margin-top:.75rem; }
.t3t-intro .t3t-trust-line strong{ color:var(--color-bone); }
.t3t-intro-carousel .t3t-hero-cta{ margin-top:1.75rem; margin-bottom:0; }
/* This one button gets the reintroduced T3 blue instead of brass — it was
   getting lost against the dark ink/brass palette here specifically, and
   blue reads as the more "normal page," unmissable action button. Scoped
   to this button only, not a site-wide reversion. */
.t3t-btn-blue{
  background:var(--color-accent-blue);
  border-color:var(--color-accent-blue);
  color:var(--color-bone);
}
.t3t-btn-blue:hover{ background:var(--color-accent-blue-light); border-color:var(--color-accent-blue-light); }

/* ---------- Rotating section background (per-slide) ----------
   Four crops/tints of the same cover-photo abstract painting (the book
   cover's photo, reused here instead of the old skyline shot so the
   carousel and the cover read as one visual system). Crossfades via
   opacity (the same image URL underneath each layer means
   background-position itself could almost transition too, but the
   opacity crossfade reads more cleanly with the tint change happening
   at the same time). Synced to the active text slide by slider.js via
   [data-slider-bg-layer]. ---------- */
.t3t-ic-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.t3t-ic-bg-layer{
  position:absolute;
  inset:0;
  opacity:0;
  background-image:url('../images/sourced/cover-photo.jpg');
  background-repeat:no-repeat;
  background-size:cover;
  transition:opacity 1.1s ease;
}
.t3t-ic-bg-layer.is-active{ opacity:1; }
.t3t-ic-bg-layer::after{ content:''; position:absolute; inset:0; }
/* Slide 1 — Change: warm brass tint, matches the original CHANGE! block. */
/* All four now use the same prominent diagonal-linear-gradient style as
   slide 3 (the one that read best) — near-black at the start, a distinct
   tint color at the end, each slide's own color. */
.t3t-ic-bg-layer:nth-of-type(1){ background-position:25% 30%; }
.t3t-ic-bg-layer:nth-of-type(1)::after{
  background:
    radial-gradient(ellipse 60% 50% at 15% 0%, rgba(184,137,90,.18), transparent 65%),
    linear-gradient(100deg, rgba(11,12,16,.95) 0%, rgba(11,12,16,.88) 55%, rgba(184,137,90,.3) 100%);
}
/* Slide 2 — 22 Years: ash tint. */
.t3t-ic-bg-layer:nth-of-type(2){ background-position:60% 55%; }
.t3t-ic-bg-layer:nth-of-type(2)::after{
  background:
    linear-gradient(100deg, rgba(11,12,16,.95) 0%, rgba(20,19,17,.88) 55%, rgba(90,84,76,.4) 100%);
}
/* Slide 3 — Acquisition Mania: blue tint, ties to the reintroduced accent blue. */
.t3t-ic-bg-layer:nth-of-type(3){ background-position:80% 15%; }
.t3t-ic-bg-layer:nth-of-type(3)::after{
  background:
    linear-gradient(100deg, rgba(8,14,20,.95) 0%, rgba(15,35,55,.88) 55%, rgba(39,107,180,.3) 100%);
}
/* Slide 4 — Bedfellows Redefined: brass again, different crop/angle. */
.t3t-ic-bg-layer:nth-of-type(4){ background-position:40% 75%; }
.t3t-ic-bg-layer:nth-of-type(4)::after{
  background:
    radial-gradient(ellipse 55% 45% at 85% 100%, rgba(184,137,90,.16), transparent 65%),
    linear-gradient(80deg, rgba(11,12,16,.95) 0%, rgba(11,12,16,.88) 55%, rgba(184,137,90,.3) 100%);
}
@media (prefers-reduced-motion:reduce){
  .t3t-ic-bg-layer{ transition:none; }
}

/* ---------- Report cover ----------
   The established Trends Report cover pattern (matched from the parallel
   session's work, reusing the same sourced photo rather than re-fetching):
   full-bleed real photo, a solid opaque ink panel anchored to the bottom
   holding all the type, never a gradient over the photo itself. The photo
   layer gets the depth-layer parallax treatment so the panel reads as a
   physically separate plane in front of it on scroll. ---------- */
.t3t-coverblock{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  border:1px solid var(--color-ash-soft);
  box-shadow:var(--shadow-soft);
}
.t3t-coverblock-photo{
  position:absolute;
  top:-6%; bottom:-6%; left:0; right:0;
  /* Free (not Unsplash+) photo — "multicolored abstract painting",
     unsplash.com/photos/multicolored-abstract-painting-QwoNAhbmLLo. */
  background:url('../images/sourced/cover-photo.jpg') center center / cover no-repeat;
}
.t3t-coverblock-panel{
  position:absolute;
  left:0; right:0; bottom:0;
  background:var(--color-ink);
  color:var(--color-bone);
  padding:clamp(20px,3vw,32px);
  display:flex;
  flex-direction:column;
  gap:18px;
  border-top:1px solid var(--color-brass-dim);
}
.t3t-coverblock-status{
  font-family:var(--font-family-body);
  font-size:10px;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--color-brass-dim);
}
.t3t-coverblock-title{
  font-family:var(--font-family-serif);
  font-style:italic;
  font-size:clamp(24px,3vw,34px);
  font-weight:400;
  line-height:1.12;
  color:var(--color-bone);
  margin:0;
}
.t3t-coverblock-title strong{ display:block; font-weight:500; font-style:normal; color:var(--color-brass-light); margin-top:6px; }
.t3t-coverblock-foot{ display:flex; align-items:center; gap:10px; }
.t3t-coverblock-foot img{ height:22px; width:auto; filter:brightness(0) invert(1); opacity:.7; }
.t3t-coverblock-foot span{
  font-family:var(--font-family-body);
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--color-brass-light);
}
.t3t-coverblock-caption{
  text-align:center;
  font-size:12.5px;
  color:var(--color-ash-soft);
  margin-top:16px;
}

/* ---------- Meta strip ---------- */
.t3t-meta-strip{ background:var(--color-paper-soft); border-top:1px solid var(--color-rule-light); border-bottom:1px solid var(--color-rule-light); padding:22px 0; }
.t3t-meta-strip-inner{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 30px;
  font-family:var(--font-family-body);
  font-size:12px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--color-ash);
  text-align:center;
}
.t3t-meta-strip-inner strong{ color:var(--color-ink); font-weight:600; }

/* ---------- Section head ---------- */
.t3t-section-head{ max-width:44rem; margin:0 auto 3.5rem; text-align:center; }
.t3t-section-head .t3t-kicker{ display:block; margin-bottom:10px; }
.t3t-section-head h2{ font-size:clamp(26px,3.6vw,var(--text-heading-xl)); }
.t3t-section-head p{
  font-family:var(--font-family-serif);
  font-style:italic;
  font-weight:300;
  font-size:clamp(1.05rem,1.6vw,1.3rem);
  color:var(--color-ash);
}

/* ---------- Value props: three columns, roman-numeral hierarchy ---------- */
.t3t-value-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(2rem,4vw,3.5rem);
}
@media (max-width:760px){ .t3t-value-grid{ grid-template-columns:1fr; gap:2.5rem; } }
.t3t-value-col{ border-top:1px solid var(--color-rule-light); padding-top:1.6rem; }
.t3t-value-col h3{ font-size:1.35rem; margin-bottom:.6rem; }
.t3t-value-col p{ font-size:15px; color:var(--color-ash); }

/* ---------- Positioning section (headline + bordered brass panel,
   adapting tinus.com's manifesto pattern) ----------
   Keeps its paper-soft background color, with a muted grayscale photo
   and a warm sand-toned gradient laid over it — two separate pseudo-
   elements so the gradient keeps its own color rather than being
   desaturated along with the photo underneath it. ---------- */
.t3t-position{ position:relative; overflow:hidden; background:var(--color-paper-soft); }
.t3t-position::before{
  content:'';
  position:absolute; inset:0;
  background:url('../images/hero-desk-bg.jpg') center 35% / cover no-repeat;
  filter:grayscale(1);
  opacity:.22;
  z-index:0;
}
.t3t-position::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(120deg, var(--color-paper-soft) 0%, rgba(184,137,90,.22) 48%, var(--color-paper-soft) 100%);
  z-index:0;
}
.t3t-position-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,5vw,4.5rem);
  align-items:start;
}
.t3t-position-grid > *{ min-width:0; }
@media (max-width:860px){ .t3t-position-grid{ grid-template-columns:1fr; gap:2.5rem; } }
.t3t-position-grid h2{ font-size:clamp(28px,4vw,var(--text-heading-xl)); font-style:italic; }
.t3t-position-copy{ border-top:1px solid var(--color-brass); padding-top:1.6rem; }
.t3t-position-copy p{ font-size:16.5px; line-height:1.65; color:var(--color-ash); }
.t3t-position-copy p + p{ margin-top:1em; }

/* ---------- Team photo block ----------
   Large muted "T360" wordmark set in FT T360, bottom-right, matching the
   "About T3 Sixty" block treatment on t360.com's own homepage — pushed
   down via transform so only its top ~70% shows before the section's
   own overflow:hidden clips the rest. ---------- */
.t3t-team-block{ position:relative; overflow:hidden; background:var(--color-paper); }
.t3t-team-block::before{
  content:'T360';
  position:absolute;
  right:clamp(-10px,2vw,40px);
  bottom:0;
  transform:translateY(20%);
  font-family:var(--font-family-logo);
  font-weight:400;
  font-size:clamp(240px,30vw,480px);
  line-height:1;
  color:var(--color-ink);
  opacity:.035;
  z-index:0;
  pointer-events:none;
  user-select:none;
}
.t3t-team-block > .container{ position:relative; z-index:1; }
.t3t-team-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(1rem,2.4vw,1.75rem);
  margin-bottom:2rem;
}
@media (max-width:760px){ .t3t-team-grid{ grid-template-columns:repeat(2,1fr); } }
.t3t-team-card{ margin:0; text-align:center; }
.t3t-team-card img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  background:var(--color-paper-soft);
  border-radius:50%;
  border:1px solid var(--color-rule-light);
}
.t3t-team-card--placeholder{ display:flex; flex-direction:column; align-items:center; }
.t3t-team-initials{
  width:100%;
  aspect-ratio:1/1;
  border-radius:50%;
  background:var(--color-paper-deep);
  border:1px solid var(--color-brass-dim);
  color:var(--color-brass);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-family-serif);
  font-style:italic;
  font-size:clamp(22px,3vw,32px);
  font-weight:500;
}
.t3t-team-card figcaption{
  margin-top:14px;
  font-family:var(--font-family-body);
  font-size:13px;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--color-ink);
}
.t3t-team-history{
  max-width:44em;
  margin:0 auto;
  text-align:center;
  font-family:var(--font-family-serif);
  font-style:italic;
  font-size:14.5px;
  color:var(--color-ash);
}
.t3t-team-history em{ font-style:normal; color:var(--color-brass); }

/* ---------- Macro closing / final CTA (merged: this is now the page's
   one terminal block — the "player or audience" question and the "lock in
   pricing" line both live here, ending on the report/buy button per
   Stefan's own rule, not a bare statement). ---------- */
/* Same cover-photo crop/gradient treatment as carousel slide 4
   (.t3t-ic-bg-layer:nth-of-type(4)) — ties the page's closing block back
   to its opening one visually. */
.t3t-macro-block{
  color:var(--color-bone);
  text-align:center;
  background:
    radial-gradient(ellipse 55% 45% at 85% 100%, rgba(184,137,90,.16), transparent 65%),
    linear-gradient(80deg, rgba(11,12,16,.95) 0%, rgba(11,12,16,.88) 55%, rgba(184,137,90,.3) 100%),
    url('../images/sourced/cover-photo.jpg') 40% 75% / cover no-repeat;
}
.t3t-macro-lead{
  max-width:36em;
  margin:0 auto 1.5rem;
  font-size:clamp(21px,2.8vw,30px);
  font-style:italic;
  font-weight:300;
  line-height:1.4;
  color:var(--color-bone);
}
.t3t-macro-question{
  max-width:32em;
  margin:0 auto 2rem;
  font-family:var(--font-family-serif);
  font-style:italic;
  font-size:clamp(20px,2.6vw,28px);
  font-weight:500;
  color:var(--color-brass-light);
}
.t3t-macro-block .t3-btn-primary{ margin-top:.5rem; }

/* ---------- Pricing (merged what's-included + phased schedule + calculator,
   index.html only — light background, "dark is too much" per direction).
   bulk.html keeps its own separate dark .t3t-reserve section below,
   untouched — these are deliberately parallel, not shared. ---------- */
.t3t-pricing{ position:relative; overflow:hidden; background:var(--color-paper-soft); }
.t3t-pricing::before{
  content:'';
  position:absolute; inset:0;
  background:url('../images/sourced/cover-photo.jpg') center 30% / cover no-repeat;
  filter:grayscale(1) sepia(.4) brightness(1.15) contrast(.9);
  opacity:.07;
  z-index:0;
}
.t3t-pricing-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(2.5rem,5vw,4.5rem);
  align-items:center;
}
.t3t-pricing-grid > *{ min-width:0; }
@media (max-width:900px){ .t3t-pricing-grid{ grid-template-columns:1fr; gap:2.5rem; } }
.t3t-pricing-copy{ text-align:left; }
.t3t-pricing-copy p{ font-size:16.5px; color:var(--color-ash); }
.t3t-pricing-copy .t3t-pricing-note{
  font-family:var(--font-family-body);
  font-size:13px;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--color-brass);
}

/* ---------- Pre-order / calculator panel (bulk.html) ---------- */
.t3t-reserve{ background:var(--color-ink); color:var(--color-bone); }
.t3t-reserve-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(2.5rem,5vw,4.5rem);
  align-items:center;
}
.t3t-reserve-grid > *{ min-width:0; }
@media (max-width:900px){ .t3t-reserve-grid{ grid-template-columns:1fr; gap:2.5rem; } }
.t3t-reserve h2{ color:var(--color-bone); font-size:clamp(24px,3.2vw,var(--text-heading-xl)); font-style:italic; }
.t3t-reserve-copy p{ font-family:var(--font-family-serif); font-style:italic; font-weight:300; color:var(--color-ash-soft); font-size:1.05rem; }
.t3t-countdown{
  display:flex;
  gap:1px;
  margin-top:1.75rem;
  background:var(--color-rule-dark);
  width:fit-content;
}
.t3t-countdown-cell{
  background:var(--color-ink-soft);
  padding:16px 20px;
  text-align:center;
  min-width:64px;
}
.t3t-countdown-cell .t3t-cd-num{
  font-family:var(--font-family-serif);
  font-size:26px;
  font-weight:500;
  color:var(--color-bone);
  font-variant-numeric:tabular-nums;
}
.t3t-countdown-cell .t3t-cd-label{
  font-family:var(--font-family-body);
  font-size:9.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--color-ash-soft);
}
.t3t-countdown-label{ margin-top:10px; font-family:var(--font-family-body); font-size:12px; color:var(--color-ash-soft); }

/* Explicit dark background (not just inherited from a dark parent section)
   so this reads correctly as a self-contained "island" card now that
   index.html's pricing section runs on a light background — bulk.html's
   own dark .t3t-reserve section is unaffected (redundant but harmless). */
.t3t-reserve-card{
  background:var(--color-ink);
  border:1px solid var(--color-rule-dark);
  padding:clamp(1.8rem,3vw,2.6rem);
  color:var(--color-bone);
  box-shadow:var(--shadow-soft);
}
.t3t-reserve-card .t3t-rc-label{ display:block; font-family:var(--font-family-body); font-size:11.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--color-brass-light); margin-bottom:10px; }
.t3t-reserve-card .t3t-rc-price{ font-family:var(--font-family-serif); font-size:2.4rem; font-weight:400; color:var(--color-bone); line-height:1; }
.t3t-reserve-card .t3t-rc-was{ font-family:var(--font-family-serif); font-size:.95rem; color:var(--color-ash-soft); margin-left:8px; }
.t3t-reserve-card ul{
  list-style:none;
  margin:24px 0 28px;
  padding:20px 0 0;
  border-top:1px solid var(--color-rule-dark);
  display:grid;
  gap:12px;
}
.t3t-reserve-card ul li{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:13.5px;
  color:var(--color-ash-soft);
}
.t3t-reserve-card ul li svg{ flex:none; color:var(--color-brass-light); margin-top:2px; }
.t3t-reserve-card .t3-btn-primary{ width:100%; }

/* ---------- Calculator controls ---------- */
.t3t-calc-qty-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; }
.t3t-calc-qty-label{ font-family:var(--font-family-body); font-size:12.5px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--color-ash-soft); }
.t3t-calc-stepper{ display:flex; align-items:center; border:1px solid var(--color-rule-dark); overflow:hidden; }
.t3t-calc-step{
  width:36px; height:36px;
  border:none;
  background:var(--color-ink-soft);
  color:var(--color-bone);
  font-size:18px;
  cursor:pointer;
}
.t3t-calc-step:hover{ background:var(--color-brass); color:var(--color-ink); }
.t3t-calc-stepper input{
  width:56px;
  height:36px;
  border:none;
  border-left:1px solid var(--color-rule-dark);
  border-right:1px solid var(--color-rule-dark);
  background:var(--color-ink-soft);
  text-align:center;
  font-family:var(--font-family-serif);
  font-size:16px;
  color:var(--color-bone);
  -moz-appearance:textfield;
}
.t3t-calc-stepper input::-webkit-outer-spin-button,
.t3t-calc-stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.t3t-calc-price-row{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.t3t-calc-savings{ font-family:var(--font-family-body); font-size:13px; color:var(--color-brass-light); font-weight:500; margin-top:6px; margin-bottom:1.25rem; }
.t3t-calc-company{ margin-bottom:1.25rem; }
.t3t-calc-company label{ display:block; font-family:var(--font-family-body); font-size:12px; font-weight:500; letter-spacing:.04em; color:var(--color-ash-soft); margin-bottom:6px; }
.t3t-calc-company input{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--color-rule-dark);
  background:var(--color-ink-soft);
  color:var(--color-bone);
  font-family:var(--font-family-body);
  font-size:14px;
}
.t3t-team-link{
  display:block;
  text-align:center;
  margin-top:16px;
  font-family:var(--font-family-body);
  font-size:13px;
  font-weight:500;
  color:var(--color-brass-light);
  text-decoration:none;
}
.t3t-team-link:hover{ text-decoration:underline; }

/* ---------- Sale-phase gating ----------
   The calculator itself always stays fully interactive — visitors need to
   be able to enter a quantity and see live pricing regardless of phase
   (this was previously disabled with pointer-events:none during the
   "prelaunch" phase, which broke the calculator entirely before Aug 7).
   Only the phase heading/copy text changes; nothing here blocks input. ---------- */

/* ---------- Final CTA heading (the macro-block now doubles as
   .t3t-final-cta — see the macro block above — so this h2 rule is what
   styles "Lock In 2027 Pricing Before the Price Increases.") ---------- */
.t3t-final-cta h2{ color:var(--color-bone); font-size:clamp(26px,3.6vw,var(--text-display)); font-style:italic; margin-bottom:1.5rem; }

/* ---------- FAQ / contact dialogs ---------- */
.t3t-dialog{
  border:1px solid var(--color-rule-light);
  border-radius:0;
  padding:0;
  max-width:640px;
  width:90vw;
  max-height:85vh;
  box-shadow:var(--shadow-soft);
  background:var(--color-paper);
  color:var(--color-ink);
}
.t3t-dialog::backdrop{ background:rgba(18,19,25,.6); }
.t3t-dialog-inner{ position:relative; padding:clamp(1.75rem,4vw,2.75rem); overflow-y:auto; max-height:85vh; }
.t3t-dialog-close{
  position:absolute;
  top:16px; right:16px;
  width:32px; height:32px;
  border:1px solid var(--color-rule-light);
  background:transparent;
  border-radius:50%;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  color:var(--color-ink);
}
.t3t-dialog-close:hover{ background:var(--color-brass); border-color:var(--color-brass); color:var(--color-bone); }
.t3t-dialog h2{ font-style:italic; }
.t3t-dialog form{ margin-top:20px; display:grid; gap:16px; }
.t3t-dialog .t3t-field label{ display:block; font-family:var(--font-family-body); font-size:12px; font-weight:500; letter-spacing:.04em; color:var(--color-ash); margin-bottom:6px; }
.t3t-dialog .t3t-field input,
.t3t-dialog .t3t-field textarea{
  width:100%;
  padding:11px 12px;
  border:1px solid var(--color-rule-light);
  background:var(--color-paper);
  color:var(--color-ink);
  font-family:var(--font-family-body);
  font-size:14px;
  resize:vertical;
}
.t3t-contact-status{ font-size:13.5px; color:var(--color-ash); margin-top:4px; }
.t3t-optional{ color:var(--color-ash-soft); font-weight:400; font-style:italic; }

/* ---------- Team pricing (inside dialog) ---------- */
.t3t-bulk-tiers-mini{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin:22px 0;
  padding:20px 0;
  border-top:1px solid var(--color-rule-light);
  border-bottom:1px solid var(--color-rule-light);
}
@media (max-width:520px){ .t3t-bulk-tiers-mini{ grid-template-columns:1fr; } }
.t3t-bulk-tier-mini{ text-align:center; }
.t3t-bulk-tier-mini .t3t-bulk-tier-range{ display:block; font-family:var(--font-family-body); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--color-ash); margin-bottom:6px; }
.t3t-bulk-tier-mini .t3t-bulk-tier-price{ font-family:var(--font-family-serif); font-size:1.5rem; font-weight:500; color:var(--color-ink); }
.t3t-bulk-tier-mini .t3t-bulk-tier-price span{ font-family:var(--font-family-body); font-size:13px; font-weight:400; font-style:italic; color:var(--color-ash); }
.t3t-team-pricing-calc .t3t-calc-stepper,
.t3t-team-pricing-calc .t3t-calc-step,
.t3t-team-pricing-calc .t3t-calc-stepper input,
.t3t-team-pricing-calc .t3t-calc-company input{
  background:var(--color-paper);
  color:var(--color-ink);
  border-color:var(--color-rule-light);
}
.t3t-team-pricing-calc .t3t-calc-step:hover{ background:var(--color-accent-blue); color:var(--color-bone); }
.t3t-team-pricing-calc .t3t-rc-price{ font-family:var(--font-family-serif); font-size:2rem; color:var(--color-ink); }
.t3t-team-pricing-calc .t3t-rc-was{ font-family:var(--font-family-serif); font-size:.9rem; color:var(--color-ash); margin-left:8px; }

/* ---------- FAQ (inside dialog) ---------- */
.t3t-faq{ max-width:42rem; margin:0 auto; }
.t3t-faq details{ border-bottom:1px solid var(--color-rule-light); padding:22px 0; }
.t3t-faq summary{
  cursor:pointer;
  font-family:var(--font-family-serif);
  font-weight:400;
  font-size:19px;
  color:var(--color-ink);
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.t3t-faq summary::-webkit-details-marker{ display:none; }
.t3t-faq summary::after{ content:'+'; font-family:var(--font-family-serif); font-style:italic; font-size:22px; color:var(--color-brass); flex:none; }
.t3t-faq details[open] summary::after{ content:'\2212'; }
.t3t-faq p{ margin:14px 0 0; font-size:15px; color:var(--color-ash); }

/* ---------- Legal pages (privacy policy, terms of service) ---------- */
.t3t-legal{ background:var(--color-paper); padding:clamp(3rem,7vw,5rem) 0; }
.t3t-legal-inner{ max-width:42rem; margin:0 auto; }
.t3t-legal-inner h1{ font-size:clamp(32px,4.5vw,var(--text-display)); margin-bottom:1.25rem; }
.t3t-legal-updated{ font-size:14px; color:var(--color-ash); padding-bottom:1.75rem; margin-bottom:1.75rem; border-bottom:1px solid var(--color-rule-light); }
.t3t-legal-updated a{ color:var(--color-brass); }
.t3t-legal-inner h2{ font-size:clamp(19px,2.4vw,24px); margin-top:2.25rem; margin-bottom:.6rem; }
.t3t-legal-inner p{ font-size:15.5px; line-height:1.7; color:var(--color-ash); }

/* ---------- Footer ---------- */
.t3t-footer{ background:#110F13; color:var(--color-ash-soft); padding:36px 0; font-family:var(--font-family-body); font-size:12.5px; letter-spacing:.02em; }
.t3t-footer-inner{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.t3t-footer a{ color:var(--color-ash-soft); text-decoration:none; }
.t3t-footer a:hover{ color:var(--color-brass-light); }
.t3t-footer-links{ display:flex; gap:22px; flex-wrap:wrap; }
.t3t-footer-social{ display:flex; gap:16px; align-items:center; }
.t3t-footer-social a{ display:flex; color:var(--color-ash-soft); }
.t3t-footer-social a:hover{ color:var(--color-brass-light); }

/* ---------- Depth / parallax + scroll-reveal utilities ----------
   Carried over from origin/main (assets/js/depth.js drives these):
   .t3t-depth-layer elements get a --depth-offset custom property from
   scroll position, translated at a different rate than surrounding
   content — applied to the two real-photo layers (CHANGE!'s backdrop,
   the report cover) so the solid ink in front of each reads as a
   separate plane. .t3t-reveal/.is-visible is a lighter scroll-triggered
   fade-in, applied to the reserve panel. ---------- */
.t3t-depth-layer{
  transform:translate3d(0, calc(var(--depth-offset, 0px) * -1), 0);
  will-change:transform;
}
.t3t-reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .6s ease, transform .6s ease;
}
.t3t-reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion:reduce){
  .t3t-depth-layer{ transform:none !important; }
  .t3t-reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- Sticky mobile CTA bar ---------- */
.t3t-sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:600;
  background:var(--color-ink);
  border-top:1px solid var(--color-rule-dark);
  padding:12px 16px;
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.t3t-sticky-cta .t3t-sc-price{ font-family:var(--font-family-serif); font-weight:500; color:var(--color-bone); font-size:16px; }
.t3t-sticky-cta .t3t-sc-was{ font-size:11.5px; color:var(--color-ash-soft); text-decoration:line-through; display:block; }
.t3t-sticky-cta .t3-btn-primary{ padding:12px 20px; font-size:11px; }
/* Shown/hidden via landing.js toggling .is-visible (hero CTA offscreen AND
   final CTA not yet reached) rather than a blanket "always on below 760px"
   media query — the earlier always-on version is what caused the mobile
   overscroll gap (padding reserved for a bar that wasn't actually shown at
   the bottom of the page), fixed alongside origin/main 249b6bf. */
@media (max-width:760px){
  .t3t-sticky-cta.is-visible{ display:flex; }
  body.t3t-sticky-visible{ padding-bottom:76px; }
}