/* Proplo UI — shared design system
 * =================================
 * Premium light with dark "moments." Codifies the /estimate/ language so every
 * page is consistent. Light base, generous whitespace, bold editorial numbers,
 * teal accent, motion. Dark sections (.pui-dark) are the dramatic hero moments.
 *
 * Tokens → components → utilities. Prefixed .pui- to coexist with legacy pages.
 */
:root{
  --navy:#0B1D3A; --navy-2:#142D54; --ink:#0B1D3A;
  --teal:#00D4AA; --teal-d:#00B894; --teal-soft:rgba(0,212,170,.08);
  --white:#fff; --snow:#F8FAFB; --cloud:#F1F5F9;
  --line:#E7ECF2; --line-2:#DCE3EB;
  --t-900:#0B1D3A; --t-700:#334155; --t-500:#64748B; --t-400:#94A3B8;
  --serif:'Newsreader',Georgia,serif; --sans:'Outfit',system-ui,-apple-system,sans-serif;
  --r:12px; --r-lg:18px; --r-xl:24px;
  --shadow:0 2px 8px rgba(11,29,58,.04),0 12px 32px -12px rgba(11,29,58,.10);
  --shadow-lg:0 30px 70px -24px rgba(11,29,58,.28);
  --ease:cubic-bezier(.2,.7,.2,1);
  --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body.pui{font-family:var(--sans);color:var(--t-700);background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.pui a{color:inherit;text-decoration:none}
.pui-wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* ---- typography ---- */
.pui-eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-d)}
.pui-dark .pui-eyebrow{color:var(--teal)}
.pui h1,.pui-h1{font-family:var(--serif);font-weight:500;letter-spacing:-.025em;line-height:1.06;color:var(--ink);font-size:clamp(38px,6vw,68px)}
.pui h2,.pui-h2{font-family:var(--serif);font-weight:500;letter-spacing:-.02em;line-height:1.12;color:var(--ink);font-size:clamp(30px,4.2vw,46px)}
.pui-h3{font-family:var(--serif);font-weight:500;font-size:22px;color:var(--ink);line-height:1.2}
.pui-lede{font-size:clamp(17px,2vw,20px);font-weight:300;line-height:1.6;color:var(--t-500)}
.pui-num{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;color:var(--ink)}
em.pui-accent{font-style:italic;color:var(--teal-d)}
.pui-dark em.pui-accent{color:var(--teal)}

/* ---- buttons ---- */
.pui-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);font-size:15.5px;font-weight:600;padding:14px 26px;border-radius:12px;border:none;cursor:pointer;transition:transform .12s var(--ease),background .2s,box-shadow .2s;white-space:nowrap}
.pui-btn:active{transform:scale(.98)}
.pui-btn-teal{background:var(--teal);color:var(--navy)}.pui-btn-teal:hover{background:var(--teal-d)}
.pui-btn-navy{background:var(--navy);color:#fff}.pui-btn-navy:hover{background:var(--navy-2)}
.pui-btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-2)}.pui-btn-ghost:hover{border-color:var(--navy);background:var(--snow)}
.pui-dark .pui-btn-ghost{color:#fff;border-color:rgba(255,255,255,.2)}.pui-dark .pui-btn-ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.4)}
.pui-btn-lg{padding:17px 32px;font-size:16.5px;border-radius:14px}

/* ---- nav ---- */
.pui-nav{position:fixed;top:0;left:0;right:0;z-index:100;height:72px;display:flex;align-items:center;transition:background .3s,border-color .3s,box-shadow .3s}
.pui-nav .pui-wrap{display:flex;align-items:center;justify-content:space-between;width:100%}
.pui-nav.over-dark{background:transparent}
.pui-nav.scrolled{background:rgba(255,255,255,.9);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(11,29,58,.02)}
.pui-brand{font-size:21px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.pui-brand em{color:var(--teal-d);font-style:normal}
.pui-nav.over-dark .pui-brand{color:#fff}.pui-nav.over-dark .pui-brand em{color:var(--teal)}
.pui-navlinks{display:flex;align-items:center;gap:30px}
.pui-navlinks a{font-size:14.5px;font-weight:400;color:var(--t-700);transition:color .2s}
.pui-navlinks a:hover{color:var(--ink)}
.pui-nav.over-dark .pui-navlinks a{color:rgba(255,255,255,.75)}.pui-nav.over-dark .pui-navlinks a:hover{color:#fff}
.pui-nav.over-dark .pui-navlinks .pui-btn-navy{background:var(--teal);color:var(--navy)}
.pui-navtoggle{display:none;background:none;border:none;cursor:pointer;padding:8px}
.pui-navtoggle span{display:block;width:22px;height:2px;margin:5px 0;border-radius:2px;background:var(--ink);transition:.3s}
.pui-nav.over-dark .pui-navtoggle span{background:#fff}
@media(max-width:860px){.pui-navlinks a:not(.pui-btn){display:none}.pui-navtoggle{display:block}}

/* ---- sections ---- */
.pui-sec{padding:clamp(72px,10vw,120px) 0}
.pui-sec.tight{padding:clamp(48px,7vw,80px) 0}
.pui-sec.snow{background:var(--snow)}
.pui-dark{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.pui-dark h1,.pui-dark h2,.pui-dark .pui-h1,.pui-dark .pui-h2,.pui-dark .pui-h3,.pui-dark .pui-num{color:#fff}
.pui-dark .pui-lede{color:#9FB0C8}
.pui-glow{position:absolute;pointer-events:none;background:radial-gradient(circle,rgba(0,212,170,.14),transparent 70%);width:900px;height:700px;top:-30%;left:50%;transform:translateX(-50%)}
.pui-sec-head{text-align:center;max-width:680px;margin:0 auto clamp(40px,6vw,64px)}
.pui-sec-head .pui-eyebrow{display:block;margin-bottom:14px}
.pui-sec-head .pui-lede{margin-top:14px}

/* ---- cards / grids ---- */
.pui-grid{display:grid;gap:22px}
.pui-grid-3{grid-template-columns:repeat(3,1fr)}
.pui-grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:860px){.pui-grid-3{grid-template-columns:1fr}.pui-grid-2{grid-template-columns:1fr}}
.pui-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;transition:transform .2s var(--ease),box-shadow .2s,border-color .2s}
.pui-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-2)}
.pui-card .ic{width:46px;height:46px;border-radius:12px;background:var(--teal-soft);color:var(--teal-d);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.pui-card h3{font-family:var(--serif);font-weight:500;font-size:21px;color:var(--ink);margin-bottom:8px}
.pui-card p{font-size:15px;font-weight:300;line-height:1.6;color:var(--t-500)}

/* ---- stat tiles ---- */
.pui-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:#fff}
.pui-stat{padding:30px 24px;text-align:center;border-right:1px solid var(--line)}
.pui-stat:last-child{border-right:none}
.pui-stat .v{font-family:var(--serif);font-size:clamp(30px,4vw,42px);color:var(--ink);line-height:1}
.pui-dark .pui-stat .v{color:#fff}
.pui-stat .k{font-size:13px;font-weight:300;color:var(--t-500);margin-top:8px}
.pui-dark .pui-stats{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1)}
.pui-dark .pui-stat{border-color:rgba(255,255,255,.1)}.pui-dark .pui-stat .k{color:#9FB0C8}
@media(max-width:720px){.pui-stats{grid-template-columns:1fr 1fr}.pui-stat:nth-child(2){border-right:none}.pui-stat:nth-child(1),.pui-stat:nth-child(2){border-bottom:1px solid var(--line)}}

/* ---- pills / tags ---- */
.pui-pill{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;padding:7px 15px;border-radius:999px;background:var(--teal-soft);color:var(--teal-d)}
.pui-dark .pui-pill{background:rgba(0,212,170,.12);color:var(--teal)}

/* ---- footer ---- */
.pui-footer{background:var(--navy);color:#fff;padding:64px 0 40px}
.pui-footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;margin-bottom:44px}
@media(max-width:860px){.pui-footer .cols{grid-template-columns:1fr 1fr}}
.pui-footer .pui-brand{color:#fff;font-size:22px;margin-bottom:12px;display:inline-block}
.pui-footer .tag{font-size:14px;color:#9FB0C8;font-weight:300;line-height:1.6;max-width:280px}
.pui-footer h4{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#64748B;margin-bottom:14px}
.pui-footer a.fl{display:block;font-size:14.5px;color:#CBD5E1;font-weight:300;margin-bottom:10px;transition:color .2s}
.pui-footer a.fl:hover{color:#fff}
.pui-footer .base{border-top:1px solid rgba(255,255,255,.08);padding-top:24px;font-size:13px;color:#64748B;font-weight:300;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

/* ---- reveal on scroll ---- */
.pui-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.pui-reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.pui-reveal{opacity:1!important;transform:none!important;transition:none}}