/* M3 Concepts — single global stylesheet (v16).
   Source-of-truth replacing the ~10 WP/Elementor stylesheets we used to load.
   Visual target: v7 (the verified static mirror at /versions/v7/).
   Sections:
     1. Variables
     2. Reset / base
     3. Typography
     4. Layout primitives
     5. Site header
     6. Page banner
     7. Page body containers
     8. Site footer
     9. Components (button, breadcrumbs, social icons)
    10. Pages overrides (kept thin)
*/

/* 1. Variables ------------------------------------------------------------ */
:root {
  /* v7 baseline values — no Pastel modifications layered yet. */
  --m3-text:          #88919b;
  --m3-heading:       #0a0a0a;
  --m3-nav:           #1f1f25;
  /* Pastel #14 (v37): use logo blue for text accents.
     Gold preserved for tile titles, buttons, and decorative borders;
     `--m3-accent-text` is the new text-only blue accent. */
  --m3-accent:        #af8e62;     /* v7 gold (kept for buttons / tile titles) */
  --m3-accent-hover:  #b19777;     /* v7 gold-hover for buttons */
  --m3-accent-2:      #9a7c52;
  --m3-blue:          #203868;     /* M3 logo navy blue (sampled from logo PNG) */
  --m3-blue-hover:    #2c4682;
  --m3-accent-text:   var(--m3-blue);  /* Pastel #14: text-accent uses logo blue */
  --m3-link:          #1f1f25;
  --m3-bg:            #ffffff;
  --m3-bg-banner:     #30373e;
  --m3-bg-footer:     #1b1b18;
  --m3-on-footer:     #88919b;
  --m3-rule:          #2a2c2e;

  --m3-display:       "Plus Jakarta Sans", system-ui, sans-serif;
  --m3-body:          "Overpass", system-ui, sans-serif;

  --m3-logo-h:        48px;        /* Pastel #6: logo 2x; trimmed in v42 from 54 */
  --m3-site-header-h: 56px;        /* v48: tighten — 44px logo + 6px top + 6px bottom */
  --m3-banner-h:      96px;        /* v60: 1-inch strip per Michael's 2026-05-15 directive (v42: 280, v48: 200, v60: 96) */
  --m3-section-pad-y: 56px;        /* Pastel #7: tighter vertical fit (v42: 80→56) */
  --m3-container:     1410px;
  --m3-gutter:        30px;
}

/* 1.5. Local fonts — bundled in /assets/fonts/, no external requests.
   Plus Jakarta Sans + Overpass are variable fonts. The woff2 we ship has
   the wght axis ONLY (no italic axis). v40 had a 2nd @font-face that
   claimed font-style: italic but pointed at the same wght-only file, so
   once the webfont loaded, italic text reverted to upright glyphs.
   Removed in v41 — browser now synthesizes italic by skewing the
   upright glyphs (enabled by default; `font-synthesis: style` ensures
   it stays on across browsers). */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/plus-jakarta-sans-variable.woff2') format('woff2-variations'),
       url('../fonts/plus-jakarta-sans-variable.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
:root { font-synthesis: style weight; }
@font-face {
  font-family: 'Overpass';
  src: url('../fonts/overpass-variable.woff2') format('woff2-variations'),
       url('../fonts/overpass-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'rt-icons';
  src: url('../fonts/rt-icons.woff2') format('woff2'),
       url('../fonts/rt-icons.woff') format('woff'),
       url('../fonts/rt-icons.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
[class^="rt-"]:before, [class*=" rt-"]:before {
  font-family: 'rt-icons';
  font-style: normal;
  font-weight: normal;
  speak: never;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  text-align: center;
  line-height: 1em;
}
.rt-arrow-up-right:before  { content: '\ea65'; }
.rt-arrow-right:before     { content: '\e80e'; }
.rt-phone-volume:before    { content: '\e83b'; }
.rt-map-location-dot:before{ content: '\ea62'; }

/* 2. Reset / base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--m3-body);
  font-size: 17px;
  line-height: 1.8;     /* matches v7 (30.6 / 17 = 1.8) */
  color: var(--m3-text);
  background: var(--m3-bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--m3-link); text-decoration: none; }
a:hover { color: var(--m3-accent-text); }
ul { list-style: none; padding: 0; margin: 0; }

/* 3. Typography ----------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--m3-display);
  color: var(--m3-heading);
  font-weight: 700;
  margin: 0 0 .6em;
  line-height: 1.15;
}
h1 { font-size: 60px; font-weight: 600; }
h2 { font-size: 48px; }
h3 { font-size: 32px; }
h4 { font-size: 24px; }
h5 { font-size: 20px; }
h6 {
  font-size: 24px;
  font-weight: 600;
  color: var(--m3-accent-text);   /* matches v7's gold sidebar labels */
}
p { margin: 0 0 1em; line-height: 28px; font-size: 16px; }

/* 4. Layout --------------------------------------------------------------- */
.m3-container {
  width: 100%;
  max-width: var(--m3-container);
  margin: 0 auto;
  padding: 0 var(--m3-gutter);
}
.m3-row { display: flex; flex-wrap: wrap; gap: var(--m3-gutter); }
.m3-col { flex: 1; min-width: 0; }

/* v85: "newer version available" notice bar above the site header. Slim
   strip in brand-blue so it's noticeable but doesn't push the hero too far. */
.m3-version-notice {
  background: var(--m3-blue);
  color: #ffffff;
  font-family: var(--m3-body);
  font-size: 13px;
  line-height: 1;
  padding: 10px 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  letter-spacing: .02em;
}
.m3-version-notice a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.m3-version-notice a:hover { color: #5a7fcb; }
@media (max-width: 900px) {
  .m3-version-notice { padding: 10px 20px; gap: 10px; font-size: 12px; }
}
@media (max-width: 600px) {
  .m3-version-notice { flex-direction: column; gap: 4px; padding: 8px 16px; }
}

/* 5. Site header (top nav) ------------------------------------------------ */
.m3-site-header {
  height: var(--m3-site-header-h);
  background: transparent;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 50;
}
/* v48: home now inherits the same --m3-site-header-h (56px). Previously
   home was bumped to 104px to accommodate an oversized logo, but the logo
   PNG's intrinsic height is 44px so the extra space was empty padding. */
/* v7/live header inner: full viewport width with 80px side padding, and a
   3-cell layout — logo (auto) | nav (flex-grow) | right spacer (~141px) —
   so the nav cluster lands in roughly the middle of the header instead of
   flush against the right gutter. */
.m3-site-header__inner {
  width: 100%;
  height: 100%;
  padding: 0 80px;
  display: flex;
  align-items: center;
  gap: 0;
}
.m3-site-header__inner > .m3-nav {
  flex: 1 1 auto;
}
.m3-site-header__right {
  flex: 0 0 141px;
  height: 100%;
}
.m3-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
/* v37 (Pastel #6): logo 2x bigger. Inner pages 78px (was 39px), home 88px (was 44px). */
.m3-logo img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 78px;
  display: block;
}
body.m3-page--home .m3-logo img { max-height: 88px; }
/* The logo cell can shrink if the nav cell needs more room (flex-shrink:1). */
.m3-logo {
  flex: 0 1 auto;
  min-width: 0;
}
.m3-logo__sub {
  font-family: var(--m3-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--m3-text);
  letter-spacing: .01em;
  white-space: nowrap;
}
/* Nav cell: menu items right-aligned inside the cell (matches live where
   the menu sits at the far right of its 799px-wide column). */
.m3-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}
.m3-nav__list { display: flex; gap: 0; align-items: center; height: 100%; }
.m3-nav__list > li { position: relative; }
.m3-nav__list a {
  font-family: var(--m3-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--m3-nav);
  padding: 0 16px 0 0;            /* exact v7/live: right padding only */
  display: inline-block;
  line-height: 24px;
  transition: color .15s ease;
}
/* Live wraps each li in 10px horizontal padding (creates inter-item space). */
.m3-nav__list > li {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 10px;
}
.m3-nav__list a:hover,
.m3-nav__list .is-current > a { color: var(--m3-blue-hover); }

/* Dropdown — matches live source exactly:
   - Aligned to the bottom of the 72px header (top: 100%).
   - bg #141517 dark, 220px wide, bottom-corners 10px curved.
   - Initial state: opacity 0, scaleY(0) — collapsed up from the top.
   - Hover: opacity 1, scaleY(1) — expand-fade-in over 0.3s.
   - Subtle shadow below to lift it off the page. */
.m3-nav__sub {
  position: absolute;
  top: 100%;
  left: 0;
  width: 220px;
  background: #141517;
  border-radius: 0 0 10px 10px;
  /* Clip child hover backgrounds to the rounded bottom corners so the last
     item's hover-fill follows the curve instead of overflowing into 90°
     corners. (box-shadow renders outside the box, so it's not affected.) */
  overflow: hidden;
  box-shadow: 0 36px 35px rgba(0, 0, 0, 0.08);
  padding: 0;
  margin: 0;
  list-style: none;
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  transform: scaleY(0);
  transform-origin: top center;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
  pointer-events: none;
}
/* v49: gate the desktop hover-dropdown so touch devices (which fire a phantom
   :hover on first tap) don't pop the submenu unexpectedly. Mobile uses the
   tap-to-expand accordion handled in JS. */
@media (min-width: 901px) {
  .m3-nav__list > li:hover > .m3-nav__sub,
  .m3-nav__list > li:focus-within > .m3-nav__sub {
    opacity: 1;
    visibility: visible;
    transform: scaleY(1);
    pointer-events: auto;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0s;
  }
}
.m3-nav__sub li {
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.m3-nav__sub li:last-child { border-bottom: 0; }
.m3-nav__sub a {
  padding: 12px 35px 12px 25px;
  display: block;
  color: #ffffff;
  font-family: var(--m3-body);
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  background-color: transparent;
  transition: background-color 0.3s ease;
}
/* Live hover: text stays WHITE, background turns gold (#b19777). */
.m3-nav__sub a:hover,
.m3-nav__sub .is-current > a {
  color: #ffffff;
  background-color: var(--m3-blue-hover);
}
/* The parent <li> needs position:relative for the absolute sub-menu. */
.m3-nav__list > .m3-nav__has-sub { position: relative; }

/* ─── v49 mobile nav: hamburger button + off-canvas drawer ───────────────── */

/* On desktop these elements are hidden; mobile media query below activates them. */
.m3-nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.m3-nav__sub-toggle { display: none; background: none; border: 0; padding: 0; cursor: pointer; }
.m3-nav-backdrop { display: none; }

@media (max-width: 900px) {
  /* Logo: hold its natural width instead of flex-shrinking to 0. */
  .m3-logo { flex: 0 0 auto; min-width: auto; }
  .m3-site-header__inner { padding: 0 20px; }
  .m3-site-header__right { display: none; }

  /* Hamburger button: 3 lines that morph to X when open. */
  .m3-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    position: relative;
    z-index: 110;
  }
  .m3-nav-toggle__bars {
    display: inline-block;
    width: 24px;
    height: 18px;
    position: relative;
  }
  .m3-nav-toggle__bars > span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #1f1f25;
    border-radius: 1px;
    transition: transform .25s ease, opacity .15s ease, top .25s ease;
  }
  .m3-nav-toggle__bars > span:nth-child(1) { top: 0; }
  .m3-nav-toggle__bars > span:nth-child(2) { top: 8px; }
  .m3-nav-toggle__bars > span:nth-child(3) { top: 16px; }
  .m3-nav-toggle.is-open .m3-nav-toggle__bars > span { background: #fff; }
  .m3-nav-toggle.is-open .m3-nav-toggle__bars > span:nth-child(1) { top: 8px; transform: rotate(45deg); }
  .m3-nav-toggle.is-open .m3-nav-toggle__bars > span:nth-child(2) { opacity: 0; }
  .m3-nav-toggle.is-open .m3-nav-toggle__bars > span:nth-child(3) { top: 8px; transform: rotate(-45deg); }

  /* Nav becomes the off-canvas drawer. */
  .m3-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: min(85vw, 360px);
    height: 100vh;
    height: 100dvh;
    background: #141517;
    color: #fff;
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 105;
    padding: 72px 24px 24px;
    overflow-y: auto;
    justify-content: flex-start;
  }
  .m3-nav.is-open { transform: translateX(0); }

  .m3-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    height: auto;
    width: 100%;
  }
  .m3-nav__list > li {
    padding: 0;
    height: auto;
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .m3-nav__list > li:last-child { border-bottom: 0; }
  .m3-nav__list a {
    color: #fff;
    padding: 16px 0;
    display: block;
    font-size: 17px;
    line-height: 1.3;
  }
  /* v56: align mobile drawer accents with desktop blue (was gold). The
     drawer background is near-black (#141517), so we use a lightened brand
     blue (#5a7fcb, AA-pass at 4.64:1) — the desktop dark-navy is unreadable
     on this surface. Same blue family, just contrast-corrected. */
  .m3-nav__list a:hover,
  .m3-nav__list .is-current > a { color: #5a7fcb; }

  /* has-sub: anchor stays as the navigation link, the toggle button (caret) is what expands the accordion. */
  .m3-nav__has-sub { position: relative; }
  .m3-nav__has-sub > a { padding-right: 56px; }
  .m3-nav__sub-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 8px;
    right: 0;
    width: 44px;
    height: 44px;
  }
  .m3-nav__sub-toggle > span {
    width: 10px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .25s ease;
  }
  .m3-nav__has-sub.is-open > .m3-nav__sub-toggle > span {
    transform: translateY(2px) rotate(-135deg);
  }

  /* Submenu becomes accordion: collapsed by default, expands when .is-open on parent <li>. */
  .m3-nav__sub {
    position: static;
    width: auto;
    max-height: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    transition: max-height .3s ease;
    padding: 0;
  }
  .m3-nav__has-sub.is-open > .m3-nav__sub { max-height: 400px; }
  .m3-nav__sub li { border-bottom: 0; }
  .m3-nav__sub a {
    padding: 10px 0 10px 16px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.82);
  }
  .m3-nav__sub a:hover,
  .m3-nav__sub .is-current > a {
    background-color: transparent;
    color: #5a7fcb;
  }

  /* Backdrop overlay behind drawer. */
  .m3-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility 0s linear .3s;
  }
  .m3-nav-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s ease, visibility 0s linear 0s;
  }

  body.m3-nav-locked { overflow: hidden; }
}

/* v50: on phones (≤ 600px), crop the wide "M3 Design + Development" wordmark to
   just the "M3" portion. Logo PNG content: M3 ends at x≈80, 21px gap, Design
   starts at x≈101. Width 90px shows M3 plus a small breathing space, then
   overflow:hidden clips the rest. Tablet+ keep the full wordmark. */
@media (max-width: 600px) {
  .m3-logo {
    overflow: hidden;
    width: 90px;
    flex: 0 0 90px;
  }
  /* Defeat the .m3-logo img max-width:100% which would otherwise shrink the
     whole wordmark down to 90px wide (tiny "M3"). We want the img at its
     natural 356×44 so the anchor's overflow:hidden clips it to just M3. */
  .m3-logo img,
  body.m3-page--home .m3-logo img { max-width: none; }
}

/* 6. Page banner — v7 style: 430px tall, full-cover image, dark slate fallback. */
.m3-banner {
  width: 100%;
  height: var(--m3-banner-h);
  background: var(--m3-bg-banner) center/cover no-repeat;
  position: relative;
  overflow: hidden;
}
/* v108: banner cover image replaces the old inline background-image. The
   <picture> carries the class; its <img> fills the strip via object-fit and
   sits behind the title/overlay (z-index:0). Lets the browser pick the small
   -480/-800/-1280 webp/jpg variant instead of the full-size master. */
.m3-banner__bg,
.m3-cat-banner__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.m3-banner__bg,
.m3-banner__bg img,
.m3-cat-banner__bg,
.m3-cat-banner__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.m3-banner__inner {
  position: relative;
  z-index: 2;
  max-width: var(--m3-container);
  margin: 0 auto;
  padding: 0 var(--m3-gutter);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.m3-banner__title {
  font-family: var(--m3-display);
  font-size: 60px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0);   /* v7 renders breadcrumb title transparent */
  margin: 0;
}

/* 7. Page body ------------------------------------------------------------ */
/* v7 page-body padding. */
.m3-page-body { padding: var(--m3-section-pad-y) 0 var(--m3-section-pad-y); }
/* v103 — /our-team/: tighter gap between the banner and "Meet Our Team" */
.m3-page--our-team .m3-page-body { padding-top: 28px; }
/* v116 — REVS-1 [06:18]: compress project pages vertically (carousel to top). */
.m3-page--project-detail .m3-page-body { padding-top: 26px; padding-bottom: 30px; }
.m3-page-body h2 { margin-bottom: 24px; }  /* v42: 50→24 */
.m3-page-body p { font-size: 16px; line-height: 28px; }
/* Pastel #27 (v37): pull map up into 2-col layout; square footprint.
   v73: widened map column 460→580 + tightened gap 60→40 per Owen — there's
   horizontal room and Michael at 44:25 wanted the map "wider". H2 now lives
   inside the left cell so top-alignment is natural, no positioning needed. */
.m3-contact-grid {
  display: grid;
  grid-template-columns: 1fr 580px;
  gap: 40px;
  align-items: start;
}
.m3-contact-info__lede {
  font-family: var(--m3-body);
  font-size: 17px;
  line-height: 28px;
  color: var(--m3-text);
  margin: 0 0 30px;
  max-width: 540px;
}
.m3-contact-map {
  width: 100%;
  aspect-ratio: 4 / 3;   /* v118 — REVS-1 [05:23]: compress contact a little (was 1/1) */
  background: #f3f3f3;
}
/* v118 — REVS-1 [05:23]: trim the contact page's vertical padding. */
.m3-page--contact .m3-page-body { padding-top: 32px; padding-bottom: 36px; }
.m3-contact-map iframe {
  width: 100%; height: 100%; border: 0; display: block;
}
@media (max-width: 900px) {
  .m3-contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .m3-contact-map { aspect-ratio: 4 / 3; }
  /* Let grid items shrink rather than expand to fit unbreakable content. */
  .m3-contact-info,
  .m3-contact-map { min-width: 0; }
}
.m3-contact-info dl {
  margin: 0;
  display: grid;
  grid-template-columns: 140px 1fr;
  row-gap: 36px;
  column-gap: 24px;
  align-items: baseline;
}
.m3-contact-info dt {
  font-family: var(--m3-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--m3-accent-text);   /* v7 gold */
  margin: 0;
}
.m3-contact-info dd {
  margin: 0;
  color: var(--m3-text);
  font-family: var(--m3-body);
  font-size: 19px;            /* matches v7 contact-value */
  line-height: 28px;
}
.m3-contact-info dd a { color: inherit; }
.m3-contact-info dd a:hover { color: var(--m3-accent-text); }
/* v56: phone — stack <dt> above <dd> instead of the 140px-label 2-col layout.
   Placed AFTER the desktop rule so the source-order cascade wins. */
@media (max-width: 600px) {
  .m3-contact-info dl {
    grid-template-columns: 1fr;
    row-gap: 22px;
    column-gap: 0;
  }
  .m3-contact-info dt { margin-bottom: 4px; }
  .m3-contact-info dd { overflow-wrap: anywhere; }
}

/* 8. Site footer ---------------------------------------------------------- */
.m3-site-footer {
  background: var(--m3-bg-footer);
  color: var(--m3-on-footer);
  padding: 30px 0 20px;         /* v105: tighter footer top per Michael (was 60/0/30) */
  margin-top: 0;
  font-size: 14px;              /* Pastel #7: smaller footer text */
}
/* Footer inner uses 80px left/right padding (matching live), full width. */
/* Footer inner: full viewport width with 80px side padding (matches live). */
.m3-site-footer__inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 80px;
  position: relative;
  overflow: hidden;            /* trim the legal::before overflow at viewport */
}
.m3-site-footer__cols {
  display: grid;
  /* v67: 4-col again after Owen restored "Useful Links" alongside Company. */
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 40px;
  margin-bottom: 40px;          /* Pastel #7: tighter */
}
/* Pastel #7: smaller footer headings (was 24px → 16px). */
.m3-site-footer h6 {
  font-family: var(--m3-display);
  color: #ffffff;          /* v57: white headers (was blue accent) */
  font-size: 18px;         /* v57: +2px (was 16px) */
  font-weight: 700;
  margin: 0 0 12px;
  letter-spacing: .04em;
}
/* v104 — footer logo: the M3 mark is recolored white (m3concepts-logo-footer.png)
   so it reads on the dark footer. Replaces v58/v59's blue glow/outline, which
   Michael disliked. "Design + Development" keeps its original grey. */
.m3-site-footer__brand { position: relative; }
.m3-site-footer__logo {
  height: 39px;          /* v7 measured */
  width: auto;
  margin-bottom: 18px;
  display: block;
  position: relative;
  z-index: 1;            /* v58: paint on top of the ::before glow */
}
.m3-site-footer__brand p { color: var(--m3-on-footer); font-size: 13px; line-height: 22px; max-width: 360px; margin: 0 0 14px; }
/* v69: socials in brand column. List of icon links — LinkedIn + Instagram. */
.m3-site-footer__socials {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: inline-flex;
  gap: 12px;
}
.m3-site-footer__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;          /* v71: enlarged from 36 */
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  transition: background-color .15s ease, color .15s ease;
}
.m3-site-footer__socials a:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}
.m3-site-footer__socials svg { width: 26px; height: 26px; }   /* v71: from 18 */
.m3-site-footer__list { list-style: none; padding: 0; margin: 0; }
.m3-site-footer__list li { list-style: none; }
.m3-site-footer__list a { color: var(--m3-on-footer); font-size: 13px; line-height: 24px; font-family: var(--m3-body); }
.m3-site-footer__list a:hover { color: #ffffff; }
.m3-site-footer__list a:hover { color: #fff; }
.m3-site-footer__contact .m3-row { gap: 12px; align-items: flex-start; }
.m3-site-footer__contact-row { margin-bottom: 18px; }
.m3-site-footer__contact-row:last-child { margin-bottom: 0; }
/* v57: footer contact icons are white (was brand blue/gold). */
.m3-site-footer__contact .icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 38px;
  color: #ffffff;
  font-size: 36px;
  line-height: 1;
  margin-top: 4px;
}
/* v97: envelope SVG was 27×27 while the phone/map rt-font icons render
   at font-size:36px (~36×36). The size mismatch made the envelope row
   look indented vs the other two. Match the SVG to the font icon size. */
.m3-site-footer__contact .icon svg {
  width: 36px;
  height: 36px;
  fill: #ffffff;
}
.m3-site-footer__contact .icon .rt {
  font-size: 36px;
  color: #ffffff;
}
/* live: phone/email/address text is Plus Jakarta Sans 16px white (the value),
   "Direct Mobile" / "Direct Email" sub-text below is Overpass 16px #a1a1a1. */
.m3-site-footer__contact .label {
  font-family: var(--m3-display);
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  display: block;
  line-height: 24px;
  text-decoration: none;
}
.m3-site-footer__contact a.label:hover { color: var(--m3-accent-text); }
.m3-site-footer__contact .heading {
  font-family: var(--m3-body);
  font-size: 14px;
  color: #a1a1a1;
  display: block;
  margin-top: 2px;
}
.m3-site-footer__signup {
  display: flex;
  border: 1px solid var(--m3-rule);
  border-radius: 4px;
  overflow: hidden;
  max-width: 320px;
}
.m3-site-footer__signup input {
  flex: 1;
  background: transparent;
  border: 0;
  color: #fff;
  padding: 10px 14px;
  font-family: var(--m3-body);
}
/* live: signup button is transparent, just an icon. No gold bg. */
.m3-site-footer__signup button {
  background: transparent;
  color: #ffffff;
  border: 0;
  width: 44px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.m3-site-footer__signup button .rt {
  font-size: 16px;
  line-height: 1;
  color: #ffffff;
}
.m3-site-footer__signup button:hover .rt { color: var(--m3-accent-text); }
/* Live: divider rule above the copyright row spans the FULL VIEWPORT width.
   Achieved by lifting the border to a sibling of `.m3-site-footer__inner`
   that is full-width by default. v16 uses ::before on the legal row. */
.m3-site-footer__legal {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 18px;            /* Pastel #7: tighter */
  margin-top: 18px;
  font-size: 13px;
  color: #d9d9d9;
  font-family: var(--m3-body);
  flex-wrap: wrap;
  gap: 14px;
}
.m3-site-footer__legal-links { display: inline-flex; gap: 18px; align-items: center; }
.m3-ada-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 4px;
  color: #d9d9d9 !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.m3-ada-btn:hover { background: rgba(255,255,255,.08); }
/* Full-viewport divider line — pushes 80px past the inner container's gutters
   on both sides so it spans the whole viewport. */
.m3-site-footer__legal::before {
  content: '';
  position: absolute;
  top: 0;
  left: -80px;
  right: -80px;
  height: 1px;
  background: rgb(76, 83, 95);
}
.m3-site-footer__legal a {
  color: #a1a1a1;          /* live link grey */
  font-size: 16px;
  text-decoration: none;
}
.m3-site-footer__legal a:hover { color: #fff; }

/* v54: responsive footer.
   Desktop ≥901px keeps the 4-column 80px-padded layout.
   Tablet 601–900px: 2×2 grid; brand+description row spans full width on top.
   Phone ≤600px: single column stack; legal row stacks too. The full-viewport
   divider rule (`legal::before { left: -80px; right: -80px }`) is retuned
   to match the new padding so it still bleeds edge-to-edge. */
@media (max-width: 900px) {
  .m3-site-footer__inner { padding: 0 40px; }
  .m3-site-footer__cols  { grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 32px; }
  /* Brand block (logo + intro + signup) sits on its own full-width row at the top. */
  .m3-site-footer__cols > .m3-site-footer__brand { grid-column: 1 / -1; }
  .m3-site-footer__legal::before { left: -40px; right: -40px; }
}
@media (max-width: 600px) {
  .m3-site-footer__inner { padding: 0 20px; }
  .m3-site-footer__cols  { grid-template-columns: 1fr; gap: 28px; }
  .m3-site-footer__legal { flex-direction: column; align-items: flex-start; gap: 14px; }
  /* Allow legal-link items to wrap to a new line rather than shrink and break their inner text. */
  .m3-site-footer__legal-links { flex-wrap: wrap; gap: 14px 18px; }
  .m3-site-footer__legal::before { left: -20px; right: -20px; }
}

/* 9. Components ----------------------------------------------------------- */
.m3-btn {
  display: inline-block;
  padding: 14px 28px;
  background: var(--m3-accent);
  color: #fff;
  font-family: var(--m3-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  border-radius: 4px;
  text-decoration: none;
  transition: background .2s ease;
}
.m3-btn:hover { background: var(--m3-accent-2); color: #fff; }

/* (ADA bar removed — not present in v7 source. Will be re-introduced when
   Pastel #10 is layered in a later phase.) */

/* Section heads (centered intro on team / portfolio / etc.). */
.m3-section-head { text-align: center; margin: 0 auto 80px; max-width: 720px; }
.m3-section-head h2 { margin-bottom: 16px; }
.m3-section-lede { color: var(--m3-text); font-size: 16px; line-height: 28px; margin: 0; }

/* Team grid — Pastel #26: 1/4 the size, more compact page.
   v7 was 307×350 / 280px min; v37 is 200px min, 18px gap, narrower wrap. */
.m3-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
  max-width: 720px;
  margin: 0 auto;
}
.m3-team-card { background: #fff; }
.m3-team-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform .35s ease, box-shadow .35s ease;
}
.m3-team-card__link:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.25);
}
.m3-team-card__photo { aspect-ratio: 307 / 350; overflow: hidden; }
.m3-team-card__photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1);
  transition: transform .8s cubic-bezier(.2,.6,.2,1);
}
.m3-team-card__link:hover .m3-team-card__photo img { transform: scale(1.06); }
/* v124 — hover accent is GOLD, not logo-blue: the caption sits on the dark
   --m3-bg-banner (#30373e), where the logo blue (#2c4682) is illegible.
   Gold (#af8e62) is our standard accent-on-dark color. */
.m3-team-card__link:hover .m3-team-card__name { color: var(--m3-accent); }
.m3-team-card__name { transition: color .25s ease; }
.m3-team-card__caption {
  background: var(--m3-bg-banner);
  color: #fff;
  padding: 18px 24px;
  text-align: left;
}
.m3-team-card__role {
  font-family: var(--m3-body);
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  display: block;
  margin-bottom: 4px;
  /* v124 — reserve 2 lines so a 1-line role (Project Lead) and a 2-line role
     (Senior Designer & Project Manager) leave the caption — and thus the whole
     card — the same height, keeping names aligned across the row. */
  line-height: 1.35;
  min-height: 2.7em;
}
.m3-team-card__name {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

/* v7 our-team second section — pictogram row. */
.m3-team-icons-wrap { padding-top: 130px; }
.m3-team-icons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  align-items: center;
  justify-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
.m3-team-icons figure { margin: 0; text-align: center; }
.m3-team-icons img {
  max-width: 80px;
  height: auto;
  filter: grayscale(0.4);
  opacity: 0.7;
}
.m3-team-icons figcaption {
  font-family: var(--m3-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--m3-heading);
  margin-top: 14px;
}

/* Portfolio tile grid — v7 style: image + small gold title below, no dark caption bar.
   v75: 3 → 4 cols + gap 24 → 40 per Michael 2026-05-15 at 18:33-18:50
   ("maybe we can go to four with some white space and compress it vertically"). */
.m3-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.m3-portfolio-tile {
  display: block;
  text-decoration: none;
  color: inherit;
}
.m3-portfolio-tile__photo {
  aspect-ratio: 431 / 445;     /* matches v7 tile photo */
  overflow: hidden;
}
.m3-portfolio-tile__photo img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1);
  transition: transform .8s cubic-bezier(.2,.6,.2,1);
}
.m3-portfolio-tile:hover .m3-portfolio-tile__photo img { transform: scale(1.08); }
.m3-portfolio-tile__caption {
  padding: 18px 0 0;
  text-align: left;
}
.m3-portfolio-tile__title {
  color: var(--m3-accent-text);     /* v7: rgb(175,142,98) = #af8e62 */
  font-family: var(--m3-display);
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}
@media (max-width: 900px) {
  .m3-portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .m3-portfolio-grid { grid-template-columns: 1fr; }
}

/* Eyebrow label (small caps above an h2). */
.m3-eyebrow {
  font-family: var(--m3-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--m3-accent-text);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

/* === Services page (v20) — parity with live === */

/* "Our Services" 2-col header: H2 left | intro paragraph right. */
.m3-svc-intro {
  display: grid;
  grid-template-columns: minmax(280px, 540px) 1fr;
  gap: 90px;
  align-items: center;
  margin: 90px 0 70px;
}
.m3-svc-intro__h2 {
  font-family: var(--m3-display);
  font-size: 48px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--m3-heading);
  margin: 0;
}
.m3-svc-intro__lede {
  font-family: var(--m3-body);
  font-size: 17px;
  line-height: 30.6px;
  color: var(--m3-text);
  margin: 0;
  max-width: 540px;
}

/* Big left image + 3 stacked service rows on right. */
.m3-svc-feature {
  display: grid;
  grid-template-columns: 437fr 913fr;
  gap: 0;
  align-items: stretch;
  margin: 0 0 110px;
}
.m3-svc-feature__photo {
  margin: 0;
  overflow: hidden;
}
.m3-svc-feature__photo img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  min-height: 480px;
}
.m3-svc-feature__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.m3-svc-row {
  display: grid;
  grid-template-columns: 86px 1fr auto;
  align-items: center;
  gap: 0 40px;
  padding: 40px 0 40px 60px;
  border-bottom: 1px solid #e9e9e9;
}
.m3-svc-row:last-child { border-bottom: 0; }
.m3-svc-row__num {
  font-family: var(--m3-display);
  font-size: 60px;
  font-weight: 700;
  color: var(--m3-accent-text);
  line-height: 1;
}
.m3-svc-row__copy { display: grid; gap: 10px; }
.m3-svc-row__title {
  font-family: var(--m3-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--m3-heading);
  margin: 0;
}
.m3-svc-row__copy p {
  font-family: var(--m3-body);
  font-size: 15px;
  line-height: 24px;
  color: var(--m3-text);
  margin: 0;
}
.m3-svc-row__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--m3-accent-text);
  font-family: var(--m3-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: color .25s ease;
}
.m3-svc-row__btn svg {
  width: 24px; height: 24px; flex: 0 0 auto;
}
.m3-svc-row__btn:hover { color: var(--m3-blue-hover); }

/* Expanded service sections — H3 small gold + sub-title + 2 paragraphs + view link. */
.m3-svc-block {
  margin: 0 0 70px;
}
.m3-svc-block__h3 {
  font-family: var(--m3-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--m3-accent-text);
  margin: 0;
}
.m3-svc-block__sub {
  font-family: var(--m3-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--m3-heading);
  margin: 4px 0 28px;
}
.m3-svc-block p {
  font-family: var(--m3-body);
  font-size: 17px;
  line-height: 30.6px;
  color: var(--m3-text);
  margin: 0 0 22px;
}
.m3-svc-block__more {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--m3-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--m3-heading);
  text-decoration: none;
  border-bottom: 1px solid var(--m3-heading);
  padding-bottom: 2px;
}
.m3-svc-block__more:hover { color: var(--m3-accent-text); border-color: var(--m3-accent-text); }

/* Dark project-icon row, full-bleed. */
.m3-svc-icons {
  background: #1f262e;
  padding: 72px 0;
  margin: 80px 0 0;
}
.m3-svc-icons__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  justify-items: center;
  gap: 40px;
}
.m3-svc-icons figure { margin: 0; }
.m3-svc-icons img {
  max-height: 90px;
  width: auto;
  opacity: 0.85;
  filter: brightness(0) invert(1) opacity(0.55);
}

/* "We are excited to learn..." CTA — large dark text on white, centered. */
.m3-svc-cta {
  padding: 120px 0 130px;
  text-align: center;
}
.m3-svc-cta__h2 {
  font-family: var(--m3-body);
  font-size: 60px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--m3-heading);
  margin: 0 0 40px;
}
.m3-svc-cta__btn {
  display: inline-block;
  padding: 14px 36px;
  background: var(--m3-accent);
  color: #fff;
  font-family: var(--m3-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
  border-radius: 4px;
  transition: background .2s ease;
}
.m3-svc-cta__btn:hover { background: var(--m3-accent-hover); }

@media (max-width: 1100px) {
  .m3-svc-intro { grid-template-columns: 1fr; gap: 30px; }
  .m3-svc-feature { grid-template-columns: 1fr; }
  .m3-svc-feature__photo img { min-height: 320px; }
  .m3-svc-row { padding: 30px 0; grid-template-columns: 60px 1fr; gap: 16px 24px; }
  .m3-svc-row__btn { grid-column: 1 / -1; width: 100%; height: auto; padding: 14px; border-radius: 999px; }
}
@media (max-width: 600px) {
  .m3-svc-cta__h2 { font-size: 36px; }
  .m3-svc-icons__grid { grid-template-columns: 1fr 1fr; }
}

/* Services landing — three numbered cards. */
.m3-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.m3-service-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  padding: 40px 36px;
  border: 1px solid #ececec;
  transition: border-color .2s ease, transform .2s ease;
}
.m3-service-card:hover { border-color: var(--m3-accent-text); transform: translateY(-4px); }
.m3-service-card__num {
  font-family: var(--m3-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--m3-accent-text);
  display: block;
  margin-bottom: 18px;
}
.m3-service-card__title {
  font-size: 28px;
  margin-bottom: 14px;
}
.m3-service-card p {
  font-size: 15px;
  line-height: 26px;
  color: var(--m3-text);
  margin: 0 0 24px;
}
.m3-service-card__more {
  font-family: var(--m3-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--m3-accent-text);
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .m3-services-grid { grid-template-columns: 1fr; }
}

/* Long-form prose container. */
.m3-prose { max-width: 880px; margin: 0 auto; }
.m3-prose p { font-size: 17px; line-height: 30px; margin-bottom: 22px; }

/* Service-detail pages (architectural-design / engineering / development /
   services landing). Pastel #22/#24/#25 — no banner, title top-left, prose
   directly below, compressed vertically. */
.m3-page-body--service { padding-top: 50px; }
.m3-service-head {
  text-align: left;
  margin: 0 0 36px;
  max-width: 100%;
}
.m3-service-title {
  font-family: var(--m3-display);
  font-size: 56px;
  font-weight: 600;
  color: var(--m3-heading);
  margin: 6px 0 0;
}
.m3-service-title em {
  font-style: normal;
  font-weight: 700;
  color: var(--m3-accent-text);
}
.m3-service-body { display: block; }
.m3-service-body .m3-prose { margin: 0; max-width: 880px; }

/* === Team detail page (/teams/<slug>/) === */
.m3-team-hero {
  background: #141517;
  color: #fff;
  padding: 64px 0 72px;   /* v117 — compress (REVS-1 [03:45]) */
}
.m3-team-hero__inner {
  display: grid;
  grid-template-columns: 300fr 780fr;  /* v117 — narrower photo column */
  gap: 56px;
  align-items: start;
}
/* v117 — REVS-1 [03:45]: team member photo "a third of the size" (was 430px). */
.m3-team-hero__photo { margin: 0; overflow: hidden; aspect-ratio: 645 / 700; max-width: 230px; }
.m3-team-hero__photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.m3-team-hero__role {
  font-family: var(--m3-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #ffffff;          /* v62 fix: dark navy on #141517 was 1.59:1, unreadable */
  text-transform: uppercase;
  margin: 0 0 12px;
}
.m3-team-hero__name {
  font-family: var(--m3-display);
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 22px;
  line-height: 1.15;
}
.m3-team-hero__bio {
  font-family: var(--m3-body);
  font-size: 17px;
  line-height: 30.6px;
  color: #c4c8cd;
  margin: 0 0 32px;
  max-width: 760px;
}
.m3-team-hero__info {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 40px;
}
.m3-team-hero__info-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.m3-team-hero__info-icon {
  flex: 0 0 42px;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(175, 142, 98, 0.12);
  color: #ffffff;          /* v62 fix: was dark navy on #141517, unreadable. SVGs inherit via currentColor. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.m3-team-hero__info-icon svg { width: 22px; height: 22px; }
.m3-team-hero__info-icon svg [stroke] { stroke: currentColor; }
.m3-team-hero__info-icon svg [fill]:not([fill="none"]) { fill: currentColor; }
.m3-team-hero__info-text { flex: 1 1 auto; min-width: 0; }
.m3-team-hero__info-row dt {
  font-family: var(--m3-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #ffffff;          /* v62 fix: was dark navy on #141517, 1.59:1 contrast */
  text-transform: uppercase;
  margin: 0 0 6px;
}
.m3-team-hero__info-row dd {
  font-family: var(--m3-body);
  font-size: 15px;
  line-height: 24px;
  color: #c4c8cd;
  margin: 0;
  word-break: break-word;
}
.m3-team-hero__follow {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 32px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.m3-team-hero__follow-label {
  font-family: var(--m3-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #ffffff;          /* v62 fix: same low-contrast as __role */
}
.m3-team-hero__socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 10px;
}
.m3-team-hero__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 4px;
  background: rgba(255,255,255,.08);
  color: #fff;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.m3-team-hero__socials a:hover {
  background: var(--m3-accent);
  color: #fff;
  transform: translateY(-2px);
}
.m3-team-hero__socials svg { width: 18px; height: 18px; }

/* v62: was "Professional Skill + Experience" 2-col grid; Owen removed the
   Skill section, so Experience now spans the full .m3-container width. */
.m3-team-skill-exp {
  background: #fff;
  padding: 90px 0;
}
.m3-team-skill__h3,
.m3-team-experience__h3 {
  font-family: var(--m3-display);
  font-size: 30px;
  font-weight: 700;
  color: #636363;
  margin: 0 0 36px;
  line-height: 1.25;
}
.m3-team-skill__list { list-style: none; margin: 0; padding: 0; }
.m3-team-skill__row { margin: 0 0 28px; }
.m3-team-skill__head {
  margin: 0 0 14px;
  font-family: var(--m3-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--m3-heading);
  letter-spacing: .02em;
}
.m3-team-skill__bar {
  position: relative;
  height: 4px;
  background: #ececec;
  border-radius: 2px;
  overflow: hidden;
}
.m3-team-skill__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--m3-accent);
  border-radius: 2px;
}
.m3-team-experience { max-width: none; margin: 0; }
.m3-team-experience p {
  font-family: var(--m3-body);
  font-size: 17px;
  line-height: 30.6px;
  color: var(--m3-text);
  margin: 0;
}

/* Bottom CTA / contact form */
.m3-team-cta {
  background: #fff;
  padding: 0 0 110px;
}
.m3-team-cta__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.m3-team-cta__photo { margin: 0; overflow: hidden; aspect-ratio: 540 / 420; }
.m3-team-cta__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m3-team-cta__form { display: flex; flex-direction: column; gap: 16px; }
.m3-team-cta__h3 {
  font-family: var(--m3-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--m3-heading);
  margin: 0 0 8px;
  line-height: 1.25;
}
.m3-team-cta__form input,
.m3-team-cta__form textarea {
  font-family: var(--m3-body);
  font-size: 15px;
  border: 0;
  border-bottom: 1px solid #d9d9d9;
  background: transparent;
  padding: 12px 0;
  color: var(--m3-heading);
  outline: none;
}
.m3-team-cta__form input:focus,
.m3-team-cta__form textarea:focus { border-bottom-color: var(--m3-accent-text); }
.m3-team-cta__form textarea { resize: vertical; min-height: 80px; }
.m3-team-cta__form button {
  align-self: flex-start;
  margin-top: 14px;
  padding: 14px 32px;
  background: var(--m3-accent);
  color: #fff;
  border: 0;
  font-family: var(--m3-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  cursor: pointer;
  border-radius: 4px;
  transition: background .2s ease;
}
.m3-team-cta__form button:hover { background: var(--m3-accent-hover); }
.m3-team-projects {
  background: #fff;
  padding: 100px 0 110px;
}
/* v101 — home page: no lede + tighter band than the team/profile pages */
/* v115 — REVS-1 [00:44]: compress the home "Our Latest Projects" band (~40%). */
.m3-page--home .m3-team-projects { padding: 26px 0 30px; }
.m3-page--home .m3-team-projects__h2 { font-size: 40px; margin: 0 0 8px; }
.m3-team-projects__h2 {
  font-family: var(--m3-display);
  font-size: 48px;
  font-weight: 700;
  color: var(--m3-heading);
  text-align: center;
  margin: 0 0 14px;
  line-height: 1.15;
}
.m3-team-projects__lede {
  text-align: center;
  margin: 0 auto 50px;
  max-width: 720px;
  font-family: var(--m3-body);
  font-size: 16px;
  line-height: 28px;
  color: var(--m3-text);
}

/* === Generic horizontal carousel === */
.m3-carousel {
  position: relative;
}
.m3-carousel__track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 4px 4px 30px;
}
.m3-carousel__track::-webkit-scrollbar { display: none; }
.m3-carousel__slide {
  flex: 0 0 calc((100% - 48px) / 3);
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
  display: block;
}
@media (max-width: 1100px) { .m3-carousel__slide { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 700px)  { .m3-carousel__slide { flex-basis: 100%; } }

.m3-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 0;
  background: var(--m3-accent);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px -10px rgba(175,142,98,.6);
  transition: background .2s ease, transform .2s ease;
}
.m3-carousel__arrow svg { width: 22px; height: 22px; }
.m3-carousel__arrow--prev { left: -28px; transform: translateY(-50%) rotate(180deg); }
.m3-carousel__arrow--next { right: -28px; }
.m3-carousel__arrow:hover { background: var(--m3-accent-hover); }
@media (max-width: 1500px) {
  .m3-carousel__arrow--prev { left: 12px; }
  .m3-carousel__arrow--next { right: 12px; }
}

.m3-carousel__bullets {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 28px 0 0;
}
.m3-carousel__bullet {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 0;
  background: #d9d9d9;
  cursor: pointer;
  padding: 0;
  transition: background .2s ease, width .2s ease;
}
.m3-carousel__bullet.is-active {
  background: var(--m3-accent);
  width: 30px;
  border-radius: 6px;
}

.m3-team-projects__subtitle {
  display: block;
  margin: 4px 0 0;
  font-family: var(--m3-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--m3-text);
  text-align: center;
  letter-spacing: .03em;
}
.m3-team-projects__tile {
  text-decoration: none;
  color: inherit;
  display: block;
}
.m3-team-projects__thumb {
  overflow: hidden;
  aspect-ratio: 430 / 320;
  background: #f3f3f3;
}
.m3-team-projects__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1);
  transition: transform .8s cubic-bezier(.2,.6,.2,1);
}
.m3-team-projects__tile:hover .m3-team-projects__thumb img { transform: scale(1.06); }
.m3-team-projects__title {
  font-family: var(--m3-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--m3-heading);
  text-align: center;
  margin: 18px 0 0;
  letter-spacing: .04em;
}
.m3-team-projects__tile:hover .m3-team-projects__title { color: var(--m3-accent-text); }
@media (max-width: 900px) {
  .m3-team-hero__inner { grid-template-columns: 1fr; }
  .m3-team-hero__info { grid-template-columns: 1fr; }
  .m3-team-projects__grid { grid-template-columns: 1fr; }
  .m3-team-skill-exp__grid { grid-template-columns: 1fr; gap: 50px; }
  .m3-team-cta__grid { grid-template-columns: 1fr; }
}

/* === Media archive pages (/media/articles/, /interviews/, /social-media/) === */
.m3-media-grid {
  margin: 80px 0 100px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.m3-media-card {
  display: flex;
  flex-direction: column;
}
.m3-media-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.m3-media-card__thumb {
  overflow: hidden;
  aspect-ratio: 640 / 320;
  background: #f3f3f3;
}
.m3-media-card__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1);
  transition: transform .8s cubic-bezier(.2,.6,.2,1);
}
.m3-media-card:hover .m3-media-card__thumb img { transform: scale(1.06); }
.m3-media-card__body { padding: 24px 0 0; }
.m3-media-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--m3-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--m3-accent-text);
  letter-spacing: .03em;
  margin: 0 0 12px;
}
.m3-media-card__sep { opacity: .55; }
.m3-media-card__title {
  font-family: var(--m3-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--m3-heading);
  margin: 0;
}

/* Social-media archive */
.m3-media-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  padding: 90px 0 130px;
}
.m3-media-social__icon {
  display: inline-flex;
  width: 110px; height: 110px;
  transition: transform .3s ease;
}
.m3-media-social__icon svg { width: 100%; height: 100%; display: block; }
.m3-media-social__icon:hover { transform: translateY(-4px) scale(1.04); }

@media (max-width: 800px) {
  .m3-media-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* === 404 page === */
.m3-404 {
  padding: 100px 0 130px;
  text-align: center;
}
.m3-404__inner { max-width: 720px; margin: 0 auto; }
.m3-404__code {
  font-family: var(--m3-display);
  font-size: 180px;
  font-weight: 800;
  line-height: 1;
  margin: 0;
  background: linear-gradient(135deg, var(--m3-accent) 0%, var(--m3-accent-hover) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -.03em;
}
.m3-404__title {
  font-family: var(--m3-display);
  font-size: 48px;
  font-weight: 700;
  color: var(--m3-heading);
  margin: 12px 0 22px;
  line-height: 1.15;
}
.m3-404__lede {
  font-family: var(--m3-body);
  font-size: 18px;
  line-height: 32px;
  color: var(--m3-text);
  margin: 0 0 40px;
}
.m3-404__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 50px;
}
.m3-404__btn {
  display: inline-block;
  padding: 14px 28px;
  font-family: var(--m3-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
  border: 1px solid var(--m3-accent);
  color: var(--m3-accent-text);
  border-radius: 4px;
  transition: background .2s ease, color .2s ease;
}
.m3-404__btn--primary {
  background: var(--m3-accent);
  color: #fff;
}
.m3-404__btn:hover {
  background: var(--m3-accent-hover);
  border-color: var(--m3-blue-hover);
  color: #fff;
}
.m3-404__shortcuts {
  list-style: none;
  margin: 0;
  padding: 28px 0 0;
  border-top: 1px solid #e9e9e9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 28px;
}
.m3-404__shortcuts a {
  font-family: var(--m3-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--m3-text);
  text-decoration: none;
  transition: color .2s ease;
}
.m3-404__shortcuts a:hover { color: var(--m3-accent-text); }
@media (max-width: 600px) {
  .m3-404__code { font-size: 120px; }
  .m3-404__title { font-size: 32px; }
}

/* === Blog post pages === */
.m3-post {
  max-width: 1100px;
  margin: 70px auto 100px;
}
.m3-post__hero {
  margin: 0 0 28px;
  overflow: hidden;
  aspect-ratio: 880 / 441;
}
.m3-post__hero img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1);
  transition: transform 1.2s cubic-bezier(.2,.6,.2,1);
}
.m3-post__hero:hover img { transform: scale(1.04); }
.m3-post__meta {
  font-family: var(--m3-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--m3-accent-text);
  letter-spacing: .03em;
  margin: 0 0 12px;
}
.m3-post__sep { opacity: .55; margin: 0 6px; }
.m3-post__h3 {
  font-family: var(--m3-display);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--m3-heading);
  margin: 0 0 28px;
}
.m3-post__body p {
  font-family: var(--m3-body);
  font-size: 17px;
  line-height: 30.6px;
  color: var(--m3-text);
  margin: 0 0 22px;
}
.m3-post__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-family: var(--m3-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--m3-accent-text);
  text-decoration: none;
  text-transform: uppercase;
  transition: color .2s ease, gap .2s ease;
}
.m3-post__back:hover { color: var(--m3-blue-hover); gap: 14px; }

/* === Project-detail page (/our-portfolio/<slug>/) === */
.m3-pd-hero {
  margin: 20px 0 20px;   /* v116 — compress top gap (was 60/30); hero is now video-only */
  overflow: hidden;
  aspect-ratio: 1350 / 530;
  background: #f3f3f3;
}
/* v116 — REVS-2 [02:14]: make the top video "a bit smaller" — cap width + center. */
.m3-pd-hero--video { max-width: 940px; margin-left: auto; margin-right: auto; }
.m3-pd-hero img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1);
  transition: transform 1.2s cubic-bezier(.2,.6,.2,1);
}
.m3-pd-hero:hover img { transform: scale(1.04); }

/* v86: video hero variant — wider 16:9 aspect for YouTube embed.
   Overrides the still-image aspect (1350/530 ≈ 2.55:1) which would
   letterbox a 16:9 video. */
.m3-pd-hero--video { aspect-ratio: 16 / 9; background: #000; }
.m3-pd-hero--video iframe { width: 100%; height: 100%; border: 0; display: block; }
.m3-pd-hero--video:hover img { transform: none; }    /* no zoom on video */
/* v114.1: crop variant for clips with letterbox bars baked into the 16:9
   file (omni/barre-code/boulan/curve ≈ 22px bars at 720p, coral-gables 36px).
   --m3-video-content-h = real content height at 720p, set inline by
   project-detail.php from the page's 'video_crop_px'. The wrapper takes the
   content's true ratio; the iframe stays 16:9 but oversized + centered so
   the baked bars fall outside the (overflow:hidden) wrapper. */
.m3-pd-hero--video-crop {
  aspect-ratio: 1280 / var(--m3-video-content-h, 720);
  position: relative;
}
.m3-pd-hero--video-crop iframe {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: calc(100% * 720 / var(--m3-video-content-h, 720));
  transform: translateY(-50%);
}
.m3-pd-head {
  margin: 0 0 14px;   /* v116 — compress (REVS-1 [06:18]) */
}
.m3-pd-subtitle {
  font-family: var(--m3-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--m3-accent-text);  /* Pastel #14: text accent → logo blue */
  letter-spacing: .02em;
  margin: 0 0 6px;
}
.m3-pd-location {
  font-family: var(--m3-display);
  font-size: 22px;
  font-weight: 600;
  color: #636363;
  margin: 0;
}
.m3-pd-body p {
  font-family: var(--m3-body);
  font-size: 17px;
  line-height: 30.6px;
  color: var(--m3-text);
  margin: 0 0 22px;
  max-width: 1100px;
}
/* v47 — stub-page notice. Calm, blue-accent banner; sits above the gallery. */
.m3-pd-notice {
  display: block;
  max-width: 1100px;
  margin: 0 0 32px;
  padding: 18px 22px;
  background: rgba(32, 56, 104, .05);
  border-left: 3px solid var(--m3-blue);
  font-family: var(--m3-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--m3-text);
}
.m3-pd-notice strong {
  font-family: var(--m3-display);
  font-weight: 700;
  color: var(--m3-blue);
  margin-right: 6px;
}
.m3-pd-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 60px;
  font-family: var(--m3-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--m3-accent-text);
  text-decoration: none;
  text-transform: uppercase;
  transition: color .2s ease, gap .2s ease;
}
.m3-pd-back:hover { color: var(--m3-blue-hover); gap: 14px; }

/* v37 — services landing compressed (Pastel #25) */
.m3-svc-compact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: start;
  padding: 32px 0 28px;   /* v118 — REVS-1 [05:05]: compress services vertically */
}
/* v118 — REVS-1 [04:39]: four images Michael added to the services folder. */
.m3-svc-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding-bottom: 44px;
}
.m3-svc-gallery__item {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1f2e 0%, #232a3f 100%);
}
.m3-svc-gallery__item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s ease;
}
.m3-svc-gallery__item:hover img { transform: scale(1.05); }
@media (max-width: 640px) { .m3-svc-gallery { grid-template-columns: 1fr 1fr; } }
.m3-svc-compact__photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; display: block; }
.m3-svc-compact__list { display: flex; flex-direction: column; gap: 0; }
.m3-svc-compact__item {
  padding: 28px 0;
  border-bottom: 2px solid var(--m3-blue);
}
.m3-svc-compact__item:first-child { padding-top: 0; }
.m3-svc-compact__item:last-child { border-bottom: 0; }
.m3-svc-compact__item h3 {
  font-family: var(--m3-display);
  font-size: 36px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: .03em;
  color: var(--m3-blue);
  margin: 0 0 12px;
}
.m3-svc-compact__item p {
  font-family: var(--m3-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--m3-text);
  margin: 0 0 12px;
}
.m3-svc-compact__item a {
  font-family: var(--m3-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--m3-blue);
  text-decoration: none;
}
.m3-svc-compact__item a:hover { color: var(--m3-blue-hover); }
@media (max-width: 800px) {
  .m3-svc-compact { grid-template-columns: 1fr; }
  .m3-svc-compact__item h3 { font-size: 28px; }
}

/* v37 — service-detail compressed layout (Pastel #19/#20/#22/#23/#24/#25) */
.m3-svc-detail { max-width: 920px; margin: 0 auto; padding: 24px 0 48px; }  /* v42: 50→24 */
.m3-svc-detail__nav {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 10px;       /* v42: 14→10 */
  margin-bottom: 24px;        /* v42: 44→24 */
}
.m3-svc-detail__nav a {
  font-family: var(--m3-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #888;
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.m3-svc-detail__nav a:hover { color: var(--m3-blue); }
.m3-svc-detail__nav a.is-current {
  color: var(--m3-blue);
  border-bottom-color: var(--m3-blue);
}
.m3-svc-detail__h2 {
  font-family: var(--m3-display);
  font-size: 44px;          /* v42: 56→44 */
  font-weight: 600;
  font-style: italic;
  letter-spacing: .04em;
  color: var(--m3-blue);
  margin: 0 0 20px;         /* v42: 36→20 */
}
.m3-svc-detail__body p {
  font-family: var(--m3-body);
  font-size: 16px;          /* v42: 17→16 */
  line-height: 26px;        /* v42: 30.6→26 */
  color: var(--m3-text);
  margin: 0 0 16px;         /* v42: 22→16 */
}
.m3-svc-detail__lede { color: var(--m3-heading); font-weight: 500; }
/* v74: optional sub-section heading inside a service-detail body. Used on
   /development/ to call out "Feasibility Studies" per Michael's directive. */
.m3-svc-detail__section { margin-top: 32px; }
.m3-svc-detail__h3 {
  font-family: var(--m3-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--m3-blue);
  margin: 0 0 12px;
  letter-spacing: 0;
}
@media (max-width: 760px) { .m3-svc-detail__h2 { font-size: 36px; } }

/* v37 — firm-profile + firm-philosophy pages (Pastel #4, #5) */
.m3-firm { max-width: 920px; margin: 0 auto; padding: 28px 0 56px; }  /* v42: 60→28, 80→56 */
.m3-firm__eyebrow {
  font-family: var(--m3-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--m3-accent-text);
  margin: 0 0 14px;
}
.m3-firm__pillars {
  font-family: var(--m3-display);
  font-size: 44px;          /* v42: 56→44 */
  font-weight: 600;
  font-style: italic;
  color: var(--m3-blue);
  margin: 0 0 28px;         /* v42: 50→28 */
  line-height: 1.05;
}
.m3-firm__pillar { margin: 0 0 22px; }   /* v42: 36→22 */
.m3-firm__pillar p {
  font-family: var(--m3-body);
  font-size: 16px;          /* v42: 17→16 */
  line-height: 26px;        /* v42: 30.6→26 */
  color: var(--m3-text);
}
.m3-firm__h3 {
  font-family: var(--m3-display);
  font-size: 22px;          /* v42: 24→22 */
  font-weight: 700;
  color: var(--m3-blue);
  margin: 0 0 10px;         /* v42: 14→10 */
}
.m3-firm__h3 em {
  font-style: italic;
  font-weight: 600;
  letter-spacing: .04em;
}
.m3-firm__result {
  margin-top: 50px;
  padding: 36px 40px;
  background: rgba(32, 56, 104, .04);
  border-left: 4px solid var(--m3-blue);
}
.m3-firm__result p { font-size: 18px; line-height: 1.7; }
@media (max-width: 760px) {
  .m3-firm__pillars { font-size: 36px; }
  .m3-firm__result { padding: 24px; }
}

/* v62 — Firm Profile / principal page. 2-col layout: headshot + credentials
   on the left, bio prose on the right. Matches Michael's TEAM_PAGE_profile_noll
   markup. Stacks to single column below 760px. */
.m3-profile { max-width: 1100px; margin: 0 auto; padding: 28px 0 56px; }
.m3-profile__grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 48px;
  align-items: start;
}
.m3-profile__col-photo { min-width: 0; }
.m3-profile__col-bio   { min-width: 0; }
.m3-profile__headshot {
  margin: 0;
  background: #f4f5f7;
  padding: 10px;
  border-radius: 2px;
}
.m3-profile__headshot img,
.m3-profile__headshot picture { display: block; width: 100%; height: auto; }
.m3-profile__credentials {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 10px 0;
  font-family: var(--m3-display);
  letter-spacing: .04em;
}
.m3-profile__cred {
  font-weight: 700;
  font-size: 24px;
}
.m3-profile__cred--aia    { color: #c8102e; }   /* AIA red */
.m3-profile__cred--ncarb  {
  color: #6a737d;
  font-size: 14px;
  letter-spacing: .25em;
  padding: 6px 10px;
  background: #e5e9ee;
}
.m3-profile__name {
  font-family: var(--m3-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--m3-text);
  margin: 0 0 18px;
  letter-spacing: 0;
}
.m3-profile__name em {
  font-style: italic;
  font-weight: 500;
}
.m3-profile__suffix {
  font-size: 14px;
  font-weight: 500;
  color: #767676;
  letter-spacing: .05em;
}
.m3-profile__col-bio p {
  font-family: var(--m3-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--m3-text);
  margin: 0 0 18px;
}
@media (max-width: 760px) {
  .m3-profile__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .m3-profile__col-photo {
    max-width: 360px;
    margin: 0 auto;
  }
}

/* v55 — legal pages (Terms & Conditions, Privacy Policy). Long-form text
   layout with comfortable measure and clear section headings. */
.m3-legal { max-width: 760px; margin: 0 auto; padding: 28px 0 56px; }
.m3-legal__lede {
  font-family: var(--m3-body);
  font-size: 18px;
  line-height: 1.65;
  color: var(--m3-text);
  margin: 0 0 32px;
}
.m3-legal h2 {
  font-family: var(--m3-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--m3-text);
  margin: 36px 0 12px;
  letter-spacing: 0;
}
.m3-legal p,
.m3-legal li {
  font-family: var(--m3-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--m3-text);
  margin: 0 0 14px;
}
.m3-legal ul { padding-left: 22px; margin: 0 0 18px; }
.m3-legal a {
  color: var(--m3-accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.m3-legal a:hover { text-decoration: none; }
.m3-legal__updated {
  margin-top: 40px;
  color: #767676;
  font-size: 14px;
}

/* v36 — project-detail bottom photo gallery (mirrors live's Elementor grid) */
.m3-pd-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 20px 0 40px;
}
.m3-pd-gallery__item {
  display: block;
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  /* v98: dark navy gradient + low-opacity M3-mark placeholder, replacing
     the #f3f3f3 grey loading state. Same pattern as the category tiles. */
  background: linear-gradient(135deg, #1a1f2e 0%, #232a3f 100%);
}
.m3-pd-gallery__item::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../img/logo/m3-mark-placeholder.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: clamp(72px, 12vw, 120px) auto;
  filter: brightness(0) invert(1);
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
}
.m3-pd-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
  transition: transform .35s ease, filter .35s ease;
}
.m3-pd-gallery__item:hover img { transform: scale(1.04); filter: brightness(1.04); }
.m3-pd-gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.18));
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.m3-pd-gallery__item:hover::after { opacity: 1; }

/* v78: gallery item now wraps an <a class="m3-pd-gallery__view"> so the
   anchor only covers the photo area, not the vote buttons. */
.m3-pd-gallery__view { display: block; width: 100%; height: 100%; }
.m3-pd-gallery__item { margin: 0; }

/* v113: project gallery is now a horizontal FILMSTRIP CAROUSEL (was a 4-col
   grid). Same vote buttons + score-sort; nav arrows live in .m3-pd-carousel.
   Overrides placed AFTER the grid rules so source order wins. */
.m3-pd-carousel { position: relative; margin: 12px 0 26px; }  /* v116 — tighter gaps (REVS-1 [06:18]) */
.m3-pd-gallery {
  display: flex;
  grid-template-columns: none;
  gap: 14px;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;   /* overflow-x:auto alone computes overflow-y to auto */
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
  scrollbar-width: thin;
}
.m3-pd-gallery__item {
  flex: 0 0 auto;
  width: auto;
  height: 320px;   /* v116 — REVS-1 [06:09]: shorten carousel ~⅓ (was 460px) */
  aspect-ratio: auto;
  scroll-snap-align: start;
}
/* Slides inside the horizontal track reveal with FADE ONLY. The grid reveal's
   pre-animation translateY(40px)/scale(.94) counts toward the track's
   scrollable overflow — every carousel with not-yet-revealed slides grew a
   16px vertical scrollbar — and the scale also shifted the first slide's
   scroll-snap edge, leaving a ~20px initial scroll offset. */
.m3-pd-carousel .m3-pd-gallery__item { transform: none; }
.m3-pd-gallery__item img {
  width: auto;
  height: 100%;
  max-width: none;
}
@media (max-width: 800px) { .m3-pd-gallery__item { height: 250px; } }
@media (max-width: 520px) { .m3-pd-gallery__item { height: 200px; } }

/* v95 carousel pilot — thin lateral filmstrip on alternate project pages.
   Photos retain native aspect ratio at uniform height; the track scrolls
   horizontally with arrow + keyboard + native pointer-drag. */
.m3-pd-pilot-flag {
  margin: 0 0 24px;
  padding: 12px 18px;
  background: #f6efe2;
  border-left: 4px solid var(--m3-accent);
  font-size: 14px;
  line-height: 1.5;
  color: #4a3a1f;
  border-radius: 2px;
}
.m3-pd-pilot-flag a { color: var(--m3-accent-hover); text-decoration: underline; }
.m3-pd-filmstrip {
  position: relative;
  margin: 40px 0 60px;
}
.m3-pd-filmstrip__track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  padding: 4px 4px 18px;
  outline: none;
}
.m3-pd-filmstrip__track:focus-visible {
  box-shadow: 0 0 0 2px var(--m3-accent);
  border-radius: 2px;
}
.m3-pd-filmstrip__slide {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: block;
  height: 460px;
  /* v98: dark gradient + M3 placeholder, same pattern as the gallery + category tiles. */
  background: linear-gradient(135deg, #1a1f2e 0%, #232a3f 100%);
  position: relative;
  text-decoration: none;
  overflow: hidden;
  border-radius: 2px;
}
.m3-pd-filmstrip__slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../img/logo/m3-mark-placeholder.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: clamp(72px, 12vw, 120px) auto;
  filter: brightness(0) invert(1);
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
}
.m3-pd-filmstrip__slide img {
  height: 100%;
  width: auto;
  display: block;
  position: relative;
  z-index: 1;
  transition: transform .35s ease, filter .35s ease;
}
.m3-pd-filmstrip__slide:hover img { transform: scale(1.03); filter: brightness(1.05); }
.m3-pd-filmstrip__arrow {
  position: absolute;
  top: calc(50% - 9px);
  transform: translateY(-50%);
  z-index: 5;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 0;
  background: var(--m3-accent);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px -12px rgba(0,0,0,.55);
  transition: background .2s ease, opacity .2s ease;
}
.m3-pd-filmstrip__arrow svg { width: 20px; height: 20px; }
.m3-pd-filmstrip__arrow--prev { left: -18px; }
.m3-pd-filmstrip__arrow--next { right: -18px; }
.m3-pd-filmstrip__arrow:hover { background: var(--m3-accent-hover); }
.m3-pd-filmstrip__arrow.is-disabled { opacity: 0; pointer-events: none; }
.m3-pd-filmstrip__hint {
  margin: 14px 0 0;
  text-align: center;
  font-size: 13px;
  color: #8a8a8a;
  letter-spacing: .02em;
}
@media (max-width: 1100px) {
  .m3-pd-filmstrip__slide { height: 360px; }
  .m3-pd-filmstrip__arrow--prev { left: 8px; }
  .m3-pd-filmstrip__arrow--next { right: 8px; }
}
@media (max-width: 700px) {
  .m3-pd-filmstrip__slide { height: 260px; }
  .m3-pd-filmstrip__arrow { width: 44px; height: 44px; }
}

/* v78: up/down vote buttons. Hidden until item is hovered or already voted on,
   so the gallery reads clean by default. */
.m3-pd-gallery__votes {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  z-index: 2;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
}
.m3-pd-gallery__item:hover .m3-pd-gallery__votes,
.m3-pd-gallery__item--up .m3-pd-gallery__votes,
.m3-pd-gallery__item--down .m3-pd-gallery__votes {
  opacity: 1;
  pointer-events: auto;
}
.m3-pd-gallery__vote {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  cursor: pointer;
  font-size: 13px;
  font-family: var(--m3-body);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s ease, transform .1s ease;
}
.m3-pd-gallery__vote:hover { background: rgba(0, 0, 0, 0.85); transform: translateY(-1px); }
.m3-pd-gallery__item--up .m3-pd-gallery__vote--up     { background: #2c4682; }
.m3-pd-gallery__item--down .m3-pd-gallery__vote--down { background: #c8102e; }

/* v78: downvoted = grayscale + dimmed; full color on hover so Owen can
   still review the actual photo. */
.m3-pd-gallery__item--down img {
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter .25s ease, opacity .25s ease, transform .35s ease;
}
.m3-pd-gallery__item--down:hover img { filter: grayscale(0); opacity: 1; }

@media (max-width: 1100px) { .m3-pd-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { .m3-pd-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .m3-pd-gallery { grid-template-columns: 1fr; } }

/* === Service-detail layout (v20) — dark sidebar | main content === */
.m3-svcd-layout {
  display: grid;
  grid-template-columns: 370px 1fr;
  gap: 60px;
  align-items: start;
  margin: 90px 0 110px;
}
/* Dark sidebar with two stacked panels (services list + form). */
.m3-svcd-side { display: flex; flex-direction: column; gap: 30px; }
.m3-svcd-side__panel {
  background: #1b1b1d;
  color: #fff;
  padding: 50px 40px;
}
.m3-svcd-side__head {
  font-family: var(--m3-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--m3-accent-text);
  margin: 0 0 28px;
  letter-spacing: .01em;
}
.m3-svcd-side__list { margin: 0; padding: 0; list-style: none; }
.m3-svcd-side__list li {
  border-top: 1px solid rgba(255,255,255,.08);
}
.m3-svcd-side__list li:first-child { border-top: 0; }
.m3-svcd-side__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  font-family: var(--m3-display);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: color .25s ease;
}
.m3-svcd-side__list a::after {
  content: "→";
  font-size: 16px;
  color: var(--m3-accent-text);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .25s ease, transform .25s ease;
}
.m3-svcd-side__list a:hover,
.m3-svcd-side__list .is-current a { color: var(--m3-accent-text); }
.m3-svcd-side__list a:hover::after,
.m3-svcd-side__list .is-current a::after { opacity: 1; transform: translateX(0); }

/* Form panel (same dark bg). */
.m3-svcd-form { display: flex; flex-direction: column; gap: 14px; }
.m3-svcd-form input,
.m3-svcd-form textarea {
  font-family: var(--m3-body);
  font-size: 14px;
  background: #2a2a2c;
  border: 1px solid #2f2f31;
  padding: 14px 16px;
  color: #fff;
  border-radius: 0;
}
.m3-svcd-form input::placeholder,
.m3-svcd-form textarea::placeholder { color: #9a9a9a; }
.m3-svcd-form button {
  background: var(--m3-accent);
  color: #fff;
  border: 0;
  padding: 14px 22px;
  font-family: var(--m3-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  cursor: pointer;
  margin-top: 6px;
  transition: background .2s ease;
}
.m3-svcd-form button:hover { background: var(--m3-accent-hover); }

/* Main content column. */
.m3-svcd-main { min-width: 0; }
.m3-svcd-hero {
  margin: 0 0 36px;
  overflow: hidden;
}
.m3-svcd-hero img {
  width: 100%; height: auto; display: block;
  transform: scale(1);
  transition: transform 1.2s cubic-bezier(.2,.6,.2,1);
}
.m3-svcd-hero:hover img { transform: scale(1.04); }
.m3-svcd-h2 {
  font-family: var(--m3-display);
  font-size: 48px;
  font-weight: 700;
  color: var(--m3-heading);
  margin: 0 0 22px;
  line-height: 1.15;
}
.m3-svcd-main p {
  font-family: var(--m3-body);
  font-size: 17px;
  line-height: 30.6px;
  color: var(--m3-text);
  margin: 0 0 22px;
}
.m3-svcd-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 36px 0;
}
.m3-svcd-thumb {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 430 / 280;
  background: #f3f3f3;
}
.m3-svcd-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1);
  transition: transform .8s cubic-bezier(.2,.6,.2,1);
}
.m3-svcd-thumb:hover img { transform: scale(1.06); }
.m3-svcd-h3 {
  font-family: var(--m3-display);
  font-size: 30px;
  font-weight: 700;
  color: #636363;
  margin: 24px 0 22px;
  line-height: 1.25;
}
.m3-svcd-bullets {
  list-style: none;
  margin: 4px 0 28px;
  padding: 0;
}
.m3-svcd-bullets li {
  position: relative;
  padding: 6px 0 6px 28px;
  font-family: var(--m3-body);
  font-size: 17px;
  line-height: 30.6px;
  color: var(--m3-text);
}
.m3-svcd-bullets li::before {
  content: "";
  position: absolute;
  left: 4px; top: 16px;
  width: 12px; height: 1.5px;
  background: var(--m3-accent);
}
.m3-svcd-strip {
  margin: 28px 0 36px;
  overflow: hidden;
}
.m3-svcd-strip img {
  width: 100%; height: auto; display: block;
  transform: scale(1);
  transition: transform 1s cubic-bezier(.2,.6,.2,1);
}
.m3-svcd-strip:hover img { transform: scale(1.04); }

.m3-svcd-quote {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 30px;
  align-items: center;
  margin: 28px 0 0;
  padding: 28px 0 0;
}
.m3-svcd-quote__photo {
  margin: 0;
  width: 200px; height: 200px;
  border-radius: 50%;
  overflow: hidden;
  background: #f3f3f3;
}
.m3-svcd-quote__photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.m3-svcd-quote p {
  margin: 0;
  font-family: var(--m3-body);
  font-size: 17px;
  line-height: 30.6px;
  color: var(--m3-text);
}

@media (max-width: 1100px) {
  .m3-svcd-layout { grid-template-columns: 1fr; gap: 40px; }
  .m3-svcd-side { flex-direction: row; flex-wrap: wrap; }
  .m3-svcd-side__panel { flex: 1 1 320px; }
  .m3-svcd-quote { grid-template-columns: 1fr; }
  .m3-svcd-quote__photo { margin: 0 auto; }
}
@media (max-width: 600px) {
  .m3-svcd-pair { grid-template-columns: 1fr; }
  .m3-svcd-h2 { font-size: 36px; }
}

/* Portfolio category pages — header lockup, intro, project gallery. */
.m3-cat-banner {
  width: 100%;
  height: 430px;
  background: var(--m3-bg-banner) center/cover no-repeat;  /* v108: dark fallback behind the cover <img> */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.m3-cat-banner::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;                 /* v108: above cover img (z:0), below title (z:2) */
  background: rgba(0, 0, 0, 0.35);
}
.m3-cat-banner__title {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--m3-display);
  font-weight: 700;
  font-size: 42px;       /* v42: 56→42 */
  line-height: 1.15;
  color: #fff;
  text-align: center;
}
.m3-cat-h2 {
  font-family: var(--m3-display);
  font-size: 48px;
  font-weight: 700;
  color: var(--m3-heading);
  margin: 0 0 6px;
}
.m3-cat-sub {
  font-family: var(--m3-display);
  font-size: 26px;
  font-weight: 700;
  color: #848484;
  margin: 0 0 30px;
}
.m3-cat-prose { max-width: none; margin: 0 0 30px; }   /* v42: 60→30 */
.m3-cat-prose p {
  font-size: 16px;          /* v42: 17→16 */
  line-height: 26px;        /* v42: 30.6→26 */
  color: var(--m3-text);
  margin: 0 0 14px;         /* v42: 18→14 */
}

/* Pastel #13/#16/#18 (v37): text-left + 2-col image grid right. */
.m3-cat-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 48px;                /* v42: 60→48 */
  align-items: start;
  margin: 28px 0 48px;      /* v42: 50→28, 80→48 */
}
.m3-cat-layout__text { position: sticky; top: 100px; }   /* v42: 130→100 */
@media (max-width: 1100px) {
  .m3-cat-layout { grid-template-columns: 320px 1fr; gap: 40px; }
}
@media (max-width: 900px) {
  .m3-cat-layout { grid-template-columns: 1fr; gap: 30px; }
  .m3-cat-layout__text { position: static; }
}

/* Per-category project gallery — tiles in 2-col grid (was 3-col v36). */
.m3-cat-gallery {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.m3-cat-gallery--2col { grid-template-columns: repeat(2, 1fr); }
.m3-cat-tile {
  margin: 0;
  text-align: left;
}
.m3-cat-tile__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.m3-cat-tile__thumb {
  position: relative;
  overflow: hidden;
  /* v98: dark navy gradient + the actual M3 mark (extracted from the
     m3concepts-logo.png) as a low-opacity watermark. filter:invert
     re-tints the navy glyph to white so it reads against the gradient.
     The placeholder is hidden once the real <img> decodes on top of it. */
  background: linear-gradient(135deg, #1a1f2e 0%, #232a3f 100%);
  aspect-ratio: 640 / 320;
}
.m3-cat-tile__thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../img/logo/m3-mark-placeholder.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: clamp(96px, 14vw, 168px) auto;
  filter: brightness(0) invert(1);
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
}
.m3-cat-tile__thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  position: relative;
  z-index: 1;
  transform: scale(1);
  transition: transform .8s cubic-bezier(.2,.6,.2,1);
}
.m3-cat-tile:hover .m3-cat-tile__thumb img { transform: scale(1.08); }
.m3-cat-tile__title {
  display: block;
  margin: 18px 0 0;
  font-family: var(--m3-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--m3-accent-text);
  letter-spacing: .02em;
}

/* Scroll-reveal: tiles start invisible+down+small, fade in when in view. */
[data-m3-reveal-item] {
  opacity: 0;
  transform: translateY(40px) scale(.94);
  transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1);
  transition-delay: var(--m3-reveal-delay, 0s);
}
[data-m3-reveal-item].is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  [data-m3-reveal-item] { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 600px) { .m3-cat-gallery { grid-template-columns: 1fr; } }
.m3-cat-h2 { font-size: 26px; margin: 0 0 2px; }   /* v42: 30→26 */
.m3-cat-sub { font-size: 15px; margin: 0 0 14px; } /* v42: 17→15, 22→14 */
.m3-cat-prose p { font-size: 16px; line-height: 1.6; }  /* v42: 1.7→1.6 */
.m3-cat-banner { height: var(--m3-banner-h); }
/* v60: title hidden in the strip — the body H2 (e.g. "Commercial Portfolio")
   carries the page heading. Dark overlay also dropped because there's no
   text to read against the image. Both restored by .m3-page--keep-tall-banner below. */
.m3-cat-banner__title { display: none; }
.m3-cat-banner::before { display: none; }

/* v60: 1-Hotel pool-deck (and any future page that opts in) keeps a tall
   banner so the image — and any signage in it — stays visible. */
body.m3-page--keep-tall-banner .m3-banner,
body.m3-page--keep-tall-banner .m3-cat-banner {
  height: 280px;
}
body.m3-page--keep-tall-banner .m3-cat-banner__title {
  display: block;
  font-size: 42px;
}
body.m3-page--keep-tall-banner .m3-cat-banner::before {
  display: block;
}

/* Firm pages — MOVE / MEDIATE / MANIFEST display lockup. */
.m3-mmm {
  font-family: var(--m3-display);
  font-size: 48px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--m3-brand-blue, #0a4a7a);
  margin: 0 0 24px;
  text-align: center;
}
:root { --m3-brand-blue: #0a4a7a; }

.m3-pillars {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.m3-pillar {
  border-top: 2px solid var(--m3-brand-blue);
  padding-top: 24px;
}
.m3-pillar__title {
  font-family: var(--m3-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--m3-heading);
  margin: 0 0 12px;
}
.m3-pillar__title em {
  font-style: normal;
  font-weight: 700;
  color: var(--m3-brand-blue);
  font-size: 28px;
}
.m3-pillar__title span {
  font-weight: 400;
  color: var(--m3-text);
  font-size: 20px;
}
.m3-pillar p {
  font-size: 17px;
  line-height: 30px;
  margin: 0;
}

.m3-result {
  max-width: 720px;
  margin: 100px auto 0;
  text-align: center;
}
.m3-result p {
  font-family: var(--m3-display);
  font-size: 20px;
  line-height: 32px;
  color: var(--m3-heading);
  margin: 8px 0;
  font-weight: 500;
}

@media (max-width: 720px) {
  .m3-mmm { font-size: 36px; white-space: normal; }
}

/* Home hero — 3-up cover photos.
   v7 used Swiper for draggable scroll; we replicate visually with a static
   3-column grid that becomes a draggable scroll-strip on small screens. */
.m3-hero {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* v52: cap to viewport on small laptops so M/M/M doesn't sit below fold.
     Header is 56px (--m3-site-header-h). On screens with vp ≥ 956 this
     resolves to the original 900px. Mobile breakpoint below overrides to
     height:auto so phones/tablets stack 3 cells without cap. */
  height: min(900px, calc(100vh - 56px));
  width: 100%;
}

.m3-hero__cover {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 100%;
  text-decoration: none;
  color: inherit;
  cursor: default;   /* v122 — panel is no longer a link; only the word is clickable */
}
.m3-hero__cover:hover .m3-hero__title { transform: translateY(-2px); transition: transform .35s ease; }
.m3-hero__cover::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
/* v7 uses .content block inside each cover with an h4.title + .rts-btn. */
.m3-hero__content {
  position: relative; z-index: 2;
  padding: 0 24px;
  color: #fff;
  text-align: center;
}
/* v7 hero title: Plus Jakarta Sans 58px 700 italic white. */
.m3-hero__title {
  font-family: var(--m3-display);
  font-style: italic;
  font-weight: 700;
  font-size: 58px;
  color: #fff;
  margin: 0 0 18px;
  letter-spacing: 0;
}
/* v115 — REVS-1 [00:24]: only the M/M/M word links (→ firm philosophy). The
   cover image is no longer a link, so the anchor lives on the title word. */
/* v122 — only the word is the link: pointer cursor on the word only, and a
   gold color change on hover instead of an underline (color cue is enough). */
.m3-hero__title-link { color: inherit; text-decoration: none; display: inline-block; cursor: pointer; transition: color .25s ease; }
.m3-hero__title-link:hover { color: var(--m3-accent); }
.m3-hero__title-link:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
/* v7 "View Details" is a styled button (.rts-btn.btn-primary-3). */
.m3-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 22px;
  background: rgba(255, 255, 255, 0);
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: #ffffff;
  font-family: var(--m3-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  border-radius: 4px;
  transition: background .2s ease, color .2s ease;
}
.m3-hero__btn:hover { background: var(--m3-accent); border-color: var(--m3-accent-text); color: #fff; }
.m3-hero__btn .rt { font-size: 12px; line-height: 1; }
@media (max-width: 900px) {
  .m3-hero { grid-template-columns: 1fr; height: auto; }
  .m3-hero__cover { aspect-ratio: 3/2; min-height: 360px; }
}
/* v53: on phones (≤600px), drop the aspect-ratio so it doesn't drive width.
   With aspect-ratio:3/2 + min-height:360, intrinsic width becomes 540 which
   overflows a 375-414px phone viewport (horizontal scroll). aspect-ratio:auto
   lets the grid column (1fr = 100% viewport) own the width; min-height keeps
   the cell tall. Tablets (601-900px) stay on 3/2 — their viewport > 540 so no
   overflow there. */
@media (max-width: 600px) {
  .m3-hero__cover { aspect-ratio: auto; }
}

/* v97 — Per-cover responsive hero photos, layered on top of the inline
   LQIP blur set via style="" on the parent .m3-hero__cover anchor. The
   LQIP renders immediately; this child div fades in from opacity:0 to 1
   when m3-hero-loader.js detects the high-res image has decoded.

   Mediate / Manifest masters are only 800px wide (Michael's Pastel
   attachments) so 480 and native are the only variants. Move has full
   480/800/1280 stops because its source is 8064px wide. */
.m3-hero__cover-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity .6s ease-out;
  z-index: 1;
}
.m3-hero__cover-photo.is-loaded { opacity: 1; }
.m3-hero__cover::after { z-index: 2; }   /* dim overlay above the photo */
.m3-hero__content     { z-index: 3; }    /* title above the dim overlay */

.m3-hero__cover-photo--move     { background-image: url('../img/hero/move-800.jpg'); }
.m3-hero__cover-photo--mediate  { background-image: url('../img/hero/mediate.jpg'); }
.m3-hero__cover-photo--manifest { background-image: url('../img/hero/manifest.jpg'); }
@media (max-width: 800px) {
  .m3-hero__cover-photo--move     { background-image: url('../img/hero/move-480.jpg'); }
  .m3-hero__cover-photo--mediate  { background-image: url('../img/hero/mediate-480.jpg'); }
  .m3-hero__cover-photo--manifest { background-image: url('../img/hero/manifest-480.jpg'); }
}
@media (min-width: 1281px) {
  .m3-hero__cover-photo--move { background-image: url('../img/hero/move-1280.jpg'); }
}

/* v7 hero title sizing — bigger than the 64px default. */
.m3-hero__title { font-size: 80px; }

/* Outlined-button variant (used elsewhere — kept). */
.m3-btn--outline {
  background: transparent;
  color: var(--m3-heading);
  border: 1px solid var(--m3-heading);
}
.m3-btn--outline:hover { background: var(--m3-heading); color: #fff; }

/* 10. Page-specific overrides (keep thin) -------------------------------- */
/* (none yet) */

/* v98 — m3-lightbox.js modal for the project-detail gallery + filmstrip.
   Click a thumb → opens the full image in an overlay with prev/next +
   keyboard nav + Escape close. */
.m3-lb[hidden] { display: none; }
.m3-lb {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.m3-lb__backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 10, 14, 0.92);
  cursor: zoom-out;
}
.m3-lb__stage {
  position: relative;
  max-width: min(94vw, 1600px);
  max-height: 92vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  margin: 0;
  gap: 14px;
}
.m3-lb__img {
  max-width: 100%;
  max-height: 84vh;
  width: auto; height: auto;
  display: block;
  border-radius: 2px;
  background: #1a1b1d;
  opacity: 0;
  transition: opacity .25s ease-out;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7);
}
.m3-lb__img.is-loaded { opacity: 1; }
.m3-lb__caption {
  color: #d8d8d8;
  font-family: var(--m3-body);
  font-size: 13px;
  letter-spacing: .04em;
  text-align: center;
  margin: 0;
  max-width: 80vw;
}
.m3-lb__close,
.m3-lb__arrow {
  position: absolute;
  z-index: 2;
  border: 0;
  background: rgba(255,255,255,.10);
  color: #ffffff;
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s ease, transform .2s ease;
}
.m3-lb__close { top: 22px; right: 22px; width: 44px; height: 44px; }
.m3-lb__arrow { top: 50%; transform: translateY(-50%); width: 56px; height: 56px; }
.m3-lb__arrow--prev { left: 22px; }
.m3-lb__arrow--next { right: 22px; }
.m3-lb__close svg,
.m3-lb__arrow svg { width: 24px; height: 24px; }
.m3-lb__close:hover,
.m3-lb__arrow:hover { background: rgba(255,255,255,.20); }
.m3-lb__arrow:hover { transform: translateY(-50%) scale(1.05); }
html.m3-lb-locked,
html.m3-lb-locked body { overflow: hidden; }
@media (max-width: 700px) {
  .m3-lb__close { top: 12px; right: 12px; width: 38px; height: 38px; }
  .m3-lb__arrow { width: 44px; height: 44px; }
  .m3-lb__arrow--prev { left: 8px; }
  .m3-lb__arrow--next { right: 8px; }
}