/*
Theme Name: masLabor
Description: Website theme for masLabor.
Version: 1.0.0
*/

/* ================= TOKENS ================= */
:root{
  --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:'Inter',-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 ================= */
*,*::before,*::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. */
html{overflow-x:hidden}
[id]{scroll-margin-top:calc(var(--header-h) + 18px)}
body{font-family:var(--font);color:var(--ink);line-height:1.62;background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.menu-open{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
h1,h2,h3,h4{line-height:1.14;letter-spacing:-.02em;font-weight:800;color:var(--ink)}
.container{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.container-narrow{max-width:820px}

/* ================= BUTTONS ================= */
.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}
.btn .mdi{font-size:1.1em}
.btn-sm{padding:11px 22px;font-size:.85rem}
.btn-lg{padding:17px 40px;font-size:1rem}
.btn-block{width:100%}
.btn-primary{background:var(--red);color:#fff;border-color:var(--red)}
.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)}
.btn-white{background:#fff;color:var(--red);border-color:#fff}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.2)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-outline:hover{border-color:var(--red);color:var(--red)}
.section-cta{display:flex;justify-content:center;margin-top:40px}
.btn-outline-light{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.55)}
.btn-outline-light:hover{background:#fff;color:var(--ink);border-color:#fff}

/* ================= SECTION UTILITIES ================= */
.section{padding:82px 0}
.section-alt{background:var(--bg-alt)}
.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. */
.brand{text-transform:none}
.section-label-light{color:#ff9aa9}
.section-header{max-width:760px;margin:0 auto 46px;text-align:center}
.section-header h2{font-size:2.35rem;margin-bottom:16px}
.section-desc{font-size:1.08rem;color:var(--slate);line-height:1.7}

/* ================= TOP BAR ================= */
.top-bar{background:var(--ink);color:#cfd2d7;font-size:.82rem}
.top-bar-inner{max-width:var(--wrap);margin:0 auto;padding:9px 28px;display:flex;align-items:center;justify-content:flex-end;gap:16px}
.top-bar-item{color:#cfd2d7;display:inline-flex;align-items:center;gap:6px}
.top-bar-item .mdi{color:var(--red);font-size:1rem}
.top-bar-right{display:flex;align-items:center;gap:22px}
.top-bar-social{display:flex;gap:12px}
.top-bar-social a:hover{color:#fff}
.top-bar-social .mdi{font-size:1.05rem}

/* ================= HEADER ================= */
.site-header{position:sticky;top:0;z-index:900;background:#fff;border-bottom:1px solid var(--line);transition:box-shadow var(--t)}
.site-header.scrolled{box-shadow:0 6px 24px rgba(20,22,26,.08)}
.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}
.logo img{height:38px;width:auto;max-width:none}
.main-nav{margin-left:auto}
.nav-links{display:flex;align-items:center;gap:6px}
.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)}
.nav-top .mdi{font-size:1rem;color:var(--muted);transition:transform var(--t)}
.nav-links>li{position:relative}
.nav-links>li:hover .nav-top{color:var(--red)}
.nav-links>li:hover .nav-top .mdi{transform:rotate(180deg);color:var(--red)}
.header-actions{margin-left:6px}

/* Mega dropdown */
.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}
.mega-sm{min-width:280px;grid-template-columns:1fr}
.has-mega:hover .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega a,.mega-off{display:flex;flex-direction:column;padding:11px 14px;border-radius:9px;transition:background var(--t)}
.mega a span,.mega-off span{font-weight:600;font-size:.92rem;color:var(--ink)}
.mega a small,.mega-off small{color:var(--muted);font-size:.78rem;margin-top:2px}
.mega a:hover{background:var(--bg-alt)}
.mega a:hover span{color:var(--red)}
.mega-flag{background:var(--red-soft)}
.mega-off{cursor:default}
.m-off{display:block;padding:9px 0;color:var(--slate);font-weight:500;cursor:default}
.mega-flag span{color:var(--red)}

/* Mobile toggle + menu */
.mobile-menu-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.mobile-menu-toggle span{display:block;width:26px;height:2.5px;background:var(--ink);border-radius:2px;transition:var(--t)}
.mobile-menu-toggle.active span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.mobile-menu-toggle.active span:nth-child(2){opacity:0}
.mobile-menu-toggle.active span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.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}
.mobile-menu.open{transform:translateX(0)}
.m-group{border-bottom:1px solid var(--line)}
.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}
.m-acc .mdi{color:var(--red);transition:transform var(--t)}
.m-acc.open .mdi{transform:rotate(45deg)}
.m-panel{display:none;padding:0 2px 14px}
.m-panel.open{display:block}
.m-panel a{display:block;padding:9px 0;color:var(--slate);font-weight:500}
.m-contact{display:block;padding:16px 2px;font-size:1.05rem;font-weight:700;border-bottom:1px solid var(--line)}
.mobile-menu .btn{margin-top:22px}

/* ================= HERO ================= */
.hero{position:relative;min-height:clamp(640px,94vh,940px);display:flex;align-items:center;
  color:#fff;overflow:hidden}
.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. */
.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) */
.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){
  .hero-slide{animation:none;opacity:0}
  .hero-slide:first-child{opacity:1}
}
.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. */
.hero-inner{position:relative;z-index:2;flex:1 1 auto;width:100%}
.hero-inner > *{max-width:820px}
.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. */
.hero h1{font-size:clamp(2.4rem,5vw,3.9rem);color:#fff;margin-bottom:20px;max-width:900px}
.hero-sub{font-size:1.15rem;line-height:1.65;color:rgba(255,255,255,.9);max-width:640px;margin-bottom:32px}
.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. */
.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)}
.statbar::after{content:"";position:absolute;left:0;top:-1px;width:34%;height:2px;background:var(--red)}
.statbar-grid{display:grid;grid-template-columns:repeat(3,1fr);position:relative;z-index:2}
.stat{padding:44px 44px 42px;position:relative}
/* Hairline that fades out at both ends instead of a hard rule to the edges. */
.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)}
.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}
.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){.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. */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (min-width:901px){.pillars:has(> :nth-child(4)){grid-template-columns:repeat(4,1fr)}}
.pillar{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px 26px;transition:transform var(--t),box-shadow var(--t)}
.pillar:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.pillar .mdi{font-size:2rem;color:var(--red);margin-bottom:16px;display:block}
.pillar h3{font-size:1.18rem;margin-bottom:9px}
.pillar p{color:var(--slate);font-size:.96rem}

/* ================= PROGRAMS (homepage, 2026-09-14) =================
   Four program cards under Tom Bortnyk's "Hire globally. Produce locally." Composed on
   .pillar so the count-aware grid handles 4-up/2-up/1-up; the overrides below stop the
   .pillar icon rule from turning the card's arrow into a 2rem block. */
.prog-card{display:flex;flex-direction:column;color:inherit;text-decoration:none;position:relative;overflow:hidden}
.prog-card::before{content:'';position:absolute;left:0;top:0;right:0;height:4px;background:transparent;transition:background var(--t)}
.prog-card:hover::before{background:var(--red)}
.prog-kicker{font-size:.76rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.prog-name{font-size:2.1rem;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--ink);margin-bottom:18px}
.prog-card h3{font-size:1.18rem;margin-bottom:9px}
.prog-card p{flex:1;color:var(--slate);font-size:.96rem}
.prog-card .ind-link .mdi{font-size:1rem;display:inline;margin:0;color:var(--red)}
.prog-card:hover .ind-link .mdi{transform:translateX(4px)}

/* ================= 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. */
.ind-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
.ind-grid>.ind-card{flex:0 1 calc(33.333% - 15px);min-width:280px}
.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)}
.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. */
.ind-photo{display:block;height:240px;background-size:cover;background-position:center;
  transition:transform .7s cubic-bezier(.2,.6,.2,1)}
.ind-card:hover .ind-photo{transform:scale(1.06)}
.ind-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:transparent}
.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. */
.ind-body-noimg{padding-top:34px}
.ind-body-noimg .mdi{font-size:2.1rem;color:var(--red);margin-bottom:16px;display:block}
.ind-card h3{font-size:1.25rem;margin-bottom:10px}
.ind-card p{color:var(--slate);font-size:.95rem;flex:1}
.ind-link{margin-top:18px;font-weight:600;color:var(--red);font-size:.9rem;display:inline-flex;align-items:center;gap:6px}
.ind-link .mdi{font-size:1rem;color:var(--red);margin:0;transition:transform var(--t)}
.ind-card:hover .ind-link .mdi{transform:translateX(4px)}
.ind-card-feat{border-top:0;grid-column:span 1}
.ind-card-feat .ind-photo{position:relative}
.ind-card-feat .ind-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(12,13,16,.5) 100%)}
.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 ================= */
.why-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:stretch}
.why-media{position:relative;min-height:420px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg)}
.why-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}
.why-copy h2{font-size:2.15rem;margin-bottom:18px}
.why-copy>p{color:var(--slate);font-size:1.05rem;margin-bottom:26px}
.why-list{margin-bottom:30px;display:grid;gap:14px}
.why-list li{display:flex;gap:12px;align-items:flex-start;color:var(--slate)}
.why-list .mdi{color:var(--red);font-size:1.3rem;flex-shrink:0;margin-top:1px}
.why-list strong{color:var(--ink)}
.why-media img{border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%;object-fit:cover}

/* ================= másDATA TEASER ================= */
.masdata-teaser{background:var(--bg-dark);color:#fff}
.masdata-inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.masdata-copy h2{color:#fff;font-size:2.15rem;margin-bottom:16px}
.masdata-copy p{color:rgba(255,255,255,.78);font-size:1.05rem;margin-bottom:26px}
/* Product screenshots */
/* Office locations */
.contact-sub{color:var(--muted);font-size:.85rem}
.loc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.loc-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;
  transition:transform var(--t),box-shadow var(--t)}
.loc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.loc-card .mdi-map-marker-outline{font-size:1.8rem;color:var(--red);margin-bottom:14px;display:block}
.loc-card h3{font-size:1.12rem;margin-bottom:10px}
.loc-card address{font-style:normal;color:var(--slate);font-size:.95rem;line-height:1.65}
.loc-card address span{display:block}
.loc-phone{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-weight:600;
  font-size:.93rem;color:var(--red)}
.loc-phone:hover{text-decoration:underline}
@media (max-width:860px){.contact-sub{color:var(--muted);font-size:.85rem}
.loc-grid{grid-template-columns:1fr}}

.shot{margin:0}
.shot img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-lg);background:#fff}
.shot figcaption{color:var(--muted);font-size:.88rem;margin-top:12px;text-align:center}
.shot-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
@media (max-width:860px){.shot-grid{grid-template-columns:1fr}}
.mock-window{background:#1c1f26;border:1px solid rgba(255,255,255,.1);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-lg)}
.mock-window-lg{max-width:520px}
.mock-bar{display:flex;gap:7px;padding:14px 16px;background:#23272f;border-bottom:1px solid rgba(255,255,255,.07)}
.mock-bar span{width:11px;height:11px;border-radius:50%;background:#3a3f49}
.mock-bar span:first-child{background:var(--red)}
.mock-body{padding:22px}
.mock-row{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.mock-k{color:#9aa0aa;font-size:.92rem}
.mock-v{font-weight:800;font-size:1.15rem;color:#fff}
.mock-ok{color:#37d27a}
.mock-chart{display:flex;align-items:flex-end;gap:10px;height:96px;margin-top:22px}
.mock-chart span{flex:1;background:linear-gradient(180deg,var(--red),#7a0016);border-radius:5px 5px 0 0;min-height:8px}

/* ================= RESOURCES ================= */
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.res-grid-wide{grid-template-columns:repeat(3,1fr)}
.res-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;transition:transform var(--t),box-shadow var(--t)}
.res-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.res-card .mdi{font-size:1.9rem;color:var(--red);margin-bottom:14px;display:block}
.res-card h3{font-size:1.15rem;margin-bottom:9px}
.res-card p{color:var(--slate);font-size:.94rem}
.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. */
.page-hero-entry{padding:120px 0 0;min-height:540px;display:flex;align-items:flex-end}
.page-hero-entry > .container{position:relative;z-index:2;width:100%;padding-bottom:0}
.hero-stats{display:flex;flex-wrap:wrap;gap:0;margin-top:44px;border-top:1px solid rgba(255,255,255,.18)}
.hero-stat{padding:22px 42px 26px;border-right:1px solid rgba(255,255,255,.18)}
.hero-stat:first-child{padding-left:0}
.hero-stat:last-child{border-right:0}
.hero-stat-num{display:block;font-size:1.9rem;font-weight:800;line-height:1;color:#fff;letter-spacing:-.02em}
.hero-stat-label{display:block;margin-top:7px;font-size:.86rem;color:rgba(255,255,255,.7)}
@media (max-width:760px){
  .page-hero-entry{min-height:0;padding:92px 0 0;display:block}
  .hero-stats{margin-top:32px}
  .hero-stat{padding:16px 24px 18px;flex:1 1 auto}
  .hero-stat-num{font-size:1.45rem}
  .hero-stat-label{font-size:.78rem}
}

.page-hero{position:relative;background:#0e1014;color:#fff;padding:104px 0 92px;overflow:hidden}
.page-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.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 */
.page-hero-dark .page-hero-bg{display:none}
.page-hero .container{position:relative;z-index:3}
.page-hero .container > *{max-width:820px}
.page-hero-eyebrow{display:inline-block;font-size:.8rem;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.72);margin-bottom:14px}
.page-hero h1{color:#fff;font-size:clamp(2rem,4vw,3rem);margin-bottom:16px}
.page-hero-lede{color:rgba(255,255,255,.88);font-size:1.12rem;max-width:640px;margin-bottom:24px}

/* ================= ENTRY SPLIT ================= */
.entry-split{display:grid;grid-template-columns:1.06fr .94fr;gap:64px;align-items:center}
.entry-intro p{color:var(--slate);font-size:1.06rem;margin-bottom:16px}
.entry-intro p:last-child{margin-bottom:0}
.entry-intro-wide{max-width:820px;margin:0 auto;text-align:center}
.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. */
.entry-overview{padding-top:64px;padding-bottom:64px}
.entry-overview .entry-intro .section-label{display:block;margin-bottom:14px}
.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. */
.entry-intro-h{font-size:2.35rem;margin-bottom:16px}
.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}
.entry-intro-link{display:inline-flex;align-items:center;gap:8px;margin-top:26px;font-weight:650;
  font-size:.98rem;color:var(--red)}
.entry-intro-link .mdi{transition:transform var(--t)}
.entry-intro-link:hover .mdi{transform:translateX(4px)}
.entry-overview .entry-media{position:relative}
.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}
.entry-overview .entry-media img{position:relative;z-index:1;height:520px;max-height:60vh}
@media (max-width:900px){
  .entry-overview{padding-top:46px;padding-bottom:46px}
  .entry-overview .entry-intro p:first-of-type{font-size:1.18rem}
  .entry-overview .entry-intro.has-h p:first-of-type{font-size:1.06rem}
  .entry-intro-h{font-size:1.9rem}
  .entry-overview .entry-media img{height:340px}
  .entry-overview .entry-media::before{display:none}
}

/* Challenge cards */
.challenge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.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)}
.challenge-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.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}
.challenge-card h3{font-size:1.12rem;margin-bottom:8px}
.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. */
.help-list{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:16px;
  list-style:none;counter-reset:none}
.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)}
.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. */
.help-list li:last-child:nth-child(odd){grid-column:1 / -1}
.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}
.help-text{flex:1}
@media (max-width:760px){.help-list{grid-template-columns:1fr}.help-list li:last-child:nth-child(odd){grid-column:auto}}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:840px;margin:0 auto}
.chip{background:#fff;border:1px solid var(--line);border-radius:30px;padding:11px 22px;font-weight:600;font-size:.94rem;color:var(--charcoal)}

/* FAQ */
.faq{display:grid;gap:12px}
.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. */
.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}
.faq-q .mdi{color:var(--red);flex-shrink:0;transition:transform var(--t)}
.faq-q.open .mdi{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height var(--t)}
.faq-a p{padding:0 24px 22px;color:var(--slate)}

/* ================= CTA BANDS ================= */
.mini-cta{position:relative;overflow:hidden;background:#0e1014;border-top:0}
.mini-cta .page-hero-bg{opacity:.55}
.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%)}
.mini-cta-inner{position:relative;z-index:2;text-align:center;padding:92px 0;max-width:680px;margin:0 auto}
.mini-cta-inner::before{content:"";display:block;width:52px;height:3px;background:var(--red);
  border-radius:2px;margin:0 auto 24px}
.mini-cta h2{font-size:2.1rem;margin-bottom:12px;color:#fff}
.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. */
.cta-band{position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(100deg,var(--red-dk) 0%,var(--red) 55%,#ff2340 100%)}
.cta-band-inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:36px;padding:76px 0}
.cta-band h2{color:#fff;font-size:2.05rem;margin:6px 0 8px;max-width:620px}
.cta-band p{color:rgba(255,255,255,.92);max-width:560px}

/* ================= CONTACT ================= */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px}
.contact-info h3{font-size:1.4rem;margin-bottom:20px}
.contact-line{display:flex;align-items:center;gap:12px;font-size:1.05rem;margin-bottom:14px;color:var(--charcoal)}
.contact-line .mdi{color:var(--red);font-size:1.3rem}
.contact-note{margin-top:26px;background:var(--bg-alt);border-radius:12px;padding:22px}
.contact-press{margin-top:18px;font-size:.9rem;color:var(--muted)}
.contact-press a{color:var(--charcoal);font-weight:600;border-bottom:1px solid var(--line)}
.contact-press a:hover{color:var(--red);border-color:var(--red)}
.contact-note strong{display:block;margin-bottom:6px}
.contact-note p{color:var(--slate);font-size:.96rem}
.contact-form{background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px;box-shadow:var(--shadow);display:grid;gap:16px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-form label{display:flex;flex-direction:column;gap:7px;font-weight:600;font-size:.88rem;color:var(--charcoal)}
.contact-form input,.contact-form select,.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)}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;border-color:var(--red)}
.hp{position:absolute;left:-9999px}
.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}
.form-success .mdi{font-size:1.3rem}

/* ================= FOOTER ================= */
.site-footer{background:var(--bg-dark);color:#aeb2b9}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1.6fr 1fr;gap:40px;padding:70px 0 44px}
.footer-list-2col{grid-template-columns:1fr 1fr;column-gap:24px}
.footer-logo{height:38px;width:auto;max-width:none;margin-bottom:18px}
.footer-brand p{color:#8b909a;font-size:.94rem;margin-bottom:16px;max-width:340px}
.footer-contact{display:flex;flex-direction:column;gap:8px}
.footer-contact a{display:inline-flex;align-items:center;gap:8px;color:#cfd2d7}
.footer-contact .mdi{color:var(--red)}
.footer-col h4{color:#fff;font-size:.95rem;margin-bottom:16px;letter-spacing:.02em}
.footer-col ul{display:grid;gap:10px}
.footer-col a{color:#9aa0aa;font-size:.92rem;transition:color var(--t)}
.footer-col a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08)}
.footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;font-size:.82rem;color:#71767f}
.footer-scope{max-width:560px;text-align:right}
/* 2026-09-24: legal links in the bottom bar, opposite the copyright -- the same shape
   production's footer has (Elementor template 130: copyright left, an inline list of legal
   links right-aligned). It is a flex child of .footer-bottom-inner, so justify-content
   :space-between already puts it on the right; the ≤860px query below stacks and centres it
   with the copyright rather than leaving it hanging left. Colour is .footer-col a, so it
   reads as a link next to the dimmer copyright, exactly as the column links do above. */
.footer-legal{display:flex;flex-wrap:wrap;align-items:center;gap:22px}
.footer-legal a{color:#9aa0aa;transition:color var(--t)}
.footer-legal a:hover{color:#fff}

/* ================= LEGAL COPY =================
   Scope for counsel-drafted pages (currently /privacy-policy/, via page-privacy-policy.php).
   The copy is pasted VERBATIM from production and is never edited to suit the theme, so it
   arrives as bare <p>, <ul>/<li>, <hr> and <h2> with no classes on anything. The reset at the
   top of this file zeroes every margin and sets ul{list-style:none}; without this block the
   policy's four lists render as 26 undifferentiated lines and its section headings have no air
   around them. Spacing and colour ONLY -- nothing here changes a word. Declared after
   .entry-intro p (same specificity, so source order decides) and inside no media query.
   2026-09-24. */
.legal-copy p{margin-bottom:18px}
.legal-copy p strong{color:var(--ink)}
.legal-copy ul{list-style:disc;margin:0 0 18px;padding-left:24px}
.legal-copy li{color:var(--slate);font-size:1.06rem;margin-bottom:8px}
.legal-copy li:last-child{margin-bottom:0}
.legal-copy h2{font-size:1.6rem;margin:38px 0 18px}
.legal-copy hr{border:0;border-top:1px solid var(--line);margin:46px 0}
.legal-copy a{color:var(--red);text-decoration:underline;text-underline-offset:2px}
.legal-copy a:hover{color:var(--red-dk)}

/* about advocacy */
.about-advocacy{text-align:center;font-size:1.12rem;color:var(--slate);line-height:1.75}

/* ================= BREADCRUMBS ================= */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.82rem;color:rgba(255,255,255,.7);margin-bottom:16px}
.crumbs a{color:#fff;font-weight:600}
.crumbs a:hover{text-decoration:underline}
.crumbs .crumb-cur{color:rgba(255,255,255,.92)}

/* ================= SPOTLIGHT ================= */
.spotlight{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center}
.spotlight-media img{border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%;object-fit:cover;max-height:520px}
.spotlight-copy h2{font-size:1.9rem;margin-bottom:14px}
.spotlight-copy p{color:var(--slate);font-size:1.04rem;margin-bottom:14px}
.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. */
.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)}
.spec-id{display:flex;align-items:center;gap:22px}
.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)}
.spec-name{max-width:272px}  /* 250px broke "H-2B Specialist, Golf and Country Clubs" leaving "Clubs" alone on line 2 */
.spec-name h2{font-size:1.5rem;line-height:1.2;margin:6px 0 4px}
.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. */
.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. */
a.spec-cred-link{text-decoration:none;cursor:pointer;transition:background var(--t),color var(--t)}
a.spec-cred-link:hover,a.spec-cred-link:focus-visible{background:var(--red);color:#fff}
.spec-quote{margin:0 0 16px;padding-left:20px;border-left:3px solid var(--red)}
.spec-quote p{font-size:1.14rem;line-height:1.5;color:var(--ink);font-weight:500;margin:0}
.spec-text{color:var(--slate);font-size:1rem;margin:0 0 22px}
.spec-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.spec-mail{display:inline-flex;align-items:center;gap:7px;color:var(--slate);font-size:.92rem;font-weight:600}
.spec-mail .mdi{color:var(--red);font-size:1.1em}
.spec-mail:hover{color:var(--red)}
@media(max-width:900px){
  .spec{grid-template-columns:1fr;gap:26px;padding:30px 26px}
  .spec-id{gap:18px}
  .spec-photo{width:96px;height:96px;flex:0 0 96px}
  .spec-name h2{font-size:1.32rem}
}
@media(max-width:520px){
  .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. */
.offer-sec{padding:36px 0}
.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)}
.offer-badge{display:block;width:220px;height:80px;object-fit:contain}
.offer-copy .section-label{margin-bottom:7px}
.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. */
.offer-copy p{color:var(--slate);font-size:1rem;margin:0}
.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. */
.offer--flat{grid-template-columns:auto 1fr}
/* Two steps down, not one. Dropping straight to a single column at the first
   breakpoint left the copy filling half a 900px card with the other half empty.
   Badge and copy stay side by side and the button moves to its own row first;
   only a phone gets the full stack. */
@media(max-width:1080px){
  .offer{grid-template-columns:auto 1fr;gap:18px 32px;padding:26px 28px}
  .offer-copy h2{font-size:1.38rem}
  .offer-cta{grid-column:1 / -1;justify-self:start}
}
/* Phone: centred, not left-aligned. Tristan, 2026-08-31. Once the card is a single
   narrow column the badge, the label and a two-line headline all start at different
   optical positions and the block reads ragged; centring gives it one axis.
   The red rule moves from the left edge to the TOP with it — a left rule against
   centred content points at nothing. Button goes full width, which is what a phone
   expects of a primary CTA and stops it floating alone in the middle. */
@media(max-width:620px){
  .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)}
  .offer-badge{width:176px;height:64px}
  .offer-copy h2{font-size:1.3rem}
  .offer-cta{width:100%;justify-self:stretch}
}

/* ---- /ngcoa/ : the offer IS the hero, so the badge sits above the headline ----
   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.
   (The eyebrow that used to follow it came off 2026-09-01 at NGCOA's request.) */
.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)}

/* Renee Flowers' four member benefits, 2026-09-01. They replace the lede under the
   headline, so they carry the lede's colour and measure rather than reading as a
   secondary list. Markers are drawn with ::before because the site reset is
   list-style:none; a real disc would sit outside the 640px measure at the wrong
   optical size. Two columns would split a four-item list unevenly and force a
   narrow measure over a photograph, so it stays one column. */
.ngcoa-hero-list{max-width:640px;margin:0 0 4px;padding:0;list-style:none}
.ngcoa-hero-list li{position:relative;padding-left:24px;margin-bottom:11px;
  color:rgba(255,255,255,.88);font-size:1.06rem;line-height:1.55}
.ngcoa-hero-list li:last-child{margin-bottom:0}
.ngcoa-hero-list li::before{content:"";position:absolute;left:2px;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--red)}

/* Roles we staff, as a plain list instead of .chip pills (2026-09-01, NGCOA:
   the pills "don't go anywhere"). Centred as a block, left-aligned inside it, so
   six ragged-length roles do not comb into an unreadable centred column. */
.role-list{max-width:760px;margin:0 auto;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 40px}
.role-list li{position:relative;padding-left:22px;font-weight:600;
  font-size:1rem;color:var(--charcoal)}
.role-list li::before{content:"";position:absolute;left:2px;top:.6em;
  width:7px;height:7px;border-radius:50%;background:var(--red)}
@media(max-width:620px){
  .role-list{grid-template-columns:1fr;gap:11px}
}

/* 🔴 .section-header is max-width:760px with auto margins and text-align:center.
   This 640px box inside it had NO auto margins, so it sat flush left and its
   centred text landed ~60px left of the h2 above it. Renee Flowers, 2026-09-01:
   "The 'Tell us....' Is not centered - it appears left justified". She was reading
   a real defect, not a preference. Any max-width added to a child of
   .section-header needs the auto margins with it. */
.ngcoa-start .section-desc{max-width:640px;margin-left:auto;margin-right:auto}
.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. */
.ngcoa-start .offer-sec{background:transparent;padding:0}
.ngcoa-start .offer-sec .container{padding:0;max-width:none}
.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. */
  .ngcoa-hero-badge{width:176px;height:64px}
}

/* ================= MEDIA INQUIRIES (press page) ================= */
.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)}
.media-inq-copy h2{font-size:1.7rem;margin:6px 0 14px}
.media-inq-copy p{color:var(--slate);font-size:1.02rem;margin:0}
.media-inq-actions .btn{width:100%}
.media-inq-note{margin:14px 0 0;font-size:.92rem;color:var(--slate)}
.media-inq-note a{color:var(--charcoal);font-weight:600;border-bottom:1px solid var(--line)}
.media-inq-note a:hover{color:var(--red);border-color:var(--red)}
.media-inq-alt{padding-top:14px;border-top:1px solid var(--line);color:var(--muted);font-size:.88rem}
@media(max-width:900px){
  .media-inq{grid-template-columns:1fr;gap:26px;padding:30px 26px}
  .media-inq-copy h2{font-size:1.4rem}
}

/* ================= RELATED LINKS ================= */
.related-links{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:900px;margin:0 auto}
.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)}
.related-pill .mdi{color:var(--red);transition:transform var(--t)}
.related-pill:hover{border-color:var(--red);color:var(--red);transform:translateY(-2px);box-shadow:var(--shadow)}
.related-pill:hover .mdi{transform:translateX(3px)}

/* ================= PROCESS TIMELINE ================= */
/* Photo band. The timeline itself inverts to light-on-dark here. */
.process{position:relative;overflow:hidden;background:#0e1014}
.process-bg{position:absolute;inset:0;background-size:cover;background-position:center 35%;z-index:0}
.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. */
.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. */
.process.process--photo .section-label{color:#ffd2d9}
.process.process--photo .section-desc{color:rgba(255,255,255,.9)}
.process.process--photo .tl-step p{color:rgba(255,255,255,.88)}
.process .container{position:relative;z-index:2}
.process .section-header h2{color:#fff}
.process .section-desc{color:rgba(255,255,255,.76)}
.process .section-label{color:#ff8c9e}
.process .tl-node{background:#fff;border-color:var(--red)}
.process .tl-node .mdi{color:var(--red)}
.process .tl-step h3{color:#fff}
.process .tl-step p{color:rgba(255,255,255,.72)}
.process .timeline::before{opacity:.5}
.timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;position:relative}
.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}
.tl-step{position:relative;z-index:1;text-align:center;padding:0 6px}
.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}
.tl-node .mdi{font-size:1.7rem;color:var(--red)}
.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}
.tl-step h3{font-size:1.05rem;margin-bottom:7px}
.tl-step p{color:var(--slate);font-size:.9rem}

/* ================= TN + EB-3: the H-2 bands' replacements (2026-10-02) ================= */
/* Julia: the TN and EB-3 pages carried H-2 info (the stat rail) and the generic H-2
   timeline. Those two entries now render without the rail, with the live site's TN
   "How it works" copy (ml_how_it_works) and the EB-3 Timeline tracker (ml_eb3_tracker)
   in the timeline's slot. Nothing here applies to any other page. */
/* The rail used to carry the hero's bottom spacing; without it the button would sit on
   the hero's bottom edge. */
.page-hero-nostats > .container{padding-bottom:76px}
.help-note{max-width:1000px;margin:26px auto 0;text-align:center;color:var(--slate);font-size:1.02rem;line-height:1.7}
.how-text p{color:var(--slate);font-size:1.06rem;line-height:1.75;margin-bottom:16px}
.how-text p:last-child{margin-bottom:0}
/* EB-3 tracker. Same reading order as the live widget: start-date field, the 3-year
   note, then ten milestones alternating red and grey down a centre line. Each step spans
   two half-rows so the next one starts halfway down it, on the other side. */
.tracker{max-width:1000px;margin:0 auto}
.tracker-form{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:12px 14px}
.tracker-field{display:flex;flex-direction:column;gap:6px;text-align:left}
.tracker-field label{font-size:.82rem;font-weight:700;color:var(--charcoal)}
.tracker-field input{font:inherit;font-size:.95rem;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:9px 12px;min-height:44px}
.tracker-field input:focus{outline:2px solid var(--red);outline-offset:1px}
.tracker-form .btn{min-height:44px}
.tracker-note{max-width:760px;margin:18px auto 46px;text-align:center;font-size:.9rem;color:var(--slate);line-height:1.65}
.tracker-list{list-style:none;position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:72px;
  grid-auto-rows:auto;padding:0;margin:0}
.tracker-list::before{content:"";position:absolute;top:8px;bottom:8px;left:50%;width:2px;margin-left:-1px;background:var(--line)}
.tracker-step{position:relative;grid-row:var(--r) / span 2;align-self:start;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 22px 20px;margin-bottom:18px}
.tracker-step:nth-child(odd){grid-column:1}
.tracker-step:nth-child(even){grid-column:2}
.tracker-step::after{content:"";position:absolute;top:24px;width:16px;height:16px;border-radius:50%;background:#fff;
  border:3px solid var(--red);box-sizing:border-box}
.tracker-step:nth-child(odd)::after{right:-44px}
.tracker-step:nth-child(even)::after{left:-44px;border-color:var(--slate)}
.tracker-date{display:inline-block;background:var(--red);color:#fff;font-weight:700;font-size:.9rem;
  padding:5px 14px;border-radius:30px;margin-bottom:10px}
.tracker-step:nth-child(even) .tracker-date{background:var(--slate)}
.tracker:not(.is-dated) .tracker-date{display:none}
.tracker-title{display:block;font-weight:800;font-size:.95rem;color:var(--ink);margin-bottom:4px}
.tracker-desc{display:block;color:var(--slate);font-size:.95rem;line-height:1.55}
@media (max-width:900px){
  .tracker-list{grid-template-columns:1fr;padding-left:34px}
  .tracker-list::before{left:7px;margin-left:0}
  .tracker-step,.tracker-step:nth-child(odd),.tracker-step:nth-child(even){grid-column:1;grid-row:auto}
  .tracker-step:nth-child(odd)::after,.tracker-step:nth-child(even)::after{left:-34px;right:auto}
}

/* ================= POST CARDS ================= */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.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)}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.post-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg-alt)}
.post-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.post-card:hover .post-thumb img{transform:scale(1.05)}
.post-thumb-fallback{position:absolute;inset:0;display:grid;place-items:center;color:var(--line)}
.post-thumb-fallback i{font-size:2.6rem}
.post-card-body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}

/* Pagination */
.pagination{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:44px}
.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)}
.pagination a.page-numbers:hover{border-color:var(--red);color:var(--red)}
.pagination .page-numbers.current{background:var(--red);border-color:var(--red);color:#fff}
.pagination .page-numbers.dots{border-color:transparent;background:none}
.post-cat{font-size:.8rem;font-weight:700;letter-spacing:.01em;color:var(--red);margin-bottom:10px}
.post-card h3{font-size:1.18rem;margin-bottom:10px;line-height:1.3}
.post-card p{color:var(--slate);font-size:.93rem;flex:1}
.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. */
.post-meta{color:rgba(255,255,255,.8);font-size:.9rem;margin-top:16px;letter-spacing:.02em}
.post-hero-img{margin-top:-56px;position:relative;z-index:3}
.post-hero-img img{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:var(--radius);
  box-shadow:var(--shadow-lg);display:block}
.section-tight{padding-top:56px}
.post-content{font-size:1.08rem;color:var(--charcoal);line-height:1.75}
.post-content img{max-width:100%;height:auto;border-radius:var(--radius);margin:8px 0 24px}
.post-content figure{margin:0 0 24px}
.post-content figcaption{font-size:.86rem;color:var(--muted);margin-top:8px}
.post-content ul,.post-content ol{margin:0 0 20px 22px}
.post-content li{margin-bottom:8px}
.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}
.post-content a{color:var(--red);text-decoration:underline;text-underline-offset:2px}
.post-content p{margin-bottom:20px}
.post-content h2{font-size:1.55rem;margin:36px 0 14px}
.post-content h3{font-size:1.22rem;margin:26px 0 12px}
.post-content ul,.post-content ol{margin:0 0 20px 22px}
.post-content li{margin-bottom:8px}
.post-content a{color:var(--red);font-weight:600;text-decoration:underline}
.post-content strong{color:var(--ink)}
.post-cta{margin-top:38px;padding-top:30px;border-top:1px solid var(--line);text-align:center}

/* ================= AFFILIATIONS ================= */
.affil{padding:52px 0 56px;border-bottom:1px solid var(--line);background:#fff}
.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. */
.affil-row{--cols:4;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.
   4. (2026-09-15) 16 marks since NGCOA and GCBAA were added, so the row is 4 columns:
      5 columns left a single mark centred on its own fourth row. The img box is wider
      than the mark (object-fit keeps it 213x78), which reads as air, not a defect.
   5. (2026-09-15) min-width:0 on the img. A flex item's automatic minimum is its
      content size, and for an img with height:78px that is the aspect-ratio width,
      213px. Below ~1180px the cell is narrower than that, the mark refused to shrink,
      and phones rendered ONE mark per row, 16 rows tall. Two columns on phones only
      ever worked while the images were still lazy-loading. */
.affil-row img{flex:0 0 calc((100% - (var(--cols) - 1) * 20px) / var(--cols));min-width:0;
  height:78px;object-fit:contain;object-position:center;
  filter:grayscale(1);opacity:.62;transition:all var(--t)}
.affil-row img:hover{filter:grayscale(0);opacity:1;transform:translateY(-2px)}
@media (max-width:900px){.affil-row{row-gap:30px}}
@media (max-width:760px){.affil-row{--cols:2}}

/* ================= SEASONAL CALENDAR ================= */
.cal{max-width:960px;margin:0 auto}
.cal-track{display:flex;gap:6px;border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.cal-seg{padding:22px 18px;color:#fff;display:flex;flex-direction:column;gap:6px;min-width:0}
.cal-seg .cal-time{font-size:.8rem;font-weight:700;letter-spacing:.01em;opacity:.9}
.cal-seg .cal-phase{font-size:1.02rem;font-weight:700;line-height:1.2}
.cal-a{background:#7a0016}.cal-b{background:#b0001f}.cal-c{background:var(--red)}.cal-d{background:#ff3b58}
.cal-foot{text-align:center;color:var(--slate);font-size:.95rem;margin-top:18px}

/* ================= TESTIMONIALS ================= */
.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. */
.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}
.tmt-card p{font-size:1.05rem;color:var(--charcoal);line-height:1.6;margin-bottom:18px}
.tmt-card cite{margin-top:auto}
.tmt-card cite{font-style:normal;font-size:.92rem;color:var(--muted)}
.tmt-card cite strong{color:var(--ink)}
.case-result{color:var(--red)!important;font-weight:700!important}

/* ================= LEADERSHIP ================= */
.lead-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.lead-card{text-align:center;display:flex;flex-direction:column;align-items:center}
.lead-card img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;margin-bottom:14px}
.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. */
.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}
.lead-card p{color:var(--slate);font-size:.9rem;margin-top:8px}
.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)}
.lead-li:hover{background:var(--red);color:#fff}
.lead-li .mdi{font-size:1.1rem}

/* ================= EMPTY STATE ================= */
.empty-state{max-width:560px;margin:0 auto;text-align:center;padding:36px 0}
.empty-state .mdi{font-size:3rem;color:var(--red);margin-bottom:14px;display:block}
.empty-state h2{font-size:1.7rem;margin-bottom:10px}
.empty-state p{color:var(--slate);font-size:1.05rem;margin-bottom:22px}

@media (max-width:1040px){.lead-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.lead-grid{grid-template-columns:1fr}}

@media (max-width:1040px){.tmt-grid{grid-template-columns:1fr 1fr}}
@media (max-width:820px){.cal-track{flex-direction:column}.cal-seg{flex:none!important}}
@media (max-width:560px){.tmt-grid{grid-template-columns:1fr}}
/* The homepage h1 carries an authored <br> so the desktop line breaks after "behind";
   on a phone that break strands one word, so let it wrap naturally there. */
@media (max-width:560px){.hero h1 br{display:none}}

@media (max-width:1040px){
  .timeline{grid-template-columns:repeat(2,1fr);gap:36px 20px}
  .timeline::before{display:none}
  .spotlight{grid-template-columns:1fr;gap:32px}
  .spotlight-media{order:-1}
  .post-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .timeline{grid-template-columns:1fr}
  .post-grid{grid-template-columns:1fr}
}

/* ================= SCROLL REVEAL ================= */
[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .7s ease}
[data-reveal="fade-left"]{transform:translateX(38px)}
[data-reveal="fade-right"]{transform:translateX(-38px)}
[data-reveal-delay="1"]{transition-delay:.1s}
[data-reveal-delay="2"]{transition-delay:.22s}
[data-reveal-delay="3"]{transition-delay:.34s}
[data-reveal].revealed{opacity:1;transform:none}
.hero-eyebrow,.hero h1,.hero-sub,.hero-buttons{opacity:0;transform:translateY(26px);animation:heroIn .8s cubic-bezier(.4,0,.2,1) forwards}
.hero h1{animation-delay:.12s}.hero-sub{animation-delay:.26s}.hero-buttons{animation-delay:.4s}
@keyframes heroIn{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){[data-reveal],.hero-eyebrow,.hero h1,.hero-sub,.hero-buttons{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}}

/* ================= RESPONSIVE ================= */
@media (max-width:1040px){
  .statbar-grid{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .stat{border-bottom:1px solid rgba(255,255,255,.09)}
  .pillars,.res-grid,.res-grid-wide{grid-template-columns:repeat(2,1fr)}
  .challenge-grid{grid-template-columns:repeat(2,1fr)}
  .ind-grid>.ind-card{flex:0 1 calc(50% - 11px)}
  .why-grid,.masdata-inner,.entry-split,.contact-grid{grid-template-columns:1fr;gap:40px}
  .why-media,.entry-media{order:-1}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .main-nav,.header-actions{display:none}
  .mobile-menu-toggle{display:flex}
  .top-bar-item:not(.top-bar-phone){display:none}
  .top-bar-inner{justify-content:flex-end}
  .section{padding:70px 0}
  .section-header h2{font-size:1.9rem}
  .cta-band-inner{flex-direction:column;text-align:center;align-items:center}
  .footer-bottom-inner{flex-direction:column;text-align:center}
  .footer-legal{justify-content:center}
  .footer-scope{text-align:center}
}
@media (max-width:560px){
  .pillars,.res-grid,.res-grid-wide,.challenge-grid,.footer-grid,.field-row{grid-template-columns:1fr}
  .ind-grid>.ind-card{flex:0 1 100%;min-width:0}
  .statbar-grid{grid-template-columns:1fr}
  .hero-buttons{flex-direction:column;align-items:stretch}
  .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. */
  .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. */
  .mini-cta-inner{padding-top:78px;padding-bottom:78px}
  .cta-band-inner{padding-top:64px;padding-bottom:64px}
}

/* ================= ADVOCACY LIST ================= */
.advocacy-list{display:grid;gap:12px;margin-top:28px}
.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)}
.advocacy-item:hover{transform:translateX(4px);box-shadow:var(--shadow)}
.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)}
.advocacy-item:hover .advocacy-thumb{transform:scale(1.05)}
.advocacy-copy{padding:20px 24px;display:flex;flex-direction:column;justify-content:center;min-height:104px}
@media (max-width:620px){
  .advocacy-item{flex-direction:column}
  .advocacy-thumb{flex:0 0 150px;height:150px}
}
.advocacy-meta{display:block;font-size:.8rem;font-weight:600;letter-spacing:.01em;
  color:var(--muted);margin-bottom:7px}
.advocacy-title{display:block;font-weight:700;font-size:1.03rem;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
.advocacy-item:hover .advocacy-title{color:var(--red)}

/* ================= WEBINAR PRESENTER ================= */
/* Must out-specify .post-card p{flex:1} (0,1,1), 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) ================= */
.outcome-list{display:grid;grid-template-columns:1fr 1fr;gap:26px 40px;max-width:1000px;margin:0 auto}
.outcome{display:flex;gap:16px;align-items:flex-start}
.outcome .mdi{font-size:1.4rem;color:var(--red);flex-shrink:0;line-height:1.5}
.outcome h3{font-size:1.08rem;margin-bottom:6px;line-height:1.32}
.outcome p{color:var(--slate);font-size:.95rem}

/* ================= FAQ HUB ================= */
.faq-group{margin-bottom:52px}
.faq-group:last-child{margin-bottom:0}
.faq-group-head{border-bottom:2px solid var(--line);padding-bottom:14px;margin-bottom:8px;position:relative}
.faq-group-head h2{font-size:1.55rem;margin-bottom:6px}
.faq-group-link{font-size:.86rem;font-weight:600;color:var(--red)}
.faq-group-link:hover{text-decoration:underline}
.faq-list .faq-item{background:none;border:0;border-radius:0;overflow:visible;
  border-bottom:1px solid var(--line)}
.faq-list .faq-item:last-child{border-bottom:0}
.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)}
.faq-list .faq-item summary::-webkit-details-marker{display:none}
.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)}
.faq-list .faq-item[open] summary::after{content:'\2013'}
.faq-list .faq-item summary:hover{color:var(--red)}
.faq-list .faq-item p{color:var(--slate);font-size:.97rem;padding:0 42px 20px 0;margin-top:-4px}

@media(max-width:860px){
  .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. */
.tmt-band{position:relative;overflow:hidden;background:var(--bg-alt)}
.tmt-band-bg{display:none} /* ghosted photo removed: at .3 under a second wash it read as a rendering fault */
.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%)}
.tmt-band .container{position:relative;z-index:2}
.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. */
.cov-band{position:relative;overflow:hidden}
.cov-band-bg{position:absolute;inset:0;background-size:cover;background-position:center 40%;z-index:0;opacity:.26}
.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%)}
.cov-band .container{position:relative;z-index:2}
.cov-band .chip{background:rgba(255,255,255,.94);backdrop-filter:blur(3px);box-shadow:0 2px 10px rgba(20,22,26,.06)}

/* ================= PARALLAX BACKGROUNDS ================= */
/* Photo bands hold still while the page scrolls over them. Only on pointer devices with
   a real hover: iOS Safari renders background-attachment:fixed at the wrong scale and
   judders, so touch keeps the normal scrolling background. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .page-hero-bg,
  .process-bg,
  .tmt-band-bg,
  .cov-band-bg{background-attachment:fixed}
}

/* Webinar cards have no post behind them, so the thumb is a background layer, not an <img>. */
.post-thumb-img{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.post-card:hover .post-thumb-img{transform:scale(1.05)}

/* Stats sit in the normal flow again once the hero is short enough that overlapping would
   collide with the copy. */
@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. */
  .hero{min-height:clamp(520px,74vh,680px)}
  .why-media{min-height:280px}
}

/* ================= TRUST / PROOF BAND ================= */
/* Stats + cleared client marks. Distinct from the hero stat bar, which stays hidden. */
.trust{background:var(--bg-alt)}
.trust-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:900px;
  margin:0 auto 52px;text-align:center}
.trust-stat{display:flex;flex-direction:column;gap:6px}
.trust-num{font-size:clamp(2.4rem,4.4vw,3.4rem);font-weight:800;line-height:1;color:var(--ink);
  letter-spacing:-.02em}
.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. */
.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)}
.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}
.trust-logos-cap + .trust-logos{padding-top:0;border-top:0}
.trust-logos-few img{height:52px}
.trust-logos img{height:62px;width:auto;max-width:210px;object-fit:contain;opacity:.85;
  transition:opacity var(--t)}
.trust-logos img:hover{opacity:1}
@media (max-width:700px){
  .trust-stats{grid-template-columns:1fr;gap:32px;margin-bottom:38px}
  .trust-logos{gap:14px 32px}
  .trust-logos img{height:48px}
}

/* ================= ORIGIN STORY (About) ================= */
.story{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center}
.story-copy h2{font-size:2.1rem;margin-bottom:22px;max-width:20ch}
.story-copy p{color:var(--slate);font-size:1.05rem;line-height:1.75;margin-bottom:18px}
.story-copy p:last-child{margin-bottom:0}
.story-copy strong{color:var(--ink);font-weight:700}
.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){
  .story{grid-template-columns:1fr;gap:36px}
  .story-media{order:-1}
  .story-media img{aspect-ratio:16/10}
  .story-copy h2{font-size:1.72rem;max-width:none}
}

/* ================= CASE STUDIES ================= */
.cs-tags{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.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}
.cs-tag-red{background:var(--red-soft);color:var(--red)}

/* --- homepage teaser --- */
.cs-teaser-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
.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)}
.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 */
.cs-card-photo{display:block;height:200px;background-size:cover;background-position:center;
  transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.cs-card:hover .cs-card-photo{transform:scale(1.06)}
.cs-card-body{display:flex;flex-direction:column;padding:24px;flex:1}
.cs-card-body h3{font-size:1.18rem;margin-bottom:8px;line-height:1.25}
.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 ---- */
.csx-cover{position:relative;overflow:hidden;background:#0e1014;color:#fff;
  padding:132px 0 0;min-height:660px;display:flex;align-items:flex-end}
.csx-cover-bg{position:absolute;inset:0;background-size:cover;background-position:center 38%;z-index:0}
.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%)}
.csx-cover-inner{position:relative;z-index:2;width:100%}
.csx-cover-eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--red);margin-bottom:18px}
.csx-cover h1{color:#fff;font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:1.08;max-width:16ch;margin-bottom:20px}
.csx-cover-lede{font-size:1.12rem;line-height:1.65;color:rgba(255,255,255,.82);max-width:60ch}

.csx-proof{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px;
  border-top:1px solid rgba(255,255,255,.16)}
.csx-proof-item{display:block;padding:26px 30px 34px;border-right:1px solid rgba(255,255,255,.16);
  transition:background var(--t)}
.csx-proof-item:first-child{padding-left:0}
.csx-proof-item:last-child{border-right:0}
.csx-proof-item:hover{background:rgba(255,255,255,.05)}
.csx-proof-num{display:block;font-size:2.5rem;font-weight:800;line-height:1;color:#fff;letter-spacing:-.03em}
.csx-proof-num em{font-style:normal;font-size:.98rem;font-weight:650;color:var(--red);margin-left:6px;
  letter-spacing:0}
.csx-proof-label{display:block;margin-top:10px;font-size:.9rem;line-height:1.45;color:rgba(255,255,255,.74)}
.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. */
.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. */
.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. */
.csx-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:22px}
.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)}
.csx-idx em{font-style:normal;color:#c9cdd4}

.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. */
.csx-head-copy{display:flex;flex-direction:column;justify-content:center}

.csx-head-media{position:relative;overflow:hidden;border-radius:var(--radius);
  box-shadow:var(--shadow-lg);min-height:360px}
.csx-head-media img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.4,0,.2,1)}
.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. */
.csx-body{padding:74px 0 78px;background:#fff}
.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. */
.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)}
.csx-facts li{position:relative;font-size:.92rem;color:var(--charcoal);padding-left:28px}
.csx-facts li::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:14px;background:var(--line)}
.csx-facts li:first-child{padding-left:0}
.csx-facts li:first-child::before{display:none}
.csx-facts-link{margin-left:auto;padding-left:0!important}
.csx-facts-link::before{display:none!important}
.csx-facts-link a{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.9rem;
  color:var(--red);white-space:nowrap}
.csx-facts-link .mdi{transition:transform var(--t)}
.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. */
.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. */
.csx-cols{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding-bottom:50px;
  border-bottom:1px solid var(--line)}
.csx-col h3,.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}
.csx-col p{color:var(--slate);line-height:1.8;font-size:1.02rem}

.csx-outcomes{padding-top:48px}
.csx-outcomes-head{margin-bottom:30px}
.csx-outcome-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.csx-outcome{padding:0 34px;border-left:1px solid var(--line)}
.csx-outcome:first-child{padding-left:0;border-left:0}
.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}
.csx-outcome p{color:var(--slate);font-size:.98rem;line-height:1.72}

/* ---- Story: quote ---- */
.csx-quote{position:relative;overflow:hidden;padding:80px 0}
.csx-quote-bg{position:absolute;inset:0;background-size:cover;background-position:center 45%;z-index:0;
  opacity:.2;filter:grayscale(1)}
.csx-quote::after{content:"";position:absolute;inset:0;z-index:1;background:var(--ink);opacity:.93}
.csx-quote .container{position:relative;z-index:2}
.csx-quote blockquote{max-width:960px;position:relative;padding-left:70px}
.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}
.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}
.csx-quote cite{font-style:normal;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.csx-quote cite strong{color:#fff;font-size:1rem}
.csx-quote cite span{color:rgba(255,255,255,.64);font-size:.94rem}

@media (max-width:1000px){
  .csx-proof{grid-template-columns:repeat(2,1fr)}
  .csx-proof-item{padding:22px 24px 26px}
  .csx-proof-item:nth-child(odd){padding-left:0}
  .csx-proof-item:nth-child(2n){border-right:0}
  .csx-cols{grid-template-columns:1fr;gap:32px}
  .csx-outcome-grid{grid-template-columns:1fr;gap:26px}
  .csx-outcome{padding:0 0 0 22px;border-left:2px solid var(--red-soft)}
  .csx-outcome:first-child{padding-left:22px;border-left:2px solid var(--red-soft)}
}
@media (max-width:860px){
  .csx-cover{min-height:0;padding:96px 0 0}
  .csx-head{grid-template-columns:1fr;gap:30px}
  .csx-head-media{order:-1}
  .csx-facts-link{margin-left:0}
  .csx-lead{font-size:1.2rem;max-width:none}
  .csx-quote{padding:56px 0}
  .csx-quote blockquote{padding-left:0}
  .csx-quote blockquote::before{position:static;display:block;font-size:3.6rem;margin-bottom:-16px}
}

.cs-client{font-size:1.05rem;font-weight:700;color:var(--red);margin-bottom:14px}
.cs-quote{border-left:3px solid var(--red);padding-left:20px}
.cs-quote p{font-size:1.02rem;line-height:1.65;color:var(--ink);margin-bottom:12px}
.cs-quote cite{font-style:normal;font-size:.88rem;color:var(--muted);line-height:1.5;display:block}
.cs-quote cite strong{color:var(--ink)}

.cs-cta{position:relative;overflow:hidden;color:#fff;text-align:center}
.cs-cta::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(12,13,16,.72)}
.cs-cta .container{position:relative;z-index:2}
.cs-cta h2{color:#fff;font-size:2.1rem;margin-bottom:12px}
.cs-cta p{color:rgba(255,255,255,.85);margin-bottom:28px}

@media (max-width:900px){.cs-card{flex:0 1 calc(50% - 11px)}}
@media (max-width:700px){.cs-card{flex:0 1 100%;min-width:0}}

/* case study proof block on a vertical page */
.cs-proof{background:var(--bg-alt)}
.cs-proof-inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:center;
  max-width:1040px;margin:0 auto}
.cs-proof-media img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow-lg);
  aspect-ratio:4/3;object-fit:cover}
.cs-proof-copy h2{font-size:1.85rem;margin-bottom:8px}
.cs-proof-copy .cs-quote{margin:20px 0 26px}
@media (max-width:900px){
  .cs-proof-inner{grid-template-columns:1fr;gap:28px}
  .cs-proof-copy h2{font-size:1.55rem}
}


/* ============ másMX + másData PAGES (2026-09-09) ==============================
   These two pages deliberately reproduce másLabor's LIVE page designs rather than the
   staging redesign. Julia asked for both to carry what másLabor already publishes.
   A static capture of the live Elementor pages was tried and abandoned: that page needs
   38 scripts (Elementor Pro webpack runtime, Swiper, ElementsKit, TranslatePress) and
   without them the hero slider and every animated block renders as an empty box.
   Everything below is plain CSS and needs no JavaScript. */

/* --- shared bits --- */
.mx-label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);margin-bottom:12px}
.mx-label-light{color:#ff8fa1}
.mx-center{text-align:center;max-width:900px;margin:0 auto 46px}
.mx-lede{color:var(--slate);font-size:1.05rem;line-height:1.7;max-width:820px;margin:14px auto 0}
.mx-btn{display:inline-block;padding:15px 30px;border-radius:8px;font-weight:700;font-size:.95rem;
  text-decoration:none;transition:all var(--t);border:2px solid transparent}
.mx-btn-red{background:var(--red);color:#fff;border-color:var(--red)}
.mx-btn-red:hover{background:var(--red-dk);border-color:var(--red-dk)}
.mx-btn-light{background:#fff;color:var(--ink);border-color:#fff}
.mx-btn-light:hover{background:transparent;color:#fff}
.mx-hero h1,.md-hero h1{font-size:clamp(2.2rem,4.6vw,3.5rem);line-height:1.12;letter-spacing:-.03em;
  color:#fff;margin:0 0 18px}
.mx-eyebrow{display:block;font-size:.8rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:#ff8fa1;margin-bottom:14px}

/* --- hero, both pages --- */
.mx-hero,.md-hero{position:relative;min-height:74vh;display:flex;align-items:center;
  padding:120px 0 90px;overflow:hidden;background:var(--bg-dark)}
.mx-hero-bg,.md-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.mx-hero::after,.md-hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(10,11,13,.90) 0%,rgba(10,11,13,.72) 46%,rgba(10,11,13,.34) 100%)}
.mx-hero-inner{position:relative;z-index:2;max-width:760px}
/* wider than másMX's: 760px split "From Application to Arrival." onto three lines */
.md-hero-inner{position:relative;z-index:2;max-width:900px}
.mx-hero-inner p,.md-hero-inner p{color:#d3d7dd;font-size:1.06rem;line-height:1.7;margin:0 0 26px;max-width:640px}
.md-hero-logo{height:46px;width:auto;margin-bottom:24px;display:block}
.md-hero-cta{display:flex;gap:12px;flex-wrap:wrap}

/* --- trust strip --- */
.mx-trust{background:var(--bg-alt);border-bottom:1px solid var(--line)}
.mx-trust-inner{display:flex;gap:70px;justify-content:center;padding:34px 0}
.mx-trust-item{text-align:center}
.mx-trust-item .n{display:block;font-size:2.3rem;font-weight:800;color:var(--red);letter-spacing:-.04em;line-height:1}
.mx-trust-item .l{display:block;margin-top:7px;color:var(--muted);font-size:.9rem}

/* --- about, photo collage + red years card --- */
.mx-about{padding:96px 0}
.mx-about-grid{display:grid;grid-template-columns:1fr 1.06fr;gap:64px;align-items:center}
.mx-collage{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:18px;align-items:start}
.mx-collage-a{grid-row:1/3;margin:0;border-radius:14px;overflow:hidden;box-shadow:var(--shadow);align-self:center}
.mx-collage-a img{width:100%;height:390px;object-fit:cover;display:block}
.mx-collage-stat{background:var(--red);color:#fff;border-radius:14px;padding:26px 20px;text-align:center;
  box-shadow:var(--shadow)}
.mx-collage-stat .n{display:block;font-size:2.5rem;font-weight:800;letter-spacing:-.04em;line-height:1}
.mx-collage-stat .l{display:block;margin-top:6px;font-size:.86rem;opacity:.92}
.mx-collage-b{margin:0;border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.mx-collage-b img{width:100%;height:250px;object-fit:cover;display:block}
.mx-about-copy h2{font-size:clamp(1.8rem,3vw,2.4rem);letter-spacing:-.025em;margin:0 0 20px;line-height:1.18}
.mx-about-copy p{color:var(--slate);line-height:1.78;margin:0 0 18px}

/* --- Monterrey recruitment event (our one addition) --- */
.mx-event{padding:92px 0;background:var(--bg-alt)}
.mx-event h2{font-size:clamp(1.8rem,3vw,2.4rem);letter-spacing:-.025em;margin:0}
.mx-event-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 30px}
.mx-event-stats>div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px 18px;text-align:center}
.mx-event-stats .n{display:block;font-size:2.6rem;font-weight:800;color:var(--ink);letter-spacing:-.045em;line-height:1}
.mx-event-stats .n::after{content:"";display:block;width:30px;height:3px;background:var(--red);margin:12px auto 0}
.mx-event-stats .l{display:block;margin-top:12px;color:var(--muted);font-size:.88rem}
.mx-event-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 22px}
.mx-event-grid figure{margin:0;border-radius:12px;overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow)}
.mx-event-grid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--t)}
.mx-event-grid figure:hover img{transform:scale(1.04)}
.mx-event-note{text-align:center;color:var(--muted);font-size:.98rem;max-width:760px;margin:0 auto}

/* --- why choose us: dark field band, cut-out figure, floating cards --- */
.mx-why{position:relative;padding:92px 0 0;overflow:hidden;background:#2b3038}
.mx-why-bg{position:absolute;inset:0;background-size:cover;background-position:center bottom;z-index:0}
.mx-why::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(28,32,38,.94) 0%,rgba(28,32,38,.62) 46%,rgba(28,32,38,.30) 100%)}
.mx-why-inner{position:relative;z-index:2}
.mx-why-head h2{color:#fff;font-size:clamp(1.8rem,3.2vw,2.5rem);letter-spacing:-.025em;line-height:1.2;margin:0}
.mx-why-head .mx-lede{color:#c8ccd3}
.mx-why-stage{display:grid;grid-template-columns:1fr .78fr 1fr;gap:26px;align-items:end}
.mx-why-col{display:flex;flex-direction:column;gap:18px;padding-bottom:56px}
.mx-why-card{display:flex;gap:14px;background:#fff;border-radius:14px;padding:16px 18px;box-shadow:var(--shadow-lg)}
.mx-why-card i{color:var(--red);font-size:1.7rem;line-height:1;flex:none;margin-top:2px}
.mx-why-card h3{font-size:1rem;margin:0 0 4px;letter-spacing:-.01em}
.mx-why-card p{font-size:.86rem;color:var(--slate);line-height:1.5;margin:0}
.mx-why-figure{align-self:end}
.mx-why-figure img{width:100%;height:auto;display:block}

/* --- team headshot cards, both pages --- */
.mx-team,.md-team{padding:92px 0}
.mx-team h2,.md-team h2{font-size:clamp(1.8rem,3vw,2.4rem);letter-spacing:-.025em;margin:0}
.mx-team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.md-team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.mx-person,.md-person{margin:0;position:relative;border-radius:14px;overflow:hidden;background:#eceef1;
  box-shadow:var(--shadow)}
.mx-person img,.md-person img{width:100%;display:block;filter:grayscale(1);transition:filter var(--t),transform var(--t)}
.mx-person img{height:330px;object-fit:cover;object-position:center top}
.md-person img{height:300px;object-fit:cover;object-position:center 18%}
.mx-person:hover img,.md-person:hover img{filter:grayscale(0);transform:scale(1.03)}
.mx-person figcaption,.md-person figcaption{position:absolute;left:14px;right:14px;bottom:14px;
  background:rgba(12,13,16,.90);border-radius:10px;padding:12px 14px;text-align:center;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.mx-person .nm,.md-person .nm{display:block;color:#fff;font-weight:700;font-size:.94rem;line-height:1.3}
.md-person .nm{font-size:.88rem}
.mx-person .rl,.md-person .rl{display:block;margin-top:4px;color:var(--red);font-size:.7rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase}

/* --- másData specific --- */
.md-intro{padding:96px 0}
.md-intro-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center}
.md-intro-copy h2{font-size:clamp(1.8rem,3vw,2.4rem);letter-spacing:-.025em;margin:0 0 20px;line-height:1.18}
.md-intro-copy p{color:var(--slate);line-height:1.78;margin:0 0 16px}
.md-benefits{display:flex;flex-direction:column;gap:14px;margin-top:26px}
.md-benefit{display:flex;gap:14px;align-items:flex-start;background:var(--bg-alt);border-radius:12px;padding:16px 18px}
.md-benefit img{width:38px;height:38px;object-fit:contain;flex:none}
.md-benefit h3{font-size:1rem;margin:0 0 4px}
.md-benefit p{font-size:.88rem;color:var(--slate);margin:0;line-height:1.5}
.md-intro-shot{margin:0;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-lg)}
.md-intro-shot img{width:100%;display:block}
.md-features{padding:92px 0;background:var(--bg-alt)}
.md-features h2{font-size:clamp(1.8rem,3vw,2.4rem);letter-spacing:-.025em;margin:0}
.md-feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:44px}
.md-feature{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px 22px;text-align:center}
.md-feature i{color:var(--red);font-size:2.1rem;display:block;margin-bottom:12px}
.md-feature h3{font-size:1.02rem;margin:0 0 8px;letter-spacing:-.01em}
.md-feature p{font-size:.88rem;color:var(--slate);line-height:1.55;margin:0}
.md-shots{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.md-shots figure{margin:0;border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.md-shots img{width:100%;display:block}
.md-ai{padding:92px 0;background:var(--bg-dark)}
.md-ai h2{color:#fff;font-size:clamp(1.8rem,3.2vw,2.5rem);letter-spacing:-.025em;line-height:1.2;margin:0}
.md-ai .mx-lede{color:#c8ccd3}
.md-ai-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
.md-ai-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px;
  padding:26px 18px;text-align:center}
.md-ai-card img{width:44px;height:44px;object-fit:contain;margin:0 auto 12px;display:block}
.md-ai-card span{color:#fff;font-size:.92rem;font-weight:600;line-height:1.4;display:block}
.md-partners{padding:56px 0;border-bottom:1px solid var(--line)}
.md-partners-label{text-align:center;color:var(--muted);font-size:.8rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;margin:0 0 26px}
.md-partners-row{display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:center}
.md-partners-row img{height:88px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.78;transition:all var(--t)}
.md-partners-row img:hover{filter:grayscale(0);opacity:1}
.md-testi{padding:92px 0;background:var(--bg-alt)}
.md-testi h2{font-size:clamp(1.8rem,3vw,2.4rem);letter-spacing:-.025em;margin:0}
.md-testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.md-testi-card{margin:0;background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 24px;
  display:flex;flex-direction:column}
.md-testi-card p{color:var(--slate);line-height:1.7;font-size:.95rem;margin:0 0 18px}
.md-testi-card cite{margin-top:auto;font-style:normal;font-size:.86rem;color:var(--muted)}
.md-testi-card cite strong{color:var(--ink)}

/* --- integrate / apply / faq --- */
.mx-integrate{padding:92px 0}
.mx-integrate h2{font-size:clamp(1.8rem,3vw,2.4rem);letter-spacing:-.025em;margin:0 0 4px}
.mx-integrate .mx-btn{margin-top:28px}
.mx-apply{padding:92px 0;background:var(--bg-dark)}
.mx-apply h2{color:#fff;font-size:clamp(1.8rem,3.2vw,2.5rem);letter-spacing:-.025em;line-height:1.2;margin:0}
.mx-apply .mx-lede{color:#c8ccd3}
.mx-apply-mail{margin:26px 0 22px}
.mx-apply-mail a{color:#fff;font-size:1.15rem;font-weight:700;text-decoration:none;border-bottom:2px solid var(--red);padding-bottom:3px}
.mx-fine{color:#8d939c;font-size:.82rem;max-width:620px;margin:26px auto 0;line-height:1.6}
.mx-faq{padding:92px 0}
.mx-faq h2{font-size:clamp(1.8rem,3vw,2.4rem);letter-spacing:-.025em;margin:0}

@media (max-width:1040px){
  .mx-about-grid,.md-intro-grid{grid-template-columns:1fr;gap:44px}
  .mx-why-stage{grid-template-columns:1fr 1fr;align-items:start}
  .mx-why-figure{display:none}
  .mx-why-col{padding-bottom:40px}
  .mx-team-grid{grid-template-columns:repeat(2,1fr)}
  .md-team-grid{grid-template-columns:repeat(3,1fr)}
  .md-feature-grid,.md-ai-grid{grid-template-columns:repeat(2,1fr)}
  .md-testi-grid{grid-template-columns:repeat(2,1fr)}
  .mx-event-grid,.mx-event-stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .mx-hero,.md-hero{min-height:auto;padding:90px 0 70px}
  .mx-trust-inner{gap:34px}
  .mx-why-stage{grid-template-columns:1fr}
  .mx-team-grid,.md-team-grid,.md-shots,.md-testi-grid{grid-template-columns:1fr}
  .md-feature-grid,.md-ai-grid{grid-template-columns:1fr}
  .mx-collage-a img{height:300px}
  .md-hero-cta{flex-direction:column;align-items:flex-start}
}

/* ================= HERO PHOTO GEOMETRY (2026-10-02) ================= */
/* Julia, 2 Oct: "the imagery is super dark and a little hard to see. I love our hero images
   and want to continue to include them where possible, but the Astra version Tom sent
   included some strong imagery that was crisp and well saturated."
   The photos were never the problem; measured at source they are bright and saturated. The
   scrim was: 95% black behind the copy and still 52% at the far right edge, so no part of
   any hero photo was ever shown clean. Tom's build (9-14 zip, style.css lines 66-69) puts the
   photo in the right ~70% and darkens only behind the copy. Same geometry here, our values.
   - Desktop (>=1025px): the photo sits in a box from 34% to the right edge. The scrim is solid
     to the box edge, eases in over the copy, and is GONE ~260px past the end of the text
     column. The copy column is capped (640px, h1 720px) so it ends at a known place:
     max(28px, 50% - 572px) is the container's content edge (1200px wrap, 28px padding).
     The hero photo is background-attachment:scroll now (parallax stays on every other band):
     fixed sizes `cover` against the whole VIEWPORT, which upscaled a 1125px frame 1.28x at
     1440 and showed only the middle ~71% of it. In the box the same frame is DOWNSCALED.
   - Below 1025px the copy runs the full width, so a scrim "only behind the text" means the
     photo cannot be behind the text: it becomes a clean band on top and the copy sits on the
     solid panel under it. The band is the whole frame at a glance, which phones never showed.
   Gate every change here with scripts/hero_gate.py (per-node p99, alpha composited, both
   widths). Heroes with no photo (TN Visa, Enterprise, másData, legal) are unchanged.
   The base gradients on .hero-scrim / .page-hero::before above are what this replaces. */
.page-hero h1{text-wrap:balance}
@media (min-width:1025px){
  .page-hero .container > *{max-width:640px}
  .page-hero .container > h1{max-width:720px}
  .page-hero > .page-hero-bg{left:34%;background-attachment:scroll}
  .page-hero::before{background:linear-gradient(90deg,
     rgb(14,16,20) 34%,
     rgba(14,16,20,.84) calc(34% + 70px),
     rgba(14,16,20,.64) calc(max(28px, 50% - 572px) + 640px),
     rgba(14,16,20,.46) calc(max(28px, 50% - 572px) + 720px),
     rgba(14,16,20,.10) calc(max(28px, 50% - 572px) + 860px),
     rgba(14,16,20,0) calc(max(28px, 50% - 572px) + 980px))}
  .hero .hero-slideshow{left:34%}
  .hero-scrim{background:linear-gradient(90deg,
     rgb(17,19,23) 34%,
     rgba(17,19,23,.84) calc(34% + 70px),
     rgba(17,19,23,.62) calc(max(28px, 50% - 572px) + 640px),
     rgba(17,19,23,.44) calc(max(28px, 50% - 572px) + 700px),
     rgba(17,19,23,.08) calc(max(28px, 50% - 572px) + 840px),
     rgba(17,19,23,0) calc(max(28px, 50% - 572px) + 960px))}
}
@media (max-width:1024px){
  .page-hero:has(> .page-hero-bg){padding-top:0}
  .page-hero-entry:has(> .page-hero-bg){display:block;min-height:0}
  .page-hero > .page-hero-bg{position:relative;inset:auto;height:clamp(210px,52vw,400px);
    margin-bottom:30px;background-attachment:scroll}
  .page-hero:has(> .page-hero-bg)::before{background:linear-gradient(180deg,
     rgba(14,16,20,0) calc(clamp(210px,52vw,400px) - 72px),rgb(14,16,20) clamp(210px,52vw,400px))}
  .hero{display:block;min-height:0;padding:calc(clamp(210px,52vw,400px) + 30px) 0 56px;background:#111317}
  .hero .hero-slideshow{bottom:auto;height:clamp(210px,52vw,400px)}
  .hero-scrim{background:linear-gradient(180deg,
     rgba(17,19,23,0) calc(clamp(210px,52vw,400px) - 72px),rgb(17,19,23) clamp(210px,52vw,400px))}
}

/* ===================================================================
   JULIA'S ENTERPRISE + FOOD PROCESSING COPY (2026-10-03)
   .challenge-cta   the closing link under her "Built for Enterprise" cards
   .chips-group-h   her two program headings over the Food Processing roles
   Both classes are printed only where those optional content keys are set
   (challenge_cta, coverage_groups), so no other page is affected.
   =================================================================== */
.challenge-cta{text-align:center;margin:0}
.challenge-cta .entry-intro-link{margin-top:34px}
.chips-group-h{text-align:center;font-size:1.12rem;margin:0 0 16px}
.chips + .chips-group-h{margin-top:40px}
.faq-subhead{font-size:1.12rem;margin:22px 0 2px}
/* Five "Built for Enterprise" cards: centre the short last row instead of leaving a hole
   (3 + 2 on desktop, 2 + 2 + 1 on tablets; phones are one column anyway). Only a grid with
   exactly five cards matches; every other challenge grid on the site has three. */
@media (min-width:1041px){
  .challenge-grid:has(> :nth-child(5):last-child){grid-template-columns:repeat(6,1fr)}
  .challenge-grid:has(> :nth-child(5):last-child) > *{grid-column:span 2}
  .challenge-grid:has(> :nth-child(5):last-child) > :nth-child(4){grid-column:2 / span 2}
}
@media (min-width:561px) and (max-width:1040px){
  .challenge-grid:has(> :nth-child(5):last-child) > :last-child{grid-column:1 / -1;justify-self:center;width:calc(50% - 11px)}
}