
:root{
  --a:#2e2e2e;--a2:#252525;--p:#f8f7f4;--s:#d7d4cd;--m:#9a9a9a;--ink:#151515;
  --w:min(1280px,calc(100vw - 56px));--e:cubic-bezier(.2,.7,.2,1)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--p);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3,p{margin-top:0}

.header{
  position:fixed;z-index:20;top:0;left:0;width:100%;height:68px;
  padding:0 30px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px;
  background:rgba(46,46,46,.88);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background .35s ease,box-shadow .35s ease
}
.header.scrolled{
  background:rgba(46,46,46,.94);
  box-shadow:0 1px 0 rgba(255,255,255,.06)
}
.brand,.footerBrand{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  width:max-content
}
.brand-lotz{
  font-size:27px;line-height:.88;font-weight:300;letter-spacing:.12em;color:#fff
}
.brand-assurances{
  margin-top:4px;font-size:11px;line-height:1;letter-spacing:.42em;font-weight:500;color:rgba(255,255,255,.92)
}
.brand{padding-left:6px}
.brand-lotz{
  display:block;
  text-align:center;
  width:100%;
}
.brand-assurances{
  display:block;
  text-align:center;
  width:100%;
}
.footerBrand .brand-lotz{font-size:24px}
.footerBrand .brand-assurances{font-size:10px;color:rgba(255,255,255,.82)}
.header nav{display:flex;gap:28px;font-size:13px;color:rgba(255,255,255,.88)}
.header nav a{transition:opacity .2s ease}
.header nav a:hover{opacity:.62}

.pill{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:0 19px;border-radius:999px;font-weight:650;font-size:14px;border:0;cursor:pointer;
  transition:transform .22s var(--e),opacity .22s ease,background .22s ease,color .22s ease
}
.pill:hover{transform:translateY(-1px);opacity:.92}
.dark{justify-self:end;background:var(--a);color:white}
.light{background:white;color:#111}
.headerCta{justify-self:end}
.menu{display:none;color:#fff}

.hero{
  height:100svh;min-height:700px;position:relative;display:flex;align-items:flex-end;
  overflow:hidden;color:white;background:#2a2a2a
}
.hero>img,.signature>img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover
}
.hero>img{
  object-position:center 48%;
  transform:scale(1.018);
  filter:saturate(.78) contrast(.96) brightness(.91);
  transition:transform 1.3s var(--e)
}
.hero:hover>img{transform:scale(1.008)}
.veil{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.13) 38%,rgba(0,0,0,.66)),
    linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,.02) 55%)
}
.strong{background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.72))}
.heroCopy,.signatureCopy{
  position:relative;z-index:2;width:var(--w);margin:auto;padding-bottom:70px
}
.hero h1{
  font-size:clamp(64px,8.5vw,126px);line-height:.86;letter-spacing:-.068em;
  margin:0;font-weight:690;max-width:950px
}
.lead{
  font-size:clamp(19px,1.85vw,26px);line-height:1.32;
  color:rgba(255,255,255,.87);max-width:590px;margin:28px 0 0
}
.actions{display:flex;gap:24px;align-items:center;margin-top:30px}
.arrow{display:inline-flex;align-items:center;gap:7px;font-weight:650;font-size:15px}
.arrow span{transition:transform .25s var(--e)}
.arrow:hover span{transform:translate(3px,-3px)}
.lightText{color:rgba(255,255,255,.92)}

.kicker{
  font-size:11px;text-transform:uppercase;letter-spacing:.18em;font-weight:700;
  color:#6d6d6d;margin:0 0 22px
}
.kicker.light{color:rgba(255,255,255,.68)}

.intro{
  width:var(--w);max-width:1120px;margin:auto;padding:165px 0 155px;text-align:center
}
.intro h2{
  font-size:clamp(58px,7.2vw,108px);line-height:.91;letter-spacing:-.064em;margin:0;font-weight:680
}
.introText{
  max-width:720px;margin:40px auto 0;font-size:clamp(20px,1.9vw,27px);
  line-height:1.38;color:#686868
}

.solutions{overflow:hidden}
.panel{
  min-height:82vh;padding:0 calc((100vw - var(--w))/2);
  display:flex;align-items:center;justify-content:space-between;position:relative;overflow:hidden
}
.panelInner{position:relative;z-index:2;max-width:720px}
.panel h2,.approach h2,.signature h2,.contact h2{
  font-size:clamp(58px,7.8vw,116px);line-height:.87;letter-spacing:-.068em;margin:0;font-weight:685
}
.panel p:not(.kicker){
  font-size:20px;line-height:1.45;color:#666;max-width:590px;margin:28px 0 25px
}
.panel strong{
  position:absolute;right:2.8vw;bottom:-70px;font-size:clamp(210px,28vw,420px);
  line-height:.8;letter-spacing:-.09em;color:rgba(0,0,0,.038);font-weight:720;user-select:none
}
.white{background:#fff}.stone{background:var(--s)}
.charcoal{background:var(--a);color:#fff}
.charcoal p:not(.kicker){color:rgba(255,255,255,.68)}
.charcoal strong{color:rgba(255,255,255,.035)}

.approach{
  width:var(--w);margin:auto;padding:160px 0;
  display:grid;grid-template-columns:.9fr 1.1fr;gap:10vw;align-items:start
}
.steps{border-top:1px solid rgba(0,0,0,.13)}
.steps article{
  display:grid;grid-template-columns:48px 1fr;gap:22px;padding:34px 0 38px;
  border-bottom:1px solid rgba(0,0,0,.13)
}
.steps span{font-size:11px;letter-spacing:.15em;color:#888}
.steps h3{font-size:28px;letter-spacing:-.04em;margin-bottom:9px}
.steps p{color:#666;font-size:18px;line-height:1.5;margin:0}

.signature{
  height:94vh;position:relative;display:flex;align-items:flex-end;color:white;overflow:hidden
}
.signature>img{
  object-position:center 58%;transform:scale(1.045);
  filter:saturate(.72) contrast(.97) brightness(.90)
}
.signatureCopy p:last-child{
  max-width:620px;margin:28px 0 0;font-size:21px;line-height:1.45;color:rgba(255,255,255,.79)
}

.why{
  background:#fff;max-width:none;width:auto;padding:160px calc((100vw - var(--w))/2)
}
.why h2{
  font-size:clamp(58px,7.3vw,108px);line-height:.91;letter-spacing:-.065em;margin:0;font-weight:680
}
.grid4{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:90px;
  border-top:1px solid rgba(0,0,0,.13)
}
.grid4 article{min-height:245px;padding:30px 30px 20px 0}
.grid4 article:not(:first-child){padding-left:30px;border-left:1px solid rgba(0,0,0,.13)}
.grid4 h3{font-size:24px;letter-spacing:-.04em}
.grid4 p{color:#666;line-height:1.5;font-size:17px}

.contact{
  background:var(--a);color:white;padding:155px calc((100vw - var(--w))/2);
  display:grid;grid-template-columns:1fr 1fr;gap:10vw
}
.contact>div>p:not(.kicker){
  font-size:20px;line-height:1.45;color:rgba(255,255,255,.68);max-width:560px;margin:28px 0
}
.mail{display:inline-block;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:5px}
.contact form{display:grid;grid-template-columns:1fr 1fr;gap:24px 18px}
.contact label{
  display:grid;gap:9px;font-size:11px;text-transform:uppercase;
  letter-spacing:.12em;color:rgba(255,255,255,.57)
}
.contact input,.contact textarea,.contact select{
  width:100%;border:0;border-bottom:1px solid rgba(255,255,255,.25);
  background:transparent;color:#fff;padding:12px 0;outline:0;font:inherit
}
.contact input:focus,.contact textarea:focus,.contact select:focus{border-bottom-color:#fff}
.contact textarea{resize:vertical}.contact select{color-scheme:dark}
.wide{grid-column:1/-1}
.check{grid-template-columns:20px 1fr!important;text-transform:none!important;letter-spacing:0!important;line-height:1.3}
.check input{width:16px;height:16px;accent-color:white}
.contact button{width:max-content;margin-top:8px}

footer{
  background:#1c1c1c;color:rgba(255,255,255,.62);
  padding:70px calc((100vw - var(--w))/2) 34px;
  display:grid;grid-template-columns:1fr 1fr;gap:50px;font-size:13px
}
footer>div{justify-self:end;display:flex;gap:20px}
footer p{grid-column:1/-1;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);margin:0}

.reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity .85s var(--e),transform .85s var(--e)
}
.reveal.visible{opacity:1;transform:none}
.delay1{transition-delay:.08s}.delay2{transition-delay:.16s}

.legal{max-width:860px;margin:auto;padding:130px 24px}
.legal h1{font-size:clamp(54px,8vw,92px);letter-spacing:-.06em}
.legal h2{margin-top:42px}
.legal p{font-size:17px;line-height:1.65;color:#666}
.note{background:white;border:1px solid #ddd;padding:20px;border-radius:16px}

@media(max-width:900px){
  .header{grid-template-columns:1fr auto;height:62px;padding:0 18px}
  .brand-lotz{font-size:24px}
  .brand-assurances{font-size:10px;letter-spacing:.34em}
  .header nav,.headerCta{display:none}
  .menu{display:block;border:0;background:none;font-size:20px}
  .hero{min-height:650px;height:92svh}
  .hero h1{font-size:clamp(60px,14.7vw,92px)}
  .intro,.approach,.why{padding-top:110px;padding-bottom:110px}
  .panel{min-height:68vh}
  .approach{grid-template-columns:1fr;gap:65px}
  .grid4{grid-template-columns:1fr 1fr}
  .grid4 article:nth-child(3){border-left:0}
  .contact{grid-template-columns:1fr}
  .contact form{margin-top:15px}
}
@media(max-width:620px){
  :root{--w:calc(100vw - 28px)}
  .header{padding:0 14px;height:60px}
  .brand-lotz{font-size:21px}
  .brand-assurances{font-size:9px;letter-spacing:.28em}
  .hero{height:86svh;min-height:620px}
  .hero>img{object-position:57% 50%}
  .heroCopy,.signatureCopy{padding-bottom:42px}
  .hero h1{font-size:clamp(54px,16.6vw,76px)}
  .lead{font-size:18px}
  .actions{align-items:flex-start;flex-direction:column;gap:18px}
  .intro{padding:92px 0}
  .intro h2,.why h2,.panel h2,.approach h2,.signature h2,.contact h2{
    font-size:clamp(52px,16vw,78px)
  }
  .introText{font-size:18px}
  .panel{padding:0 14px;min-height:64vh}
  .panel p:not(.kicker){font-size:18px}
  .panel strong{font-size:165px;right:-12px;bottom:-30px}
  .approach{padding:92px 0}
  .signature{height:78vh}
  .signatureCopy p:last-child{font-size:18px}
  .why{padding:92px 14px}
  .grid4{grid-template-columns:1fr;margin-top:58px}
  .grid4 article,.grid4 article:not(:first-child){
    min-height:auto;padding:26px 0;border-left:0;border-bottom:1px solid rgba(0,0,0,.13)
  }
  .contact{padding:92px 14px}
  .contact form{grid-template-columns:1fr}.wide{grid-column:auto}
  footer{padding:60px 14px 30px;grid-template-columns:1fr}
  footer>div{justify-self:start;flex-direction:column;gap:10px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  *{transition-duration:.01ms!important}
}


/* V5 — Detailed insurance solutions inside each audience section */
.panel{
  min-height:auto;
  padding-top:130px;
  padding-bottom:120px;
  align-items:flex-start;
}
.panelInner{
  width:100%;
  max-width:none;
}
.panelInner > h2,
.panelInner > p:not(.kicker):not(.availability-note),
.panelInner > .arrow{
  max-width:720px;
}
.offer-detail{
  margin-top:88px;
  border-top:1px solid rgba(0,0,0,.14);
}
.charcoal .offer-detail{
  border-top-color:rgba(255,255,255,.18);
}
.offer-head{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:40px;
  align-items:start;
  padding:28px 0 34px;
}
.offer-head > span{
  font-size:12px;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:700;
  color:#6d6d6d;
}
.offer-head > p{
  margin:0!important;
  max-width:690px!important;
  font-size:18px!important;
  line-height:1.45!important;
  color:#666!important;
}
.charcoal .offer-head > span{
  color:rgba(255,255,255,.58);
}
.charcoal .offer-head > p{
  color:rgba(255,255,255,.66)!important;
}
.offer-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid rgba(0,0,0,.13);
  border-bottom:1px solid rgba(0,0,0,.13);
}
.charcoal .offer-grid{
  border-color:rgba(255,255,255,.16);
}
.offer-item{
  min-height:205px;
  padding:26px 26px 28px 0;
}
.offer-item:not(:nth-child(4n+1)){
  padding-left:26px;
  border-left:1px solid rgba(0,0,0,.13);
}
.offer-item:nth-child(n+5){
  border-top:1px solid rgba(0,0,0,.13);
}
.charcoal .offer-item{
  border-color:rgba(255,255,255,.16)!important;
}
.offer-item h3{
  margin:0 0 13px;
  font-size:20px;
  line-height:1.12;
  letter-spacing:-.035em;
  font-weight:680;
}
.offer-item p{
  margin:0!important;
  font-size:15px!important;
  line-height:1.5!important;
  color:#6a6a6a!important;
}
.charcoal .offer-item p{
  color:rgba(255,255,255,.62)!important;
}
.availability-note{
  max-width:none!important;
  margin:18px 0 0!important;
  font-size:12px!important;
  line-height:1.45!important;
  color:#8a8a8a!important;
}
.charcoal .availability-note{
  color:rgba(255,255,255,.42)!important;
}

/* Keep the large section number subtle behind the expanded section */
.panel strong{
  top:100px;
  bottom:auto;
  right:-18px;
  opacity:.7;
}

@media(max-width:1000px){
  .offer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .offer-item:not(:nth-child(4n+1)){
    border-left:0;
    padding-left:0;
  }
  .offer-item:nth-child(even){
    padding-left:26px;
    border-left:1px solid rgba(0,0,0,.13);
  }
  .offer-item:nth-child(n+3){
    border-top:1px solid rgba(0,0,0,.13);
  }
  .charcoal .offer-item:nth-child(even){
    border-left-color:rgba(255,255,255,.16);
  }
  .offer-head{grid-template-columns:160px 1fr}
}

@media(max-width:620px){
  .panel{
    padding-top:90px;
    padding-bottom:84px;
  }
  .offer-detail{margin-top:60px}
  .offer-head{
    grid-template-columns:1fr;
    gap:10px;
    padding:24px 0 28px;
  }
  .offer-head > p{font-size:16px!important}
  .offer-grid{grid-template-columns:1fr}
  .offer-item,
  .offer-item:not(:nth-child(4n+1)),
  .offer-item:nth-child(even){
    min-height:auto;
    padding:24px 0;
    border-left:0!important;
    border-top:1px solid rgba(0,0,0,.13);
  }
  .offer-item:first-child{border-top:0}
  .charcoal .offer-item{
    border-top-color:rgba(255,255,255,.16)!important;
  }
  .offer-item h3{font-size:19px}
}


/* V6 — final polish on audience sections */
.audience-label{
  display:block;
  margin:0 0 30px;
  font-size:12px;
  line-height:1;
  font-weight:700;
  letter-spacing:.24em;
  color:#737373;
}
.audience-label-light{
  color:rgba(255,255,255,.60);
}

/* Reduce the dead space between the main CTA and the offers */
.offer-detail{
  margin-top:58px;
}

/* Give the audience introduction slightly tighter proportions */
.panel{
  padding-top:110px;
  padding-bottom:104px;
}
.panelInner > .arrow{
  margin-top:2px;
}

/* Insurance line-item micro interaction — no card effect */
.offer-item{
  position:relative;
  transition:
    background .22s ease,
    padding-left .22s cubic-bezier(.2,.7,.2,1),
    color .22s ease;
}
.offer-item h3{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.offer-arrow{
  opacity:0;
  transform:translate(-4px,4px);
  font-size:15px;
  font-weight:600;
  transition:
    opacity .2s ease,
    transform .24s cubic-bezier(.2,.7,.2,1);
}
.offer-item:hover{
  background:rgba(0,0,0,.025);
}
.offer-item:hover .offer-arrow{
  opacity:.72;
  transform:translate(0,0);
}
.charcoal .offer-item:hover{
  background:rgba(255,255,255,.035);
}
.charcoal .offer-item:hover .offer-arrow{
  opacity:.82;
}

/* Make 03 behave exactly like 01 and 02 */
.charcoal .audience-label{
  color:rgba(255,255,255,.60);
}

@media(max-width:620px){
  .audience-label{
    margin-bottom:24px;
    font-size:11px;
    letter-spacing:.20em;
  }
  .offer-detail{margin-top:44px}
  .panel{
    padding-top:82px;
    padding-bottom:76px;
  }
  .offer-arrow{
    opacity:.45;
    transform:none;
  }
}
