*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f4f0e8;color:#1c1f1d;font-family:Manrope,sans-serif;line-height:1.7}img{display:block;width:100%}a{color:inherit;text-decoration:none}.header{position:fixed;z-index:20;top:0;left:0;width:100%;height:92px;padding:0 4vw;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;color:#fff;transition:.35s}.header.scrolled{height:72px;background:#f4f0e8ee;color:#1c1f1d;backdrop-filter:blur(14px)}.logo img{width:150px;max-height:50px;object-fit:contain}.header nav{display:flex;gap:2rem;font-size:.75rem}.header-actions{justify-self:end;display:flex;gap:1rem;align-items:center}.header button{background:none;border:0;color:inherit}.book{display:inline-flex;padding:14px 23px;border:1px solid #1c1f1d;background:#1c1f1d;color:#fff;text-transform:uppercase;letter-spacing:.12em;font-size:.68rem}.book.small{background:transparent;border-color:#fff}.header.scrolled .book.small{border-color:#1c1f1d}.book.light{background:#fff;color:#1c1f1d;border-color:#fff}.menu{display:none}.mobile-menu{display:none}.hero{height:100vh;min-height:700px;position:relative;background:url('assets/hero.jpg') center/cover;display:flex;align-items:flex-end;padding:0 8vw 10vh;color:#fff}.shade{position:absolute;inset:0;background:linear-gradient(to top,#08100ed0,#0002 60%)}.hero-copy,.booking-content{position:relative;z-index:2;max-width:850px}.kicker{font-size:.68rem;letter-spacing:.25em;font-weight:600;text-transform:uppercase}h1,h2,h3{font-family:'Playfair Display',serif;font-weight:500;line-height:1.08;margin:0}h1{font-size:clamp(4rem,8vw,8rem)}h2{font-size:clamp(3rem,5.5vw,5.8rem)}h3{font-size:1.5rem}.hero-copy>p:not(.kicker){max-width:620px;margin:1.5rem 0 2rem}.section{padding:9rem 8vw}.manifesto{text-align:center}.manifesto h2{font-style:italic}.lead{max-width:700px;margin:2rem auto;color:#777}.cinema{position:relative;height:80vh;color:#fff}.cinema img{height:100%;object-fit:cover}.cinema-text{position:absolute;z-index:2;left:8vw;bottom:8vh}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:9vw}.copy{color:#777}.stats{display:grid;grid-template-columns:repeat(5,1fr);margin:6rem 0;border-block:1px solid #0002}.stats div{text-align:center;padding:2rem;border-right:1px solid #0002}.stats b{font:500 2.4rem 'Playfair Display'}.stats small{display:block;color:#777}.duo{display:grid;grid-template-columns:1.2fr .8fr;gap:1rem}.duo img{height:620px;object-fit:cover}.duo img:last-child{height:500px;margin-top:120px}.dark{background:#202421;color:#fff}.dark .copy{color:#ffffffaa}.wide-img{height:70vh;object-fit:cover;margin-top:5rem}.room-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem 1rem;margin-top:4rem}.room-grid article:nth-child(even){margin-top:7rem}.room-grid img{height:580px;object-fit:cover}.room-grid h3{margin-top:1rem}.pool-story{background:#d9d1c4;padding:0 8vw 9rem}.pool-card{display:grid;grid-template-columns:1fr 1fr;background:#f4f0e8;align-items:center}.pool-card img{height:760px;object-fit:cover}.pool-card div{padding:7vw}.details-grid{display:grid;grid-template-columns:1fr .8fr 1fr;gap:1rem;align-items:center}.details-grid img{height:620px;object-fit:cover}.details-grid div{padding:2rem}.masonry{columns:3;column-gap:1rem;margin-top:4rem}.masonry img{margin-bottom:1rem;break-inside:avoid}.distances div{display:flex;justify-content:space-between;padding:1rem 0;border-bottom:1px solid #0002}.booking{height:85vh;position:relative;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff}.booking>img{position:absolute;inset:0;height:100%;object-fit:cover}.booking-content>img{width:220px;height:80px;object-fit:contain;margin:auto}.booking-content p{max-width:650px;margin:2rem auto}footer{text-align:center;padding:5rem}footer img{width:180px;height:70px;object-fit:contain;margin:auto}.reveal{opacity:0;transform:translateY(25px);transition:.9s}.reveal.visible{opacity:1;transform:none}@media(max-width:900px){.header nav{display:none}.menu{display:block}.two-col{grid-template-columns:1fr}.stats{grid-template-columns:repeat(3,1fr)}.details-grid{grid-template-columns:1fr 1fr}.masonry{columns:2}}@media(max-width:650px){.header{padding:0 5vw}.book.small{display:none}.section{padding:6rem 6vw}.hero{padding:0 6vw 8vh}.hero h1{font-size:3.6rem}.stats{grid-template-columns:1fr 1fr}.duo,.room-grid,.pool-card,.details-grid{grid-template-columns:1fr}.duo img,.duo img:last-child,.room-grid img,.pool-card img,.details-grid img{height:430px;margin:0}.room-grid article:nth-child(even){margin:0}.masonry{columns:1}}

/* Exact uploaded The Josefine logo */
.logo img,
.booking-logo,
footer img {
  object-fit: contain;
}

.header .logo img {
  width: 175px;
  max-height: 58px;
  filter: none;
}

.header.scrolled .logo img {
  filter: invert(1);
}

.booking-logo {
  width: 250px;
  max-height: 100px;
  filter: none;
}

footer img {
  width: 220px;
  max-height: 90px;
  filter: invert(1);
}

@media (max-width:700px){
  .header .logo img{width:145px}
  .booking-logo{width:210px}
}


/* ============================================================
   THE JOSEFINE – BRAND TYPOGRAPHY & LOGO UPDATE
   ============================================================ */

/* Typography inspired by the supplied handwritten The Josefine logo */
body,
button,
input,
textarea,
select {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: 1.08rem;
  letter-spacing: .015em;
}

h1, h2, h3,
.header nav,
.mobile-menu,
.kicker,
.book,
.stats b,
.stats small,
.room-grid h3,
.distances b,
footer {
  font-family: "Allura", cursive;
  font-weight: 400;
}

/* Main display typography: deliberately elegant and handwritten */
h1 {
  font-size: clamp(5.3rem, 10vw, 10rem);
  line-height: .92;
  letter-spacing: 0;
}
h2 {
  font-size: clamp(4.1rem, 7vw, 7.2rem);
  line-height: .98;
  letter-spacing: 0;
}
h3 {
  font-size: 2.4rem;
  line-height: 1;
}

.header nav {
  font-size: 1.55rem;
  letter-spacing: .01em;
  gap: 2.3rem;
}
.header-actions,
.header button,
.book {
  font-family: "Cormorant Garamond", Georgia, serif;
}
.book {
  font-size: .9rem;
  letter-spacing: .12em;
}

.kicker {
  font-size: 1.65rem;
  letter-spacing: .025em;
  text-transform: none;
  font-weight: 400;
}

.copy,
.lead,
.hero-copy > p:not(.kicker),
.booking-content p,
.pool-card p,
.details-grid p {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.23rem;
  line-height: 1.65;
}

/* Much larger exact logo */
.header {
  height: 128px;
  padding-left: 3.2vw;
  padding-right: 3.2vw;
}
.header.scrolled {
  height: 96px;
}
.header .logo {
  display: flex;
  align-items: center;
  height: 100%;
}
.header .logo img {
  width: 330px !important;
  max-height: 104px !important;
  object-fit: contain;
  object-position: left center;
  filter: none !important;
}

/* When nav becomes light after scrolling, swap white logo to dark visually */
.header.scrolled .logo img {
  content: url("assets/the-josefine-logo-dark.png");
  filter: none !important;
}

.booking-content > img {
  width: 430px !important;
  height: 150px !important;
  max-width: 75vw;
  object-fit: contain;
  margin: 0 auto 1.2rem;
  filter: none !important;
}

footer img {
  width: 320px !important;
  height: 120px !important;
  object-fit: contain;
  margin: 0 auto 1rem;
  filter: none !important;
}

/* Give header enough room for the larger logo */
.hero {
  padding-top: 128px;
}

/* Keep small metadata readable while matching the brand */
.stats small {
  font-size: 1.25rem;
  letter-spacing: .01em;
}
.stats b {
  font-size: 3.3rem;
}
.room-grid h3 {
  font-size: 2.25rem;
}

/* Mobile */
@media (max-width: 900px) {
  .header {
    height: 104px;
  }
  .header.scrolled {
    height: 82px;
  }
  .header .logo img {
    width: 255px !important;
    max-height: 82px !important;
  }
  .mobile-menu {
    font-family: "Allura", cursive;
    font-size: 3rem;
  }
}

@media (max-width: 650px) {
  .header {
    height: 92px;
  }
  .header .logo img {
    width: 205px !important;
    max-height: 68px !important;
  }
  h1 {
    font-size: 4.7rem !important;
  }
  h2 {
    font-size: 3.9rem;
  }
  .kicker {
    font-size: 1.35rem;
  }
  .booking-content > img {
    width: 300px !important;
    height: 110px !important;
  }
  footer img {
    width: 260px !important;
    height: 95px !important;
  }
}

/* FINAL TYPOGRAPHY: BRANDON GROTESQUE / BRANDON GROTESK */
html, body, h1, h2, h3, h4, h5, h6, p, a, span, div, section, article, aside,
nav, header, footer, button, input, textarea, select, option, label, ul, ol, li,
strong, b, em, small, .kicker, .book, .stats b, .stats small, .room-grid h3,
.distances b, .header nav, .mobile-menu, .copy, .lead, .hero-copy,
.booking-content, .pool-card, .details-grid {
  font-family: "Brandon Grotesque", "Brandon Grotesk", "Avenir Next", Avenir,
               "Helvetica Neue", Arial, sans-serif !important;
}
h1, h2, h3, h4, h5, h6 { font-weight: 400; letter-spacing: .01em; }
.header nav, .kicker, .book { font-weight: 500; letter-spacing: .08em; }
body, p, .copy, .lead { font-weight: 400; }

/* Zartere Headlines */
h1, h2, h3 { font-weight: 300 !important; }

/* Headline refinement requested */
h1, h2, h3, .hero h1, .hero h2 {
  font-weight: 500 !important;
}
.hero h1, .hero h2 {
  font-size: clamp(2.15rem, 4.6vw, 4.65rem) !important;
  line-height: 0.98 !important;
  max-width: min(760px, 72vw) !important;
}
section:not(.hero) h1,
section:not(.hero) h2 {
  font-size: clamp(2rem, 3.7vw, 3.85rem) !important;
  line-height: 1.04 !important;
}
/* Keep first-page headline clear of the logo/header area */
.hero-copy, .hero .copy, .hero-content {
  padding-top: clamp(7rem, 15vh, 11rem) !important;
}
@media (max-width: 800px) {
  .hero h1, .hero h2 {
    font-size: clamp(2rem, 9vw, 3.25rem) !important;
    max-width: 92vw !important;
  }
  .hero-copy, .hero .copy, .hero-content {
    padding-top: 8rem !important;
  }
}

/* Tiny headline size increase */
.hero h1, .hero h2 {
  font-size: clamp(2.2rem, 4.75vw, 4.8rem) !important;
}
section:not(.hero) h1,
section:not(.hero) h2 {
  font-size: clamp(2.05rem, 3.82vw, 3.98rem) !important;
}
@media (max-width:800px) {
  .hero h1, .hero h2 {
    font-size: clamp(2.05rem, 9.2vw, 3.35rem) !important;
  }
}


/* Availability calendar */
.availability-section{background:#f4f0e8}
.availability-intro{max-width:850px;margin-bottom:4rem}
.availability-copy{max-width:680px;color:#777;margin-top:1.5rem}
.calendar-shell{max-width:980px;margin:0 auto;border-top:1px solid #0002;border-bottom:1px solid #0002;padding:2rem 0 2.5rem}
.calendar-toolbar{display:grid;grid-template-columns:56px 1fr 56px;align-items:center;margin-bottom:1.6rem}
.calendar-title{text-align:center;font-size:1.45rem;font-weight:500;letter-spacing:.05em}
.calendar-nav{width:48px;height:48px;border:1px solid #0003;background:transparent;cursor:pointer;font-size:1.25rem}
.calendar-weekdays,.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.calendar-weekdays{margin-bottom:6px}
.calendar-weekdays span{text-align:center;font-size:.78rem;letter-spacing:.08em;color:#777;padding:.7rem .2rem}
.calendar-day{min-height:96px;border:1px solid #0002;padding:.7rem;display:flex;flex-direction:column;justify-content:space-between;background:#fff8}
.calendar-day span{font-size:1.05rem;font-weight:500}
.calendar-day small{font-size:.7rem;letter-spacing:.06em}
.calendar-day.busy{background:#d8d1c6;color:#777}
.calendar-day.free{background:#fff}
.calendar-day.empty{border-color:transparent;background:transparent}
.calendar-legend{display:flex;gap:1.5rem;margin-top:1.3rem;font-size:.82rem;color:#777}
.legend-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:.45rem}
.legend-dot.free{background:#fff;border:1px solid #999}
.legend-dot.busy{background:#b7aea1}
.calendar-status{font-size:.8rem;color:#777;margin:1rem 0 0}
.calendar-status.ok{color:#56624f}
.calendar-status.warning{color:#8a7256}
.availability-actions{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;margin-top:2rem}
.text-link-dark{border-bottom:1px solid currentColor;padding-bottom:.2rem}
@media(max-width:650px){
  .calendar-day{min-height:68px;padding:.45rem}
  .calendar-day small{display:none}
  .calendar-toolbar{grid-template-columns:44px 1fr 44px}
  .calendar-nav{width:40px;height:40px}
  .calendar-title{font-size:1.15rem}
  .calendar-weekdays span{font-size:.68rem}
}


/* ============================================================
   CINEMATIC WARM PHOTO STYLE – matched to the celebration image
   ============================================================ */

/* Unified warm, slightly nostalgic rendering for photography */
.hero,
.cinema img,
.duo img,
.wide-img,
.room-grid img,
.pool-card img,
.details-grid img,
.masonry img,
.booking > img,
.celebration-page > img {
  filter: sepia(.16) saturate(.88) contrast(1.05) brightness(.96) hue-rotate(-6deg);
}

/* Keep logos untouched */
.logo img,
.booking-content > img,
footer img {
  filter: none !important;
}

/* Subtle warm veil over large hero-style imagery */
.hero::after,
.cinema::after,
.celebration-page::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(210,165,105,.06), rgba(74,46,24,.12));
  z-index:1;
}

/* Ensure text remains above grading overlays */
.hero-copy,
.cinema-text,
.celebration-content {
  position:relative;
  z-index:3;
}

/* New full-page celebration section */
.celebration-page {
  position:relative;
  height:100vh;
  min-height:700px;
  overflow:hidden;
  color:#fff;
  display:flex;
  align-items:flex-end;
}
.celebration-page > img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.celebration-shade {
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(to top, rgba(28,20,15,.66) 0%, rgba(28,20,15,.08) 58%, rgba(28,20,15,.02) 100%);
}
.celebration-content {
  padding:0 8vw 10vh;
  max-width:980px;
}
.celebration-content h2 {
  color:#fff;
  margin:0;
  max-width:900px;
}
@media(max-width:650px){
  .celebration-page{min-height:620px}
  .celebration-content{padding:0 6vw 8vh}
}


/* Page 2 headline placement correction */
#architecture .cinema-text,
#architecture .section-head,
#architecture .overlay-content {
  top: 0 !important;
  bottom: auto !important;
  align-self: flex-start !important;
  margin-top: clamp(90px, 11vh, 145px) !important;
}

/* Stronger warm / nostalgic photographic treatment */
.hero,
.cinema img,
.duo img,
.wide-img,
.room-grid img,
.pool-card img,
.details-grid img,
.masonry img,
.booking > img,
.celebration-page > img {
  filter: sepia(.28) saturate(.78) contrast(1.04) brightness(.95) hue-rotate(-9deg) !important;
}

/* Golden analogue-style veil */
.hero::after,
.cinema::after,
.celebration-page::after {
  background:
    linear-gradient(180deg, rgba(222,174,108,.12), rgba(92,57,30,.18)),
    linear-gradient(90deg, rgba(255,224,177,.055), rgba(111,71,39,.055)) !important;
}

/* Warm tone for smaller photographic blocks too */
.duo,
.room-grid,
.pool-card,
.details-grid,
.masonry,
.booking {
  position: relative;
}


/* FINAL PAGE 2 FIX: headline above image, not over/below it */
#architecture {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

#architecture .cinema-text,
#architecture .section-head,
#architecture .overlay-content {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  order: -1 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(72px, 8vw, 120px) 7vw clamp(30px, 4vw, 54px) !important;
  transform: none !important;
  color: #1d1f1c !important;
  z-index: 5 !important;
}

#architecture .cinema-text h2,
#architecture .section-head h2,
#architecture .overlay-content h2 {
  color: #1d1f1c !important;
  margin: 0 !important;
}

#architecture > img,
#architecture .cinema-media,
#architecture .cinema-image {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: min(78vh, 900px) !important;
  object-fit: cover !important;
  order: 2 !important;
}

#architecture::after {
  display: none !important;
}


/* PAGE 2 – actual headline block */
.manifesto.section {
  position: relative !important;
  z-index: 10 !important;
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  padding: clamp(90px, 9vw, 135px) 8vw clamp(28px, 3vw, 44px) !important;
  margin: 0 !important;
  background: #f4f0e8 !important;
  overflow: visible !important;
}

.manifesto.section h2 {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  max-width: 1250px !important;
  color: #1c1f1d !important;
  z-index: 11 !important;
}

.manifesto.section + .cinema {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 0 !important;
}

@media (max-width:650px) {
  .manifesto.section {
    padding: 88px 6vw 26px !important;
  }
}


/* THE VIEW – headline overlay directly ON the second image */
.cinema {
  position: relative !important;
  overflow: hidden !important;
}

.cinema > img {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.cinema .cinema-text {
  position: absolute !important;
  left: 8vw !important;
  right: auto !important;
  top: auto !important;
  bottom: 8vh !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 900px !important;
  transform: none !important;
  color: #fff !important;
  z-index: 20 !important;
}

.cinema .cinema-text .kicker,
.cinema .cinema-text h2 {
  color: #fff !important;
  position: relative !important;
  margin-left: 0 !important;
  z-index: 21 !important;
}

.cinema .cinema-text .kicker {
  margin-bottom: 1rem !important;
}

.cinema::after {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 10 !important;
  pointer-events: none !important;
  background:
    linear-gradient(to top, rgba(25,18,12,.58) 0%, rgba(25,18,12,.08) 52%, rgba(25,18,12,0) 76%),
    linear-gradient(180deg, rgba(222,174,108,.08), rgba(92,57,30,.12)) !important;
}

@media(max-width:650px) {
  .cinema .cinema-text {
    left: 6vw !important;
    right: 6vw !important;
    bottom: 6vh !important;
    max-width: none !important;
  }
}