/* ==========================================================================
   MACH Technologies — paid-search squeeze page
   Concept: "specsheet" — build it like a specification sheet, not a brochure.
   Prefix: mt-   ·   Signature: the oblique, borrowed from the MACH wordmark.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Ground & ink — softened for an ad destination: the page is light-dominant,
     with only the header, bottom CTA and footer carrying a dark band. */
  --steel:        #F4F7F9;   /* page ground */
  --steel-50:     #FAFBFC;   /* lifted band */
  --steel-100:    #E9EFF3;   /* tinted band — ledger + form */
  --steel-200:    #D8E1E8;   /* hairline */
  --steel-400:    #9FAEBA;   /* muted rule */
  --ink:          #2B3A47;   /* soft slate, not near-black — 10.85 on steel */
  --ink-mute:     #5C6B78;   /* secondary on light — 5.10 */
  --slate:        #2E3E4D;   /* soft dark band — white 10.98 */
  --slate-deep:   #253340;   /* footer */
  --ink-mute-d:   #A8B7C4;   /* secondary on dark — 5.35 */
  --chip-ink:     #16202A;   /* stays dark: text on the bright gradient chips */

  /* Brand — brights are STROKE / ICON / ON-DARK only (both fail AA on light) */
  --navy:         #1A2953;
  --green:        #5EBE87;   /* 4.81 on slate ✓ · 2.07 on steel ✗ */
  --cyan:         #22ABD5;   /* strokes + icons only — 4.11 on slate */
  --blue:         #2B7BB9;
  /* Deepened / lifted variants — the only accents allowed to carry text */
  --accent-ink:   #0B6E92;   /* 5.33 on steel ✓ */
  --green-ink:    #1F7A4D;   /* 4.94 on steel ✓ */
  --cyan-text-d:  #5BC8EA;   /* small cyan text on dark — 5.70 on slate ✓ */
  --brand-grad:   linear-gradient(150deg, var(--green) 0%, var(--cyan) 62%, var(--blue) 100%);
  /* chip gradient — stops before blue so --chip-ink keeps AA (7.21 / 6.16) */
  --brand-chip:   linear-gradient(120deg, var(--green), var(--cyan));

  /* Type */
  /* Rotated 2026-09-01: Archivo + IBM Plex Sans/Mono were the exact stack already
     shipped on wcriticalsystems.com. Chivo has no width axis, so the display voice
     now rests on weight rather than an expanded axis — a rotation, not a swap. */
  --f-display: 'Chivo', 'Helvetica Neue', Arial, sans-serif;
  --f-body:    'Public Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --f-mono:    'Chivo Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-h1:   clamp(2.2rem, 4.1vw, 3.35rem);
  --fs-h2:   clamp(1.8rem, 3.3vw, 2.65rem);
  --fs-h3:   clamp(1.1rem, 1.45vw, 1.26rem);
  --fs-lede: clamp(1.04rem, 1.45vw, 1.2rem);
  --fs-body: 1.0rem;
  --fs-sm:   0.875rem;
  --fs-xs:   0.78rem;

  /* Rhythm — ONE vertical scale. Sections never set their own padding-block. */
  --section-y:       clamp(4.5rem, 8vw, 7.5rem);
  --section-y-tight: clamp(2.6rem, 4.5vw, 3.6rem);
  --section-y-hero:  clamp(3.5rem, 7vw, 6rem);
  --block-gap:       clamp(1.75rem, 3vw, 2.75rem);

  /* Geometry */
  --shell:  1240px;
  --gut:    clamp(1.15rem, 4vw, 2.5rem);
  --slant:  -11deg;          /* the wordmark's oblique — the page's one motif */
  --r:      3px;             /* machined, not rounded */
  --ease:   cubic-bezier(.22,.61,.36,1);
  --hdr-h:  84px;           /* logo needs real breathing room */
  --hdr-h-stuck: 68px;     /* condensed once scrolled */
}

/* ---------- 2. RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--steel);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:var(--fs-body);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0;line-height:1.08;text-wrap:balance}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:2px}

.mt-shell{width:min(100% - var(--gut)*2, var(--shell));margin-inline:auto}
.mt-mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

.mt-skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--slate);color:#fff;padding:.7rem 1.1rem;font-weight:600;
}
.mt-skip:focus{left:.5rem;top:.5rem}

/* ---------- 3. SECTION RHYTHM (spacing lives here and nowhere else) ---------- */
.mt-section{padding-block:var(--section-y);position:relative;scroll-margin-top:calc(var(--hdr-h-stuck) + 12px)}
.mt-section--tight{padding-block:var(--section-y-tight)}
.mt-section--hero{padding-block:var(--section-y-hero)}

.mt-head{max-width:64ch;margin-bottom:var(--block-gap)}
.mt-head__lede{margin-top:.9rem;font-size:var(--fs-lede);color:var(--ink-mute);text-wrap:pretty}
.mt-head__lede--light{color:var(--ink-mute-d)}

/* ---------- 4. TYPE ROLES ---------- */
.mt-kicker{
  display:flex;align-items:flex-start;gap:.7rem;
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent-ink);margin-bottom:1rem;
}
.mt-kicker--light{color:var(--cyan-text-d)}
/* the oblique, as a structural marker */
.mt-kicker__bar{
  flex:none;width:22px;height:9px;background:var(--brand-grad);
  transform:skewX(var(--slant));border-radius:1px;
  margin-top:.45em;   /* optical centre of the FIRST line when the label wraps */
}
.mt-h2{
  font-family:var(--f-display);font-size:var(--fs-h2);
  font-weight:700;letter-spacing:-.019em;
}
.mt-h2--light{color:#fff}

/* ---------- 5. BUTTONS ---------- */
.mt-btn{
  --btn-bg:var(--slate); --btn-fg:#fff; --btn-bd:var(--slate);
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.78rem 1.35rem;border:1px solid var(--btn-bd);border-radius:var(--r);
  background:var(--btn-bg);color:var(--btn-fg);
  font-family:var(--f-body);font-size:var(--fs-sm);font-weight:600;letter-spacing:.02em;
  text-decoration:none;cursor:pointer;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
.mt-btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px -12px rgba(43,58,71,.45)}
.mt-btn:active{transform:translateY(0)}
.mt-btn--lg{padding:.95rem 1.7rem;font-size:1rem}
.mt-btn--accent{
  --btn-bg:var(--navy); --btn-bd:var(--navy);
  position:relative;overflow:hidden;
}
.mt-btn--accent::after{
  content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--brand-grad);
}
.mt-btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--steel-400)}
.mt-btn--ghost:hover{--btn-bd:var(--ink)}

/* ---------- 6. HEADER ---------- */
.mt-header{
  position:sticky;top:0;z-index:100;
  background:var(--slate);
  transition:box-shadow .24s var(--ease);
}
/* the brand gradient as the header's edge — replaces a generic hairline */
.mt-header::after{
  content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--brand-grad);
}
.mt-header.is-stuck{box-shadow:0 12px 30px -20px rgba(0,0,0,.6)}

.mt-header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:var(--hdr-h);transition:min-height .24s var(--ease);
}
.mt-header.is-stuck .mt-header__inner{min-height:var(--hdr-h-stuck)}

.mt-header__brand{display:block;flex:none;line-height:0;border-radius:2px}
.mt-header__brand img{
  width:clamp(132px,14vw,158px);height:auto;
  transition:width .24s var(--ease);
}
.mt-header.is-stuck .mt-header__brand img{width:clamp(122px,12vw,140px)}

.mt-header__actions{display:flex;align-items:center;gap:.6rem}

/* phone is a conversion path on a squeeze page, so it gets a real affordance
   and says what the call gets you — not just a bare number */
.mt-header__tel{
  display:inline-flex;align-items:center;gap:.6rem;
  color:#fff;text-decoration:none;padding:.4rem .55rem;border-radius:var(--r);
  transition:background-color .18s var(--ease);
}
.mt-header__tel:hover{background:rgba(255,255,255,.08)}
.mt-header__tel-icon{
  display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;
  background:rgba(91,200,234,.16);color:var(--cyan-text-d);font-size:.8rem;
  transition:background-color .18s var(--ease);
}
.mt-header__tel:hover .mt-header__tel-icon{background:rgba(91,200,234,.26)}
.mt-header__tel-text{display:grid;line-height:1.16}
.mt-header__tel-lab{
  font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-mute-d);
}
.mt-header__tel-num{font-size:1.02rem;font-weight:600;letter-spacing:.005em}
.mt-header__cta{--btn-bd:rgba(255,255,255,.26)}

@media (max-width:900px){
  .mt-header__tel-lab{display:none}
  .mt-header__tel-num{font-size:.95rem}
}
@media (max-width:600px){
  .mt-header__tel-text{display:none}
  .mt-header__tel{padding:0}
  .mt-header__tel-icon{width:40px;height:40px;font-size:.95rem}
}
/* a phone viewport should not spend 84px on chrome */
@media (max-width:700px){
  :root{--hdr-h:70px;--hdr-h-stuck:62px}
}

/* ---------- 7. HERO ---------- */
.mt-hero{overflow:hidden;background:var(--steel)}
.mt-hero__grid-bg{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(26,41,83,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26,41,83,.055) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
}
/* diagonal hairlines at the wordmark's slant */
.mt-hero__rules{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.mt-hero__rules span{
  position:absolute;top:-30%;height:160%;width:1px;
  background:linear-gradient(to bottom, transparent, rgba(26,41,83,.16), transparent);
  transform:skewX(var(--slant));
}
.mt-hero__rules span:nth-child(1){left:38%}
.mt-hero__rules span:nth-child(2){left:56%;background:linear-gradient(to bottom,transparent,rgba(34,171,213,.34),transparent)}
.mt-hero__rules span:nth-child(3){left:74%}

.mt-hero__inner{
  position:relative;display:grid;gap:clamp(2rem,4vw,3.2rem);
  grid-template-columns:minmax(0,1fr);align-items:center;
}
.mt-hero__h{
  font-family:var(--f-display);font-size:var(--fs-h1);
  font-weight:800;letter-spacing:-.032em;
}
.mt-hero__h em{
  font-style:italic;font-weight:700;
  background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.mt-hero__lede{
  margin-top:1.25rem;max-width:52ch;font-size:var(--fs-lede);color:var(--ink-mute);text-wrap:pretty;
}
.mt-hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.9rem}

/* --- the annotated equipment plate (the thesis) --- */
.mt-plate{margin:0}
.mt-plate__frame{
  position:relative;
  background:
    radial-gradient(120% 90% at 50% 40%, #fff 0%, var(--steel-50) 55%, var(--steel-100) 100%);
  border:1px solid var(--steel-200);border-radius:var(--r);
  padding:clamp(1rem,2.4vw,2rem);
}
.mt-plate__frame::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 62%, rgba(34,171,213,.07) 100%);
  pointer-events:none;
}
.mt-plate__tag{
  position:absolute;top:0;left:clamp(1rem,2.4vw,2rem);transform:translateY(-50%);
  background:var(--slate);color:#fff;font-size:var(--fs-xs);
  padding:.34rem .7rem;border-radius:2px;letter-spacing:0;
}
.mt-plate__img{width:100%;height:auto;position:relative;z-index:1}
.mt-plate__cap{
  margin-top:1rem;font-size:var(--fs-sm);color:var(--ink-mute);max-width:56ch;
  padding-left:.9rem;border-left:2px solid var(--steel-200);
}

/* Callouts: each item spans the frame, so --x/--y (dot) and --lx/--ly (label)
   are read as percentages of the plate. Geometry is set per callout in markup. */
.mt-plate__callouts{position:absolute;inset:0;z-index:2;pointer-events:none}
.mt-callout{position:absolute;inset:0;--len:120px;--ang:-40deg}
.mt-callout__dot{
  position:absolute;left:var(--x);top:var(--y);width:9px;height:9px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--cyan);box-shadow:0 0 0 3px rgba(34,171,213,.2);
}
.mt-callout__line{
  position:absolute;left:var(--x);top:var(--y);height:1px;width:var(--len);
  transform-origin:0 50%;transform:rotate(var(--ang));
  background:linear-gradient(90deg, rgba(34,171,213,.9), rgba(34,171,213,.3));
}
.mt-callout__label{
  position:absolute;left:var(--lx);top:var(--ly);transform:translateY(-50%);
  white-space:nowrap;
  font-size:11px;line-height:1.2;color:var(--ink);
  background:rgba(255,255,255,.93);border:1px solid var(--steel-200);
  padding:.3rem .5rem;border-radius:2px;letter-spacing:0;
  backdrop-filter:blur(2px);
}

@media (min-width:1000px){
  .mt-hero__inner{grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr)}
}

/* ---------- 8. SPEC RIBBON ---------- */
.mt-specbar{background:#fff;border-block:1px solid var(--steel-200)}
.mt-specbar__list{
  display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
}
.mt-specbar__item{
  background:#fff;padding:1.15rem 1.25rem;
  box-shadow:0 0 0 1px var(--steel-200);
}
.mt-specbar__fig{
  display:block;font-size:clamp(1.5rem,2.6vw,2rem);font-weight:500;
  color:var(--ink);line-height:1.05;
}
.mt-specbar__fig small{
  font-size:.46em;font-weight:400;color:var(--accent-ink);margin-left:.3em;letter-spacing:.02em;
}
.mt-specbar__lab{
  display:block;margin-top:.5rem;font-size:var(--fs-xs);
  color:var(--ink-mute);letter-spacing:.03em;line-height:1.4;
}

/* ---------- 9. CERTIFICATIONS ---------- */
.mt-certs{background:var(--steel);border-bottom:1px solid var(--steel-200)}
.mt-certs__inner{display:grid;gap:1.5rem}
.mt-certs__h{
  display:flex;align-items:flex-start;gap:.7rem;
  font-family:var(--f-body);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-mute);
}
.mt-certs__marks{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(1.5rem,4vw,3.2rem);
}
.mt-certs__marks img{
  height:clamp(38px,5vw,52px);width:auto;
  opacity:1;transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.mt-certs__marks li:hover img{transform:translateY(-2px)}
.mt-certs__note{font-size:var(--fs-sm);color:var(--ink-mute);max-width:74ch}

/* ---------- 10. CAPABILITIES ---------- */
.mt-caps{background:var(--steel)}
.mt-caps__grid{display:grid;gap:1px}
.mt-cap{background:#fff;display:grid;gap:0;box-shadow:0 0 0 1px var(--steel-200);transition:box-shadow .22s var(--ease)}
.mt-cap:hover{box-shadow:0 0 0 1px var(--steel-400)}
.mt-cap__media{
  position:relative;background:
    radial-gradient(120% 100% at 50% 45%, #fff 0%, var(--steel-100) 100%);
  aspect-ratio:4/3;padding:1.35rem;
  border-bottom:1px solid var(--steel-200);
}
.mt-cap__media img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.mt-cap__body{padding:clamp(1.25rem,2.2vw,1.7rem)}
.mt-cap__series{
  font-size:var(--fs-xs);color:var(--accent-ink);letter-spacing:.02em;margin-bottom:.55rem;
}
.mt-cap__h{
  font-family:var(--f-display);font-size:var(--fs-h3);font-weight:700;
  letter-spacing:-.015em;margin-bottom:.6rem;
}
.mt-cap__copy{font-size:var(--fs-sm);color:var(--ink-mute);text-wrap:pretty}
.mt-cap__specs{margin-top:1rem;border-top:1px solid var(--steel-200);padding-top:.85rem}
.mt-cap__specs li{
  font-size:var(--fs-xs);color:var(--ink);padding:.28rem 0 .28rem .95rem;position:relative;
}
.mt-cap__specs li::before{
  content:"";position:absolute;left:0;top:.82em;
  width:7px;height:3px;background:var(--brand-grad);transform:skewX(var(--slant));
}
@media (min-width:640px){ .mt-caps__grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1060px){
  .mt-caps__grid{grid-template-columns:repeat(3,1fr)}
  .mt-cap{grid-template-rows:auto 1fr}
}

/* ---------- 11. SPEC LEDGER (signature) ---------- */
.mt-ledger{background:var(--steel-100);border-block:1px solid var(--steel-200)}
.mt-ledger__scroll{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--steel-200);background:#fff;border-radius:var(--r);
}
.mt-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:660px}
.mt-table__cap{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
.mt-table thead th{
  text-align:left;font-weight:600;font-size:var(--fs-xs);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-mute);padding:.9rem 1.1rem;background:var(--steel-50);
  border-bottom:1px solid var(--steel-200);white-space:nowrap;
}
.mt-table__group th{
  padding:1.3rem 1.1rem .6rem;background:#fff;
  border-bottom:1px solid var(--steel-200);text-align:left;
}
.mt-table__gtab{
  display:inline-block;background:var(--brand-chip);
  padding:.3rem .85rem;transform:skewX(var(--slant));border-radius:2px;
}
/* the parallelogram carries the oblique; the text stays upright and readable */
.mt-table__gtab > span{
  display:block;transform:skewX(calc(-1 * var(--slant)));
  font-family:var(--f-body);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--chip-ink);
}
.mt-table tbody td{
  padding:.82rem 1.1rem;border-bottom:1px solid var(--steel-200);
  color:var(--ink-mute);vertical-align:top;
}
.mt-table tbody td:first-child{color:var(--ink);font-weight:500;white-space:nowrap}
.mt-table tbody td .mt-mono{color:var(--ink)}
.mt-table tbody tr:hover td{background:var(--steel-50)}
.mt-ledger__foot{
  margin-top:1.1rem;font-size:var(--fs-xs);color:var(--ink-mute);max-width:80ch;
}

/* stacked ledger on narrow screens — labels come from data-col, never from CSS strings */
@media (max-width:720px){
  .mt-ledger__scroll{overflow-x:visible;border:0;background:none;border-radius:0}
  .mt-table{min-width:0;display:block}
  .mt-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .mt-table tbody,.mt-table tr,.mt-table td,.mt-table th{display:block}
  .mt-table__group th{padding:1.6rem 0 .7rem;border:0;background:none}
  .mt-table tbody tr{
    border:1px solid var(--steel-200);margin-bottom:.7rem;background:#fff;border-radius:var(--r);
  }
  .mt-table tbody tr.mt-table__group{border:0;background:none;margin-bottom:0}
  /* block, not grid: a grid cell would make every inline <span> in the value
     its own grid item and stair-step "80 per shift · 144 per day" */
  .mt-table tbody td{
    display:block;padding:.6rem .9rem;
    border-bottom:1px solid var(--steel-200);
  }
  .mt-table tbody tr td:last-child{border-bottom:0}
  .mt-table tbody td::before{
    content:attr(data-col);display:block;margin-bottom:.2rem;
    font-size:10px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink-mute);
  }
}

/* ---------- 12. WHY ---------- */
.mt-why{background:var(--steel-50);border-bottom:1px solid var(--steel-200)}
.mt-why__grid{display:grid;gap:1px}
.mt-pillar{background:#fff;box-shadow:0 0 0 1px var(--steel-200);padding:clamp(1.35rem,2.4vw,1.9rem)}
.mt-pillar__icon{
  display:block;font-size:1.45rem;color:var(--accent-ink);margin-bottom:.95rem;
}
.mt-pillar__h{
  font-family:var(--f-display);font-size:var(--fs-h3);font-weight:700;
  letter-spacing:-.015em;margin-bottom:.5rem;
}
.mt-pillar p{font-size:var(--fs-sm);color:var(--ink-mute);text-wrap:pretty}
.mt-pillar--flag .mt-pillar__icon{color:var(--green-ink)}
@media (min-width:640px){ .mt-why__grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .mt-why__grid{grid-template-columns:repeat(3,1fr)} }

/* ---------- 13. PROCESS ---------- */
.mt-process{background:var(--steel)}
.mt-process__list{display:grid;gap:1px}
.mt-step{
  background:#fff;display:grid;grid-template-columns:auto 1fr;
  box-shadow:0 0 0 1px var(--steel-200);
  gap:clamp(1rem,2.5vw,2rem);padding:1.35rem 1rem;align-items:start;
  transition:background-color .2s var(--ease);
}
.mt-step:hover{background:var(--steel-50)}
.mt-step__n{
  font-size:var(--fs-sm);font-weight:500;color:var(--accent-ink);
  padding-top:.15em;min-width:2.4ch;
}
.mt-step__h{
  font-family:var(--f-display);font-size:var(--fs-h3);font-weight:700;
  letter-spacing:-.015em;margin-bottom:.35rem;
}
.mt-step p{font-size:var(--fs-sm);color:var(--ink-mute);max-width:70ch;text-wrap:pretty}
@media (min-width:900px){
  .mt-process__list{grid-template-columns:repeat(2,1fr);column-gap:1px}
  .mt-step{padding:1.5rem clamp(1rem,2vw,1.8rem)}
}

/* ---------- 14. LEAD FORM ---------- */
.mt-quote{background:var(--steel-100);border-block:1px solid var(--steel-200)}
.mt-quote__inner{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.mt-quote__lede{margin-top:1rem;font-size:var(--fs-lede);color:var(--ink-mute);max-width:46ch;text-wrap:pretty}
.mt-quote__facts{margin-top:2rem;display:grid;gap:1px}
.mt-quote__facts > div{
  background:#fff;box-shadow:0 0 0 1px var(--steel-200);padding:.85rem 1.05rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.mt-quote__facts dt{font-size:var(--fs-xs);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-mute)}
.mt-quote__facts dd{font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.mt-quote__facts a{color:var(--accent-ink);text-decoration:none}
.mt-quote__facts a:hover{text-decoration:underline}

.mt-form{
  position:relative;overflow:hidden;
  background:#fff;color:var(--ink);border:1px solid var(--steel-200);border-radius:var(--r);
  padding:clamp(1.35rem,3vw,2.2rem);display:grid;gap:1.05rem;
  box-shadow:0 18px 44px -34px rgba(43,58,71,.55);
}
.mt-form::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--brand-grad)}
.mt-form__row{display:grid;gap:1.05rem}
@media (min-width:560px){ .mt-form__row{grid-template-columns:1fr 1fr} }
.mt-field{display:grid;gap:.4rem}
.mt-field label{font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.mt-field abbr{color:var(--accent-ink);text-decoration:none}
.mt-field input,.mt-field select,.mt-field textarea{
  font-family:var(--f-body);font-size:var(--fs-body);color:var(--ink);
  background:var(--steel-50);border:1px solid var(--steel-200);border-radius:var(--r);
  padding:.72rem .85rem;width:100%;transition:border-color .16s var(--ease), background-color .16s var(--ease);
}
.mt-field textarea{resize:vertical;min-height:96px}
.mt-field input:focus,.mt-field select:focus,.mt-field textarea:focus{
  background:#fff;border-color:var(--accent-ink);outline:none;box-shadow:0 0 0 3px rgba(11,110,146,.14);
}
.mt-field input[aria-invalid="true"],.mt-field textarea[aria-invalid="true"]{border-color:#B3261E}
.mt-field__hint{font-size:var(--fs-xs);color:var(--ink-mute)}
.mt-field--check{grid-template-columns:auto 1fr;align-items:start;gap:.65rem}
.mt-field--check input{width:18px;height:18px;margin-top:.15rem;accent-color:var(--navy)}
.mt-field--check label{text-transform:none;letter-spacing:0;font-weight:400;font-size:var(--fs-sm);color:var(--ink-mute)}
.mt-field--check a{color:var(--accent-ink)}
/* Honeypot: off-screen rather than display:none — bots that skip hidden
   inputs still fill this, and screen readers skip it via aria-hidden. */
.mt-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.mt-form__submit{width:100%;margin-top:.3rem}
.mt-form__submit[aria-busy="true"]{opacity:.72;pointer-events:none}
.mt-form__note{font-size:var(--fs-sm);min-height:1.4em;color:var(--green-ink);font-weight:500}
.mt-form__note[data-state="error"]{color:#B3261E}
.mt-form__note[data-state="ok"]{color:var(--green-ink)}
@media (min-width:940px){
  .mt-quote__inner{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
}

/* ---------- 15. BOTTOM CTA ---------- */
.mt-cta{background:var(--slate);color:#fff;text-align:center;position:relative}
.mt-cta::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--brand-grad)}
.mt-cta__inner{display:grid;justify-items:center;gap:1rem}
.mt-cta__h{
  font-family:var(--f-display);font-size:var(--fs-h2);font-weight:800;
  letter-spacing:-.022em;max-width:20ch;
}
.mt-cta__copy{color:var(--ink-mute-d);max-width:52ch;font-size:var(--fs-lede);text-wrap:pretty}
.mt-cta__actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:.7rem}
.mt-cta .mt-btn--accent{--btn-bg:#fff;--btn-fg:var(--ink);--btn-bd:#fff}
.mt-cta .mt-btn--ghost{--btn-fg:#fff;--btn-bd:rgba(255,255,255,.34)}
.mt-cta .mt-btn--ghost:hover{--btn-bd:#fff}

/* ---------- 16. FOOTER ---------- */
.mt-footer{background:var(--slate-deep);color:var(--ink-mute-d);padding-block:var(--section-y-tight)}
.mt-footer__inner{display:grid;gap:2rem}
.mt-footer__brand img{width:150px;margin-bottom:1rem}
.mt-footer__brand p{font-size:var(--fs-sm);max-width:44ch}
.mt-footer__h{
  font-family:var(--f-body);font-size:var(--fs-xs);font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:#fff;margin-bottom:.85rem;
}
.mt-footer__list li{margin-bottom:.5rem}
.mt-footer__list a{font-size:var(--fs-sm);color:var(--ink-mute-d);text-decoration:none}
.mt-footer__list a:hover{color:var(--cyan-text-d)}
.mt-footer__legal{
  margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.12);
  display:grid;gap:1rem;
}
.mt-footer__legal p{font-size:var(--fs-xs);line-height:1.65;max-width:105ch}
.mt-footer__copy{color:var(--steel-400)}
@media (min-width:760px){
  .mt-footer__inner{grid-template-columns:2fr 1fr 1fr}
}

/* ---------- 17. SCROLL REVEAL ---------- */
/* Scoped to .js-reveal, set by an inline <head> script. If JS is disabled or
   fails to parse, the class never lands and the content is simply visible —
   a paid-search page must never render blank. */
.js-reveal .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease), transform .6s var(--ease)}
.js-reveal .reveal.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .js-reveal .reveal{opacity:1;transform:none}
}

/* ---------- 18. HERO PLATE — small screens ---------- */
@media (max-width:900px){
  .mt-plate__callouts{
    position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    gap:.55rem;margin-top:1.1rem;
  }
  .mt-callout{position:static;width:auto;height:auto;display:flex;gap:.55rem;align-items:flex-start}
  .mt-callout__line{display:none}
  .mt-callout__dot{position:static;flex:none;margin-top:.5em}
  .mt-callout__label{
    position:static;transform:none;white-space:normal;background:none;border:0;padding:0;
    font-size:var(--fs-xs);color:var(--ink-mute);
  }
}

/* narrow-phone guards */
@media (max-width:420px){
  .mt-btn{padding:.7rem .95rem}
  .mt-btn--lg{padding:.85rem 1.2rem;font-size:var(--fs-sm)}
  .mt-header__cta{font-size:var(--fs-xs)}
}