/* =========================================================
   MouldThreat internal pages (mtpages.css)
   Scoped to .mtpage to avoid clashes with template / Bootstrap.
   ========================================================= */

/* ---------- Core layout ---------- */
.mtpage { font-family: inherit; color: var(--mt-ink, #2f3120); }

.mtpage-container { max-width: 1120px; margin: 0 auto; padding: 0 18px; }
.mtpage-section { padding: 56px 0; }

/* Alternate section background */
.mtpage-alt { background: rgba(121,126,81,.10); }

/* Typography */
.mtpage-eyebrow{
  margin: 0 0 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--mt-sage, #797e51);
  opacity: 1;
}
.mtpage h1 { margin: 0 0 12px; line-height: 1.1; font-size: 42px; color: var(--mt-ink, #2f3120); }
@media (max-width: 600px){ .mtpage h1 { font-size: 34px; } }
.mtpage h2 { margin: 0 0 10px; font-size: 28px; color: var(--mt-ink, #2f3120); }
.mtpage p { margin: 0 0 10px; line-height: 1.6; }
.mtpage-lede { margin: 0 0 16px; font-size: 18px; opacity: .92; max-width: 62ch; }

/* ---------- Brand variables ---------- */
.mtpage{
  --mt-ink: #2f3120;
  --mt-olive: #575f28;
  --mt-sage: #797e51;

  --mt-yes: #2f6b2f;
  --mt-yes-bg: rgba(87,95,40,.12);

  --mt-no: #a14b4b;
  --mt-no-bg: rgba(161,75,75,.10);

  /* Steps */
  --mt-step-1: #575f28;
  --mt-step-2: #2f3120;
  --mt-step-3: #797e51;
  --mt-step-4: #6f7a2f;

  /* Buttons */
  --mt-btn: #586029;
  --mt-btn-hover: #7d8a3a;
  --mt-btn-ink: #ffffff;
  --mt-btn-shadow: rgba(47,49,32,.18);
}

/* ---------- Hero ---------- */
.mtpage-hero{
  padding: 56px 0 28px;
  position: relative;
  overflow: hidden;
  /* subtle haze without consuming pseudo-elements */
  background:
    radial-gradient(800px 400px at 70% 20%, rgba(121,126,81,.10), transparent 60%),
    radial-gradient(600px 300px at 10% 10%, rgba(87,95,40,.08), transparent 60%);
}

/* Organic blobs (two layers) */
.mtpage-hero::before,
.mtpage-hero::after{
  content:"";
  position:absolute;
  width: 520px;
  height: 520px;
  border-radius: 45% 55% 55% 45% / 55% 45% 55% 45%;
  filter: blur(28px);
  opacity: .22;
  pointer-events: none;
}
.mtpage-hero::before{
  left: -220px;
  top: -240px;
  background: radial-gradient(circle at 30% 30%, rgba(87,95,40,.55), rgba(87,95,40,0) 60%);
}
.mtpage-hero::after{
  right: -240px;
  top: -160px;
  background: radial-gradient(circle at 70% 40%, rgba(121,126,81,.55), rgba(121,126,81,0) 62%);
}

/* Hero grid */
.mtpage-hero-grid{
  display: grid;
  gap: 22px;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: stretch; /* equal height columns */
}
@media (max-width: 900px){ .mtpage-hero-grid { grid-template-columns: 1fr; } }

/* Left column: pin CTA row to bottom */
.mtpage-hero-copy{
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.mtpage-hero-top{}
.mtpage-cta-row{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 14px;
}

/* Right column */
.mtpage-hero-media{ display: grid; gap: 12px; height: 100%; }

/* Image placeholder */
.mtpage-imageph{
  border-radius: 18px;
  border: 1px solid rgba(87,95,40,.18);
  background:
    radial-gradient(circle at 30% 25%, rgba(87,95,40,.18), rgba(87,95,40,0) 60%),
    radial-gradient(circle at 70% 70%, rgba(121,126,81,.18), rgba(121,126,81,0) 60%),
    rgba(255,255,255,.7);
  min-height: 360px;
  height: 100%;
  min-height: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 18px;
}
.mtpage-imageph-inner { max-width: 320px; }
.mtpage-imageph-title { font-weight: 700; font-size: 18px; }
.mtpage-imageph-sub { margin-top: 6px; opacity: .8; font-size: 14px; line-height: 1.4; }

/* If you swap placeholder for a real image */
.mtpage-imageph-photo{ padding: 0; overflow: hidden; }
.mtpage-imageph-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Cards / panels ---------- */
.mtpage-card{
  padding: 18px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(47,49,32,.10);
  box-shadow: 0 14px 28px rgba(47,49,32,.08);
}
.mtpage-card-soft{
  box-shadow: 0 12px 24px rgba(47,49,32,.08);
  background: rgba(255,255,255,.9);
  border-color: rgba(87,95,40,.22);
}
.mtpage-note { margin-top: 12px; opacity: .85; font-size: 14px; }

/* Two-column split layout (What we do / What we don’t do) */
.mtpage-split{
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

@media (max-width: 900px){
  .mtpage-split{
    grid-template-columns: 1fr;
  }
}

/* Callout */
.mtpage-callout{
  margin-top: 16px;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(87,95,40,.18);
  background: rgba(121,126,81,.12);
  position: relative;
}
.mtpage-callout::before{
  content:"";
  position:absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 6px;
  background: var(--mt-olive);
  opacity: .75;
}
.mtpage-callout h3 { margin: 0 0 6px; font-size: 16px; }
.mtpage-callout p { margin: 0; }

/* ---------- Lists ---------- */
.mtpage-list { margin: 10px 0 0; padding-left: 18px; }
.mtpage-list li { margin: 8px 0; }

/* Icon lists (FontAwesome ticks/crosses) */
.mtpage-iconlist{
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
}
.mtpage-iconlist li{
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(47,49,32,.08);
  background: rgba(255,255,255,.7);
  margin: 10px 0;
}
.mtpage-iconlist li i{
  width: 18px;
  text-align:center;
  font-size: 14px;
  line-height: 1;
  flex: 0 0 18px;
}
.mtpage-iconlist li span{ display:block; line-height: 1.45; }

.mtpage-iconlist-yes li{
  border-color: rgba(87,95,40,.20);
  background: var(--mt-yes-bg);
}
.mtpage-iconlist-yes li i{ color: var(--mt-yes); }

.mtpage-iconlist-no li{
  border-color: rgba(161,75,75,.18);
  background: var(--mt-no-bg);
}
.mtpage-iconlist-no li i{ color: var(--mt-no); }

/* ---------- “How we work” steps ---------- */
.mtpage-steps{
  display:grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 900px){ .mtpage-steps { grid-template-columns: 1fr; } }

.mtpage-step{
  display:flex;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(87,95,40,.18);
  background: rgba(255,255,255,.86);
  box-shadow: 0 10px 18px rgba(47,49,32,.06);
  position: relative;
  overflow: hidden;
}
/* subtle left accent bar */
.mtpage-step::before{
  content:"";
  position:absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 6px;
  background: rgba(87,95,40,.55);
}

.mtpage-step-num{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  letter-spacing: .02em;
  color: #fff;
  box-shadow: 0 10px 18px rgba(47,49,32,.12);
  flex: 0 0 40px;
}
.mtpage-step-body span { display:block; opacity:.82; font-size: 14px; margin-top: 2px; }

/* Colour the number pill by step index */
.mtpage-step:nth-child(1) .mtpage-step-num{ background: var(--mt-step-1); }
.mtpage-step:nth-child(2) .mtpage-step-num{ background: var(--mt-step-4); }
.mtpage-step:nth-child(3) .mtpage-step-num{ background: var(--mt-step-3); }
.mtpage-step:nth-child(4) .mtpage-step-num{ background: var(--mt-step-2); }

/* Match the accent bar per step */
.mtpage-step:nth-child(1)::before{ background: rgba(87,95,40,.70); }
.mtpage-step:nth-child(2)::before{ background: rgba(111,122,47,.70); }
.mtpage-step:nth-child(3)::before{ background: rgba(121,126,81,.70); }
.mtpage-step:nth-child(4)::before{ background: rgba(47,49,32,.55); }

/* Spore overlay for the “How we work” section (About page) */
.mtpage-about .mtpage-alt{
  position: relative;
  overflow: hidden;
}
.mtpage-about .mtpage-alt::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 260px;
  background-image: url("../../siteimages/mouldbg2.png");
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: auto 260px;
  opacity: .60;
  pointer-events: none;
  filter: blur(0.2px);
  mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
}
.mtpage-about .mtpage-alt .mtpage-container{
  position: relative;
  z-index: 1;
}

/* ---------- CTA band ---------- */
.mtpage-cta-band{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(87,95,40,.18);
  background:
    radial-gradient(400px 120px at 90% 100%, rgba(121,126,81,.12), transparent 60%),
    rgba(121,126,81,.12);
}
@media (max-width: 900px){ .mtpage-cta-band { flex-direction: column; align-items: flex-start; } }

/* ---------- Buttons (brand + “mould rise” hover) ---------- */
.mtpage .mtpage-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 12px;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,0.15);
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  transition: transform .20s ease, box-shadow .20s ease, border-color .20s ease, background-size .65s ease;
}

/* Primary: base + animated radial overlay inside background (no pseudo-element = no stacking bugs) */
.mtpage a.mtpage-btn-primary{
  background-color: var(--mt-btn);
  background-image: radial-gradient(circle at 50% 120%, var(--mt-btn-hover) 0%, var(--mt-btn-hover) 55%, rgba(125,138,58,0) 56%);
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 0% 0%;
  color: var(--mt-btn-ink) !important; /* defeat global a:hover */
  border-color: transparent;
  box-shadow: 0 10px 18px var(--mt-btn-shadow);
}
.mtpage a.mtpage-btn-primary:hover,
.mtpage a.mtpage-btn-primary:focus{
  background-size: 260% 260%;
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(47,49,32,.22);
  color: var(--mt-btn-ink) !important;
  text-decoration: none;
}
.mtpage a.mtpage-btn-primary:active{
  transform: translateY(0);
  box-shadow: 0 9px 16px rgba(47,49,32,.18);
}

/* Ghost */
.mtpage a.mtpage-btn-ghost{
  background-color: rgba(255,255,255,.85);
  background-image: radial-gradient(circle at 50% 120%, rgba(88,96,41,.18) 0%, rgba(88,96,41,.18) 55%, rgba(88,96,41,0) 56%);
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 0% 0%;
  color: var(--mt-ink) !important;
  border-color: rgba(88,96,41,.35);
  box-shadow: 0 10px 18px rgba(47,49,32,.06);
}
.mtpage a.mtpage-btn-ghost:hover,
.mtpage a.mtpage-btn-ghost:focus{
  background-size: 260% 260%;
  transform: translateY(-2px);
  border-color: rgba(88,96,41,.55);
  box-shadow: 0 14px 26px rgba(47,49,32,.10);
  text-decoration: none;
}

/* Focus ring */
.mtpage .mtpage-btn:focus{ outline: none; }
.mtpage .mtpage-btn:focus-visible{
  box-shadow: 0 0 0 4px rgba(88,96,41,.22), 0 14px 26px rgba(47,49,32,.20);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .mtpage .mtpage-btn{ transition: none !important; }
}

/* Hide old badge row (not used) */
.mtpage-badges{ display: none !important; }

/* =========================================
   Services tabs (URL-based “tabs”)
   ========================================= */

.mtpage-servtabs{
  margin-top: 18px;
}

.mtpage-servtabs-row{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(87,95,40,.18);
  background: rgba(255,255,255,.70);
  box-shadow: 0 12px 24px rgba(47,49,32,.06);
}

/* each tab */
.mtpage-servtab{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(87,95,40,.22);
  background: rgba(255,255,255,.85);
  color: var(--mt-ink) !important;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}

.mtpage-servtab:hover{
  transform: translateY(-1px);
  border-color: rgba(87,95,40,.35);
  box-shadow: 0 10px 18px rgba(47,49,32,.10);
}

/* active tab */
.mtpage-servtab.is-active{
  background: var(--mt-btn);
  border-color: transparent;
  color: #fff !important;
  box-shadow: 0 10px 18px rgba(47,49,32,.18);
}

/* keep the active tab from getting “hover recolored” by global link styles */
.mtpage-servtab.is-active:hover{
  transform: translateY(-1px);
}

/* mobile: make the tabs scroll horizontally if needed */
@media (max-width: 700px){
  .mtpage-servtabs-row{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .mtpage-servtab{
    white-space: nowrap;
    flex: 0 0 auto;
  }
}


.mtpage-services .mtpage-alt{
  position: relative;
  overflow: hidden;
}
.mtpage-services .mtpage-alt::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 260px;
  background-image: url("/siteimages/spores.png");
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: auto 260px;
  opacity: .35;
  pointer-events: none;
  filter: blur(0.2px);
  mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
}
.mtpage-services .mtpage-alt .mtpage-container{
  position: relative;
  z-index: 1;
}

/* Services pages: keep tabs tight to the top of main content */
.mtpage-services .mtpage-servtabs{
  margin-top: 0;
  margin-bottom: 38px;
}

/* If your hero is still visible above, pull the tabs up slightly */
.mtpage-services .mtpage-servtabs-row{
  margin-top: -10px;
}

/* Services pages: do not force spore height when section is empty */
.mtpage-services .mtpage-alt:empty{
  display: none;
}

/* Spread service tabs across full width of their container */
.mtpage-servtabs-row{
  display: flex;
  justify-content: space-evenly;
  gap: 10px;
}

/* Prevent pills from shrinking too small */
.mtpage-servtab{
  white-space: nowrap;
  padding-left: 16px;
  padding-right: 16px;
}

/* On smaller screens fall back to wrapping nicely */
@media (max-width: 900px){
  .mtpage-servtabs-row{
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Service tabs: visually matched radii (container slightly rounder than pills) */
.mtpage-servtabs-row{
  --servtabs-radius: 16px;       /* container */
  --servtab-radius: 14px;        /* pills */
  border-radius: var(--servtabs-radius);
}

.mtpage-servtab{
  border-radius: var(--servtab-radius);
}

.mtpage-servtab{
  padding-top: 11px;
  padding-bottom: 11px;
}

/* CTA band: undo hero "push-to-bottom" behaviour so buttons center vertically */
.mtpage-cta-band .mtpage-cta-row{
  margin-top: 0;
  padding-top: 0;
  align-items: center;
  align-self: center;
}

/* Services: make the <img> fill the hero image box (cover) */
.mtpage-services .mtpage-imageph{
  padding: 0;
  overflow: hidden;
  align-items: stretch;   /* stop centering */
  justify-content: stretch;
}

.mtpage-services .mtpage-imageph-inner{
  max-width: none;
  width: 100%;
  height: 100%;
}

.mtpage-services .mtpage-imageph-sub{
  margin-top: 0;
  opacity: 1;
  width: 100%;
  height: 100%;
}

.mtpage-services .mtpage-imageph img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* About page: make the hero image fill the placeholder box (cover) */
.mtpage-about .mtpage-imageph{
  padding: 0;
  overflow: hidden;
  align-items: stretch;
  justify-content: stretch;
}

.mtpage-about .mtpage-imageph-inner{
  max-width: none;
  width: 100%;
  height: 100%;
}

.mtpage-about .mtpage-imageph img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================
   Team page extras (append-only)
   ========================================= */

/* Reverse hero layout: image column on the left */
.mtpage-hero-grid-reverse{
  grid-template-columns: 0.8fr 1.2fr;
}
@media (max-width: 900px){
  .mtpage-hero-grid-reverse{
    grid-template-columns: 1fr;
  }
}

/* Team grid */
.mtpage-teamgrid{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 16px;
}
@media (max-width: 900px){
  .mtpage-teamgrid{
    grid-template-columns: 1fr;
  }
}

.mtpage-person{
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(87,95,40,.18);
  box-shadow: 0 14px 28px rgba(47,49,32,.06);
}

.mtpage-person-top{
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.mtpage-avatar{
  width: 58px;
  height: 58px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(87,95,40,.22);
  background: rgba(121,126,81,.12);
  flex: 0 0 58px;
}
.mtpage-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mtpage-person-name{
  margin: 0;
  font-size: 18px;
}
.mtpage-person-role{
  font-size: 13px;
  opacity: .82;
  margin-top: 2px;
}

.mtpage-person-bio{
  margin: 0 0 10px;
}

.mtpage-person-tags{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mtpage-person-tags li{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(87,95,40,.22);
  background: rgba(255,255,255,.75);
}

/* Small badge row used under the hero image */
.mtpage-badgerow{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mtpage-badge{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(87,95,40,.22);
  background: rgba(255,255,255,.75);
}

/* =========================================
   Team page: lead profile block (append-only)
   ========================================= */

.mtpage-credcard{
  margin-top: 12px;
}

.mtpage-leadprofile{
  padding: 22px;
  border-radius: 20px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(87,95,40,.18);
  box-shadow: 0 14px 28px rgba(47,49,32,.06);
}

.mtpage-leadprofile-top{
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 12px;
}

.mtpage-avatar-lg{
  width: 74px;
  height: 74px;
  flex: 0 0 74px;
}

.mtpage-leadprofile-name{
  margin: 0;
  font-size: 22px;
}

.mtpage-leadprofile-role{
  font-size: 14px;
  opacity: .9;
  margin-top: 4px;
}

.mtpage-leadprofile-quals{
  margin-top: 6px;
  font-size: 13px;
  opacity: .85;
}

.mtpage-leadprofile-bio{
  margin: 0 0 12px;
}

.mtpage-leadprofile-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mtpage-leadprofile-tags span{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(87,95,40,.22);
  background: rgba(255,255,255,.75);
}

/* Team page: tighten whitespace a touch */
.mtpage-team .mtpage-section { padding: 44px 0; }            /* default is a bit airy */
.mtpage-team .mtpage-hero { padding: 42px 0 18px; }          /* reduce hero bottom gap */
.mtpage-team .mtpage-section-head { margin-bottom: 14px; }   /* less dead space under headings */
.mtpage-team .mtpage-cta-band { margin-top: 12px; }          /* tighten CTA area */

/* Team page: make lead + support sit side-by-side on desktop */
.mtpage-team .mtpage-team-mid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 900px){
  .mtpage-team .mtpage-team-mid{ grid-template-columns: 1fr; }
}
.mtpage-team .mtpage-stack{
  display: grid;
  gap: 16px;
}

.mtpage-compactlist li{ padding: 10px 12px; }
.mtpage-compactlist{ margin-top: 14px; }

/* Team hero image: slightly taller on desktop */
@media (min-width: 901px){
  .mtpage-team .mtpage-imageph-photo img{
    min-height: 260px;
    object-fit: cover;
  }
}

/* Team page: don't pin hero buttons to the bottom (removes the big blank gap) */
.mtpage-team .mtpage-hero-copy{
  min-height: auto;
}

.mtpage-team .mtpage-cta-row{
  margin-top: 16px;     /* normal spacing under the text */
  padding-top: 0;
}

/* Optional: stop the hero columns stretching to equal height on Team page */
.mtpage-team .mtpage-hero-grid{
  align-items: start;
}

/* =========================================
   Team page: 2-up row then full-width list
   ========================================= */

.mtpage-team .mtpage-team-layout{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items: start;
}

/* Row placement */
.mtpage-team .mtpage-team-lead{ grid-column: 1; }
.mtpage-team .mtpage-team-support{ grid-column: 2; }
.mtpage-team .mtpage-team-how{ grid-column: 1 / -1; }

/* Mobile stack */
@media (max-width: 900px){
  .mtpage-team .mtpage-team-layout{
    grid-template-columns: 1fr;
  }
  .mtpage-team .mtpage-team-support,
  .mtpage-team .mtpage-team-how{
    grid-column: 1;
  }
}

/* How we work list in 2 columns on desktop */
@media (min-width: 901px){
  .mtpage-team .mtpage-iconlist-2col{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
  }
  .mtpage-team .mtpage-iconlist-2col li{
    margin: 0;
  }
}

/* Team page: align top row cards + match heights */
.mtpage-team .mtpage-team-layout{
  align-items: stretch; /* stretch grid items to same row height */
}

.mtpage-team .mtpage-team-lead,
.mtpage-team .mtpage-team-support{
  display: flex;
}

.mtpage-team .mtpage-leadprofile,
.mtpage-team .mtpage-supportcard{
  width: 100%;
  height: 100%;
}

/* Card title style inside boxes */
.mtpage-team .mtpage-cardtitle{
  margin: 0 0 12px;
  font-size: 28px;
}

/* =========================================
   Areas Covered page (append-only)
   ========================================= */

.mtpage-areas .mtpage-hero-grid{
  grid-template-columns: 1.05fr .95fr;
  align-items: start; /* don’t stretch to equal height */
}

@media (max-width: 900px){
  .mtpage-areas .mtpage-hero-grid{
    grid-template-columns: 1fr;
  }
}

/* Keep hero buttons near the content (not pinned) */
.mtpage-areas .mtpage-hero-copy{
  min-height: auto;
}
.mtpage-areas .mtpage-cta-row{
  margin-top: 16px;
  padding-top: 0;
}

/* Remote support card sizing */
.mtpage-remote-card{
  margin-top: 18px;
  max-width: 520px;
}

/* Slightly larger/tidier map panel */
.mtpage-areas .mtpage-mapbox{
  min-height: 420px;
}

.mtpage-areas .mtpage-mapnote{
  margin: 8px 0 0;
  font-size: 13px;
  opacity: .82;
}

/* =========================================
   Areas Covered hero: big map background (append-only)
   ========================================= */

/* Put your generated map here */
.mtpage-areas-hero{
  /* keep your existing hero haze underneath */
  background-image:
    radial-gradient(800px 400px at 70% 20%, rgba(121,126,81,.10), transparent 60%),
    radial-gradient(600px 300px at 10% 10%, rgba(87,95,40,.08), transparent 60%),
    url("../../siteimages/areas-covered-map.png");
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 70% 20%, 10% 10%, right 12%;
  background-size: auto, auto, 62% auto;  /* big map on right */
}

/* Left-side content column */
.mtpage-areas .mtpage-areas-hero-inner{
  max-width: 560px;
  position: relative;
  z-index: 1;
}

/* Don't pin buttons to bottom on this page */
.mtpage-areas .mtpage-hero-copy,
.mtpage-areas .mtpage-cta-row{
  margin-top: 16px;
  padding-top: 0;
}

/* Remote support card sizing */
.mtpage-areas .mtpage-remote-card{
  margin-top: 18px;
  max-width: 420px;
}

/* On smaller screens, reduce the map so it doesn't swamp content */
@media (max-width: 900px){
  .mtpage-areas-hero{
    background-position: 70% 20%, 10% 10%, center 85%;
    background-size: auto, auto, 92% auto;
  }
}

/* On very small screens, let the map fade into the background */
@media (max-width: 600px){
  .mtpage-areas-hero{
    background-position: 70% 20%, 10% 10%, center 92%;
    background-size: auto, auto, 110% auto;
  }
}

/* =========================================
   Areas Covered: full-width hero map + left fade overlay
   ========================================= */

.mtpage-areas-hero{
  position: relative; /* needed for overlay */
  background-image: url("../../siteimages/areas-covered-map.png");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;              /* full-width coverage */
}

/* White fade on the left so text is readable */
.mtpage-areas-hero::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events: none;
  /* strong white on left -> transparent towards right */
  background: linear-gradient(
    to right,
    rgba(245,246,244,0.98) 0%,
    rgba(245,246,244,0.92) 32%,
    rgba(245,246,244,0.55) 52%,
    rgba(245,246,244,0.00) 72%
  );
}

/* Keep your existing hero “haze” blobs behind the overlay (optional) */
.mtpage-areas-hero::after{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  background:
    radial-gradient(800px 400px at 70% 20%, rgba(121,126,81,.10), transparent 60%),
    radial-gradient(600px 300px at 10% 10%, rgba(87,95,40,.08), transparent 60%);
  opacity: .9;
}

/* Ensure content sits above overlays */
.mtpage-areas-hero .mtpage-container{
  position: relative;
  z-index: 2;
}

/* Optional: keep the left column from getting too wide */
.mtpage-areas .mtpage-areas-hero-inner{
  max-width: 560px;
}

/* Mobile: soften overlay so map remains visible */
@media (max-width: 900px){
  .mtpage-areas-hero::before{
    background: linear-gradient(
      to bottom,
      rgba(245,246,244,0.96) 0%,
      rgba(245,246,244,0.86) 45%,
      rgba(245,246,244,0.00) 85%
    );
  }
}

/* =========================================
   Areas Covered: full-width hero map + left fade (no pseudo-elements)
   ========================================= */

.mtpage-areas .mtpage-areas-hero{
  /* More vertical room so the whole map reads better */
  padding: 86px 0 64px;   /* ONLY affects Areas Covered */

  /* Layer order: fade overlay, subtle haze, then the map image */
  background-image:
    linear-gradient(
      to right,
      rgba(245,246,244,0.98) 0%,
      rgba(245,246,244,0.92) 34%,
      rgba(245,246,244,0.55) 54%,
      rgba(245,246,244,0.00) 74%
    ),
    radial-gradient(800px 400px at 70% 20%, rgba(121,126,81,.10), transparent 60%),
    radial-gradient(600px 300px at 10% 10%, rgba(87,95,40,.08), transparent 60%),
    url("../../siteimages/areas-covered-map.png");

  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;

  /* Push the map slightly DOWN and keep it on the right */
  background-position:
    left top,
    70% 20%,
    10% 10%,
    right 45% center;

  /* Make map fill width nicely without awkward cropping */
  background-size:
    100% 100%,
    auto,
    auto,
    cover;
}

/* Mobile: change fade to top->bottom so text stays readable */
@media (max-width: 900px){
  .mtpage-areas .mtpage-areas-hero{
    padding: 64px 0 54px;
    background-image:
      linear-gradient(
        to bottom,
        rgba(245,246,244,0.96) 0%,
        rgba(245,246,244,0.88) 50%,
        rgba(245,246,244,0.00) 88%
      ),
      radial-gradient(800px 400px at 70% 20%, rgba(121,126,81,.10), transparent 60%),
      radial-gradient(600px 300px at 10% 10%, rgba(87,95,40,.08), transparent 60%),
      url("/siteimages/areas-covered-map.png");

    background-position:
      left top,
      70% 20%,
      10% 10%,
      center 60%;
  }
}

/* Tiny map composition tweak */
.mtpage-areas .mtpage-areas-hero{
  background-position:
    left top,
    70% 20%,
    10% 10%,
    right 35% center; /* was right 45% center */
}

.mtpage-areas .mtpage-remote-card{ margin-bottom: 6px; }

@media (max-width: 900px){
  .mtpage-cta-band .mtpage-cta-row{
    width: 100%;
    justify-content: flex-start;
  }
}

/* =========================================
   FAQs accordion (append-only)
   ========================================= */

.mtpage-faqs .mtpage-faqs-hero{
  max-width: 760px;
}

.mtpage-faqs .mtpage-faqs-wrap{
  display: grid;
  gap: 14px;
  max-width: 960px;
}

/* details as cards */
.mtpage-faq{
  border-radius: 18px;
  border: 1px solid rgba(87,95,40,.22);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 24px rgba(47,49,32,.08);
  overflow: hidden;
}

/* summary row */
.mtpage-faq summary{
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 700;
  font-size: 18px;
}

.mtpage-faq summary::-webkit-details-marker{ display: none; }

/* chevron icon */
.mtpage-faq-icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(87,95,40,.20);
  background: rgba(121,126,81,.12);
  position: relative;
  flex: 0 0 34px;
}

.mtpage-faq-icon::before,
.mtpage-faq-icon::after{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  background: rgba(47,49,32,.78);
  transform: translate(-50%,-50%);
  border-radius: 2px;
}
.mtpage-faq-icon::after{
  transform: translate(-50%,-50%) rotate(90deg);
}

/* open state */
.mtpage-faq[open] .mtpage-faq-icon{
  background: rgba(87,95,40,.14);
}
.mtpage-faq[open] .mtpage-faq-icon::after{
  opacity: 0; /* becomes a minus */
}

/* body (animated max-height approach using grid) */
.mtpage-faq-body{
  padding: 0 18px 16px;
  border-top: 1px solid rgba(87,95,40,.14);
}

.mtpage-faq-body p:last-child{ margin-bottom: 0; }

/* hover / focus polish */
.mtpage-faq summary:hover{
  background: rgba(121,126,81,.08);
}
.mtpage-faq summary:focus{
  outline: none;
}
.mtpage-faq summary:focus-visible{
  box-shadow: inset 0 0 0 3px rgba(88,96,41,.22);
  border-radius: 16px;
}

/* mobile type tweak */
@media (max-width: 600px){
  .mtpage-faq summary{
    font-size: 16px;
    padding: 14px 14px;
  }
  .mtpage-faq-body{ padding: 0 14px 14px; }
}

/* =========================================
   FAQs: improve answer padding + spacing
   ========================================= */

.mtpage-faq-body{
  padding: 14px 18px 18px;   /* was tight / uneven */
}

.mtpage-faq-body p{
  margin: 0 0 12px;
}

.mtpage-faq-body p:last-child{
  margin-bottom: 0;
}

.mtpage-faq-body ul,
.mtpage-faq-body ol{
  margin: 10px 0 0 18px;
}

/* =========================================
   FAQs: Q/A badges + richer open state
   ========================================= */

/* Give summary room for a left badge */
.mtpage-faq summary{
  position: relative;
  padding-left: 54px;  /* space for Q badge */
}

/* Q badge */
.mtpage-faq summary::before{
  content: "Q";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  color: rgba(47,49,32,.85);
  background: rgba(121,126,81,.14);
  border: 1px solid rgba(87,95,40,.22);
}

/* When open, make the header feel “active” */
.mtpage-faq[open] summary{
  background: rgba(121,126,81,.10);
}

/* A badge (only visible when open) */
.mtpage-faq[open] .mtpage-faq-body{
  position: relative;
  padding-left: 54px; /* align with Q badge */
}

.mtpage-faq[open] .mtpage-faq-body::before{
  content: "A";
  position: absolute;
  left: 16px;
  top: 16px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  color: rgba(47,49,32,.85);
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(87,95,40,.22);
}

/* Give open item a slightly stronger lift */
.mtpage-faq[open]{
  box-shadow: 0 18px 34px rgba(47,49,32,.12);
  border-color: rgba(87,95,40,.30);
}

/* FAQ icon chip: slightly more premium */
.mtpage-faq-icon{
  background: rgba(255,255,255,.70);
  box-shadow: 0 8px 16px rgba(47,49,32,.10);
}
.mtpage-faq summary:hover .mtpage-faq-icon{
  transform: translateY(-1px);
}

/* =========================================
   FAQ smooth slide-down animation
   ========================================= */

/* Start hidden */
.mtpage-faq .mtpage-faq-body{
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .45s ease;
}

/* When open, allow expansion */
.mtpage-faq[open] .mtpage-faq-body{
  max-height: 1000px; /* big enough for longest answer */
  opacity: 1;
}

/* Animate the content itself */
.mtpage-faq[open] .mtpage-faq-body > *{
  animation: fadeInDown .45s both;
}

/* Slightly nicer close feel */
.mtpage-faq .mtpage-faq-body{
  transition: max-height .45s ease, opacity .25s ease;
}

/* FAQ page: more breathing room before CTA band */
.mtpage-faqs .mtpage-faqs-wrap{
  margin-bottom: 32px;
}

/* =========================================
   News & Updates (append-only)
   ========================================= */

.mtpage-news .mtpage-news-hero{
  max-width: 820px;
}

/* Meta row + chip */
.mtpage-news-meta{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  opacity: .88;
  margin-bottom: 8px;
}

.mtpage-news-chip{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(87,95,40,.22);
  background: rgba(255,255,255,.75);
  opacity: 1;
}

/* Featured */
.mtpage-news-feature{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(87,95,40,.18);
  box-shadow: 0 18px 36px rgba(47,49,32,.10);
  margin-bottom: 18px;
}

.mtpage-news-feature-media{
  border-radius: 18px;
  overflow: hidden;
  display: block;
  min-height: 260px;
  border: 1px solid rgba(87,95,40,.18);
  background: rgba(121,126,81,.10);
}

.mtpage-news-feature-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mtpage-news-feature-copy{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mtpage-news-actions{
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* Grid cards */
.mtpage-news-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.mtpage-news-card{
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(87,95,40,.18);
  box-shadow: 0 14px 28px rgba(47,49,32,.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mtpage-news-thumb{
  display: block;
  height: 160px;
  overflow: hidden;
  background: rgba(121,126,81,.10);
  border-bottom: 1px solid rgba(87,95,40,.14);
}

.mtpage-news-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mtpage-news-cardbody{
  padding: 14px 16px 16px;
}

.mtpage-news-title{
  margin: 0 0 8px;
}

.mtpage-news-title a{
  text-decoration: none;
}

.mtpage-news-title a:hover{
  text-decoration: underline;
}

.mtpage-news-excerpt{
  margin: 0 0 10px;
  opacity: .9;
}

.mtpage-news-more{
  font-weight: 700;
  text-decoration: none;
}

.mtpage-news-more:hover{
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 900px){
  .mtpage-news-feature{
    grid-template-columns: 1fr;
  }
  .mtpage-news-feature-media{
    min-height: 220px;
  }
  .mtpage-news-grid{
    grid-template-columns: 1fr;
  }
}

/* News category chips – subtle colour coding */
.mtpage-news-chip{
  background: rgba(255,255,255,.8);
}

.mtpage-news-chip:contains("Guidance"){ background: rgba(121,126,81,.18); }
.mtpage-news-chip:contains("Standards"){ background: rgba(88,96,41,.18); }
.mtpage-news-chip:contains("Company"){ background: rgba(87,95,40,.14); }

/* Make featured story pop a bit more */
.mtpage-news-feature{
  box-shadow: 0 26px 50px rgba(47,49,32,.14);
  border-color: rgba(87,95,40,.28);
}

/* News card hover */
.mtpage-news-card{
  transition: transform .25s ease, box-shadow .25s ease;
}

.mtpage-news-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(47,49,32,.14);
}

.mtpage-news-more{
  display: inline-block;
  margin-top: 4px;
}



/* =========================================
   Legal / policy pages (append-only)
   ========================================= */

.mtpage-legal .mtpage-legal-hero{
  max-width: 820px;
}

.mtpage-legal .mtpage-legal-grid{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
  align-items: start;
}

@media (max-width: 900px){
  .mtpage-legal .mtpage-legal-grid{
    grid-template-columns: 1fr;
  }
}

.mtpage-legal .mtpage-legal-head{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.mtpage-legal .mtpage-legal-icon{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(87,95,40,.22);
  background: rgba(121,126,81,.14);
  flex: 0 0 46px;
}

.mtpage-legal .mtpage-legal-icon i{
  font-size: 18px;
  opacity: .9;
}

.mtpage-legal .mtpage-legal-sub{
  margin: 4px 0 0;
  opacity: .88;
}

.mtpage-legal .mtpage-legal-body p{
  margin: 0 0 12px;
}
.mtpage-legal .mtpage-legal-body p:last-child{
  margin-bottom: 0;
}

.mtpage-legal .mtpage-legal-list{
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 10px;
}

.mtpage-legal .mtpage-legal-list li{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: rgba(121,126,81,.10);
  border: 1px solid rgba(87,95,40,.14);
  border-radius: 14px;
  padding: 10px 12px;
}

.mtpage-legal .mtpage-legal-list i{
  margin-top: 3px;
}

.mtpage-legal .mtpage-legal-note{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  border: 1px dashed rgba(87,95,40,.26);
  opacity: .92;
}
.mtpage-legal .mtpage-legal-note i{
  margin-top: 2px;
  opacity: .85;
}

/* Ensure card titles inside cards look consistent */
.mtpage-legal .mtpage-cardtitle{
  margin: 0 0 8px;
  font-size: 20px;
}

/* Legal pages – larger status icon */
.mtpage-legal .mtpage-legal-icon{
  width: 56px;
  height: 56px;
}

.mtpage-legal .mtpage-legal-icon i{
  font-size: 24px;
}


/* Legal pages – square hero icon block */
.mtpage-legal .mtpage-legal-icon{
  width: 72px;
  height: 72px;
  min-width: 72px;
  border-radius: 16px;
  background: #eef0ea;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}

/* Big centered icon inside */
.mtpage-legal .mtpage-legal-icon i{
  font-size: 30px;
  line-height: 1;
  color: #5f6b2f; /* MouldThreat olive */
}

/* Legal: slightly better icon/text alignment */
.mtpage-legal .mtpage-legal-head{
  align-items: center;
}

/* Legal: stronger status heading */
.mtpage-legal .mtpage-legal-card .mtpage-cardtitle{
  margin-bottom: 4px;
}
.mtpage-legal .mtpage-legal-sub{
  margin-top: 2px;
}

/* Legal: tighten cover list pills slightly */
.mtpage-legal .mtpage-legal-list li{
  padding: 9px 11px;
}

/* =========================================
   MouldThreat System page (append-only)
   ========================================= */

.mtpage-system .mtpage-system-heroimg{
  min-height: 360px;
}

.mtpage-system .mtpage-system-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}

@media (max-width: 900px){
  .mtpage-system .mtpage-system-grid{
    grid-template-columns: 1fr;
  }
}

.mtpage-system .mtpage-system-cardhead{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.mtpage-system .mtpage-system-icon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: rgba(121,126,81,.14);
  border: 1px solid rgba(87,95,40,.22);
  display: grid;
  place-items: center;
  flex: 0 0 44px;
}

.mtpage-system .mtpage-system-icon i{
  font-size: 18px;
  opacity: .9;
}

.mtpage-system .mtpage-system-cardtitle{
  margin: 0;
  font-size: 18px;
}

/* Register panel */
.mtpage-system .mtpage-register-panel{
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(87,95,40,.18);
  box-shadow: 0 16px 32px rgba(47,49,32,.10);
}

.mtpage-system .mtpage-register-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 900px){
  .mtpage-system .mtpage-register-panel{
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================
   Contact page (inner-template)
   ========================= */

.mtpage-contact .mtpage-hero{
  padding-top: 34px;
  padding-bottom: 34px;
}

.mtpage-contact-cards{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 18px;
  margin-bottom: 14px;
}

@media (min-width: 900px){
  .mtpage-contact-cards{
    grid-template-columns: 1fr;
  }
}

.mtpage-contact-card{
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 14px;
}

.mtpage-contact-ico{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(120, 120, 120, 0.10);
  border: 1px solid rgba(0,0,0,0.06);
  flex: 0 0 44px;
  font-size: 18px;
}

.mtpage-contact-label{
  font-weight: 700;
  margin-bottom: 2px;
}

.mtpage-contact-value a{
  text-decoration: none;
}

.mtpage-contact-note{
  padding: 14px 16px;
}

/* Form styling (system-ish, but matches mtpage look) */
.mtpage-contact-formcard{
  padding: 18px 18px 16px 18px;
}

.mtpage-formhead{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.mtpage-formbadge{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(120, 120, 120, 0.10);
  border: 1px solid rgba(0,0,0,0.06);
  flex: 0 0 44px;
  font-size: 18px;
}

.mtpage-formtitle{
  margin: 0;
  font-size: 20px;
}

.mtpage-formsub{
  margin: 6px 0 0 0;
  opacity: 0.85;
  font-size: 14px;
}

.mtpage-form{
  margin-top: 8px;
}

.mtpage-field{
  margin-bottom: 12px;
}

.mtpage-field label{
  display: block;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 7px;
}

.mtpage-req{
  opacity: .75;
  font-weight: 700;
}

.mtpage-field input,
.mtpage-field textarea{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.75);
  padding: 12px 12px;
  outline: none;
  transition: box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.mtpage-field textarea{
  resize: vertical;
  min-height: 140px;
}

.mtpage-field input:focus,
.mtpage-field textarea:focus{
  background: rgba(255,255,255,0.92);
  border-color: rgba(90, 96, 70, 0.45);
  box-shadow: 0 0 0 4px rgba(90, 96, 70, 0.12);
}

.mtpage-formactions{
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

.mtpage-btn-wide{
  width: fit-content;
}

.mtpage-formhint{
  font-size: 13px;
  opacity: .75;
}

/* Contact: Dropzone styling */
.mtpage-contact .mtpage-dropzone{
  border: 1px dashed rgba(0,0,0,.18);
  background: rgba(255,255,255,.62);
  border-radius: 16px;
  padding: 14px;
}

.mtpage-contact .mtpage-dropzone .dz-message{
  margin: 0;
  text-align: left;
  opacity: .9;
}

.mtpage-contact .mtpage-dz-sub{
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  opacity: .75;
}

.mtpage-contact .mtpage-dropzone .dz-preview{
  margin: 10px 10px 0 0;
}

.mtpage-contact .mtpage-dropzone .dz-remove{
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

/* =========================================================
   MT: Section hero image wash
   ========================================================= */

.mtpage-hero.mtpage-heroimg{
  position: relative;
  overflow: hidden;
}

/* image layer */
.mtpage-hero.mtpage-heroimg::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:240px;

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  opacity:0.28;
  pointer-events:none;
  z-index:0;

  /* clean fade to white */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 65%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 65%, transparent 100%);
}

/* subtle brand tint */
.mtpage-hero.mtpage-heroimg::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:240px;

  background: linear-gradient(
    to bottom,
    rgba(88,96,41,0.25),
    rgba(255,255,255,0.9)
  );

  pointer-events:none;
  z-index:0;
}

/* keep content above */
.mtpage-hero.mtpage-heroimg .mtpage-container{
  position:relative;
  z-index:1;
}

/* Section-specific images */
.mtpage-heroimg-about::before{
  background-image:url("../../siteimages/hero-about.png");
}

.mtpage-heroimg-services::before{
  background-image:url("../../siteimages/hero-services.png");
}

.mtpage-heroimg-system::before{
  background-image:url("../../siteimages/hero-system.png");
}

.mtpage-heroimg-resources::before{
  background-image:url("../../siteimages/hero-resources.png");
}

.mtpage-heroimg-contact::before{
  background-image:url("../../siteimages/hero-contact.png");
}


/* Mobile */
@media (max-width: 767.98px){
  .mtpage-hero.mtpage-heroimg::before,
  .mtpage-hero.mtpage-heroimg::after{
    height:180px;
  }
}

/* Hard reset: stop any old blob styling affecting the hero wash */
.mtpage-hero.mtpage-heroimg::before,
.mtpage-hero.mtpage-heroimg::after{
  width: auto !important;
  border-radius: 0 !important;
  filter: none !important;
  transform: none !important;
}

/* Make Contact page hero align with other pages */
.mtpage-contact .mtpage-hero{
  padding-top: 56px; /* match base hero */
}

/* CTA band buttons must never stack */
.mtpage-cta-band .mtpage-cta-row{
  flex-wrap: nowrap;
}

.mtpage-cta-band .mtpage-btn{
  white-space: nowrap;
  min-width: 0;
}

/* ============================
   Sign in / Register page tweaks
   ============================ */

.mtpage-auth .mtpage-auth-split{
  gap: 22px;            /* nicer spacing between the two cards */
}

@media (min-width: 1100px){
  .mtpage-auth .mtpage-auth-split{
    gap: 28px;          /* a touch more air on wide screens */
  }
}

.mtpage-auth .mtpage-auth-forgot{
  display:flex;
  justify-content:flex-end;
  margin: 6px 0 10px;
}

/* Make the hero right panel feel intentional */
.mtpage-auth .mtpage-auth-hero-panel{
  display: grid;
  gap: 12px;
}

.mtpage-auth .mtpage-auth-hero-title{
  display:flex;
  align-items:center;
  gap: 10px;
}

.mtpage-auth .mtpage-auth-hero-title i{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(47,49,32,.12);
  background: rgba(255,255,255,.7);
}

.mtpage-auth .mtpage-auth-hero-sub{
  opacity: .78;
  font-size: 13px;
  margin-top: 2px;
}

.mtpage-auth .mtpage-auth-hero-list{
  margin: 0;
}

/* Ensure the Sign in badge icon actually shows (lock icon is FA-safe) */
.mtpage-auth .mtpage-formbadge i{
  opacity: 1;
}

/* FA5 icon visibility fixes for Sign-in hero panel */

.mtpage-auth .mtpage-auth-hero-title i,
.mtpage-auth .mtpage-auth-hero-list i {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}