/*
 * Temperature Zero — About / Manifesto page (tz-about) — v1.0
 *
 * Bespoke layer for the rebuilt /about/ page (ID 3097). Loaded ONLY on 3097,
 * AFTER tz-system + landing-modules + landing-redesign, so it inherits the
 * dashboard palette/tokens and the shared ticker + subscribe-bar component
 * styling (the page renders inside a .tz-landing wrapper — see page-about.php).
 *
 * This file owns ONLY what the homepage doesn't already style: the split hero
 * with the T-0 banner + glow slot, the value-prop strip, the mission steps,
 * the two icon-card grids (varied --tz-c-* accents, set per-card via --acc),
 * the alignment block, and the honest "stance spectrum" diagram.
 *
 * Versioned filename bypasses CF ?ver= stripping. Rollback = dequeue tz-about.
 */

/* Manifesto prose is on the brand sans (Space Grotesk) for site-wide font
   consistency. --tz-serif is aliased to --tz-sans so EVERY element on the page
   (the explicit lede/mission/step refs and any inherited landing-module refs)
   renders in the brand sans instead of an off-brand, OS-dependent system serif.
   Changed 2026-06-19; prior system-serif stack preserved in tz-about.1.6.css. */
.tz-about { --tz-serif: var(--tz-sans); }

/* Shared contained reading width for the manifesto sections. */
.tz-about .tz-about__wrap { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }

/* Section eyebrow + lead line (mono kicker + section thesis) */
.tz-about .tz-about__eyebrow {
    font-family: var(--tz-mono);
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 0.55rem; margin: 0 0 1rem;
}
.tz-about .tz-about__eyebrow::before {
    content: ''; width: 7px; height: 7px; transform: rotate(45deg); border-radius: 1px;
    background: var(--tz-c-cyan); box-shadow: 0 0 8px var(--tz-c-cyan); flex: 0 0 auto;
}
.tz-about .tz-about__lead {
    font-family: var(--tz-sans); font-weight: 600;
    font-size: clamp(1.25rem, 2.3vw, 1.85rem); line-height: 1.28;
    letter-spacing: -0.015em; color: var(--tz-heading);
    max-width: 30ch; margin: 0 0 2.25rem;
}
.tz-about .tz-about__lead--wide { max-width: 46ch; }

/* ════════════════════════════════════════════════════════════
   1. HERO — split: copy left, T-0 banner + glow slot right.
   The placed banner is the section background (T-0 already sits on
   its right third); a right-hand figure slot with a soft glow is
   wired to assets/img/t0-hero.png for an optional transparent
   cutout overlay (drop the file in; it fades in over the banner).
   ════════════════════════════════════════════════════════════ */
.tz-about .tz-about-hero {
    position: relative; overflow: hidden;
    border-bottom: 1px solid var(--tz-border);
    background-image:
        linear-gradient(90deg, rgba(10,10,15,0.97) 0%, rgba(10,10,15,0.88) 36%, rgba(10,10,15,0.5) 62%, rgba(10,10,15,0.12) 100%),
        linear-gradient(0deg, rgba(10,10,15,0.55) 0%, rgba(10,10,15,0) 42%),
        url('../img/about-hero-banner.1.0.jpg');
    background-size: cover, cover, cover;
    background-position: center, center, right center;
    background-repeat: no-repeat;
}
.tz-about .tz-about-hero__inner {
    max-width: 1240px; margin: 0 auto; padding: clamp(3rem, 6vw, 5.5rem) 1.5rem;
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 2rem; align-items: center; min-height: clamp(440px, 54vh, 600px);
}
.tz-about .tz-about-hero__copy { position: relative; z-index: 2; }
.tz-about .tz-about-hero__headline {
    font-family: var(--tz-sans); font-weight: 700;
    font-size: clamp(2rem, 4.2vw, 3.35rem); line-height: 1.08;
    letter-spacing: -0.03em; color: var(--tz-heading);
    margin: 0; max-width: 18ch; text-wrap: balance;
}
.tz-about .tz-about-hero__lede {
    font-family: var(--tz-serif); color: var(--tz-text);
    font-size: clamp(1.02rem, 1.45vw, 1.2rem); line-height: 1.62;
    margin: 1.5rem 0 0; max-width: 54ch;
}
.tz-about .tz-about-hero__role {
    display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.9rem;
    padding: 0.5rem 0.95rem; border: 1px solid var(--tz-border);
    border-radius: 999px; background: rgba(13,13,22,0.6); backdrop-filter: blur(4px);
    font-family: var(--tz-mono); font-size: 11.5px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--tz-muted);
}
.tz-about .tz-about-hero__role { line-height: 1.4; max-width: 100%; }
/* never let the T-0 wordmark break at its hyphen ("T-" / "0") */
.tz-about .tz-about-hero__role b { color: var(--tz-c-cyan); font-weight: 500; white-space: nowrap; }
.tz-about .tz-about-hero__role .tz-about-hero__dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--tz-c-cyan);
    box-shadow: 0 0 8px var(--tz-c-cyan); animation: tz-pulse 2.2s ease-in-out infinite;
}
/* right figure slot — soft glow + optional transparent T-0 cutout */
.tz-about .tz-about-hero__figure {
    position: relative; align-self: stretch; min-height: 360px;
    display: flex; align-items: flex-end; justify-content: center;
}
.tz-about .tz-about-hero__figure::before {
    content: ''; position: absolute; inset: auto 0 6%; margin: auto;
    width: 78%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(74,240,200,0.22), rgba(85,171,234,0.10) 55%, transparent 75%);
    filter: blur(6px); pointer-events: none;
}
.tz-about .tz-about-hero__cutout {
    position: relative; z-index: 1; max-height: 92%; max-width: 100%;
    width: auto; object-fit: contain;
    filter: drop-shadow(0 24px 48px rgba(0,0,0,0.55));
}

/* ════════════════════════════════════════════════════════════
   2. VALUE PROPS — three-up strip under the hero.
   ════════════════════════════════════════════════════════════ */
.tz-about .tz-about-vp { border-bottom: 1px solid var(--tz-border); background: #07070d; }
.tz-about .tz-about-vp__grid {
    max-width: 1180px; margin: 0 auto; padding: 0 1.5rem;
    display: grid; grid-template-columns: repeat(3, 1fr);
}
.tz-about .tz-about-vp__item {
    padding: 1.9rem 1.6rem; display: flex; gap: 1rem; align-items: flex-start;
    border-right: 1px solid var(--tz-border);
}
.tz-about .tz-about-vp__item:last-child { border-right: none; }
.tz-about .tz-about-vp__icon { color: var(--acc, var(--tz-c-cyan)); flex: 0 0 auto; margin-top: 2px; }
.tz-about .tz-about-vp__icon svg { display: block; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--acc, var(--tz-c-cyan)) 45%, transparent)); }
.tz-about .tz-about-vp__title {
    font-family: var(--tz-sans); font-size: 1rem; font-weight: 700;
    color: var(--tz-heading); margin: 0 0 0.3rem; letter-spacing: -0.01em;
}
.tz-about .tz-about-vp__line { font-family: var(--tz-sans); font-size: 0.86rem; line-height: 1.5; color: var(--tz-muted); margin: 0; }

/* ════════════════════════════════════════════════════════════
   3. MISSION — centered statement + 01/02/03 steps.
   ════════════════════════════════════════════════════════════ */
.tz-about .tz-about-mission { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.tz-about .tz-about-mission__statement {
    font-family: var(--tz-serif); text-align: center; color: var(--tz-text);
    font-size: clamp(1.3rem, 2.5vw, 1.9rem); line-height: 1.45; letter-spacing: -0.01em;
    max-width: 46ch; margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}
.tz-about .tz-about-mission__statement b { color: var(--tz-heading); font-weight: 600; }
.tz-about .tz-about-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.tz-about .tz-about-step {
    background: var(--tzr-card); border: 1px solid var(--tz-border);
    border-radius: var(--tzr-radius); padding: 1.75rem 1.6rem;
    border-top: 2px solid var(--acc, var(--tz-c-cyan));
    transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.tz-about .tz-about-step:hover {
    box-shadow: 0 0 30px -10px color-mix(in srgb, var(--acc, var(--tz-c-cyan)) 70%, transparent);
    transform: translateY(-2px);
}
.tz-about .tz-about-step__num {
    font-family: var(--tz-mono); font-size: 0.95rem; font-variant-numeric: tabular-nums;
    background: var(--tzr-grad); background-size: 300% 100%;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    color: transparent; animation: tz-shimmer 7s linear infinite;
}
.tz-about .tz-about-step__title {
    font-family: var(--tz-sans); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em;
    color: var(--tz-heading); margin: 0.5rem 0 0.55rem;
}
.tz-about .tz-about-step__body { font-family: var(--tz-sans); font-size: 0.92rem; line-height: 1.6; color: var(--tz-muted); margin: 0; }

/* ════════════════════════════════════════════════════════════
   4. ICON-CARD GRIDS — Crossroads (diagnosis) + Stand For (response).
   Shared card; accent set per card via inline --acc.
   ════════════════════════════════════════════════════════════ */
.tz-about .tz-about-band { padding: clamp(3rem, 6vw, 5rem) 0; border-top: 1px solid var(--tz-border); }
.tz-about .tz-about-band--cross { background:
    radial-gradient(900px 460px at 18% -10%, rgba(232,146,58,0.06), transparent 60%),
    radial-gradient(820px 460px at 88% 0%, rgba(171,81,231,0.06), transparent 62%); }
.tz-about .tz-about-band--stand { background:
    radial-gradient(900px 460px at 12% -8%, rgba(74,240,200,0.07), transparent 60%),
    radial-gradient(820px 460px at 90% 4%, rgba(85,171,234,0.06), transparent 62%); }

/* Both bands hold exactly 5 cards: force one row spanning the same width as the
   other modules. minmax(0,1fr) lets columns shrink below content min so they
   never wrap (the old auto-fit/260px floor wrapped the 5th card to a new row). */
.tz-about .tz-about-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.85rem; }
.tz-about .tz-about-card {
    position: relative; background: var(--tzr-card); border: 1px solid var(--tz-border);
    border-radius: var(--tzr-radius); padding: 1.35rem 1.2rem; overflow: hidden;
    transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.tz-about .tz-about-card::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--acc, var(--tz-c-cyan)); opacity: 0.8;
}
.tz-about .tz-about-card:hover {
    border-color: color-mix(in srgb, var(--acc, var(--tz-c-cyan)) 45%, var(--tz-border));
    box-shadow: 0 0 34px -12px color-mix(in srgb, var(--acc, var(--tz-c-cyan)) 80%, transparent);
    transform: translateY(-2px);
}
.tz-about .tz-about-card__icon {
    color: var(--acc, var(--tz-c-cyan)); margin-bottom: 0.9rem;
    display: inline-flex; padding: 0.55rem; border-radius: var(--tzr-radius-sm);
    background: color-mix(in srgb, var(--acc, var(--tz-c-cyan)) 12%, transparent);
}
.tz-about .tz-about-card__icon svg { display: block; }
.tz-about .tz-about-card__title {
    font-family: var(--tz-sans); font-size: 1.08rem; font-weight: 700; letter-spacing: -0.01em;
    color: var(--tz-heading); margin: 0 0 0.45rem;
}
.tz-about .tz-about-card__body { font-family: var(--tz-sans); font-size: 0.9rem; line-height: 1.58; color: var(--tz-muted); margin: 0; }

/* ════════════════════════════════════════════════════════════
   5. ALIGNMENT — copy + stance spectrum + "Our focus" checklist.
   ════════════════════════════════════════════════════════════ */
.tz-about .tz-about-align { padding: clamp(3.5rem, 7vw, 6rem) 0; border-top: 1px solid var(--tz-border); }
.tz-about .tz-about-align__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.tz-about .tz-about-align__heading {
    font-family: var(--tz-sans); font-weight: 700; letter-spacing: -0.02em;
    font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.12; color: var(--tz-heading); margin: 0 0 1.4rem;
}
.tz-about .tz-about-align__body p {
    font-family: var(--tz-serif); color: var(--tz-text);
    font-size: 1.04rem; line-height: 1.68; margin: 0 0 1.1rem; max-width: 56ch;
}
.tz-about .tz-about-align__body p:last-child { margin-bottom: 0; }
.tz-about .tz-about-align__body em { color: var(--tz-heading); font-style: italic; }

/* Our focus checklist */
.tz-about .tz-about-focus { margin-top: 2rem; }
.tz-about .tz-about-focus__title {
    font-family: var(--tz-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--tz-muted); margin: 0 0 0.9rem;
}
.tz-about .tz-about-focus__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.tz-about .tz-about-focus__list li {
    display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.6rem; align-items: start;
    font-family: var(--tz-sans); font-size: 0.95rem; line-height: 1.5; color: var(--tz-text);
}
.tz-about .tz-about-focus__list li::before {
    content: '✓'; color: var(--tz-c-cyan); font-weight: 700; line-height: 1.5;
    text-shadow: 0 0 10px rgba(74,240,200,0.5);
}

/* Stance spectrum — honest diagram between two regressive poles */
.tz-about .tz-spectrum {
    background: var(--tzr-card-2); border: 1px solid var(--tz-border);
    border-radius: var(--tzr-radius); padding: 1.6rem 1.6rem 1.75rem; margin-bottom: 2rem;
}
.tz-about .tz-spectrum__kicker {
    font-family: var(--tz-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--tz-c-cyan); margin: 0 0 0.2rem;
}
.tz-about .tz-spectrum__note { font-family: var(--tz-sans); font-size: 0.82rem; color: var(--tz-muted); margin: 0 0 1.5rem; line-height: 1.5; }
.tz-about .tz-spectrum__poles { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.55rem; }
.tz-about .tz-spectrum__pole { flex: 0 1 40%; }
.tz-about .tz-spectrum__pole--right { text-align: right; }
.tz-about .tz-spectrum__pole-label { font-family: var(--tz-sans); font-size: 0.82rem; font-weight: 700; color: var(--tz-text); display: block; }
.tz-about .tz-spectrum__pole-cap { font-family: var(--tz-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tz-muted); }
.tz-about .tz-spectrum__pole--left .tz-spectrum__pole-cap { color: var(--tz-c-amber); }
.tz-about .tz-spectrum__pole--right .tz-spectrum__pole-cap { color: var(--tz-c-blue); }

.tz-about .tz-spectrum__bar {
    position: relative; height: 14px; border-radius: 7px; margin: 1.4rem 0 0;
    background: linear-gradient(90deg,
        var(--tz-c-amber) 0%, #6b5b46 26%, #2a3a44 50%, #3a5d72 74%, var(--tz-c-blue) 100%);
    /* gridline ticks */
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.tz-about .tz-spectrum__ticks { position: absolute; inset: 0; display: flex; justify-content: space-between; padding: 0 0; }
.tz-about .tz-spectrum__ticks span { width: 1px; background: rgba(10,10,15,0.5); }
.tz-about .tz-spectrum__marker {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
    display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
}
.tz-about .tz-spectrum__diamond {
    width: 20px; height: 20px; transform: rotate(45deg); border-radius: 3px;
    background: var(--tz-c-cyan);
    box-shadow: 0 0 0 4px rgba(10,10,15,0.85), 0 0 18px rgba(74,240,200,0.9);
    animation: tz-pulse 2.6s ease-in-out infinite;
}
.tz-about .tz-spectrum__flag {
    position: absolute; top: calc(50% + 22px); left: 50%; transform: translateX(-50%);
    white-space: nowrap; text-align: center;
}
.tz-about .tz-spectrum__flag-label { font-family: var(--tz-sans); font-size: 0.82rem; font-weight: 700; color: var(--tz-c-cyan); display: block; }
.tz-about .tz-spectrum__flag-sub { font-family: var(--tz-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tz-muted); }
.tz-about .tz-spectrum__zones {
    display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 4.5rem;
    font-family: var(--tz-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tz-muted);
}
.tz-about .tz-spectrum__zones span:nth-child(1) { text-align: left; }
.tz-about .tz-spectrum__zones span:nth-child(2) { text-align: center; color: var(--tz-c-cyan); }
.tz-about .tz-spectrum__zones span:nth-child(3) { text-align: right; }

/* ════════════════════════════════════════════════════════════
   6. CTA copy lead-in above the reused subscribe bar.
   ════════════════════════════════════════════════════════════ */
.tz-about .tz-section--newsletter-bottom { padding-top: clamp(3rem, 6vw, 5rem) !important; border-top: 1px solid var(--tz-border); }

/* ════════════════════════════════════════════════════════════
   7. Responsive
   ════════════════════════════════════════════════════════════ */
/* 5-across only holds at desktop; step the card grid down gracefully. */
@media (max-width: 1080px) { .tz-about .tz-about-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .tz-about .tz-about-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px)  { .tz-about .tz-about-cards { grid-template-columns: 1fr; } }

@media (max-width: 920px) {
    /* Mobile hero: keep T-0 BEHIND the text, but use a T-0-centered crop of the
       banner (about-hero-t0-mobile) instead of the wide banner — the wide one
       only fit a thin slice on a narrow column and cut off his head. Copy is
       bottom-aligned so his head/eyes read up top and the namecard sits beneath
       him. The gradient stays light over his face, darkening toward the copy. */
    .tz-about .tz-about-hero {
        background-image:
            linear-gradient(180deg, rgba(10,10,15,0.30) 0%, rgba(10,10,15,0.20) 26%, rgba(10,10,15,0.74) 64%, rgba(10,10,15,0.94) 100%),
            url('../img/about-hero-t0-mobile.1.0.jpg');
        background-size: cover, cover;
        background-position: center, 14% 16%;  /* position-x < 50% pushes T-0 RIGHT in frame; 14% ≈ 1.5 heads right of centre */
        background-repeat: no-repeat;
    }
    .tz-about .tz-about-hero__inner {
        grid-template-columns: 1fr; gap: 1.1rem;
        min-height: 82vh;           /* room for T-0 up top + copy + namecard low */
        align-content: end;          /* push copy to the bottom, beneath the figure */
        padding-top: 2rem; padding-bottom: 2.25rem;
    }
    .tz-about .tz-about-hero__figure { display: none; }
    .tz-about .tz-about-hero__role { margin-top: 1.25rem; }
    .tz-about .tz-about-vp__grid { grid-template-columns: 1fr; }
    .tz-about .tz-about-vp__item { border-right: none; border-bottom: 1px solid var(--tz-border); }
    .tz-about .tz-about-vp__item:last-child { border-bottom: none; }
    .tz-about .tz-about-steps { grid-template-columns: 1fr; }
    .tz-about .tz-about-align__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .tz-about .tz-spectrum__flag { left: 50%; }
    .tz-about .tz-spectrum__zones { font-size: 8.5px; }
}