/* Sole Villa Chateau — landing page
   Tokens from Figma: brand/blue, brand/coral, brand/orange, neutral/*, surface/* */
/* Drop the licensed font files into assets/fonts/ to activate Melkia Starlight */
@font-face{font-family:"Melkia Starlight";src:url("../assets/fonts/MelkiaStarlight.woff2") format("woff2"),url("../assets/fonts/MelkiaStarlight.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}

:root{
  --blue:#7ba6c9; --coral:#ff8989; --orange:#ef9a47;          /* brand: borders & accents */
  --blue-text:#43709a;     /* 5.1:1 on white - links, nav, small headings, footer bg */
  --blue-display:#5b87ad;  /* 3.8:1 - large headings (AA large text) */
  --coral-strong:#c9474f;  /* 4.7:1 with white text - buttons, active tab */
  --orange-text:#a8591a;   /* 4.9:1 - eyebrows, review names */
  --text:#57534e;          /* 7.3:1 - body copy */
  --n400:#a6a29d; --n600:#68645f; --n900:#242220;
  --subtle:#fafaf9; --border:#e7e5e2; --white:#fff;
  --display:"Melkia Starlight","Cormorant Garamond",Georgia,serif;
  --sans:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --pad:80px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;font-family:var(--sans);font-size:16px;line-height:1.65;color:var(--text);background:var(--white);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,p,figure,blockquote,ul,address{margin:0;padding:0}
ul{list-style:none}
address{font-style:normal}
[hidden]{display:none!important}

/* type */
.eyebrow{font-size:14px;line-height:normal;font-weight:600;color:var(--orange-text);letter-spacing:.08em}
.display{font-family:var(--display);font-weight:400;font-size:60px;line-height:1.08;color:var(--blue-display)}
.display-2{font-family:var(--display);font-weight:400;font-size:36px;line-height:1.2;color:var(--blue-display)}
.body,.lead{font-size:16px;line-height:1.65;color:var(--text);max-width:72ch}
.lead{font-size:18px}
.strong{font-weight:600}
.head{display:flex;flex-direction:column;gap:12px}
.head .eyebrow{margin-bottom:4px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--coral-strong);color:var(--white);font:600 16px/normal var(--sans);padding:12px 40px;border:0;cursor:pointer;text-decoration:none;white-space:nowrap;transition:filter .15s}
.btn:hover{filter:brightness(.92)}
.btn:focus-visible,.tab:focus-visible,.menu-toggle:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:var(--subtle);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 40px}
.brand{display:flex}
.brand-icon,.mobile-bar,.mobile-menu{display:none}
.nav{display:flex;align-items:center;gap:40px}
.nav a:not(.btn){font-weight:600;color:var(--blue-text);text-decoration:none;line-height:normal}
.nav a:not(.btn):hover{color:var(--coral-strong);text-decoration:underline}

/* hero */
.hero{display:flex;align-items:center;gap:80px;padding-left:var(--pad);background:var(--white)}
.hero-copy{flex:0 0 620px;max-width:620px;display:flex;flex-direction:column;gap:32px;padding:72px 0}
.hero-logo{display:none}
.hero .head{gap:16px}
.hero .head .eyebrow{margin-bottom:4px}
.hero .lead{margin-top:0}
.cta-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.or-call{color:var(--n600)}
.or-call a{font-weight:600;text-decoration:none}
.hero-img{flex:1 1 0;min-width:0;align-self:stretch}
.hero-img{display:flex}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:46% 50%;min-height:405px}

/* sections */
.section{padding:72px var(--pad);display:flex;flex-direction:column;gap:40px;max-width:1440px;margin:0 auto;width:100%}
.section.alt{background:var(--subtle);max-width:none;padding-left:max(var(--pad),calc((100% - 1440px)/2 + var(--pad)));padding-right:max(var(--pad),calc((100% - 1440px)/2 + var(--pad)))}
.cards,.reviews{display:flex;gap:40px}
.card,.review{flex:1 1 0;min-width:0;border-top:4px solid var(--blue);padding:40px;background:var(--subtle)}
.card{display:flex;flex-direction:column;gap:20px}
.card-top{display:flex;flex-direction:column;gap:20px}
.card h3{font:600 18px/1.3 var(--sans);color:var(--blue-text);text-transform:uppercase;letter-spacing:.02em}
.review{background:var(--white);display:flex;flex-direction:column;gap:20px}
.review figcaption{font-weight:600;color:var(--orange-text);line-height:normal}

/* gallery */
.tabs{display:flex}
.tab{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 40px;background:transparent;border:0;border-bottom:2px solid var(--coral-strong);color:var(--blue-text);font:600 16px/normal var(--sans);cursor:pointer;white-space:nowrap}
.tab .tab-icon{display:none}
.tab.is-active{background:var(--coral-strong);color:var(--white)}
.tab:not(.is-active):hover{background:var(--subtle)}
.panel{display:flex;flex-direction:column;gap:40px}
.shots{display:flex;gap:40px;align-items:flex-start}
.shots img{flex:1 1 0;min-width:0;width:100%;aspect-ratio:3/2;object-fit:cover}
.shots img.crop{aspect-ratio:620/414;object-position:50% 50%}
.shots-3{gap:20px}
.shots-1{justify-content:center}
.shots-1 img{flex:0 1 420px;aspect-ratio:2/3;max-height:620px}

/* split sections */
.split{flex-direction:row;gap:40px;align-items:flex-start}
.split-text{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:12px}
.split-img{flex:1 1 0;min-width:0}
.split-img img{width:100%;aspect-ratio:3/2;object-fit:cover}
.amenities,.places{display:flex;flex-direction:column;gap:20px;padding-top:20px}
.amenities li{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border);padding-bottom:12px}
.amenities img{flex:none}
.places li{display:flex;flex-direction:column;gap:2px;border-bottom:1px solid var(--border);padding-bottom:12px}
.places strong{font-weight:600;line-height:normal;color:var(--n900)}
.split-loc .split-text{flex:0 0 680px}
.split-loc .split-img{flex:1 1 0;align-self:stretch}
.split-loc .split-img{display:flex}
.split-loc .split-img img{height:100%;min-height:473px;aspect-ratio:auto;object-position:59% 50%}

/* form */
.split-form{align-items:flex-start}
.form{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:20px}
.row{display:flex;gap:20px}
.field{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:4px}
.field label{line-height:26px;color:var(--text);font-weight:500}
.field input,.field textarea{width:100%;background:var(--subtle);border:1px solid #c9c5c0;padding:8px 16px;font:400 16px/normal var(--sans);color:var(--n900);border-radius:0;appearance:none;-webkit-appearance:none}
.field input{height:44px}
.field textarea{min-height:72px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--n600);opacity:1}
.field input:invalid.touched,.field textarea:invalid.touched{border-color:var(--coral)}
.date{position:relative}
.date input{height:44px;padding-right:48px}
.date input::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.date img{position:absolute;right:16px;top:10px;pointer-events:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.form-status{line-height:22px;font-weight:500}
.form-status.ok{color:#3d7a52}
.form-status.err{color:#c0392b}
.btn[disabled]{opacity:.6;cursor:wait}

/* footer */
.site-footer{background:var(--blue-text);color:var(--white);padding:48px var(--pad);display:flex;flex-direction:column;gap:0}
.foot-top{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:24px}
.foot-brand{display:flex;align-items:center;gap:8px}
.foot-brand address{line-height:1.6}
.foot-brand a{font-weight:600;text-decoration:none}
.foot-nav{display:flex;align-items:center;gap:40px}
.foot-nav a:not(.btn){font-weight:600;text-decoration:none;color:var(--white)}
.foot-nav a:not(.btn):hover{text-decoration:underline}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px}
.social{display:flex;align-items:center;gap:20px}
.social a{display:flex}

/* ============ tablet ============ */
@media (max-width:1180px){
  :root{--pad:40px}
  .hero{gap:40px;padding-left:var(--pad)}
  .hero-copy{flex-basis:50%}
  .display{font-size:48px}
  .nav{gap:24px}
  .tab{padding:10px 12px}
  .split-loc .split-text{flex-basis:55%}
  .foot-nav{gap:24px}
}

/* ============ mobile ============ */
@media (max-width:860px){
  :root{--pad:16px}
  html{scroll-padding-top:70px}
  .site-header{padding:0 16px 0 0;flex-wrap:wrap}
  .brand .brand-full,.nav{display:none}
  .brand .brand-icon{display:block;width:60px;height:50px}
  .mobile-bar{display:flex;flex:1;justify-content:flex-end;align-items:center;gap:8px}
  .btn-nav{padding:4px 8px}
  .menu-toggle{display:flex;align-items:center;justify-content:center;padding:4px;background:transparent;border:1px solid var(--coral);cursor:pointer}
  .mobile-menu{display:flex;flex-direction:column;width:100%;border-top:1px solid var(--border);margin:0 -16px 0 0;padding:8px 0}
  .mobile-menu a{padding:12px 16px;font-weight:600;color:var(--blue);text-decoration:none}
  .mobile-menu[hidden]{display:none!important}

  .hero{flex-direction:column;align-items:stretch;gap:16px;padding:16px 0 0}
  .hero-copy{flex:none;max-width:none;padding:8px 20px 16px;align-items:center;gap:24px}
  .hero-logo{display:block;width:262px;height:auto}
  .hero .head{align-self:stretch}
  .display{font-size:36px;line-height:1.12}
  .display-2{font-size:30px}
  .lead{font-size:17px}
  .cta-row{flex-direction:column;gap:16px;justify-content:center}
  .hero-img{align-self:auto}
  .hero-img img{min-height:0;aspect-ratio:532/405;height:auto}

  .section{padding:48px 20px;gap:24px}
  .section.alt{padding-left:20px;padding-right:20px}
  .cards,.reviews{flex-direction:column;gap:16px}
  .cards{gap:16px}
  .card{padding:20px}
  .card-top{flex-direction:row;align-items:center;gap:20px}
  .card h3{flex:1}
  .reviews{gap:40px}

  .tabs{flex-wrap:wrap}
  .tab{padding:10px 8px}
  .tab span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tab .tab-icon{display:block}
  .panel{gap:16px}
  .shots,.shots-3{flex-direction:column;gap:16px}
  .shots-1 img{flex:none;max-height:none;width:100%;aspect-ratio:2/3}

  .split,.split-loc,.split-form{flex-direction:column;align-items:stretch;gap:16px}
  .split-loc .split-text{flex:none}
  .split-loc .split-img img{min-height:0;aspect-ratio:411/397;height:auto}
  .split-img{flex:none}
  .row{flex-direction:column;gap:20px}

  .site-footer{padding:40px 20px;gap:16px}
  .foot-top{flex-direction:column;gap:16px;justify-content:center;text-align:center}
  .foot-brand{flex-direction:column}
  .foot-nav{flex-wrap:wrap;justify-content:center;gap:16px}
  .foot-bottom{flex-direction:column;gap:8px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}