/* ==========================================================================
   Clevaligner — graft styles (footer + contact + legal)
   Fully SCOPED under .clev-graft so it never leaks into the old Elementor
   header / WordPress pages. Safe to load on any page.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Mulish:wght@400;500;600;700&display=swap');

.clev-graft{
  --ink:#211652; --ink-2:#3a2f63; --body:#4d4570; --muted:#716a90;
  --line:#e8e5f1; --line-2:#ddd8ec; --bg:#ffffff; --bg-alt:#f6f5fb;
  --bg-navy:#211652; --bg-navy-2:#1a1142;
  --brand:#a8317b; --brand-deep:#8a2766; --clean:#a8317b; --clean-tint:#f7e7f1;
  --r-sm:8px; --r:14px; --r-lg:22px; --r-xl:30px; --maxw:1200px;
  --pad:clamp(20px,5vw,64px);
  --shadow:0 1px 2px rgba(16,42,57,.04),0 12px 32px -16px rgba(16,42,57,.18);
  --shadow-lg:0 2px 6px rgba(16,42,57,.05),0 30px 60px -28px rgba(16,42,57,.30);
  --sans:'Mulish',system-ui,sans-serif; --disp:'Plus Jakarta Sans',system-ui,sans-serif;
  font-family:var(--sans); color:var(--body); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.clev-graft *{box-sizing:border-box}
.clev-graft img{max-width:100%; display:block}
.clev-graft a{color:inherit; text-decoration:none}
.clev-graft h1,.clev-graft h2,.clev-graft h3,.clev-graft h4{
  font-family:var(--disp); color:var(--ink); margin:0; line-height:1.15; letter-spacing:-.02em; font-weight:700}
.clev-graft p{margin:0}

.clev-graft .wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}
.clev-graft .section{padding:clamp(48px,7vw,104px) 0}
.clev-graft .eyebrow{font-family:var(--disp); font-weight:700; font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brand-deep); display:inline-flex; align-items:center; gap:10px}
.clev-graft .eyebrow::before{content:""; width:26px; height:2px; background:currentColor; border-radius:2px}
.clev-graft .h-hero{font-size:clamp(34px,5vw,56px); font-weight:800; letter-spacing:-.035em}
.clev-graft .lead{font-size:clamp(17px,2.2vw,21px); color:var(--ink-2); line-height:1.55}
.clev-graft .split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:start}
@media(max-width:860px){.clev-graft .split{grid-template-columns:1fr; gap:32px}}
.clev-graft .grid{display:grid; gap:24px}

/* buttons */
.clev-graft .btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--disp); font-weight:700;
  font-size:16px; padding:14px 26px; border-radius:999px; cursor:pointer; border:1.5px solid transparent;
  transition:.18s ease; white-space:nowrap; color:#fff}
.clev-graft .btn svg{width:18px; height:18px}
.clev-graft .btn--brand{background:var(--brand); color:#fff}
.clev-graft .btn--brand:hover{filter:brightness(1.06); transform:translateY(-1px)}
.clev-graft .btn--lg{padding:17px 32px; font-size:17px}

/* contact form */
.clev-graft .form-row{display:grid; gap:18px; grid-template-columns:1fr 1fr}
@media(max-width:640px){.clev-graft .form-row{grid-template-columns:1fr}}
.clev-graft .field{display:flex; flex-direction:column; gap:7px}
.clev-graft .field label{font-family:var(--disp); font-weight:600; font-size:14px; color:var(--ink-2)}
.clev-graft .field input,.clev-graft .field select,.clev-graft .field textarea{
  font-family:var(--sans); font-size:16px; color:var(--ink); background:#fff;
  border:1.5px solid var(--line-2); border-radius:var(--r-sm); padding:13px 15px; transition:.15s; width:100%}
.clev-graft .field textarea{resize:vertical; min-height:130px}
.clev-graft .field input:focus,.clev-graft .field select:focus,.clev-graft .field textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 4px color-mix(in oklab,var(--brand) 14%,transparent)}
.clev-graft .consent{display:flex; gap:10px; align-items:flex-start; margin-top:18px; font-size:14px; color:var(--body); line-height:1.5}
.clev-graft .consent input{width:18px; height:18px; margin-top:2px; flex:none}
.clev-graft .contact-card{display:flex; gap:16px; align-items:flex-start; padding:22px; border:1px solid var(--line-2); border-radius:var(--r); background:#fff}
.clev-graft .contact-card .ic{width:44px; height:44px; border-radius:12px; background:var(--bg-alt); color:var(--brand-deep); display:grid; place-items:center; flex:none}
.clev-graft .contact-card .ic svg{width:22px; height:22px}
.clev-graft .contact-card h4{font-family:var(--disp); font-size:16px; color:var(--ink); margin-bottom:4px}
.clev-graft .contact-card p,.clev-graft .contact-card a{font-size:15px; color:var(--body)}
.clev-graft .formmsg{display:none; border-radius:var(--r); padding:16px 18px; font-family:var(--disp); font-weight:600; margin-bottom:20px}
.clev-graft .formmsg.show{display:block}
.clev-graft .formmsg--ok{background:var(--clean-tint); border:1px solid color-mix(in oklab,var(--clean) 35%,white); color:var(--ink)}
.clev-graft .formmsg--err{background:#fdecea; border:1px solid #f0b4ac; color:#8a2d1f}
.clev-graft .form-card{background:var(--bg-alt); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:clamp(24px,4vw,40px)}

/* simple header used on standalone legal pages */
.clev-graft.mini-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line)}
.clev-graft.mini-header .nav{display:flex; align-items:center; gap:18px; height:70px}
.clev-graft.mini-header .nav img{height:34px; width:auto}
.clev-graft.mini-header .nav .sp{flex:1}
.clev-graft.mini-header .nav a.lk{font-family:var(--disp); font-weight:600; font-size:15px; color:var(--ink-2)}
.clev-graft.mini-header .nav a.lk:hover{color:var(--brand)}

/* legal page typography */
.clev-graft .legal{max-width:860px; margin:0 auto}
.clev-graft .legal .h-hero{font-size:clamp(30px,4.4vw,46px)}
.clev-graft .legal .sub{color:var(--muted); font-family:var(--disp); font-weight:600; margin-top:10px; font-size:15px}
.clev-graft .legal .draft-note{display:flex; gap:12px; align-items:flex-start; background:var(--clean-tint);
  border:1px solid color-mix(in oklab,var(--clean) 35%,white); border-radius:var(--r);
  padding:14px 18px; font-size:14.5px; color:var(--ink-2); margin:24px 0 8px}
.clev-graft .legal h2{font-size:clamp(20px,2.4vw,26px); margin:40px 0 12px; letter-spacing:-.02em}
.clev-graft .legal h3{font-size:18px; margin:26px 0 8px; color:var(--ink-2)}
.clev-graft .legal p{font-size:16px; line-height:1.7; color:var(--body); margin:0 0 14px}
.clev-graft .legal ul{margin:0 0 16px; padding-left:22px}
.clev-graft .legal li{font-size:16px; line-height:1.7; color:var(--body); margin-bottom:8px}
.clev-graft .legal a{color:var(--brand-deep); font-weight:600}
.clev-graft .legal a:hover{text-decoration:underline}
.clev-graft .legal strong{color:var(--ink-2)}
.clev-graft .legal table{width:100%; border-collapse:collapse; margin:6px 0 20px; font-size:15px}
.clev-graft .legal td{border:1px solid var(--line-2); padding:10px 14px; vertical-align:top; line-height:1.55; color:var(--body)}
.clev-graft .legal tr td:first-child{background:var(--bg-alt); font-family:var(--disp); font-weight:600; color:var(--ink-2); white-space:nowrap}

/* ==========================================================================
   Footer
   ========================================================================== */
.clev-graft.site-footer{background:var(--bg-navy); color:rgba(255,255,255,.62); padding:72px 0 36px; margin-top:0}
/* Full-width background (override Hello Elementor's .site-footer:not(.dynamic-footer) max-width box) */
footer.clev-graft.site-footer{max-width:none !important; width:100%; margin-left:0 !important; margin-right:0 !important}
.clev-graft.site-footer h4{color:#fff; font-size:15px; letter-spacing:.04em; margin-bottom:16px; font-family:var(--disp)}
.clev-graft .foot__grid{display:grid; grid-template-columns:1.6fr 1fr 1.2fr; gap:40px}
@media(max-width:860px){.clev-graft .foot__grid{grid-template-columns:1fr 1fr; gap:32px}}
@media(max-width:520px){.clev-graft .foot__grid{grid-template-columns:1fr}}
.clev-graft .foot__logo{height:30px; width:auto; margin-bottom:18px; filter:brightness(0) invert(1)}
.clev-graft .foot__blurb{font-size:15px; line-height:1.6; max-width:34ch; color:rgba(255,255,255,.62)}
.clev-graft .foot__links{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px}
.clev-graft .foot__links a{font-size:15px; transition:.15s; color:rgba(255,255,255,.62)}
.clev-graft .foot__links a:hover{color:#fff}
.clev-graft .foot__addr{font-size:15px; line-height:1.8; font-style:normal; color:#fff}
.clev-graft .foot__addr strong{font-family:var(--disp); font-weight:700}
.clev-graft .foot__addr a{color:#fff; font-family:var(--disp); font-weight:700}
.clev-graft .foot__badges{display:flex; gap:16px; align-items:center; margin-top:18px}
.clev-graft .foot__badges img{height:46px; width:auto; background:#fff; border-radius:8px; padding:6px}
.clev-graft .foot__bottom{display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center;
  margin-top:48px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12); font-size:14px; color:rgba(255,255,255,.62)}
.clev-graft .foot__bottom .links{display:flex; flex-wrap:wrap; gap:22px}
.clev-graft .foot__bottom a{color:rgba(255,255,255,.62)}
.clev-graft .foot__bottom a:hover{color:#fff}

/* required-field asterisk */
.clev-graft .req{color:var(--brand); margin-left:2px; font-weight:700}
