/*
Theme Name:   Bricks Child — Miami Marine
Template:     bricks
Version:      1.0.0
Description:  Global stylesheet. Structure lives in Bricks, styling lives here.
*/

/* =========================================================================
   00 · HOW TO USE THIS FILE
   -------------------------------------------------------------------------
   Every class below is a hook. In Bricks you assign the class name and
   nothing else — no Bricks-side styling, ever. If a rule needs to change,
   it changes here and it changes on every page at once.

   Naming: mm- prefix on everything so the Bricks class dropdown stays
   self-documenting and nothing collides with a plugin.
     mm-*            component or region
     mm-*--modifier  variant of the thing before it
     mm-u-*          single-purpose utility
   ========================================================================= */


/* =========================================================================
   01 · TOKENS
   ========================================================================= */
:root{
  /* palette — every value named for the material it came from */
  --mm-gasket:#15181B;        /* EPDM compression seal. Never pure black. */
  --mm-anodize:#33383D;       /* hard-coat anodized aluminium — body copy */
  --mm-anodize-2:#4A5157;
  --mm-mill:#9BA1A6;          /* mill-finish extrusion — captions, labels */
  --mm-bronze:#8A6A46;        /* solar bronze glass tint — ACTION ONLY */
  --mm-bronze-lt:#A98459;
  --mm-solex:#4E6B57;         /* solex green — held back, defense sections */
  --mm-daylight:#EDEEEB;      /* light through tempered glass */
  --mm-paper:#F6F6F4;         /* page base */
  --mm-hairline:#D3D5D2;
  --mm-hairline-dk:#2A2F34;
  --mm-dim:#B4BABE;           /* body copy on dark grounds */
  --mm-dim-2:#A6ACB0;

  /* type */
  --mm-display:"Archivo",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  --mm-body:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  --mm-spec:"IBM Plex Mono",Consolas,Menlo,monospace;

  /* geometry */
  --mm-r:22px;                        /* 3" corner radius, scaled */
  --mm-gutter:clamp(20px,4vw,44px);
  --mm-maxw:1240px;
  --mm-maxw-narrow:820px;             /* long-form internal pages */

  /* rhythm */
  --mm-section-pad:clamp(56px,8vw,104px);
  --mm-section-pad-sm:clamp(36px,5vw,64px);
  --mm-gap:20px;
  --mm-gap-lg:clamp(28px,5vw,60px);

  /* motion */
  --mm-ease:.2s ease;
}


/* =========================================================================
   02 · BRICKS RESET
   -------------------------------------------------------------------------
   Bricks ships Section/Container/Block as flex columns with centring and
   its own padding. Neutralise once, here, so layout is never a fight.
   This is the only place we touch Bricks internals.
   ========================================================================= */
.brxe-section{
  display:block;width:100%;padding:0;
  align-items:initial;justify-content:initial;
}
.brxe-container{
  display:block;width:100%;max-width:none;margin:0;padding:0;
  align-items:initial;justify-content:initial;
}
.brxe-block{
  display:block;width:100%;
  align-items:initial;justify-content:initial;
}
.brxe-div{display:block}

/* Bricks button element carries its own chrome — strip it, .mm-btn dresses it */
.bricks-button{
  background:none;border:0;border-radius:0;box-shadow:none;
  font-family:inherit;font-size:inherit;line-height:inherit;
}


/* =========================================================================
   03 · BASE + TYPE
   ========================================================================= */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--mm-paper);color:var(--mm-gasket);
  font-family:var(--mm-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--mm-bronze);outline-offset:3px}

h1,h2,h3,h4{font-family:var(--mm-display);text-transform:uppercase;margin:0;line-height:1}
h1{font-variation-settings:"wdth" 120,"wght" 750;font-size:clamp(34px,6.2vw,72px);letter-spacing:-.018em;line-height:.93}
h2{font-variation-settings:"wdth" 114,"wght" 680;font-size:clamp(24px,3.6vw,42px);letter-spacing:-.012em;line-height:1}
h3{font-variation-settings:"wdth" 110,"wght" 640;font-size:clamp(17px,1.7vw,21px);letter-spacing:-.004em}
h4{font-variation-settings:"wdth" 108,"wght" 620;font-size:14px;letter-spacing:.01em}
p{margin:0 0 1em;max-width:64ch}
p:last-child{margin-bottom:0}


/* =========================================================================
   04 · LAYOUT PRIMITIVES
   -------------------------------------------------------------------------
   These four classes build every page on the site. Learn them once.
   ========================================================================= */

/* --- 4.1 section: vertical rhythm + ground colour -------------------- */
.mm-section{padding-block:var(--mm-section-pad);position:relative}
.mm-section--tight{padding-block:var(--mm-section-pad-sm)}
.mm-section--flush{padding-block:0}
.mm-section--rule{border-top:1px solid var(--mm-hairline)}
.mm-section--white{background:#fff;border-top:1px solid var(--mm-hairline);border-bottom:1px solid var(--mm-hairline)}
.mm-section--dark{background:var(--mm-gasket);color:var(--mm-daylight);overflow:hidden}
.mm-section--dark h1,
.mm-section--dark h2,
.mm-section--dark h3{color:var(--mm-daylight)}
.mm-section--dark p{color:var(--mm-dim)}
.mm-section--dark .mm-lede{color:var(--mm-dim)}

/* --- 4.2 wrap: the single width authority ----------------------------- */
.mm-wrap{
  width:100%;max-width:var(--mm-maxw);margin-inline:auto;
  padding-inline:var(--mm-gutter);position:relative;z-index:2;
}
.mm-wrap--narrow{max-width:var(--mm-maxw-narrow)}
.mm-wrap--bleed{padding-inline:0}   /* full-bleed children inside a max-width */

/* --- 4.3 grid: one class, column count set per instance --------------- */
.mm-grid{display:grid;gap:var(--mm-gap)}
.mm-grid--2{grid-template-columns:repeat(2,1fr)}
.mm-grid--3{grid-template-columns:repeat(3,1fr)}
.mm-grid--4{grid-template-columns:repeat(4,1fr)}
/* auto-fit variants — these reflow with no breakpoint at all */
.mm-grid--auto-190{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.mm-grid--auto-240{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.mm-grid--auto-248{grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.mm-grid--auto-260{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.mm-grid--flush{gap:0}

.mm-grid--auto-288{grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}
.mm-grid--auto-210{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

/* --- 4.4 split: asymmetric two-column, collapses at 980 --------------- */
.mm-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--mm-gap-lg);align-items:center}
.mm-split--l{grid-template-columns:1.05fr .95fr}   /* left-heavy */
.mm-split--r{grid-template-columns:.9fr 1.1fr}     /* right-heavy */
.mm-split--top{align-items:start}
/* reverse visual order on desktop without changing DOM order */
.mm-split--swap > *:first-child{order:2}
.mm-split--swap > *:last-child{order:1}

/* --- 4.5 stack: vertical spacing without margin hacks ---------------- */
.mm-stack{display:flex;flex-direction:column;gap:var(--mm-gap)}
.mm-stack--sm{gap:12px}
.mm-stack--lg{gap:var(--mm-gap-lg)}


/* =========================================================================
   05 · TEXT UTILITIES
   ========================================================================= */
.mm-eyebrow{
  font-family:var(--mm-spec);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--mm-mill);margin:0 0 16px;display:block;
}
.mm-eyebrow--bronze{color:var(--mm-bronze)}
.mm-spec{font-family:var(--mm-spec);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--mm-mill)}
.mm-lede{font-size:clamp(16px,1.5vw,18.5px);color:var(--mm-anodize);max-width:56ch}
.mm-cap{
  font-family:var(--mm-spec);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--mm-mill);line-height:1.7;
}
.mm-body-sm{font-size:14.5px;color:var(--mm-anodize);}
.mm-cap--dark{color:var(--mm-gasket)}

/* section head block: eyebrow + h2 + lede */
.mm-sechead{margin-bottom:clamp(28px,4vw,48px);max-width:62ch}
.mm-sechead h2{margin-bottom:14px}

/* long-form body for internal pages */
.mm-prose{max-width:68ch}
.mm-prose h2{margin:1.8em 0 .5em}
.mm-prose h3{margin:1.6em 0 .4em}
.mm-prose h2:first-child,.mm-prose h3:first-child{margin-top:0}
.mm-prose ul,.mm-prose ol{margin:0 0 1.2em;padding-left:1.2em;max-width:64ch;color:var(--mm-anodize)}
.mm-prose li{margin-bottom:.5em}
.mm-prose a{color:var(--mm-bronze);text-underline-offset:3px}

/* staging marker — visible to logged-in editors only, invisible to the public */
.mm-tbd{border-bottom:0}
.logged-in .mm-tbd{border-bottom:1.5px dotted var(--mm-bronze);cursor:help}


/* =========================================================================
   06 · THE SIGNATURE — CERAMIC FRIT DOT MATRIX
   -------------------------------------------------------------------------
   This is the one memorable device on the site. Nothing else gets to be
   loud: flat colour, hairline rules, no shadows, no gradients as decoration.
   Add mm-frit-* to any element that already has position:relative.
   ========================================================================= */
.mm-frit-dark,.mm-frit-light{position:relative}
.mm-frit-dark::after,.mm-frit-light::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:150px;
  pointer-events:none;z-index:1;background-size:7px 7px;
}
.mm-frit-dark::after{
  background-image:radial-gradient(circle,#0A0C0E 1.3px,transparent 1.4px);
  -webkit-mask-image:linear-gradient(to top,#000 0%,transparent 100%);
          mask-image:linear-gradient(to top,#000 0%,transparent 100%);
}
.mm-frit-light::after{
  background-image:radial-gradient(circle,var(--mm-gasket) 1.15px,transparent 1.25px);
  -webkit-mask-image:linear-gradient(to top,#000 0%,transparent 100%);
          mask-image:linear-gradient(to top,#000 0%,transparent 100%);
  opacity:.5;
}
/* radial burst — used behind the closing CTA only */
.mm-frit-burst{position:relative;overflow:hidden}
.mm-frit-burst::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:radial-gradient(circle,#0A0C0E 1.3px,transparent 1.4px);background-size:7px 7px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 0%,transparent 72%);
          mask-image:radial-gradient(ellipse at center,#000 0%,transparent 72%);
}


/* =========================================================================
   07 · MEDIA PLATES
   -------------------------------------------------------------------------
   Placeholder grounds that become image containers. Swap the gradient for
   a background-image (or drop an <img> inside) with zero markup change.
   ========================================================================= */
.mm-plate{
  position:relative;overflow:hidden;display:flex;align-items:flex-end;
  padding:18px;background-size:cover;background-position:center;
}
.mm-plate--light{background-image:linear-gradient(135deg,#C6CACC,#8F969B)}
.mm-plate--dark{background-image:linear-gradient(150deg,#3C4247,#1C1F22)}
.mm-plate--hero{background-image:linear-gradient(140deg,#3C4247 0%,#23272B 52%,#181B1E 100%)}
/* asymmetric radius — the 3" corner spec used as structure, not decoration */
.mm-plate--corner-a{border-radius:var(--mm-r) 0 var(--mm-r) 0}
.mm-plate--corner-b{border-radius:0 var(--mm-r) 0 var(--mm-r)}
.mm-plate--tall{min-height:400px}
.mm-plate--mid{min-height:340px}
.mm-plate--short{min-height:230px}
.mm-plate > *{position:relative;z-index:2}

/* inset frame line — glass edge. Standalone so no parent rule can flatten it. */
.mm-frameline{
  position:absolute;inset:30px;z-index:2;pointer-events:none;
  border:1px solid rgba(155,161,166,.26);border-radius:var(--mm-r);
}


/* =========================================================================
   08 · BUTTONS
   -------------------------------------------------------------------------
   Bronze means action. The moment it becomes a background it stops meaning
   anything — never use bronze as a section fill.
   ========================================================================= */
.mm-btn{
  font-family:var(--mm-spec);font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  padding:12px 26px;background:var(--mm-bronze);color:#14161A;border:1px solid var(--mm-bronze);
  display:inline-block;cursor:pointer;transition:background var(--mm-ease),color var(--mm-ease),border-color var(--mm-ease);
}
.mm-btn:hover{background:var(--mm-bronze-lt);border-color:var(--mm-bronze-lt);color:#14161A}
.mm-btn--sm{padding:11px 18px;font-size:10.5px}
.mm-btn--ghost{background:transparent;color:var(--mm-gasket);border-color:var(--mm-gasket)}
.mm-btn--ghost:hover{background:var(--mm-gasket);color:var(--mm-daylight);border-color:var(--mm-gasket)}
.mm-btn--ghost-lt{background:transparent;color:var(--mm-daylight);border-color:rgba(237,238,235,.42)}
.mm-btn--ghost-lt:hover{background:var(--mm-daylight);color:var(--mm-gasket);border-color:var(--mm-daylight)}
.mm-btnrow{display:flex;flex-direction:row;gap:13px;flex-wrap:wrap;margin-top:26px}
.mm-btnrow--flush{margin-top:0}
.mm-btnrow--center{justify-content:center}


/* =========================================================================
   09 · COMPONENTS
   ========================================================================= */

/* --- 9.1 product card ------------------------------------------------- */
.mm-card{
  border:1px solid var(--mm-hairline);background:#fff;overflow:hidden;text-decoration:none;
  border-radius:var(--mm-r) 0 var(--mm-r) 0;
  display:flex;flex-direction:column;
  transition:border-color var(--mm-ease),transform var(--mm-ease);
}
.mm-card:hover{border-color:var(--mm-gasket);transform:translateY(-3px)}
.mm-card__media{
  height:170px;flex:0 0 auto;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#CACED0,#9BA1A6);background-position:center;
}

.mm-card__tag{
  position:absolute;left:14px;bottom:12px;z-index:2;
  font-family:var(--mm-spec);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mm-daylight);
}
.mm-card__body{padding:20px;flex:1;display:flex;flex-direction:column}
.mm-card__body h3{margin-bottom:9px}
.mm-card__body p{font-size:14px;color:var(--mm-anodize);margin-bottom:14px;flex:1}
.mm-card__rule{
  border-top:1px dashed var(--mm-hairline);padding-top:12px;
  font-family:var(--mm-spec);font-size:10px;letter-spacing:.1em;color:var(--mm-mill);
  line-height:1.8;text-transform:uppercase;
}
.mm-card__go{
  margin-top:12px;font-family:var(--mm-spec);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mm-bronze);
}

/* --- 9.2 market / application tile ------------------------------------ */
.mm-market{
  position:relative;min-height:340px;overflow:hidden;text-decoration:none;color:var(--mm-daylight);
  display:flex;flex-direction:column;justify-content:flex-end;padding:26px;
  border-radius:0 var(--mm-r) 0 var(--mm-r);
  background-size:cover;background-position:center;
}
.mm-market--commercial{background-image:linear-gradient(160deg,#454B50,#1B1E21)}
.mm-market--defense{background-image:linear-gradient(160deg,#3F4A43,#191D1A)}
.mm-market--recreational{background-image:linear-gradient(160deg,#4A4239,#1E1B18)}
.mm-market::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle,#0A0C0E 1.3px,transparent 1.4px);background-size:7px 7px;
  -webkit-mask-image:linear-gradient(to top,#000,transparent 72%);
          mask-image:linear-gradient(to top,#000,transparent 72%);
}
.mm-market > *{position:relative;z-index:2}
.mm-market h3{margin-bottom:9px;color:var(--mm-daylight)}
.mm-market p{font-size:13.5px;color:var(--mm-dim);margin:0}
.mm-market__go{
  margin-top:14px;font-family:var(--mm-spec);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mm-bronze-lt);
}

/* --- 9.3 numbered process step ---------------------------------------- */
.mm-steps{border:1px solid var(--mm-hairline-dk)}
.mm-step{padding:28px 24px;border-right:1px solid var(--mm-hairline-dk);position:relative}
.mm-step:last-child{border-right:0}
.mm-step__n{font-family:var(--mm-spec);font-size:10px;letter-spacing:.18em;color:var(--mm-bronze);margin-bottom:16px;display:block}
.mm-step h3{margin-bottom:9px;color:var(--mm-daylight)}
.mm-step p{font-size:13.5px;color:var(--mm-dim-2);margin:0}

/* --- 9.4 stat / proof strip ------------------------------------------- */
.mm-stats{display:flex;flex-direction:row;flex-wrap:wrap;border-top:1px solid var(--mm-hairline-dk)}
.mm-stats > *{flex:1;min-width:170px;padding:26px;border-right:1px solid var(--mm-hairline-dk)}
.mm-stats > *:last-child{border-right:0}
.mm-stat__v{
  font-family:var(--mm-display);font-variation-settings:"wdth" 114,"wght" 700;
  font-size:clamp(20px,2.2vw,27px);line-height:1;margin-bottom:7px;text-transform:uppercase;
}
.mm-stat__k{font-family:var(--mm-spec);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mm-mill)}
/* light-ground variant for internal pages */
.mm-stats--light{border:1px solid var(--mm-hairline);background:#fff}
.mm-stats--light > *{border-right-color:var(--mm-hairline)}

/* --- 9.5 spec table ---------------------------------------------------- */
.mm-spectable{
  border:1px solid var(--mm-hairline);border-bottom:0;
  font-family:var(--mm-spec);font-size:12px;
}
.mm-spectable__row{display:grid;grid-template-columns:54% 1fr;border-bottom:1px solid var(--mm-hairline)}
.mm-spectable__k{
  background:#fff;padding:13px 15px;color:var(--mm-gasket);
  border-right:1px solid var(--mm-hairline);
  letter-spacing:.05em;text-transform:uppercase;font-size:10.5px;
}
.mm-spectable__v{background:var(--mm-paper);padding:13px 15px;color:var(--mm-anodize);font-weight:500}

@media (max-width:478px){
  .mm-spectable__row{grid-template-columns:48% 1fr}
}

/* --- 9.6 bronze-rule callout ------------------------------------------ */
.mm-callout{margin-top:22px;border-left:2px solid var(--mm-bronze);padding:6px 0 6px 16px}
.mm-callout .mm-spec{display:block;margin-bottom:5px;color:var(--mm-bronze)}
.mm-callout p{font-size:14px;color:var(--mm-anodize);margin:0}

/* --- 9.7 testimonial --------------------------------------------------- */
.mm-quote{border:1px solid var(--mm-hairline);background:#fff;padding:26px;margin-top:20px}
.mm-quote__mark{
  font-family:var(--mm-display);font-variation-settings:"wdth" 120,"wght" 750;
  font-size:34px;color:var(--mm-hairline);line-height:.7;margin-bottom:14px;
}
.mm-quote p{font-size:15px;color:var(--mm-anodize);margin-bottom:18px}
.mm-quote__attrib{
  border-top:1px dashed var(--mm-hairline);padding-top:14px;
  font-family:var(--mm-spec);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mm-mill);line-height:1.8;
}

/* --- 9.8 client logo rail --------------------------------------------- */
.mm-logos{display:flex;flex-direction:row;flex-wrap:wrap;border:1px solid var(--mm-hairline);background:#fff;margin-top:20px}
.mm-logos > *{
  flex:1;min-width:130px;height:78px;border-right:1px solid var(--mm-hairline);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mm-spec);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mm-hairline);
}
.mm-logos > *:last-child{border-right:0}

/* =========================================================================
   10 · REGIONS
   ========================================================================= */

/* --- 10.1 utility bar --------------------------------------------------- */
.mm-util{
  background:var(--mm-gasket);color:var(--mm-mill);
  font-family:var(--mm-spec);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
}
.mm-util .mm-wrap{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:16px;padding-block:9px}
.mm-util a{text-decoration:none}
.mm-util a:hover{color:var(--mm-daylight)}
.mm-util__right{display:flex;gap:22px;width:auto;}

/* =========================================================================
   10.2  HEADER + NAV  —  REPLACEMENT BLOCK
   -------------------------------------------------------------------------
   Replaces lines 441–481 of style.css (everything from the
   "--- 10.2 header + nav ---" comment down to and including the
   @media (max-width:760px){ .mm-nav ul{...} } block).

   WHY THIS IS DIFFERENT FROM THE OLD VERSION
   The Bricks Nav Menu element renders THREE separate <ul> lists inside one
   wrapper: the desktop list, the dropdown, and the off-canvas mobile list.
   The old rule `.mm-nav ul{display:flex}` hit all three. This version never
   uses a bare `ul` for layout — it addresses each list structurally, and it
   takes full ownership of the show/hide behaviour rather than assuming
   Bricks' own defaults will survive.

   BREAKPOINT DEPENDENCY
   This assumes the Nav Menu element's mobile breakpoint is set to 760px in
   Bricks (element → Content → MOBILE MENU → Breakpoint). If yours is set to
   something else, change 760/761 below to match, or you'll get a window
   where neither menu renders.
   ========================================================================= */

.mm-header{
  top:0;z-index:60;
  background:rgba(246,246,244,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--mm-hairline);
}
.mm-header .mm-wrap{
  display:flex;flex-direction:row;align-items:center;
  justify-content:space-between;gap:26px;padding-block:16px;
}

.mm-logo{
  font-family:var(--mm-display);font-variation-settings:"wdth" 118,"wght" 750;
  font-size:15px;text-transform:uppercase;letter-spacing:-.005em;line-height:1.05;
  text-decoration:none;max-width:190px;display:block;
}
.mm-logo span{
  display:block;font-family:var(--mm-spec);font-size:9px;letter-spacing:.2em;
  color:var(--mm-mill);font-variation-settings:normal;margin-top:4px;text-transform:uppercase;
}

/* --- reset that is safe on every list inside the element ----------------- */
.mm-nav ul{list-style:none;margin:0;padding:0}
.mm-nav li{margin:0}

/* --- 1. DESKTOP ROW  (direct children of the desktop wrapper only) ------- */
.mm-nav .bricks-nav-menu-wrapper > ul,
.mm-nav ul.bricks-nav-menu{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:26px;
}
/* anchor point for the absolutely positioned dropdown */
.mm-nav .bricks-nav-menu-wrapper > ul > li{position:relative}

/* --- 2. LINK STYLING ----------------------------------------------------- */
.mm-nav .bricks-nav-menu-wrapper a{
  display:inline-block;
  font-family:var(--mm-spec);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;
  color:var(--mm-anodize);
  padding:4px 0;
  border-bottom:1px solid transparent;
  white-space:nowrap;
  transition:color var(--mm-ease),border-color var(--mm-ease);
}
.mm-nav .bricks-nav-menu-wrapper > ul > li > a:hover,
.mm-nav .bricks-nav-menu-wrapper > ul > li > a:focus-visible,
.mm-nav .bricks-nav-menu-wrapper > ul > .current-menu-item > a,
.mm-nav .bricks-nav-menu-wrapper > ul > .current_page_item > a,
.mm-nav .bricks-nav-menu-wrapper > ul > .current-menu-ancestor > a{
  color:var(--mm-gasket);
  border-bottom-color:var(--mm-bronze);
}

/* Bricks' caret button for parent items */
.mm-nav .brx-submenu-toggle{
  background:none;border:0;padding:0;margin:0;
  font:inherit;color:inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
}
.mm-nav .brx-submenu-toggle svg{width:9px;height:9px;flex:none}

/* --- 3. DROPDOWN  (any nested list in the desktop wrapper) --------------- */
/* `ul ul` catches .sub-menu AND .children — the latter is what WordPress
   emits if no menu is assigned and it falls back to an auto page list. */
.mm-nav .bricks-nav-menu-wrapper ul ul{
  position:absolute !important;
  top:100% !important;
  left:0;
  z-index:70;
  display:flex !important;
  flex-direction:column !important;
  gap:0;
  min-width:212px;
  padding:14px 18px;
  background:var(--mm-gasket);
  border:1px solid rgba(255,255,255,.08);
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none;
  transform:translateY(4px);
  transition:opacity var(--mm-ease),transform var(--mm-ease),visibility var(--mm-ease);
}
.mm-nav .bricks-nav-menu-wrapper ul ul a{
  color:var(--mm-daylight);
  padding:7px 0;
  border-bottom:0;
}
.mm-nav .bricks-nav-menu-wrapper ul ul a:hover,
.mm-nav .bricks-nav-menu-wrapper ul ul a:focus-visible{
  color:var(--mm-bronze-lt);
  border-bottom:0;
}

/* reveal on hover, keyboard focus, or Bricks' own .open / aria-expanded */
.mm-nav .bricks-nav-menu-wrapper > ul > li:hover > ul,
.mm-nav .bricks-nav-menu-wrapper > ul > li:focus-within > ul,
.mm-nav .bricks-nav-menu-wrapper > ul > li.open > ul,
.mm-nav .bricks-nav-menu-wrapper > ul > li[aria-expanded="true"] > ul{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto;
  transform:translateY(0);
}

/* --- 4. RIGHT-HAND CLUSTER ---------------------------------------------- */
.mm-navcta{display:flex;flex-direction:row;width:auto;align-items:center;gap:18px}
.mm-phone{
  font-family:var(--mm-spec);font-size:12px;letter-spacing:.06em;
  text-decoration:none;color:var(--mm-gasket);white-space:nowrap;
}
.mm-phone:hover{color:var(--mm-bronze)}

/* --- 5. MOBILE TOGGLE + OFF-CANVAS PANEL -------------------------------- */
.mm-nav .bricks-mobile-menu-toggle{color:var(--mm-gasket)}
.mm-nav .bricks-mobile-menu-wrapper{background:var(--mm-gasket)}
.mm-nav .bricks-mobile-menu-wrapper a{
  color:var(--mm-daylight);
  font-family:var(--mm-spec);font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;border:0;
}
.mm-nav .bricks-mobile-menu-wrapper ul{
  display:flex;
  flex-direction:column;
  gap:0;
}

/* Above the breakpoint the off-canvas panel must never render, and the
   desktop list must. These two guards are what stop the duplicate menu. */
@media (min-width:761px){
  .mm-nav .bricks-mobile-menu-toggle,
  .mm-nav .bricks-mobile-menu-wrapper{display:none !important}
  .mm-nav .bricks-nav-menu-wrapper{display:block !important}
}

@media (max-width:760px){
  .mm-nav .bricks-nav-menu-wrapper{display:none !important}
  .mm-nav .bricks-mobile-menu-toggle{display:inline-flex !important}
}


/* --- 10.3 hero ---------------------------------------------------------- */
.mm-hero{background:var(--mm-gasket);color:var(--mm-daylight);position:relative;overflow:hidden}
.mm-hero__grid{display:grid;grid-template-columns:1.02fr .98fr;min-height:min(78vh,620px)}
.mm-hero__copy{
  display:flex;flex-direction:column;justify-content:center;position:relative;z-index:3;
  padding-block:clamp(40px,6vw,76px);padding-right:clamp(24px,4vw,58px);
}
/* aligns hero copy to the same optical column as .mm-wrap on every other section */
.mm-hero__inner{max-width:calc(var(--mm-maxw) / 2);margin-left:auto;padding-left:var(--mm-gutter);width:100%}
.mm-hero h1{margin-bottom:22px}
.mm-hero p{color:var(--mm-dim);max-width:46ch;margin-bottom:30px}
.mm-hero__media{
  position:relative;min-height:320px;padding:24px;display:flex;align-items:flex-end;
  background-image:linear-gradient(140deg,#3C4247 0%,#23272B 52%,#181B1E 100%);
  background-size:cover;background-position:center;
	object-fit: cover;
}

.mm-hero__media > .mm-cap{position:relative;z-index:3}

/* --- 10.4 internal page hero (reusable on every non-home page) ---------- */
.mm-pagehero{
  background:var(--mm-gasket);color:var(--mm-daylight);
  padding-block:clamp(48px,6vw,88px);position:relative;overflow:hidden;
}
.mm-pagehero h1{margin-bottom:18px;font-size:clamp(30px,4.6vw,54px)}
.mm-pagehero p{color:var(--mm-dim);max-width:56ch}
.mm-crumbs{
  font-family:var(--mm-spec);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mm-mill);margin-bottom:18px;
}
.mm-crumbs a{text-decoration:none}
.mm-crumbs a:hover{color:var(--mm-daylight)}

/* --- 10.5 closing CTA --------------------------------------------------- */
.mm-cta{background:var(--mm-gasket);color:var(--mm-daylight);text-align:center}
.mm-cta h2{color:var(--mm-daylight);margin-bottom:18px}
.mm-cta p{color:var(--mm-dim);margin:0 auto 30px;max-width:52ch}

/* --- 10.6 footer -------------------------------------------------------- */
.mm-footer{
  background:var(--mm-gasket);color:var(--mm-mill);border-top:1px solid var(--mm-hairline-dk);
  padding:clamp(40px,5vw,64px) 0 34px;font-size:14px;
}
.mm-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;margin-bottom:38px}
.mm-footer h4{color:var(--mm-daylight);margin-bottom:16px;font-size:12px;letter-spacing:.06em}
.mm-footer ul{list-style:none;margin:0;padding:0}
.mm-footer li{margin-bottom:9px}
.mm-footer a{text-decoration:none;font-size:13.5px}
.mm-footer a:hover{color:var(--mm-daylight)}
.mm-footer__logo{
  font-family:var(--mm-display);font-variation-settings:"wdth" 118,"wght" 750;
  font-size:16px;text-transform:uppercase;color:var(--mm-daylight);line-height:1.1;margin-bottom:14px;
}
.mm-footer__addr{font-size:13.5px;line-height:1.8;max-width:32ch}
.mm-footer__bottom{
  border-top:1px solid var(--mm-hairline-dk);padding-top:22px;
  display:flex;flex-direction:row;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-family:var(--mm-spec);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
}


/* =========================================================================
   11 · MOTION
   -------------------------------------------------------------------------
   Progressive enhancement: the hide rule only applies once JS has added
   .mm-js to <html>. If JS fails, or you're inside the Bricks builder,
   everything renders visible. Never invisible content by default.
   ========================================================================= */
.mm-js .mm-rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.mm-js .mm-rv.is-in{opacity:1;transform:none}


/* =========================================================================
   12 · RESPONSIVE
   -------------------------------------------------------------------------
   Two breakpoints only. Set Bricks to match: 980 (tablet) / 760 (mobile).
   Everything built on .mm-grid--auto-* reflows with no breakpoint at all.
   ========================================================================= */
@media (max-width:980px){
  .mm-hero__grid{grid-template-columns:1fr}
  .mm-hero__inner{max-width:none;margin:0;padding-right:var(--mm-gutter)}
  .mm-hero__copy{padding-right:0}
  .mm-hero__media{min-height:280px;order:-1}

  .mm-split,.mm-split--l,.mm-split--r{grid-template-columns:1fr}
  .mm-split--swap > *:first-child,.mm-split--swap > *:last-child{order:0}
  .mm-grid--3,.mm-grid--4{grid-template-columns:repeat(2,1fr)}

  .mm-footer__grid{grid-template-columns:1fr 1fr}
  .mm-plate--tall{min-height:320px}
}

@media (max-width:760px){
  .mm-util .mm-wrap{flex-direction:column;align-items:flex-start;gap:6px}
  .mm-util__right{gap:14px;flex-wrap:wrap}
  .mm-phone{display:none}

  .mm-grid--2,.mm-grid--3,.mm-grid--4{grid-template-columns:1fr}
  .mm-step{border-right:0;border-bottom:1px solid var(--mm-hairline-dk)}
  .mm-step:last-child{border-bottom:0}
  .mm-stats > *{min-width:50%;border-bottom:1px solid var(--mm-hairline-dk)}
  .mm-footer__grid{grid-template-columns:1fr;gap:28px}
  .mm-footer__bottom{flex-direction:column;gap:8px}
  .mm-market{min-height:280px}
  .mm-spectable td:first-child{width:48%}
}

@media (max-width:478px){
  .mm-stats > *{min-width:100%;padding:20px}
  .mm-btnrow .mm-btn{width:100%;text-align:center}
  .mm-quote{padding:20px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  html{scroll-behavior:auto}
  .mm-js .mm-rv{opacity:1;transform:none}
}

/* =========================================================================
   13 · PRODUCT PAGE COMPONENTS
   -------------------------------------------------------------------------
   APPEND THIS BLOCK TO THE END of style.css, after section 12.
   Order matters: the responsive rules at the bottom of this block must
   come after section 12's media queries to override .mm-step borders.

   Everything here is reusable across Doors, Hatches and Specialty. Nothing
   in it is windows-specific — the only per-page work is content.
   ========================================================================= */


/* --- 13.0 tokens added for this page ---------------------------------- */
:root{
  /* Measure your rendered header and set this. Inspect .mm-header,
     read its height, put the number here. The sub-nav and scroll-anchor
     offsets both derive from it. */
  --mm-header-h:57px;
  --mm-subnav-h:46px;

  /* interior pages run slightly tighter than the homepage */
  --mm-section-pad-int:clamp(48px,6.5vw,88px);
}

/* Anchor links must clear the sticky header + sticky sub-nav, or every
   jump lands with the heading hidden underneath them. */
html{scroll-padding-top:calc(var(--mm-header-h) + var(--mm-subnav-h) + 16px)}

.mm-section--int{padding-block:var(--mm-section-pad-int)}


/* --- 13.1 split interior hero ------------------------------------------
   Extends .mm-pagehero. Single-column .mm-pagehero still works for pages
   with no hero image; add --split when there's a media panel.
   ---------------------------------------------------------------------- */
.mm-pagehero--split{padding-block:0}
.mm-pagehero__grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch}
.mm-pagehero__copy{
  display:flex;flex-direction:column;justify-content:center;position:relative;z-index:3;
  padding:clamp(36px,5vw,64px) clamp(30px,4vw,54px) clamp(36px,5vw,64px) var(--mm-gutter);
}
.mm-pagehero--split h1{margin-bottom:18px}
.mm-pagehero--split p{color:var(--mm-dim);max-width:46ch;margin-bottom:26px}
.mm-pagehero__media{
  position:relative;min-height:280px;padding:22px;display:flex;align-items:flex-end;
  background-image:linear-gradient(140deg,#3C4247,#23272B 52%,#181B1E);
  background-size:cover;background-position:center;
}

}
.mm-pagehero__media > .mm-cap{position:relative;z-index:3}

/* breadcrumb as a ruled bar across the top of the hero */
.mm-crumbs--bar{padding:14px 0;border-bottom:1px solid var(--mm-hairline-dk);margin-bottom:0}
.mm-crumbs__here{color:var(--mm-daylight)}


/* --- 13.2 sticky section sub-nav ---------------------------------------
   Every product page gets one. It is the single biggest usability win on a
   page this long, and it doubles as an on-page table of contents for SEO.
   ---------------------------------------------------------------------- */
.mm-subnav{
  position:sticky;top:var(--mm-header-h);z-index:50;
  background:var(--mm-gasket);border-bottom:1px solid var(--mm-hairline-dk);
}
.mm-subnav ul{
  display:flex;gap:0;list-style:none;margin:0;padding:0;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
}
.mm-subnav ul::-webkit-scrollbar{display:none}
.mm-subnav a{
  display:block;padding:14px 20px;white-space:nowrap;text-decoration:none;
  font-family:var(--mm-spec);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mm-mill);border-bottom:2px solid transparent;
  transition:color var(--mm-ease),border-color var(--mm-ease);
}
.mm-subnav a:hover,.mm-subnav a.is-active{color:var(--mm-daylight);border-bottom-color:var(--mm-bronze)}



/* --- 13.3 type card — the page's workhorse -----------------------------
   Identical spec rows on every card is the whole point: a buyer reads down
   a column and compares. Never omit a row on one card and not the others —
   put a dash in it instead.
   ---------------------------------------------------------------------- */
.mm-tcard{
  border:1px solid var(--mm-hairline);background:#fff;overflow:hidden;
  border-radius:var(--mm-r) 0 var(--mm-r) 0;
  display:flex;flex-direction:column;
  transition:border-color var(--mm-ease),transform var(--mm-ease);
}
.mm-tcard:hover{border-color:var(--mm-gasket);transform:translateY(-3px)}
.mm-tcard--feature{grid-column:span 2;border-color:var(--mm-bronze)}
.mm-tcard__media{
  height:180px;flex:0 0 auto;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#CACED0,#9BA1A6);
  background-size:cover;background-position:center;
}
.mm-tcard--feature .mm-tcard__media{height:230px}

.mm-tcard__tag{
  position:absolute;left:15px;bottom:12px;z-index:2;
  font-family:var(--mm-spec);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mm-daylight);
}
.mm-tcard__badge{
  position:absolute;right:14px;top:14px;z-index:2;
  background:var(--mm-bronze);color:#14161A;padding:5px 9px;
  font-family:var(--mm-spec);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
}
.mm-tcard__body{padding:20px;flex:1;display:flex;flex-direction:column}
.mm-tcard__body h3{margin-bottom:9px}
.mm-tcard__body > p{font-size:14px;color:var(--mm-anodize);margin-bottom:15px}
.mm-tcard__go{
  margin-top:14px;text-decoration:none;
  font-family:var(--mm-spec);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mm-bronze);
}
.mm-tcard--feature{grid-column:span 2;border-color:var(--mm-bronze)}
.mm-tcard--feature .mm-tcard__media{height:230px}

.mm-tcard__go:hover{color:var(--mm-gasket)}

/* spec rows inside a card — key left, value right */
.mm-speclist{
  margin:0;border-top:1px dashed var(--mm-hairline);padding-top:13px;
  font-family:var(--mm-spec);font-size:10.5px;letter-spacing:.05em;
  text-transform:uppercase;line-height:1.6;
}
.mm-speclist__row{
  display:flex;flex-direction:row;justify-content:space-between;gap:12px;
  padding:5px 0;border-bottom:1px solid #F0F0EE;
}
.mm-speclist__row:last-child{border-bottom:0}
.mm-speclist__k{color:var(--mm-mill);flex:0 0 auto}
.mm-speclist__v{margin:0;color:var(--mm-gasket);text-align:right}


/* --- 13.4 glazing card -------------------------------------------------- */
.mm-gcard{border:1px solid var(--mm-hairline);background:#fff;overflow:hidden;display:flex;flex-direction:column}
.mm-gcard__media{height:96px;position:relative;background-size:cover;background-position:center}
.mm-gcard__media::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(21,24,27,.8) 1.05px,transparent 1.15px);background-size:7px 7px;
  -webkit-mask-image:linear-gradient(to top,#000,transparent 66%);
          mask-image:linear-gradient(to top,#000,transparent 66%);opacity:.45;
}
/* swatch grounds — set one of these on .mm-gcard__media */
.mm-g-tempered{background-image:linear-gradient(140deg,#D2D6D8,#A2A8AC)}
.mm-g-laminated{background-image:linear-gradient(140deg,#C9D2D0,#8F9C98)}
.mm-g-igu{background-image:linear-gradient(140deg,#D6DBDD,#9AA4A9)}
.mm-g-heated{background-image:linear-gradient(140deg,#D8CDBE,#A08B70)}
.mm-g-frit{background-image:linear-gradient(140deg,#C4C8CA,#7C8286)}
.mm-g-tinted{background-image:linear-gradient(140deg,#C6B79F,#7F6A4E)}
.mm-g-hydro{background-image:linear-gradient(140deg,#CDD4D2,#899491)}
.mm-g-acrylic{background-image:linear-gradient(140deg,#D4D8DA,#959B9F)}
.mm-gcard__body{padding:15px 16px 17px}
.mm-gcard__body h4{margin-bottom:7px}
.mm-gcard__body p{font-size:13px;color:var(--mm-anodize);margin:0}
.mm-gcard__when{
  display:block;margin-top:9px;
  font-family:var(--mm-spec);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mm-bronze);
}


/* --- 13.5 material rows + finish chips ---------------------------------- */
.mm-matrow{
  border-top:1px solid var(--mm-hairline);padding:16px 0;
  display:grid;grid-template-columns:130px 1fr;gap:18px;
}
.mm-matrow__n{
  font-family:var(--mm-display);font-variation-settings:"wdth" 108,"wght" 620;
  font-size:13px;text-transform:uppercase;letter-spacing:.02em;
}
.mm-matrow p{font-size:13.5px;color:var(--mm-anodize);margin:0}

.mm-chips{display:flex;flex-direction:row;gap:10px;flex-wrap:wrap;margin-top:18px}
.mm-chip{width:76px}
.mm-chip__sq{height:64px;border:1px solid var(--mm-hairline);border-radius:var(--mm-r) 0 var(--mm-r) 0}
.mm-chip__l{
  display:block;margin-top:7px;text-align:center;
  font-family:var(--mm-spec);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mm-mill);
}
/* finish grounds */
.mm-f-mill{background:linear-gradient(135deg,#C9CDCF,#A2A8AC)}
.mm-f-anodized{background:linear-gradient(135deg,#A7ADB1,#7C8286)}
.mm-f-hardcoat{background:linear-gradient(135deg,#4A5157,#33383D)}
.mm-f-black{background:linear-gradient(135deg,#22262A,#15181B)}
.mm-f-bronze{background:linear-gradient(135deg,#A98459,#8A6A46)}
.mm-f-white{background:linear-gradient(135deg,#EDEEEB,#CFD2CE)}


/* --- 13.6 small application tile ---------------------------------------
   Denser than .mm-market (homepage). Use .mm-market for three big market
   tiles, .mm-apptile for eight vessel-type tiles.
   ---------------------------------------------------------------------- */
.mm-apptile{
  position:relative;min-height:200px;overflow:hidden;text-decoration:none;
  display:flex;flex-direction:column;justify-content:flex-end;padding:20px;
  color:var(--mm-daylight);border-radius:0 var(--mm-r) 0 var(--mm-r);
  background:linear-gradient(160deg,#454B50,#1B1E21);
  background-size:cover;background-position:center;
}
.mm-apptile:nth-child(2n){background-image:linear-gradient(160deg,#3F4A43,#191D1A)}
.mm-apptile:nth-child(3n){background-image:linear-gradient(160deg,#4A4239,#1E1B18)}
.mm-apptile::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle,#0A0C0E 1.3px,transparent 1.4px);background-size:7px 7px;
  -webkit-mask-image:linear-gradient(to top,#000,transparent 72%);
          mask-image:linear-gradient(to top,#000,transparent 72%);
}
.mm-apptile > *{position:relative;z-index:2}
.mm-apptile h4{margin-bottom:6px;color:var(--mm-daylight);font-size:13px}


/* --- 13.7 light-ground process steps -----------------------------------
   Extends .mm-steps / .mm-step from section 09.3, which are built for dark
   grounds. Add --light when the steps sit on white or paper.
   ---------------------------------------------------------------------- */
.mm-steps--light{border-color:var(--mm-hairline)}
.mm-steps--light .mm-step{padding:24px 22px;border-right-color:var(--mm-hairline)}
.mm-steps--light .mm-step h3,
.mm-steps--light .mm-step h4{color:var(--mm-gasket);margin-bottom:8px}
.mm-steps--light .mm-step p{color:var(--mm-anodize)}


/* --- 13.8 standards grid ------------------------------------------------ */
.mm-stdgrid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0;
  border:1px solid var(--mm-hairline);background:#fff;margin-top:20px;
}
.mm-stdgrid > *{padding:22px 18px;border-right:1px solid var(--mm-hairline);text-align:center}
.mm-stdgrid > *:last-child{border-right:0}
.mm-std__n{
  font-family:var(--mm-display);font-variation-settings:"wdth" 110,"wght" 640;
  font-size:14px;text-transform:uppercase;margin-bottom:6px;
}
.mm-std__d{
  font-family:var(--mm-spec);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mm-mill);
}


/* --- 13.9 FAQ accordion -------------------------------------------------
   Native <details>/<summary>. No JavaScript, keyboard-accessible for free,
   and the answer text is in the DOM for search engines whether open or not.
   ---------------------------------------------------------------------- */
.mm-faq{border-top:1px solid var(--mm-hairline)}
.mm-faq details{border-bottom:1px solid var(--mm-hairline)}
.mm-faq summary{
  list-style:none;cursor:pointer;padding:20px 0;
  display:flex;justify-content:space-between;gap:20px;align-items:center;
  font-family:var(--mm-display);font-variation-settings:"wdth" 108,"wght" 620;
  font-size:15px;text-transform:uppercase;letter-spacing:-.002em;
}
.mm-faq summary::-webkit-details-marker{display:none}
.mm-faq summary::after{content:"+";font-family:var(--mm-spec);color:var(--mm-bronze);font-size:17px;flex:0 0 auto}
.mm-faq details[open] summary::after{content:"–"}
.mm-faq__a{padding:0 0 22px;max-width:70ch;color:var(--mm-anodize);font-size:15px}
.mm-faq__a p:last-child{margin-bottom:0}


/* --- 13.10 quote form on dark ground ------------------------------------ */
.mm-formrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mm-field{margin-bottom:14px}
.mm-field label{
  display:block;margin-bottom:7px;
  font-family:var(--mm-spec);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mm-mill);
}
.mm-field input,.mm-field textarea,.mm-field select{
  width:100%;padding:12px 13px;border-radius:0;
  background:rgba(237,238,235,.05);border:1px solid var(--mm-hairline-dk);
  color:var(--mm-daylight);font-family:var(--mm-body);font-size:14.5px;
}
.mm-field input::placeholder,.mm-field textarea::placeholder{color:#5F686D}
.mm-field textarea{min-height:96px;resize:vertical}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--mm-bronze);outline-offset:3px}

.mm-drop{
  border:1.5px dashed rgba(155,161,166,.45);padding:24px;text-align:center;margin-bottom:18px;
  font-family:var(--mm-spec);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mm-mill);line-height:1.9;
}
.mm-drop strong{display:block;color:var(--mm-daylight);font-weight:500}

.mm-qside{border-left:1px solid var(--mm-hairline-dk);padding-left:clamp(20px,3vw,34px)}
.mm-qside__blk{margin-bottom:26px}
.mm-qside__blk:last-child{margin-bottom:0}
.mm-qside h4{color:var(--mm-daylight);margin-bottom:8px}
.mm-qside p{font-size:14px;color:var(--mm-dim-2);margin:0}
.mm-qside a{color:var(--mm-bronze-lt);text-decoration:none}
.mm-qside a:hover{color:var(--mm-daylight)}

/* bronze-rule callout on a dark ground — .mm-callout is tuned for light */
.mm-callout--dark p{color:var(--mm-dim)}

/* off-centre frit burst, for the quote band */
.mm-frit-burst--offset::before{
  -webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000,transparent 74%);
          mask-image:radial-gradient(ellipse at 70% 40%,#000,transparent 74%);
}

/* --- 13.11 responsive --------------------------------------------------- */
@media (max-width:1080px){
  .mm-tcard--feature{grid-column:span 1}
  .mm-tcard--feature .mm-tcard__media{height:180px}
}

@media (max-width:980px){
  .mm-pagehero__grid{grid-template-columns:1fr}
  .mm-pagehero__copy{padding-right:var(--mm-gutter)}
  .mm-pagehero__media{order:-1;min-height:240px}
  .mm-qside{border-left:0;border-top:1px solid var(--mm-hairline-dk);padding-left:0;padding-top:28px}
}

@media (max-width:760px){
  .mm-formrow{grid-template-columns:1fr}
  .mm-matrow{grid-template-columns:1fr;gap:6px}
  /* overrides section 12's dark-ground border on light steps */
  .mm-steps--light .mm-step{border-right:0;border-bottom:1px solid var(--mm-hairline)}
  .mm-steps--light .mm-step:last-child{border-bottom:0}
  .mm-subnav a{padding:12px 15px}
  html{scroll-padding-top:calc(var(--mm-header-h) + var(--mm-subnav-h) + 8px)}
}

@media (max-width:478px){
  .mm-speclist__row{flex-direction:column;gap:2px}
  .mm-speclist__v{text-align:left}
  .mm-chip{width:64px}
  .mm-chip__sq{height:54px}
}

/* =========================================================================
   14 · DOORS PAGE COMPONENTS
   -------------------------------------------------------------------------
   APPEND THIS BLOCK TO THE END of style.css, after section 13.

   The organising idea of this page: solex green marks everything SUPPLIED
   (fire-rated assemblies from certified partners) as distinct from
   everything FABRICATED in Hialeah. That colour split is a compliance
   boundary rendered as design. Do not use solex decoratively anywhere else
   on the site — the moment it appears on a non-supplied element it stops
   carrying meaning, and the page's central claim gets muddy.
   ========================================================================= */


/* --- 14.0 solex tokens -------------------------------------------------- */
:root{
  --mm-solex-lt:#6E8C7A;      /* hover state */
  --mm-solex-bg:#EDF2EF;      /* supplied-section ground */
  --mm-solex-line:#C8D5CD;    /* borders inside supplied sections */
}


/* --- 14.1 solex variants of existing components ------------------------- */
.mm-eyebrow--solex{color:var(--mm-solex)}

.mm-btn--solex{background:var(--mm-solex);border-color:var(--mm-solex);color:var(--mm-daylight)}
.mm-btn--solex:hover{background:var(--mm-solex-lt);border-color:var(--mm-solex-lt);color:var(--mm-daylight)}

.mm-callout--solex{border-left-color:var(--mm-solex)}
.mm-callout--solex .mm-spec{color:var(--mm-solex)}

/* sub-nav link pointing at the supplied section */
.mm-subnav a.mm-subnav__sup:hover,
.mm-subnav a.mm-subnav__sup.is-active{border-bottom-color:var(--mm-solex-lt)}


/* --- 14.2 tightness selector -------------------------------------------
   The dog marks are a literal count, not decoration — two for spray-tight,
   six for weathertight, twelve for watertight. Keep the counts accurate;
   a buyer who knows doors will read them.
   ---------------------------------------------------------------------- */
.mm-tight{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--mm-hairline);background:#fff}
.mm-tight > *{padding:24px 22px;border-right:1px solid var(--mm-hairline)}
.mm-tight > *:last-child{border-right:0}
.mm-tight h4{margin-bottom:9px;font-size:14px}
.mm-tight p{font-size:13.5px;color:var(--mm-anodize);margin:0 0 12px}
.mm-tight__where{
  display:block;border-top:1px dashed var(--mm-hairline);padding-top:11px;
  font-family:var(--mm-spec);font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mm-mill);
}
.mm-dogs{display:flex;flex-direction:row;gap:5px;flex-wrap:wrap;margin-bottom:16px;max-width:110px}
.mm-dogs > *{width:9px;height:9px;background:var(--mm-bronze);display:block;flex:0 0 auto}


/* --- 14.3 supplied band + supplied section -----------------------------
   The band sits immediately above the section and is not optional. It is
   the sentence that keeps "we supply A-class doors" from reading as
   "we are certified to build A-class doors".
   ---------------------------------------------------------------------- */
.mm-suppliedband{
  background:var(--mm-solex);color:var(--mm-daylight);padding:11px 0;
  font-family:var(--mm-spec);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
}
.mm-suppliedband .mm-wrap{display:flex;flex-direction:row;align-items:center;gap:12px}
.mm-suppliedband__dot{width:8px;height:8px;background:var(--mm-daylight);border-radius:50%;flex:0 0 auto}

.mm-supplied{
  background:var(--mm-solex-bg);
  border-top:2px solid var(--mm-solex);border-bottom:2px solid var(--mm-solex);
  position:relative;
}
/* when the band sits directly above, kill the doubled top rule */
.mm-suppliedband + .mm-supplied{border-top:0}

/* rating card */
.mm-rate{background:#fff;border:1px solid var(--mm-solex-line);padding:20px}
.mm-rate__n{
  font-family:var(--mm-display);font-variation-settings:"wdth" 118,"wght" 750;
  font-size:26px;line-height:1;text-transform:uppercase;color:var(--mm-solex);margin-bottom:10px;
}
.mm-rate p{font-size:13.5px;color:var(--mm-anodize);margin:0 0 12px}
.mm-rate__use{
  display:block;border-top:1px dashed var(--mm-solex-line);padding-top:10px;
  font-family:var(--mm-spec);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mm-solex);
}

/* the "how supply works" flow — a solex-ground variant of .mm-steps */
.mm-steps--solex{border-color:var(--mm-solex-line);background:#fff;margin-top:22px}
.mm-steps--solex .mm-step{padding:22px 20px;border-right-color:var(--mm-solex-line)}
.mm-steps--solex .mm-step__n{color:var(--mm-solex);margin-bottom:13px}
.mm-steps--solex .mm-step h3,
.mm-steps--solex .mm-step h4{color:var(--mm-gasket);margin-bottom:8px;font-size:12.5px}
.mm-steps--solex .mm-step p{color:var(--mm-anodize);font-size:13px}

/* the plain-English disclosure paragraph */
.mm-supstatement{border-left:3px solid var(--mm-solex);padding:10px 0 10px 18px;margin-top:24px}
.mm-supstatement p{font-size:15px;color:var(--mm-anodize);margin:0;max-width:72ch}
.mm-supstatement strong{color:var(--mm-gasket)}


/* --- 14.4 hardware list ------------------------------------------------- */
.mm-hwlist{margin:0;padding:0;list-style:none;border-top:1px solid var(--mm-hairline)}
.mm-hwlist > *{
  border-bottom:1px solid var(--mm-hairline);padding:13px 0;
  display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:baseline;
}
.mm-hwlist__t{
  font-family:var(--mm-spec);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mm-mill);
}
.mm-hwlist__d{font-size:14px;color:var(--mm-anodize)}


/* --- 14.5 glazing-method trio ------------------------------------------- */
.mm-gmethod{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0}
.mm-gmethod__item{border:1px solid var(--mm-hairline);background:#fff}
.mm-gmethod__media{
  height:88px;position:relative;
  background:linear-gradient(140deg,#D2D6D8,#A2A8AC);
  background-size:cover;background-position:center;
}

}
.mm-gmethod__l{
  padding:10px 11px;
  font-family:var(--mm-spec);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mm-gasket);
}


/* --- 14.6 two-block standards statement --------------------------------
   Two blocks, never merged. The left describes what Miami Marine builds,
   the right describes what its partners certify. Merging them into one
   logo row is exactly the misrepresentation this layout prevents.
   ---------------------------------------------------------------------- */
.mm-stdtwo{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
.mm-stdblk{border:1px solid var(--mm-hairline);background:#fff;padding:24px}
.mm-stdblk--solex{border-color:var(--mm-solex-line);background:var(--mm-solex-bg)}
.mm-stdblk__lbl{
  display:block;margin-bottom:14px;
  font-family:var(--mm-spec);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mm-bronze);
}
.mm-stdblk--solex .mm-stdblk__lbl{color:var(--mm-solex)}
.mm-stdblk h4{margin-bottom:12px;font-size:13px}
.mm-stdblk p{font-size:14px;color:var(--mm-anodize);margin:0 0 16px}

.mm-stdtags{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px}
.mm-stdtags > *{
  font-family:var(--mm-spec);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  border:1px solid var(--mm-hairline);background:var(--mm-paper);color:var(--mm-gasket);
  padding:7px 11px;
}
.mm-stdblk--solex .mm-stdtags > *{border-color:var(--mm-solex-line);background:#fff;color:var(--mm-solex)}


/* --- 14.7 additions to existing components ------------------------------ */

/* accent border without the two-column span. The windows page uses
   --feature (bronze border + span 2). Doors wants the bronze border only. */
.mm-tcard--accent{border-color:var(--mm-bronze)}

/* Pushes the spec list to the bottom of every card so rows align across a
   row of cards with different paragraph lengths. NOTE: this also affects
   the Marine Windows page — check it after adding. The alignment is the
   point of the component, so this is a fix rather than a side effect. */
.mm-tcard__body > p{flex:1}

/* denser application tile for pages with 8+ tiles */
.mm-apptile--sm{min-height:190px}

/* grid steps used on this page */
.mm-grid--auto-180{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.mm-grid--auto-200{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.mm-grid--auto-276{grid-template-columns:repeat(auto-fit,minmax(276px,1fr))}


/* --- 14.8 responsive ---------------------------------------------------- */
@media (max-width:1080px){
  .mm-tight{grid-template-columns:repeat(2,1fr)}
  .mm-tight > *:nth-child(2){border-right:0}
  .mm-tight > *:nth-child(1),
  .mm-tight > *:nth-child(2){border-bottom:1px solid var(--mm-hairline)}
}

@media (max-width:980px){
  .mm-stdtwo{grid-template-columns:1fr}
}

@media (max-width:760px){
  .mm-tight{grid-template-columns:1fr}
  .mm-tight > *{border-right:0;border-bottom:1px solid var(--mm-hairline)}
  .mm-tight > *:last-child{border-bottom:0}
  .mm-hwlist > *{grid-template-columns:1fr;gap:5px}
  /* section 12 sets a dark-ground bottom border on .mm-step — restore the
     light line for the solex flow, same as .mm-steps--light does */
  .mm-steps--solex .mm-step{border-right:0;border-bottom:1px solid var(--mm-solex-line)}
  .mm-steps--solex .mm-step:last-child{border-bottom:0}
  .mm-gmethod{grid-template-columns:1fr}
  .mm-suppliedband .mm-wrap{align-items:flex-start}
}

@media (max-width:478px){
  .mm-gmethod{grid-template-columns:repeat(3,1fr);gap:8px}
  .mm-gmethod__media{height:64px}
  .mm-gmethod__l{padding:8px;font-size:9px}
  .mm-rate{padding:16px}
}

/* =========================================================================
   15 · HATCHES + SPECIALTY COMPONENTS
   -------------------------------------------------------------------------
   APPEND TO THE END of style.css, after section 14.
   One block covers both pages — they share the data table, the material
   list and the supplied band.

   Solex rule carries over from Doors: green marks a different fulfilment
   path. On Doors that meant supplied fire assemblies. On Specialty it
   marks the government/contract line. Same principle, same restraint.
   ========================================================================= */


/* --- 15.1 data table (hatch sizes, equipment list) ----------------------
   Horizontal scroll is deliberate. A 9-column spec table crushed into
   380px is unreadable; a scrollable one stays legible and behaves the way
   people expect a spec sheet to behave.
   ---------------------------------------------------------------------- */
.mm-tablewrap{border:1px solid var(--mm-hairline);background:#fff}
.mm-tablescroll{overflow-x:auto}

.mm-datatable{width:100%;border-collapse:collapse;font-family:var(--mm-spec);font-size:11px;min-width:820px}
.mm-datatable--narrow{min-width:680px}
.mm-datatable th{
  background:var(--mm-gasket);color:var(--mm-daylight);
  padding:12px 11px;text-align:left;font-weight:500;white-space:nowrap;
  letter-spacing:.11em;text-transform:uppercase;font-size:9.5px;
}
.mm-datatable td{
  border-bottom:1px solid var(--mm-hairline);padding:12px 11px;
  color:var(--mm-anodize);white-space:nowrap;
}
.mm-datatable--narrow td{padding:13px;white-space:normal}
.mm-datatable--narrow td:first-child{width:34%}
.mm-datatable tbody tr:hover{background:var(--mm-paper)}
.mm-datatable td:first-child{color:var(--mm-gasket);font-weight:500}
.mm-datatable__dl a{color:var(--mm-bronze);text-decoration:none;letter-spacing:.06em}
.mm-datatable__dl a:hover{color:var(--mm-gasket)}

/* filter row above the table */
.mm-filterbar{
  display:flex;flex-direction:row;gap:9px;flex-wrap:wrap;
  padding:16px 18px;border-bottom:1px solid var(--mm-hairline);background:var(--mm-paper);
}
.mm-filterbar button{
  font-family:var(--mm-spec);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--mm-hairline);background:#fff;color:var(--mm-anodize);
  padding:8px 14px;cursor:pointer;border-radius:0;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.mm-filterbar button:hover{border-color:var(--mm-gasket)}
.mm-filterbar button[aria-pressed="true"]{
  background:var(--mm-gasket);color:var(--mm-daylight);border-color:var(--mm-gasket);
}

.mm-tablefoot{padding:20px 18px;border-top:1px solid var(--mm-hairline);background:var(--mm-paper)}


/* --- 15.2 label/description list ----------------------------------------
   Same shape as .mm-hwlist from section 14. --wide gives the wider label
   column the Specialty materials list needs.
   ---------------------------------------------------------------------- */
.mm-hwlist--wide > *{grid-template-columns:170px 1fr;padding:12px 0}


/* --- 15.3 process capability grid ---------------------------------------
   Built on .mm-steps / .mm-steps--light. --rows adds the bottom border
   each cell needs once the grid wraps to more than one row.
   ---------------------------------------------------------------------- */
.mm-steps--rows{background:#fff}
.mm-steps--rows .mm-step{border-bottom:1px solid var(--mm-hairline)}
.mm-proclist{
  margin:0;padding:11px 0 0;list-style:none;
  border-top:1px dashed var(--mm-hairline);
  font-family:var(--mm-spec);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mm-mill);line-height:1.9;
}


/* --- 15.4 case study ----------------------------------------------------
   Problem / What we made / Outcome. The three-column footer is the
   component: a case study without those three parts is just a photo.
   ---------------------------------------------------------------------- */
.mm-cases{display:grid;gap:var(--mm-gap)}
.mm-case{
  display:grid;grid-template-columns:280px 1fr;overflow:hidden;
  border:1px solid var(--mm-hairline);background:#fff;
  border-radius:var(--mm-r) 0 var(--mm-r) 0;
}
.mm-case__media{
  position:relative;min-height:220px;padding:16px;
  display:flex;align-items:flex-end;
  border-right:1px solid var(--mm-hairline);
  background:linear-gradient(135deg,#C6CACC,#8F969B);
  background-size:cover;background-position:center;
}
.mm-case__media::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(21,24,27,.8) 1.15px,transparent 1.25px);background-size:7px 7px;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 62%);
          mask-image:linear-gradient(to bottom,#000,transparent 62%);opacity:.45;
}
.mm-case__media > .mm-cap{position:relative;z-index:2;font-size:9.5px}
.mm-case__body{padding:24px}
.mm-case__body h3{margin-bottom:10px}
.mm-case__pcs{
  border-top:1px dashed var(--mm-hairline);margin-top:16px;padding-top:16px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
.mm-case__l{
  display:block;margin-bottom:7px;
  font-family:var(--mm-spec);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mm-bronze);
}
.mm-case__pcs p{font-size:13.5px;color:var(--mm-anodize);margin:0}


/* --- 15.5 government / contract block -----------------------------------
   Reuses .mm-suppliedband and .mm-supplied from section 14. Only the
   cards and the facts strip are new.
   NOTE: named .mm-govcard, not .mm-gcard — .mm-gcard is already the
   glazing card on the Windows page.
   ---------------------------------------------------------------------- */
.mm-govcard{background:#fff;border:1px solid var(--mm-solex-line);padding:22px}
.mm-govcard h4{margin-bottom:9px;font-size:13px;color:var(--mm-solex)}
.mm-govcard p{font-size:13.5px;color:var(--mm-anodize);margin:0}

.mm-govfacts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  border:1px solid var(--mm-solex-line);background:#fff;margin-top:20px;
}
.mm-govfacts > *{padding:18px 20px;border-right:1px solid var(--mm-solex-line)}
.mm-govfacts > *:last-child{border-right:0}
.mm-govfacts__k{
  display:block;margin-bottom:6px;
  font-family:var(--mm-spec);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mm-solex);
}
.mm-govfacts__v{font-family:var(--mm-spec);font-size:13px;color:var(--mm-gasket)}


/* --- 15.6 scope in / scope out ------------------------------------------
   The dashed border on the "don't" block does real work — it reads as
   provisional and open rather than as a second list of claims.
   ---------------------------------------------------------------------- */
.mm-scopeblk{border:1px solid var(--mm-hairline);background:#fff;padding:26px}
.mm-scopeblk--no{border-style:dashed;background:transparent}
.mm-scopeblk__lbl{
  display:block;margin-bottom:16px;
  font-family:var(--mm-spec);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mm-bronze);
}
.mm-scopeblk--no .mm-scopeblk__lbl{color:var(--mm-mill)}
.mm-scopeblk ul{margin:0;padding:0;list-style:none}
.mm-scopeblk li{
  padding:11px 0;border-top:1px solid var(--mm-hairline);
  display:flex;gap:12px;font-size:14.5px;color:var(--mm-anodize);
}
.mm-scopeblk__m{font-family:var(--mm-spec);color:var(--mm-bronze);flex:0 0 auto}
.mm-scopeblk--no .mm-scopeblk__m{color:var(--mm-mill)}


/* --- 15.7 additions to existing components ------------------------------ */

/* smaller card media for cards with no spec list */
.mm-tcard__media--sm{height:156px}

/* plate heights used on these two pages */
.mm-plate--reg{min-height:300px}
.mm-plate--sm{min-height:170px}

/* extra finish chip */
.mm-f-nonskid{background:linear-gradient(135deg,#8E9498,#5E6469)}

/* grid steps */
.mm-grid--auto-230{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.mm-grid--auto-268{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}


/* --- 15.8 responsive ---------------------------------------------------- */
@media (max-width:980px){
  .mm-case{grid-template-columns:1fr}
  .mm-case__media{border-right:0;border-bottom:1px solid var(--mm-hairline);min-height:170px}
}

@media (max-width:760px){
  .mm-case__pcs{grid-template-columns:1fr;gap:14px}
  .mm-hwlist--wide > *{grid-template-columns:1fr;gap:5px}
  .mm-govfacts > *{border-right:0;border-bottom:1px solid var(--mm-solex-line)}
  .mm-govfacts > *:last-child{border-bottom:0}
  /* section 12 sets a dark border on .mm-step — restore the light one */
  .mm-steps--rows .mm-step{border-right:0;border-bottom:1px solid var(--mm-hairline)}
  .mm-filterbar{padding:12px 14px;gap:7px}
  .mm-filterbar button{padding:7px 11px}
}

/* =========================================================================
   16 · ABOUT + CONTACT COMPONENTS
   -------------------------------------------------------------------------
   APPEND TO THE END of style.css, after section 15.

   These are the first two non-product pages, and they lean harder on
   reuse than any page so far: the principles grid is .mm-steps, the
   facility stats are .mm-stats--light, the router cards are .mm-tcard,
   the shipping lists are .mm-hwlist, the next-steps grid is
   .mm-steps--light. Only the genuinely new shapes are below.
   ========================================================================= */


/* --- 16.1 full-width hero -----------------------------------------------
   A third hero variant. Windows/Doors/Hatches use --split (copy beside
   media). About uses --full: copy in the wrap, then a full-bleed media
   band underneath. Contact uses --full with no band at all.
   The different shape is the point — these pages aren't products.
   ---------------------------------------------------------------------- */
.mm-pagehero--full{padding-block:0}
.mm-pagehero__copyblock{padding:clamp(44px,6vw,84px) 0 clamp(34px,4vw,52px)}
.mm-pagehero--full h1{margin-bottom:22px;max-width:16ch}
.mm-pagehero--full p{color:var(--mm-dim);max-width:56ch;margin:0}

/* tighter copy block for Contact, where the direct strip follows */
.mm-pagehero__copyblock--sm{padding:clamp(40px,5vw,72px) 0 clamp(28px,3.5vw,40px)}
.mm-pagehero__copyblock--sm h1{margin-bottom:18px}
.mm-pagehero__copyblock--sm p{max-width:52ch}

.mm-pagehero__band{
  position:relative;height:clamp(280px,42vw,460px);
  display:flex;align-items:flex-end;padding:26px;
  background-image:linear-gradient(145deg,#3C4247,#23272B 50%,#181B1E);
  background-size:cover;background-position:center;
}

}
.mm-pagehero__band > .mm-cap{position:relative;z-index:2}


/* --- 16.2 pull quote ----------------------------------------------------
   Display type at body scale, bronze rule. One per page maximum — it
   only reads as emphasis while it stays rare.
   ---------------------------------------------------------------------- */
.mm-pull{border-left:3px solid var(--mm-bronze);padding:8px 0 8px 20px;margin-top:26px}
.mm-pull p{
  font-family:var(--mm-display);font-variation-settings:"wdth" 108,"wght" 620;
  font-size:clamp(17px,2vw,23px);line-height:1.18;
  text-transform:uppercase;letter-spacing:-.008em;
  color:var(--mm-gasket);margin:0;max-width:24ch;
}


/* --- 16.3 timeline ------------------------------------------------------
   Year column, hairline spine, bronze node. The spine and nodes are
   pure CSS — no extra markup per event beyond year and content.
   ---------------------------------------------------------------------- */
.mm-tl{position:relative;margin-top:8px}
.mm-tl::before{
  content:"";position:absolute;left:96px;top:14px;bottom:14px;
  width:1px;background:var(--mm-hairline);
}
.mm-tl__ev{
  position:relative;display:grid;grid-template-columns:96px 1fr;
  gap:30px;padding:18px 0;
}
.mm-tl__ev::after{
  content:"";position:absolute;left:92px;top:24px;
  width:9px;height:9px;border-radius:50%;background:var(--mm-bronze);
}
.mm-tl__yr{
  font-family:var(--mm-spec);font-size:13px;letter-spacing:.06em;
  color:var(--mm-gasket);text-align:right;padding-top:2px;
}
.mm-tl__ct h4{margin-bottom:7px;font-size:14px}
.mm-tl__ct p{font-size:14.5px;color:var(--mm-anodize);margin:0;max-width:58ch}


/* --- 16.4 person card ---------------------------------------------------
   Used on About (bio) and Contact (direct lines). Same card, two tails.
   ---------------------------------------------------------------------- */
.mm-person{
  border:1px solid var(--mm-hairline);background:#fff;overflow:hidden;
  border-radius:var(--mm-r) 0 var(--mm-r) 0;
}
.mm-person__media{
  height:250px;position:relative;
  background:linear-gradient(150deg,#CACED0,#8F969B);
  background-size:cover;background-position:center;
}
.mm-person__media--sm{height:180px}
.mm-person__media::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(21,24,27,.82) 1.15px,transparent 1.25px);background-size:7px 7px;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 58%);
          mask-image:linear-gradient(to bottom,#000,transparent 58%);opacity:.45;
}
.mm-person__cap{
  position:absolute;left:14px;bottom:12px;z-index:2;
  font-family:var(--mm-spec);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mm-gasket);
}
.mm-person__body{padding:18px}
.mm-person__body h3{margin-bottom:6px}
.mm-person__role{
  display:block;margin-bottom:11px;
  font-family:var(--mm-spec);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mm-bronze);
}
.mm-person__body p{font-size:13.5px;color:var(--mm-anodize);margin:0}
/* Contact variant: direct email + line instead of a bio */
.mm-person__lines{
  border-top:1px dashed var(--mm-hairline);padding-top:12px;
  font-family:var(--mm-spec);font-size:11px;letter-spacing:.03em;line-height:1.9;
}
.mm-person__lines a{display:block;text-decoration:none;color:var(--mm-anodize);word-break:break-word}
.mm-person__lines a:hover{color:var(--mm-bronze)}


/* --- 16.5 careers / announcement band ----------------------------------- */
.mm-band{background:#fff;border-top:1px solid var(--mm-hairline);border-bottom:1px solid var(--mm-hairline)}
.mm-band .mm-wrap{
  display:flex;flex-direction:row;justify-content:space-between;align-items:center;
  gap:26px;flex-wrap:wrap;
  padding-block:clamp(30px,4vw,44px);
}
.mm-band h3{margin-bottom:8px}
.mm-band p{font-size:14.5px;color:var(--mm-anodize);margin:0;max-width:52ch}


/* --- 16.6 direct contact strip (Contact hero) ---------------------------
   Phone and email at display scale, on the dark ground, above the fold.
   The whole argument of the page is "someone answers" — so the number
   is typography, not a line of body copy.
   ---------------------------------------------------------------------- */
.mm-direct{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  border:1px solid var(--mm-hairline-dk);
  margin-bottom:clamp(34px,5vw,60px);
}
.mm-direct > *{padding:26px 24px;border-right:1px solid var(--mm-hairline-dk)}
.mm-direct > *:last-child{border-right:0}
.mm-direct__k{
  display:block;margin-bottom:12px;
  font-family:var(--mm-spec);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mm-mill);
}
.mm-direct__v{
  display:block;margin-bottom:8px;text-decoration:none;word-break:break-word;
  font-family:var(--mm-display);font-variation-settings:"wdth" 112,"wght" 650;
  font-size:clamp(16px,1.9vw,21px);letter-spacing:-.01em;
  text-transform:uppercase;color:var(--mm-daylight);
}
a.mm-direct__v:hover{color:var(--mm-bronze-lt)}
.mm-direct__sub{font-size:13.5px;color:var(--mm-dim-2);margin:0}


/* --- 16.7 routing row ---------------------------------------------------
   Numbered rail, body, action. Sending people to the right form beats
   a single catch-all inbox, so this gets prominence over the form.
   ---------------------------------------------------------------------- */
.mm-routes{display:grid;gap:14px}
.mm-route{
  display:grid;grid-template-columns:64px 1fr auto;align-items:center;
  border:1px solid var(--mm-hairline);background:#fff;
  transition:border-color var(--mm-ease);
}
.mm-route:hover{border-color:var(--mm-gasket)}
.mm-route__n{
  align-self:stretch;display:flex;align-items:center;justify-content:center;
  border-right:1px solid var(--mm-hairline);background:var(--mm-paper);
  font-family:var(--mm-spec);font-size:11px;letter-spacing:.1em;color:var(--mm-bronze);
}
.mm-route__b{padding:22px 24px}
.mm-route__b h3{margin-bottom:7px}
.mm-route__b p{font-size:14px;color:var(--mm-anodize);margin:0;max-width:62ch}
.mm-route__a{padding:22px 24px 22px 0}

/* pill links to the product quote forms */
.mm-prodlinks{display:flex;flex-direction:row;gap:8px;flex-wrap:wrap;margin-top:12px}
.mm-prodlinks a{
  font-family:var(--mm-spec);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;border:1px solid var(--mm-hairline);background:var(--mm-paper);
  color:var(--mm-anodize);padding:8px 12px;
  transition:border-color .15s ease,color .15s ease;
}
.mm-prodlinks a:hover{border-color:var(--mm-gasket);color:var(--mm-gasket)}
/* on dark grounds */
.mm-prodlinks--dark a{border-color:var(--mm-hairline-dk);background:transparent;color:var(--mm-mill)}
.mm-prodlinks--dark a:hover{border-color:var(--mm-bronze);color:var(--mm-bronze-lt)}


/* --- 16.8 location block (address + map) -------------------------------- */
.mm-loc{
  display:grid;grid-template-columns:.95fr 1.05fr;align-items:stretch;
  border:1px solid var(--mm-hairline);background:#fff;
}
.mm-loc__b{padding:clamp(26px,3.5vw,42px)}
.mm-loc__b h4{margin-bottom:8px}
.mm-loc__b p{font-size:14px;color:var(--mm-anodize)}
.mm-addr{
  font-family:var(--mm-spec);font-size:14px;line-height:2;
  color:var(--mm-gasket);margin-bottom:22px;
}
.mm-map{
  position:relative;min-height:340px;padding:20px;
  display:flex;align-items:flex-end;
  border-left:1px solid var(--mm-hairline);
  background:linear-gradient(150deg,#CACED0,#7E858A);
  background-size:cover;background-position:center;
}
.mm-map::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(21,24,27,.8) 1.15px,transparent 1.25px);background-size:7px 7px;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 60%);
          mask-image:linear-gradient(to bottom,#000,transparent 60%);opacity:.4;
}
.mm-map > .mm-cap{position:relative;z-index:2}
/* once a real map iframe goes in, it fills the cell */
.mm-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}


/* --- 16.9 shipping box --------------------------------------------------
   Dashed border reads as "this is a physical address for a physical
   thing" rather than as another content panel.
   ---------------------------------------------------------------------- */
.mm-shipbox{border:1.5px dashed var(--mm-mill);background:var(--mm-paper);padding:26px}
.mm-shipbox .mm-spec{display:block;margin-bottom:14px;color:var(--mm-bronze)}
.mm-shipbox .mm-addr{font-size:13.5px}
.mm-shipbox .mm-hwlist{border-top:1px solid var(--mm-hairline)}


/* --- 16.10 registration identifiers -------------------------------------
   Solex again, and for the same reason it marks the government line on
   Specialty: this block speaks to a different reader — a contracting
   officer verifying an entity before award, not a buyer.
   ---------------------------------------------------------------------- */
.mm-ids{border:2px solid var(--mm-solex);background:var(--mm-solex-bg)}
.mm-ids__band{
  display:flex;flex-direction:row;align-items:center;gap:12px;
  background:var(--mm-solex);color:var(--mm-daylight);
  padding:11px clamp(20px,3vw,26px);
  font-family:var(--mm-spec);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
}
.mm-ids__dot{width:8px;height:8px;border-radius:50%;background:var(--mm-daylight);flex:0 0 auto}
.mm-ids__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.mm-ids__grid > *{
  padding:22px clamp(20px,3vw,26px);
  border-right:1px solid var(--mm-solex-line);
  border-bottom:1px solid var(--mm-solex-line);
}
.mm-ids__k{
  display:block;margin-bottom:8px;
  font-family:var(--mm-spec);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mm-solex);
}
.mm-ids__v{font-family:var(--mm-spec);font-size:15px;letter-spacing:.03em;color:var(--mm-gasket)}
.mm-ids__foot{padding:20px clamp(20px,3vw,26px)}
.mm-ids__foot p{font-size:13.5px;color:var(--mm-anodize);margin:0}


/* --- 16.11 sidebar redirect panel (on dark) ----------------------------- */
.mm-redirect{border:1px solid var(--mm-hairline-dk);padding:24px}
.mm-redirect h4{color:var(--mm-daylight);margin-bottom:10px}
.mm-redirect p{font-size:14px;color:var(--mm-dim-2);margin:0 0 16px}


/* --- 16.12 additions to existing components ----------------------------- */
.mm-split--wide-l{grid-template-columns:1.2fr .8fr}
.mm-grid--auto-220{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
/* smaller card media for the four-up product router */
.mm-tcard__media--xs{height:120px}


/* --- 16.13 responsive --------------------------------------------------- */
@media (max-width:980px){
  .mm-loc{grid-template-columns:1fr}
  .mm-map{border-left:0;border-top:1px solid var(--mm-hairline);min-height:260px}
  .mm-split--wide-l{grid-template-columns:1fr}
}

@media (max-width:760px){
  .mm-tl::before{left:62px}
  .mm-tl__ev{grid-template-columns:62px 1fr;gap:18px}
  .mm-tl__ev::after{left:58px}

  .mm-route{grid-template-columns:1fr}
  .mm-route__n{
    border-right:0;border-bottom:1px solid var(--mm-hairline);
    justify-content:flex-start;padding:10px 24px;
  }
  .mm-route__a{padding:0 24px 22px}

  .mm-direct > *{border-right:0;border-bottom:1px solid var(--mm-hairline-dk)}
  .mm-direct > *:last-child{border-bottom:0}

  .mm-band .mm-wrap{align-items:flex-start}
}