:root{
  --navy:#07142f; --navy2:#101c45; --ink:#11182f; --muted:#687087;
  --purple:#6d3ef2; --pink:#eb5c9d; --surface:#f7f7fb; --line:#e5e6ef;
  --grad:linear-gradient(90deg,var(--purple),var(--pink));
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:"DM Sans",sans-serif;color:var(--ink);background:#fff}
button,input,select{font:inherit} a{text-decoration:none;color:inherit}
.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:18px 6vw;background:rgba(5,15,38,.96);color:white;border-bottom:1px solid rgba(255,255,255,.08)}
.brand{display:flex;flex-direction:column;line-height:1.1}.brand-script,.signature{font-family:"Playfair Display",serif;font-style:italic;font-size:1.55rem}.brand span:last-child{font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;opacity:.75;margin-top:4px}
.nav{display:flex;gap:28px;align-items:center;font-size:.85rem;font-weight:700}.nav a{opacity:.84}.nav a:hover{opacity:1}.menu-toggle{display:none;background:none;border:0;color:white;font-size:1.5rem}
.btn{border:0;border-radius:10px;background:var(--grad);color:white;padding:15px 23px;font-weight:800;cursor:pointer;box-shadow:0 10px 30px rgba(109,62,242,.18)}.btn:hover{transform:translateY(-1px)}
.btn-small{padding:11px 17px;font-size:.82rem}.btn-outline{background:transparent;border:1px solid rgba(255,255,255,.6);box-shadow:none}.btn-white{background:white;color:#6738dc}
.hero{min-height:660px;position:relative;overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr;gap:3vw;align-items:center;padding:50px 7vw 0;background:radial-gradient(circle at 77% 42%,rgba(126,60,210,.28),transparent 30%),linear-gradient(135deg,#07142f 0%,#07142f 55%,#111c48 100%);color:white}
.hero-copy{z-index:2;padding-bottom:50px}.eyebrow{display:inline-block;border-radius:999px;background:rgba(255,255,255,.1);padding:7px 12px;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.eyebrow.light{color:#7445e6;background:#f2efff}.eyebrow.dark{background:rgba(255,255,255,.08);color:#d8c8ff}
h1{font-size:clamp(3rem,6vw,5.9rem);line-height:.94;letter-spacing:-.055em;margin:18px 0 25px}h1 span,h2 span{background:var(--grad);background-clip:text;-webkit-background-clip:text;color:transparent}
.hero p{font-size:1.2rem;line-height:1.55;max-width:600px;color:#dce2f3}.hero-actions{display:flex;gap:14px;margin:28px 0 20px}.trust-row{display:flex;flex-wrap:wrap;gap:20px;font-size:.83rem;color:#c6cee4}
.hero-media{align-self:end;position:relative;display:flex;justify-content:center}.hero-media img{width:min(560px,100%);height:610px;object-fit:cover;object-position:57% 15%;border-radius:90px 90px 0 0;filter:saturate(.94)}
.broker-card{position:absolute;right:0;bottom:28px;padding:22px 25px;min-width:250px;border-radius:14px;background:rgba(16,28,69,.86);backdrop-filter:blur(12px);box-shadow:0 18px 50px rgba(0,0,0,.25);display:flex;flex-direction:column}.broker-card strong{font-family:"Playfair Display",serif;font-style:italic;font-size:1.35rem;color:#ec70ad}.broker-card span,.broker-card small{margin-top:5px;color:#dfe4f3}
.section{padding:75px 7vw}.section-heading{text-align:center;max-width:780px;margin:0 auto 36px}.section-heading h2,.dark-panel h2,.about h2,.faq h2,.cta-box h2{font-size:clamp(2rem,3.4vw,3.3rem);line-height:1.05;letter-spacing:-.04em;margin:12px 0}.section-heading p,.card p,.step p,.about p,.faq p{color:var(--muted);line-height:1.6}
.cards.four{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{border:1px solid var(--line);border-radius:18px;padding:27px;background:white;box-shadow:0 15px 35px rgba(9,18,48,.06)}.icon{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:#f1ecff;font-size:1.55rem}.card h3{margin-bottom:4px}.text-link{background:none;border:0;padding:0;color:#7042e8;font-weight:800;cursor:pointer}
.dark-panel{margin:0 5vw;border-radius:22px;background:linear-gradient(135deg,#07142f,#0d1b45);color:white}.split{display:grid;grid-template-columns:1.1fr .9fr;gap:55px;align-items:center}.dark-panel p{color:#d0d7eb;line-height:1.6}.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:28px}.mini-grid div{display:flex;flex-direction:column}.mini-grid span{font-size:.78rem;color:#aeb8d2;margin-top:4px}
.family-art{min-height:300px;border-radius:18px;background:radial-gradient(circle at 50% 40%,rgba(235,92,157,.35),transparent 36%),linear-gradient(135deg,#6d3ef2,#eb5c9d);display:grid;place-items:center;padding:30px}.family-card{max-width:360px;background:rgba(255,255,255,.93);color:#13182d;border-radius:18px;padding:28px;text-align:center}.family-emoji{font-size:3rem;color:#df4f92}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center}.step b{width:55px;height:55px;border-radius:50%;background:#f0ecff;color:#6e40e8;display:grid;place-items:center;margin:0 auto 14px;font-size:1.3rem}.step h3{margin:5px 0}
.about{margin:0 6vw 35px;padding:45px;background:linear-gradient(110deg,#f0ecff,#fff 50%,#fff0f7);border-radius:22px;display:grid;grid-template-columns:.72fr 1.45fr .85fr;gap:30px;align-items:center}.about-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:57% 12%;border-radius:18px}.about blockquote{background:rgba(255,255,255,.75);padding:30px;border-radius:18px;font-size:1.05rem;line-height:1.6;margin:0}.signature{color:#b7478f;margin-top:12px}
.carrier-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1000px;margin:0 auto}.carrier-grid span{border:1px solid var(--line);border-radius:12px;padding:18px;text-align:center;font-weight:800;background:#fff}.fineprint{text-align:center;max-width:900px;margin:25px auto 0;color:#7b8190;font-size:.8rem}
.faq-cta{display:grid;grid-template-columns:1fr 1fr;gap:28px}.faq details{border-bottom:1px solid var(--line);padding:17px 0}.faq summary{cursor:pointer;font-weight:700}.cta-box{border-radius:22px;background:linear-gradient(135deg,#5e33e9,#eb5b9e);color:white;padding:48px;display:flex;flex-direction:column;justify-content:center}.cta-box p{line-height:1.6;color:#f5effc}
footer{background:#06132e;color:white;padding:45px 7vw;display:grid;grid-template-columns:1.5fr 1fr 1fr 1.6fr;gap:40px;font-size:.85rem}footer div{display:flex;flex-direction:column;gap:9px}footer a,footer span,footer p{color:#bcc6de}footer strong{margin-bottom:5px}
dialog{width:min(720px,94vw);border:0;border-radius:22px;padding:0;box-shadow:0 30px 100px rgba(0,0,0,.35)}dialog::backdrop{background:rgba(5,12,30,.78);backdrop-filter:blur(4px)}#quoteForm{padding:35px;position:relative}.dialog-close{position:absolute;right:20px;top:18px;border:0;background:#f1f2f6;border-radius:50%;width:34px;height:34px;font-size:1.3rem;cursor:pointer}.progress{height:5px;background:#ececf3;border-radius:99px;overflow:hidden;margin-bottom:25px}.progress span{display:block;height:100%;width:33%;background:var(--grad);transition:.25s}.form-step{display:none}.form-step.active{display:block}.form-step h2{font-size:2rem}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.choice-grid label,.checkbox{border:1px solid var(--line);border-radius:12px;padding:15px;cursor:pointer}.field{display:flex;flex-direction:column;gap:7px;font-weight:700;margin:14px 0}.field input,.field select{padding:14px;border:1px solid #d7d9e4;border-radius:10px;background:white}.form-actions{display:flex;justify-content:space-between;gap:15px;margin-top:22px}.form-actions .btn-outline{border-color:#ccc;color:#333}.success{text-align:center;padding:30px}.success-mark{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;background:#effbeb;color:#2f8d46;font-size:2rem;margin:0 auto 20px}.consent{display:block;font-size:.8rem;color:#565e73;line-height:1.45}
@media(max-width:900px){
  .menu-toggle{display:block}.nav{position:absolute;left:0;right:0;top:100%;background:#07142f;padding:20px 6vw;display:none;flex-direction:column;align-items:flex-start}.nav.open{display:flex}
  .hero{grid-template-columns:1fr;padding-top:70px}.hero-media{max-width:580px;margin:auto}.hero-media img{height:520px}.broker-card{right:10px}
  .cards.four,.steps{grid-template-columns:1fr 1fr}.split,.faq-cta{grid-template-columns:1fr}.about{grid-template-columns:1fr 1.4fr}.about blockquote{grid-column:1/-1}.carrier-grid{grid-template-columns:repeat(3,1fr)}footer{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .site-header{padding:15px 5vw}.brand-script{font-size:1.2rem}.hero{padding-left:5vw;padding-right:5vw}.hero-actions{flex-direction:column}.hero-actions .btn{text-align:center}.hero-media img{height:430px}.broker-card{position:relative;right:auto;bottom:auto;margin:-45px 10px 20px}.hero-media{display:block}
  .section{padding:58px 5vw}.cards.four,.steps,.carrier-grid{grid-template-columns:1fr}.dark-panel{margin:0 3vw;padding:50px 6vw}.mini-grid{grid-template-columns:1fr}.about{margin:0 3vw 30px;padding:28px;grid-template-columns:1fr}.choice-grid{grid-template-columns:1fr}.faq-cta{padding:50px 5vw}.cta-box{padding:30px}footer{grid-template-columns:1fr}.trust-row{gap:10px}
}

.brand-intro{display:grid;grid-template-columns:.85fr 1.15fr;gap:55px;align-items:end;background:linear-gradient(120deg,#fbfaff,#f6f3ff);border-top:1px solid #ece8ff;border-bottom:1px solid #ece8ff}.brand-intro h2{font-size:clamp(2.2rem,4vw,4rem);line-height:1.02;letter-spacing:-.045em;margin:14px 0 0}.brand-intro p{font-size:1.12rem;line-height:1.75;color:var(--muted);margin:0}.licensed-strip{margin-top:18px;padding:12px 15px;border:1px solid rgba(255,255,255,.13);border-radius:12px;color:#bfc8df;font-size:.75rem;line-height:1.5;max-width:720px}.phone-link{font-weight:800;color:#fff;opacity:.9;white-space:nowrap}.site-header .brand-script{font-family:"DM Sans",sans-serif;font-style:normal;font-weight:800;letter-spacing:-.035em}.hero-media img{object-position:52% 44%}.about-photo img{object-position:52% 43%}@media(max-width:900px){.phone-link{display:none}.brand-intro{grid-template-columns:1fr;gap:20px}}

/* Pena Protection logo system and opening reveal */
.brand{display:flex;flex-direction:row;align-items:center;gap:11px;line-height:1.1}
.brand-icon{display:grid;place-items:center;width:35px;height:41px;flex:0 0 auto;color:#fff}
.brand-icon .pp-logo-mark{width:100%;height:100%;display:block}
.brand-words{display:flex;flex-direction:column}
.brand-reveal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,rgba(109,62,242,.22),transparent 33%),linear-gradient(145deg,#050b1d,#0a1535 62%,#120b2c);color:#fff;transition:opacity .55s ease,visibility .55s ease}
.brand-reveal.is-finished{opacity:0;visibility:hidden;pointer-events:none}
.brand-reveal-inner{display:flex;flex-direction:column;align-items:center;text-align:center;padding:28px}
.brand-reveal .pp-logo-mark{width:112px;height:132px;color:#fff;filter:drop-shadow(0 18px 28px rgba(109,62,242,.34))}
.logo-shield{stroke-dasharray:390;stroke-dashoffset:390;animation:drawShield .85s cubic-bezier(.65,0,.35,1) .08s forwards}
.logo-p{opacity:0;transform-origin:center;transform:scale(.72);animation:revealP .48s cubic-bezier(.2,.75,.25,1.2) .72s forwards}
.brand-reveal-copy{margin-top:20px;opacity:0;transform:translateY(12px);animation:revealWords .5s ease 1.08s forwards}
.brand-reveal-copy strong{display:block;font-family:"DM Sans",sans-serif;font-size:clamp(2rem,6vw,3.8rem);font-weight:800;letter-spacing:-.055em}
.brand-reveal-copy strong span{background:linear-gradient(90deg,#a37aff,#d946ef);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-reveal-copy small{display:block;margin-top:10px;font-size:.72rem;text-transform:uppercase;letter-spacing:.24em;color:#c6cee4}
.brand-reveal-skip{position:absolute;right:24px;top:22px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(255,255,255,.06);color:#dfe4f3;padding:8px 13px;cursor:pointer;font-weight:700;font-size:.75rem}
.brand-reveal-skip:hover{background:rgba(255,255,255,.12)}
@keyframes drawShield{to{stroke-dashoffset:0}}
@keyframes revealP{to{opacity:1;transform:scale(1)}}
@keyframes revealWords{to{opacity:1;transform:translateY(0)}}
body.intro-active{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .logo-shield,.logo-p,.brand-reveal-copy{animation:none;stroke-dashoffset:0;opacity:1;transform:none}
  .brand-reveal{transition:none}
}
@media(max-width:560px){
  .brand-icon{width:30px;height:35px}.brand{gap:8px}.brand-reveal .pp-logo-mark{width:88px;height:104px}
  .brand-reveal-copy small{letter-spacing:.16em;line-height:1.6}
}