/* ============================================================
Moisture Master Pros
Same bones as the AccuMold site — full-height panels, huge
display type, mono instrument labels — moved onto MMP's own
navy, with the FLIR thermal ramp as the one accent that is
allowed to be loud.
============================================================ */
:root{
/* ------------------------------------------------------------------
Sampled from the logo itself: the droplet runs #7BD3F8 at the tip
down to #0653BA in the body. The brand guide's teal did not match
the mark, so the mark wins.
------------------------------------------------------------------ */
--blue: #0A5FD0; /* primary action */
--blue-deep: #0747A3; /* hover / pressed */
--blue-lift: #179DF6;
--blue-pale: #EAF3FE;
--sky: #4BBDFC; /* accent only, fails contrast as text on white */
--sky-pale: #E6F5FE;
--cyan: #4BBDFC;
--cyan-pale: #E6F5FE;
/* one deep ground, used sparingly */
--navy: #062A5E;
--navy-2: #08356F;
--navy-3: #0A5FD0;
--green: #17A673;
--green-pale:#E6F6EF;
--amber: #E0912A;
--red: #D8453F;
--gold: #F0A93C;
--white: #FFFFFF;
--paper: #F6F8FB;
--ink: #0B1524;
--ink-2: #56637A;
--ink-3: #93A0B4;
--muted: #56637A;
--line: rgba(11,21,36,.10);
--line-inv: rgba(255,255,255,.22);
--gut: clamp(24px, 6vw, 104px);
--maxw: 1180px;
--nav-h: 76px;
--bar-h: 0px;
--ease: cubic-bezier(.16,1,.3,1);
--f: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--fd: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--fm: "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
margin:0; background:var(--white); color:var(--ink);
font-family:var(--f); font-size:17px; line-height:1.55;
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
overflow-x:hidden;
}
/* height:auto matters: every ![]()
carries width/height attributes to
reserve layout space, and without it the attribute height is used
literally while CSS scales the width, which stretches the picture.
Rules that genuinely want a fixed height set it explicitly below. */
img,video,canvas,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:4px; border-radius:3px; }
::selection{ background:var(--blue); color:#fff; }
/* ---------- Type ---------- */
.d1{ font-family:var(--fd); font-size:clamp(2.9rem, 8.4vw, 7.4rem); line-height:.9; letter-spacing:-.035em; font-weight:900; margin:0; }
.d2{ font-family:var(--fd); font-size:clamp(2rem, 4.6vw, 3.7rem); line-height:1.05; letter-spacing:-.028em; font-weight:900; margin:0; }
.d3{ font-family:var(--fd); font-size:clamp(1.6rem, 2.9vw, 2.35rem); line-height:1.12; letter-spacing:-.024em; font-weight:700; margin:0; }
.d4{ font-family:var(--fd); font-size:clamp(1.2rem, 1.8vw, 1.5rem); line-height:1.2; letter-spacing:-.02em; font-weight:700; margin:0; }
.t1{ font-size:clamp(1rem,1.2vw,1.14rem); line-height:1.62; color:var(--ink-2); margin:0; }
.t2{ font-size:.95rem; line-height:1.6; color:var(--ink-2); margin:0; }
.kicker{
font-family:var(--fm); font-size:.58rem; letter-spacing:.3em; text-transform:uppercase;
color:var(--blue); margin:0 0 26px; font-weight:500;
}
.num{ font-family:var(--fm); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }
/* ---------- Panels ---------- */
.panel{
position:relative; min-height:100svh; display:grid; place-items:center;
/* minmax(0,1fr), not the implicit auto track: with place-items:center an
auto track sizes to its widest child's max-content, so one wide child
(the review marquee) stretched the column and pushed every centred
sibling off to the right. overflow:hidden clips the paint but does not
stop the track growing. */
grid-template-columns:minmax(0,1fr);
padding:calc(var(--nav-h) + 6vh) var(--gut) 10vh; overflow:hidden;
background:var(--white);
}
.panel-auto{ min-height:0; padding-block:clamp(88px,15vh,196px); }
.inner{ width:100%; max-width:min(var(--maxw),100%); min-width:0; margin-inline:auto; }
.mid{ text-align:center; }
.narrow{ max-width:22ch; margin-inline:auto; }
.narrow-w{ max-width:50ch; margin-inline:auto; }
/* fields */
.navy{ background:var(--navy); color:#fff; }
.navy .t1,.navy .t2{ color:rgba(255,255,255,.76); }
.navy .kicker{ color:var(--sky); }
.navy .num{ color:rgba(255,255,255,.5); }
.paper{ background:var(--paper); }
.blue{ background:var(--blue); color:#fff; }
.blue .t1,.blue .t2{ color:rgba(255,255,255,.8); }
.blue .kicker,.blue .num{ color:rgba(255,255,255,.66); }
/* ---------- Buttons ---------- */
.b{
display:inline-flex; align-items:center; justify-content:center; gap:10px;
height:56px; padding:0 30px; border-radius:100px; font-weight:600; font-size:1rem;
letter-spacing:-.01em; background:var(--blue); color:#fff; text-align:center;
transition:transform .35s var(--ease), background .25s var(--ease), box-shadow .35s var(--ease), color .25s;
box-shadow:0 10px 26px -14px rgba(21,101,207,.9);
}
.b:hover{ transform:translateY(-2px); background:var(--blue-deep); }
.b-ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line); }
.b-ghost:hover{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--blue); color:var(--blue); }
.b-sm{ height:46px; padding:0 22px; font-size:.92rem; }
/* An