/* ═══ ABOUT — page-specific ════════════════════════════════════ */

    /* Hero: statement + film */
    .ah { background: var(--ttg-black); color: #fff; overflow: hidden; padding: clamp(3.5rem,7vw,6rem) 0 0; }
    .ah-copy { max-width: 22ch; }
    .ah-sub { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); font-weight: 300; line-height: 1.6; color: rgba(255,255,255,0.62); max-width: 44ch; }
    .ah-film { margin-top: clamp(2.5rem,5vw,4rem); position: relative; }
    .ah-frame { position: relative; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--hair-light-strong); border-radius: 4px; overflow: hidden; box-shadow: 0 50px 120px -40px rgba(43,63,204,0.35); }
    .ah-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
    .ah-frame::before { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04); z-index: 2; }
    .ah-meta { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center; padding: 1.25rem 0 0; }
    .ah-meta p { font-size: 0.8125rem; color: rgba(255,255,255,0.45); line-height: 1.6; max-width: 62ch; }
    .ah-meta .label { white-space: nowrap; }
    .ah-strip { margin-top: clamp(2.5rem,5vw,3.5rem); border-top: 1px solid var(--hair-light); padding: 1.5rem 0 1.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
    .ah-strip span { font-size: 1rem; font-weight: 500; color: rgba(255,255,255,0.8); letter-spacing: -0.01em; }
    .ah-ring { position: absolute; left: -18%; bottom: -30%; width: 58vw; max-width: 900px; opacity: 0.06; pointer-events: none; }
    @media (max-width: 700px) { .ah-meta { grid-template-columns: 1fr; } }

    /* §01 Hook */
    .hook-q { font-size: clamp(2.25rem, 4.6vw, 3.875rem); font-weight: 900; letter-spacing: -0.035em; line-height: 1.02; color: var(--ttg-ink); text-wrap: balance; }
    .hook-em { margin-top: 1.5rem; padding-left: 1.25rem; border-left: 2px solid var(--ttg-mck-blue); font-size: 1.0625rem; line-height: 1.7; color: var(--ttg-ink); font-weight: 500; }

    /* §02 Deliverable */
    .fan-light .pg { box-shadow: 0 34px 80px -28px rgba(6,20,82,0.45), 0 0 0 1px rgba(6,20,82,0.06); }
    .fan-light .fan-cap { background: rgba(255,255,255,0.9); border-color: var(--hair-dark); }
    .fan-light .fan-cap b { color: var(--ttg-mck-blue); }
    .fan-light .fan-cap span { color: var(--ttg-caption); }
    .fan-light .scan { display: none; }
    .fan-light .pg-farl { opacity: 0.62; }
    .fan-light .pg-farr { opacity: 0.58; }
    .fan-wrap { display: grid; place-items: center; margin-top: clamp(2.5rem,5vw,4rem); }
    .fan-wrap .fan { display: block; max-width: 640px; margin: 0 auto; width: 100%; aspect-ratio: 1 / 1.02; cursor: pointer; }
    .fan-wrap .pg { width: 46%; }
    .fan-wrap .pg-cover  { left: 27%; top: 4%; }
    .fan-wrap .pg-brief  { left: 9%;  top: 12%; }
    .fan-wrap .pg-analys { left: 45%; top: 10%; }
    .fan-wrap .pg-farl   { left: -1%; top: 24%; }
    .fan-wrap .pg-farr   { left: 55%; top: 22%; }
    .proof4 { margin-top: clamp(3rem,6vw,4.5rem); display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--hair-dark); }
    .proof4 div { padding: 1.5rem 1.5rem 1.5rem 0; border-right: 1px solid var(--hair-dark); }
    .proof4 div + div { padding-left: 1.5rem; }
    .proof4 div:last-child { border-right: 0; }
    .proof4 strong { display: block; font-size: 1.375rem; font-weight: 900; letter-spacing: -0.03em; color: var(--ttg-ink); line-height: 1; margin-bottom: 0.4rem; }
    .proof4 span { font-size: 0.8125rem; color: var(--ttg-caption); }
    .inside { margin-top: clamp(3rem,6vw,4.5rem); }
    .inside-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--col-gap); margin-top: 1.5rem; }
    .pp { text-decoration: none; color: inherit; display: block; }
    .pp-img { position: relative; aspect-ratio: 1700/2200; background: #fff; border: 1px solid var(--hair-dark); border-radius: 3px; overflow: hidden; box-shadow: 0 24px 48px -28px rgba(6,20,82,0.35); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
    .pp:hover .pp-img { transform: translateY(-6px); box-shadow: 0 34px 60px -28px rgba(6,20,82,0.45); }
    .pp-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; user-select: none; -webkit-user-drag: none; }
    .pp-t { margin-top: 1.125rem; font-size: 1rem; font-weight: 800; letter-spacing: -0.015em; color: var(--ttg-ink); }
    .pp-d { margin-top: 0.3rem; font-size: 0.875rem; line-height: 1.55; color: var(--ttg-caption); }
    .del-cta { margin-top: clamp(2.5rem,5vw,3.5rem); display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
    .del-cta .small { margin: 0; }
    @media (max-width: 900px) { .proof4 { grid-template-columns: 1fr 1fr; } .proof4 div:nth-child(2) { border-right: 0; } .proof4 div:nth-child(1), .proof4 div:nth-child(2) { border-bottom: 1px solid var(--hair-dark); } .proof4 div:nth-child(3) { padding-left: 0; } .inside-grid { grid-template-columns: 1fr; row-gap: 2rem; } }
    @media (max-width: 520px) { .proof4 { grid-template-columns: 1fr; } .proof4 div { border-right: 0 !important; padding-left: 0 !important; border-bottom: 1px solid var(--hair-dark); } .proof4 div:last-child { border-bottom: 0; } }

    /* §03 Pre-demand window */
    .result { margin-top: 1.75rem; padding: 1.25rem 1.5rem; background: var(--ttg-tint-blue); border-left: 3px solid var(--ttg-mck-blue); border-radius: 0 3px 3px 0; }
    .result b { display: block; font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ttg-mck-blue); margin-bottom: 0.4rem; }
    .result p { font-size: 1.0625rem; line-height: 1.5; color: var(--ttg-ink); }
    .result p strong { font-weight: 800; }
    .wsteps { border-top: 1px solid var(--hair-dark); }
    .wstep { display: grid; grid-template-columns: 4.5rem 1fr; column-gap: 1rem; padding: 1.375rem 0; border-bottom: 1px solid var(--hair-dark); align-items: start; }
    .wstep i { font-style: normal; font-size: 2rem; font-weight: 900; letter-spacing: -0.05em; line-height: 0.9; color: transparent; -webkit-text-stroke: 1px rgba(43,63,204,0.4); transition: color 0.3s, -webkit-text-stroke-color 0.3s; }
    .wstep:hover i { color: var(--ttg-mck-blue); -webkit-text-stroke-color: var(--ttg-mck-blue); }
    .wstep p { font-size: 0.9688rem; line-height: 1.6; color: var(--ttg-body); }
    .wstep p strong { color: var(--ttg-ink); font-weight: 800; }

    /* §04 Why us */
    .credpanel { position: sticky; top: 92px; border: 1px solid var(--hair-dark); border-radius: 4px; overflow: hidden; }
    .credrow { padding: 1.375rem 1.5rem; border-bottom: 1px solid var(--hair-dark); }
    .credrow:last-child { border-bottom: 0; }
    .credrow .k { font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ttg-mck-blue); font-weight: 800; margin-bottom: 0.4rem; }
    .credrow .v { font-size: clamp(1.5rem,2.2vw,1.875rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1; color: var(--ttg-ink); }
    .credrow .s { margin-top: 0.4rem; font-size: 0.8125rem; line-height: 1.5; color: var(--ttg-caption); }
    .part-label { font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ttg-mck-blue); font-weight: 800; margin-bottom: 1rem; display: block; }
    .part + .part { margin-top: 2.5rem; }
    .origin { padding-left: 1.5rem; border-left: 2px solid var(--ttg-pale-blue); }
    .origin .outcome { margin-top: 1.25rem; font-weight: 600; color: var(--ttg-ink); }
    @media (max-width: 900px) { .credpanel { position: static; margin-bottom: 2rem; } }

    /* §06 How we work (black) */
    .note { margin-top: 1.5rem; padding: 1.25rem 1.5rem; border: 1px solid var(--hair-light-strong); border-radius: 3px; font-size: 0.9063rem; line-height: 1.65; color: rgba(255,255,255,0.7); }
    .ilist { border-top: 1px solid var(--hair-light); }
    .iitem { display: grid; grid-template-columns: 1.5rem 1fr; column-gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--hair-light); }
    .iitem svg { width: 20px; height: 20px; margin-top: 1px; }
    .iitem p { font-size: 0.9688rem; line-height: 1.6; color: rgba(255,255,255,0.7); }
    .iitem p strong { color: #fff; font-weight: 800; }
    .sources { margin-top: 1.5rem; font-size: 0.8125rem; line-height: 1.65; color: rgba(255,255,255,0.42); }

    /* §07 CTA close */
    .cta-list { margin-top: clamp(2rem,4vw,3rem); border-top: 1px solid var(--hair-dark); }
    .cta-row { display: grid; grid-template-columns: 3rem 1fr auto; column-gap: 1.25rem; align-items: center; padding: 1.5rem 0; border-bottom: 1px solid var(--hair-dark); text-decoration: none; color: inherit; transition: background 0.25s; position: relative; }
    .cta-row:hover { background: var(--ttg-stripe); }
    .cta-row:hover::before { content: ""; position: absolute; left: -1.25rem; top: 0; bottom: 0; width: 3px; background: var(--ttg-mck-blue); }
    .cta-row i { font-style: normal; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.14em; color: var(--ttg-mck-blue); }
    .cta-row .t { font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ttg-ink); }
    .cta-row .d { margin-top: 0.3rem; font-size: 0.9063rem; line-height: 1.55; color: var(--ttg-body); }
    .cta-row .arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hair-dark); display: grid; place-items: center; transition: background 0.25s, border-color 0.25s; }
    .cta-row .arrow svg { width: 16px; height: 16px; color: var(--ttg-ink); transition: color 0.25s, transform 0.25s var(--ease); }
    .cta-row:hover .arrow { background: var(--ttg-mck-blue); border-color: var(--ttg-mck-blue); }
    .cta-row:hover .arrow svg { color: #fff; transform: translateX(2px); }
    .cta-row.primary { background: var(--ttg-deep-navy); color: #fff; border-bottom-color: var(--ttg-deep-navy); margin: 0 -1.5rem; padding: 1.75rem 1.5rem; border-radius: 4px; }
    .cta-row.primary:hover::before { display: none; }
    .cta-row.primary i { color: var(--ttg-ice-blue); }
    .cta-row.primary .t { color: #fff; }
    .cta-row.primary .d { color: rgba(255,255,255,0.68); }
    .cta-row.primary .arrow { border-color: rgba(255,255,255,0.3); }
    .cta-row.primary .arrow svg { color: #fff; }
    .cta-row.primary:hover { background: var(--ttg-dark-navy); }
    .cta-row.primary:hover .arrow { background: #fff; border-color: #fff; }
    .cta-row.primary:hover .arrow svg { color: var(--ttg-deep-navy); }
    .closing { margin-top: clamp(3rem,6vw,4.5rem); padding-top: 2rem; border-top: 1px solid var(--hair-dark); font-size: clamp(1.25rem,2vw,1.625rem); font-weight: 500; letter-spacing: -0.02em; color: var(--ttg-ink); }
    .closing em { font-style: normal; color: var(--ttg-mck-blue); font-weight: 800; }
    @media (max-width: 700px) { .cta-row { grid-template-columns: 1fr auto; } .cta-row i { display: none; } .cta-row.primary { margin: 0; } .cta-row:hover::before { display: none; } }