/* ==========================================================================
   DMU Construction — Contact Us page

   Loads on top of css/index.css, which supplies the tokens, base styles,
   header, footer, quick-contact bar, the .index-btn button system, the
   .index-section-head heading, the reveal utility and the back-to-top
   button. Nothing shared is redefined here.

   Section system
     1. Masthead              half-height, matching Services / Projects
     2. Contact channels      four cards — phone, WhatsApp, email, address
     3. Enquiry               form panel + supporting aside
     4. Map                   the existing Google Maps embed, framed
     5. Closing CTA           phone-first band on navy

   PHONE CTA — single source of truth
   Every phone control on the site points at tel:+447480749065 and prints
   "07480 749 065". On this page that is: the utility strip, the nav CTA,
   the "Call us" channel card, the form footnote, the map card, the closing
   band and the mobile quick-bar. They are all plain <a href="tel:"> links,
   so a tap on a mobile device hands the number straight to the dialler and
   the user confirms the call themselves. No JavaScript is involved.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base + shared container
   The body rule in index.css is extended to body.contact-page; this file
   only mirrors the container so the left content edge is identical from
   the header down to the footer base.
   -------------------------------------------------------------------------- */
.contact-masthead__inner,
.contact-channels__inner,
.contact-enquiry__inner,
.contact-map__inner,
.contact-cta__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* index.css styles h1/h2 only; nothing on this page needs an h3 */

/* --------------------------------------------------------------------------
   2. MASTHEAD
   Same half-height treatment as Services and Projects. Kept short on
   purpose — the contact channels should be reachable without scrolling
   far, because that is what people came here to do.
   -------------------------------------------------------------------------- */
.contact-masthead {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(340px, 40vw, 500px);
  padding-top: calc(var(--header-h) + clamp(28px, 4vw, 56px));
  /* deeper than the sibling pages: the channel cards below pull up into
     this padding, and the lead still needs to clear their top edge */
  padding-bottom: clamp(100px, 11vw, 160px);
  background: var(--dmu-navy);
  isolation: isolate;
  overflow: hidden;
}
.contact-masthead__media { position: absolute; inset: 0; z-index: 0; }
.contact-masthead__media img { width: 100%; height: 100%; object-fit: cover; }

.contact-masthead__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(26, 28, 43, .78) 0%, rgba(26, 28, 43, .40) 46%, rgba(26, 28, 43, .90) 100%),
    linear-gradient(90deg, rgba(26, 28, 43, .78) 0%, rgba(26, 28, 43, 0) 70%);
}

.contact-masthead__inner { position: relative; z-index: 2; }

/* -- breadcrumb -- */
.contact-crumbs { margin-bottom: clamp(18px, 2.4vw, 30px); }
.contact-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.contact-crumbs li {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
.contact-crumbs li + li::before {
  content: "/";
  margin-right: 10px;
  color: rgba(255, 255, 255, .34);
}
.contact-crumbs a { transition: color var(--dur-base) var(--ease-out); }
.contact-crumbs a:hover { color: #fff; }
.contact-crumbs [aria-current="page"] { color: #fff; }

.contact-masthead__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 clamp(14px, 1.8vw, 20px);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #fff;
}
.contact-masthead__eyebrow::before {
  content: "";
  width: clamp(32px, 5vw, 64px);
  height: 3px;
  background: var(--dmu-red);
  flex: none;
}

.contact-masthead__heading {
  max-width: 14ch;
  color: #fff;
  text-shadow: 0 2px 40px rgba(15, 16, 26, .35);
}

.contact-masthead__lead {
  max-width: 58ch;
  margin-top: clamp(18px, 2.2vw, 26px);
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: rgba(255, 255, 255, .84);
}

/* --------------------------------------------------------------------------
   3. CONTACT CHANNELS
   Four equal cards on one row at desktop, lifted so they straddle the
   masthead edge. Each whole card is the link target, which keeps the tap
   area large on a phone — the "Call us" card is a ~120px tall tel: hit.
   -------------------------------------------------------------------------- */
.contact-channels {
  position: relative;
  z-index: 3;
  margin-top: clamp(-88px, -7vw, -56px);   /* overlap the masthead */
  /* shallower than --sp-section: the enquiry band below opens with a full
     section pad of its own, and two stacked would read as a dead gap */
  padding-bottom: clamp(56px, 6vw, 96px);
  /* left transparent so the overlapped strip shows the masthead; the page
     background behind it is already --dmu-paper */
  background: transparent;
}

.contact-channels__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}

.contact-channel { display: flex; }

.contact-channel__link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: clamp(24px, 2.6vw, 34px);
  background: var(--dmu-paper);
  border: 1px solid var(--dmu-line);
  border-top: 3px solid var(--dmu-navy);
  box-shadow: 0 24px 60px rgba(26, 28, 43, .08);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-top-color var(--dur-base) var(--ease-out);
}
.contact-channel__link:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 70px rgba(26, 28, 43, .14);
  border-top-color: var(--dmu-red);
}

.contact-channel__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: clamp(8px, 1.2vw, 14px);
  background: var(--dmu-sand);
  color: var(--dmu-navy);
  transition: background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.contact-channel__icon svg { width: 21px; height: 21px; }
.contact-channel__link:hover .contact-channel__icon {
  background: var(--dmu-navy);
  color: #fff;
}

.contact-channel__label {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dmu-muted);
}

.contact-channel__value {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 0.98rem + 0.36vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--dmu-navy);
  word-break: break-word;
}
/* the address is the longest value — keep it from setting the row height */
.contact-channel__value--email {
  font-size: clamp(0.9375rem, 0.88rem + 0.28vw, 1.0625rem);
}

.contact-channel__hint {
  margin-top: auto;
  padding-top: 10px;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--dmu-body);
}

/* -- phone card: the primary CTA, so it carries the brand red -- */
.contact-channel--phone .contact-channel__link {
  background: var(--dmu-navy);
  border-color: var(--dmu-navy);
  border-top-color: var(--dmu-red);
}
.contact-channel--phone .contact-channel__label { color: rgba(255, 255, 255, .62); }
.contact-channel--phone .contact-channel__value { color: #fff; }
.contact-channel--phone .contact-channel__hint { color: rgba(255, 255, 255, .72); }
.contact-channel--phone .contact-channel__icon { background: var(--dmu-red); color: #fff; }
.contact-channel--phone .contact-channel__link:hover .contact-channel__icon {
  background: #fff;
  color: var(--dmu-red);
}

/* -- WhatsApp card: green top rule only, so it reads as a sibling -- */
.contact-channel--whatsapp .contact-channel__link { border-top-color: var(--dmu-whatsapp); }
.contact-channel--whatsapp .contact-channel__icon { color: var(--dmu-whatsapp); }
.contact-channel--whatsapp .contact-channel__link:hover .contact-channel__icon {
  background: var(--dmu-whatsapp);
  color: #fff;
}

/* --------------------------------------------------------------------------
   4. ENQUIRY
   Form panel left, supporting column right. The form itself is a plain
   two-column field grid that collapses to one column on tablet and below.
   -------------------------------------------------------------------------- */
.contact-enquiry {
  /* tighter top/bottom than the default --sp-section rhythm */
  padding-block: clamp(40px, 4.5vw, 72px);
  background: var(--dmu-sand);
  scroll-margin-top: calc(var(--bar-h) + 16px);
}

.contact-enquiry__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr);
  align-items: start;
  gap: clamp(28px, 2vw, 64px);
}


/* -- form panel -- */
.contact-form-panel {
  padding: clamp(28px, 3.4vw, 54px);
  background: var(--dmu-paper);
  border-top: 3px solid var(--dmu-red);
  box-shadow: 0 24px 60px rgba(26, 28, 43, .07);
}

.contact-form-panel__head { margin-bottom: clamp(26px, 3vw, 40px); }

.contact-form-panel__eyebrow {
  margin: 0 0 16px;
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dmu-red);
}

.contact-form-panel__heading { max-width: 16ch; }

.contact-form-panel__text {
  max-width: 56ch;
  margin-top: clamp(14px, 1.8vw, 20px);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--dmu-body);
}

/* -- field grid -- */
.contact-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 26px);
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}
.contact-field--full { grid-column: 1 / -1; }

.contact-field__label {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dmu-navy);
}
.contact-field__req { color: var(--dmu-red); }

.contact-field__input {
  width: 100%;
  /* more compact field: tighter padding + smaller type */
  padding: 11px 14px;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--dmu-ink);
  background: var(--dmu-sand);
  border: 1px solid var(--dmu-line);
  border-radius: 2px;
  transition: border-color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
/* placeholder a touch smaller than the typed text for a lighter look */
.contact-field__input::placeholder { color: var(--dmu-muted); opacity: 1; font-size: 0.875rem; }
.contact-field__input:hover { border-color: #CFCCC7; }
.contact-field__input:focus {
  outline: none;
  background: var(--dmu-paper);
  border-color: var(--dmu-navy);
  box-shadow: 0 0 0 3px rgba(42, 47, 82, .12);
}
/* keyboard focus still gets the site-wide ring */
.contact-field__input:focus-visible {
  outline: 2px solid var(--dmu-red);
  outline-offset: 2px;
}

.contact-field__input--area {
  height: 120px;
  line-height: 1.6;
  resize: none;
}

/* -- select: native control, custom chevron -- */
.contact-field__select { position: relative; display: block; }
.contact-field__select select { padding-right: 46px; cursor: pointer; }
.contact-field__select > svg {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--dmu-navy);
}

/* -- radio group -- */
.contact-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;   /* fieldsets ignore grid min-width without this */
}
.contact-fieldset > .contact-field__label { padding: 0; }

.contact-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.contact-choice {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--dmu-sand);
  border: 1px solid var(--dmu-line);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
.contact-choice:hover { border-color: #CFCCC7; }

/* the native input is hidden visually but stays focusable and in the
   accessibility tree — the styled box mirrors its state */
.contact-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.contact-choice__box {
  position: relative;
  width: 18px;
  height: 18px;
  flex: none;
  background: var(--dmu-paper);
  border: 1px solid #C9C6C1;
  border-radius: 50%;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.contact-choice__box::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--dmu-red);
  transform: scale(0);
  transition: transform var(--dur-fast) var(--ease-out);
}

.contact-choice__text {
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1;
  color: var(--dmu-ink);
}

.contact-choice input:checked ~ .contact-choice__box { border-color: var(--dmu-red); }
.contact-choice input:checked ~ .contact-choice__box::after { transform: scale(1); }
.contact-choice:has(input:checked) {
  background: var(--dmu-paper);
  border-color: var(--dmu-navy);
}
.contact-choice:has(input:focus-visible) {
  outline: 2px solid var(--dmu-red);
  outline-offset: 3px;
}

/* -- consent checkbox -- */
.contact-consent {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  cursor: pointer;
}
.contact-consent input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.contact-consent__box {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  margin-top: 3px;
  background: var(--dmu-paper);
  border: 1px solid #C9C6C1;
  border-radius: 2px;
  color: #fff;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.contact-consent__box svg {
  width: 9px;
  height: 9px;
  opacity: 0;
  transform: scale(.6);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.contact-consent input:checked ~ .contact-consent__box {
  background: var(--dmu-red);
  border-color: var(--dmu-red);
}
.contact-consent input:checked ~ .contact-consent__box svg { opacity: 1; transform: none; }
.contact-consent input:focus-visible ~ .contact-consent__box {
  outline: 2px solid var(--dmu-red);
  outline-offset: 3px;
}
.contact-consent__text {
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--dmu-body);
}

/* -- submit row -- */
.contact-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 2vw, 26px);
  margin-top: clamp(26px, 3vw, 38px);
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--dmu-line);
}

.contact-form__submit { padding-inline: clamp(26px, 3vw, 38px); }

.contact-form__note {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--dmu-body);
}
.contact-form__note a {
  font-weight: 700;
  color: var(--dmu-navy);
  background-image: linear-gradient(var(--dmu-red), var(--dmu-red));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.contact-form__note a:hover { background-size: 100% 2px; color: var(--dmu-red); }

/* --------------------------------------------------------------------------
   5. ENQUIRY ASIDE
   Three stacked cards: process, hours, WhatsApp. Sticky on desktop so the
   process stays visible while a long form is being filled in.
   -------------------------------------------------------------------------- */
.contact-aside {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.8vw, 24px);
  position: sticky;
  top: calc(var(--bar-h) + 24px);
}

.contact-aside__card {
  padding: clamp(24px, 2.8vw, 38px);
  background: var(--dmu-paper);
  border: 1px solid var(--dmu-line);
}

.contact-aside__heading {
  font-size: clamp(1.25rem, 1.12rem + 0.42vw, 1.5rem);
  line-height: 1.25;
  color: var(--dmu-navy);
}

/* -- process steps -- */
.contact-steps {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 24px);
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  padding: 0;
  list-style: none;
}

.contact-step {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.contact-step__num {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--dmu-red);
  background: var(--dmu-sand);
  border-radius: 50%;
}

.contact-step__body { display: flex; flex-direction: column; gap: 5px; }

.contact-step__title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--dmu-navy);
}

.contact-step__text {
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--dmu-body);
}

/* -- opening hours -- */
.contact-hours {
  margin: clamp(18px, 2.2vw, 24px) 0 0;
  padding: 0;
  list-style: none;
}

.contact-hours__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 0;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--dmu-body);
  border-bottom: 1px solid var(--dmu-line);
}
.contact-hours__row:last-child { border-bottom: 0; }
.contact-hours__row span:first-child { font-weight: 500; color: var(--dmu-navy); }
.contact-hours__row span:last-child { font-variant-numeric: tabular-nums; }
.contact-hours__row--closed span:last-child { color: var(--dmu-red); font-weight: 700; }

.contact-hours__note {
  margin-top: clamp(16px, 1.8vw, 20px);
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--dmu-body);
}

/* -- WhatsApp card -- */
.contact-aside__card--wa {
  background: var(--dmu-navy);
  border-color: var(--dmu-navy);
}

.contact-aside__wa-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: clamp(16px, 1.8vw, 22px);
  background: var(--dmu-whatsapp);
  color: #fff;
  border-radius: 50%;
}
.contact-aside__wa-icon svg { width: 24px; height: 24px; }

.contact-aside__heading--wa { color: #fff; }

.contact-aside__wa-text {
  margin: 12px 0 clamp(20px, 2.4vw, 26px);
  font-size: var(--fs-small);
  line-height: 1.7;
  color: rgba(255, 255, 255, .78);
}

.contact-aside__card--wa .index-btn { width: 100%; }

/* --------------------------------------------------------------------------
   6. MAP
   The existing Google Maps embed. The iframe keeps a fixed aspect ratio so
   it never collapses, and the address card sits beside it at desktop and
   stacks beneath it on narrow screens.
   -------------------------------------------------------------------------- */
.contact-map {
  padding-block: var(--sp-section);
  background: var(--dmu-paper);
}

.contact-map__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.44fr);
  align-items: stretch;
  gap: clamp(20px, 2.4vw, 32px);
}

.contact-map__frame {
  position: relative;
  overflow: hidden;
  background: var(--dmu-sand);
  border: 1px solid var(--dmu-line);
}
/* the height lives on the iframe itself — height:100% inside an auto-height
   parent would resolve to auto and collapse the embed */
.contact-map__frame iframe {
  display: block;
  width: 100%;
  height: clamp(320px, 42vw, 520px);
  border: 0;
  /* the embed ships in Google's own palette; a light desaturation settles
     it into the page without making street names harder to read */
  filter: saturate(.88) contrast(1.02);
}

.contact-map__card {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 40px);
  background: var(--dmu-navy);
  border-top: 3px solid var(--dmu-red);
}

.contact-map__card-eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dmu-red-light);
}

.contact-map__card-address {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.02rem + 0.42vw, 1.375rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.015em;
  color: #fff;
}

.contact-map__list {
  margin: clamp(22px, 2.6vw, 30px) 0 clamp(24px, 3vw, 34px);
  padding: clamp(20px, 2.4vw, 26px) 0 0;
  list-style: none;
  border-top: 1px solid var(--dmu-line-dark);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.8vw, 20px);
}

.contact-map__item { display: flex; flex-direction: column; gap: 6px; }

.contact-map__item-label {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .56);
}

.contact-map__item-value {
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.45;
  color: #fff;
  word-break: break-word;
}

a.contact-map__item-value {
  align-self: start;
  background-image: linear-gradient(var(--dmu-red-light), var(--dmu-red-light));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
a.contact-map__item-value:hover {
  background-size: 100% 1px;
  color: var(--dmu-red-light);
}

.contact-map__card-btn {
  margin-top: auto;
  align-self: start;
  border-color: rgba(255, 255, 255, .42);
  color: #fff;
}
.contact-map__card-btn:hover { background: #fff; border-color: #fff; color: var(--dmu-navy); }

/* --------------------------------------------------------------------------
   7. CLOSING CTA
   Copy left, actions right. The phone control is the largest thing in the
   band — it is a tel: link styled as a card, not a button, so the number
   itself is legible before it is tapped.
   -------------------------------------------------------------------------- */
.contact-cta {
  padding-block: var(--sp-section);
  background: var(--dmu-navy);
}

.contact-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}

.contact-cta__eyebrow {
  margin: 0 0 16px;
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dmu-red-light);
}

.contact-cta__heading { max-width: 16ch; color: #fff; }

.contact-cta__lead {
  max-width: 52ch;
  margin-top: clamp(18px, 2.2vw, 26px);
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: rgba(255, 255, 255, .78);
}

.contact-cta__actions {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 20px);
}

/* -- the phone CTA card -- */
.contact-cta__phone {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 22px);
  padding: clamp(20px, 2.4vw, 28px) clamp(22px, 2.6vw, 32px);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .22);
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.contact-cta__phone:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .42);
  transform: translateY(-2px);
}

.contact-cta__phone-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  background: var(--dmu-red);
  color: #fff;
  border-radius: 50%;
}
.contact-cta__phone-icon svg { width: 23px; height: 23px; }

.contact-cta__phone-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.contact-cta__phone-label {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

.contact-cta__phone-number {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.14rem + 1.0vw, 1.875rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
}

.contact-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.contact-cta__buttons .index-btn { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   8. Responsive
   Type and spacing are clamp()-based throughout, so these breakpoints
   change layout and visibility only — never a font size.
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .contact-channels__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
  /* the sticky aside has nothing to stick alongside once stacked */
  .contact-enquiry__inner,
  .contact-map__layout,
  .contact-cta__inner { grid-template-columns: minmax(0, 1fr); }

  .contact-aside { position: static; top: auto; }
  .contact-cta__heading { max-width: 20ch; }
  .contact-map__frame iframe { height: clamp(300px, 52vw, 420px); }
}

@media (max-width: 767px) {
  /* the overlap needs a masthead edge to overlap; below this the cards
     simply follow the masthead */
  .contact-channels {
    margin-top: 0;
    padding-top: clamp(40px, 8vw, 64px);
    background: var(--dmu-paper);
  }
  /* nothing overlaps the masthead here, so it goes back to a normal foot */
  .contact-masthead { padding-bottom: clamp(44px, 6vw, 72px); }
  .contact-form__grid { grid-template-columns: minmax(0, 1fr); }

  /* clear the fixed quick-contact bar so it never covers the copyright */
  body.contact-page { padding-bottom: 60px; }
}

/* "Our office" block (mobile, ≤768px): centre the whole card, collapse the
   address onto one line, sit phone + email side by side, and drop the "Get
   directions" button below them. Desktop keeps its left-aligned, stacked
   layout. */
@media (max-width: 768px) {
  /* centre everything in the card */
  .contact-map__card { align-items: center; text-align: center; }

  .contact-map__card-eyebrow { text-align: center; }
  .contact-map__card-address {
    text-align: center;
    font-size: clamp(0.95rem, 3.4vw, 1.25rem);
    white-space: nowrap;
  }
  .contact-map__card-address br { display: none; }

  /* phone + email side by side, wrapping (stacking) on very narrow phones */
  .contact-map__list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(20px, 6vw, 48px);
    width: 100%;
  }
  .contact-map__item { align-items: center; text-align: center; }
  a.contact-map__item-value { align-self: center; }

  /* button sits below the phone/email row, centred */
  .contact-map__card-btn { align-self: center; }
}

/* very narrow phones: the email is too long to sit beside the phone, so stack
   them again and let the address wrap instead of overflowing. */
@media (max-width: 575px) {
  .contact-map__list { flex-direction: column; }
  /* let the address wrap within the card instead of forcing one wide line
     (align-items:center keeps flex children at content width, so give it the
     full width to wrap against) */
  .contact-map__card-address { white-space: normal; align-self: stretch; }
  .contact-map__item-value { overflow-wrap: anywhere; }
}

@media (max-width: 575px) {
  /* keep the whole "Prefer to talk it through? Call …" sentence on one line;
     the font scales with viewport width so it still fits narrow phones */
  .contact-form__note {
    white-space: nowrap;
    font-size: clamp(0.6875rem, 3.4vw, var(--fs-small));
  }
  .contact-form__note a { white-space: nowrap; }
  .contact-channels__grid { grid-template-columns: minmax(0, 1fr); }
  .contact-choices { display: grid; grid-template-columns: minmax(0, 1fr); }
  .contact-choice { justify-content: flex-start; }

  .contact-form__foot { align-items: stretch; }
  .contact-form__submit { width: 100%; }

  .contact-cta__buttons .index-btn,
  .contact-map__card-btn { width: 100%; justify-content: center; }
  .contact-map__card-btn { align-self: stretch; }
}

/* --------------------------------------------------------------------------
   9. Reduced motion
   index.css neutralises the shared reveal and hover-lift rules. The extra
   card lifts, chevrons and control transitions added here are cancelled
   too, so the page settles with no movement at all.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .contact-channel__link,
  .contact-channel__icon,
  .contact-field__input,
  .contact-choice,
  .contact-choice__box,
  .contact-choice__box::after,
  .contact-consent__box,
  .contact-consent__box svg,
  .contact-cta__phone,
  a.contact-map__item-value,
  .contact-form__note a {
    transition: none;
  }
  .contact-channel__link:hover,
  .contact-cta__phone:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   10. RESPONSIVE REFINEMENTS — laptop tier + small-screen hardening
   -------------------------------------------------------------------------- */

/* -- laptop: four channel cards tighten before the 1199px drop to two -- */
@media (max-width: 1320px) {
  .contact-channels__grid { gap: clamp(14px, 1.4vw, 22px); }
}

/* -- short screens: the map iframe should not eat the whole viewport -- */
@media (max-height: 620px) {
  .contact-map__frame iframe { height: clamp(240px, 60vh, 360px); }
}

@media (max-width: 479px) {
  /* emails and long addresses are the usual overflow culprits on this page */
  .contact-channel__value,
  .contact-map__item,
  .contact-cta__phone-body { overflow-wrap: anywhere; word-break: break-word; }

  .contact-cta__heading { max-width: 100%; }
  .contact-step { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; }
  .contact-step__num { width: 32px; height: 32px; }
}

@media (hover: none) {
  .contact-channel:hover { transform: none; }
}