/* másLabor landing pages, generated by build.py -- DO NOT EDIT BY HAND.
   Source: builds/maslabor-staging-2026-07-20/theme/style.css
   Every rule is scoped under .mllp so nothing here can reach Astra's header,
   Elementor, or any other page. This file is enqueued ONLY on the two
   landing pages. */
@font-face{font-family:'mllpInter';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/*
Theme Name: masLabor
Description: Website theme for masLabor.
Version: 1.0.0
*/

/* ================= TOKENS ================= */
.mllp{
  --red:#EB0029; --red-dk:#C40022; --red-soft:#fdecef;
  --ink:#14161a; --charcoal:#22252b; --slate:#4a4f57; --muted:#7b8089;
  --line:#e7e6e2; --bg:#ffffff; --bg-alt:#f7f5f1; --bg-dark:#111317;
  --font:'mllpInter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --wrap:1200px; --header-h:78px; --radius:12px;
  --shadow:0 10px 30px rgba(20,22,26,.08); --shadow-lg:0 24px 60px rgba(20,22,26,.14);
  --t:.28s cubic-bezier(.4,0,.2,1);
}
/* ================= RESET ================= */
.mllp *,
.mllp *::before,
.mllp *::after{box-sizing:border-box;margin:0;padding:0}
/* scroll-behavior:smooth is deliberately NOT set here.

   It was, and it silently broke every in-page anchor on the site: "See Industries"
   in the hero, About > Leadership / Advocacy / Locations in the nav, and the
   case-study deep links. The URL hash updated and the page never moved. Verified
   2026-08-10 by toggling only this property: with it on, a real click left scrollY
   at 0; with it off, the same click landed at 2017 with the target at the top.
   Chrome abandons a root smooth-scroll when layout shifts under it, and this page
   is 10,800px of lazy-loaded imagery, so it lost the race essentially every time.

   The smoothing now lives in main.js, which scrolls the element itself. That also
   lets it offset the sticky header, which the CSS version never did: targets used
   to land underneath it. Keep scroll-margin-top below in sync with --header-h. */
.mllp{overflow-x:hidden}
.mllp [id]{scroll-margin-top:calc(var(--header-h) + 18px)}
.mllp{font-family:var(--font);color:var(--ink);line-height:1.62;background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.mllp img{max-width:100%;height:auto;display:block}
.mllp a{color:inherit;text-decoration:none}
.mllp ul{list-style:none}
.mllp h1,
.mllp h2,
.mllp h3,
.mllp h4{line-height:1.14;letter-spacing:-.02em;font-weight:800;color:var(--ink)}
.mllp .container{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.mllp .container-narrow{max-width:820px}
/* ================= BUTTONS ================= */
.mllp .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:.95rem;
  padding:14px 30px;border:2px solid transparent;border-radius:8px;cursor:pointer;transition:all var(--t);white-space:nowrap}
.mllp .btn .mdi{font-size:1.1em}
.mllp .btn-sm{padding:11px 22px;font-size:.85rem}
.mllp .btn-lg{padding:17px 40px;font-size:1rem}
.mllp .btn-block{width:100%}
.mllp .btn-primary{background:var(--red);color:#fff;border-color:var(--red)}
.mllp .btn-primary:hover{background:var(--red-dk);border-color:var(--red-dk);transform:translateY(-2px);box-shadow:0 10px 26px rgba(235,0,41,.32)}
.mllp .btn-white{background:#fff;color:var(--red);border-color:#fff}
.mllp .btn-white:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.2)}
.mllp .btn-outline{background:transparent;color:var(--ink);border-color:var(--line)}
.mllp .btn-outline:hover{border-color:var(--red);color:var(--red)}
.mllp .section-cta{display:flex;justify-content:center;margin-top:40px}
.mllp .btn-outline-light{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.55)}
.mllp .btn-outline-light:hover{background:#fff;color:var(--ink);border-color:#fff}
/* ================= SECTION UTILITIES ================= */
.mllp .section{padding:82px 0}
.mllp .section-alt{background:var(--bg-alt)}
.mllp .section-label{display:block;font-size:.82rem;font-weight:700;letter-spacing:.01em;color:var(--red);margin-bottom:14px}
/* Labels are no longer uppercased, so this is now just a guard against any future
   text-transform on an ancestor mangling the brand name. */
.mllp .brand{text-transform:none}
.mllp .section-label-light{color:#ff9aa9}
.mllp .section-header{max-width:760px;margin:0 auto 46px;text-align:center}
.mllp .section-header h2{font-size:2.35rem;margin-bottom:16px}
.mllp .section-desc{font-size:1.08rem;color:var(--slate);line-height:1.7}
/* ================= TOP BAR ================= */
.mllp .top-bar{background:var(--ink);color:#cfd2d7;font-size:.82rem}
.mllp .top-bar-inner{max-width:var(--wrap);margin:0 auto;padding:9px 28px;display:flex;align-items:center;justify-content:flex-end;gap:16px}
.mllp .top-bar-item{color:#cfd2d7;display:inline-flex;align-items:center;gap:6px}
.mllp .top-bar-item .mdi{color:var(--red);font-size:1rem}
.mllp .top-bar-right{display:flex;align-items:center;gap:22px}
.mllp .top-bar-social{display:flex;gap:12px}
.mllp .top-bar-social a:hover{color:#fff}
.mllp .top-bar-social .mdi{font-size:1.05rem}
/* ================= HEADER ================= */
.mllp .site-header{position:sticky;top:0;z-index:900;background:#fff;border-bottom:1px solid var(--line);transition:box-shadow var(--t)}
.mllp .site-header.scrolled{box-shadow:0 6px 24px rgba(20,22,26,.08)}
.mllp .header-container{max-width:1300px;margin:0 auto;padding:0 28px;height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:24px}
.mllp .logo img{height:38px;width:auto;max-width:none}
.mllp .main-nav{margin-left:auto}
.mllp .nav-links{display:flex;align-items:center;gap:6px}
.mllp .nav-top{display:inline-flex;align-items:center;gap:4px;font-weight:600;font-size:.93rem;color:var(--ink);padding:10px 14px;border-radius:7px;transition:color var(--t),background var(--t)}
.mllp .nav-top .mdi{font-size:1rem;color:var(--muted);transition:transform var(--t)}
.mllp .nav-links>li{position:relative}
.mllp .nav-links>li:hover .nav-top{color:var(--red)}
.mllp .nav-links>li:hover .nav-top .mdi{transform:rotate(180deg);color:var(--red)}
.mllp .header-actions{margin-left:6px}
/* Mega dropdown */
.mllp .mega{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(8px);
  background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);
  padding:12px;min-width:520px;display:grid;grid-template-columns:1fr 1fr;gap:4px;
  opacity:0;visibility:hidden;transition:all var(--t);z-index:950}
.mllp .mega-sm{min-width:280px;grid-template-columns:1fr}
.mllp .has-mega:hover .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mllp .mega a,
.mllp .mega-off{display:flex;flex-direction:column;padding:11px 14px;border-radius:9px;transition:background var(--t)}
.mllp .mega a span,
.mllp .mega-off span{font-weight:600;font-size:.92rem;color:var(--ink)}
.mllp .mega a small,
.mllp .mega-off small{color:var(--muted);font-size:.78rem;margin-top:2px}
.mllp .mega a:hover{background:var(--bg-alt)}
.mllp .mega a:hover span{color:var(--red)}
.mllp .mega-flag{background:var(--red-soft)}
.mllp .mega-off{cursor:default}
.mllp .m-off{display:block;padding:9px 0;color:var(--slate);font-weight:500;cursor:default}
.mllp .mega-flag span{color:var(--red)}
/* Mobile toggle + menu */
.mllp .mobile-menu-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.mllp .mobile-menu-toggle span{display:block;width:26px;height:2.5px;background:var(--ink);border-radius:2px;transition:var(--t)}
.mllp .mobile-menu-toggle.active span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.mllp .mobile-menu-toggle.active span:nth-child(2){opacity:0}
.mllp .mobile-menu-toggle.active span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.mllp .mobile-menu{position:fixed;inset:calc(var(--header-h)) 0 0 0;background:#fff;z-index:880;transform:translateX(100%);transition:transform var(--t);overflow-y:auto;padding:24px 28px 48px}
.mllp .mobile-menu.open{transform:translateX(0)}
.mllp .m-group{border-bottom:1px solid var(--line)}
.mllp .m-acc{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:0;padding:16px 2px;font-size:1.05rem;font-weight:700;color:var(--ink);cursor:pointer}
.mllp .m-acc .mdi{color:var(--red);transition:transform var(--t)}
.mllp .m-acc.open .mdi{transform:rotate(45deg)}
.mllp .m-panel{display:none;padding:0 2px 14px}
.mllp .m-panel.open{display:block}
.mllp .m-panel a{display:block;padding:9px 0;color:var(--slate);font-weight:500}
.mllp .m-contact{display:block;padding:16px 2px;font-size:1.05rem;font-weight:700;border-bottom:1px solid var(--line)}
.mllp .mobile-menu .btn{margin-top:22px}
/* ================= HERO ================= */
.mllp .hero{position:relative;min-height:clamp(640px,94vh,940px);display:flex;align-items:center;
  color:#fff;overflow:hidden}
.mllp .hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.04)}
/* Hero slideshow: 5 slides x 5s, fade cross-over, Ken Burns zoom in. Matches the live site. */
.mllp .hero-slideshow{position:absolute;inset:0;overflow:hidden}
/* duration is set inline per slide count; the keyframe percentages below are tuned
   for a 3-slide cycle (each frame holds ~5s then crossfades) */
.mllp .hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;
  animation:heroSlide 15s linear infinite}
@keyframes heroSlide{
  0%{opacity:0;transform:scale(1)}
  3%{opacity:1}
  30%{opacity:1;transform:scale(1.10)}
  36%{opacity:0;transform:scale(1.10)}
  100%{opacity:0;transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){
.mllp .hero-slide{animation:none;opacity:0}
.mllp .hero-slide:first-child{opacity:1}
}
.mllp .hero-scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(17,19,23,.92) 0%,rgba(17,19,23,.72) 42%,rgba(17,19,23,.34) 100%)}
/* Full container width so hero copy lines up with every other section's left edge;
   the 820px cap goes on the children, not the block, or it centers itself.

   flex-grow is load-bearing. .hero is display:flex, so this container was a flex item
   at the default flex:0 1 auto and shrink-wrapped to its longest line (926px, not the
   1200px max-width). margin:0 auto then centred THAT box, which put the hero copy
   ~137px right of every other section's left edge, and moved it whenever the headline
   copy changed length. Growing it to the full track is what actually delivers the
   alignment the line above always claimed. */
.mllp .hero-inner{position:relative;z-index:2;flex:1 1 auto;width:100%}
.mllp .hero-inner > *{max-width:820px}
.mllp .hero-eyebrow{display:inline-block;font-size:.82rem;font-weight:600;letter-spacing:.01em;color:#fff;background:var(--red);padding:7px 14px;border-radius:5px;margin-bottom:22px}
/* The 820px cap on .hero-inner children is what left-aligns the hero to the container
   edge. It is 40px too narrow for the h1 alone: "America's Workforce Partner" measures
   ~857px at the top of the clamp, so it wrapped and stranded "Partner" on its own line
   above the authored <br>. The h1 gets its own slightly wider cap so its written line
   break is the one that renders. Re-measure if the headline copy ever changes. */
.mllp .hero h1{font-size:clamp(2.4rem,5vw,3.9rem);color:#fff;margin-bottom:20px;max-width:900px}
.mllp .hero-sub{font-size:1.15rem;line-height:1.65;color:rgba(255,255,255,.9);max-width:640px;margin-bottom:32px}
.mllp .hero-buttons{display:flex;gap:14px;flex-wrap:wrap}
/* ================= STAT BAR ================= */
/* A child of .hero pinned to its bottom edge, not a sibling pulled up by a negative
   margin: the margin approach left part of the panel hanging over the white section
   below, where the translucency washed the labels out. */
/* HIDDEN 2026-08-03 at Tristan's request. Markup and styles kept so it can come
   back by deleting the display:none. */
.mllp .statbar{display:none;position:absolute;left:0;right:0;bottom:0;z-index:5;
  background:rgba(10,11,13,.55);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid rgba(255,255,255,.14)}
.mllp .statbar::after{content:"";position:absolute;left:0;top:-1px;width:34%;height:2px;background:var(--red)}
.mllp .statbar-grid{display:grid;grid-template-columns:repeat(3,1fr);position:relative;z-index:2}
.mllp .stat{padding:44px 44px 42px;position:relative}
/* Hairline that fades out at both ends instead of a hard rule to the edges. */
.mllp .stat + .stat::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.16) 22%,rgba(255,255,255,.16) 78%,transparent)}
.mllp .stat-num{display:block;font-size:clamp(2.7rem,4.4vw,3.6rem);font-weight:800;color:#fff;
  letter-spacing:-.045em;line-height:.95;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff 30%,#c9ccd2 100%);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent}
.mllp .stat-label{display:block;margin-top:14px;color:#8d939c;font-size:.9rem;letter-spacing:.01em;line-height:1.45;max-width:190px}
@media (max-width:1040px){
.mllp .stat{padding:42px 30px 40px}
}
/* ================= PILLARS ================= */
/* Count-aware: three of the four .pillars grids on the site hold 3 cards, and a fixed
   4-column track left an empty column that read as a missing card. */
.mllp .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (min-width:901px){
.mllp .pillars:has(> :nth-child(4)){grid-template-columns:repeat(4,1fr)}
}
.mllp .pillar{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px 26px;transition:transform var(--t),box-shadow var(--t)}
.mllp .pillar:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.mllp .pillar .mdi{font-size:2rem;color:var(--red);margin-bottom:16px;display:block}
.mllp .pillar h3{font-size:1.18rem;margin-bottom:9px}
.mllp .pillar p{color:var(--slate);font-size:.96rem}
/* ================= INDUSTRIES ================= */
/* Flex, not grid: the vertical count is odd (14) and a grid leaves the final row
   jammed left against an empty cell. Julia: "messy and unbalanced, especially look
   at spacing under Industries." Centring the wrap fixes exactly that. */
.mllp .ind-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
.mllp .ind-grid>.ind-card{flex:0 1 calc(33.333% - 15px);min-width:280px}
.mllp .ind-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.mllp .ind-body{padding:30px 28px;display:flex;flex-direction:column;flex:1}
/* Photo header on the two flagship verticals: gives the grid a focal point instead of
   fourteen identical icon tiles. */
/* 240px, not 186px. At 380px wide a 186px band is a 2:1 letterbox, and centre-cropping
   any photo containing a person into it cuts the head off. The taller band plus the
   per-slug focal point in ml_card_focus() is what keeps subjects whole. */
.mllp .ind-photo{display:block;height:240px;background-size:cover;background-position:center;
  transition:transform .7s cubic-bezier(.2,.6,.2,1)}
.mllp .ind-card:hover .ind-photo{transform:scale(1.06)}
.mllp .ind-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:transparent}
.mllp .ind-card .mdi{font-size:2.1rem;color:var(--red);margin-bottom:16px}
/* Icon tiles (no accurate photo yet) match the height of the photo cards next to them so
   the grid does not go ragged. */
.mllp .ind-body-noimg{padding-top:34px}
.mllp .ind-body-noimg .mdi{font-size:2.1rem;color:var(--red);margin-bottom:16px;display:block}
.mllp .ind-card h3{font-size:1.25rem;margin-bottom:10px}
.mllp .ind-card p{color:var(--slate);font-size:.95rem;flex:1}
.mllp .ind-link{margin-top:18px;font-weight:600;color:var(--red);font-size:.9rem;display:inline-flex;align-items:center;gap:6px}
.mllp .ind-link .mdi{font-size:1rem;color:var(--red);margin:0;transition:transform var(--t)}
.mllp .ind-card:hover .ind-link .mdi{transform:translateX(4px)}
.mllp .ind-card-feat{border-top:0;grid-column:span 1}
.mllp .ind-card-feat .ind-photo{position:relative}
.mllp .ind-card-feat .ind-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(12,13,16,.5) 100%)}
.mllp .ind-flag{position:absolute;top:16px;right:16px;background:var(--red-soft);color:var(--red);font-size:.74rem;font-weight:700;letter-spacing:.01em;padding:5px 10px;border-radius:20px}
/* ================= WHY ================= */
.mllp .why-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:stretch}
.mllp .why-media{position:relative;min-height:420px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg)}
.mllp .why-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}
.mllp .why-copy h2{font-size:2.15rem;margin-bottom:18px}
.mllp .why-copy>p{color:var(--slate);font-size:1.05rem;margin-bottom:26px}
.mllp .why-list{margin-bottom:30px;display:grid;gap:14px}
.mllp .why-list li{display:flex;gap:12px;align-items:flex-start;color:var(--slate)}
.mllp .why-list .mdi{color:var(--red);font-size:1.3rem;flex-shrink:0;margin-top:1px}
.mllp .why-list strong{color:var(--ink)}
.mllp .why-media img{border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%;object-fit:cover}
/* ================= másDATA TEASER ================= */
.mllp .masdata-teaser{background:var(--bg-dark);color:#fff}
.mllp .masdata-inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.mllp .masdata-copy h2{color:#fff;font-size:2.15rem;margin-bottom:16px}
.mllp .masdata-copy p{color:rgba(255,255,255,.78);font-size:1.05rem;margin-bottom:26px}
/* Product screenshots */
/* Office locations */
.mllp .contact-sub{color:var(--muted);font-size:.85rem}
.mllp .loc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.mllp .loc-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;
  transition:transform var(--t),box-shadow var(--t)}
.mllp .loc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.mllp .loc-card .mdi-map-marker-outline{font-size:1.8rem;color:var(--red);margin-bottom:14px;display:block}
.mllp .loc-card h3{font-size:1.12rem;margin-bottom:10px}
.mllp .loc-card address{font-style:normal;color:var(--slate);font-size:.95rem;line-height:1.65}
.mllp .loc-card address span{display:block}
.mllp .loc-phone{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-weight:600;
  font-size:.93rem;color:var(--red)}
.mllp .loc-phone:hover{text-decoration:underline}
@media (max-width:860px){
.mllp .contact-sub{color:var(--muted);font-size:.85rem}
.mllp .loc-grid{grid-template-columns:1fr}
}
.mllp .shot{margin:0}
.mllp .shot img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-lg);background:#fff}
.mllp .shot figcaption{color:var(--muted);font-size:.88rem;margin-top:12px;text-align:center}
.mllp .shot-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
@media (max-width:860px){
.mllp .shot-grid{grid-template-columns:1fr}
}
.mllp .mock-window{background:#1c1f26;border:1px solid rgba(255,255,255,.1);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-lg)}
.mllp .mock-window-lg{max-width:520px}
.mllp .mock-bar{display:flex;gap:7px;padding:14px 16px;background:#23272f;border-bottom:1px solid rgba(255,255,255,.07)}
.mllp .mock-bar span{width:11px;height:11px;border-radius:50%;background:#3a3f49}
.mllp .mock-bar span:first-child{background:var(--red)}
.mllp .mock-body{padding:22px}
.mllp .mock-row{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.mllp .mock-k{color:#9aa0aa;font-size:.92rem}
.mllp .mock-v{font-weight:800;font-size:1.15rem;color:#fff}
.mllp .mock-ok{color:#37d27a}
.mllp .mock-chart{display:flex;align-items:flex-end;gap:10px;height:96px;margin-top:22px}
.mllp .mock-chart span{flex:1;background:linear-gradient(180deg,var(--red),#7a0016);border-radius:5px 5px 0 0;min-height:8px}
/* ================= RESOURCES ================= */
.mllp .res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mllp .res-grid-wide{grid-template-columns:repeat(3,1fr)}
.mllp .res-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;transition:transform var(--t),box-shadow var(--t)}
.mllp .res-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.mllp .res-card .mdi{font-size:1.9rem;color:var(--red);margin-bottom:14px;display:block}
.mllp .res-card h3{font-size:1.15rem;margin-bottom:9px}
.mllp .res-card p{color:var(--slate);font-size:.94rem}
.mllp .res-soon{display:inline-block;margin-top:16px;font-size:.78rem;font-weight:700;letter-spacing:.01em;color:var(--muted);background:var(--bg-alt);padding:5px 11px;border-radius:20px}
/* ================= PAGE HERO (interior) ================= */
/* Same construction as the homepage hero: photo, directional scrim, red edge, and a
   full-width container with the CHILDREN capped, so the copy starts on the same left
   line as every section below it instead of drifting toward the middle. */
/* Industry and solution heroes open deeper and bottom-align, so a vertical page starts
   with the same weight the homepage does instead of a thin band. */
.mllp .page-hero-entry{padding:120px 0 0;min-height:540px;display:flex;align-items:flex-end}
.mllp .page-hero-entry > .container{position:relative;z-index:2;width:100%;padding-bottom:0}
.mllp .hero-stats{display:flex;flex-wrap:wrap;gap:0;margin-top:44px;border-top:1px solid rgba(255,255,255,.18)}
.mllp .hero-stat{padding:22px 42px 26px;border-right:1px solid rgba(255,255,255,.18)}
.mllp .hero-stat:first-child{padding-left:0}
.mllp .hero-stat:last-child{border-right:0}
.mllp .hero-stat-num{display:block;font-size:1.9rem;font-weight:800;line-height:1;color:#fff;letter-spacing:-.02em}
.mllp .hero-stat-label{display:block;margin-top:7px;font-size:.86rem;color:rgba(255,255,255,.7)}
@media (max-width:760px){
.mllp .page-hero-entry{min-height:0;padding:92px 0 0;display:block}
.mllp .hero-stats{margin-top:32px}
.mllp .hero-stat{padding:16px 24px 18px;flex:1 1 auto}
.mllp .hero-stat-num{font-size:1.45rem}
.mllp .hero-stat-label{font-size:.78rem}
}
.mllp .page-hero{position:relative;background:#0e1014;color:#fff;padding:104px 0 92px;overflow:hidden}
.mllp .page-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.mllp .page-hero::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(12,13,16,.95) 0%,rgba(12,13,16,.84) 42%,rgba(12,13,16,.52) 100%)}
/* red edge strip removed per Tristan 2026-08-03; it survived here because that
   pass only touched the homepage hero */
.mllp .page-hero-dark .page-hero-bg{display:none}
.mllp .page-hero .container{position:relative;z-index:3}
.mllp .page-hero .container > *{max-width:820px}
.mllp .page-hero-eyebrow{display:inline-block;font-size:.8rem;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.72);margin-bottom:14px}
.mllp .page-hero h1{color:#fff;font-size:clamp(2rem,4vw,3rem);margin-bottom:16px}
.mllp .page-hero-lede{color:rgba(255,255,255,.88);font-size:1.12rem;max-width:640px;margin-bottom:24px}
/* ================= ENTRY SPLIT ================= */
.mllp .entry-split{display:grid;grid-template-columns:1.06fr .94fr;gap:64px;align-items:center}
.mllp .entry-intro p{color:var(--slate);font-size:1.06rem;margin-bottom:16px}
.mllp .entry-intro p:last-child{margin-bottom:0}
.mllp .entry-intro-wide{max-width:820px;margin:0 auto;text-align:center}
.mllp .entry-media img{border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%;object-fit:cover}
/* ---- Overview block (the zone directly under a page hero) ----
   Flagged 2026-08-10 as reading basic and boring: two small grey paragraphs beside a
   small photo, adrift in a tall white section. No copy changed. The lead paragraph
   now carries the section at display size in full ink, the photo fills its column
   against a red offset panel, and the padding is tightened so the block sits rather
   than floats. */
.mllp .entry-overview{padding-top:64px;padding-bottom:64px}
.mllp .entry-overview .entry-intro .section-label{display:block;margin-bottom:14px}
.mllp .entry-overview .entry-intro p:first-of-type{font-size:1.34rem;line-height:1.5;color:var(--ink);
  font-weight:500;margin-bottom:20px;letter-spacing:-.005em}
/* Client-written headline above the overview copy (see 'intro_heading'). Matches the
   section-header h2 scale so it sits in the same type system as the rest of the page,
   and .has-h hands the display weight to it instead of the lead paragraph. */
.mllp .entry-intro-h{font-size:2.35rem;margin-bottom:16px}
.mllp .entry-overview .entry-intro.has-h p:first-of-type{font-size:1.06rem;line-height:1.7;
  color:var(--slate);font-weight:400;margin-bottom:16px;letter-spacing:normal}
.mllp .entry-intro-link{display:inline-flex;align-items:center;gap:8px;margin-top:26px;font-weight:650;
  font-size:.98rem;color:var(--red)}
.mllp .entry-intro-link .mdi{transition:transform var(--t)}
.mllp .entry-intro-link:hover .mdi{transform:translateX(4px)}
.mllp .entry-overview .entry-media{position:relative}
.mllp .entry-overview .entry-media::before{content:"";position:absolute;left:-18px;bottom:-18px;
  width:58%;height:58%;background:var(--red);border-radius:var(--radius);z-index:0;opacity:.14}
.mllp .entry-overview .entry-media img{position:relative;z-index:1;height:520px;max-height:60vh}
@media (max-width:900px){
.mllp .entry-overview{padding-top:46px;padding-bottom:46px}
.mllp .entry-overview .entry-intro p:first-of-type{font-size:1.18rem}
.mllp .entry-overview .entry-intro.has-h p:first-of-type{font-size:1.06rem}
.mllp .entry-intro-h{font-size:1.9rem}
.mllp .entry-overview .entry-media img{height:340px}
.mllp .entry-overview .entry-media::before{display:none}
}
/* Challenge cards */
.mllp .challenge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mllp .challenge-card{position:relative;background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);
  border-radius:10px;padding:30px 26px 28px;transition:transform var(--t),box-shadow var(--t)}
.mllp .challenge-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.mllp .challenge-num{display:block;font-size:1.55rem;font-weight:800;line-height:1;color:var(--red);
  opacity:.24;margin-bottom:14px;letter-spacing:-.02em}
.mllp .challenge-card h3{font-size:1.12rem;margin-bottom:8px}
.mllp .challenge-card p{color:var(--slate);font-size:.95rem}
/* Help list */
/* Two columns, numbered. Was five full-width bars down an 820px column with a check
   icon on each, which read as a to-do list stranded in white space. */
.mllp .help-list{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:16px;
  list-style:none;counter-reset:none}
.mllp .help-list li{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:24px 24px;font-size:1.0rem;color:var(--charcoal);line-height:1.55;
  transition:transform var(--t),box-shadow var(--t)}
.mllp .help-list li:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
/* An odd count leaves a hole in the last row; let the final item span both tracks. */
.mllp .help-list li:last-child:nth-child(odd){grid-column:1 / -1}
.mllp .help-num{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:var(--red-soft);color:var(--red);
  font-weight:800;font-size:.92rem;display:flex;align-items:center;justify-content:center;margin-top:1px}
.mllp .help-text{flex:1}
@media (max-width:760px){
.mllp .help-list{grid-template-columns:1fr}
.mllp .help-list li:last-child:nth-child(odd){grid-column:auto}
}
/* Chips */
.mllp .chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:840px;margin:0 auto}
.mllp .chip{background:#fff;border:1px solid var(--line);border-radius:30px;padding:11px 22px;font-weight:600;font-size:.94rem;color:var(--charcoal)}
/* FAQ */
.mllp .faq{display:grid;gap:12px}
.mllp .faq-item{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
/* font-family:inherit matters. A <button> does NOT inherit the page font, so this
   accordion header was rendering in the browser's default UI font (Arial here)
   while every other heading on the page was Inter. It is invisible until the same
   markup runs inside another theme: on production maslabor.com it picked up that
   site's Plus Jakarta Sans and read as a different typeface mid-page. Setting the
   family and the line-height explicitly makes it deterministic wherever it runs. */
.mllp .faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;background:none;border:0;padding:20px 24px;font-family:inherit;line-height:normal;font-size:1.04rem;font-weight:700;color:var(--ink);cursor:pointer;text-align:left}
.mllp .faq-q .mdi{color:var(--red);flex-shrink:0;transition:transform var(--t)}
.mllp .faq-q.open .mdi{transform:rotate(45deg)}
.mllp .faq-a{max-height:0;overflow:hidden;transition:max-height var(--t)}
.mllp .faq-a p{padding:0 24px 22px;color:var(--slate)}
/* ================= CTA BANDS ================= */
.mllp .mini-cta{position:relative;overflow:hidden;background:#0e1014;border-top:0}
.mllp .mini-cta .page-hero-bg{opacity:.55}
.mllp .mini-cta::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(12,13,16,.82) 0%,rgba(12,13,16,.72) 50%,rgba(12,13,16,.86) 100%)}
.mllp .mini-cta-inner{position:relative;z-index:2;text-align:center;padding:92px 0;max-width:680px;margin:0 auto}
.mllp .mini-cta-inner::before{content:"";display:block;width:52px;height:3px;background:var(--red);
  border-radius:2px;margin:0 auto 24px}
.mllp .mini-cta h2{font-size:2.1rem;margin-bottom:12px;color:#fff}
.mllp .mini-cta p{color:rgba(255,255,255,.84);font-size:1.08rem;margin-bottom:26px}
/* No photo here on purpose: the mid-page CTA directly above it carries one, and two
   photo bands back to back read as noise. Flat brand red is the stronger closer. */
.mllp .cta-band{position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(100deg,var(--red-dk) 0%,var(--red) 55%,#ff2340 100%)}
.mllp .cta-band-inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:36px;padding:76px 0}
.mllp .cta-band h2{color:#fff;font-size:2.05rem;margin:6px 0 8px;max-width:620px}
.mllp .cta-band p{color:rgba(255,255,255,.92);max-width:560px}
/* ================= CONTACT ================= */
.mllp .contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px}
.mllp .contact-info h3{font-size:1.4rem;margin-bottom:20px}
.mllp .contact-line{display:flex;align-items:center;gap:12px;font-size:1.05rem;margin-bottom:14px;color:var(--charcoal)}
.mllp .contact-line .mdi{color:var(--red);font-size:1.3rem}
.mllp .contact-note{margin-top:26px;background:var(--bg-alt);border-radius:12px;padding:22px}
.mllp .contact-press{margin-top:18px;font-size:.9rem;color:var(--muted)}
.mllp .contact-press a{color:var(--charcoal);font-weight:600;border-bottom:1px solid var(--line)}
.mllp .contact-press a:hover{color:var(--red);border-color:var(--red)}
.mllp .contact-note strong{display:block;margin-bottom:6px}
.mllp .contact-note p{color:var(--slate);font-size:.96rem}
.mllp .contact-form{background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px;box-shadow:var(--shadow);display:grid;gap:16px}
.mllp .field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mllp .contact-form label{display:flex;flex-direction:column;gap:7px;font-weight:600;font-size:.88rem;color:var(--charcoal)}
.mllp .contact-form input,
.mllp .contact-form select,
.mllp .contact-form textarea{font-family:inherit;font-size:1rem;font-weight:400;padding:12px 14px;border:1.5px solid var(--line);border-radius:8px;transition:border-color var(--t)}
.mllp .contact-form input:focus,
.mllp .contact-form select:focus,
.mllp .contact-form textarea:focus{outline:none;border-color:var(--red)}
.mllp .hp{position:absolute;left:-9999px}
.mllp .form-success{background:#e8f7ee;border:1px solid #b6e3c8;color:#1c7a43;border-radius:10px;padding:16px 20px;display:flex;gap:10px;align-items:center;font-weight:600}
.mllp .form-success .mdi{font-size:1.3rem}
/* ================= FOOTER ================= */
.mllp .site-footer{background:var(--bg-dark);color:#aeb2b9}
.mllp .footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1.6fr 1fr;gap:40px;padding:70px 0 44px}
.mllp .footer-list-2col{grid-template-columns:1fr 1fr;column-gap:24px}
.mllp .footer-logo{height:38px;width:auto;max-width:none;margin-bottom:18px}
.mllp .footer-brand p{color:#8b909a;font-size:.94rem;margin-bottom:16px;max-width:340px}
.mllp .footer-contact{display:flex;flex-direction:column;gap:8px}
.mllp .footer-contact a{display:inline-flex;align-items:center;gap:8px;color:#cfd2d7}
.mllp .footer-contact .mdi{color:var(--red)}
.mllp .footer-col h4{color:#fff;font-size:.95rem;margin-bottom:16px;letter-spacing:.02em}
.mllp .footer-col ul{display:grid;gap:10px}
.mllp .footer-col a{color:#9aa0aa;font-size:.92rem;transition:color var(--t)}
.mllp .footer-col a:hover{color:#fff}
.mllp .footer-bottom{border-top:1px solid rgba(255,255,255,.08)}
.mllp .footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;font-size:.82rem;color:#71767f}
.mllp .footer-scope{max-width:560px;text-align:right}
/* about advocacy */
.mllp .about-advocacy{text-align:center;font-size:1.12rem;color:var(--slate);line-height:1.75}
/* ================= BREADCRUMBS ================= */
.mllp .crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.82rem;color:rgba(255,255,255,.7);margin-bottom:16px}
.mllp .crumbs a{color:#fff;font-weight:600}
.mllp .crumbs a:hover{text-decoration:underline}
.mllp .crumbs .crumb-cur{color:rgba(255,255,255,.92)}
/* ================= SPOTLIGHT ================= */
.mllp .spotlight{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center}
.mllp .spotlight-media img{border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%;object-fit:cover;max-height:520px}
.mllp .spotlight-copy h2{font-size:1.9rem;margin-bottom:14px}
.mllp .spotlight-copy p{color:var(--slate);font-size:1.04rem;margin-bottom:14px}
.mllp .spotlight-copy p:last-child{margin-bottom:0}
/* ================= VERTICAL SPECIALIST ================= */
/* Named specialist on each vertical page (Julia, 2026-08-20). The photo is
   capped at 120px on purpose: másLabor's own source files for Jackson and
   Alexis are 200px square, so anything larger renders soft. Do not scale it
   up without full-resolution originals from Julia. */
/* The identity column sizes to its CONTENT (auto), not to a fraction. At .95fr it
   was 482px holding 314px of photo and name, leaving a 168px hole between the role
   line and the quote rule. Measured on /enterprise/ before changing it. */
.mllp .spec{display:grid;grid-template-columns:auto 1fr;gap:44px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:38px 42px;box-shadow:var(--shadow)}
.mllp .spec-id{display:flex;align-items:center;gap:22px}
.mllp .spec-photo{width:120px;height:120px;flex:0 0 120px;border-radius:50%;object-fit:cover;
  border:3px solid #fff;box-shadow:0 6px 20px rgba(20,22,26,.16)}
.mllp .spec-name{max-width:272px}
/* 250px broke "H-2B Specialist, Golf and Country Clubs" leaving "Clubs" alone on line 2 */
.mllp .spec-name h2{font-size:1.5rem;line-height:1.2;margin:6px 0 4px}
.mllp .spec-role{color:var(--slate);font-size:.95rem;font-weight:600;margin:0;text-wrap:balance}
/* balance, not a wider cap: the golf role is 293px natural and any future role could
   be longer. Balance splits it into two even lines instead of stranding one word. */
.mllp .spec-cred{display:inline-block;margin:8px 0 0;padding:4px 12px;border-radius:30px;
  background:var(--red-soft);color:var(--red-dk);font-size:.8rem;font-weight:700;letter-spacing:.01em}
/* Where the badge is a mailto (a specialist with their own address on file) it has to
   LOOK clickable, or it is a link nobody knows is there. Same pill, plus a hover state
   and the pointer. Applied on the anchor only, so a plain badge is unchanged. */
.mllp a.spec-cred-link{text-decoration:none;cursor:pointer;transition:background var(--t),color var(--t)}
.mllp a.spec-cred-link:hover,
.mllp a.spec-cred-link:focus-visible{background:var(--red);color:#fff}
.mllp .spec-quote{margin:0 0 16px;padding-left:20px;border-left:3px solid var(--red)}
.mllp .spec-quote p{font-size:1.14rem;line-height:1.5;color:var(--ink);font-weight:500;margin:0}
.mllp .spec-text{color:var(--slate);font-size:1rem;margin:0 0 22px}
.mllp .spec-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.mllp .spec-mail{display:inline-flex;align-items:center;gap:7px;color:var(--slate);font-size:.92rem;font-weight:600}
.mllp .spec-mail .mdi{color:var(--red);font-size:1.1em}
.mllp .spec-mail:hover{color:var(--red)}
@media(max-width:900px){
.mllp .spec{grid-template-columns:1fr;gap:26px;padding:30px 26px}
.mllp .spec-id{gap:18px}
.mllp .spec-photo{width:96px;height:96px;flex:0 0 96px}
.mllp .spec-name h2{font-size:1.32rem}
}
@media(max-width:520px){
.mllp .spec-id{flex-direction:column;align-items:flex-start;text-align:left}
}
/* ================= PARTNER MEMBER OFFER (NGCOA Smart Buy) =================
   Sits directly under the entry hero on /golf/ only. Light band on purpose:
   NGCOA's badge artwork is charcoal + green on transparent, so it needs a light
   ground to read; on a dark band it would have to be boxed in white, which reads
   as a sticker. The badge box is locked to the art's own 1000x364 aspect.
   The card is a slim strip, not a full .section: this is the offer, not a chapter,
   and an 82px section here would push the page's own opening two screens down. */
.mllp .offer-sec{padding:36px 0}
.mllp .offer{display:grid;grid-template-columns:auto 1fr auto;gap:22px 36px;align-items:center;
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);
  border-radius:var(--radius);padding:26px 32px;box-shadow:var(--shadow)}
.mllp .offer-badge{display:block;width:220px;height:80px;object-fit:contain}
.mllp .offer-copy .section-label{margin-bottom:7px}
.mllp .offer-copy h2{font-size:1.5rem;line-height:1.22;margin:0 0 6px;text-wrap:balance}
/* balance, same reason as .spec-role: at ~1150px the headline broke with
   "enrollment." alone on line two. */
.mllp .offer-copy p{color:var(--slate);font-size:1rem;margin:0}
.mllp .offer-cta{white-space:nowrap}
/* --flat is the card WITHOUT its button, used above the form on /ngcoa/ where a
   second CTA would compete with the form sitting directly underneath it. */
.mllp .offer--flat{grid-template-columns:auto 1fr}
@media(max-width:1080px){
.mllp .offer{grid-template-columns:auto 1fr;gap:18px 32px;padding:26px 28px}
.mllp .offer-copy h2{font-size:1.38rem}
.mllp .offer-cta{grid-column:1 / -1;justify-self:start}
}
@media(max-width:620px){
.mllp .offer{grid-template-columns:1fr;gap:16px;padding:28px 22px;
    text-align:center;justify-items:center;
    border-left:1px solid var(--line);border-top:4px solid var(--red)}
.mllp .offer-badge{width:176px;height:64px}
.mllp .offer-copy h2{font-size:1.3rem}
.mllp .offer-cta{width:100%;justify-self:stretch}
}
/* ---- /ngcoa/ : the offer IS the hero, so the badge sits above the eyebrow ----
   The badge art is charcoal + green on transparent and this hero is a dark scrim,
   so it gets a white plate rather than being dropped straight onto the photo.
   Same 1000x364 aspect lock as everywhere else the badge appears. */
.mllp .ngcoa-hero-badge{display:block;width:220px;height:80px;object-fit:contain;
  background:#fff;border-radius:8px;padding:10px 14px;margin:0 0 22px;
  box-shadow:0 6px 20px rgba(0,0,0,.18)}
.mllp .ngcoa-start .section-desc{max-width:640px}
.mllp .ngcoa-form{max-width:820px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)}
/* The offer block ships as its own <section class="offer-sec section-alt">, which
   inside this white section painted a stray grey rectangle the width of the
   container. Strip the nested section back to a bare wrapper: no ground of its
   own, no second set of container padding. */
.mllp .ngcoa-start .offer-sec{background:transparent;padding:0}
.mllp .ngcoa-start .offer-sec .container{padding:0;max-width:none}
.mllp .ngcoa-start .offer{max-width:820px;margin:0 auto 26px}
@media(max-width:620px){
/* Badge stays LEFT with the rest of the hero. It was auto-centred for one pass and
     read as a floating sticker against a left-aligned eyebrow, headline and button.
     Every page hero on this site is left-aligned; the centring Tristan asked for on
     2026-08-31 is for the offer CARD, which is a self-contained block, not for a hero. */
  .mllp .ngcoa-hero-badge{width:176px;height:64px}
}
/* ================= MEDIA INQUIRIES (press page) ================= */
.mllp .media-inq{display:grid;grid-template-columns:1.35fr .65fr;gap:48px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:40px 44px;box-shadow:var(--shadow)}
.mllp .media-inq-copy h2{font-size:1.7rem;margin:6px 0 14px}
.mllp .media-inq-copy p{color:var(--slate);font-size:1.02rem;margin:0}
.mllp .media-inq-actions .btn{width:100%}
.mllp .media-inq-note{margin:14px 0 0;font-size:.92rem;color:var(--slate)}
.mllp .media-inq-note a{color:var(--charcoal);font-weight:600;border-bottom:1px solid var(--line)}
.mllp .media-inq-note a:hover{color:var(--red);border-color:var(--red)}
.mllp .media-inq-alt{padding-top:14px;border-top:1px solid var(--line);color:var(--muted);font-size:.88rem}
@media(max-width:900px){
.mllp .media-inq{grid-template-columns:1fr;gap:26px;padding:30px 26px}
.mllp .media-inq-copy h2{font-size:1.4rem}
}
/* ================= RELATED LINKS ================= */
.mllp .related-links{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:900px;margin:0 auto}
.mllp .related-pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:30px;padding:12px 22px;font-weight:600;font-size:.94rem;color:var(--charcoal);transition:all var(--t)}
.mllp .related-pill .mdi{color:var(--red);transition:transform var(--t)}
.mllp .related-pill:hover{border-color:var(--red);color:var(--red);transform:translateY(-2px);box-shadow:var(--shadow)}
.mllp .related-pill:hover .mdi{transform:translateX(3px)}
/* ================= PROCESS TIMELINE ================= */
/* Photo band. The timeline itself inverts to light-on-dark here. */
.mllp .process{position:relative;overflow:hidden;background:#0e1014}
.mllp .process-bg{position:absolute;inset:0;background-size:cover;background-position:center 35%;z-index:0}
.mllp .process::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(12,13,16,.93) 0%,rgba(12,13,16,.88) 55%,rgba(12,13,16,.95) 100%)}
/* Pages with a hand-mapped topical frame (see ml_process_image) get a scrim you can
   actually see a photograph through. The default above is 88-95% black, which reduces any
   picture to noise: 88% black over a pure-white pixel still composites to RGB 41, so no
   amount of brightening the asset can answer "the images are still really dark". Lightened
   twice: 82/72/85 on 2026-08-21, then 62/52/65 on 2026-08-24 (see below).
   Only /golf/ and /hospitality/ carry this class today; every other page is unchanged. */
.mllp .process--photo::before{
  background:linear-gradient(180deg,rgba(12,13,16,.62) 0%,rgba(12,13,16,.52) 55%,rgba(12,13,16,.65) 100%)}
/* 2026-08-24. Julia read the 82/72/85 scrim as still too dark, so it drops again to
   62/52/65 -- the photo now carries roughly twice the light it did. The band's copy has to
   pay for that: at this scrim the ONLY node that fell under AA was the small pink eyebrow
   (#ff8c9e measured 2.94:1 over the Biltmore sky), with .section-desc a near miss at 4.42.
   Both are re-specified BELOW, scoped to .process--photo so the other 21 pages -- which
   still run the near-black default scrim, where a pale eyebrow would look washed out --
   are untouched. Doubled class keeps this ahead of the .process X rules above. */
.mllp .process.process--photo .section-label{color:#ffd2d9}
.mllp .process.process--photo .section-desc{color:rgba(255,255,255,.9)}
.mllp .process.process--photo .tl-step p{color:rgba(255,255,255,.88)}
.mllp .process .container{position:relative;z-index:2}
.mllp .process .section-header h2{color:#fff}
.mllp .process .section-desc{color:rgba(255,255,255,.76)}
.mllp .process .section-label{color:#ff8c9e}
.mllp .process .tl-node{background:#fff;border-color:var(--red)}
.mllp .process .tl-node .mdi{color:var(--red)}
.mllp .process .tl-step h3{color:#fff}
.mllp .process .tl-step p{color:rgba(255,255,255,.72)}
.mllp .process .timeline::before{opacity:.5}
.mllp .timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;position:relative}
.mllp .timeline::before{content:"";position:absolute;top:34px;left:9%;right:9%;height:2px;background:linear-gradient(90deg,var(--red),#ff6b81);opacity:.3;z-index:0}
.mllp .tl-step{position:relative;z-index:1;text-align:center;padding:0 6px}
.mllp .tl-node{position:relative;width:68px;height:68px;margin:0 auto 18px;background:#fff;border:2px solid var(--red);border-radius:50%;display:flex;align-items:center;justify-content:center}
.mllp .tl-node .mdi{font-size:1.7rem;color:var(--red)}
.mllp .tl-num{position:absolute;top:-6px;right:-6px;width:24px;height:24px;background:var(--red);color:#fff;border-radius:50%;font-size:.78rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.mllp .tl-step h3{font-size:1.05rem;margin-bottom:7px}
.mllp .tl-step p{color:var(--slate);font-size:.9rem}
/* ================= POST CARDS ================= */
.mllp .post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mllp .post-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform var(--t),box-shadow var(--t)}
.mllp .post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.mllp .post-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg-alt)}
.mllp .post-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.mllp .post-card:hover .post-thumb img{transform:scale(1.05)}
.mllp .post-thumb-fallback{position:absolute;inset:0;display:grid;place-items:center;color:var(--line)}
.mllp .post-thumb-fallback i{font-size:2.6rem}
.mllp .post-card-body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
/* Pagination */
.mllp .pagination{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:44px}
.mllp .pagination .page-numbers{display:grid;place-items:center;min-width:42px;height:42px;padding:0 14px;
  border:1px solid var(--line);border-radius:9px;font-size:.92rem;font-weight:600;color:var(--slate);
  background:#fff;transition:all var(--t)}
.mllp .pagination a.page-numbers:hover{border-color:var(--red);color:var(--red)}
.mllp .pagination .page-numbers.current{background:var(--red);border-color:var(--red);color:#fff}
.mllp .pagination .page-numbers.dots{border-color:transparent;background:none}
.mllp .post-cat{font-size:.8rem;font-weight:700;letter-spacing:.01em;color:var(--red);margin-bottom:10px}
.mllp .post-card h3{font-size:1.18rem;margin-bottom:10px;line-height:1.3}
.mllp .post-card p{color:var(--slate);font-size:.93rem;flex:1}
.mllp .post-card .post-more{margin-top:16px;font-weight:600;color:var(--red);font-size:.9rem}
/* ================= POST CONTENT (single) ================= */
/* Article meta + featured image overlapping the hero, magazine style. */
.mllp .post-meta{color:rgba(255,255,255,.8);font-size:.9rem;margin-top:16px;letter-spacing:.02em}
.mllp .post-hero-img{margin-top:-56px;position:relative;z-index:3}
.mllp .post-hero-img img{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:var(--radius);
  box-shadow:var(--shadow-lg);display:block}
.mllp .section-tight{padding-top:56px}
.mllp .post-content{font-size:1.08rem;color:var(--charcoal);line-height:1.75}
.mllp .post-content img{max-width:100%;height:auto;border-radius:var(--radius);margin:8px 0 24px}
.mllp .post-content figure{margin:0 0 24px}
.mllp .post-content figcaption{font-size:.86rem;color:var(--muted);margin-top:8px}
.mllp .post-content ul,
.mllp .post-content ol{margin:0 0 20px 22px}
.mllp .post-content li{margin-bottom:8px}
.mllp .post-content blockquote{border-left:3px solid var(--red);padding:4px 0 4px 20px;margin:24px 0;
  font-size:1.14rem;color:var(--ink);font-style:italic}
.mllp .post-content a{color:var(--red);text-decoration:underline;text-underline-offset:2px}
.mllp .post-content p{margin-bottom:20px}
.mllp .post-content h2{font-size:1.55rem;margin:36px 0 14px}
.mllp .post-content h3{font-size:1.22rem;margin:26px 0 12px}
.mllp .post-content ul,
.mllp .post-content ol{margin:0 0 20px 22px}
.mllp .post-content li{margin-bottom:8px}
.mllp .post-content a{color:var(--red);font-weight:600;text-decoration:underline}
.mllp .post-content strong{color:var(--ink)}
.mllp .post-cta{margin-top:38px;padding-top:30px;border-top:1px solid var(--line);text-align:center}
/* ================= AFFILIATIONS ================= */
.mllp .affil{padding:52px 0 56px;border-bottom:1px solid var(--line);background:#fff}
.mllp .affil-label{text-align:center;font-size:.95rem;font-weight:600;letter-spacing:0;color:var(--muted);margin-bottom:24px}
/* Logos arrive at wildly different aspect ratios. Give each an identical box and let
   object-fit normalise them, or the row reads as a broken jumble of sizes. */
.mllp .affil-row{--cols:5;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px}
/* Association marks drawn by fourteen different people will never balance on their own:
   before normalising, rendered ink ran 39px to 73px tall in the same cell, and several
   marks carry their own solid colour block (APMA's plaque, MRLA's panel) while the rest
   are transparent line art. Three fixes, and all three are needed.

   1. The PNGs are re-cut to equal optical AREA on a 600x220 canvas, which matches this
      cell's 213x78 aspect so wide wordmarks can use the full width instead of leaving
      ~29px unused. Range is 47-66px, the exception being VRLTA at 37px because its
      5.4:1 lockup is the only one they publish. A wide wordmark reading shorter than a
      round seal is correct, not a defect. Regenerate with scripts/build_assoc_logos.py;
      sources in assets-src-assoc/, the pre-2026-08-12 set in assets-orig-assoc/.
   2. Greyscale, colour on hover. This is the standard partner-strip treatment and it is
      what stops a solid colour block tearing a hole in the row. Delete the filter if any
      association's brand guidelines require full colour at all times.
   3. Flex, not grid. The count is not a multiple of the column count, and a grid leaves
      the final row jammed against the left edge with a hole beside it. Flex with
      justify-content:center keeps the orphan row balanced at every breakpoint. */
.mllp .affil-row img{flex:0 0 calc((100% - (var(--cols) - 1) * 20px) / var(--cols));
  height:78px;object-fit:contain;object-position:center;
  filter:grayscale(1);opacity:.62;transition:all var(--t)}
.mllp .affil-row img:hover{filter:grayscale(0);opacity:1;transform:translateY(-2px)}
@media (max-width:900px){
.mllp .affil-row{--cols:3;row-gap:30px}
}
@media (max-width:480px){
.mllp .affil-row{--cols:2}
}
/* ================= SEASONAL CALENDAR ================= */
.mllp .cal{max-width:960px;margin:0 auto}
.mllp .cal-track{display:flex;gap:6px;border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.mllp .cal-seg{padding:22px 18px;color:#fff;display:flex;flex-direction:column;gap:6px;min-width:0}
.mllp .cal-seg .cal-time{font-size:.8rem;font-weight:700;letter-spacing:.01em;opacity:.9}
.mllp .cal-seg .cal-phase{font-size:1.02rem;font-weight:700;line-height:1.2}
.mllp .cal-a{background:#7a0016}
.mllp .cal-b{background:#b0001f}
.mllp .cal-c{background:var(--red)}
.mllp .cal-d{background:#ff3b58}
.mllp .cal-foot{text-align:center;color:var(--slate);font-size:.95rem;margin-top:18px}
/* ================= TESTIMONIALS ================= */
.mllp .tmt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
/* Column so the attribution can be pushed to the card's bottom edge. Grid cells all
   stretch to the tallest card in the row, and with the quote and cite stacked at the
   top a short quote left a visible well of dead space under its name (Maya Hood's was
   the worst). Bottom-aligning the cite makes every row read as one band. */
.mllp .tmt-card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);border-radius:12px;padding:28px;
  display:flex;flex-direction:column}
.mllp .tmt-card p{font-size:1.05rem;color:var(--charcoal);line-height:1.6;margin-bottom:18px}
.mllp .tmt-card cite{margin-top:auto}
.mllp .tmt-card cite{font-style:normal;font-size:.92rem;color:var(--muted)}
.mllp .tmt-card cite strong{color:var(--ink)}
.mllp .case-result{color:var(--red)!important;font-weight:700!important}
/* ================= LEADERSHIP ================= */
.mllp .lead-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.mllp .lead-card{text-align:center;display:flex;flex-direction:column;align-items:center}
.mllp .lead-card img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;margin-bottom:14px}
.mllp .lead-card h3{font-size:1.1rem;margin-bottom:2px}
/* Reserve two lines for the role. A long title (Ellen's) otherwise wraps and shoves the
   LinkedIn badge onto its own line, so the bottom row stops aligning with itself. */
.mllp .lead-card .lead-title{color:var(--red);font-weight:600;font-size:.9rem;line-height:1.4;
  min-height:2.8em;display:flex;align-items:flex-start;justify-content:center}
.mllp .lead-card p{color:var(--slate);font-size:.9rem;margin-top:8px}
.mllp .lead-li{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin-top:4px;border-radius:50%;background:var(--bg-alt);color:var(--slate);transition:all var(--t)}
.mllp .lead-li:hover{background:var(--red);color:#fff}
.mllp .lead-li .mdi{font-size:1.1rem}
/* ================= EMPTY STATE ================= */
.mllp .empty-state{max-width:560px;margin:0 auto;text-align:center;padding:36px 0}
.mllp .empty-state .mdi{font-size:3rem;color:var(--red);margin-bottom:14px;display:block}
.mllp .empty-state h2{font-size:1.7rem;margin-bottom:10px}
.mllp .empty-state p{color:var(--slate);font-size:1.05rem;margin-bottom:22px}
@media (max-width:1040px){
.mllp .lead-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
.mllp .lead-grid{grid-template-columns:1fr}
}
@media (max-width:1040px){
.mllp .tmt-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
.mllp .cal-track{flex-direction:column}
.mllp .cal-seg{flex:none!important}
}
@media (max-width:560px){
.mllp .tmt-grid{grid-template-columns:1fr}
}
@media (max-width:1040px){
.mllp .timeline{grid-template-columns:repeat(2,1fr);gap:36px 20px}
.mllp .timeline::before{display:none}
.mllp .spotlight{grid-template-columns:1fr;gap:32px}
.mllp .spotlight-media{order:-1}
.mllp .post-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
.mllp .timeline{grid-template-columns:1fr}
.mllp .post-grid{grid-template-columns:1fr}
}
/* ================= SCROLL REVEAL ================= */
.mllp [data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .7s ease}
.mllp [data-reveal="fade-left"]{transform:translateX(38px)}
.mllp [data-reveal="fade-right"]{transform:translateX(-38px)}
.mllp [data-reveal-delay="1"]{transition-delay:.1s}
.mllp [data-reveal-delay="2"]{transition-delay:.22s}
.mllp [data-reveal-delay="3"]{transition-delay:.34s}
.mllp [data-reveal].revealed{opacity:1;transform:none}
.mllp .hero-eyebrow,
.mllp .hero h1,
.mllp .hero-sub,
.mllp .hero-buttons{opacity:0;transform:translateY(26px);animation:heroIn .8s cubic-bezier(.4,0,.2,1) forwards}
.mllp .hero h1{animation-delay:.12s}
.mllp .hero-sub{animation-delay:.26s}
.mllp .hero-buttons{animation-delay:.4s}
@keyframes heroIn{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
.mllp [data-reveal],
.mllp .hero-eyebrow,
.mllp .hero h1,
.mllp .hero-sub,
.mllp .hero-buttons{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
}
@media (max-width:1040px){
.mllp .statbar-grid{grid-template-columns:repeat(2,1fr)}
.mllp .stat:nth-child(2){border-right:0}
.mllp .stat{border-bottom:1px solid rgba(255,255,255,.09)}
.mllp .pillars,
.mllp .res-grid,
.mllp .res-grid-wide{grid-template-columns:repeat(2,1fr)}
.mllp .challenge-grid{grid-template-columns:repeat(2,1fr)}
.mllp .ind-grid>.ind-card{flex:0 1 calc(50% - 11px)}
.mllp .why-grid,
.mllp .masdata-inner,
.mllp .entry-split,
.mllp .contact-grid{grid-template-columns:1fr;gap:40px}
.mllp .why-media,
.mllp .entry-media{order:-1}
.mllp .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
.mllp .main-nav,
.mllp .header-actions{display:none}
.mllp .mobile-menu-toggle{display:flex}
.mllp .top-bar-item:not(.top-bar-phone){display:none}
.mllp .top-bar-inner{justify-content:flex-end}
.mllp .section{padding:70px 0}
.mllp .section-header h2{font-size:1.9rem}
.mllp .cta-band-inner{flex-direction:column;text-align:center;align-items:center}
.mllp .footer-bottom-inner{flex-direction:column;text-align:center}
.mllp .footer-scope{text-align:center}
}
@media (max-width:560px){
.mllp .pillars,
.mllp .res-grid,
.mllp .res-grid-wide,
.mllp .challenge-grid,
.mllp .footer-grid,
.mllp .field-row{grid-template-columns:1fr}
.mllp .ind-grid>.ind-card{flex:0 1 100%;min-width:0}
.mllp .statbar-grid{grid-template-columns:1fr}
.mllp .hero-buttons{flex-direction:column;align-items:stretch}
.mllp .hero-buttons .btn{width:100%}
/* HORIZONTAL LONGHANDS ONLY -- never the `padding` shorthand here.
     Four blocks carry BOTH .container and a class that owns their vertical rhythm:
     .mini-cta-inner (92px), .cta-band-inner (76px), .footer-grid (70/44px) and
     .footer-bottom-inner (20px). Those classes are declared earlier in this file at
     the same specificity as .container, so a shorthand in this query silently reset
     all four of their vertical paddings to 0 on phones. The two closing CTA bands
     then collapsed onto their own content: the red rule sat on the section's top
     edge and the button on its bottom edge, hard against the band below it. */
  .mllp .container{padding-left:20px;padding-right:20px}
/* Scaled for a phone the way .section is (82px -> 70px at 860px). Restoring the
     desktop 92/76 here reads as a hole under the headline at 390px. */
  .mllp .mini-cta-inner{padding-top:78px;padding-bottom:78px}
.mllp .cta-band-inner{padding-top:64px;padding-bottom:64px}
}
/* ================= ADVOCACY LIST ================= */
.mllp .advocacy-list{display:grid;gap:12px;margin-top:28px}
.mllp .advocacy-item{display:flex;align-items:stretch;gap:0;background:#fff;border:1px solid var(--line);
  border-left:3px solid var(--red);border-radius:10px;overflow:hidden;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.mllp .advocacy-item:hover{transform:translateX(4px);box-shadow:var(--shadow)}
.mllp .advocacy-thumb{flex:0 0 132px;background-size:cover;background-position:center;background-color:var(--bg-alt);
  transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.mllp .advocacy-item:hover .advocacy-thumb{transform:scale(1.05)}
.mllp .advocacy-copy{padding:20px 24px;display:flex;flex-direction:column;justify-content:center;min-height:104px}
@media (max-width:620px){
.mllp .advocacy-item{flex-direction:column}
.mllp .advocacy-thumb{flex:0 0 150px;height:150px}
}
.mllp .advocacy-meta{display:block;font-size:.8rem;font-weight:600;letter-spacing:.01em;
  color:var(--muted);margin-bottom:7px}
.mllp .advocacy-title{display:block;font-weight:700;font-size:1.03rem;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
.mllp .advocacy-item:hover .advocacy-title{color:var(--red)}
/* ================= WEBINAR PRESENTER ================= */
.mllp /* Must out-specify .post-card p{flex:1}
.mllp (0,
.mllp 1,
.mllp 1),
.mllp or the presenter line also absorbs the
   card's free space and opens a gap above every description in the row. */
.post-card p.webinar-presenter{color:var(--muted);font-size:.86rem;font-weight:600;margin-bottom:8px;flex:0 0 auto}
/* ================= OUTCOME LIST (masData) ================= */
.mllp .outcome-list{display:grid;grid-template-columns:1fr 1fr;gap:26px 40px;max-width:1000px;margin:0 auto}
.mllp .outcome{display:flex;gap:16px;align-items:flex-start}
.mllp .outcome .mdi{font-size:1.4rem;color:var(--red);flex-shrink:0;line-height:1.5}
.mllp .outcome h3{font-size:1.08rem;margin-bottom:6px;line-height:1.32}
.mllp .outcome p{color:var(--slate);font-size:.95rem}
/* ================= FAQ HUB ================= */
.mllp .faq-group{margin-bottom:52px}
.mllp .faq-group:last-child{margin-bottom:0}
.mllp .faq-group-head{border-bottom:2px solid var(--line);padding-bottom:14px;margin-bottom:8px;position:relative}
.mllp .faq-group-head h2{font-size:1.55rem;margin-bottom:6px}
.mllp .faq-group-link{font-size:.86rem;font-weight:600;color:var(--red)}
.mllp .faq-group-link:hover{text-decoration:underline}
.mllp .faq-list .faq-item{background:none;border:0;border-radius:0;overflow:visible;
  border-bottom:1px solid var(--line)}
.mllp .faq-list .faq-item:last-child{border-bottom:0}
.mllp .faq-list .faq-item summary{list-style:none;cursor:pointer;padding:18px 42px 18px 0;font-weight:650;font-size:1.02rem;
  line-height:1.4;position:relative;transition:color var(--t)}
.mllp .faq-list .faq-item summary::-webkit-details-marker{display:none}
.mllp .faq-list .faq-item summary::after{content:'+';position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-size:1.5rem;font-weight:400;color:var(--red);line-height:1;transition:transform var(--t)}
.mllp .faq-list .faq-item[open] summary::after{content:'\2013'}
.mllp .faq-list .faq-item summary:hover{color:var(--red)}
.mllp .faq-list .faq-item p{color:var(--slate);font-size:.97rem;padding:0 42px 20px 0;margin-top:-4px}
@media(max-width:860px){
.mllp .outcome-list{grid-template-columns:1fr;gap:22px}
}
/* ================= TESTIMONIAL BAND ================= */
/* Light, not dark: the process band and the masData teaser above it are both dark, and a
   third dark band in a row flattens the page. Photo stays, at wash strength. */
.mllp .tmt-band{position:relative;overflow:hidden;background:var(--bg-alt)}
.mllp .tmt-band-bg{display:none}
/* ghosted photo removed: at .3 under a second wash it read as a rendering fault */
.mllp .tmt-band::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(247,245,241,.88) 0%,rgba(247,245,241,.72) 50%,rgba(247,245,241,.9) 100%)}
.mllp .tmt-band .container{position:relative;z-index:2}
.mllp .tmt-band .tmt-card{background:rgba(255,255,255,.94);backdrop-filter:blur(4px);box-shadow:var(--shadow)}
/* ================= COVERAGE BAND ================= */
/* The roles list is the one full-width band on an industry page with nothing in it.
   The page's own photo, at wash strength, breaks up a long run of white sections. */
.mllp .cov-band{position:relative;overflow:hidden}
.mllp .cov-band-bg{position:absolute;inset:0;background-size:cover;background-position:center 40%;z-index:0;opacity:.26}
.mllp .cov-band::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(247,245,241,.9) 0%,rgba(247,245,241,.74) 50%,rgba(247,245,241,.92) 100%)}
.mllp .cov-band .container{position:relative;z-index:2}
.mllp .cov-band .chip{background:rgba(255,255,255,.94);backdrop-filter:blur(3px);box-shadow:0 2px 10px rgba(20,22,26,.06)}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
.mllp .page-hero-bg,
.mllp .process-bg,
.mllp .tmt-band-bg,
.mllp .cov-band-bg{background-attachment:fixed}
}
/* Webinar cards have no post behind them, so the thumb is a background layer, not an <img>. */
.mllp .post-thumb-img{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.mllp .post-card:hover .post-thumb-img{transform:scale(1.05)}
@media (max-width:900px){
/* Back into normal flow under the hero copy; an absolute panel would sit on top of it
     once the stats stack. */
  .mllp .hero{min-height:clamp(520px,74vh,680px)}
.mllp .why-media{min-height:280px}
}
/* ================= TRUST / PROOF BAND ================= */
/* Stats + cleared client marks. Distinct from the hero stat bar, which stays hidden. */
.mllp .trust{background:var(--bg-alt)}
.mllp .trust-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:900px;
  margin:0 auto 52px;text-align:center}
.mllp .trust-stat{display:flex;flex-direction:column;gap:6px}
.mllp .trust-num{font-size:clamp(2.4rem,4.4vw,3.4rem);font-weight:800;line-height:1;color:var(--ink);
  letter-spacing:-.02em}
.mllp .trust-label{font-size:.95rem;color:var(--muted)}
/* auto-fit, so one cleared logo centres instead of stranding four empty columns
   and the row simply fills out as Julia's approved list arrives.

   While only ONE logo is cleared, a full-width rule plus a 38px gap plus a lone
   147px mark reads as a logo wall that failed to load. The caption below turns it
   into a deliberate single proof point, and the spacing is tighter to match. Once
   Julia's approved list lands and there are three or more, drop .trust-logos-few
   in ml_trust_band() and the original wall spacing returns. */
.mllp .trust-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:16px 56px;padding-top:38px;border-top:1px solid var(--line)}
.mllp .trust-logos-cap{text-align:center;font-size:.86rem;font-weight:600;letter-spacing:.02em;
  color:var(--muted);padding-top:34px;border-top:1px solid var(--line);margin-bottom:18px}
.mllp .trust-logos-cap + .trust-logos{padding-top:0;border-top:0}
.mllp .trust-logos-few img{height:52px}
.mllp .trust-logos img{height:62px;width:auto;max-width:210px;object-fit:contain;opacity:.85;
  transition:opacity var(--t)}
.mllp .trust-logos img:hover{opacity:1}
@media (max-width:700px){
.mllp .trust-stats{grid-template-columns:1fr;gap:32px;margin-bottom:38px}
.mllp .trust-logos{gap:14px 32px}
.mllp .trust-logos img{height:48px}
}
/* ================= ORIGIN STORY (About) ================= */
.mllp .story{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center}
.mllp .story-copy h2{font-size:2.1rem;margin-bottom:22px;max-width:20ch}
.mllp .story-copy p{color:var(--slate);font-size:1.05rem;line-height:1.75;margin-bottom:18px}
.mllp .story-copy p:last-child{margin-bottom:0}
.mllp .story-copy strong{color:var(--ink);font-weight:700}
.mllp .story-media img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow-lg);
  aspect-ratio:4/5;object-fit:cover;object-position:center 35%}
@media (max-width:900px){
.mllp .story{grid-template-columns:1fr;gap:36px}
.mllp .story-media{order:-1}
.mllp .story-media img{aspect-ratio:16/10}
.mllp .story-copy h2{font-size:1.72rem;max-width:none}
}
/* ================= CASE STUDIES ================= */
.mllp .cs-tags{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.mllp .cs-tag{font-size:.72rem;font-weight:700;letter-spacing:.02em;padding:4px 10px;border-radius:20px;
  background:var(--bg-alt);color:var(--slate);white-space:nowrap}
.mllp .cs-tag-red{background:var(--red-soft);color:var(--red)}
/* --- homepage teaser --- */
.mllp .cs-teaser-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
.mllp .cs-card{flex:0 1 calc(33.333% - 15px);min-width:280px;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.mllp .cs-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:transparent}
/* same 240px band and reasoning as .ind-photo: a shorter band decapitates standing subjects */
.mllp .cs-card-photo{display:block;height:200px;background-size:cover;background-position:center;
  transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.mllp .cs-card:hover .cs-card-photo{transform:scale(1.06)}
.mllp .cs-card-body{display:flex;flex-direction:column;padding:24px;flex:1}
.mllp .cs-card-body h3{font-size:1.18rem;margin-bottom:8px;line-height:1.25}
.mllp .cs-card-client{color:var(--muted);font-size:.9rem;margin-bottom:16px;flex:1}
/* ===========================================================================
   CLIENT STORIES PAGE  (.csx-*)  — rebuilt from scratch 2026-08-10

   Two earlier passes kept the original text-column-plus-sidebar and only added
   an index and some numerals. Both were rejected, correctly.

   The organising idea: every one of másLabor's four headlines already contains
   its own number (eighteen years, double, twenty years, six workers). That
   figure IS the story, and it was buried mid-sentence in grey body copy. It is
   now the biggest element on screen, on a dark panel beside a half-viewport
   photograph, and the four figures also form the proof strip on the cover.

   Per story: split claim -> body -> dark quote, alternating sides.
   =========================================================================== */

/* ---- Cover ---- */
.mllp .csx-cover{position:relative;overflow:hidden;background:#0e1014;color:#fff;
  padding:132px 0 0;min-height:660px;display:flex;align-items:flex-end}
.mllp .csx-cover-bg{position:absolute;inset:0;background-size:cover;background-position:center 38%;z-index:0}
.mllp .csx-cover::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(14,16,20,.82) 0%,rgba(14,16,20,.72) 40%,rgba(14,16,20,.96) 100%)}
.mllp .csx-cover-inner{position:relative;z-index:2;width:100%}
.mllp .csx-cover-eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--red);margin-bottom:18px}
.mllp .csx-cover h1{color:#fff;font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:1.08;max-width:16ch;margin-bottom:20px}
.mllp .csx-cover-lede{font-size:1.12rem;line-height:1.65;color:rgba(255,255,255,.82);max-width:60ch}
.mllp .csx-proof{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px;
  border-top:1px solid rgba(255,255,255,.16)}
.mllp .csx-proof-item{display:block;padding:26px 30px 34px;border-right:1px solid rgba(255,255,255,.16);
  transition:background var(--t)}
.mllp .csx-proof-item:first-child{padding-left:0}
.mllp .csx-proof-item:last-child{border-right:0}
.mllp .csx-proof-item:hover{background:rgba(255,255,255,.05)}
.mllp .csx-proof-num{display:block;font-size:2.5rem;font-weight:800;line-height:1;color:#fff;letter-spacing:-.03em}
.mllp .csx-proof-num em{font-style:normal;font-size:.98rem;font-weight:650;color:var(--red);margin-left:6px;
  letter-spacing:0}
.mllp .csx-proof-label{display:block;margin-top:10px;font-size:.9rem;line-height:1.45;color:rgba(255,255,255,.74)}
.mllp .csx-proof-client{display:block;margin-top:10px;font-size:.78rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:rgba(255,255,255,.44)}
/* ---- Story header, inside the white section ----
   Replaces the dark split-panel opener, cut 2026-08-10.

   align-items:start, not center. Centred, the photo floated against a shorter text
   block and the two never agreed on a top edge, which is what read as "weird".
   Now the ordinal and the top of the photograph sit on the same line and the whole
   row hangs off one baseline. */
.mllp .csx-story{scroll-margin-top:calc(var(--header-h) + 18px)}
/* stretch, so the photograph is exactly as tall as the copy beside it and the row
   closes flush. align-items:start left the image hanging ~80px below the end of the
   text; centring floated it. min-height keeps it from collapsing on short copy. */
.mllp .csx-head{display:grid;grid-template-columns:1.04fr .96fr;gap:64px;align-items:stretch;
  padding-bottom:48px}
/* One meta row: ordinal and both tags on a single line. Stacked, these were three
   separate rows of small type before the headline even started. */
.mllp .csx-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:22px}
.mllp .csx-idx{font-size:.8rem;font-weight:700;letter-spacing:.08em;color:var(--muted);line-height:1;
  padding-right:6px;margin-right:2px;border-right:1px solid var(--line)}
.mllp .csx-idx em{font-style:normal;color:#c9cdd4}
.mllp .csx-client-name{font-size:.86rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--red);margin-bottom:14px}
/* justify-content:center, so a copy column shorter than the photo sits centred against
   it rather than opening a hole. The old header measured 400px tall with 176px of
   content in it and a 130px gap in the middle. */
.mllp .csx-head-copy{display:flex;flex-direction:column;justify-content:center}
.mllp .csx-head-media{position:relative;overflow:hidden;border-radius:var(--radius);
  box-shadow:var(--shadow-lg);min-height:360px}
.mllp .csx-head-media img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.4,0,.2,1)}
.mllp .csx-head-media:hover img{transform:scale(1.04)}
/* ---- Story: body ---- */
/* Alternate tone story to story so consecutive white sections stay distinguishable
   now that the dark opener band is gone. */
.mllp .csx-body{padding:74px 0 78px;background:#fff}
.mllp .csx-body-alt{background:var(--bg-alt)}
/* Spec strip. Rules between items, not bullets, and boxed top and bottom so it reads
   as a data band rather than a stray line of grey text. */
.mllp .csx-facts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;list-style:none;margin:44px 0 46px;
  padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mllp .csx-facts li{position:relative;font-size:.92rem;color:var(--charcoal);padding-left:28px}
.mllp .csx-facts li::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:14px;background:var(--line)}
.mllp .csx-facts li:first-child{padding-left:0}
.mllp .csx-facts li:first-child::before{display:none}
.mllp .csx-facts-link{margin-left:auto;padding-left:0!important}
.mllp .csx-facts-link::before{display:none!important}
.mllp .csx-facts-link a{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.9rem;
  color:var(--red);white-space:nowrap}
.mllp .csx-facts-link .mdi{transition:transform var(--t)}
.mllp .csx-facts-link a:hover .mdi{transform:translateX(4px)}
/* Set as a headline, not a lead paragraph, per Tristan 2026-08-10: "make the how
   farmington county... text for each one bigger and more headline text". */
/* The one piece of big type in a story. It sits in the header beside the photograph
   now, not under the spec strip, so a story has a single focal point. */
.mllp .csx-lead{font-size:clamp(1.55rem,2.5vw,2.1rem);line-height:1.26;font-weight:700;color:var(--ink);
  letter-spacing:-.022em;margin:0}
/* Section labels share one treatment across the story so the page has a single
   vocabulary: red, small, wide-tracked, sitting on a hairline. */
.mllp .csx-cols{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding-bottom:50px;
  border-bottom:1px solid var(--line)}
.mllp .csx-col h3,
.mllp .csx-outcomes-head{font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--red);font-weight:700;padding-top:14px;border-top:2px solid var(--red);
  display:inline-block;margin-bottom:16px}
.mllp .csx-col p{color:var(--slate);line-height:1.8;font-size:1.02rem}
.mllp .csx-outcomes{padding-top:48px}
.mllp .csx-outcomes-head{margin-bottom:30px}
.mllp .csx-outcome-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.mllp .csx-outcome{padding:0 34px;border-left:1px solid var(--line)}
.mllp .csx-outcome:first-child{padding-left:0;border-left:0}
.mllp .csx-outcome-num{display:block;font-size:1.35rem;font-weight:800;line-height:1;color:var(--red);
  opacity:.32;margin-bottom:14px;letter-spacing:-.02em}
.mllp .csx-outcome p{color:var(--slate);font-size:.98rem;line-height:1.72}
/* ---- Story: quote ---- */
.mllp .csx-quote{position:relative;overflow:hidden;padding:80px 0}
.mllp .csx-quote-bg{position:absolute;inset:0;background-size:cover;background-position:center 45%;z-index:0;
  opacity:.2;filter:grayscale(1)}
.mllp .csx-quote::after{content:"";position:absolute;inset:0;z-index:1;background:var(--ink);opacity:.93}
.mllp .csx-quote .container{position:relative;z-index:2}
.mllp .csx-quote blockquote{max-width:960px;position:relative;padding-left:70px}
.mllp .csx-quote blockquote::before{content:"\201C";position:absolute;left:0;top:-18px;font-size:5.8rem;line-height:1;
  color:var(--red);font-family:Georgia,serif}
.mllp .csx-quote p{font-size:clamp(1.28rem,2.3vw,1.78rem);line-height:1.46;color:#fff;font-weight:500;
  letter-spacing:-.012em;margin-bottom:26px}
.mllp .csx-quote cite{font-style:normal;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.mllp .csx-quote cite strong{color:#fff;font-size:1rem}
.mllp .csx-quote cite span{color:rgba(255,255,255,.64);font-size:.94rem}
@media (max-width:1000px){
.mllp .csx-proof{grid-template-columns:repeat(2,1fr)}
.mllp .csx-proof-item{padding:22px 24px 26px}
.mllp .csx-proof-item:nth-child(odd){padding-left:0}
.mllp .csx-proof-item:nth-child(2n){border-right:0}
.mllp .csx-cols{grid-template-columns:1fr;gap:32px}
.mllp .csx-outcome-grid{grid-template-columns:1fr;gap:26px}
.mllp .csx-outcome{padding:0 0 0 22px;border-left:2px solid var(--red-soft)}
.mllp .csx-outcome:first-child{padding-left:22px;border-left:2px solid var(--red-soft)}
}
@media (max-width:860px){
.mllp .csx-cover{min-height:0;padding:96px 0 0}
.mllp .csx-head{grid-template-columns:1fr;gap:30px}
.mllp .csx-head-media{order:-1}
.mllp .csx-facts-link{margin-left:0}
.mllp .csx-lead{font-size:1.2rem;max-width:none}
.mllp .csx-quote{padding:56px 0}
.mllp .csx-quote blockquote{padding-left:0}
.mllp .csx-quote blockquote::before{position:static;display:block;font-size:3.6rem;margin-bottom:-16px}
}
.mllp .cs-client{font-size:1.05rem;font-weight:700;color:var(--red);margin-bottom:14px}
.mllp .cs-quote{border-left:3px solid var(--red);padding-left:20px}
.mllp .cs-quote p{font-size:1.02rem;line-height:1.65;color:var(--ink);margin-bottom:12px}
.mllp .cs-quote cite{font-style:normal;font-size:.88rem;color:var(--muted);line-height:1.5;display:block}
.mllp .cs-quote cite strong{color:var(--ink)}
.mllp .cs-cta{position:relative;overflow:hidden;color:#fff;text-align:center}
.mllp .cs-cta::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(12,13,16,.72)}
.mllp .cs-cta .container{position:relative;z-index:2}
.mllp .cs-cta h2{color:#fff;font-size:2.1rem;margin-bottom:12px}
.mllp .cs-cta p{color:rgba(255,255,255,.85);margin-bottom:28px}
@media (max-width:900px){
.mllp .cs-card{flex:0 1 calc(50% - 11px)}
}
@media (max-width:700px){
.mllp .cs-card{flex:0 1 100%;min-width:0}
}
/* case study proof block on a vertical page */
.mllp .cs-proof{background:var(--bg-alt)}
.mllp .cs-proof-inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:center;
  max-width:1040px;margin:0 auto}
.mllp .cs-proof-media img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow-lg);
  aspect-ratio:4/3;object-fit:cover}
.mllp .cs-proof-copy h2{font-size:1.85rem;margin-bottom:8px}
.mllp .cs-proof-copy .cs-quote{margin:20px 0 26px}
@media (max-width:900px){
.mllp .cs-proof-inner{grid-template-columns:1fr;gap:28px}
.mllp .cs-proof-copy h2{font-size:1.55rem}
}


/* ---- production-only glue -------------------------------------------------
   Astra wraps page content in #content > .ast-container, which is max-width'd
   and padded. The landing pages are full-bleed, so that wrapper is neutralised
   -- but ONLY on the body classes this plugin adds, so no other page on
   maslabor.com is affected. */
body.mllp-page #content .ast-container{max-width:none;padding-left:0;padding-right:0;width:100%;
  /* Astra 4.x makes .ast-container a FLEX container. Left as flex, .mllp becomes a
     flex item and shrink-wraps to its widest child (the 1200px .container), so the
     full-bleed heroes and photo bands stopped at 1200px inside a 1315px viewport.
     Measured on /golf/ before changing it. This is the same trap that hit the hero
     on staging: a max-width container inside a flex parent is not a container. */
  display:block;}
body.mllp-page .mllp{flex:1 1 auto;width:100%;}
body.mllp-page #content.site-content{padding:0;}
body.mllp-page .mllp{overflow-x:hidden;}

/* Astra sets a global line-height and paragraph margin that the staging theme's
   own reset used to own. Re-assert the staging values inside the wrapper. */
.mllp p{margin:0 0 1em;}
.mllp p:last-child{margin-bottom:0;}
.mllp ul,.mllp ol{margin:0;padding:0;}
.mllp h1,.mllp h2,.mllp h3,.mllp h4,.mllp h5,.mllp h6{margin:0;padding:0;clear:none;}
.mllp a:hover,.mllp a:focus{text-decoration:none;}
.mllp img{margin:0;}