/* ===========================================================================
   mt-wp.css — the parts that only exist under WordPress

   SOURCE FILE. scripts/build-theme.py copies this into the theme; it must not
   be edited there, because the build empties astra-child/assets/ on every run
   and would delete it.

   The static build had three blog posts and six case studies, all on one
   page, so it never needed pagination and has no styles for it. This file is
   for UI like that: things WordPress introduces which have no counterpart in
   the built site.

   Kept separate from case-studies.css and blog.css on purpose - those are
   copied verbatim from the static site's own stylesheets, and editing them
   would change the static site as well.

   Loaded on every page, after mt-shared.css.
   =========================================================================== */

/* --- pagination -----------------------------------------------------------
   Deliberately the same pill as .mt-cs-chip and .mt-bl-chip: same radius,
   same border, same weight, orange for the page you are on. The filter and
   the pager sit on the same page and should read as one control. */
.page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 38px 0 0;
  padding: 0;
  list-style: none;
}

.page-numbers li {
  margin: 0;
}

/* the anchors and the current-page span inside the list */
.page-numbers a,
.page-numbers span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 10px 16px;
  border: 1px solid var(--mt-border);
  border-radius: 999px;
  background: #fff;
  color: var(--mt-navy);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.page-numbers a:hover {
  border-color: rgba(255, 107, 53, .55);
  color: var(--mt-orange-dark);
}

.page-numbers a:focus-visible {
  outline: 3px solid var(--mt-orange);
  outline-offset: 2px;
}

.page-numbers .current {
  background: var(--mt-orange);
  border-color: var(--mt-orange);
  color: var(--mt-navy);
}

/* "..." between distant page numbers is a label, not a target */
.page-numbers .dots {
  border-color: transparent;
  background: none;
}

/* on a dark band the pills invert, same as the chips do */
.mt-dark .page-numbers a,
.mt-dark .page-numbers span {
  border-color: rgba(255, 255, 255, .18);
  background: transparent;
  color: #fff;
}

.mt-dark .page-numbers .current {
  background: var(--mt-orange);
  border-color: var(--mt-orange);
  color: var(--mt-navy);
}

/* --- empty states ---------------------------------------------------------
   A filter that matches nothing, or a listing with nothing in it yet. The
   static build could not reach either state. */
.mt-cs-empty,
.mt-bl-empty {
  margin: 38px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--mt-text-muted);
}

/* Visually hidden, but read aloud. WordPress emits this class inside
   pagination links ("Page 2"); the compiled stylesheet has no rule for it. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- the case studies filter, while it is fetching -------------------------
   assets/js/mt-cs-filter.js sets aria-busy on the section for the length of
   the request, so that is the hook: no extra class, and the thing the
   assistive tech is told is the thing the eye is shown.

   The spinner sits on the GRID, over the results it is replacing - not in the
   middle of the whole section, which would put it level with the heading.

   The cards dim but the grid itself does not, or the spinner would fade with
   them. An absolutely positioned ::after on a grid container is out of flow,
   so it does not become a grid item and adds no cell.

   It fades in after 150ms. Most swaps land well inside that, and a spinner
   that appears and vanishes inside a tenth of a second reads as a flicker
   rather than as progress. */
section[aria-busy="true"] .mt-cs-grid {
  position: relative;
  min-height: 180px;
}

/* .mt-anim is on <html> and is here only to win a specificity contest:
   mt-shared.css carries `.mt-anim [data-reveal].is-in { opacity: 1 }` at
   (0,3,0), which outranks a plain `section[aria-busy] .mt-cs-cell` at (0,2,1)
   - so without it the cards simply did not dim, and the only clue was that
   the spinner appeared over cards at full strength. */
.mt-anim section[aria-busy="true"] .mt-cs-cell,
section[aria-busy="true"] .mt-cs-count,
section[aria-busy="true"] .page-numbers {
  opacity: .3;
  pointer-events: none;
  transition: opacity .2s ease;
}

section[aria-busy="true"] .mt-cs-grid::after,
section[aria-busy="true"] .mt-cs-empty::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 3px solid rgba(26, 31, 46, .16);
  border-top-color: var(--mt-orange);
  border-radius: 50%;
  animation: mt-spin .7s linear infinite, mt-fade .2s ease .15s both;
}

/* the empty state is a paragraph, so it needs a containing block too */
section[aria-busy="true"] .mt-cs-empty {
  position: relative;
  min-height: 90px;
}

@keyframes mt-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes mt-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* A spinner is motion for its own sake. Hold the position, drop the spin. */
@media (prefers-reduced-motion: reduce) {

  section[aria-busy="true"] .mt-cs-grid::after,
  section[aria-busy="true"] .mt-cs-empty::after {
    animation: mt-fade .2s ease .15s both;
  }
}

/* --- the whole card is the link -------------------------------------------
   The anchor is a direct child of .mt-cs-card, wrapping the body. Because it
   is static, its ::after resolves against the card - which is position:
   relative - and so covers all of it.

   Putting the anchor inside .mt-cs-card__title did not: that body is
   position:relative, so the overlay resolved against it and only the bottom
   fifth of the card responded to a click.

   .mt-cs-card is a flex column and .mt-cs-card__body used margin-top:auto to
   sit at the bottom. The anchor is the flex item now, so it carries that. */
.mt-cs-card__link {
  display: block;
  margin-top: auto;
  color: inherit;
  text-decoration: none;
}

.mt-cs-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}

.mt-cs-card__link:focus-visible {
  outline: none;
}

.mt-cs-card__link:focus-visible::after {
  outline: 3px solid var(--mt-orange);
  outline-offset: 3px;
}

/* --- the date and author line on a single post ----------------------------
   Under the title in the hero, on both an article and a case study. The
   static build showed neither, so there is no existing rule for it; this
   borrows .mt-po-cat's weight and tracking so the two read as a pair. */
.mt-po-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mt-text-on-dark, rgba(255, 255, 255, .72));
}

/* a dot between the date and the byline, drawn rather than typed so it is
   not read out */
.mt-po-meta__by::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-right: 10px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
  opacity: .6;
}

.mt-po-meta__date {
  color: #fff;
}

/* --- the reviews slider ----------------------------------------------------
   TrustReviews renders its own slider into the column the three hand-written
   reviews used to fill. It lays out at its own intrinsic width, which left it
   hard against the left edge of a half-width column with the arrows stranded
   beside it.

   Centred here rather than by changing the column: the section is a two-column
   grid with an lg:order swap, and widening or re-ordering it to suit one
   plugin would change the section for everything else too.

   Only placement is set. The card's own width and height are the plugin's
   settings, not the theme's - if a quote is still clipped, that is its card
   height in the TrustReviews options. */
[data-mt-reviews] {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* Keep whatever it renders inside the column. max-width rather than width, so
   a slider that wants to be full-bleed still can, and one with an intrinsic
   width is not stretched into a shape it was not designed for. */
[data-mt-reviews]>* {
  max-width: 100%;
  margin-inline: auto;
}

/* --- the reviews section, stacked -----------------------------------------
   One column now: the copy above, the plugin's grid of review cards below at
   full width. Centring has to be done piece by piece, because the column is
   not plain text:

     .mt-eyebrow   is inline-flex, so text-align centres it on its own
     the <p>       carries max-w-md, so it needs margin-inline to centre
     the badges    are a block-level flex row, so they need justify-content

   Only this section is touched, by its own class - .mt-shell is the site-wide
   container and must stay as it is. */
.mt-reviews-copy {
  text-align: center;
}

.mt-reviews-copy>p,
.mt-reviews-copy>h2 {
  margin-inline: auto;
}

.mt-reviews-copy>div {
  justify-content: center;
}

/* --- the 404 ---------------------------------------------------------------
   Centred, because unlike every other hero there is no image beside the copy -
   held in the usual 42% column it left two thirds of the band empty.

   Written out rather than composed from Tailwind utilities: max-w-2xl is not
   in the purged stylesheet, and a utility that was purged fails silently. */
.mt-404-copy {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

/* .mt-eyebrow is inline-flex, so text-align centres it; the lead carries its
   own max-width and needs the margin */
.mt-404-copy>p {
  margin-inline: auto;
}

/* the button row: a column on small screens, a row from sm up */
.mt-404-copy>div:last-child {
  align-items: center;
  justify-content: center;
}

/* --- the floating Calendly CTA --------------------------------------------
   Lifted to 4rem (requested 2026-10-14). At the foot of a page the badge sat
   on top of the footer's legal row - Accessibility, CA Privacy Act, Cookies
   Policy and the rest - and covered the last two links outright, which is the
   one row a policy page most needs reachable.

   Done here rather than by editing the badge's class list, because the class
   that would say this does not exist: the purged stylesheet carries .bottom-5
   and nothing else from that scale, so `bottom-16` would have read correctly
   and changed nothing. Keeping the markup as it is also keeps the chrome
   byte-identical to the static build, which is what verify-theme.py compares.

   .fixed as well as the attribute, so this is (0,2,0) against .bottom-5's
   (0,1,0) and wins on specificity rather than on which file loaded last. */
.fixed[data-calendly-popup="badge"] {
  bottom: 4rem;
}

/* --- the Calendly popup ----------------------------------------------------
   Reported 2026-10-14 as "make it wider so the scroll goes". The scroll is not
   a width problem. Calendly's own widget.css sizes the popup

       width:80%;  min-width:900px;  max-width:1000px;
       height:90%; max-height:700px;

   and the booking card it renders inside the iframe is a fixed ~500px wide
   whatever the iframe's width is - measured at 1000px and at 1240px, same
   card, just wider transparent gutters either side. So widening changes
   nothing except how much of the page shows through beside it.

   What overflows is the height. The card needs ~700px, which is exactly what
   `max-height` allows - but only on a window tall enough for 90% to reach it,
   which means 778px or more. On a 1920x1080 screen at 125% Windows scaling the
   viewport is ~707px, 90% of that is 636px, and the last 60-odd pixels of the
   card - the time-zone row - are cut off behind an iframe scrollbar.

   So: take the whole viewport height when that is all there is, and keep
   Calendly's own 700px ceiling when there is more. Left alone below 976px,
   where Calendly has its own full-screen treatment.

   The ceiling stays 700 because it cannot be raised from here - their
   max-height carries !important, which a 760px declaration here lost to
   silently (computed max-height stayed 700px at a 1000px-tall viewport). It
   does not need raising: 700px is what the card asks for, and the only thing
   wrong was never reaching it.

   `body` on the front, because widget.js injects Calendly's stylesheet at
   runtime - after this file - and (0,2,1) beats its (0,2,0) regardless of
   which arrived first. */
@media (min-width:976px) {
  body .calendly-overlay .calendly-popup {
    height: min(100vh, 700px);
    width: min(94vw, 1200px);
    max-width: 1200px;
  }
}

/* The width is requested (2026-10-14) rather than load-bearing, and it is
   worth writing down why, so nobody spends an afternoon on it again:
   widening the popup does not widen anything a visitor sees. Calendly caps
   its own card inside the iframe - ~500px on the date step, ~680px once a
   date is picked and the times column opens - and that cap did not move
   between a 1000px and a 1200px popup, measured at both. The extra width is
   transparent iframe either side.

   The one thing that genuinely widens the card is dropping
   hide_event_type_details=1 from the URL in assets/js/mt-calendly.js: the
   event pane comes back and the card goes to ~800px. It is not on, because
   that pane needs more height than this popup can be given - Calendly's
   max-height:700px carries !important - and on a 707px-tall window the
   description clips, which is the scrollbar we just removed, moved. */

/* --- who we help: the industry cards ---------------------------------------
   The redesigned section 2 (2026-10-14). It replaced a numbered directory -
   seven rows of text and a divider each - with a card per industry.

   Here rather than in who-we-help.css because that file is copied out of the
   static build on every run of build-theme.py; an edit there lasts until the
   next build and then disappears without a word.

   Section 3 immediately below is also a grid, so these are deliberately a
   different object: no photographs, an icon tile instead, smaller cards, and
   white on white rather than cards on orange-light. */
/* Four across, with the short last row centred (2026-10-14).
   Flex rather than grid, and that is the whole reason: seven cards in fours
   leaves three on the last row, and a grid cannot centre them - the tracks
   are fixed, so the row sits left with a hole on the right. Wrapped flex
   items with justify-content:center close up around whatever is left over,
   and keep doing it at eight cards, or at eleven.
   The basis subtracts the gaps the row will have: three 22px gaps between
   four cards, one 18px gap between two. */
.mt-wwh-cards {
  list-style: none;
  margin: 46px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 18px;
}

.mt-wwh-card {
  flex: 0 1 100%;
}

@media (min-width:640px) {
  .mt-wwh-card {
    flex-basis: calc((100% - 18px) / 2);
  }
}

@media (min-width:1000px) {
  .mt-wwh-cards {
    gap: 22px;
  }

  .mt-wwh-card {
    flex-basis: calc((100% - 66px) / 4);
  }
}

.mt-wwh-card {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  border: 1px solid var(--mt-border);
  border-radius: 20px;
  /* rounded-card, written out: see the note below */
  background: #fff;
  transition: border-color .25s ease, background-color .25s ease;
}

/* 20px is .rounded-card's value. Spelled out rather than used as a utility
   because this markup is hand-written and a utility that is not in the purged
   stylesheet fails silently - the class name would have read correctly and
   the corners would have been square. */

/* Hover: the card warms up rather than lifting (2026-10-14).
   The icon tile inverts to solid orange with the mark in navy - the same
   pairing as the site's primary button - the card takes the faint orange
   wash, and the name moves to orange-dark. Nothing moves, which is the point:
   a card that rises under the pointer in a block of seven makes the row look
   unsteady, and this reads as the card answering instead. */
@media (hover:hover) {
  .mt-wwh-card:hover {
    border-color: var(--mt-orange);
    background: var(--mt-orange-light);
  }

  .mt-wwh-card:hover .mt-wwh-card__icon {
    background: var(--mt-orange);
    color: var(--mt-navy);
  }

  .mt-wwh-card:hover .mt-wwh-card__name {
    color: var(--mt-orange-dark);
  }

  /* the chips keep their white against the warmed card, or they disappear
     into it */
  .mt-wwh-card:hover .mt-wwh-card__tags li {
    border-color: rgba(255, 107, 53, .35);
  }
}

@media (prefers-reduced-motion:reduce) {

  .mt-wwh-card,
  .mt-wwh-card__icon,
  .mt-wwh-card__name {
    transition: none;
  }
}

.mt-wwh-card__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--mt-orange-light);
  color: var(--mt-orange);
  /* the SVG strokes with currentColor */
  transition: background-color .25s ease, color .25s ease;
}

.mt-wwh-card__name {
  margin: 18px 0 0;
  font-size: 19px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--mt-navy);
  transition: color .25s ease;
}

.mt-wwh-card__desc {
  margin: 9px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--mt-text-muted);
}

/* auto top margin, so the chips sit on the card's floor and line up across a
   row however long the descriptions run; the padding is the minimum gap */
.mt-wwh-card__tags {
  list-style: none;
  margin: auto 0 0;
  padding: 18px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mt-wwh-card__tags li {
  padding: 5px 13px;
  border: 1px solid var(--mt-border);
  border-radius: 999px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--mt-navy);
  white-space: nowrap;
}

/* --- home: the service card image band ------------------------------------
   10rem -> 15rem, requested 2026-10-14.

   Done here rather than by swapping the class, because the class that would
   say it does not exist: the purged stylesheet carries .h-40 and nothing else
   above .h-20, so `h-60` would have read correctly in the markup and changed
   nothing at all. Leaving the markup alone also keeps the section identical to
   the static build, which is what verify-theme.py compares.

   Scoped to the services grid rather than bare .h-40 - that utility happens to
   be used nowhere else in the theme today, and this keeps it that way if it
   ever is. */
[data-reveal-group] .h-40 {
  height: 15rem;
}

/* --- blog cards: the "Read article" link sits on the card's floor ----------
   Requested 2026-10-14. Excerpts run to different lengths, so the links sat
   at different heights across a row and the cards looked ragged.

   .mt-bl-card is already display:flex/column with height:100% and the body is
   flex:1 1 auto, so an auto top margin on the link is all it takes - no
   layout change, nothing to keep in sync. padding-top keeps the 20px the
   margin used to provide, for the card that has no slack to give.

   Two classes, because blog.css sets margin-top:20px at (0,1,0) and is
   enqueued after this file: (0,2,0) wins whichever order they arrive in. */
.mt-bl-card .mt-bl-card__more {
  margin-top: auto;
  padding-top: 20px;
}
/* --- home: the sixth service card ------------------------------------------
   Added 2026-10-16 (Dee's review). The five service cards now mirror the main
   navigation exactly, and "Custom Automation & Programming" came out of that
   set - it was linking to the contact form, which is not a service page. It
   comes back here instead, as a different object: no image, no number, full
   width under the five, and honest about being a conversation rather than a
   package.

   Local classes rather than Tailwind utilities. The compiled stylesheet is
   purged, so col-span-3, border-dashed and bg-navy-light/40 may simply not
   exist in it - and a class that is not there fails silently. */
.mt-svc-cta-cell {
  grid-column: 1 / -1;
}

.mt-svc-cta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 24px;
  border: 1px dashed rgba(255, 255, 255, .22);
  border-radius: 20px;
  background: rgba(45, 53, 72, .4);         /* --mt-navy-light at 40% */
  text-decoration: none;
  transition: border-color .3s ease, background-color .3s ease;
}

@media (min-width:720px) {
  .mt-svc-cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
}

@media (hover:hover) {
  .mt-svc-cta:hover {
    border-color: rgba(255, 107, 53, .5);
    background: rgba(45, 53, 72, .62);
  }
}

@media (prefers-reduced-motion:reduce) {
  .mt-svc-cta { transition: none; }
}

.mt-svc-cta:focus-visible {
  outline: 3px solid var(--mt-orange);
  outline-offset: 3px;
}

.mt-svc-cta__text {
  margin: 0;
  max-width: 44rem;
  font-size: 15px;
  line-height: 1.6;
  color: var(--mt-text-on-dark);
}

.mt-svc-cta__go {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 800;
  color: var(--mt-orange);
}

/* the arrow is the same glyph the Explore links use, lifted from the card
   markup rather than redrawn */
.mt-svc-cta__go svg {
  transition: transform .3s ease;
}

@media (hover:hover) {
  .mt-svc-cta:hover .mt-svc-cta__go svg { transform: translateX(3px); }
}

/* --- home: centre the service grid -----------------------------------------
   Requested 2026-10-16. Five cards in a three-column grid leaves the second
   row holding two, hard against the left with a hole on the right.

   Grid cannot centre a short last row - the tracks are fixed - so the same
   move as the who-we-help cards: wrapped flex, items sized to the column they
   replace, and justify-content doing the centring. Widths subtract the gaps
   the row will have: two 20px gaps between three cards, one between two.

   Selected with :has(), so this reaches exactly one element on the site - the
   only grid that contains the CTA cell - without putting a new class in
   markup that verify-theme.py compares. */
[data-reveal-group]:has(> .mt-svc-cta-cell) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

[data-reveal-group]:has(> .mt-svc-cta-cell) > * {
  flex: 0 1 100%;
}

@media (min-width:640px) {
  [data-reveal-group]:has(> .mt-svc-cta-cell) > * {
    flex-basis: calc((100% - 20px) / 2);
  }
}

@media (min-width:1024px) {
  [data-reveal-group]:has(> .mt-svc-cta-cell) > * {
    flex-basis: calc((100% - 40px) / 3);
  }
}

/* the CTA card keeps the whole width under them */
[data-reveal-group]:has(> .mt-svc-cta-cell) > .mt-svc-cta-cell {
  flex-basis: 100%;
}

/* --- the footer, three columns ---------------------------------------------
   The "Who We Help" column of industry links came out on 2026-10-16 (Dee's
   review), leaving brand + Services + Company.

   A local class rather than lg:grid-cols-[1.4fr_1fr_1fr], because the purged
   stylesheet carries exactly two arbitrary grid templates - [1.15fr_0.85fr]
   and the footer's old [1.4fr_1fr_1fr_1fr] - and nothing else. A three-column
   arbitrary value would have read correctly in the markup and done nothing,
   leaving the footer stacked. */
@media (min-width:1024px) {
  .mt-footer-cols {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

/* --- less air between sections ---------------------------------------------
   "All Pages: Reduce empty space between sections on every page" (Dee's
   review, 16 Oct 2026).

   One variable does almost all of it. 35 of the site's 39 non-hero sections
   are .mt-section, which is padding-block: var(--mt-section-pad) - so at
   160px the gap between two of them was 160 + 160 = 320px, nearly a full
   laptop viewport of nothing. 100px brings that to 200px.

   The step-down breakpoints come down with it, by less, because the gap was
   never the problem on a phone - 84px there is already tight.

   Two other utility pairs are pinned to the variable below, for the same
   reason: the closing CTA band on every page (py-28 lg:py-40, 160px) and four
   dark bands (py-24 lg:py-32, 128px). At 128 those four happened to agree
   with the variable by coincidence; at 100 they did not, and the home page
   came out with three different gaps. Now every section on the site reads one
   number.

   Overridden here rather than edited in mt-tailwind.css: that file is purged
   build output, and mt-wp.css loads after it, so this wins without touching
   a generated file. */
:root {
  --mt-section-pad: 100px;
}

@media (max-width:920px) {
  :root { --mt-section-pad: 80px; }
}

@media (max-width:680px) {
  :root { --mt-section-pad: 64px; }
}

@media (max-width:480px) {
  :root { --mt-section-pad: 48px; }
}

/* The closing CTA band on each page is the one section that does not read the
   variable - it carries py-28 lg:py-40, which is 160px at desktop, so after
   the reduction above it was the only thing still opening a 288px gap. Matched
   by attribute rather than by class selector to avoid escaping the colon in
   lg\:py-40, and so it keeps working if the utility order ever changes. */
section[class~="py-28"][class~="lg:py-40"],
section[class~="py-24"][class~="lg:py-32"] {
  padding-block: var(--mt-section-pad);
}

/* --- contact: the enquiry form --------------------------------------------
   Added 20 Oct 2026, under the phone/email/address block; moved out of that
   column the same day and given the full width of the shell, under the
   booking grid, as asked.

   No fixed height: LeadConnector's form_embed.js measures the form and sets
   the iframe height itself, which is why the inline style is min-height:1px
   rather than a number - the same arrangement the blog newsletter uses. */
/* The form is a child of .mt-ct-book now, not of .mt-shell, so on desktop it
   falls into row 2 of column 1 - directly under the calendar, the width of the
   calendar - and the grid's own 36px gap opens the space above it. The margin
   is only for the single-column layout below 1060px, where there is no row
   gap to inherit because every child is its own row. */
.mt-ct-form {
  margin: 24px 0 0;
}

/* The row gap does the spacing once the form is a column of its own; the
   margin above is only for the single-column layout below 1060px.

   There was a sticky rule here as well, pinning the details column beside the
   calendar and the form. It went with the layout on 20 Oct: the details are a
   full-width row under the booking grid now, so there is nothing for them to
   travel alongside. */
@media (min-width: 1060px) {
  .mt-ct-form {
    margin: 0;
  }
}

/* Fitting only. The form's own look - its card, its type, its colours - is
   configured in LeadConnector and rendered inside the iframe, so there is
   nothing here to style and anything added would be a second opinion about a
   design this page cannot see. A rounded white panel with a border was tried
   on 20 Oct and taken out again the same day for that reason.

   What is left is what a cross-origin iframe needs from its host and cannot
   do for itself: display:block kills the inline baseline gap under it, border:0
   drops the browser's default frame, and the width is !important because
   form_embed.js writes an inline width onto the element once it has measured
   the form - it wrote 1432px when this sat in the 400px side column and spilled
   across the page, and the number it picks still has nothing to do with the
   space the page is giving it. */
.mt-ct-form iframe {
/*   display: block;
  width: 100% !important;
  max-width: 100% !important;
  border: 0; */
}

/* Dee's headshot is reframed in the file itself now - dee-praiz-profile-framed.webp,
   1176x900, her photo centred on an edge-stretched continuation of her own
   backdrop. It was done in CSS first (object-fit:contain plus a blurred
   ::before); baking it into the image means one file instead of a special
   case, and it matches the band's aspect so cover has nothing left to crop. */