/* VIDA Hospitality v3 — family design system (Collection-warm, Hospitality-plain) */
:root{
  --cream:#F9F3E2; --offwhite:#F3EFEC; --card:#FCFAF3;
  --ink:#26240F; --olive:#535335; --olive-deep:#32300F;
  --gold:#C9A45C; --gold-soft:#D9BE8A; --terra:#B73D25;
  --hair:#DDD3B6; --hair-dark:rgba(217,190,138,.28);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost','Helvetica Neue',Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:var(--olive-deep)}

h1,h2,h3,.serif{font-family:var(--serif);font-weight:500;line-height:1.12;color:var(--olive-deep)}
h1{font-size:clamp(2.4rem,5.4vw,4.2rem);letter-spacing:.01em}
h2{font-size:clamp(1.8rem,3.2vw,2.6rem);margin-bottom:.45em}
h3{font-size:1.45rem}
p{max-width:62ch}
.lead{font-size:1.16rem;line-height:1.75;color:#3a3720}

.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
section{padding:clamp(44px,5.5vw,76px) 0}
.tight{padding:clamp(32px,3.8vw,52px) 0}

/* diamond rule — the family divider */
.rule{display:flex;align-items:center;gap:18px;margin:0 auto 1.6rem;max-width:300px}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:var(--hair)}
.rule span{width:7px;height:7px;background:var(--gold);transform:rotate(45deg);flex:none}
.on-dark .rule::before,.on-dark .rule::after{background:var(--hair-dark)}

/* nav */
nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:18px clamp(20px,4vw,48px);transition:background .35s,box-shadow .35s}
nav.scrolled{background:rgba(249,243,226,.96);box-shadow:0 1px 0 var(--hair)}
nav .brand{display:flex;align-items:center;gap:12px;font-family:var(--sans);font-weight:500;letter-spacing:.42em;font-size:.82rem;color:#fff}
nav .brand img{width:34px;height:34px}
nav .brand .sep{color:var(--gold);letter-spacing:0}
nav.scrolled .brand{color:var(--olive-deep)}
nav ul{display:flex;gap:clamp(14px,2.6vw,34px);list-style:none;align-items:center}
nav ul a{font-size:.78rem;letter-spacing:.3em;font-weight:400;color:rgba(255,255,255,.92);padding:6px 2px;border-bottom:1px solid transparent;transition:.25s}
nav.scrolled ul a{color:var(--olive)}
nav ul a:hover,nav ul a.here{border-bottom-color:var(--gold);color:var(--gold)}
nav.scrolled ul a:hover,nav.scrolled ul a.here{color:var(--olive-deep)}
nav ul a.cta{border:1px solid var(--gold);padding:9px 20px;color:var(--gold)}
nav ul a.cta:hover{background:var(--gold);color:var(--olive-deep)}
nav.solid{position:static;background:var(--cream);box-shadow:0 1px 0 var(--hair)}
nav.solid .brand{color:var(--olive-deep)}
nav.solid ul a{color:var(--olive)}
@media(max-width:720px){nav ul{gap:12px}nav ul a{letter-spacing:.16em;font-size:.72rem}nav ul li.hide-m{display:none}}

/* hero */
.hero{position:relative;min-height:86vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero.short{min-height:52vh}
.hero video,.hero>img.bg,.hero>picture{position:absolute;inset:0;width:100%;height:100%}
.hero>picture img.bg{width:100%;height:100%;object-fit:cover}
.hero video,.hero>img.bg{object-fit:cover}
.hero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(38,36,15,.42) 0%,rgba(38,36,15,.18) 40%,rgba(38,36,15,.78) 100%)}
.hero .wrap{position:relative;padding:104px 0 clamp(40px,5.5vw,72px);width:100%}
.hero h1{color:#fff;max-width:19ch}
.hero .roles{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px 26px;font-size:.78rem;letter-spacing:.28em;color:var(--gold-soft)}
.hero .actions{margin-top:34px;display:flex;gap:16px;flex-wrap:wrap}

/* buttons */
.btn{display:inline-block;font-family:var(--sans);font-weight:500;font-size:.8rem;letter-spacing:.24em;padding:15px 34px;border:1px solid var(--olive-deep);background:var(--olive-deep);color:var(--cream);transition:.25s;cursor:pointer}
.btn:hover{background:var(--olive);border-color:var(--olive)}
.btn.ghost{background:transparent;color:var(--olive-deep)}
.btn.ghost:hover{background:var(--olive-deep);color:var(--cream)}
.btn.light{background:transparent;border-color:var(--gold);color:var(--gold-soft)}
.btn.light:hover{background:var(--gold);color:var(--olive-deep)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--olive-deep)}
.btn.gold:hover{background:var(--gold-soft);border-color:var(--gold-soft)}

/* bands */
.band{background:var(--olive-deep);color:var(--cream)}
.band h2,.band h3{color:var(--cream)}
.band .lead{color:var(--gold-soft)}
.alt{background:var(--offwhite)}

/* metrics */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,4vw,56px);text-align:center}
.metrics .n{font-family:var(--serif);font-size:clamp(2.6rem,5vw,4rem);color:var(--gold);line-height:1}
.metrics .l{margin-top:12px;font-size:.72rem;letter-spacing:.26em;color:var(--gold-soft);font-weight:400}
@media(max-width:760px){.metrics{grid-template-columns:repeat(2,1fr);row-gap:44px}}

/* split layouts */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.split .ph{position:relative}
.split .ph img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover}
.split .ph::after{content:"";position:absolute;inset:14px;border:1px solid rgba(201,164,92,.5);pointer-events:none}
@media(max-width:860px){.split{grid-template-columns:1fr}}

/* cards */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:960px){.grid3,.grid4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid3,.grid2,.grid4{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--hair);padding:24px 24px}
.card h3{margin-bottom:.4em}
.card .where{font-size:.72rem;letter-spacing:.24em;color:var(--terra);font-weight:400;margin-bottom:14px}
.card p{font-size:.98rem}

/* image project cards */
.pcard{position:relative;display:block;overflow:hidden;background:var(--olive-deep)}
.pcard img{width:100%;height:340px;object-fit:cover;transition:transform .6s ease,opacity .4s}
.pcard:hover img{transform:scale(1.04);opacity:.85}
.pcard .cap{position:absolute;inset:auto 0 0;padding:26px 24px;background:linear-gradient(180deg,transparent,rgba(38,36,15,.88));color:#fff}
.pcard .cap .t{font-family:var(--serif);font-size:1.5rem;line-height:1.1}
.pcard .cap .w{font-size:.7rem;letter-spacing:.26em;color:var(--gold-soft);margin-top:6px}
.pcard .cap p{font-size:.92rem;color:rgba(249,243,226,.85);margin-top:8px;max-width:none}

/* compact work list */
.wlist{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
.wlist div{background:var(--card);padding:22px 24px}
.wlist .t{font-family:var(--serif);font-size:1.18rem;color:var(--olive-deep)}
.wlist .w{font-size:.7rem;letter-spacing:.22em;color:var(--olive);margin-top:4px}
.wlist p{font-size:.9rem;margin-top:8px;color:#4a4728}
@media(max-width:860px){.wlist{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.wlist{grid-template-columns:1fr}}

/* full-bleed photo band */
.photoband{position:relative;color:#fff;padding:clamp(60px,7.5vw,96px) 0}
.photoband>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photoband .scrim{position:absolute;inset:0;background:rgba(38,36,15,.66)}
.photoband .wrap{position:relative}
.photoband h2{color:#fff}
.photoband p{color:rgba(249,243,226,.92)}

/* testimonials */
.tcard{background:var(--card);border:1px solid var(--hair);padding:26px 26px;display:flex;flex-direction:column;gap:16px}
.tcard blockquote{font-family:var(--serif);font-size:1.22rem;line-height:1.5;color:var(--olive-deep)}
.tcard .who{display:flex;align-items:center;gap:14px;margin-top:auto}
.tcard .who img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid var(--gold)}
.tcard .who .n{font-weight:500;font-size:.86rem;letter-spacing:.14em}
.tcard .who .r{font-size:.76rem;letter-spacing:.12em;color:var(--olive)}
.band .tcard{background:rgba(252,250,243,.06);border-color:var(--hair-dark)}
.band .tcard blockquote{color:var(--cream)}
.band .tcard .who .n{color:var(--gold-soft)}
.band .tcard .who .r{color:rgba(249,243,226,.7)}

/* cred rows */
.creds{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
.creds div{background:var(--card);padding:24px 22px}
.creds .t{font-family:var(--serif);font-size:1.2rem;color:var(--olive-deep)}
.creds p{font-size:.86rem;margin-top:6px;color:#4a4728}
@media(max-width:860px){.creds{grid-template-columns:1fr 1fr}}

/* service detail */
.svc{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:start}
.svc.flip{grid-template-columns:.95fr 1.05fr}
.svc .ph img{width:100%;height:420px;object-fit:cover}
.svc ul{list-style:none;margin-top:20px;border-top:1px solid var(--hair)}
.svc ul li{padding:13px 0 13px 26px;border-bottom:1px solid var(--hair);font-size:.98rem;position:relative}
.svc ul li::before{content:"";position:absolute;left:2px;top:22px;width:6px;height:6px;background:var(--gold);transform:rotate(45deg)}
.svc .role{font-size:.74rem;letter-spacing:.28em;color:var(--terra);font-weight:400;margin-bottom:10px}
@media(max-width:860px){.svc,.svc.flip{grid-template-columns:1fr}.svc .ph img{height:300px}}

/* phases */
.phases{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:ph}
.phase{background:var(--card);border:1px solid var(--hair);border-top:3px solid var(--gold);padding:24px 24px}
.phase .num{font-family:var(--serif);font-size:2rem;color:var(--gold)}
.phase h3{margin:6px 0 14px}
.phase ul{list-style:none}
.phase ul li{padding:8px 0;border-bottom:1px solid var(--hair);font-size:.94rem}
.phase ul li:last-child{border-bottom:0}
@media(max-width:860px){.phases{grid-template-columns:1fr}}

/* clients */
.clients{display:flex;flex-wrap:wrap;gap:4px 22px;justify-content:center;max-width:1000px;margin:0 auto}
.clients span{font-size:.72rem;letter-spacing:.2em;color:var(--olive);padding:5px 0;font-weight:400}
.clients span::after{content:"·";color:var(--gold);margin-left:26px}
.clients span:last-child::after{content:""}

/* forms */
form{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:760px}
form .full{grid-column:1/-1}
label{display:block;font-size:.7rem;letter-spacing:.26em;font-weight:400;color:var(--olive);margin-bottom:8px}
input,select,textarea{width:100%;background:var(--card);border:1px solid var(--hair);padding:14px 16px;font-family:var(--sans);font-weight:300;font-size:1rem;color:var(--ink);transition:border-color .25s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold)}
textarea{min-height:140px;resize:vertical}
@media(max-width:640px){form{grid-template-columns:1fr}}
.band label{color:var(--gold-soft)}
.band input,.band select,.band textarea{background:rgba(252,250,243,.07);border-color:var(--hair-dark);color:var(--cream)}

/* footer */
footer{background:var(--olive-deep);color:rgba(249,243,226,.82);padding:40px 0 32px;font-size:.9rem}
footer .row{display:flex;flex-wrap:wrap;gap:16px 34px;align-items:center;justify-content:space-between}
footer a{border-bottom:1px solid var(--hair-dark);transition:.25s}
footer a:hover{color:var(--gold-soft);border-bottom-color:var(--gold)}
footer .fine{margin-top:22px;font-size:.8rem;color:rgba(249,243,226,.55)}
footer .fine a{border-bottom:none;color:var(--gold-soft)}

/* reveal (fail-visible: only active when JS adds .js) */
html.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
html.js .rv.in{opacity:1;transform:none}

.center{text-align:center}
.mt{margin-top:20px}
.kick{font-size:.95rem;letter-spacing:.02em;color:var(--olive);max-width:60ch}
.caption{font-size:.8rem;letter-spacing:.08em;color:var(--olive);margin-top:12px}

/* v3.1 additions: hairline lists instead of card grids, image-top cards */
.plist{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;border-top:1px solid var(--hair)}
.plist>div{padding:18px 0;border-bottom:1px solid var(--hair)}
.plist .h{font-size:.74rem;letter-spacing:.26em;color:var(--terra);font-weight:400;margin-bottom:8px}
.plist p{font-size:.98rem}
@media(max-width:720px){.plist{grid-template-columns:1fr}}
.band .split .ph::after{border-color:var(--hair-dark)}
.card.imgcard{padding:0}
.card.imgcard img.top{width:100%;height:210px;object-fit:cover}
.card.imgcard .pad{padding:20px 22px 24px}
.credline{margin-top:22px;padding-top:18px;border-top:1px solid var(--hair);font-size:.98rem;color:#4a4728}

/* hero supporting line (v3.2) */
.hero .sub{margin-top:22px;max-width:48ch;font-size:clamp(1.02rem,1.5vw,1.24rem);line-height:1.6;font-weight:300;color:rgba(249,243,226,.9)}
.hero h1{max-width:26ch}
@media(max-width:680px){.hero h1 br{display:none}}

/* deferred hero video: poster shows instantly, video fades in when ready */
.hero video.bgv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease}
.hero video.bgv.in{opacity:1}


/* PROPORTION RULE: tiles in the same row are always equal height.
   Grid items stretch; cards are flex columns so their padded body absorbs
   the slack and every image top/bottom edge lines up across the row. */
.grid2,.grid3,.grid4{align-items:stretch}
.grid2>*,.grid3>*,.grid4>*{min-width:0}
.card{display:flex;flex-direction:column}
.card.imgcard .pad{flex:1;display:flex;flex-direction:column}
.card>p:last-child,.card .pad>p:last-child{margin-bottom:0}
.phase,.tcard{height:100%}

/* every .split feature image shares one shape, so sections read proportional
   down the page instead of each image stretching to its own text column */
.svc .ph img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover}