/* ===========================================================================
   CONTACT — page styles                                    added 2026-09-24
   Copy source: "Media tamer web copy .docx", CONTACT.
   Only what is unique to this page. The hero and its photo frame, the
   entrance animation and the shared chrome all come from mt-shared.css,
   which loads first.
   =========================================================================== */

/* --- 01 hero --------------------------------------------------------------
   The doc puts the phone number and the email in the hero, so they sit under
   the subhead as two direct links rather than as a button row. */
.mt-ct-hero-lines {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  padding-top: 30px
}

.mt-ct-hero-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  transition: color .2s ease
}

.mt-ct-hero-line svg {
  flex: none;
  color: var(--mt-orange)
}

@media (hover:hover) {
  .mt-ct-hero-line:hover {
    color: var(--mt-orange)
  }
}

.mt-ct-hero-line:focus-visible {
  outline: 3px solid var(--mt-orange);
  outline-offset: 4px;
  border-radius: 6px
}

@media (prefers-reduced-motion:reduce) {
  .mt-ct-hero-line {
    transition: none
  }
}

/* The hero band, shortened. 20 Oct 2026, by request: "reduce hero image size
   so that the space below the phone and email line is gone", then again when
   a gap was still left under it.

   Three things were making that gap, and all three are undone here:

     1. mt-shared.css gives every inner hero a floor - 745px, then 820px from
        1024px up - so all eleven stand at the same height. The floor is set
        by the tallest text column on the site (SEO's, 518px); this page's is
        336px, so 316px of the band was empty from the start.
     2. The design system gives .mt-hero-visual a 420px min-height. With the
        floor gone the panel still could not shrink below that, so the photo
        went on hanging 61px below the phone and email line - which is the
        strip the second screenshot boxed in red.
     3. pb-32 then left another 128px of band under the photo.

   Point 3 was tried and undone. The padding is measured from the TEXT
   column, which is the shorter of the two, so everything the photo gains
   comes off the clearance beneath it: at 72px the band ended 28px under a
   380px photo and the figure's orange bloom - a 34px blur - ran into the
   section edge. 112 fixed that but was a number that appears nowhere else on
   the site, and the bottom of this hero then read differently from the other
   ten. So pb-32's own 128px stands, and the two reductions above do the work
   on their own.

   So: no floor and a much smaller panel minimum, but the shared bottom
   padding left alone.
   380px rather than 0 because at 0 the photo came out 438x336 and read as
   too small; 380 is the most it can take without the band having to grow for
   it. The panel is absolute, so its height does not feed back into the
   section - the extra 44px grows DOWN into the bottom padding instead, which
   is why the band stays 575px whether this says 336 or 400. Past about 408 it
   would reach the band's edge and start being clipped.

   The photo is
   now sized BY the band rather than the other way round - .mt-hero-visual is
   absolute with top:0/bottom:0, so it is exactly as tall as the text column,
   the figure stretches to fill it, and the image takes its width from its 4/3
   ratio instead of from the 600px panel. Text and photo end on the same line
   at every width, which is the whole point; nothing is hard-coded, so it
   holds where the headline wraps differently (980px, 1909px).

   justify-content goes to flex-end because of that: a figure narrower than
   its panel was being centred in it, which left the photo's right edge 146px
   short of the shell. Ended, it sits 40px inside the shell - exactly where
   the full-width figure on every other page sits.

   Measured at 1440: band 820 -> 632px, photo 600x457 -> 497x380, the band
   under the photo 195px -> 84px, and the bottom padding the same 128px every
   other hero carries.

   In contact.css rather than mt-shared.css deliberately. The floor is what
   keeps the other ten heroes agreeing with each other; this file only ever
   loads on this page, so the selectors below cannot reach them. */
@media (min-width:920px) {

  /* the same selector mt-shared.css uses, so it is an override rather than a
     specificity fight; contact.css loads after it, so it wins on order. It
     also beats the lg:pb-32 utility, which is a single class. */
  [data-hero]:not([data-hero-plain]) {
    min-height: 660px;
  }

  .mt-hero-visual {
    min-height: 380px;
    justify-content: flex-end
  }

  .mt-hero-shot {
    align-self: stretch;
    width: auto;
    height: auto
  }

  .mt-hero-shot__frame {
    display: block;
    height: 100%
  }

  .mt-hero-shot img {
    height: 100%;
    width: auto
  }
}

/* --- 02 book a call -------------------------------------------------------
   The Calendly inline widget on the left, the ways to reach us on the right.
   Rev 5 §11 replaced the LeadConnector embed here: "Two booking systems means
   two places to look for a booking and two sources of truth for the calendar."

   The widget is sized by assets/mt-calendly.js, which sets the 700px §11 asks
   for ("shorter and the month view scrolls awkwardly on desktop"). This only
   gives it a column and stops Calendly's own iframe escaping it. */
.mt-ct-lead {
  margin: 20px 0 0;
  max-width: 34rem;
  font-size: 16px;
  line-height: 1.65;
  color: var(--mt-text-muted)
}

/* --- the booking grid ------------------------------------------------------
   Four children in one grid: the booking heading, the calendar, the form's
   heading, the form. In that order, because below 1060px the grid is a single
   column and the order written is the order read - heading, calendar, heading,
   form, each heading immediately above the thing it heads (21 Oct 2026, by
   request; before that both headings sat together at the top, which put the
   form's heading above the calendar on a phone).

   Above 1060px every child is placed explicitly, so the same markup reads as
   two columns with the headings side by side on row 1. Auto-placement would
   put the calendar on row 1 beside the booking heading; it has to be told.

   The colours in the second heading are the site's own pairing, not new ones:
   h3 inherits navy and the condensed display face from the base rules, and
   .mt-accent takes the second line orange - the same split "that SUITS YOU"
   uses in the h2 beside it. The uppercase comes from the h1/h2/h3 rule too,
   so the markup stays in sentence case and reads properly to a screen reader. */
.mt-ct-book {
  display: grid;
  gap: 30px
}

@media (min-width:1060px) {
  .mt-ct-book {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* row gap wider than column gap: 36px is right between two columns, but
       between a heading and the thing under it the section wants the 44px
       this grid used to carry as a margin */
    column-gap: 36px;
    row-gap: 44px;
    align-items: start
  }

  .mt-ct-head {
    grid-area: 1 / 1
  }

  .mt-ct-embed {
    grid-area: 2 / 1
  }

  /* end, not start: the booking heading carries an eyebrow above it and this
     one does not, so aligning their tops would leave the two leads on
     different lines. Ended, "Thirty minutes..." and "We'll get back to
     you..." sit on the same row. */
  .mt-ct-alt {
    grid-area: 1 / 2;
    align-self: end;
    text-align: right
  }

  .mt-ct-form {
    grid-area: 2 / 2
  }
}

.mt-ct-alt__h {
  margin: 0;
  /* the base rules give h1/h2 .95 and h3 1, which at 63px is a 6px taller
     block and reads looser than the heading beside it. Same size, same
     leading. */
  line-height: .95
}

.mt-ct-alt__p {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--mt-text-muted)
}

.mt-ct-embed {
  position: relative;
  min-width: 0
}

.mt-ct-embed [data-calendly-inline] {
  min-width: 0
}

.mt-ct-embed iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 0
}

/* --- the row under it ------------------------------------------------------
   Phone, email and address stacked on the left, the map filling the rest.
   This was the 25rem column beside the calendar until 20 Oct; full width
   under the booking grid now, which is what gives the map a shape worth
   having rather than a 400px letterbox.

   26rem holds the address card's two lines without wrapping "Yorba Linda"
   onto a third; stretch rather than start so the map matches the details'
   height instead of falling back on its own 300px minimum. */
.mt-ct-side {
  margin-top: 30px;
  display: grid;
  gap: 16px
}

@media (min-width:1060px) {
  .mt-ct-side {
    margin-top: 36px;
    grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
    gap: 36px;
    align-items: stretch
  }
}

.mt-ct-details {
  display: grid;
  gap: 14px
}

.mt-ct-detail {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  padding: 20px;
  border-radius: 18px;
  border: 1px solid var(--mt-border);
  background: #fff;
  text-decoration: none;
  transition: border-color .25s ease, transform .25s cubic-bezier(.22, 1, .36, 1)
}

@media (hover:hover) {
  a.mt-ct-detail:hover {
    border-color: rgba(255, 107, 53, .45);
    transform: translateY(-3px)
  }
}

a.mt-ct-detail:focus-visible {
  outline: 3px solid var(--mt-orange);
  outline-offset: 3px
}

@media (prefers-reduced-motion:reduce) {
  .mt-ct-detail {
    transition: none
  }

  a.mt-ct-detail:hover {
    transform: none
  }
}

.mt-ct-detail__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--mt-orange-light);
  color: var(--mt-orange-dark)
}

.mt-ct-detail__k {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mt-text-muted)
}

.mt-ct-detail__v {
  display: block;
  margin-top: 6px;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 800;
  color: var(--mt-navy)
}

/* Three across on a tablet (21 Oct 2026, by request). Between 680 and 1059px
   the reach-us row is a single column, so these three have the whole shell to
   themselves and stacking them spent most of a screen on three short lines.
   Above 1060 they are back in a 26rem column beside the map, where stacked is
   the only thing that fits.

   Below .mt-ct-detail__v rather than above it: the font-size override here is
   the same specificity as the base rule, so the later one wins, and written
   above it the address kept its 16px and broke onto a third line. */
@media (min-width:680px) and (max-width:1059px) {
  .mt-ct-details {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  /* the icon goes above the text rather than beside it. A third of the shell
     at 768px is a 217px card, which leaves 120px of text once the icon and
     the padding come out - enough to break the phone number over two lines
     and the address over five. Stacked, the text gets the card's full 175px. */
  .mt-ct-detail {
    flex-direction: column;
    gap: 12px
  }

  /* and 15px for the address. At 16px "Yorba Linda, CA 92886" measures 177px
     against 175px of card - two pixels over, and it broke after "CA". */
  .mt-ct-detail__v {
    font-size: 15px
  }
}

/* the map. loading=lazy so it costs nothing until it is scrolled to, and the
   frame is clipped to the same radius the cards above it use. */
.mt-ct-map {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--mt-border);
  background: var(--mt-bg-soft)
}

.mt-ct-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px;
  border: 0
}

/* --- 04 closing CTA ------------------------------------------------------
   The shared closing band, with one line of copy between the headline and the
   button that the other pages' CTAs do not carry. */
.mt-ct-cta__p {
  margin: 22px 0 0;
  max-width: 34rem;
  font-size: 17px;
  line-height: 1.65;
  color: var(--mt-text-on-dark)
}

.mt-ct-form iframe {
    width: 100%;
}