/* Village Premier site styles. Tokens from the Village Premier brand kit. */
:root{
  --surface:#FFFAF4; --surface-raised:#FFFFFF; --surface-sunk:#F5EDE3; --line:#E7DACB;
  --ink:#3A241B; --ink-muted:#6E5549; --espresso:#3A241B; --on-espresso:#FFFAF4;
  --primary:#3A241B; --on-primary:#FFFAF4; --on-bar:#3A241B; --on-plum:#FFFAF4;
  --terracotta:#E65F41; --marigold:#F6A817; --blush:#F796B1; --sage:#829B7A; --plum:#611A72;
  --terracotta-text:#B04327; --marigold-text:#8A5A00; --blush-text:#A33C63; --sage-text:#4D6547; --link:#611A72;
  --terracotta-soft:#FCE5DE; --marigold-soft:#FEF1D3; --blush-soft:#FDE7EE; --sage-soft:#E8EFE5; --plum-soft:#F1E4F4;
  --focus-ring:#611A72;
  --font-display:"Fraunces","Iowan Old Style",Georgia,serif;
  --font-sans:"Figtree","Segoe UI",system-ui,sans-serif;
  --r-sm:6px; --r-md:14px; --r-lg:24px; --pill:999px;
  --logo:url(img/vp-lockup.png);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --surface:#1E1511; --surface-raised:#2A1E18; --surface-sunk:#160F0C; --line:#43322A;
  --ink:#F8EEE4; --ink-muted:#C9B6A8; --on-espresso:#F8EEE4; --primary:#F8EEE4; --on-primary:#1E1511; --on-bar:#1E1511; --on-plum:#1E1511;
  --terracotta:#F08A6E; --marigold:#F8B93F; --blush:#F7A3BD; --sage:#A9C0A1; --plum:#D9A5E6;
  --terracotta-text:#F08A6E; --marigold-text:#F8B93F; --blush-text:#F7A3BD; --sage-text:#A9C0A1; --link:#D9A5E6;
  --terracotta-soft:#3A1C14; --marigold-soft:#33260C; --blush-soft:#3A1A25; --sage-soft:#1F2A1D; --plum-soft:#2E1736;
  --focus-ring:#D9A5E6; --logo:url(img/vp-lockup-cream.png); color-scheme:dark }}
:root[data-theme="dark"]{
  --surface:#1E1511; --surface-raised:#2A1E18; --surface-sunk:#160F0C; --line:#43322A;
  --ink:#F8EEE4; --ink-muted:#C9B6A8; --on-espresso:#F8EEE4; --primary:#F8EEE4; --on-primary:#1E1511; --on-bar:#1E1511; --on-plum:#1E1511;
  --terracotta:#F08A6E; --marigold:#F8B93F; --blush:#F7A3BD; --sage:#A9C0A1; --plum:#D9A5E6;
  --terracotta-text:#F08A6E; --marigold-text:#F8B93F; --blush-text:#F7A3BD; --sage-text:#A9C0A1; --link:#D9A5E6;
  --terracotta-soft:#3A1C14; --marigold-soft:#33260C; --blush-soft:#3A1A25; --sage-soft:#1F2A1D; --plum-soft:#2E1736;
  --focus-ring:#D9A5E6; --logo:url(img/vp-lockup-cream.png); color-scheme:dark }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--surface);color:var(--ink);font-family:var(--font-sans);font-size:17px;line-height:28px;margin:0}
a{color:var(--link)}
img{max-width:100%;display:block}
p{margin:0}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;margin:0;text-wrap:balance;color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.narrow{max-width:760px}
.eyebrow{font:700 12px/16px var(--font-sans);letter-spacing:.12em;text-transform:uppercase;margin:0}
.lead{font-size:20px;line-height:31px;max-width:36em}
.muted{color:var(--ink-muted)}
.small{font-size:15px;line-height:24px}

/* buttons */
.btn{font:600 15px/20px var(--font-sans);display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:var(--pill);border:1.5px solid transparent;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-secondary{border-color:currentColor;color:inherit;background:transparent}
.btn-quiet{color:var(--link);text-decoration:underline;text-underline-offset:3px;padding:0 4px;min-height:auto}
.btn-bright{background:var(--marigold);color:#3A241B}
.btn:hover{filter:brightness(.94)}
a:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible,button:focus-visible,summary:focus-visible{outline:none;box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--focus-ring)}

/* rising bars */
.bars{display:inline-flex;align-items:flex-end;gap:6px;height:40px}
.bars i{display:block;width:10px;border-radius:var(--pill)}
.bars i:nth-child(1){height:14px;background:#E65F41}.bars i:nth-child(2){height:21px;background:#F6A817}.bars i:nth-child(3){height:28px;background:#F796B1}.bars i:nth-child(4){height:34px;background:#829B7A}.bars i:nth-child(5){height:40px;background:#611A72}

/* header */
.draft{background:var(--plum-soft);color:var(--link);font:600 13px/20px var(--font-sans);text-align:center;padding:8px 16px}
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:20px;min-height:76px}
.logo{display:block;width:150px;aspect-ratio:845/323;background:var(--logo) left center/contain no-repeat;flex:none}
.menu{display:flex;gap:4px;list-style:none;margin:0 0 0 auto;padding:0;align-items:center}
.menu>li{position:relative}
.menu a{color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;padding:10px 10px;border-radius:var(--r-sm);display:block}
.menu a:hover,.menu a[aria-current="page"]{color:var(--link)}
.menu .sub{display:none;position:absolute;top:100%;left:0;min-width:220px;background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r-md);padding:8px;list-style:none;margin:0;box-shadow:0 8px 24px rgba(58,36,27,.12)}
.menu li:hover>.sub,.menu li:focus-within>.sub{display:block}
.menu .sub a{font-weight:500}
.acts{display:flex;align-items:center;gap:12px}
.acts .btn-secondary{min-height:40px;padding:0 18px;color:var(--ink)}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:var(--r-sm);min-height:40px;padding:0 12px;color:var(--ink);font:600 15px var(--font-sans)}
@media (max-width:980px){
  .burger{display:inline-flex;align-items:center;margin-left:auto}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;background:var(--surface);border-bottom:1px solid var(--line);padding:8px 16px 16px;gap:0}
  .menu.open{display:flex}
  .menu .sub{display:block;position:static;border:0;box-shadow:none;padding:0 0 0 16px;background:none}
  .acts .btn-secondary{display:none}
}

/* banner heroes (photo-ready) */
.banner{position:relative;overflow:hidden}
.banner .wrap{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:center;padding-block:clamp(56px,8vw,104px)}
.banner h1{font-size:clamp(44px,6.4vw,80px);line-height:1.02;letter-spacing:-.02em;margin-top:14px}
.banner .lead{margin-top:20px}
.banner .ctas{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:32px}
.banner .art{justify-self:end;display:flex;align-items:flex-end;gap:clamp(10px,1.6vw,18px);height:clamp(180px,24vw,300px)}
.banner .art i{display:block;width:clamp(26px,3.4vw,44px);border-radius:var(--pill)}
.banner .art i:nth-child(1){height:34%;background:#E65F41}.banner .art i:nth-child(2){height:52%;background:#F6A817}.banner .art i:nth-child(3){height:70%;background:#F796B1}.banner .art i:nth-child(4){height:86%;background:#829B7A}.banner .art i:nth-child(5){height:100%;background:#611A72}
.b-espresso{background:#3A241B;color:#FFFAF4}
.b-espresso .art i:nth-child(5){box-shadow:0 0 0 2px rgba(255,250,244,.25)}
.b-espresso .btn-primary{background:#F6A817;color:#3A241B}
.b-espresso .btn-quiet{color:#FFFAF4}
.b-blush{background:#F796B1;color:#3A241B}
.b-sage{background:#829B7A;color:#1E1511}
.b-marigold{background:#F6A817;color:#3A241B}
.b-terracotta{background:#E65F41;color:#1E1511}
.b-plum{background:#611A72;color:#FFFAF4}
.b-plum .btn-primary{background:#F6A817;color:#3A241B}
.b-plum .btn-quiet{color:#FFFAF4}
.b-blush .btn-primary,.b-sage .btn-primary,.b-marigold .btn-primary,.b-terracotta .btn-primary{background:#3A241B;color:#FFFAF4}
.b-blush .btn-quiet,.b-sage .btn-quiet,.b-marigold .btn-quiet,.b-terracotta .btn-quiet{color:#3A241B}
.b-blush .art i:nth-child(3),.b-marigold .art i:nth-child(2),.b-sage .art i:nth-child(4),.b-terracotta .art i:nth-child(1){background:#3A241B}
.b-plum .art i:nth-child(5){background:#FFFAF4}
.crumb{font:600 14px var(--font-sans);opacity:.85}
.crumb a{color:inherit}
@media (max-width:820px){.banner .wrap{grid-template-columns:1fr}.banner .art{justify-self:start;height:120px}}

/* sections */
.band{padding-block:clamp(56px,7vw,96px)}
.sunk{background:var(--surface-sunk)}
.tint-blush{background:var(--blush-soft)} .tint-sage{background:var(--sage-soft)} .tint-marigold{background:var(--marigold-soft)} .tint-terracotta{background:var(--terracotta-soft)} .tint-plum{background:var(--plum-soft)}
.head{display:grid;gap:12px;max-width:44em;margin-bottom:40px}
.head h2{font-size:clamp(30px,4vw,44px);line-height:1.12}
.head.center{margin-inline:auto;text-align:center;justify-items:center}
.ey-blush{color:var(--blush-text)} .ey-sage{color:var(--sage-text)} .ey-marigold{color:var(--marigold-text)} .ey-terracotta{color:var(--terracotta-text)} .ey-plum{color:var(--link)} .ey-muted{color:var(--ink-muted)}

.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r-md);padding:26px;display:grid;gap:10px;align-content:start;min-width:0}
.card h3{font-size:22px;line-height:28px}
.card p{color:var(--ink-muted);font-size:16px;line-height:26px}
a.card{text-decoration:none;color:var(--ink)}
a.card:hover{border-color:var(--ink)}
.card .go{font-weight:600;font-size:15px}
.pill{width:40px;height:10px;border-radius:var(--pill)}
.p-blush{background:var(--blush)}.p-sage{background:var(--sage)}.p-marigold{background:var(--marigold)}.p-terracotta{background:var(--terracotta)}.p-plum{background:var(--plum)}
.num{font:600 34px/1 var(--font-display);color:var(--ink)}
.steps .card{border-top:4px solid var(--marigold)}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:28px}}
.checks{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.checks li{display:grid;grid-template-columns:14px 1fr;gap:12px;align-items:baseline}
.checks li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c,var(--marigold));transform:translateY(-1px)}
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:720px){.compare{grid-template-columns:1fr}}
.compare .card.win{background:var(--espresso);color:var(--on-espresso);border-color:var(--espresso)}
.compare .card.win p,.compare .card.win h3{color:var(--on-espresso)}
.compare .card.win .eyebrow{color:#F6A817}
.quote{font:italic 400 clamp(26px,3.4vw,38px)/1.25 var(--font-display);max-width:24em}
.note{font-size:13px;line-height:19px;color:var(--ink-muted);border-top:1px solid var(--line);padding-top:12px;margin-top:8px}
.prose{display:grid;gap:18px;max-width:46em}
.prose h3{font-size:24px;line-height:30px;margin-top:10px}

/* values band */
.values{background:#3A241B;color:#FFFAF4}
.values .eyebrow{color:#F6A817}
.vgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:40px}
@media (max-width:1000px){.vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.vgrid{grid-template-columns:1fr}}
.vgrid>div{display:grid;gap:10px;align-content:start;border-top:3px solid;padding-top:18px}
.vgrid>div:nth-child(1){border-color:#E65F41}.vgrid>div:nth-child(2){border-color:#F6A817}.vgrid>div:nth-child(3){border-color:#F796B1}.vgrid>div:nth-child(4){border-color:#829B7A}
.vgrid h3{font-size:22px;line-height:28px}
.vgrid p{opacity:.88;font-size:16px;line-height:26px}

/* faq / myths */
details{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r-md);padding:0 22px}
details+details{margin-top:12px}
summary{cursor:pointer;list-style:none;font:600 19px/28px var(--font-display);padding:18px 32px 18px 0;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:0;top:16px;font:400 26px var(--font-sans);color:var(--ink-muted)}
details[open] summary::after{content:"–"}
details>div{padding-bottom:20px;color:var(--ink-muted)}

/* calculators */
.calc{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(20px,3vw,32px);display:grid;gap:18px;scroll-margin-top:100px}
.calc h3{font-size:26px;line-height:32px}
.cgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
@media (max-width:700px){.cgrid{grid-template-columns:1fr}}
.fields{display:grid;gap:14px;align-content:start}
.field{display:grid;gap:6px}
.field label{font:600 15px/20px var(--font-sans)}
.field input,.field select{font:400 17px/24px var(--font-sans);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;width:100%;font-variant-numeric:tabular-nums}
.result{background:var(--marigold-soft);border-radius:var(--r-md);padding:24px;display:grid;gap:8px;align-content:start}
.figure{font:600 clamp(36px,5vw,48px)/1.1 var(--font-display);font-variant-numeric:tabular-nums}
.rows{display:grid;gap:6px;margin-top:6px;font-size:15px;line-height:22px}
.rows div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed var(--line);padding-bottom:6px;font-variant-numeric:tabular-nums}
.jump{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:600 14px/34px var(--font-sans);padding:0 14px;border-radius:var(--pill);background:var(--surface-raised);border:1px solid var(--line);color:var(--ink);text-decoration:none}
.chip:hover{border-color:var(--ink)}

/* join */
.join{background:#3A241B;color:#FFFAF4;border-radius:var(--r-lg);padding:clamp(28px,5vw,56px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center}
@media (max-width:900px){.join{grid-template-columns:1fr}}
.join h2{font-size:clamp(34px,5vw,52px);line-height:1.05}
.join p{opacity:.9}
.join form{display:grid;gap:12px}
.join .row{display:flex;flex-wrap:wrap;gap:12px}
.join input{flex:1 1 180px;font:400 17px/24px var(--font-sans);padding:12px 16px;border-radius:var(--pill);border:0;background:#FFFAF4;color:#3A241B}
.join .btn{background:#F6A817;color:#3A241B}
.join .fine{font-size:13px;opacity:.8}

/* footer */
footer.site{padding-block:56px 40px;border-top:1px solid var(--line);margin-top:clamp(56px,7vw,96px)}
.fgrid{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:32px}
@media (max-width:800px){.fgrid{grid-template-columns:1fr 1fr}}
footer h4{font:700 12px/16px var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 12px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer ul a{color:var(--ink);text-decoration:none;font-size:15px}
.flogo{width:190px;aspect-ratio:845/323;background:var(--logo) left center/contain no-repeat;margin-bottom:14px}
.legal{margin-top:40px;display:grid;gap:8px;font-size:13px;line-height:19px;color:var(--ink-muted)}
@media (prefers-reduced-motion:no-preference){.banner .art i{animation:rise .7s cubic-bezier(.2,.8,.2,1) both;transform-origin:bottom}.banner .art i:nth-child(2){animation-delay:.08s}.banner .art i:nth-child(3){animation-delay:.16s}.banner .art i:nth-child(4){animation-delay:.24s}.banner .art i:nth-child(5){animation-delay:.32s}}
@keyframes rise{from{transform:scaleY(.15)}to{transform:scaleY(1)}}
@media (max-width:560px){.nav{gap:10px}.logo{width:112px}.acts .btn-quiet{font-size:14px;padding:0 2px}.burger{padding:0 10px}}
.crumb{margin-bottom:8px}
/* always-visible top tabs */
.menu .sub{display:none!important}
.tabs{background:var(--surface-sunk);border-bottom:1px solid var(--line);position:sticky;top:calc(env(safe-area-inset-top,0px) + 77px);z-index:15}
.tabs ul{display:flex;gap:6px;list-style:none;margin:0;padding:10px 0;overflow-x:auto;scrollbar-width:none}
.tabs ul::-webkit-scrollbar{display:none}
.tabs a{display:block;white-space:nowrap;text-decoration:none;color:var(--ink);font:600 14px/20px var(--font-sans);padding:8px 16px;border-radius:var(--pill);border:1px solid var(--line);background:var(--surface-raised)}
.tabs a:hover{border-color:var(--ink)}
.tabs a[aria-current="page"]{background:var(--marigold);border-color:var(--marigold);color:#3A241B}
@media (max-width:980px){
  .burger{display:none}
  .nav{flex-wrap:wrap;row-gap:0;min-height:0;padding-top:10px}
  .acts{margin-left:auto}
  .menu{display:flex!important;position:static;flex-direction:row;order:3;width:100%;overflow-x:auto;background:none;border:0;padding:6px 0 10px;gap:2px;scrollbar-width:none}
  .menu::-webkit-scrollbar{display:none}
  .menu a{white-space:nowrap;padding:8px 12px}
  .tabs{top:auto;position:static}
}
/* banner signal tuned to the vp monogram rhythm: slimmer, taller, even steps */
.banner .art{--h:clamp(190px,26vw,320px);height:var(--h);gap:calc(var(--h)*.055)}
.banner .art i{width:calc(var(--h)*.135)}
.banner .art i:nth-child(1){height:30%}.banner .art i:nth-child(2){height:47.5%}.banner .art i:nth-child(3){height:65%}.banner .art i:nth-child(4){height:82.5%}.banner .art i:nth-child(5){height:100%}
@media (max-width:820px){.banner .art{--h:130px}}
.bars{gap:5px}.bars i{width:8px}
.bars i:nth-child(1){height:12px}.bars i:nth-child(2){height:19px}.bars i:nth-child(3){height:26px}.bars i:nth-child(4){height:33px}.bars i:nth-child(5){height:40px}