:root{
  /* Colors & surfaces */
  --bg: #f2f1ec;
  --card: #ffffff;
  --muted: #0f0b03;
  --accent: #c6b499;
  --accent-2: #0f0b03;
  --shadow: 0 8px 24px rgba(17,17,17,0.08);
  --radius: 12px;

  /* Header color (restored to original) */
  --header-bg: rgba(255,255,255,0.8);

  /* Layout / spacing */
  --container: clamp(680px, 92vw, 1100px);
  --gap: 1.25rem;

  /* Touch / accessibility */
  --tap-size: 44px;

  /* Breakpoints */
  --break-sm: 640px;
  --break-md: 900px;
  --break-lg: 1400px;

  /* Fluid typography (mobile-first) — tuned so text scales with viewport width
     while avoiding excessive wrapping on narrow portrait screens. */
  --font-size-base: clamp(13px, 3.6vw, 18px);
  --h1-size: clamp(1.4rem, 6.8vw, 3.6rem);
  --lead-size: clamp(.98rem, 3.2vw, 1.15rem);
  --line-height-base: 1.45;

  /* Hero/photo sizing - wider on small devices but capped to desktop max */
  --hero-photo-min: 120px;
  --hero-photo-max: 420px;
  --hero-photo-width: clamp(var(--hero-photo-min), 40vw, var(--hero-photo-max));

  /* Interaction */
  --tap-highlight: transparent;
  --focus-outline: 3px solid rgba(198,180,153,0.25);
}

/* Ensure the root font-size tracks the variable (stronger than later rules) */
html { font-size: var(--font-size-base) !important; }

/* Prevent mid-word breaks while allowing natural line wrapping */
p, li, a, span, h1, h2, h3, h4, h5, h6 {
  word-break: normal !important;        /* do not break words mid-word */
  overflow-wrap: break-word !important;/* allow wrapping at sensible points */
  hyphens: auto !important;            /* enable hyphenation where available */
}

/* Force images and hero containers to scale fluidly (stronger than later defaults) */
img, picture, video, svg,
.hero-photo img, .hero-photo picture, .hero-photo video {
  max-width: 100% !important;
  width: 100% !important;    /* let media fill their container responsively */
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
}

/* Ensure the hero placeholder sizes from the variable and never overflows */
.hero-photo .photo-placeholder {
  width: var(--hero-photo-width) !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 4/3;
  overflow: hidden !important;
  display: block !important;
}

/* Keep container sizing fluid so text + images match desktop proportions on small screens */
.container {
  max-width: var(--container) !important;
  width: clamp(92%, 92vw, var(--container)) !important;
}

/* Portrait phone tuning: scale text down smoothly, reduce headings to avoid forced wrapping */
@media (max-width: 639px) and (orientation: portrait) {
  :root{
    --font-size-base: clamp(12px, 4.6vw, 16px);
    --h1-size: clamp(1.1rem, 9.5vw, 2.6rem);
    --lead-size: clamp(.95rem, 4.0vw, 1.05rem);
    --line-height-base: 1.32;
  }

  /* make these rules stronger so they take effect even if other breakpoints set exact sizes later */
  html { font-size: var(--font-size-base) !important; }

  /* keep headlines readable without forcing long, awkward wraps */
  .hero-text h1 {
    font-size: var(--h1-size) !important;
    line-height: 1.06 !important;
    white-space: normal !important;
    word-break: break-word !important;
    hyphens: auto !important;
  }

  .lead, p, li, a, span {
    font-size: var(--font-size-base) !important;
    line-height: var(--line-height-base) !important;
  }
}

/* PORTRAIT VIEW ON MOBILE DEVICES */
/* Extra-tight portrait phones: further tighten scales to prevent overflow */
@media (max-width: 420px) and (orientation: portrait) {
  :root{
    --font-size-base: clamp(11px, 5.2vw, 15px);
    --h1-size: clamp(1rem, 10.5vw, 2.2rem);
    --lead-size: 0.95rem;
    --line-height-base: 1.28;
  }

  html { font-size: var(--font-size-base) !important; }
  .hero-text h1 {
    font-size: var(--h1-size) !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    word-break: break-word !important;
    hyphens: auto !important;
    max-width: 100% !important;
  }
  .lead, p, li, a, span { font-size: var(--font-size-base) !important; line-height: var(--line-height-base) !important; }
}

/* Mobile-specific variable tuning so sections (text + photos) fit and match desktop proportions
   while preserving the mobile-first stacking behavior. These updates only change variables so
   existing layout rules adapt automatically. */
@media (max-width: 639px) {
  :root{
    --container: 94%;
    --gap: 0.75rem;
    --font-size-base: clamp(11px, 4.0vw, 16px);
    --h1-size: clamp(1.4rem, 7.5vw, 2.2rem);
    --lead-size: clamp(.95rem, 3.5vw, 1.05rem);
    --hero-photo-min: 140px;
    --hero-photo-max: 420px;
    --hero-photo-width: 100%;
    --tap-size: 48px; /* larger touch targets on mobile */
    --header-bg: rgba(255,255,255,0.92); /* slightly more opaque to aid contrast on small screens */
  }
}

/* Extra-tight portrait phones: keep headline & images comfortably sized and prevent overflow */
@media (max-width: 420px) and (orientation: portrait) {
  :root{
    --container: clamp(280px, 92%, 420px);
    --gap: 0.5rem;
    --font-size-base: clamp(13px, 4.2vw, 15px);
    --h1-size: clamp(1.25rem, 8.5vw, 1.9rem);
    --lead-size: 0.95rem;
    --hero-photo-min: 120px;
    --hero-photo-width: 100%;
    --tap-size: 48px;
  }
}

/* Landscape phones/small tablets: encourage a two-column-ish feel by allowing the photo to take a narrower,
   fixed column similar to desktop while still keeping the main column readable */
@media (max-width: 899px) and (orientation: landscape) {
  :root{
    --container: 92%;
    --gap: 1rem;
    --hero-photo-min: 160px;
    --hero-photo-width: clamp(160px, 28vw, 340px);
    --h1-size: clamp(1.6rem, 5.6vw, 2.2rem);
  }
}

/* Force header to use the restored variable (overrides any later direct background) */
.site-header { background: var(--header-bg) !important; }

/* Base responsive helpers to ensure text & media reflow on small screens */
html { font-size: var(--font-size-base); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
:root, body { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* Ensure text wraps cleanly on narrow viewports */
p, li, a, span, h1, h2, h3, h4, h5, h6 {
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Make images and media fluid so they never overflow their containers */
img, picture, video, svg {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Utility to keep long inline elements from causing horizontal scroll */
.container, .header-inner, .hero-text, .split, .cards, .booking-inner, .inquiry-form {
  min-width: 0; /* allows flex/grid children to shrink properly */
}

/* Base / Mobile-first */
*{box-sizing:border-box}
html,body{height:100%}
html{ -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
body{
  font-family: 'Questrial', sans-serif;
  margin:0;
  background:var(--bg);
  color:#14202b;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  color-scheme: light;
  -webkit-tap-highlight-color: rgba(0,0,0,0.06);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography helpers */
.questrial-text, nav, body { font-family: 'Questrial', sans-serif; }
.site-header, h1 { font-family: 'Noto Serif Display', serif; font-weight:200; }
.noto-serif-display, h2 { font-family: 'Noto Serif Display', serif; font-optical-sizing: auto; font-weight:200; font-style:italic; font-variation-settings: "wdth" 100; }
.display-title { font-family: 'Noto Serif Display', serif; font-optical-sizing: auto; font-weight:200; font-style:normal; font-variation-settings: "wdth" 100; }
.questrial-regular { font-family: "Questrial", sans-serif; font-weight:100; font-style:normal; }

/* Layout container */
.container{
  width:94%;
  max-width:var(--container);
  margin:0 auto;
  padding:1.5rem 0;
}

/* Header */
.site-header{
  background: rgba(255,255,255,0.8);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  /* support safe-area on iPhone notch */
  padding-top: env(safe-area-inset-top, 0);
  box-shadow: 0 4px 18px rgba(3,10,10,0.06);
  transition: background 160ms ease, box-shadow 160ms ease;
  font-size: var(--font-size-base);
}

/* Improve wrapping & image resizing for small portrait iPhones */
@media (max-width:420px) and (orientation:portrait) {
  .site-header {
    /* give a little extra breathing room for notch + comfortable tap area */
    padding-top: calc(env(safe-area-inset-top, 0) + 6px);
    padding-bottom: 6px;
  }

  /* allow header content to wrap and compress gracefully */
  .header-inner {
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
  }

  /* reduce logo size and allow it to wrap */
  .logo {
    font-size: 1.15rem;
    max-width: 60%;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* make nav flow to a new line and keep touch targets readable */
  .nav {
    width: 100%;
    justify-content: flex-end;
    gap: 0.4rem;
  }
  .nav a {
    margin-left: 0.4rem;
    font-size: 0.95rem;
    padding: 0.3rem 0.5rem;
    min-height: 44px;
    white-space: normal;
    line-height: 1.2;
  }

  .hero-text h1 {
    font-size: var(--h1-size);
    line-height: 1.05;
    white-space: normal;
    word-break: break-word;
    max-width: 100%;
  }
  }
  .lead { font-size: clamp(.95rem, 3.5vw, 1.05rem); }

  /* force hero/photo to stack and images to resize nicely */
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero-photo .photo-placeholder,
  .hero-photo img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 50vh;
    object-fit: cover;
    border-radius: var(--radius);
  }

  /* generally ensure images scale down to viewport */
  img, video, .hero-photo img {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }


:root {
  /* make in-page anchor clicks (like the logo) scroll smoothly */
  scroll-behavior: smooth;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0.75rem 0;
  /* ensure comfortable hit targets on small devices */
  padding-left: max(0.75rem, env(safe-area-inset-left));
  padding-right: max(0.75rem, env(safe-area-inset-right));
}
.logo{
  font-weight:800;
  letter-spacing:0.2px;
  text-decoration:none;
  color:#0f0b03;
  font-size: clamp(1.15rem, 4.5vw, 2rem);
  line-height:1;
}

.nav{
  display:flex;
  gap:0.5rem;
  align-items:center;
  flex-wrap:wrap;
}
.nav a{
  margin-left:1rem;
  text-decoration:none;
  color:var(--muted);
  font-weight:600;
  line-height: var(--tap-size);
  padding:0.25rem 0.5rem;
  border-radius:8px;
  min-height:var(--tap-size);
}
.nav a:focus-visible, .nav a:hover{ color:var(--accent-2); outline:none; }

/* Buttons (touch-friendly) */
.btn-outline{
  padding:0.5rem 0.75rem;
  border-radius:8px;
  border:1px solid rgba(34,84,61,0.08);
  background:transparent;
  min-height: var(--tap-size);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}
.btn-primary{
  background:var(--accent);
  color:white;
  padding:0.75rem 1rem;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  box-shadow: 0 6px 18px rgba(34,84,61,0.12);
  min-height: var(--tap-size);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: transform 160ms ease, box-shadow 160ms ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}
.btn-primary:hover, .btn-primary:focus-visible{ transform:translateY(-2px); box-shadow: 0 10px 24px rgba(34,84,61,0.14); outline:none; }
.btn-link{
  align-self:center;
  color:var(--accent-2);
  background:transparent;
  border:none;
  padding:0.5rem 0.75rem;
  min-height: var(--tap-size);
}

/* Hero */
.hero{
  padding:3.5rem 0;
  background:linear-gradient(180deg, rgba(47,133,90,0.03), transparent 60%);
  border-bottom:1px solid rgba(17,17,17,0.03);
}
.hero-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:var(--gap);
}
.hero-text h1{
  margin:0 0 .6rem 0;
  font-size: var(--h1-size);
  line-height:1.05;
  color:#0f0b03;
  word-break:break-word;
  hyphens: auto;
.lead{
  margin:0.5rem 0;
  font-size:var(--lead-size);
  color:var(--muted);
  font-weight:400;
}
  color:var(--muted);
/* Photo placeholder */
.hero-photo .photo-placeholder{
  height: auto;
  width: var(--hero-photo-width);
  max-width:100%;
  aspect-ratio: 4/3;
  border-radius:var(--radius);
  background:linear-gradient(135deg,#c6b499,#f0fff6);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--accent-2);
  font-weight:700;
  box-shadow:var(--shadow);
  border:1px solid rgba(34,84,61,0.06);
  overflow:hidden;
}

/* ensure hero images fill the placeholder responsively */
.hero-photo .photo-placeholder,
.hero-photo img,
.hero-photo picture,
.hero-photo video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  max-height: 80vh;
  border-radius: 0 !important;
  overflow: visible !important;
   box-shadow:var(--shadow);
  border:1px solid rgba(34,84,61,0.06);
}
}
 


/* Sections */
.section{ padding:3rem 0; }
.split{ display:flex; gap:1rem; margin-top:1.25rem; align-items:flex-start; flex-wrap:wrap; }

/* Cards */
.cards{
  display:grid;
  grid-template-columns:repeat(1,1fr);
  gap:1rem;
  margin-top:1rem;
}
.card{
  background:var(--card);
  border-radius:14px;
  padding:1rem;
  box-shadow:var(--shadow);
  border:1px solid rgba(3,10,10,0.03);
}
.card h4{ margin:0 0 0.5rem 0 }
.price{ color:var(--accent-2); font-weight:800; margin:0.25rem 0 0.5rem 0}
.card-cta{
  display:inline-block;
  margin-top:0.75rem;
  text-decoration:none;
  color:var(--accent);
  font-weight:700;
}

/* Booking form */
.booking{
  background:linear-gradient(180deg, rgba(0,0,0,0.02), transparent);
  border-top:1px solid rgba(0,0,0,0.03);
  padding:1.25rem;
}
.booking-inner{
  display:flex;
  gap:1rem;
  align-items:flex-start;
  flex-wrap:wrap;
}
.inquiry-form{
  background:var(--card);
  padding:1rem;
  border-radius:12px;
  box-shadow:var(--shadow);
  border:1px solid rgba(3,10,10,0.03);
  width:100%;
  display:grid;
  gap:0.5rem;
}
.inquiry-form label{ font-size:0.95rem; color:#243234; display:block }
.inquiry-form input,
.inquiry-form textarea{
  width:100%;
@media (min-width:640px){
  .container{ padding:2rem 0; }
  .header-inner{ padding:1rem 0; }
  .logo{ font-size: clamp(1.25rem, 3.2vw, 1.75rem); }
  .hero{ padding:4rem 0; }
  .hero-text h1{ font-size: var(--h1-size); }
  .hero-photo .photo-placeholder{ height:260px; }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .inquiry-form{ min-width:380px; }
}
/* Contact social */
.social a { margin-right:0.6rem; text-decoration:none; color:var(--muted); display:inline-flex; align-items:center; justify-content:center; min-width:var(--tap-size); min-height:var(--tap-size); border-radius:8px; }
@media (min-width:900px){
  .container{ width:92%; max-width:var(--container); }
  .header-inner{ gap:1.5rem; }
  .logo{ font-size: clamp(1.25rem, 2.4vw, 2rem); }
  .hero{ padding:6rem 0; }
  .hero-grid{ grid-template-columns: 1fr 420px; gap:var(--gap); align-items:center; }
  .hero-text h1{ font-size: var(--h1-size); }
  .lead{ font-size:1.25rem; }
  .hero-photo .photo-placeholder{ height:320px; }
  .cards{ grid-template-columns:repeat(3,1fr); }
  .split{ gap:6rem; margin-top:3rem; align-items:flex-start; }
  .booking-inner{ gap:2rem; }
}
  .cards{ grid-template-columns:repeat(2,1fr); }
  .inquiry-form{ min-width:380px; }
}

/* Desktop */
@media (min-width:900px){
  .container{ width:92%; max-width:var(--container); }
  .header-inner{ gap:1.5rem; }
  .logo{ font-size:2rem; }
  .hero{ padding:6rem 0; }
  .hero-grid{ grid-template-columns: 1fr 420px; gap:var(--gap); align-items:center; }
  .hero-text h1{ font-size:4.75rem; }
  .lead{ font-size:1.25rem; }
  .hero-photo .photo-placeholder{ height:320px; }
  .cards{ grid-template-columns:repeat(3,1fr); }
  .split{ gap:6rem; margin-top:3rem; align-items:flex-start; }
  .booking-inner{ gap:2rem; }
}

/* Landscape on small devices: give hero more horizontal layout */
@media (max-width:899px) and (orientation:landscape) {
  .hero-grid { grid-template-columns: 1fr 340px; gap:1rem; align-items:center; }
  .hero-photo .photo-placeholder{ height:200px; }
  .hero-text h1{ font-size:2.2rem; }
  .container{ padding-left:1rem; padding-right:1rem; }
}

/* Very large screens: keep proportions and center container */
@media (min-width:1400px){
  .container{ max-width:1400px; }
  .hero-text h1{ max-width:900px; }
}

/* High-density devices / touch tweaks (Android/iPhone) */
@media (pointer:coarse) {
  .nav a, .btn-outline, .btn-primary, .btn-link { -webkit-tap-highlight-color: transparent; }
  .header-inner{ padding:0.75rem; }
  /* slightly increase tap size on touch-only devices */
  :root{ --tap-size:48px; }
}

/* iOS-specific tweaks: make mobile/iOS match desktop layout */
@supports (-webkit-overflow-scrolling: touch) {
  /* ensure header doesn't overlap content on notch devices */
  .site-header { padding-bottom: 0.25rem; }
  .header-inner { -webkit-touch-callout: none; }

  /* Force desktop-style layout on iOS devices so mobile matches desktop */
  .container {
    width:92%;
    max-width:var(--container);
    margin:0 auto;
    padding:2rem 0;
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
  }

  .hero {
    padding:6rem 0;
    background:linear-gradient(180deg, rgba(47,133,90,0.03), transparent 60%);
  }

  .hero-grid {
    grid-template-columns: 1fr 420px;
    gap:var(--gap);
    align-items:center;
  }

  .hero-text h1 {
    font-size:4.75rem;
    line-height:1.05;
    max-width:900px;
    margin:0 0 .6rem 0;
    word-break:break-word;
  }

  .lead { font-size:1.25rem; }

  .hero-photo .photo-placeholder {
    /* size responsively between a sensible min and max */
    width: var(--hero-photo-width);
    max-width: 100%;
    /* let height scale with viewport but cap it so it doesn't grow too large */
    height: clamp(160px, 22vw, 320px);
    aspect-ratio: 4 / 3;
    overflow: hidden;
    /* for nested img/video fallback */
    display: block;
  }

  .cards { grid-template-columns: repeat(3,1fr); gap:1rem; }

  .split { gap:6rem; margin-top:3rem; align-items:flex-start; }

  .booking-inner { gap:2rem; }

  /* keep touch targets comfortable on iOS */
  :root { --tap-size:48px; }

  /* ensure sticky header/backdrop behaves consistently */
  .site-header {
    position:sticky;
    top:0;
    z-index:40;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}


/* Backdrop-filter support fallback: keep original look if not supported */
@supports not ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {
  .site-header{ background: rgba(255,255,255,0.9); }
}

/* Utility */
.hidden-mobile{ display:block; }
@media (max-width:639px){ .hidden-mobile{ display:none; } }

/* Minor polish for consistent rendering across Android/iOS browsers */
img, video { max-width:100%; height:auto; display:block; }
input, button, textarea, select { font-family: inherit; font-size: 1rem; }