/* ==========================================================================
   MIDDLE CLASS MADE INC - SHARED DESIGN SYSTEM
   One skeleton, four brands. Change --accent and the photography; nothing else.

   Used by:  Middle Class Made Inc  ·  Home Hero's Pro  ·  4R Pros  ·  Handymax

   The congruence is deliberate. A visitor who lands on any one of the four
   should recognise the others instantly: same structure, same motion, same
   type, same button language. The accent colour and the photography are the
   only things that change, which is exactly how a parent company signals that
   its divisions are one enterprise rather than four unrelated contractors.
   ========================================================================== */

/* ---- 1. Brand themes ---------------------------------------------------- */

:root{
  /* Shared across every division */
  --void:#080B1C;          /* deepest surface, hero and footer            */
  --navy:#101636;          /* dark section surface                        */
  --navy-2:#1A2350;        /* raised dark card                            */
  --paper:#FFFFFF;
  --paper-2:#F3F5FA;       /* light section surface                       */
  --ink:#0C1024;           /* text on light                               */
  --ink-2:#4C566F;         /* secondary text on light                     */
  --chalk:#E8ECF7;         /* text on dark                                */
  --chalk-2:#9BA6C6;       /* secondary text on dark                      */
  --hair:rgba(255,255,255,.12);
  --hair-dark:#E2E6EF;

  --wrap:1240px;
  --r-sm:10px; --r-md:16px; --r-lg:26px; --r-pill:999px;
  --ease:cubic-bezier(.22,.75,.24,1);

  /* ---- The four company colours -------------------------------------
     Shared by every division, on every page. These never change with the
     brand class. They are half of what makes the four sites read as one
     enterprise: the metal tells you WHICH company, these tell you WHOSE. */
  --co-white:#FFFFFF;
  --co-blue:#1E2A78;      /* the surface family and the link colour        */
  --co-blue-lt:#5B7CFA;   /* interactive blue on dark                      */
  --co-green:#33B27C;     /* positive states, confirmations, "no deduction"*/
  --co-gold:#E9B53C;      /* highlight rules and emphasis on any site      */

  /* Default accent = Middle Class Made (platinum) */
  --accent:#CBD6EA;
  --accent-grad:linear-gradient(135deg,#F2F6FD 0%,#CBD6EA 46%,#9FB0CE 100%);
  --accent-ink:#10162E;
  --accent-soft:rgba(203,214,234,.16);
}

/* ---- Division themes: the subscription tier metals ----------------------
   Marcus's decision, 2026-08-10. The metal that names each membership tier
   also names the company, so the tier ladder and the company ladder are the
   same visual idea rather than two competing ones.

     Platinum -> Middle Class Made Inc   (the parent, the highest tier)
     Gold     -> Home Hero's Pro
     Silver   -> 4 R Pros
     Bronze   -> Handymax

   Platinum and silver are the pair most at risk of reading as the same
   colour, so platinum carries a deliberate cool blue cast and silver stays
   neutral and a shade darker. Check them side by side after any edit here. */

.brand-mcm{
  --accent:#CBD6EA;
  --accent-grad:linear-gradient(135deg,#F2F6FD 0%,#CBD6EA 46%,#9FB0CE 100%);
  --accent-ink:#10162E; --accent-soft:rgba(203,214,234,.16);
}
.brand-hhp{
  --accent:#E9B53C;
  --accent-grad:linear-gradient(135deg,#F8DC86 0%,#E9B53C 48%,#BE8916 100%);
  --accent-ink:#2B1E00; --accent-soft:rgba(233,181,60,.16);
}
.brand-4rpros{
  --accent:#A9B4C2;
  --accent-grad:linear-gradient(135deg,#DDE4EC 0%,#A9B4C2 48%,#7C8797 100%);
  --accent-ink:#12171F; --accent-soft:rgba(169,180,194,.16);
}
.brand-handymax{
  --accent:#C4823F;
  --accent-grad:linear-gradient(135deg,#E3AC72 0%,#C4823F 48%,#8E551D 100%);
  --accent-ink:#2A1305; --accent-soft:rgba(196,130,63,.16);
}

/* ---- 2. Base ------------------------------------------------------------ */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink-2);
  font-family:'Inter','Segoe UI',system-ui,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,.display{
  font-family:'Poppins','Segoe UI',system-ui,sans-serif;
  color:var(--ink);margin:0;line-height:1.04;letter-spacing:-.03em;font-weight:700;
}
h1{font-size:clamp(34px,4.4vw,62px)}
h2{font-size:clamp(32px,4.2vw,56px)}
h3{font-size:clamp(20px,2vw,26px);letter-spacing:-.015em}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 34px}

.eyebrow{
  font-family:'Poppins',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  display:flex;align-items:center;gap:10px;
}
.eyebrow:before{content:"";width:26px;height:2px;background:var(--accent);flex:0 0 auto}
.eyebrow.center{justify-content:center}

/* Dark sections invert the text colours */
.on-dark{background:var(--navy);color:var(--chalk-2)}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:#fff}
.on-void{background:var(--void);color:var(--chalk-2)}
.on-void h1,.on-void h2,.on-void h3{color:#fff}
.on-paper{background:var(--paper-2)}

section{padding:clamp(64px,9vw,132px) 0;position:relative}

/* ---- 3. Buttons: pills, exactly two kinds ------------------------------- */

.pill{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Poppins',sans-serif;font-size:15px;font-weight:600;
  padding:15px 30px;border-radius:var(--r-pill);border:1.5px solid transparent;
  cursor:pointer;transition:transform .25s var(--ease),background .25s,border-color .25s;
  white-space:nowrap;
}
.pill:hover{transform:translateY(-2px)}
/* The metal reads as metal because it is a gradient, not a flat fill. */
.pill-accent{background:var(--accent-grad);color:var(--accent-ink)}
.pill-accent:hover{filter:brightness(1.06) saturate(1.05)}
.pill-glass{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.30);
  backdrop-filter:blur(10px)}
.pill-glass:hover{background:rgba(255,255,255,.18)}
.pill-ink{background:var(--ink);color:#fff}
.pill-outline{background:transparent;color:var(--ink);border-color:#C6CDDD}
.pill-outline:hover{border-color:var(--ink)}
.pill-sm{padding:11px 22px;font-size:14px}
.arrow{transition:transform .25s var(--ease)}
.pill:hover .arrow{transform:translateX(4px)}

/* ---- 4. Header: transparent over the hero, solid after ------------------ */

.site-head{
  position:fixed;inset:0 0 auto 0;z-index:80;
  transition:background .35s var(--ease),backdrop-filter .35s,box-shadow .35s;
}
.site-head .bar{display:flex;align-items:center;gap:34px;height:104px;transition:height .35s var(--ease)}
.site-head.stuck{background:rgba(8,11,28,.88);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--hair)}
.site-head.stuck .bar{height:82px}
.logo{display:flex;align-items:center;gap:11px;color:#fff;
  font-family:'Poppins',sans-serif;font-weight:700;font-size:19px;letter-spacing:-.02em;white-space:nowrap}
.logo .glyph{
  width:34px;height:34px;border-radius:9px;flex:0 0 auto;position:relative;
  background:var(--accent-grad);
}
.logo .glyph:after{content:"";position:absolute;inset:9px 8px;border-left:3px solid var(--accent-ink);
  border-bottom:3px solid var(--accent-ink);opacity:.75;transform:skewX(-12deg)}

/* The real Home Hero's Pro mark, locked 2026-09-18 -- see hhp-site/assets/README-LOGO.md.
   Overrides the generic placeholder glyph above; other brands still use the placeholder
   until each has its own locked mark.

   2026-09-19: switched from the icon+name lockup (wordmark baked into the image) back
   to icon image + live text. The baked-in wordmark is a fixed ~20% of the image's
   height (the shield dominates the composition), so enlarging the whole image kept the
   lettering small and out of proportion with the rest of the page's type no matter how
   big the box got -- that's what read as "placed in there haphazardly." Live text
   inherits the site's real typography and sizes independently of the icon. */
.logo .glyph.hhp-mark{background:none;display:inline-block;width:auto;height:64px}
.logo .glyph.hhp-mark:after{content:none}
.logo .glyph.hhp-mark img{width:auto;height:100%;object-fit:contain;display:block}
.logo .hhp-word{color:#D4AF37;font-size:28px;line-height:1;white-space:nowrap}
.site-head.stuck .logo .glyph.hhp-mark{height:50px;transition:height .35s var(--ease)}
.site-head.stuck .logo .hhp-word{font-size:22px;transition:font-size .35s var(--ease)}
/* display:inline-block above is load-bearing, not decorative: .glyph has no
   explicit display of its own, so it only gets its width:34px/height:34px from
   being blockified as a flex item of .logo. .site-foot a{display:block} (higher
   specificity than .logo{display:flex}) breaks that flex context in the footer
   only, so without this the image here renders at its own native pixel size
   instead of 34px. The placeholder glyph on the other three brands has this same
   latent bug -- it just collapses to invisible instead of oversized, so nobody
   has noticed yet. Out of scope to fix generally here; flagged separately. */

.site-nav{display:flex;gap:30px;margin-left:auto}
.site-nav a{font-size:15px;color:rgba(255,255,255,.82);white-space:nowrap;position:relative;padding:4px 0}
.site-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--accent);transition:right .3s var(--ease)}
.site-nav a:hover{color:#fff}
.site-nav a:hover:after{right:0}
.head-actions{display:flex;align-items:center;gap:12px}

/* ---- 5. Cinematic hero -------------------------------------------------- */

.hero{
  min-height:100svh;display:flex;align-items:flex-end;
  position:relative;overflow:hidden;background:var(--void);
  /* Top padding clears the fixed header (104px) plus margin; the hero must never sit
     under it. Bumped from 124px when the header grew from 84px to 104px, 2026-09-19. */
  padding:144px 0 clamp(48px,6vw,88px);
}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;
  animation:slowzoom 22s var(--ease) forwards}
@keyframes slowzoom{from{transform:scale(1.10)}to{transform:scale(1)}}
.hero-scrim{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to top,rgba(8,11,28,.94) 0%,rgba(8,11,28,.58) 42%,rgba(8,11,28,.30) 70%,rgba(8,11,28,.55) 100%);
}
.hero .wrap{position:relative;z-index:2;width:100%}
/* Wide enough that the manual line splits in .lines decide the breaks.
   Set this too narrow and the browser re-wraps inside a span, which is what
   produced a stray one-word line on the 4 R Pros and MCM headlines. */
.hero h1{color:#fff;max-width:26ch;margin-top:20px}
.hero .lead{color:var(--chalk);font-size:clamp(17px,1.5vw,21px);max-width:52ch;margin-top:24px}
.hero-actions{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap}
.hero-foot{
  display:flex;gap:40px;flex-wrap:wrap;margin-top:38px;padding-top:22px;
  border-top:1px solid var(--hair);
}
.hero-foot div{color:var(--chalk-2);font-size:14px}
.hero-foot b{display:block;color:#fff;font-family:'Poppins',sans-serif;font-size:26px;
  font-weight:700;letter-spacing:-.02em;margin-bottom:2px}

/* Placeholder art so layout reads honestly before real photography lands */
.ph{
  width:100%;height:100%;position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 18% 12%, color-mix(in srgb,var(--accent) 30%,transparent) 0%, transparent 55%),
    radial-gradient(100% 80% at 88% 90%, rgba(91,124,250,.28) 0%, transparent 58%),
    linear-gradient(135deg,#111A3F 0%,#0A0F26 55%,#151E48 100%);
}
.ph:after{
  content:attr(data-label);position:absolute;inset:auto 0 0 0;padding:14px 18px;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.42);
}
.ph-grid{position:absolute;inset:0;opacity:.16;
  background-image:linear-gradient(var(--hair) 1px,transparent 1px),
                   linear-gradient(90deg,var(--hair) 1px,transparent 1px);
  background-size:52px 52px}

/* ---- 5b. Motion layer --------------------------------------------------- */
/* Added after Marcus asked for more energy. Every item here is restrained on
   purpose: motion should reward scrolling, never fight it. All of it is
   switched off wholesale by prefers-reduced-motion at the end of section 6. */

/* Scroll progress hairline across the very top of the page. */
.progress{position:fixed;inset:0 auto auto 0;height:3px;width:100%;z-index:90;
  background:var(--accent);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .12s linear}

/* Headline reveals a line at a time rather than all at once. */
.lines span{display:block;overflow:hidden}
.lines span > i{display:block;font-style:normal;transform:translateY(105%);
  transition:transform .95s var(--ease)}
.lines.in span:nth-child(1) > i{transition-delay:.05s}
.lines.in span:nth-child(2) > i{transition-delay:.15s}
.lines.in span:nth-child(3) > i{transition-delay:.25s}
.lines.in span:nth-child(4) > i{transition-delay:.35s}
.lines.in span > i{transform:none}

/* Hero photograph drifts slower than the page. Set by JS. */
.hero-media{will-change:transform}

/* The eyebrow rule draws itself in. */
.eyebrow:before{transform:scaleX(0);transform-origin:0 50%;
  transition:transform .7s var(--ease) .1s}
.reveal.in .eyebrow:before,.eyebrow.in:before,.in > .eyebrow:before{transform:none}

/* Numbers count up. JS fills the text; this just holds the space steady. */
.count{font-variant-numeric:tabular-nums}

/* Cards tilt their accent edge in on entry. */
.card{position:relative;overflow:hidden}
.card:after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--accent);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease)}
.card.in:after,.reveal.in .card:after{transform:none}

/* Tiles rise in sequence, then breathe on hover. */
.tile span{transition:transform .35s var(--ease)}
.tile:hover span{transform:translateX(4px)}

/* ---- 6. Reveal on scroll ------------------------------------------------ */

.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero-media img{animation:none}
}

/* The signature move: a frame that widens as it enters the viewport. */
.expand{border-radius:var(--r-lg);overflow:hidden;
  transform:scaleX(.72) scaleY(.86);opacity:.35;
  transition:transform 1.1s var(--ease),opacity .8s var(--ease)}
.expand.in{transform:none;opacity:1}

/* ---- 7. Tiles ----------------------------------------------------------- */

.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tile{
  position:relative;aspect-ratio:1/1.06;border-radius:var(--r-md);overflow:hidden;
  display:flex;align-items:flex-end;padding:22px;isolation:isolate;
  transition:transform .4s var(--ease)
}
.tile:hover{transform:translateY(-6px)}
.tile .ph{position:absolute;inset:0;z-index:-2;transition:transform .6s var(--ease)}
.tile:hover .ph{transform:scale(1.06)}
.tile:before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(6,9,22,.86) 0%,rgba(6,9,22,.18) 60%)}
.tile span{font-family:'Poppins',sans-serif;font-weight:700;font-size:21px;color:#fff;
  letter-spacing:-.02em}

/* ---- 8. Cards, stats, steps -------------------------------------------- */

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,76px);align-items:center}
.card{
  background:var(--paper);border:1px solid var(--hair-dark);border-radius:var(--r-md);
  padding:32px;transition:transform .35s var(--ease),box-shadow .35s var(--ease)
}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(12,16,36,.10)}
.card p{font-size:15.5px;margin-top:10px}
.on-dark .card,.on-void .card{background:var(--navy-2);border-color:var(--hair)}
.on-dark .card p,.on-void .card p{color:var(--chalk-2)}

.numeral{
  font-family:'Poppins',sans-serif;font-weight:700;font-size:15px;color:var(--accent);
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px
}
.icon{
  width:46px;height:46px;border-radius:12px;background:var(--accent-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  color:var(--accent);font-size:20px;font-weight:700;font-family:'Poppins',sans-serif
}

/* ---- 9. The Home Health Score dial (HHP's signature object) ------------- */

.dial-wrap{display:flex;align-items:center;gap:clamp(24px,4vw,54px);flex-wrap:wrap}
.dial{position:relative;width:236px;height:236px;flex:0 0 auto}
.dial svg{transform:rotate(-90deg);width:100%;height:100%}
.dial .track{fill:none;stroke:rgba(255,255,255,.10);stroke-width:14}
.dial .bar{fill:none;stroke:var(--accent);stroke-width:14;stroke-linecap:round;
  stroke-dasharray:628;stroke-dashoffset:628;
  transition:stroke-dashoffset 1.9s var(--ease)}
.dial.in .bar{stroke-dashoffset:var(--offset)}
.dial .val{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
}
.dial .val b{font-family:'Poppins',sans-serif;font-size:62px;font-weight:700;color:#fff;
  letter-spacing:-.04em;line-height:1}
.dial .val small{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--chalk-2);margin-top:6px}

.ledger{flex:1 1 300px;min-width:280px}
.ledger .row{
  display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--hair)
}
.ledger .row:last-child{border-bottom:0}
.chip{
  font-family:'Poppins',sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:5px 11px;border-radius:var(--r-pill);flex:0 0 auto
}
.chip-now{background:rgba(226,86,86,.16);color:#FF8E8E}
.chip-soon{background:var(--accent-soft);color:var(--accent)}
.chip-later{background:rgba(155,166,198,.14);color:var(--chalk-2)}
.chip-want{background:rgba(51,178,124,.16);color:var(--co-green)}
.ledger .row span{color:var(--chalk);font-size:15.5px}
.ledger .row em{margin-left:auto;color:var(--chalk-2);font-size:13px;font-style:normal;white-space:nowrap}

/* ---- 10. Marquee -------------------------------------------------------- */

.marquee{overflow:hidden;border-block:1px solid var(--hair);padding:20px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:56px;width:max-content;animation:slide 34s linear infinite}
.marquee span{font-family:'Poppins',sans-serif;font-weight:600;font-size:15px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--chalk-2);
  display:flex;align-items:center;gap:14px;white-space:nowrap}
.marquee span:after{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ---- 11. Footer --------------------------------------------------------- */

.site-foot{background:var(--void);color:var(--chalk-2);padding:84px 0 34px;font-size:15px}
.foot-cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px}
.site-foot h4{color:#fff;font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px}
.site-foot a{display:block;margin-bottom:11px;color:var(--chalk-2);transition:color .2s}
.site-foot a:hover{color:#fff}

/* The company-colour rail. White, blue, green and gold, in that order, at the
   foot of every division site. It is the one element that is identical on all
   four and does not shift with the brand class, which is precisely its job. */
.co-rail{display:flex;height:5px;width:100%;border-radius:var(--r-pill);overflow:hidden;margin-top:34px}
.co-rail i{flex:1}
.co-rail i:nth-child(1){background:var(--co-white)}
.co-rail i:nth-child(2){background:var(--co-blue-lt)}
.co-rail i:nth-child(3){background:var(--co-green)}
.co-rail i:nth-child(4){background:var(--co-gold)}

/* The family bar: what actually ties the four sites together. */
.family{
  margin-top:44px;padding-top:30px;border-top:1px solid var(--hair);
}
/* The current site's own entry is marked, so a visitor always knows where
   they are standing inside the group. */
.family-row a[aria-current="page"]{background:rgba(255,255,255,.09);border-color:var(--accent)}
.family-label{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--chalk-2);margin-bottom:18px}
.family-row{display:flex;gap:12px;flex-wrap:wrap}
.family-row a,.family-row .soon{
  display:flex;align-items:center;gap:10px;margin:0;padding:12px 18px;
  border:1px solid var(--hair);border-radius:var(--r-pill);font-size:14px;color:var(--chalk);
  transition:border-color .25s,background .25s
}
.family-row a:hover{border-color:var(--dotc,var(--accent));background:rgba(255,255,255,.04)}
/* A company not yet public: shown, not linked, until its domain is live. */
.family-row .soon{color:var(--chalk-2);cursor:default}
.family-row .soon em{font-style:normal;font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.family-row i{width:9px;height:9px;border-radius:50%;background:var(--dotc);display:block}
.legal-line{margin-top:34px;padding-top:22px;border-top:1px solid var(--hair);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13.5px;color:#7C87A8}

/* ---- 12. Responsive ----------------------------------------------------- */

@media (max-width:1000px){
  .site-nav{display:none}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr 1fr}
  .expand{transform:none;opacity:1}
  .wrap{padding:0 22px}
  .hero{min-height:88svh}
  .hero-foot{gap:26px}
}
@media (max-width:560px){
  .tiles{grid-template-columns:1fr 1fr}
  .foot-cols{grid-template-columns:1fr}
  .dial{width:186px;height:186px}
  .dial .val b{font-size:50px}
}