/* =====================================================================
   SALSALITO — Boutique hotel, restaurant & spa · Burgau, Algarve
   Shared stylesheet. Built from the Visual Design Brief.
   Palette: deep cobalt + cream + brass gold · azulejo coastal aesthetic.
   ===================================================================== */

:root{
  --ink:#2A62A6;          /* cobalt primary            */
  --navy-900:#0C1C44;     /* deep background           */
  --navy-950:#0A1838;     /* footer / darkest          */
  --navy-800:#14233B;     /* split-panel dark          */
  --navy-700:#16263F;     /* restaurant panel          */
  --cream:#FBFAF4;        /* paper / light bg & text   */
  --on-light:#26303C;     /* body text on cream        */
  --on-light-2:#3a4654;   /* secondary                 */
  --on-light-3:#6a7785;   /* muted                     */
  --gold:#B08D57;         /* brass accent (on light)   */
  --gold-bright:#D8B888;  /* brighter (on dark)        */
  --blue-200:#C7DAE8;     /* light text on navy        */
  --blue-100:#D6E2EE;
  --radial-navy:radial-gradient(120% 95% at 50% 0%, #163459 0%, #0C1C44 58%, #0A1838 100%);
  --hair-dark:1px solid rgba(199,218,232,.15);
  --hair-light:1px solid rgba(22,32,46,.12);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--navy-900);
  color:var(--on-light);
  font-family:'Figtree',sans-serif;
  font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}

/* ---- shared type helpers ---- */
.serif{font-family:'Cormorant Garamond',serif;font-weight:400;}
.italic{font-style:italic;}
.eyebrow{
  font-family:'Figtree',sans-serif;font-weight:300;font-size:11px;
  letter-spacing:.46em;text-transform:uppercase;color:var(--gold);
}
.cobalt{color:var(--ink);}
.gold{color:var(--gold);}

/* ---- buttons ---- */
.btn{
  display:inline-block;font-family:'Figtree',sans-serif;font-weight:500;
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  padding:17px 40px;border-radius:3px;cursor:pointer;
  transition:background .35s ease,color .35s ease,border-color .35s ease;
}
.btn--ghost-cobalt{color:var(--ink);border:1px solid rgba(42,98,166,.4);}
.btn--ghost-cobalt:hover{background:var(--ink);color:var(--cream);}
.btn--ghost-cream{color:var(--cream);border:1px solid rgba(251,250,244,.45);}
.btn--ghost-cream:hover{background:var(--cream);color:var(--navy-800);}
.btn--solid-cream{color:var(--navy-800);background:var(--cream);}
.btn--solid-cobalt{color:var(--cream);background:var(--ink);}

/* underline-draw on hover (nav + inline links) */
.navlink{position:relative;cursor:pointer;white-space:nowrap;}
.navlink::after{
  content:'';position:absolute;left:0;right:100%;bottom:-7px;height:1px;
  background:currentColor;transition:right .35s ease;
}
.navlink:hover::after{right:0;}

/* =====================================================================
   HEADER + NAV (fixed, transparent over hero -> solid on scroll)
   ===================================================================== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;
  padding:26px 46px;color:var(--cream);
  transition:padding .4s ease,background .4s ease,box-shadow .4s ease;
}
.site-header.solid{
  padding:14px 46px;background:rgba(11,24,56,.94);
  box-shadow:0 1px 0 rgba(199,218,232,.14);
}
.header-langs{display:flex;align-items:center;gap:20px;flex:1;}
.header-langs span{
  font-family:'Figtree',sans-serif;font-size:11px;letter-spacing:.18em;
  cursor:pointer;opacity:.4;
}
.header-langs span.active{opacity:.95;}
.wordmark{text-align:center;line-height:1;flex:none;cursor:pointer;}
.wordmark .name{
  font-family:'Cormorant Garamond',serif;font-weight:500;font-size:27px;
  letter-spacing:.46em;padding-left:.46em;
}
.wordmark .sub{
  font-family:'Figtree',sans-serif;font-weight:300;font-size:8.5px;
  letter-spacing:.5em;text-transform:uppercase;margin-top:9px;opacity:.8;padding-left:.5em;
}
.header-book{flex:1;display:flex;justify-content:flex-end;}
.header-book .btn{font-size:10.5px;letter-spacing:.24em;padding:14px 28px;}

.site-nav{
  position:fixed;top:96px;left:0;right:0;z-index:30;
  display:flex;justify-content:center;flex-wrap:wrap;gap:10px 42px;
  color:var(--cream);font-family:'Figtree',sans-serif;font-weight:300;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  transition:top .4s ease,opacity .4s ease;
}
.site-nav.hidden{top:-40px;opacity:0;pointer-events:none;}
.site-nav a{opacity:.72;}
.site-nav a.active{opacity:1;}

/* mobile menu toggle (hidden on desktop) */
.nav-toggle{display:none;}

/* =====================================================================
   HERO (home) — full-bleed Ken Burns photo + azulejo edge strips
   ===================================================================== */
.hero{position:relative;height:100vh;min-height:680px;overflow:hidden;background:#0E1F4A;}
.hero-media{position:absolute;inset:0;overflow:hidden;}
.hero-media .kb{
  position:absolute;inset:-5%;background-position:center;background-size:cover;
  background-repeat:no-repeat;animation:kenburns 24s ease-in-out infinite alternate;
}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,31,74,.55) 0%,rgba(14,31,74,.12) 30%,
            rgba(14,31,74,.30) 70%,rgba(14,31,74,.72) 100%);
}
.edge{
  position:absolute;top:0;bottom:0;width:30px;z-index:2;
  background:url('edge-v.png') repeat-y;background-size:30px auto;opacity:.5;pointer-events:none;
}
.edge.left{left:0;}
.edge.right{right:0;transform:scaleX(-1);}

/* octopus landing emblem — deep cobalt ink on the cream intro band */
.ink-emblem{
  width:min(56vw,205px);aspect-ratio:736/1104;margin:0 auto 32px;
  background:url('octopus-cut.png') center/contain no-repeat;
  opacity:.92;
}
.hero-copy{
  position:absolute;left:0;right:0;bottom:84px;z-index:3;text-align:center;
  color:var(--cream);padding:0 24px;animation:floatup 1.4s ease .15s both;
}
.hero-copy .eyebrow{color:var(--cream);opacity:.88;margin-bottom:26px;}
.hero-headline{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;
  font-size:clamp(46px,7vw,108px);line-height:1;letter-spacing:.005em;
}
.hero-headline span{display:inline-block;opacity:0;animation:wordup 1s ease both;}
.scroll-cue{
  position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--cream);
}
.scroll-cue .tick{width:1px;height:34px;background:linear-gradient(rgba(251,250,244,0),rgba(251,250,244,.7));}
.scroll-cue .lbl{font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;opacity:.65;}

/* =====================================================================
   PAGE-HERO band (reused on inner pages)
   ===================================================================== */
.page-hero{
  position:relative;height:64vh;min-height:500px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;text-align:center;background:var(--navy-900);
}
.page-hero .bg{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;}
.page-hero .scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,28,68,.6),rgba(12,28,68,.32) 42%,rgba(12,28,68,.66));}
.page-hero .inner{position:relative;z-index:2;color:var(--cream);padding-top:40px;}
.page-hero .eyebrow{color:var(--cream);opacity:.85;margin-bottom:18px;}
.page-hero .crest{margin-bottom:18px;}
.page-hero h1{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;
  font-size:clamp(44px,6vw,86px);line-height:1;margin:0;
}

/* =====================================================================
   GENERIC SECTIONS
   ===================================================================== */
.section{position:relative;}
.section--cream{background:var(--cream);}
.section--navy{background:var(--radial-navy);color:var(--cream);}
.center{text-align:center;}
.wrap{max-width:1200px;margin:0 auto;}

.section-head{text-align:center;}
.section-head .crest{margin-bottom:20px;}
.section-head .eyebrow{margin-bottom:22px;}
.section-head h2{
  font-family:'Cormorant Garamond',serif;font-weight:400;
  font-size:clamp(34px,4.4vw,64px);line-height:1.05;margin:0;color:#16202E;
}
.section--navy .section-head h2{color:var(--cream);}

/* The Hotel intro (home) */
.intro{padding:190px 24px 170px;text-align:center;}
.intro .lead{
  max-width:880px;margin:0 auto;font-family:'Cormorant Garamond',serif;font-weight:400;
  font-size:clamp(26px,2.8vw,42px);line-height:1.45;color:var(--on-light);letter-spacing:.004em;
}
.lead-sm{
  max-width:860px;margin:0 auto;font-family:'Cormorant Garamond',serif;font-weight:400;
  font-size:clamp(25px,2.7vw,40px);line-height:1.45;color:var(--on-light);
}

/* arched image frame (Portuguese arch) */
.arch{
  position:relative;overflow:hidden;box-sizing:border-box;
  border:1px solid rgba(176,141,87,.55);
  border-radius:48% 48% 8px 8px / 32% 32% 8px 8px;
}
.arch .img{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;}

/* =====================================================================
   HOME · ROOMS SLIDER
   ===================================================================== */
.rooms-slider{padding:150px 46px 160px;color:var(--cream);}
.rooms-slider .grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr;align-items:stretch;}
.rooms-photo{
  position:relative;height:620px;overflow:hidden;box-sizing:border-box;
  border:1px solid rgba(216,184,136,.6);border-radius:46% 46% 12px 12px / 34% 34% 12px 12px;
}
.rooms-photo .img{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;transition:opacity .5s ease;}
.rooms-photo .caption{
  position:absolute;left:0;bottom:0;padding:30px 34px;width:100%;box-sizing:border-box;
  background:linear-gradient(0deg,rgba(10,24,56,.85),transparent);
}
.rooms-photo .caption .tag{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--blue-200);opacity:.9;}
.rooms-photo .caption .name{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:38px;line-height:1.1;margin-top:6px;}
.rooms-text{padding:48px 0 40px 76px;display:flex;flex-direction:column;justify-content:center;}
.rooms-text .price{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:29px;color:var(--gold-bright);margin-bottom:24px;}
.rooms-text .desc{font-size:16px;line-height:2;color:var(--blue-100);max-width:400px;}
.slider-controls{display:flex;align-items:center;gap:20px;margin-top:52px;}
.shell-btn{cursor:pointer;color:var(--blue-200);transition:color .35s ease,transform .35s ease;display:flex;align-items:center;justify-content:center;width:56px;height:56px;}
.shell-btn:hover{color:var(--gold-bright);transform:scale(1.09);}
.counter{display:flex;align-items:baseline;gap:7px;margin-left:10px;}
.counter .now{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:28px;color:var(--gold-bright);}
.counter .tot{font-size:12px;letter-spacing:.2em;color:var(--blue-200);opacity:.5;}

/* =====================================================================
   HOME · MOMENTS STRIP
   ===================================================================== */
.moments{padding:150px 0;}
.strip{display:flex;gap:30px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 46px 16px;scrollbar-width:none;}
.strip::-webkit-scrollbar{display:none;}
.moment{flex:0 0 auto;scroll-snap-align:center;width:470px;}
.moment .arch{height:350px;border-radius:48% 48% 8px 8px / 32% 32% 8px 8px;}
.moment .cap{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--on-light-3);margin-top:20px;}

/* =====================================================================
   SPLIT PANELS (restaurant / wellness / story)
   ===================================================================== */
.split{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:720px;}
.split--tall{min-height:720px;}
.split-text{display:flex;flex-direction:column;justify-content:center;padding:110px 7.5vw;}
.split-text.dark{background:var(--navy-800);color:var(--cream);}
.split-text.darker{background:var(--navy-800);color:var(--cream);}
.split-text.light{background:var(--cream);color:#16202E;}
.split-text .eyebrow{margin-bottom:28px;}
.split-text h2{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(40px,4.6vw,62px);line-height:1.03;margin:0;}
.split-text.light h2{color:var(--ink);}
.split-text p{font-size:16px;line-height:2;margin:34px 0 0;max-width:440px;}
.split-text.dark p{color:var(--blue-200);}
.split-text.light p{color:var(--on-light-2);}
.split-text .actions{display:flex;gap:18px;flex-wrap:wrap;margin-top:44px;}
.split-media{position:relative;overflow:hidden;background:#0E1F4A;}
.split-media img{width:100%;height:100%;object-fit:cover;}

/* curtain wipe target */
[data-curtain] img,[data-curtain].arch .img{will-change:clip-path;}

/* =====================================================================
   NEWSLETTER + INSTAGRAM (home)
   ===================================================================== */
.newsletter{text-align:center;padding:150px 24px;color:var(--cream);}
.newsletter .crest{margin-bottom:22px;}
.newsletter h2{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;font-size:clamp(32px,3.8vw,52px);margin:0 0 46px;line-height:1.1;}
.news-field{display:flex;align-items:center;max-width:470px;margin:0 auto;border-bottom:1px solid rgba(199,218,232,.4);}
.news-field input{
  flex:1;background:transparent;border:0;outline:0;color:var(--cream);
  font-family:'Figtree',sans-serif;font-weight:300;font-size:15px;padding:18px 4px;
}
.news-field input::placeholder{color:#9fb2c4;}
.news-field .join{font-weight:500;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-bright);padding:18px 4px;cursor:pointer;}

.insta{background:var(--cream);padding:40px 0 0;}
.insta .head{text-align:center;padding:0 24px 44px;}
.insta .head .eyebrow{letter-spacing:.42em;}
.insta .head .handle{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:34px;color:#16202E;margin-top:12px;}
.insta-grid{display:grid;grid-template-columns:repeat(6,1fr);}
.insta-grid .cell{position:relative;padding-top:100%;overflow:hidden;}
.insta-grid .cell .img{position:absolute;inset:0;background-position:center;background-size:cover;transition:transform .6s ease;}
.insta-grid .cell:hover .img{transform:scale(1.06);}

/* =====================================================================
   ROOMS PAGE GRID / EXPERIENCES GRID / VALUES
   ===================================================================== */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:64px 40px;max-width:1280px;margin:0 auto;}
.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:70px 56px;max-width:1100px;margin:0 auto;}
.card .arch{height:380px;border-radius:48% 48% 8px 8px / 30% 30% 8px 8px;border-color:rgba(176,141,87,.5);}
.card.exp .arch{height:360px;border-radius:42% 42% 8px 8px / 24% 24% 8px 8px;border-color:rgba(176,141,87,.5);}
.card .meta{text-align:center;margin-top:24px;}
.card .meta .tag{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:#9a8050;margin-bottom:10px;}
.card .meta .name{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:30px;color:#16202E;}
.card .meta .desc{font-size:14px;line-height:1.85;color:var(--on-light-2);margin:12px auto 16px;max-width:300px;}
.card.exp .meta .desc{font-size:15px;max-width:360px;margin-bottom:0;}
.card .meta .price{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:21px;color:var(--gold);}

.values{display:grid;grid-template-columns:repeat(3,1fr);gap:60px;max-width:1040px;margin:0 auto;}
.values .v-name{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:30px;color:var(--ink);margin-bottom:14px;}
.values .v-desc{font-size:15px;line-height:1.9;color:var(--on-light-2);}

/* =====================================================================
   LIST ROWS (menu / treatments / events)
   ===================================================================== */
.list{max-width:760px;margin:0 auto;}
.list .label{text-align:center;font-size:11px;letter-spacing:.46em;text-transform:uppercase;color:var(--gold);margin-bottom:40px;}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:24px 0;border-bottom:var(--hair-light);}
.row .r-name{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:25px;color:#16202E;}
.row .r-desc{font-size:14px;color:var(--on-light-3);margin-top:6px;}
.row .r-price{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:22px;color:var(--gold);white-space:nowrap;}
.row .r-right{display:flex;align-items:baseline;gap:22px;}
.row .r-dur{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#9a8050;}

.events{max-width:820px;margin:0 auto;}
.event{display:flex;gap:40px;align-items:baseline;padding:30px 0;border-bottom:1px solid rgba(199,218,232,.16);}
.event .date{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:28px;color:var(--gold-bright);min-width:96px;}
.event .e-title{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:28px;line-height:1.2;}
.event .e-desc{font-size:15px;line-height:1.8;color:var(--blue-200);opacity:.85;margin-top:8px;}

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer{position:relative;overflow:hidden;background:var(--navy-950);color:var(--blue-200);padding:104px 46px 0;}
/* ghosted WHITE ship blended into the bottom of the page */
.site-footer::before{
  content:'';position:absolute;pointer-events:none;z-index:0;
  left:50%;bottom:0;transform:translateX(-50%);
  width:min(70vw,300px);height:min(98vw,420px);
  background:url('ship-cut.png') center bottom/contain no-repeat;
  filter:brightness(0) invert(1);          /* pure white linework */
  opacity:.06;
  -webkit-mask-image:radial-gradient(72% 68% at 50% 42%, #000 22%, transparent 76%);
  mask-image:radial-gradient(72% 68% at 50% 42%, #000 22%, transparent 76%);
}
.site-footer > *{position:relative;z-index:1;}
.footer-grid{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr 1fr 1.3fr;gap:48px;
  border-top:var(--hair-dark);border-bottom:var(--hair-dark);padding:54px 0;}
.footer-grid h4{color:var(--gold);letter-spacing:.26em;text-transform:uppercase;font-size:10.5px;font-weight:400;margin:0 0 18px;}
.footer-grid .col p,.footer-grid .col a{display:block;font-size:13.5px;line-height:1.95;opacity:.78;}
.footer-grid .col.dense a,.footer-grid .col.dense p{line-height:2.25;}
.footer-awards{display:flex;justify-content:center;align-items:center;gap:48px;flex-wrap:wrap;padding:44px 0 10px;}
.award{text-align:center;}
.award .t{font-family:'Cormorant Garamond',serif;font-size:15px;letter-spacing:.2em;color:var(--blue-200);}
.award .s{font-size:9px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin-top:6px;}
.award.stars .t{letter-spacing:.1em;}
.dot{width:4px;height:4px;border-radius:50%;background:rgba(176,141,87,.55);}
.copyright{text-align:center;font-size:10.5px;letter-spacing:.12em;opacity:.45;padding:30px 0 34px;}

/* =====================================================================
   SCROLL REVEAL + KEYFRAMES
   ===================================================================== */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s ease;}
[data-reveal].in{opacity:1;transform:translateY(0);}
[data-curtain] img{clip-path:inset(0 100% 0 0);transition:clip-path 1.3s cubic-bezier(.62,0,.16,1);}
[data-curtain].in img{clip-path:inset(0 0 0 0);}

@keyframes floatup{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
@keyframes wordup{from{opacity:0;transform:translateY(34px);}to{opacity:1;transform:translateY(0);}}
@keyframes kenburns{from{transform:scale(1.03) translate(0,0);}to{transform:scale(1.13) translate(-1.6%,-1.1%);}}

@media (prefers-reduced-motion:reduce){
  .hero-media .kb{animation:none;}
  .hero-headline span{animation:none;opacity:1;}
  [data-reveal]{transition:none;}
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:980px){
  .rooms-slider .grid{grid-template-columns:1fr;gap:48px;}
  .rooms-photo{height:460px;}
  .rooms-text{padding:0;}
  .split{grid-template-columns:1fr;}
  .split-media{min-height:420px;}
  .split-text{padding:80px 8vw;}
  .cards-3{grid-template-columns:repeat(2,1fr);gap:48px 32px;}
  .insta-grid{grid-template-columns:repeat(3,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px;}
}

@media (max-width:720px){
  .site-header{padding:18px 22px;}
  .site-header.solid{padding:12px 22px;}
  .header-langs{display:none;}
  .wordmark .name{font-size:21px;letter-spacing:.36em;}
  .header-book{display:none;}
  /* mobile nav drawer */
  .nav-toggle{
    display:flex;flex:1;justify-content:flex-end;background:none;border:0;color:var(--cream);
    font-family:'Figtree',sans-serif;font-size:11px;letter-spacing:.24em;text-transform:uppercase;cursor:pointer;
  }
  .site-nav{
    top:0;left:0;right:0;bottom:0;height:100vh;flex-direction:column;justify-content:center;
    gap:28px;background:rgba(11,24,56,.98);transform:translateY(-100%);opacity:1;
    transition:transform .45s ease;font-size:13px;padding:60px 24px;
  }
  .site-nav.open{transform:translateY(0);}
  .site-nav.hidden{top:0;opacity:1;}      /* keep drawer usable when condensed */
  .site-nav a{opacity:.85;}
  .intro{padding:120px 22px 100px;}
  .moments{padding:100px 0;}
  .rooms-slider,.section{padding-left:22px;padding-right:22px;}
  .cards-3,.cards-2,.values{grid-template-columns:1fr;}
  .insta-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr;}
  .split-text .actions{flex-direction:column;}
  .event{gap:18px;flex-wrap:wrap;}
}