/* =========================================================================
   madeinSUL — design system
   Ported from the Claude Design prototype (project/*.dc.html + site-base.js).
   Tokens: accent #E8431F, off-white #F5F4F0, dark #111111, text #222222.
   ========================================================================= */

:root {
  --ms-accent: #E8431F;
  --ms-bg: #F5F4F0;
  --ms-dark: #111111;
  --ms-text: #222222;
  --ms-lead: #4A4740;
  --ms-note: #7A776E;
  --ms-hairline-light: rgba(17,17,17,.12);
  --ms-hairline-dark: rgba(245,244,240,.16);
  --ms-placeholder-bg: #E7E5DE;
  --ms-alt-bg: #EDEBE4;
  --ms-radius: 2px;
  --ms-font-display: 'Archivo', sans-serif;
  --ms-font-head: 'Zen Kaku Gothic New', sans-serif;
  --ms-font-body: 'Noto Sans JP', system-ui, sans-serif;
  --ms-container-pad: clamp(20px, 5vw, 72px);
  --ms-sec-pad: clamp(72px, 9vw, 140px);
  --ms-header-h: clamp(64px, 7vw, 84px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ms-bg);
  color: var(--ms-text);
  font-family: var(--ms-font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, h4, p, dl, dd, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

[data-container] { max-width: 1440px; margin-inline: auto; padding-inline: var(--ms-container-pad); }
[data-sec] { padding-block: var(--ms-sec-pad); }

/* ---- Eyebrow / heading / lead / note utilities (also used bare by section 08-style content) --- */
.ms-eyebrow, [data-eyebrow] {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--ms-font-display); font-size: 11px; font-weight: 700; letter-spacing: .22em;
}
.ms-eyebrow i, [data-eyebrow] i { font-style: normal; color: var(--ms-accent); }
.ms-eyebrow u, [data-eyebrow] u { display: block; width: 32px; height: 1px; background: currentColor; text-decoration: none; opacity: .5; }
.ms-eyebrow em, [data-eyebrow] em { font-style: normal; color: var(--ms-note); }

.ms-h2, [data-h2] {
  font-family: var(--ms-font-head); font-weight: 800; letter-spacing: -.02em; line-height: 1.3;
  font-size: clamp(22px, 3.4vw, 50px);
}
.ms-h3, [data-h3] { font-family: var(--ms-font-head); font-weight: 800; font-size: clamp(19px, 2.4vw, 32px); line-height: 1.4; }
.ms-lead, [data-lead] { font-size: clamp(14px, 1.05vw, 15.5px); line-height: 2.15; color: var(--ms-lead); }
.ms-note, [data-note] { font-size: 12.5px; line-height: 1.9; color: var(--ms-note); }

.ms-line { display: block; overflow: hidden; }
.ms-line > span { display: block; will-change: transform; }

/* ---- Price block ---- */
.ms-price { display: flex; flex-direction: column; }
.ms-price__row { display: flex; align-items: baseline; gap: 14px; padding-block: 10px; border-bottom: 1px solid var(--ms-hairline-light); }
.ms-price__row:last-child { border-bottom: none; }
[data-theme-dark] .ms-price__row, .ms-on-dark .ms-price__row { border-bottom-color: rgba(245,244,240,.18); }
.ms-price__label { font-family: var(--ms-font-display); font-size: 13px; font-weight: 600; color: var(--ms-note); min-width: 3.4em; }
.ms-price__num { font-family: var(--ms-font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.ms-price__num small { font-size: .32em; font-weight: 600; letter-spacing: 0; margin-left: 4px; }
.ms-price__num--accent { color: var(--ms-accent); }

/* ---- Buttons ---- */
.ms-btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 60px;
  padding-inline: clamp(18px, 2.6vw, 32px); border-radius: var(--ms-radius);
  font-family: var(--ms-font-body); font-size: clamp(11.5px, 3.3vw, 15px); font-weight: 700; letter-spacing: .03em;
  white-space: nowrap; transition: background .25s ease, color .25s ease;
}
.ms-btn__arrow { transition: transform .25s ease; }
.ms-btn:hover .ms-btn__arrow { transform: translateX(4px); }
.ms-btn--accent { background: var(--ms-accent); color: #F5F4F0; }
.ms-btn--accent:hover { background: #F5F4F0; color: var(--ms-dark); }
.ms-btn--dark { background: var(--ms-dark); color: #F5F4F0; }
.ms-btn--dark:hover { background: var(--ms-accent); color: #F5F4F0; }
.ms-btn--light { background: #F5F4F0; color: var(--ms-dark); }
.ms-btn--light:hover { background: var(--ms-accent); color: #F5F4F0; }
.ms-btn--ghost-dark { border: 1px solid rgba(17,17,17,.35); color: var(--ms-dark); }
.ms-btn--ghost-dark:hover { border-color: var(--ms-accent); color: var(--ms-accent); }
.ms-btn--ghost-light { border: 1px solid rgba(245,244,240,.45); color: #F5F4F0; }
.ms-btn--ghost-light:hover { border-color: var(--ms-accent); color: var(--ms-accent); }

.ms-link { display: inline-flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(17,17,17,.35); font-weight: 600; font-size: 13.5px; padding-bottom: 2px; }
.ms-link:hover { border-color: var(--ms-accent); color: var(--ms-accent); }
.ms-link--light { border-color: rgba(245,244,240,.45); }
.ms-link--light:hover { color: var(--ms-accent); }

/* ---- Breadcrumbs ---- */
/* Every subpage's first visible element is its breadcrumb row, right after
   the fixed header — pad it clear of the header height so content never
   starts underneath the bar (TOP has no breadcrumbs and handles header
   clearance itself via the hero's own top padding, so this is scoped here
   rather than on `main`). */
.ms-crumbs { padding-block: 18px; padding-top: calc(var(--ms-header-h) + 18px); }
.ms-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px 8px; font-size: 12px; color: var(--ms-note); }
.ms-crumbs li:not(:last-child)::after { content: '/'; margin-left: 8px; opacity: .5; }
.ms-crumbs a:hover { color: var(--ms-accent); }

/* =========================================================================
   Header
   ========================================================================= */
.ms-scrollbar { position: fixed; top: 0; right: 0; bottom: 0; width: 2px; z-index: 70; background: rgba(17,17,17,.07); pointer-events: none; }
.ms-scrollbar__fill { width: 100%; height: 0%; background: var(--ms-accent); }
@media (max-width: 1000px) { .ms-scrollbar { display: none; } }

.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 60;
  height: var(--ms-header-h);
  border-bottom: 1px solid transparent;
  background: transparent; color: #F5F4F0;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.site-header[data-dark="0"] { background: var(--ms-bg); color: var(--ms-dark); border-bottom-color: var(--ms-hairline-light); }
.site-header[data-scrolled="1"] { background: var(--ms-bg); color: var(--ms-dark); border-bottom-color: var(--ms-hairline-light); }
.site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.site-header__logo { font-family: var(--ms-font-display); font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.site-header__logo em { font-style: normal; color: var(--ms-accent); }

.site-header__nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); font-size: 13px; font-weight: 500; }
.site-header__nav a:hover { color: var(--ms-accent); }
.site-header__dropdown { position: relative; }
.site-header__dropdown > button { display: inline-flex; align-items: center; gap: 6px; font: inherit; }
.site-header__dropdown .ms-caret { display: inline-block; transition: transform .2s ease; font-size: 10px; }
.site-header__dropdown:hover .ms-caret, .site-header__dropdown:focus-within .ms-caret { transform: rotate(180deg); }
.site-header__dropdown-panel {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  min-width: 320px; padding: 14px; background: var(--ms-dark); color: #F5F4F0;
  border-radius: var(--ms-radius); box-shadow: 0 18px 40px rgba(0,0,0,.25);
  opacity: 0; visibility: hidden; translate: 0 6px; transition: opacity .2s ease, translate .2s ease;
}
.site-header__dropdown:hover .site-header__dropdown-panel,
.site-header__dropdown:focus-within .site-header__dropdown-panel { opacity: 1; visibility: visible; translate: 0 0; }
.site-header__dropdown-panel a { display: block; padding: 8px 10px; border-radius: 2px; font-size: 13px; }
.site-header__dropdown-panel a:hover { background: rgba(245,244,240,.08); color: var(--ms-accent); }

.site-header__cta { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding-inline: 22px; background: var(--ms-dark); color: #F5F4F0; border-radius: var(--ms-radius); font-size: 13px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.site-header__cta:hover { background: var(--ms-accent); }

.site-header__hamburger { display: none; flex-direction: column; gap: 5px; padding: 10px; }
.site-header__hamburger span { width: 22px; height: 2px; background: currentColor; }

@media (max-width: 1000px) {
  .site-header__nav, .site-header__cta { display: none; }
  .site-header__hamburger { display: flex; }
}

.mobile-menu {
  position: fixed; inset: 0; z-index: 90; background: var(--ms-dark); color: #F5F4F0;
  padding: calc(var(--ms-header-h) + 20px) var(--ms-container-pad) 24px;
  overflow-y: auto;
  display: none;
}
.mobile-menu[data-open="1"] { display: block; }
.mobile-menu__nav a { display: flex; align-items: baseline; gap: 14px; padding-block: 16px; border-top: 1px solid rgba(245,244,240,.14); font-family: var(--ms-font-head); font-weight: 700; font-size: 19px; }
.mobile-menu__nav a i { font-family: var(--ms-font-display); font-size: 12px; color: var(--ms-accent); font-style: normal; }
.mobile-menu__industries { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(245,244,240,.14); margin-top: 18px; }
.mobile-menu__industries a { background: var(--ms-dark); padding: 14px; font-size: 13px; }
.mobile-menu__cta { margin-top: 28px; }
.mobile-menu__cta .ms-btn { width: 100%; justify-content: center; }

.mobile-bottom-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 80; display: none; background: var(--ms-dark); border-top: 1px solid rgba(245,244,240,.16); padding-bottom: env(safe-area-inset-bottom, 0px); }
.mobile-bottom-bar a { flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: 56px; color: #F5F4F0; font-size: 13.5px; font-weight: 700; border-right: 1px solid rgba(245,244,240,.16); }
.mobile-bottom-bar a:last-child { flex: 1.25 1 0; background: var(--ms-accent); border-right: none; gap: 8px; }
@media (max-width: 1000px) { .mobile-bottom-bar { display: flex; } }

.back-to-top {
  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 75;
  width: 48px; height: 48px; border-radius: 50%; background: var(--ms-dark); color: #F5F4F0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease;
}
.back-to-top[data-visible="1"] { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--ms-accent); }
@media (max-width: 1000px) { .back-to-top { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } }

/* =========================================================================
   Footer
   ========================================================================= */
.footer-cta { background: var(--ms-dark); color: #F5F4F0; padding-block: clamp(64px, 8vw, 120px); }
.footer-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; }

.site-footer { background: var(--ms-dark); color: #F5F4F0; position: relative; overflow: hidden; }
.site-footer__top { padding-block: clamp(56px, 7vw, 100px) clamp(32px, 4vw, 56px); display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(24px, 3vw, 56px); position: relative; z-index: 1; }
.site-footer__brand .site-header__logo { font-size: 22px; }
.site-footer__tagline { font-family: var(--ms-font-display); font-size: 11px; letter-spacing: .18em; color: rgba(245,244,240,.55); margin-top: 14px; }
.site-footer__desc { margin-top: 16px; font-size: 13px; line-height: 2; color: rgba(245,244,240,.78); }
.site-footer__chip { display: inline-block; margin-top: 16px; padding: 6px 14px; border: 1px solid rgba(245,244,240,.28); border-radius: 999px; font-size: 11.5px; letter-spacing: .06em; }
.site-footer__facts { margin-top: 18px; font-size: 12.5px; color: rgba(245,244,240,.6); display: flex; flex-direction: column; gap: 6px; }
.site-footer__facts div { display: flex; gap: 8px; }
.site-footer__facts dt { color: rgba(245,244,240,.45); }

.site-footer__col h3 { font-family: var(--ms-font-display); font-size: 11px; font-weight: 700; letter-spacing: .18em; color: rgba(245,244,240,.45); margin-bottom: 16px; }
.site-footer__col ul { display: flex; flex-direction: column; gap: 12px; font-size: 13.5px; }
.site-footer__col a:hover { color: var(--ms-accent); }

.site-footer__wordmark { position: absolute; left: 0; right: 0; bottom: -0.06em; text-align: center; font-family: var(--ms-font-display); font-weight: 900; font-size: clamp(56px, 15vw, 232px); color: rgba(245,244,240,.13); white-space: nowrap; user-select: none; pointer-events: none; line-height: 1; z-index: 0; }
.site-footer__bottom { position: relative; z-index: 1; border-top: 1px solid rgba(245,244,240,.14); padding-block: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 11.5px; color: rgba(245,244,240,.5); }
.site-footer__mobile-spacer { display: none; background: var(--ms-dark); }
@media (max-width: 1000px) { .site-footer__mobile-spacer { display: block; height: calc(72px + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 767px) { .site-footer__top { grid-template-columns: 1fr 1fr; } }

/* =========================================================================
   TOP page (front-page.php) — hero, section grids, row list
   ========================================================================= */
.ms-section { background: var(--ms-bg); color: var(--ms-text); }
.ms-section--dark { background: var(--ms-dark); color: #F5F4F0; }
.ms-section--alt { background: var(--ms-alt-bg); }
.ms-h2--light, .ms-h3--light { color: #F5F4F0; }
.ms-lead--light { color: rgba(245,244,240,.78); }
.ms-note--light { color: rgba(245,244,240,.55); }

.ms-hero {
  position: relative; display: flex; align-items: flex-end; overflow: hidden;
  min-height: clamp(600px, 92svh, 980px); background: var(--ms-dark); color: #F5F4F0;
  padding-top: clamp(120px, 15vw, 200px); padding-bottom: clamp(44px, 6vw, 80px);
}
.ms-hero__bg { position: absolute; inset: 0; z-index: 0; }
.ms-hero__bg-img { width: 100%; height: 100%; object-fit: cover; }
.ms-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,17,17,.42) 0%, rgba(17,17,17,.30) 26%, rgba(17,17,17,.62) 62%, rgba(17,17,17,.88) 100%); }
.ms-hero__inner { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: clamp(32px, 5vw, 72px); width: 100%; }
.ms-hero__copy { flex: 1 1 min(100%, 620px); }
.ms-hero__kicker { margin-top: 18px; font-size: 13px; color: rgba(245,244,240,.7); }
.ms-hero__h1 { font-family: var(--ms-font-head); font-weight: 900; line-height: 1.16; letter-spacing: -.025em; font-size: clamp(30px, 5.4vw, 74px); margin-top: 14px; }
.ms-hero__cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 32px; }
.ms-hero__micro { margin-top: 18px; }
.ms-hero__price { flex: 0 1 auto; }
/* .ms-lead/.ms-note set their own dark-on-light text color, which wins over
   the hero's ambient white (an explicit color always beats an inherited one) —
   without this override, hero body copy renders in low-contrast dark gray on
   top of the dark photo, nearly invisible in places. Found via QA screenshot
   review (looked like "overlapping ghost text" until inspected closely). */
.ms-hero .ms-lead { color: rgba(245,244,240,.86); }
.ms-hero .ms-note { color: rgba(245,244,240,.6); }

.ms-section-head { max-width: 900px; margin-bottom: clamp(32px, 4vw, 56px); }
.ms-section-head--split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; max-width: none; }
.ms-section-head .ms-h2, .ms-section-head .ms-lead { margin-top: 16px; }

.ms-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); }
.ms-intro-grid .ms-h2 { margin-top: 16px; margin-bottom: 24px; }
.ms-numlist li { display: flex; gap: 14px; padding-block: 14px; border-top: 1px solid var(--ms-hairline-light); font-size: 14px; }
.ms-numlist li:last-child { border-bottom: 1px solid var(--ms-hairline-light); }
.ms-numlist li span { font-family: var(--ms-font-display); font-weight: 700; color: var(--ms-note); }
.ms-numlist--light li, .ms-numlist--light li:last-child { border-color: rgba(245,244,240,.2); }
.ms-thoughts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,200px), 1fr)); gap: 1px; background: var(--ms-hairline-light); margin-block: 24px; }
.ms-thoughts-grid__cell { background: var(--ms-bg); padding: 20px; font-size: 13.5px; font-weight: 600; }
.ms-thoughts-grid__cell--wide { grid-column: 1 / -1; }

/* width:100% is required alongside min-height here: without it, browsers derive
   an auto width FROM the min-height-forced height via the aspect-ratio (180px *
   24/7 = 617px), overflowing any container narrower than ~617px instead of
   stretching to fill it — a real bug found in QA, not just a lint nicety. */
.ms-band { width: 100%; aspect-ratio: 24/7; min-height: 180px; background: var(--ms-placeholder-bg); margin-top: clamp(48px, 6vw, 88px); overflow: hidden; }
.ms-band img { width: 100%; height: 100%; object-fit: cover; }

.ms-row-list { border-top: 1px solid var(--ms-hairline-light); }
.ms-row { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); padding: clamp(12px, 1.6vw, 24px); border-bottom: 1px solid var(--ms-hairline-light); transition: background .3s ease, color .3s ease, padding-inline .3s ease; }
.ms-row:hover { background: var(--ms-dark); color: #F5F4F0; padding-inline: clamp(20px, 2.4vw, 32px); }
.ms-row__thumb { flex: 0 0 clamp(84px, 17vw, 196px); aspect-ratio: 4/3; overflow: hidden; border-radius: var(--ms-radius); }
.ms-row__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ms-row:hover .ms-row__thumb img { transform: scale(1.05); }
.ms-row__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; }
.ms-row__eyebrow { font-family: var(--ms-font-display); font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--ms-accent); }
.ms-row__title { font-family: var(--ms-font-head); font-weight: 800; font-size: clamp(16px, 2.2vw, 30px); }
.ms-row__desc { flex: 1 1 260px; font-size: 13px; color: var(--ms-note); }
.ms-row:hover .ms-row__desc { color: rgba(245,244,240,.7); }
.ms-row__arrow { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ms-hairline-light); display: flex; align-items: center; justify-content: center; transition: transform .3s ease, background .3s ease; }
.ms-row:hover .ms-row__arrow { background: var(--ms-accent); border-color: var(--ms-accent); transform: translateX(6px); color: #fff; }
.ms-section-foot { margin-top: 32px; text-align: right; }
@media (max-width: 640px) { .ms-row__desc { display: none; } }

.ms-price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); }
.ms-price-grid .ms-h2 { margin-top: 16px; margin-bottom: 24px; }
.ms-price-grid .ms-lead { margin-top: 24px; }
.ms-included-label { font-family: var(--ms-font-display); font-size: 11px; font-weight: 700; letter-spacing: .1em; padding-bottom: 12px; border-bottom: 1px solid rgba(245,244,240,.28); color: rgba(245,244,240,.8); }
.ms-included-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,190px), 1fr)); margin-top: 16px; }
.ms-included-grid__cell { padding-block: 12px; border-bottom: 1px solid rgba(245,244,240,.14); font-size: 13.5px; display: flex; gap: 10px; }
.ms-included-grid__cell span { font-family: var(--ms-font-display); color: var(--ms-accent); font-weight: 700; }
.ms-included-grid__cell--wide { grid-column: 1 / -1; }
.ms-price-grid__cta { margin-top: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

.ms-philosophy-grid { display: flex; flex-wrap: wrap-reverse; gap: clamp(32px, 5vw, 72px); align-items: center; }
.ms-philosophy-grid__img { flex: 1 1 320px; aspect-ratio: 3/4; min-height: 280px; background: var(--ms-placeholder-bg); border-radius: var(--ms-radius); overflow: hidden; }
.ms-philosophy-grid__img img { width: 100%; height: 100%; object-fit: cover; }
.ms-philosophy-grid__img figcaption { margin-top: 12px; }
.ms-philosophy-grid__copy { flex: 1 1 420px; }
.ms-philosophy-grid__copy .ms-h2 { margin-top: 16px; margin-bottom: 20px; }
.ms-callout { border-left: 2px solid var(--ms-accent); padding-left: 20px; margin-top: 28px; }
.ms-callout__lead { font-size: clamp(19px, 2.4vw, 32px); font-weight: 800; font-family: var(--ms-font-head); margin-top: 10px; }

.ms-reason-list { border-top: 1px solid var(--ms-hairline-light); margin-top: 24px; margin-bottom: 32px; }
.ms-reason-list li { display: flex; gap: clamp(20px, 3vw, 40px); padding-block: clamp(18px, 2.4vw, 28px); border-bottom: 1px solid var(--ms-hairline-light); }
.ms-reason-list__num { font-family: var(--ms-font-display); font-weight: 800; font-size: clamp(28px, 4.2vw, 64px); color: #CFCABC; line-height: 1; }
.ms-reason-list__num--accent { color: var(--ms-accent); }
.ms-reason-list li h3 { margin-bottom: 8px; }

.ms-rule { display: block; height: 2px; background: var(--ms-accent); margin-block: 24px 32px; }
.ms-process-grid { display: flex; flex-wrap: wrap; gap: 1px; background: var(--ms-hairline-light); }
.ms-process-grid__cell { flex: 1 1 150px; background: var(--ms-bg); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.ms-process-grid__num { font-family: var(--ms-font-display); font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--ms-accent); }
.ms-process-grid__label { font-family: var(--ms-font-head); font-weight: 700; font-size: 15px; }
.ms-process-grid + .ms-note, section#process .ms-note { margin-top: 20px; }

.ms-nationwide-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 5vw, 72px); }
.ms-nationwide-grid [data-h2] { margin-top: 16px; margin-bottom: 20px; }
.ms-nationwide-grid [data-lead] { margin-bottom: 16px; }
.ms-nationwide-grid__right { display: flex; flex-direction: column; gap: 16px; }
.ms-nationwide-grid__display { font-family: var(--ms-font-display); font-weight: 800; font-size: clamp(24px, 3.4vw, 40px); line-height: 1.15; }
.ms-nationwide-grid__display strong { color: var(--ms-accent); font-weight: 800; }
.ms-region-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%,110px), 1fr)); gap: 1px; background: var(--ms-alt-bg); }
.ms-region-grid > div { background: #fff; padding: 14px; font-size: 13px; font-weight: 600; text-align: center; }

.ms-final-cta { position: relative; overflow: hidden; }
.ms-final-cta__bg { position: absolute; inset: 0; opacity: .24; }
.ms-final-cta__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,17,17,.84) 0%, rgba(17,17,17,.95) 100%); }
.ms-final-cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.ms-final-cta__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.ms-final-cta__card { border: 1px solid rgba(245,244,240,.22); border-radius: var(--ms-radius); padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }

@media (max-width: 1024px) {
  .ms-intro-grid, .ms-price-grid, .ms-nationwide-grid, .ms-final-cta__grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .ms-hero { align-items: flex-end; }
  .ms-row { flex-wrap: wrap; }
}

/* =========================================================================
   Reveal / motion engine (data-reveal, data-magnetic, data-tilt, data-count)
   ========================================================================= */
[data-reveal] { transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1), clip-path .9s cubic-bezier(.16,1,.3,1); }
[data-reveal="up"] { opacity: 0; transform: translateY(30px); }
[data-reveal="up"][data-in="1"] { opacity: 1; transform: translateY(0); }
[data-reveal="fade"] { opacity: 0; }
[data-reveal="fade"][data-in="1"] { opacity: 1; }
[data-reveal="rule"] { transform: scaleX(0); transform-origin: left center; }
[data-reveal="rule"][data-in="1"] { transform: scaleX(1); }
[data-reveal="line"] > span { transform: translateY(118%); }
[data-reveal="line"][data-in="1"] > span { transform: translateY(0); }
[data-reveal="img"] { clip-path: inset(0 0 101% 0); }
[data-reveal="img"][data-in="1"] { clip-path: inset(0 0 0 0); }
[data-reveal="img"] img { transform: scale(1.07); transition: transform 1s cubic-bezier(.16,1,.3,1); }
[data-reveal="img"][data-in="1"] img { transform: scale(1); }

[data-magnetic], [data-tilt] { will-change: transform; }
@media (hover: none) { [data-magnetic], [data-tilt] { transform: none !important; } }
@media (prefers-reduced-motion: reduce), html[data-motion="off"] {
  [data-reveal], [data-reveal] > span, [data-reveal] img { transition: none !important; transform: none !important; clip-path: none !important; opacity: 1 !important; }
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
  [data-container] { padding-inline: clamp(28px, 4.4vw, 48px); }
  .ms-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 767px) {
  :root { --ms-sec-pad: 64px; }
  [data-container] { padding-inline: clamp(18px, 5vw, 24px); }
  .ms-h2, [data-h2] { font-size: clamp(24px, 6vw, 28px); }
  .ms-h3, [data-h3] { font-size: 20px; }
  .ms-lead, [data-lead] { font-size: 15.5px; line-height: 1.95; }
  .ms-btn { width: 100%; justify-content: center; min-height: 56px; }
  .ms-grid-2, .ms-grid-3, .ms-grid-4 { grid-template-columns: 1fr !important; }
  [data-reveal="line"] > span { transform: none; }
  [data-reveal="line"] { opacity: 0; }
  [data-reveal="line"][data-in="1"] { opacity: 1; }
  .ms-band { aspect-ratio: 16/10 !important; min-height: 0; }
}

@media (max-width: 431px) {
  [data-container] { padding-inline: 16px; }
  /* At this width, the longest CTA labels (e.g. the school industry page's
     18-character consultation CTA) sitting inside a padded card
     (.ms-final-cta__card) can outgrow the button's default clamp() floor
     before the floor is reached — found via QA overflow testing. Nowrap is
     kept (a deliberate earlier design decision) by shrinking padding/font
     slightly further rather than letting the label wrap. */
  .ms-btn { font-size: 11.5px; padding-inline: 14px; gap: 8px; }
}