/* ===========================================================================
   ABOUT — page styles                                       added 2026-09-23
   Copy source: "Media tamer web copy.docx", ABOUT page.
   Only what is unique to this page. Everything shared with other pages lives
   in assets/mt-shared.css, which loads first.
   =========================================================================== */


/* --- 02 mission and philosophy -------------------------------------------
   Layout after the home page's Guide section, panel after its price card.
   Only two arbitrary grid-cols values survive the Tailwind purge
   ([1.15fr_0.85fr] and [1.4fr_1fr_1fr_1fr]), so the split is a local class —
   an invented lg:grid-cols-[...] would silently collapse to one column. */
.mt-ab-mission {
   display: grid;
   gap: 52px;
   align-items: center
}

@media (min-width:1024px) {
   .mt-ab-mission {
      grid-template-columns: 1fr 0.92fr;
      gap: 64px
   }
}

.mt-ab-lead {
   margin-top: 28px;
   max-width: 34rem;
   font-size: 18px;
   line-height: 1.7;
   color: var(--mt-text-muted)
}

@media (min-width:640px) {
   .mt-ab-lead {
      font-size: 20px
   }
}

/* the price card's inclusions list: check discs, 15px, text-on-dark */
.mt-ab-diff {
   list-style: none;
   margin: 26px 0 0;
   padding: 0;
   display: grid;
   gap: 14px
}

/* The most differentiating claim — being told when you are not a fit — is the
   one the copy doc calls out, so it gets the orange bar rather than a bullet
   like the rest. The disc shifts in to clear the bar and the padding. */
.mt-ab-diff li.is-callout {
   margin: 4px -6px;
   padding: 14px 16px 14px 40px;
   border-radius: 14px;
   border-left: 3px solid var(--mt-orange);
   background: rgba(255, 107, 53, .10);
   color: #fff;
   font-weight: 600
}

.mt-ab-diff li.is-callout>span {
   left: 15px;
   top: 16px
}

/* --- 04 meet the team -----------------------------------------------------
   The card is the home page's services card, so its layout, hover lift, radius
   and gradients all come from classes in the markup. Only two things are local:
   the headshot placeholder and the bio list. */

/* The headshot is the home services card's own <img> — cover fit and
   group-hover:scale-105 come from classes in the markup.

   The band is local, not a Tailwind height: the purge left only h-20 and h-40,
   so an invented h-56 or h-80 would fail silently. 350px, well past the
   services card's 160px, because a headshot needs the room.

   object-position is per image, computed from where each face lands once the
   photo is scaled to cover a 384x350 band — recompute if the height or a photo
   changes. At 350px the crops are far looser than they were at 224px:
   David 0% and Dee 5% (both now near the top of their slack), and Trin 50% is
   simply inert — her photo is wide enough that cover scales it by height, so
   there is no vertical slack left to position within. */
.mt-ab-band {
   height: 450px
}

/* The home services card lays two gradients over its photo — an orange-to-navy
   wash and a diagonal sheen. Right for a stock image, wrong for a face, so
   they are hidden here. Not deleted: drop this one rule to bring them back. */
.mt-ab-band [data-ab-overlay] {
   display: none
}

/* LinkedIn, in front of the name. Local because the purge has no h-8/w-8 and
   36px reads heavy beside a 20px heading. */
.mt-ab-name {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   margin-top: 8px
}

.mt-ab-name h3 {
   margin: 0
}

.mt-ab-li {
   display: grid;
   place-items: center;
   flex: 0 0 32px;
   width: 32px;
   height: 32px;
   border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, .15);
   color: var(--mt-text-on-dark);
   transition: border-color .2s ease, color .2s ease, background-color .2s ease
}

.mt-ab-li:hover {
   border-color: var(--mt-orange);
   color: var(--mt-orange);
   background: rgba(255, 107, 53, .08)
}

.mt-ab-li:focus-visible {
   outline: 2px solid var(--mt-orange);
   outline-offset: 2px
}

.mt-ab-role {
   margin: 6px 0 0;
   font-size: 12px;
   font-weight: 800;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--mt-orange)
}

.mt-ab-fields {
   margin: 16px 0 0
}

.mt-ab-fields dt {
   font-size: 11px;
   font-weight: 800;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: #fff
}

.mt-ab-fields dd {
   margin: 4px 0 14px;
   font-size: 14px;
   line-height: 1.6;
   color: var(--mt-text-on-dark)
}

.mt-ab-fields dd:last-child {
   margin-bottom: 0
}


/* --- hidden by request ----------------------------------------------------
   Removed from the page on 2026-09-23. Hidden, not deleted, per the standing
   rule — every one of these still has its markup and comes back by deleting
   the matching line below.

   · the closing CTA's subhead ("Thirty minutes, no pitch deck...")

   Two C-nn draft notes used to be hidden here as well. Rev 5 §05 ends that -
   "do not ship a single one" - so they are deleted from the markup instead,
   and the rules that hid them are gone with them. The C-nn codes themselves
   are forbidden strings, and a selector naming one still ships this file. */
/* Hero call to action: spaced with padding rather than the margin the build
   shipped (mt-8). Tailwind's pt-8 does not survive this build's purge — only
   pt-7 does, which is 28px — so the 32px is set here to keep the original
   spacing exactly. */
.mt-ab-hero-cta {
   padding-top: 32px
}