:root {
  --red: #df242b;
  --red-dark: #b51d23;
  --ink: #242426;
  --muted: #66666b;
  --line: #dedee1;
  --soft: #f5f5f6;
  --white: #fff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.eyebrow { margin: 0 0 10px; color: var(--red); font-size: 12px; font-weight: 900; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { letter-spacing: 0; }

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 20; height: 78px; padding: 10px clamp(20px, 5vw, 72px);
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
  background: #fff; border-bottom: 1px solid rgba(222,222,225,.9); box-shadow: 0 2px 18px rgba(20,20,22,.05);
}
.logo-link { display: flex; align-items: center; background: #fff; }
.logo-crop { display: block; width: 250px; height: 58px; overflow: hidden; background: #fff; }
.logo-crop img { display: block; width: 250px; height: 250px; transform: translateY(-41px); }
nav { display: flex; align-items: center; gap: 28px; font-weight: 750; }
nav a:hover { color: var(--red); }
.crm-link { display: inline-flex; align-items: center; gap: 7px; padding-left: 20px; border-left: 1px solid var(--line); }
.crm-link svg { width: 17px; }
.menu-button { display: none; width: 42px; height: 42px; border: 0; background: transparent; }

.hero { position: relative; min-height: 88vh; height: 760px; max-height: 900px; color: white; overflow: hidden; }
.hero-image, .hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-image { object-fit: cover; object-position: center; }
.hero-shade { background: linear-gradient(90deg, rgba(25,25,27,.88) 0%, rgba(25,25,27,.58) 43%, rgba(25,25,27,.08) 72%); }
.hero-content { position: relative; z-index: 2; width: min(650px, 90vw); padding-top: 190px; margin-left: clamp(24px, 8vw, 120px); }
.hero-content .eyebrow { color: #ff8d91; }
.hero h1 { margin-bottom: 22px; max-width: 630px; font-size: clamp(48px, 6vw, 82px); line-height: .98; }
.hero-copy { max-width: 580px; color: #eeeef0; font-size: 20px; line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.button { min-height: 48px; padding: 0 19px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: 6px; font-weight: 850; }
.button svg { width: 19px; }
.button.primary { color: white; background: var(--red); }
.button.primary:hover { background: var(--red-dark); }
.button.secondary { color: white; border-color: rgba(255,255,255,.65); background: rgba(20,20,22,.28); }
.hero-next { position: absolute; z-index: 3; left: 50%; bottom: 18px; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; }

.insurance-section, .quote-section { padding: 88px clamp(24px, 7vw, 110px); }
.section-heading { max-width: 1220px; margin: auto auto 42px; display: grid; grid-template-columns: 1.35fr .65fr; gap: 60px; align-items: end; }
.section-heading h2, .about-copy h2, .quote-intro h2 { margin-bottom: 0; font-size: clamp(34px, 4vw, 56px); line-height: 1.08; }
.section-heading > p, .about-copy > p, .quote-intro > p { color: var(--muted); line-height: 1.7; }
.insurance-grid { max-width: 1220px; margin: auto; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.insurance-grid article { min-height: 210px; padding: 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.insurance-grid svg { width: 31px; height: 31px; color: var(--red); }
.insurance-grid h3 { margin: 25px 0 9px; font-size: 18px; }
.insurance-grid p { margin-bottom: 0; color: var(--muted); line-height: 1.55; }

.about-section { padding: 84px clamp(24px, 9vw, 145px); display: grid; grid-template-columns: 1.05fr .95fr; gap: 90px; background: var(--ink); color: white; }
.about-copy > p { margin-top: 25px; color: #cfcfd2; }
.about-points { display: grid; align-content: center; }
.about-points div { padding: 24px 0; display: grid; grid-template-columns: 42px 1fr; gap: 15px; border-bottom: 1px solid #48484c; line-height: 1.5; }
.about-points svg { color: #ff6267; }

.quote-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(50px, 8vw, 130px); background: var(--soft); }
.quote-intro { align-self: start; position: sticky; top: 115px; }
.quote-intro > p { margin-top: 24px; }
.contact-links { display: grid; gap: 14px; margin-top: 32px; }
.contact-links a { display: flex; align-items: center; gap: 12px; font-weight: 750; }
.contact-links svg { width: 20px; color: var(--red); }
.legal-identity { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 15px; margin-bottom: 2px; border-bottom: 1px solid var(--line); }
.legal-identity svg { flex: 0 0 auto; width: 20px; color: var(--red); }
.legal-identity span { display: grid; gap: 3px; }
.legal-identity strong { font-size: 14px; }
.legal-identity small { color: var(--muted); font-size: 13px; font-weight: 750; }
.quote-form { display: grid; gap: 17px; padding: 30px; background: white; border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(30,30,32,.08); }
.quote-form label { display: grid; gap: 8px; font-size: 13px; font-weight: 800; }
.quote-form input, .quote-form select, .quote-form textarea { width: 100%; padding: 13px 14px; border: 1px solid #cfcfd3; border-radius: 5px; background: white; color: var(--ink); }
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus { outline: 2px solid rgba(223,36,43,.22); border-color: var(--red); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-submit { justify-self: start; border: 0; }
.form-status { min-height: 22px; margin: 0; color: var(--muted); font-weight: 750; }

footer { min-height: 110px; padding: 26px clamp(24px, 7vw, 110px); display: flex; align-items: center; justify-content: space-between; gap: 25px; background: #1f1f21; color: #d4d4d6; font-size: 13px; }
.footer-brand { color: white; font-size: 18px; font-weight: 900; }
.footer-brand small { display: block; color: #ff676c; font-size: 10px; }
.footer-brand .footer-rnc { margin-top: 5px; color: #d4d4d6; font-size: 11px; font-weight: 700; }
.whatsapp-float { position: fixed; z-index: 10; right: 22px; bottom: 22px; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; color: white; background: #168c50; box-shadow: 0 12px 32px rgba(0,0,0,.2); }

@media (max-width: 980px) {
  .insurance-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .quote-section { grid-template-columns: 1fr; }
  .quote-intro { position: static; }
}
@media (max-width: 760px) {
  .site-header { height: 68px; padding: 8px 18px; }
  .logo-crop { width: 190px; height: 48px; }
  .logo-crop img { width: 190px; height: 190px; transform: translateY(-31px); }
  .menu-button { display: grid; place-items: center; }
  nav { position: absolute; left: 0; right: 0; top: 68px; display: none; padding: 18px; align-items: stretch; flex-direction: column; gap: 0; background: white; border-bottom: 1px solid var(--line); }
  nav.is-open { display: flex; }
  nav a { padding: 13px 8px; }
  .crm-link { padding-left: 8px; border-left: 0; border-top: 1px solid var(--line); }
  .hero { height: 720px; min-height: calc(100vh - 28px); }
  .hero-image { object-position: 64% center; }
  .hero-shade { background: linear-gradient(90deg, rgba(25,25,27,.9), rgba(25,25,27,.56)); }
  .hero-content { padding-top: 150px; margin-left: 24px; }
  .hero h1 { font-size: 48px; }
  .hero-copy { font-size: 17px; }
  .section-heading, .about-section { grid-template-columns: 1fr; gap: 34px; }
  .insurance-grid { grid-template-columns: 1fr 1fr; }
  .insurance-grid article { min-height: 200px; padding: 21px; }
  .about-section { padding: 70px 24px; }
  .form-row { grid-template-columns: 1fr; }
  footer { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 450px) {
  .insurance-grid { grid-template-columns: 1fr; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .button { width: 100%; }
  .quote-form { padding: 22px; }
}