/* villa-veritas.com/css/site_v4.css — THE REPORT-LED REDESIGN, STYLESHEET (2026-10-29, owner on v3: « what is this crap? you better come up with
   a proper design. call a design expert for that type of site »). The label's product is a public, dated inspection report : the report card is
   the hero, the pages are typeset like a guide (hairlines, mono micro-labels, Fraunces headings, ink buttons, gold only as the seal's accent).
   Faces fixed by the owner : Fraunces (titles), Inter (text), DM Mono (labels, weight 500 max), loaded by fonts/fonts.css.
   Pages : home_v4.php, guests_v4.php, owners_v4.php through _site_v4.php. Breakpoints : ≥1200, 900–1199, 640–899, ≤639. */
:root{
  --vv-ink:#1F2A37; --vv-ink-2:#2E3B4E;
  --vv-gold:#C9A227; --vv-gold-dark:#8E6E12;
  --vv-sable:#EDE3CE; --vv-line:#D9D9D9; --vv-white:#FFFFFF;
  --font-title:'Fraunces','Cormorant Garamond',Georgia,serif; --font-sans:'Inter',system-ui,sans-serif; --font-mono:'DM Mono',Consolas,monospace;
  --fs-h1:64px; --fs-h2:36px; --fs-h3:24px; --fs-lead:19px; --fs-body:16px; --fs-small:14px; --fs-kicker:13px;
  --max:1240px; --gutter:48px; --half:calc(var(--max) / 2 - var(--gutter));
  --shadow:0 24px 60px -28px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html{overflow-y:scroll;scroll-behavior:smooth}
body{margin:0;font-family:var(--font-sans);font-size:var(--fs-body);line-height:1.5;color:var(--vv-ink);background:var(--vv-white);-webkit-font-smoothing:antialiased;font-synthesis:none}
h1,h2,h3{font-family:var(--font-title);font-weight:600;line-height:1.04;letter-spacing:-.015em;margin:0;color:var(--vv-ink);text-wrap:balance}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)}
h1 em,h2 em{font-style:italic;font-weight:500;color:var(--vv-gold-dark)}
p{margin:0}
a{color:var(--vv-ink)}
img{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.kicker{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;font-family:var(--font-mono);font-weight:500;font-size:var(--fs-kicker);letter-spacing:.14em;text-transform:uppercase;color:var(--vv-ink)}
.kicker::before{content:'';width:26px;height:2px;background:var(--vv-gold)}
.lead{font-size:var(--fs-lead);line-height:1.5;max-width:34em}
.mono{font-family:var(--font-mono);font-weight:500;font-size:var(--fs-kicker);letter-spacing:.1em;text-transform:uppercase}

/* controls */
.btn{display:inline-grid;place-items:center;min-height:48px;padding:0 26px;border:1.5px solid var(--vv-ink);border-radius:2px;background:var(--vv-ink);color:var(--vv-white);text-decoration:none;font-family:inherit;font-weight:600;font-size:15px;line-height:1.2;cursor:pointer;text-align:center}
.btn:hover{background:var(--vv-ink-2);border-color:var(--vv-ink-2)}
.more{display:inline-block;font-weight:600;font-size:15px;color:var(--vv-ink);text-decoration:none;border-bottom:2px solid var(--vv-gold);padding-bottom:2px;line-height:1.3}
.more:hover{border-color:var(--vv-ink)}
.acts{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;gap:28px}
.acts.stack{grid-template-columns:1fr;justify-items:start;gap:14px}
input,select{font:inherit;font-size:16px;color:var(--vv-ink);background:var(--vv-white);border:1.5px solid var(--vv-ink);border-radius:2px;padding:0 14px;min-height:48px;width:100%;min-width:0}
input:focus,select:focus{outline:2px solid var(--vv-gold);outline-offset:1px}

/* header : the brand leads, the nav is quiet, the call to action is the last link in the seal's dark gold */
header{position:sticky;top:0;z-index:10;background:var(--vv-white);border-bottom:1px solid var(--vv-line);transition:transform .25s ease}
header.hide{transform:translateY(-100%)}
header .row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;min-height:88px;column-gap:24px}
.brand{display:grid;grid-template-columns:auto auto;align-items:center;gap:14px;justify-self:start;text-decoration:none;font-family:var(--font-title);font-weight:600;font-size:32px;letter-spacing:-.01em;color:var(--vv-ink)}
.brand img{width:50px;height:50px}
header nav{grid-column:3;display:grid;grid-template-columns:repeat(4,auto);column-gap:34px;align-items:center}
header nav a{text-decoration:none;font-size:16px;font-weight:500;color:var(--vv-ink);padding:6px 0;border-bottom:2px solid transparent}
header nav a:hover{border-color:var(--vv-gold)}
header nav a.cta{color:var(--vv-gold-dark);font-weight:600}
.menu-btn{display:none;font:inherit;font-weight:600;font-size:15px;color:var(--vv-ink);background:transparent;border:1.5px solid var(--vv-ink);border-radius:2px;min-height:42px;padding:0 16px;cursor:pointer}

/* the report card : the label's product, typeset */
.report{background:var(--vv-white);box-shadow:var(--shadow);padding:28px 30px 26px;display:grid;gap:0;width:100%;max-width:480px}
.report .top{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--vv-ink)}
.report .top .mono{color:var(--vv-gold-dark)}
.report .villa-name{font-family:var(--font-title);font-weight:600;font-size:26px;line-height:1.1;margin:18px 0 4px}
.report .where{font-size:var(--fs-small)}
.report .when{margin:12px 0 14px;padding-bottom:14px;border-bottom:1px solid var(--vv-line)}
.report ul{list-style:none;margin:0;padding:0;display:grid}
.report li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:7px 0;border-bottom:1px solid var(--vv-line);font-size:15px}
.report li::before{content:'';width:18px;height:18px;border-radius:50%;background:var(--vv-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.4l2.5 2.4 5.1-5.2' fill='none' stroke='%231F2A37' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat}
.report li span{font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--vv-gold-dark)}
.report .foot{display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:16px;padding-top:18px}
.report .foot .qr{width:64px;height:64px;border:1px solid var(--vv-line)}
.report .foot .stamp{width:90px;height:90px}
.report .foot .mono{font-size:11px;line-height:1.5;align-self:end;padding-bottom:4px}
.report.mini{box-shadow:none;border:1px solid var(--vv-ink);max-width:none;padding:22px 24px 20px}
.report.mini .villa-name{font-size:22px;margin-top:14px}

/* home : the statement and the report, one screen ; the sable field bleeds to the right edge */
.hero{display:grid;grid-template-columns:[full-start] minmax(var(--gutter),1fr) [main-start] minmax(0,var(--half)) [mid] minmax(0,var(--half)) [main-end] minmax(var(--gutter),1fr) [full-end];align-items:stretch}
.hero .say{grid-column:main-start / mid;align-self:center;padding:48px 56px 48px 0;display:grid;gap:18px;justify-items:start}
.hero .say h1{margin-top:4px}
.hero .say .acts{margin-top:10px}
.hero .field{grid-column:mid / full-end;background:var(--vv-sable);display:grid;align-items:center;justify-items:start;padding:44px 48px 44px 56px}
/* the two doors : one sable band, one hairline */
.doors-band{background:var(--vv-sable);border-top:1px solid var(--vv-line)}
.doors{display:grid;grid-template-columns:1fr 1fr;column-gap:0}
.door{display:grid;gap:14px;align-content:start;justify-items:start;padding:44px 48px 44px 0}
.door + .door{border-left:1px solid var(--vv-ink);padding-left:48px;padding-right:0}
.door h2{font-size:30px}
.door p{max-width:30em}
.door .acts{margin-top:6px}
/* the timeline : a gold line, mono numerals */
.timeline{display:grid;grid-template-columns:repeat(3,1fr);column-gap:40px;border-top:2px solid var(--vv-gold);padding-top:22px}
.timeline.four{grid-template-columns:repeat(4,1fr)}
.timeline > div{display:grid;gap:8px;align-content:start;position:relative}
.timeline > div::before{content:'';position:absolute;top:-29px;left:0;width:12px;height:12px;border-radius:50%;background:var(--vv-gold)}
.timeline .n{font-family:var(--font-mono);font-weight:500;font-size:var(--fs-kicker);letter-spacing:.14em;color:var(--vv-gold-dark)}
.timeline b{font-family:var(--font-title);font-weight:600;font-size:24px;line-height:1.1}
.timeline p{max-width:24em}
.sec{padding-top:60px}
.sec > .head{display:grid;gap:12px;margin-bottom:30px}

/* sub-pages */
.pagehead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:center;padding-top:44px;padding-bottom:40px;border-bottom:1px solid var(--vv-ink)}
.pagehead > div{display:grid;gap:16px;justify-items:start}
.pagehead h1{font-size:var(--fs-h2);font-size:calc(var(--fs-h1) * .78)}
.pagehead img{width:150px;height:150px}
.crumb{display:inline-block;font-size:var(--fs-small);font-weight:600;text-decoration:none;border-bottom:2px solid var(--vv-gold);padding-bottom:1px}
/* villas */
.villas{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.villa{display:grid;grid-template-rows:auto 1fr;text-decoration:none;border:1px solid var(--vv-line);min-width:0;background:var(--vv-white)}
.villa:hover{border-color:var(--vv-ink)}
.villa .ph{position:relative;aspect-ratio:3/2;background:var(--vv-sable);display:grid;place-items:center}
.villa .ph .mono{color:var(--vv-ink)}
.villa .ph img{position:absolute;right:14px;bottom:14px;width:58px;height:58px}
.villa .tx{display:grid;gap:6px;padding:18px 20px 20px}
.villa b{font-family:var(--font-title);font-weight:600;font-size:22px;line-height:1.15}
.villa small{font-size:var(--fs-small)}
.villa .chip{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;gap:10px;font-size:var(--fs-small)}
.villa code{font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.08em;background:var(--vv-sable);padding:3px 7px;border-radius:2px}
/* the badge console */
.console{display:grid;grid-template-columns:auto minmax(0,1fr);gap:44px;align-items:start;background:var(--vv-sable);padding:40px}
.console .qrcard{display:grid;gap:10px;justify-items:center;background:var(--vv-white);border:1px solid var(--vv-line);padding:16px}
.console .qrcard img{width:180px;height:180px}
.console .lead{margin-bottom:20px}
.codeform{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;max-width:560px}
.codefield{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;background:var(--vv-white);border:1.5px solid var(--vv-ink);border-radius:2px;min-height:52px}
.codefield:focus-within{outline:2px solid var(--vv-gold);outline-offset:1px}
.codefield .prefix{font-family:var(--font-mono);font-weight:500;font-size:18px;letter-spacing:.08em;padding:0 2px 0 16px;color:var(--vv-ink)}
.codefield input{border:0;min-height:48px;font-family:var(--font-mono);font-weight:500;font-size:18px;letter-spacing:.08em;padding-left:2px}
.codefield input:focus{outline:0}
.console .result{display:none;margin-top:22px;max-width:560px}
.console .result.on{display:block}
.console .result .none{background:var(--vv-white);border-left:3px solid var(--vv-ink);padding:16px 18px}
.console .result .none b{display:block;font-family:var(--font-title);font-weight:600;font-size:22px;margin-bottom:4px}
/* the eight points */
.checks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:56px;border-top:1px solid var(--vv-ink)}
.checks li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--vv-line);font-size:17px}
.checks li::before{content:'';width:22px;height:22px;border-radius:50%;background:var(--vv-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.4l2.5 2.4 5.1-5.2' fill='none' stroke='%231F2A37' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
/* apply */
.apply{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.apply .head{display:grid;gap:14px;position:sticky;top:108px}
.apply form{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;background:var(--vv-sable);padding:36px}
.apply label{display:grid;gap:6px;font-weight:600;font-size:var(--fs-small);min-width:0}
.apply label.full,.apply .btn,.apply .note{grid-column:1 / -1}
.apply .btn{justify-self:start}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.note{display:none;padding:14px 16px;background:var(--vv-white);border-left:3px solid var(--vv-gold)}
.note.on{display:block}

/* footer, ink */
footer{margin-top:72px;background:var(--vv-ink);color:var(--vv-white)}
footer .row{display:grid;grid-template-columns:1fr auto;gap:14px 48px;align-items:center;padding-top:30px;padding-bottom:30px}
footer .brand{color:var(--vv-white);font-size:26px}
footer .brand img{width:40px;height:40px}
footer nav{display:grid;grid-template-columns:repeat(4,auto);column-gap:28px;justify-content:end}
footer nav a{color:var(--vv-white);text-decoration:none;font-size:15px;font-weight:500;border-bottom:1px solid transparent}
footer nav a:hover{border-color:var(--vv-gold)}
footer .say{font-size:var(--fs-small)}
footer .mono{justify-self:end;color:var(--vv-white)}
footer .mono a{color:var(--vv-white);text-decoration:none;border-bottom:1px solid var(--vv-gold)}

/* 900–1199 */
@media (max-width:1199px){
  :root{--fs-h1:52px;--fs-h2:32px;--gutter:32px}
  .hero .say{padding:40px 36px 40px 0}
  .hero .field{padding:36px 32px 36px 36px}
  .report{padding:24px 24px 22px}
  .door{padding:36px 32px 36px 0}
  .door + .door{padding-left:32px}
  .door h2{font-size:28px}
  .timeline{column-gap:28px}
  .villas{gap:20px}
  .console{gap:32px;padding:32px}
  .apply{gap:36px}
  .apply form{padding:28px}
}
/* 640–899 : one column ; the brand row then the nav row */
@media (max-width:899px){
  :root{--fs-h1:40px;--fs-h2:28px}
  header .row{grid-template-columns:1fr;min-height:0;padding-top:14px;row-gap:0}
  header nav{grid-column:1;justify-content:start;column-gap:26px;padding:10px 0 14px}
  .hero .say{grid-column:main-start / main-end;padding:36px 0 32px}
  .hero .field{grid-column:full-start / full-end;padding:32px var(--gutter);justify-items:center}
  .report{max-width:520px}
  .doors{grid-template-columns:1fr}
  .door{padding:32px 0}
  .door + .door{border-left:0;border-top:1px solid var(--vv-ink);padding-left:0}
  .timeline{column-gap:24px}
  .timeline.four{grid-template-columns:repeat(2,1fr);row-gap:28px}
  .timeline.four > div:nth-child(n+3){border-top:2px solid var(--vv-gold);padding-top:22px}
  .timeline.four > div:nth-child(n+3)::before{top:-7px}
  .pagehead{gap:28px}
  .pagehead img{width:120px;height:120px}
  .villas{grid-template-columns:1fr 1fr}
  .console{grid-template-columns:1fr;gap:24px;padding:24px}
  .console .qrcard{justify-self:start}
  .apply{grid-template-columns:1fr;gap:28px}
  .apply .head{position:static}
  footer .row{grid-template-columns:1fr}
  footer nav{justify-content:start}
  footer .mono{justify-self:start}
}
/* ≤639 : brand + Menu ; everything single column ; the timeline runs down the page */
@media (max-width:639px){
  :root{--fs-h1:34px;--fs-h2:26px;--fs-lead:18px;--gutter:20px}
  header .row{grid-template-columns:1fr auto;min-height:72px;padding-top:0}
  .brand{font-size:26px}.brand img{width:42px;height:42px}
  .menu-btn{display:inline-grid;place-items:center;grid-column:2}
  header nav{display:none;grid-column:1 / -1;grid-template-columns:1fr;padding:0 0 8px}
  header.open nav{display:grid}
  header nav a{padding:12px 0;border-bottom:1px solid var(--vv-line)}
  header nav a:last-child{border-bottom:0}
  .acts{grid-template-columns:1fr;justify-items:start;gap:14px}
  .hero .say{padding:28px 0 26px}
  .hero .field{padding:24px var(--gutter)}
  .report{padding:20px 18px 18px}
  .report .villa-name{font-size:22px}
  .report li{font-size:14px}
  .report .foot .stamp{width:72px;height:72px}
  .door{padding:26px 0}
  .door h2{font-size:24px}
  .timeline,.timeline.four{grid-template-columns:1fr;row-gap:0;border-top:0;border-left:2px solid var(--vv-gold);padding:0 0 0 24px}
  .timeline > div,.timeline.four > div:nth-child(n+3){border-top:0;padding:0 0 26px}
  .timeline > div::before,.timeline.four > div:nth-child(n+3)::before{top:4px;left:-31px}
  .timeline > div:last-child{padding-bottom:4px}
  .sec{padding-top:44px}
  .pagehead{grid-template-columns:1fr;gap:20px;padding-top:28px;padding-bottom:28px}
  .pagehead img{width:100px;height:100px;order:-1}
  .villas{grid-template-columns:1fr;gap:16px}
  .console{padding:18px}
  .console .qrcard img{width:150px;height:150px}
  .codeform{grid-template-columns:1fr}
  .checks{grid-template-columns:1fr;column-gap:0}
  .checks li{font-size:16px}
  .apply form{grid-template-columns:1fr;padding:20px}
  footer{margin-top:52px}
  footer nav{grid-template-columns:1fr;row-gap:10px}
}
@media print{header,footer,.menu-btn{display:none}body{color:#000}.hero .field,.doors-band,.console,.apply form,.villa .ph{background:#fff}.report{box-shadow:none;border:1px solid #000}}