/* ============================================================================
   CALLING CARD — threattape.com homepage redesign (2026-05-24)

   Scope: layout + typography for the new IA. The parent brand chrome
   (nav, footer, threat-tape stripes) stays in aesthetics.css.

   AESTHETIC: industrial menace, disciplined.
   Kevin's brief 2026-05-24: blast-rated equipment plate / nuclear-facility
   warning sign, NOT horror band poster. Menace from heavy materials +
   confidence, not distress effects smeared everywhere. Polish stays --
   that polish is what makes a CISO trust the brand before the attitude
   lands.

   Type pair (Jekyll/Hyde tension):
     - HYDE: Anton (extra-bold condensed sans, no stencil cuts) for the
       wordmark and major headlines. Big Shoulders Stencil Display 900
       for the tagline on the yellow tape strip and eyebrow microcopy.
       Locked 2026-05-24 after the Black Ops One reject -- Anton reads
       blast-rated equipment plate, not video-game band-poster.
     - JEKYLL: Nunito for identity beats, body copy, credentials. Clean,
       readable, board-room-safe.

   Palette: oil-black / phosphor-green / caution-yellow (locked). The
   palette is already warning-label coloring. Surfaces and textures
   carry the industrial weight; the color stays consistent.

   Sections:
     1. Industrial surfaces (concrete + metal) -- reusable utility
     2. Hero (tape-mounted wordmark on concrete)
     3. Caution-tape divider (the "promoted tape motif" -- not a thin
        accent, an actual physical-looking material divider)
     4. Services (riveted industrial plates on brushed metal)
     5. Contact (Grimmy CTA at page foot)
     6. Tape rule utility (kept for any 2px structural lines elsewhere)
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Big+Shoulders+Stencil+Display:wght@400;700;900&family=IBM+Plex+Mono:wght@400;500;600;700&family=Nunito:wght@400;500;600;700;800;900&display=swap');

/* ----------------------------------------------------------------------------
   Palette refs from aesthetics.css for reference (don't redefine):
     --tt-ink-0   #0a0908  oil-black base
     --tt-ink-1   #15120e  warm surface
     --tt-bone-0  #f2e9d8  ivory
     --tt-bone-1  #c7b89c  secondary ivory
     --tt-phosphor #3ff080 phosphor green (primary)
     --tt-caution #fac638  caution-yellow (highlight)
   ---------------------------------------------------------------------------- */

/* Local utility token for deeper phosphor used in pressed-button base shadow */
:root {
    --tt-phosphor-deep: #1fb056;
    --tt-rivet: rgba(255, 255, 255, 0.04);
}

/* ----------------------------------------------------------------------------
   1) INDUSTRIAL SURFACES — reusable material utilities
   ---------------------------------------------------------------------------- */
.surface-concrete {
    position: relative;
    background:
        /* faint phosphor vignette so the wordmark area has breathing room */
        radial-gradient(ellipse 80% 60% at 50% 35%, rgba(63, 240, 128, 0.025), transparent 60%),
        /* large dark spots — concrete pitting */
        radial-gradient(ellipse 320px 180px at 12% 22%, rgba(0, 0, 0, 0.45), transparent 60%),
        radial-gradient(ellipse 280px 220px at 78% 71%, rgba(0, 0, 0, 0.5), transparent 60%),
        radial-gradient(ellipse 200px 140px at 91% 18%, rgba(0, 0, 0, 0.3), transparent 60%),
        /* subtle white speckle — material grain */
        radial-gradient(circle 1px at 18% 32%, var(--tt-rivet), transparent),
        radial-gradient(circle 1px at 64% 47%, var(--tt-rivet), transparent),
        radial-gradient(circle 1px at 41% 78%, var(--tt-rivet), transparent),
        radial-gradient(circle 1px at 82% 64%, var(--tt-rivet), transparent),
        var(--tt-ink-0);
    background-size:
        100% 100%,
        100% 100%, 100% 100%, 100% 100%,
        120px 120px, 160px 160px, 140px 140px, 180px 180px,
        100% 100%;
}
.surface-concrete::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.06;
    mix-blend-mode: overlay;
    z-index: 1;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 240px 240px;
}

.surface-metal {
    position: relative;
    background:
        /* faint brushed-vertical sheen */
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.012) 0,
            rgba(255, 255, 255, 0.012) 1px,
            transparent 1px,
            transparent 3px
        ),
        /* darker panel base */
        linear-gradient(180deg, #11100c 0%, #0d0c0a 100%);
}
.surface-metal::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: overlay;
    z-index: 1;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 240px 240px;
}

/* ----------------------------------------------------------------------------
   2) HERO — full viewport, BRAND-FIRST, tape-mounted wordmark
   ---------------------------------------------------------------------------- */
.hero.hero--callingcard {
    position: relative;
    min-height: 100vh;
    display: flex;
    /* Top-align so the wordmark sits high in the viewport (was center,
       which left ~150px of dead air above the tape mount). Content
       fills naturally; any breathing room is below the creds, not above
       the brand. */
    align-items: flex-start;
    justify-content: center;
    padding: 7rem 2rem 4rem;
    overflow: hidden;
    /* override inline .hero rules */
    text-align: left;
    border-bottom: 0;
    background-image: none;
    background-attachment: scroll;
    color: var(--tt-bone-0);
}

/* kill inline ::before CRT scan stripes; the surface-concrete ::after
   noise overlay provides the page's only ambient texture */
.hero.hero--callingcard::before {
    content: none;
    display: none;
}

.hero.hero--callingcard .hero__container {
    max-width: 1200px;
    width: 100%;
    position: relative;
    z-index: 5;
}

/* Wordmark — Anton (extra-bold condensed sans), BONE on oil-black.
   2026-05-24 lock: the previous phosphor-green tape-mount with jagged
   clip-path was rejected (read sawtooth/perforation, not torn tape;
   saturated green slab vibrated against the black). Replaced with
   wordmark on the dark surface + a caution-yellow tape strip beneath
   as the single structural material. Anton letter-spacing bumped to
   0.08em -- the default tight pack reads claustrophobic at hero size. */
.hero.hero--callingcard .hero__name {
    font-family: 'Anton', sans-serif !important;
    font-weight: 400;
    font-size: clamp(5rem, 11vw, 8.5rem);
    color: var(--tt-bone-0);
    line-height: 0.95;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
    margin: 0;
}

/* Yellow caution-tape strip beneath the wordmark. This is the single
   structural material that unifies the hero with the caution-tape
   dividers used between every section below. Diagonal yellow/black
   stripe, hand-torn edges via SVG noise mask, soft drop shadow so it
   reads as a physical piece of tape stuck to concrete. */
.hero.hero--callingcard .hero__tape {
    display: block;
    width: 100%;
    max-width: 760px;
    height: 56px;
    background: repeating-linear-gradient(
        45deg,
        var(--tt-caution) 0,
        var(--tt-caution) 22px,
        var(--tt-ink-0) 22px,
        var(--tt-ink-0) 44px
    );
    margin: 1.25rem 0 1rem;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='80' preserveAspectRatio='none'><defs><filter id='r'><feTurbulence type='fractalNoise' baseFrequency='0.02 0.4' numOctaves='2' seed='4'/><feDisplacementMap in='SourceGraphic' scale='6'/></filter></defs><rect x='6' y='6' width='788' height='68' fill='white' filter='url(%23r)'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='80' preserveAspectRatio='none'><defs><filter id='r'><feTurbulence type='fractalNoise' baseFrequency='0.02 0.4' numOctaves='2' seed='4'/><feDisplacementMap in='SourceGraphic' scale='6'/></filter></defs><rect x='6' y='6' width='788' height='68' fill='white' filter='url(%23r)'/></svg>");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* Tagline beneath the tape strip — Big Shoulders Stencil 900, caution-yellow */
.hero.hero--callingcard .hero__tagline {
    font-family: 'Big Shoulders Stencil Display', sans-serif;
    font-weight: 900;
    font-size: clamp(1.1rem, 1.5vw, 1.45rem);
    color: var(--tt-caution);
    letter-spacing: 0.18em;
    line-height: 1;
    text-transform: uppercase;
    margin: 0.5rem 0 0;
}

/* Identity paragraph (Jekyll side). Prose, not stacked beats —
   Kevin's final hero copy is two flowing paragraphs. Phosphor
   green at moderate weight + size keeps the voice forward without
   becoming hard to read at paragraph length. Size bumped 2026-05-24
   per Kevin -- the hero needed more body presence. */
.hero.hero--callingcard .hero__identity {
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: clamp(1.3rem, 1.8vw, 1.55rem);
    font-weight: 500;
    line-height: 1.55;
    color: var(--tt-phosphor);
    margin: 2.5rem 0 1.75rem;
    max-width: 62ch;
    letter-spacing: 0;
}

/* Pedigree paragraph — Nunito 400 bone-dim, where Kevin's name lives.
   Size bumped 2026-05-24 to match the identity-paragraph proportions. */
.hero.hero--callingcard .hero__pedigree {
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 1.18rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--tt-bone-1);
    margin: 0 0 2.25rem;
    max-width: 62ch;
}
.hero.hero--callingcard .hero__pedigree em {
    color: var(--tt-bone-0);
    font-style: normal;
    font-weight: 700;
}

/* Credentials eyebrow — Nunito 800 tracked caution-yellow */
.hero.hero--callingcard .hero__creds {
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--tt-caution);
    margin: 0;
}
.hero.hero--callingcard .hero__creds .sep {
    color: rgba(247, 233, 200, 0.4);
    margin: 0 0.65rem;
}

/* ----------------------------------------------------------------------------
   3) CAUTION-TAPE DIVIDER — the "promoted tape motif"
   72px tall diagonal-striped band stuck to the surface with a stencil
   microcopy label centered on it. Replaces the prior 2px caution-yellow
   rule between sections. Per Kevin's brief: an actual physical-looking
   material divider, not a thin accent.
   ---------------------------------------------------------------------------- */
.tape-divider {
    position: relative;
    height: 72px;
    background: repeating-linear-gradient(
        45deg,
        var(--tt-caution) 0,
        var(--tt-caution) 32px,
        var(--tt-ink-0) 32px,
        var(--tt-ink-0) 64px
    );
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.55),
        0 1px 0 rgba(0, 0, 0, 0.6) inset,
        0 -1px 0 rgba(255, 255, 255, 0.05) inset;
    z-index: 4;
}
.tape-divider::before {
    /* soft drop-shadow above the divider reads as physically stuck */
    content: '';
    position: absolute;
    inset: -10px 0 auto 0;
    height: 12px;
    background: linear-gradient(
        180deg,
        transparent 0,
        rgba(0, 0, 0, 0.35) 100%
    );
    pointer-events: none;
}
.tape-divider__text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Anton', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.32em;
    color: var(--tt-ink-0);
    background: var(--tt-caution);
    padding: 0.3rem 0.8rem;
    text-transform: uppercase;
    z-index: 2;
}

/* ----------------------------------------------------------------------------
   4) SERVICES — brushed-metal surface, riveted industrial plates
   ---------------------------------------------------------------------------- */
.services--callingcard {
    position: relative;
    padding: 6rem 2rem 7rem;
    overflow: hidden;
    color: var(--tt-bone-0);
}

.services--callingcard .services__container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.services--callingcard .services__eyebrow {
    font-family: 'Big Shoulders Stencil Display', sans-serif;
    font-weight: 900;
    font-size: 0.95rem;
    color: var(--tt-caution);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    margin: 0 0 0.5rem;
}

.services--callingcard .services__heading {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: clamp(2.5rem, 4vw, 3.6rem);
    color: var(--tt-phosphor);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 1rem;
    line-height: 1;
}

.services--callingcard .services__lede {
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--tt-bone-1);
    max-width: 56ch;
    margin: 0 0 3.5rem;
    line-height: 1.55;
}

.services--callingcard .services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.8rem 2.8rem;
}

.services--callingcard .service {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    padding-left: 3.6rem;
}

/* Riveted-plate stencil number plates — small dark inset boxes with
   caution-yellow stencil digits and a yellow border. Each service
   gets one; numbered 01-06. */
.services--callingcard .service__num {
    position: absolute;
    top: -0.2rem;
    left: 0;
    font-family: 'Anton', sans-serif;
    font-size: 1.6rem;
    color: var(--tt-caution);
    letter-spacing: 0;
    line-height: 1;
    padding: 0.35rem 0.55rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(250, 198, 56, 0.35);
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.4),
        0 1px 0 rgba(255, 255, 255, 0.04);
}

.services--callingcard .service h3 {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: 1.4rem;
    color: var(--tt-phosphor);
    margin: 0 0 0.15rem;
    line-height: 1.1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.services--callingcard .service p {
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--tt-bone-0);
    margin: 0;
    max-width: 32ch;
}

.services--callingcard .services__cta {
    margin: 5rem 0 0;
    text-align: center;
    font-family: 'Nunito', system-ui, sans-serif;
    color: var(--tt-bone-1);
    font-size: 1.1rem;
    line-height: 1.55;
}

.services--callingcard .services__cta-text {
    display: block;
    margin: 0 0 1.5rem;
}

/* Industrial pressed-button CTA — caution-yellow plate with phosphor
   green base shadow so it reads as a real pushbutton, not painted */
.services--callingcard .services__cta-btn {
    display: inline-block;
    padding: 1.1rem 2.6rem;
    background: var(--tt-caution);
    color: var(--tt-ink-0);
    font-family: 'Anton', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    border: 0;
    box-shadow:
        0 4px 0 var(--tt-phosphor-deep),
        0 8px 16px rgba(0, 0, 0, 0.55),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.services--callingcard .services__cta-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 0 var(--tt-phosphor-deep),
        0 10px 22px rgba(0, 0, 0, 0.6),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}

/* ----------------------------------------------------------------------------
   5) CONTACT — Grimmy-voice CTA at the bottom of the page
   ---------------------------------------------------------------------------- */
.contact--callingcard {
    position: relative;
    padding: 6rem 2rem 7rem;
    text-align: center;
    color: var(--tt-bone-0);
}

.contact--callingcard .contact__container {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.contact--callingcard .contact__eyebrow {
    font-family: 'Big Shoulders Stencil Display', sans-serif;
    font-weight: 900;
    font-size: 0.95rem;
    color: var(--tt-caution);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    margin: 0 0 0.5rem;
}

.contact--callingcard .contact__heading {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    color: var(--tt-phosphor);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 1rem;
    line-height: 1;
}

.contact--callingcard .contact__pitch {
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1.55;
    color: var(--tt-bone-1);
    max-width: 52ch;
    margin: 0 auto 2.5rem;
}

.contact--callingcard .contact__btn {
    display: inline-block;
    padding: 1.1rem 2.6rem;
    background: var(--tt-caution);
    color: var(--tt-ink-0);
    font-family: 'Anton', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    box-shadow:
        0 4px 0 var(--tt-phosphor-deep),
        0 8px 16px rgba(0, 0, 0, 0.55),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.contact--callingcard .contact__btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 0 var(--tt-phosphor-deep),
        0 10px 22px rgba(0, 0, 0, 0.6),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}

/* ----------------------------------------------------------------------------
   6) Tape rule — structural through-line utility (kept from prior spec).
   Not actively used on the hero anymore (the tape-mount replaces the
   thin rule under the wordmark), but retained for any future 2px
   structural lines on other sections.
   ---------------------------------------------------------------------------- */
.tt-tape-rule {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--tt-caution);
    border: 0;
    margin: 0;
}
.tt-tape-rule--terminus {
    width: 96px;
    height: 8px;
    margin: 3rem auto 0;
}

/* ----------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------------- */
@media (max-width: 880px) {
    .services--callingcard .services__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .hero.hero--callingcard {
        padding: 5rem 1.25rem 3rem;
        min-height: 90vh;
    }
    .hero.hero--callingcard .tape-mount {
        padding: 1.6rem 1.8rem 1.4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* Reserved for the motif-implementation checkpoint per motion-spec §7.
       Industrial tape-mount + caution-divider are static surfaces; nothing
       to gate yet. */
}

/* ============================================================================
   7) "WHAT I BUILD" INTRO + BUCKET 1 — DOSSIER METAPHOR (2026-05-25 lock)
   ----------------------------------------------------------------------------
   Per Kevin's locked direction-check pass:
     - Font: Anton (Section 1A pick)
     - Hero visual: yellow-tape underline only, no green slab (Section 2C)
     - Bucket 1 metaphor: dossier / case-file (Section 3A)

   Buckets 2 + 3 are NOT propagated yet. After Kevin signs off on Bucket 1
   rendered with the real markup, the dossier metaphor cascades to them
   at descending weight (B1 = thick parchment files, B2 = medium folders,
   B3 = thin clipped index cards).
   ============================================================================ */

/* ---- The "What I build" intro paragraph (between services and Bucket 1) */
.what-i-build {
    position: relative;
    padding: 5rem 2rem 1rem;
    color: var(--tt-bone-0);
}
.what-i-build .container {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.what-i-build .eyebrow {
    font-family: 'Big Shoulders Stencil Display', sans-serif;
    font-weight: 900;
    font-size: 0.95rem;
    color: var(--tt-caution);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    margin: 0 0 1rem;
}
.what-i-build .body {
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 1.18rem;
    font-weight: 400;
    line-height: 1.65;
    color: var(--tt-bone-1);
    max-width: 78ch;
    margin: 0;
}
.what-i-build .body em {
    color: var(--tt-bone-0);
    font-style: normal;
    font-weight: 700;
}

/* ---- Bucket section shared chrome (eyebrow + heading + lede) ---- */
.bucket {
    position: relative;
    padding: 4rem 2rem 6rem;
    overflow: hidden;
    color: var(--tt-bone-0);
}
.bucket .container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.bucket__eyebrow {
    font-family: 'Big Shoulders Stencil Display', sans-serif;
    font-weight: 900;
    font-size: 0.95rem;
    color: var(--tt-caution);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    margin: 0 0 0.5rem;
}
.bucket__heading {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: clamp(2.6rem, 4.2vw, 3.8rem);
    color: var(--tt-phosphor);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 2.5rem;
    line-height: 1;
}

/* ============================================================================
   BUCKET 1 — DOSSIER FILES (heaviest weight)
   Each entry is a thick parchment file with:
     - hand-torn TOP edge via SVG noise mask (paper texture, not zigzag)
     - ONE diagonal caution-tape "seal" across the upper-left corner
     - ONE black file-tab label up top
     - headline in Anton oil-black, body in Nunito charcoal-on-parchment
     - bullets prefixed with caution-yellow ■ markers
   ============================================================================ */
.dossier {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3.5rem;
}

.dossier__file {
    position: relative;
    padding: 2.75rem 2.8rem 2.5rem 5rem;
    background: linear-gradient(180deg, #ddd0a8 0%, #c9b885 100%);
    color: var(--tt-ink-0);
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    /* Hand-torn TOP edge via SVG feTurbulence + feDisplacementMap mask.
       The rect is offset 10px from the top so the displacement has
       material to chew on without eating into the readable padding. */
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='600' preserveAspectRatio='none'><defs><filter id='r'><feTurbulence type='fractalNoise' baseFrequency='0.008 0.4' numOctaves='2' seed='2'/><feDisplacementMap in='SourceGraphic' scale='10'/></filter></defs><rect x='0' y='10' width='1200' height='590' fill='white' filter='url(%23r)'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='600' preserveAspectRatio='none'><defs><filter id='r'><feTurbulence type='fractalNoise' baseFrequency='0.008 0.4' numOctaves='2' seed='2'/><feDisplacementMap in='SourceGraphic' scale='10'/></filter></defs><rect x='0' y='10' width='1200' height='590' fill='white' filter='url(%23r)'/></svg>");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* Caution-tape "seal" diagonally across the upper-left corner.
   ONE seal per file -- structural, not decorative. Kevin's render-time
   note 2026-05-25: keep this disciplined; if multiple decorative strips
   sneak in across the layout, the operator's-evidence-wall register
   collapses into clip-art folders. */
.dossier__file::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -34px;
    width: 220px;
    height: 32px;
    background: repeating-linear-gradient(
        45deg,
        var(--tt-caution) 0,
        var(--tt-caution) 12px,
        var(--tt-ink-0) 12px,
        var(--tt-ink-0) 24px
    );
    transform: rotate(-22deg);
    transform-origin: top left;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    z-index: 4;
}

/* File-folder tab label up top */
.dossier__tab {
    position: absolute;
    top: -28px;
    right: 3rem;
    background: var(--tt-ink-0);
    color: var(--tt-caution);
    padding: 0.55rem 1.4rem 0.45rem;
    font-family: 'Anton', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    z-index: 3;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    /* Trapezoid clip for the "file tab" shape */
    clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 18px 100%);
}

.dossier__file h3 {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: clamp(2.2rem, 3.2vw, 2.8rem);
    color: var(--tt-ink-0);
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 0 0 1.25rem;
}

.dossier__file .dossier__lead {
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.6;
    color: rgba(10, 9, 8, 0.88);
    margin: 0 0 1.75rem;
    max-width: 76ch;
}

.dossier__bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1.1rem;
}
.dossier__bullets li {
    position: relative;
    padding: 0 0 0 1.5rem;
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(10, 9, 8, 0.82);
    max-width: 76ch;
}
.dossier__bullets li::before {
    content: '■';
    position: absolute;
    left: 0;
    top: 0.05em;
    color: var(--tt-caution);
    font-size: 0.85em;
}
.dossier__bullets strong {
    color: var(--tt-ink-0);
    display: block;
    font-family: 'Anton', sans-serif;
    font-size: 1.05rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

@media (max-width: 880px) {
    .dossier__file {
        padding: 2.25rem 1.5rem 2rem 2rem;
    }
    .dossier__tab {
        right: 1rem;
    }
    .dossier__file::before {
        width: 160px;
        left: -28px;
    }
}

/* ============================================================================
   8) LAYER 1 HOME — Case-file architecture (2026-05-25 Kevin spec)

   The visitor lands on an investigator's desk. Home is the COVER SHEET, the
   bottom layer of paperwork lying flat on the desk. The hero section IS the
   desk; .hero__container IS the cover sheet. Subpages (Services, the three
   buckets, About, Contact) will lay on top of the cover sheet as separate
   real pages in later checkpoints; this block only renders Home.

   This is Layer 1 — clean static focus-mode rendering. No sweep, no zoom,
   no View Transitions. Layer 2 cinematic gets wrapped around this AFTER
   Kevin signs off on Home.

   Recolors the hero from oil-black-surface to ink-on-paper. The brand
   palette (phosphor-green, caution-yellow) moves to the chrome (header
   bar, footer, tape underline); the cover sheet itself is bone paper with
   oil-black ink, the way an actual case file looks on a desk.
   ============================================================================ */

/* --- Chrome bars: oil-black header + footer frame the warm desk --- */
.cc-nav {
    position: relative;
    background: var(--tt-ink-0);
    border-bottom: 3px solid var(--tt-caution);
    z-index: 10;
}
.cc-nav__container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.9rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
.cc-nav__logo {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    font-family: 'Anton', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tt-bone-0);
}
.cc-nav__logo img {
    height: 32px;
    width: auto;
    display: block;
}
.cc-nav__cta {
    font-family: 'Big Shoulders Stencil Display', sans-serif;
    font-weight: 900;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-size: 0.92rem;
    text-decoration: none;
    color: var(--tt-ink-0);
    background: var(--tt-caution);
    padding: 0.65rem 1.4rem;
    border: 2px solid var(--tt-ink-0);
    box-shadow:
        0 3px 0 var(--tt-ink-0),
        0 6px 14px rgba(0, 0, 0, 0.5);
    transition: transform 120ms ease, box-shadow 120ms ease;
    flex: 0 0 auto;
}
.cc-nav__cta:hover,
.cc-nav__cta:focus-visible {
    transform: translateY(-1px);
    box-shadow:
        0 4px 0 var(--tt-ink-0),
        0 8px 18px rgba(0, 0, 0, 0.55);
}

/* Filing-cabinet tab nav - sits between the logo and the Talk-to-me CTA in
   the header chrome. Each tab is a manila-folder-style label rendered in
   IBM Plex Mono uppercase. Active tab gets caution-yellow as a "this file
   is currently open" marker. */
.cc-nav__tabs {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    gap: 0.15rem;
    margin: 0 1rem;
    padding: 0;
    list-style: none;
}
.cc-nav__tab {
    font-family: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tt-bone-1);
    text-decoration: none;
    padding: 0.55rem 0.85rem 0.5rem;
    background: rgba(255, 255, 255, 0.025);
    border-top: 2px solid transparent;
    transition: background 120ms ease, color 120ms ease, border-top-color 120ms ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}
.cc-nav__tab:hover,
.cc-nav__tab:focus-visible {
    color: var(--tt-bone-0);
    background: rgba(250, 198, 56, 0.1);
    border-top-color: rgba(250, 198, 56, 0.55);
    outline: none;
}
.cc-nav__tab.is-active,
.cc-nav__tab[aria-current="page"] {
    color: var(--tt-ink-0);
    background: var(--tt-caution);
    border-top-color: var(--tt-ink-0);
}

@media (max-width: 900px) {
    /* Mobile: tabs collapse out of the bar. The logo + Talk-to-me CTA stay.
       Hamburger menu is out of scope for the rough-in. */
    .cc-nav__tabs { display: none; }
}

.cc-foot {
    background: var(--tt-ink-0);
    border-top: 3px solid var(--tt-caution);
    color: var(--tt-bone-1);
}
.cc-foot__container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.25rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.cc-foot__copy,
.cc-foot__creds {
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 0.85rem;
    margin: 0;
    letter-spacing: 0.06em;
}
.cc-foot__creds {
    color: var(--tt-caution);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* --- The desk: warm desaturated institutional laminate ---
   Kevin's spec: worn government/field-office/records-department desk. Faint
   grain, slight sheen, a few HONEST imperfections (faint coffee ring, scuff,
   worn edge). Dark/desaturated enough that bone paper POPS. NOT concrete,
   NOT brushed metal. The desk is the warm-toned stage; the oil-black
   chrome frames it. */
/* Zero out the global `main { padding: 2rem 0 }` from style.css on the
   dossier home so the cover sheet starts close beneath the nav bar. Scoped
   with :has() so it only applies to the home page; every other page keeps
   the original main padding. */
main:has(.cc-dossier) {
    padding-top: 0;
}

.hero.hero--callingcard.cc-desk {
    min-height: calc(100vh - 78px);
    /* Top padding sized so the paperclip pin (which extends ~5.5rem above the
       cover sheet) still has room to render above the sheet without clipping
       into the nav bar. */
    padding: clamp(2.5rem, 4.5vw, 4rem) clamp(1rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
    /* flex-start so the sheet sits at the top of the desk - center-align was
       vertically centering it in a tall viewport and producing the dead gap
       beneath the nav bar that we're now eliminating. */
    align-items: flex-start;
    /* Dark fill that matches the source photo's near-black field, so the
       photo's outer edges disappear seamlessly into the page bg at any
       scroll position or viewport width. */
    background-color: #08070a;
    /* Desk flat-lay photograph (props in the top-left, dark field elsewhere).
       webp primary, jpg fallback via image-set. Generated woodgrain that
       used to live in this rule was removed entirely. */
    background-image:
        image-set(
            url('../images/background.webp') type('image/webp'),
            url('../images/background.jpg') type('image/jpeg')
        );
    background-repeat: no-repeat;
    /* TOP-LEFT anchor keeps the props (laptop, coffee, glasses, notebook,
       pencil) framed in the upper-left corner of the page where the
       photographer arranged them. */
    background-position: top left;
    /* Natural pixel size (1428x840) - the props (laptop, coffee, glasses,
       notebook, pencil) render at the size the photographer captured them
       at, regardless of viewport. On viewports narrower than 1428 the
       photo's dark right side gets cropped (matches the background-color so
       no edge visible); on wider viewports the dark background-color fills
       the area to the right of the photo. Never scales the props
       oversized. */
    background-size: auto;
    /* Desktop: desk stays put, the sheet scrolls over it. */
    background-attachment: fixed;
    color: var(--tt-ink-0);
    border-bottom: 0;
}

/* No noise overlay needed on top of the photographed desk; the photo brings
   its own grain. */
.hero.hero--callingcard.cc-desk::after {
    content: none;
}

/* Mobile: skip fixed-attachment (iOS Safari handles it poorly and the
   photo would scale jarringly on phone-width viewports). Flat near-black
   fill only - the dossier sheet reads against a clean dark backdrop. */
@media (max-width: 720px) {
    .hero.hero--callingcard.cc-desk {
        background-image: none;
        background-attachment: scroll;
        background-color: #08070a;
    }
}

/* --- The cover sheet: bone-ivory paper printed with the hero copy ---
   Sits on the desk with multi-layer drop shadow so it reads as a physical
   object lifted off the surface. Sharp paper corners (1px radius nudge for
   anti-aliasing only). Very faint paper-fiber texture inside. */
.hero.hero--callingcard.cc-desk .hero__container.cc-cover-sheet {
    max-width: 64rem;
    width: 100%;
    margin: 0 auto;
    background:
        /* faint warm vignette inside the paper edge */
        radial-gradient(
            ellipse 100% 80% at 50% 50%,
            transparent 0,
            transparent 62%,
            rgba(180, 150, 110, 0.07) 100%
        ),
        var(--tt-bone-0);
    padding: clamp(2.5rem, 5vw, 4.25rem) clamp(2rem, 4vw, 3.5rem);
    border-radius: 1px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04),
        0 3px 8px rgba(0, 0, 0, 0.22),
        0 12px 28px rgba(0, 0, 0, 0.32),
        0 28px 60px rgba(0, 0, 0, 0.35);
    position: relative;
    z-index: 2;
}
/* Paper-fiber texture — multiply blend keeps it subtle, mostly visible in
   the lighter regions. Kevin's "subtle and worn" register. */
.hero.hero--callingcard.cc-desk .hero__container.cc-cover-sheet::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.16;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='360'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='1' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.86  0 0 0 0 0.78  0 0 0 0 0.62  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23p)'/></svg>");
    background-size: 240px 240px;
    border-radius: inherit;
}

/* --- Hero typography recolored for ink-on-paper context ---
   Wordmark, tagline, prose all flip from bone/phosphor to dark inks. The
   tape strip stays caution-yellow (it's structural material on paper, not
   ink). */
.hero.hero--callingcard.cc-desk .hero__container.cc-cover-sheet .hero__name {
    color: var(--tt-ink-0) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}
.hero.hero--callingcard.cc-desk .hero__container.cc-cover-sheet .hero__tape {
    box-shadow: 0 4px 10px rgba(60, 40, 18, 0.32);
    margin-left: 0;
    margin-right: 0;
}
.hero.hero--callingcard.cc-desk .hero__container.cc-cover-sheet .hero__tagline {
    color: var(--tt-ink-0);
}
.hero.hero--callingcard.cc-desk .hero__container.cc-cover-sheet .hero__identity {
    /* warm dark ink — reads as ink-on-paper, not on-screen text */
    color: #1c1814;
    line-height: 1.55;
}
.hero.hero--callingcard.cc-desk .hero__container.cc-cover-sheet .hero__pedigree {
    color: #3a3530;
}
.hero.hero--callingcard.cc-desk .hero__container.cc-cover-sheet .hero__pedigree em {
    color: var(--tt-ink-0);
    font-style: normal;
    font-weight: 700;
}
.hero.hero--callingcard.cc-desk .hero__container.cc-cover-sheet .hero__creds {
    color: var(--tt-ink-0);
    border-top: 1px solid rgba(28, 24, 20, 0.15);
    margin-top: 2.5rem;
    padding-top: 1.25rem;
}
.hero.hero--callingcard.cc-desk .hero__container.cc-cover-sheet .hero__creds .sep {
    color: var(--tt-caution);
    margin: 0 0.65rem;
    font-weight: 900;
}

/* Mobile: desk margin shrinks, cover sheet near-full-bleed but still
   visibly a sheet (thin desk border around it). Kevin's spec: degrades to
   clean vertical scroll on phones, no desk choreography. */
@media (max-width: 720px) {
    .hero.hero--callingcard.cc-desk {
        min-height: calc(100vh - 70px);
        padding: 1.5rem 0.75rem 2.5rem;
    }
    .hero.hero--callingcard.cc-desk .hero__container.cc-cover-sheet {
        padding: 2.25rem 1.5rem 2rem;
    }
    .cc-nav__container {
        padding: 0.75rem 1rem;
    }
    .cc-nav__logo {
        font-size: 1.05rem;
        letter-spacing: 0.12em;
    }
    .cc-nav__logo img {
        height: 26px;
    }
    .cc-nav__cta {
        font-size: 0.78rem;
        padding: 0.5rem 1rem;
        letter-spacing: 0.18em;
    }
    .cc-foot__container {
        padding: 1rem;
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
}

/* Reduced-motion gate — Layer 1 is static so this is a placeholder. Layer 2
   cross-document View Transitions will be gated here when added. */
@media (prefers-reduced-motion: reduce) {
    /* placeholder for Layer 2 transition opt-out */
}

/* ============================================================================
   9) COVER SHEET DOSSIER REVISION (2026-05-25)
   ----------------------------------------------------------------------------
   Revises the cover-sheet content from the bone-ivory hero into a full
   case-file dossier: worn green rubber STAMP, paperclipped evidence photo,
   monospace INTAKE METADATA BAND, stencil motto, KNOWN ASSOCIATES roster,
   SUBJECT STATEMENT quote, SUSPECTED OF charge list, Rap Sheet pointer,
   bracketed CTA. The desk + chrome + palette are unchanged.

   Paper recolored bone-ivory -> cold institutional photocopier paper.
   Locked four-step type scale:
     L1 stamp                 7rem (112px)   - dominant
     L2 motto / block labels  2rem (32px)    - stencil callouts
     L3 body + field values   1.0625rem (17px) - sustained reading text
     L4 monospace LABELS      0.72rem (11.5px) - intentionally smallest
   Ratios: L1/L2=3.5x, L2/L3=1.88x, L3/L4=1.48x. All decisive jumps.
   ============================================================================ */

/* ---- Cover sheet paper recolor: cold photocopier, NOT warm ivory.
   Overrides the bone-ivory styling in Section 8 via the .cc-dossier modifier. */
.hero.hero--callingcard.cc-desk .hero__container.cc-cover-sheet.cc-dossier {
    max-width: 64rem;
    background:
        radial-gradient(
            ellipse 100% 80% at 50% 50%,
            transparent 0,
            transparent 62%,
            rgba(120, 130, 140, 0.06) 100%
        ),
        #eef0f1;
    /* Trimmed top padding (1.5rem) so the clipped logo photo + intake band
       begin close beneath the paper's top edge with a small deliberate margin
       only, instead of floating with dead whitespace above. Side and bottom
       padding stay generous for breathing room around prose. */
    padding: 1.5rem clamp(1.75rem, 3.5vw, 3.25rem) clamp(2.5rem, 4vw, 3.75rem);
}
/* Cooler fiber texture for the cold paper. */
.hero.hero--callingcard.cc-desk .hero__container.cc-cover-sheet.cc-dossier::after {
    opacity: 0.13;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='360'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='1' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.74  0 0 0 0 0.76  0 0 0 0 0.78  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23p)'/></svg>");
}

/* Photo is now a direct child of .cc-dossier and floats right, so intake
   text flows up beside it from the very top of the sheet instead of starting
   below it. The .cc-dossier__top wrapper that used to hold this got removed. */
.cc-dossier > .cc-clip {
    float: right;
    margin: 0 0 1.25rem 1.75rem;
    /* z-index, position:relative, rotation, drop-shadow, sizing stay inherited
       from the base .cc-clip rule. */
}

/* SUBJECT STATEMENT and SUSPECTED OF blocks should always start on their own
   line below the floated photo - they're prose, not field rows, and shouldn't
   try to flow alongside the photo. */
.cc-dossier .cc-block {
    clear: right;
}

/* KNOWN ASSOCIATES is now a plain block (NOT in the intake grid) so its
   roster paragraph wraps tightly around the floated photo - text lines beside
   the photo are narrow and respect its left edge; lines past the photo's
   bottom expand to full sheet width naturally per CSS float behavior. No
   `clear` here - that's the whole point. */
.cc-dossier .cc-roster-block {
    margin: 1.25rem 0 0;
}
.cc-dossier .cc-roster-block__label {
    font-family: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
    font-size: 0.72rem; /* L4 - matches intake labels */
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #4a4540;
    text-transform: uppercase;
    margin: 0 0 0.4rem;
    line-height: 1.5;
}
.cc-dossier .cc-roster-block__text {
    font-family: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
    font-size: 1.125rem; /* L3 - matches intake values */
    font-weight: 500;
    color: #1a1612;
    line-height: 1.55;
    margin: 0 0 0.4rem;
}
.cc-dossier .cc-roster-block__rule {
    font-family: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
    font-size: 1.125rem;
    font-weight: 500;
    color: rgba(74, 69, 64, 0.55);
    letter-spacing: 0.15em;
    margin: 0.4rem 0;
    user-select: none;
    line-height: 1;
}

/* ----------------------------------------------------------------------------
   STAMP - L1 - worn green rubber stamp.
   Anton, phosphor-green, angled off-square, ink texture via SVG noise mask
   so the coverage is uneven (gaps where the ink didn't fully take). The
   imperfection is the entire point: clean even green = failed build.
   ---------------------------------------------------------------------------- */
/* Round SVG rubber stamp (per the APPROVED reference Kevin shared):
   double concentric circles, "FIX IT" curved over the top arc, "FIGHT IT"
   curved under the bottom arc, "THREAT TAPE" straight across the middle,
   star separators at 9 and 3 o'clock. The worn-ink mask lives inside the
   SVG itself (turbulence + alpha threshold), so circles AND text share the
   same ink-loss patches as one stamped impression. Phosphor-green throughout. */
.cc-stamp {
    width: clamp(150px, 20vw, 300px);
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0;
    transform: rotate(-3.5deg);
    transform-origin: 50% 50%;
    pointer-events: none;
    overflow: visible;
    /* Darker stamp green - #0e5b2a clears WCAG AA (about 6.4:1 vs the cold
       paper). SVG inherits this via currentColor on fills and strokes, so
       circles, arc text, central text, and stars all use one source. */
    color: #0e5b2a;
}

/* Closing-seal variant of the round stamp - sits in the bottom row next to
   the CTA. Slightly smaller than the (now-removed) top-left version so it
   reads as a stamp pressed onto the file rather than a heading. Rotated more
   aggressively for a "stamped after the file was written" feel. */
.cc-stamp.cc-stamp--seal {
    width: clamp(130px, 14vw, 200px);
    transform: rotate(-9deg);
}

/* Bottom row: CTA (left) + closing seal (right). align-items:center keeps
   them visually balanced on one row at desktop. flex-wrap lets the stamp
   drop below the CTA on viewports too narrow to hold both. order on the
   stamp puts it visually-right while letting the responsive break make it
   land above the CTA on mobile (where the CTA goes full width per the
   mobile @media). The CTA stays the dominant visual action. */
.cc-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    flex-wrap: wrap;
    margin: 2.25rem 0 0;
}
.cc-bottom .cc-cta {
    margin: 0;
    flex: 0 1 auto;
    order: 1;
}
.cc-bottom .cc-stamp--seal {
    flex: 0 0 auto;
    order: 2;
    /* Negative right margin lets the seal hang a little off the cover-sheet
       padding edge, like a stamp that was pressed slightly off-register. */
    margin-right: -0.35rem;
}

/* ----------------------------------------------------------------------------
   CLIPPED EVIDENCE PHOTO - logo paperclipped to the cover sheet.
   Sits at top-right, opposite the stamp. Slight rotation + soft drop shadow
   read it as a physical attached artifact, not a printed-in image.
   ---------------------------------------------------------------------------- */
.cc-clip {
    position: relative;
    /* Sized for the threat_tape_roll.png landscape asset (~3:2 ratio) carrying
       the wordmark + motto on its industrial cityscape backdrop. ~40% larger
       on desktop than the previous max. Mobile min holds at 190 so the photo
       still fits beside the stamp on a 375px viewport. */
    width: clamp(190px, 33vw, 475px);
    margin: 0;
    padding: 0;
    transform: rotate(2deg);
    transform-origin: top center;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.22));
    justify-self: end;
    align-self: start;
    /* z-index immersion fix: anything physically clipped TO the page must
       paint on top of everything else on the cover sheet (stamp, intake band,
       statement, charges) - otherwise sibling outlines/borders bleed through
       the paperclip and break the "object resting on paper" reading. The
       cover sheet itself owns its own stacking context (position:relative +
       z-index:2), so a high local z-index on .cc-clip is contained to the
       sheet and won't fight the header/footer chrome. */
    z-index: 40;
}
.cc-clip__photo {
    display: block;
    width: 100%;
    height: auto;
    background: #fafbfb;
    padding: 0.4rem 0.4rem 1.1rem;
    border: 1px solid rgba(10, 9, 8, 0.12);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.5),
        0 1px 2px rgba(0, 0, 0, 0.1);
}
.cc-clip__pin {
    position: absolute;
    /* Reach upward far enough that the ARCH of the paperclip (the curved
       gripping bend at the top of the SVG path) sits clearly above the
       cover sheet's top edge, against the dark desk laminate - that's the
       "physically hooked over the paper" reading. -5rem instead of -5.5rem
       to keep the pin's top a safe distance below the nav bar once the
       sheet's top whitespace is trimmed. */
    top: -5rem;
    left: 50%;
    transform: translateX(-50%);
    /* Min 58px keeps the pin tall enough at mobile (height = 1.5*width = 87px)
       to reach down across the -5.5rem offset and physically overlap the photo;
       otherwise the pin's bottom hovers above the photo and the clip breaks.
       Max bumped to 90px so the clip scales with the larger desktop photo. */
    width: clamp(58px, 7vw, 90px);
    height: auto;
    /* Sits above the photo inside the clip's own stacking context, which itself
       is z-40 against the rest of the cover sheet content. */
    z-index: 3;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4));
}

/* ----------------------------------------------------------------------------
   INTAKE METADATA BAND - monospace pre-printed-form aesthetic.
   Grid alignment so the values form a clean column. Labels are L4 (smallest);
   values are L3 (normal body) per the type scale.
   ---------------------------------------------------------------------------- */
.cc-intake {
    display: grid;
    grid-template-columns: minmax(11rem, max-content) minmax(0, 1fr);
    column-gap: 1.25rem;
    row-gap: 0.55rem;
    margin: 0 0 1.75rem;
    padding: 0;
    font-family: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
}
.cc-intake__row {
    display: contents;
}
.cc-intake__label {
    font-family: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
    font-size: 0.72rem; /* L4 - intentionally smallest */
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #4a4540;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.5;
    align-self: baseline;
    white-space: nowrap;
}
.cc-intake__value {
    font-family: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
    font-size: 1.125rem; /* L3 mono value - body-reading size, comfort-matched to statement serif */
    font-weight: 500;
    color: #1a1612;
    margin: 0;
    line-height: 1.5;
}
.cc-intake__value--multi {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.cc-roster__line {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}
.cc-roster__rule {
    color: rgba(74, 69, 64, 0.55);
    font-size: inherit;
    letter-spacing: 0.15em;
    user-select: none;
    margin: 0.25rem 0;
}
/* YOU line is the SECONDARY CTA - a clickable text link, not a competing
   button. The yellow primary [ Start the conversation ] plate stays
   visually dominant. Entire anchor is tappable on mobile; the link
   affordance (dark stamp green + underline) only paints the trailing
   "One conversation away." phrase so the eye reads it as
   primary-button-plus-contextual-link, not two buttons. */
.cc-dossier a.cc-roster__you {
    /* Explicit font-family because the YOU line is now outside the intake
       grid (which used to cascade the IBM Plex Mono family down to it). */
    font-family: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
    font-size: 1.125rem;
    color: var(--tt-ink-0);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    display: block;
    cursor: pointer;
    padding: 0.15rem 0;
}
.cc-dossier a.cc-roster__you:focus-visible {
    outline: 2px solid var(--tt-caution);
    outline-offset: 3px;
}
/* Darker stamp green (#1da44f) instead of caution-yellow: yellow on cold-white
   paper failed contrast. Reads as a thematic throwback to the rubber stamp at
   the top of the sheet. Hover lifts to the brighter phosphor for a "lit up"
   stamp burst. */
.cc-dossier .cc-roster__you-link {
    color: #1da44f;
    text-decoration: underline;
    text-decoration-color: #1da44f;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    font-weight: 700;
    transition: color 120ms ease, text-decoration-color 120ms ease;
}
.cc-dossier a.cc-roster__you:hover .cc-roster__you-link,
.cc-dossier a.cc-roster__you:focus-visible .cc-roster__you-link {
    color: var(--tt-phosphor);
    text-decoration-color: var(--tt-phosphor);
}

/* (Motto removed 2026-05-26: the paperclipped evidence photo carries
   "FIX IT. FIGHT IT. THREAT TAPE IT." now, so the standalone motto line
   was redundant and went out of the dossier flow.) */

/* ----------------------------------------------------------------------------
   SECTION BLOCKS - SUBJECT STATEMENT, SUSPECTED OF.
   Mono label (L4) on its own line; long-prose values render in the readable
   body face (Nunito, L3) for legibility.
   ---------------------------------------------------------------------------- */
.cc-block {
    margin: 2rem 0 0;
}
.cc-block__label {
    font-family: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
    font-size: 0.72rem; /* L4 - matches intake labels */
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #4a4540;
    text-transform: uppercase;
    margin: 0 0 0.85rem;
    line-height: 1.5;
}

/* SUBJECT STATEMENT - quoted transcript in readable serif. The ONLY
   serif-face block on the sheet; everything else is typewriter mono.
   Newsreader is loaded by aesthetics.css; specificity-locked here so the
   styling stays scoped to the dossier. */
.cc-dossier .cc-statement,
.cc-dossier .cc-statement p {
    font-family: 'Newsreader', 'Iowan Old Style', Georgia, serif;
    font-size: 1.1875rem; /* L3 serif body */
    font-weight: 400;
    line-height: 1.6;
    color: #1a1612;
}
.cc-dossier .cc-statement {
    margin: 0;
    padding: 1.15rem 1.6rem 0.8rem;
    border-left: 3px solid var(--tt-caution);
    background: rgba(120, 130, 140, 0.045);
    /* No per-block max-width: the cover sheet's own max-width (64rem) bounds
       the line length. Letting the statement fill the available interior
       reads as content occupying the page, not floating short. */
}
.cc-dossier .cc-statement p {
    margin: 0 0 1rem;
}
.cc-dossier .cc-statement p:last-child {
    margin-bottom: 0;
}

/* SUSPECTED OF - charge list. Body face per spec. Each charge on its own line,
   no bullets, no numbers. Varied length is intentional; shorter charges read
   more emphatic and get more surrounding space. */
.cc-charges {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    /* No per-block max-width: the cover sheet's max-width (64rem) bounds line
       length. Lets the charge stack occupy the same column the statement does. */
}
/* Charges are SHORT discrete lines (case-file allegations), set in the
   typewriter face to match intake + roster. The long SUBJECT STATEMENT is
   the only readable-serif block on the sheet. Specificity-locked to defeat
   aesthetics.css `p { font-family: Newsreader }`. */
.cc-dossier .cc-charges .cc-charge {
    font-family: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
    font-size: 1.125rem; /* L3 mono value - matches intake / roster body size */
    font-weight: 500;
    line-height: 1.55;
    color: #1a1612;
    margin: 0;
    /* Defeat browser-side entity highlighters - some Chromium builds and
       iOS Safari Live Text auto-style "$69B" / "Microsoft" as actionable
       chips with blue selection-style backdrops. format-detection meta in
       <head> covers iOS; the explicit transparent + text-decoration:none
       resets cover everything else. */
    background: transparent !important;
    text-decoration: none !important;
    box-shadow: none !important;
    -webkit-text-fill-color: currentColor;
}
.cc-dossier .cc-charges .cc-charge * {
    background: transparent !important;
    text-decoration: none !important;
    box-shadow: none !important;
    color: inherit !important;
}
/* Shorter charges get a bit more breathing room above + below to land harder. */
.cc-charges .cc-charge:nth-child(4) {
    margin: 0.35rem 0;
    font-weight: 500;
}
/* Closer line is set apart per spec - reveal beat. */
.cc-charge--closer {
    margin-top: 1.25rem !important;
    padding-top: 1.15rem;
    border-top: 1px dashed rgba(28, 24, 20, 0.18);
    font-weight: 500;
    color: var(--tt-ink-0);
}

/* ----------------------------------------------------------------------------
   RAP SHEET POINTER - file cross-reference notation, not a marketing button.
   ---------------------------------------------------------------------------- */
/* Specificity-locked: aesthetics.css globalises `p { font-family: Newsreader }`. */
.cc-dossier .cc-pointer {
    margin: 2.5rem 0 0;
    font-family: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #4a4540;
    font-style: italic;
}
.cc-pointer__link {
    color: var(--tt-ink-0);
    text-decoration: underline;
    text-decoration-color: var(--tt-caution);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    font-weight: 600;
    font-style: normal;
}
.cc-pointer__link:hover,
.cc-pointer__link:focus-visible {
    color: var(--tt-phosphor-deep, #1fb056);
    text-decoration-color: var(--tt-phosphor);
}

/* ----------------------------------------------------------------------------
   CTA - prominent, NOT a dossier field. Conversion action, never sacrificed
   to the metaphor. Bracketed label per spec. Caution-yellow pressed plate
   with phosphor-deep base shadow, oversized hit area for mobile thumbs.
   ---------------------------------------------------------------------------- */
.cc-cta {
    display: flex;
    justify-content: flex-start;
}
.cc-cta__btn {
    display: inline-block;
    padding: 1.05rem 2rem;
    background: var(--tt-caution);
    color: var(--tt-ink-0);
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid var(--tt-ink-0);
    box-shadow:
        0 4px 0 var(--tt-phosphor-deep),
        0 8px 18px rgba(0, 0, 0, 0.35);
    transition: transform 120ms ease, box-shadow 120ms ease;
    min-height: 48px;
}
.cc-cta__btn:hover,
.cc-cta__btn:focus-visible {
    transform: translateY(-2px);
    box-shadow:
        0 6px 0 var(--tt-phosphor-deep),
        0 10px 22px rgba(0, 0, 0, 0.4);
}

/* ----------------------------------------------------------------------------
   Mobile: degrades to clean vertical scroll. Stamp shrinks but stays L1
   dominant; paperclipped photo drops to second row above the intake band
   so both elements remain readable. CTA stays prominent at the bottom.
   ---------------------------------------------------------------------------- */
@media (max-width: 720px) {
    .hero.hero--callingcard.cc-desk .hero__container.cc-cover-sheet.cc-dossier {
        padding: 1.75rem 1.1rem 1.75rem;
    }
    /* Mobile: skip the float - photo back to its own row above the intake. */
    .cc-dossier > .cc-clip {
        float: none;
        margin: 0 0 1rem auto;
        display: block;
    }
    .cc-stamp {
        transform: rotate(-2.5deg);
    }
    /* Mobile: pin extension trimmed because the cover sheet's mobile
       padding-top is smaller (2.25rem), so a slightly shorter pin is enough
       to lift the arch above the top edge while still physically hooking
       the photo. */
    .cc-clip__pin {
        top: -3.75rem;
    }
    .cc-intake {
        grid-template-columns: 1fr;
        row-gap: 0.15rem;
        margin-bottom: 1.5rem;
    }
    .cc-intake__row {
        display: block;
        margin-bottom: 0.65rem;
    }
    .cc-intake__label {
        display: block;
        margin-bottom: 0.1rem;
    }
    .cc-statement {
        padding: 0.9rem 1rem 0.6rem;
        font-size: 1rem;
    }
    .cc-charge {
        font-size: 1rem;
    }
    .cc-cta__btn {
        width: 100%;
        text-align: center;
        font-size: 1rem;
        padding: 1.1rem 1rem;
    }
    .cc-cta {
        justify-content: center;
        width: 100%;
    }
    /* Mobile bottom row: stamp above CTA (right-aligned), CTA full-width below.
       order flips put the seal first; .cc-cta order:2 pushes it under. */
    .cc-bottom {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    .cc-bottom .cc-stamp--seal {
        order: 1;
        align-self: flex-end;
        margin-right: -0.25rem;
        margin-bottom: 0.25rem;
    }
    .cc-bottom .cc-cta {
        order: 2;
    }
}

/* ============================================================================
   10) ROUGH-IN SUBPAGE ELEMENTS (2026-05-26)
   ----------------------------------------------------------------------------
   Shared chrome for the 7 inner pages (services / security-and-governance /
   solving-real-problems / mad-scientist-lab / about / contact / rap-sheet).
   Each subpage reuses the cover-sheet shell with a page-specific title +
   intake band of placeholder fields. Real copy lands in later checkpoints.
   ============================================================================ */

.cc-dossier .cc-page-title {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    color: var(--tt-ink-0);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
    margin: 0 0 1.5rem;
}

.cc-dossier .cc-rough-todo {
    font-family: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(28, 24, 20, 0.7);
    background: rgba(250, 198, 56, 0.12);
    border-left: 3px solid var(--tt-caution);
    padding: 0.85rem 1.2rem;
    margin: 1.5rem 0;
    line-height: 1.55;
    font-style: italic;
}
.cc-dossier .cc-rough-todo strong {
    font-style: normal;
    font-weight: 700;
    color: var(--tt-ink-0);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.8rem;
    display: block;
    margin-bottom: 0.4rem;
}