/* Residence Lodge — base styles
   Design system: Stitch "Serene Boutique" palette (see DESIGN.md) — coastal
   blue primary + antique tan/gold secondary + dark navy tertiary on warm
   ivory, editorial Libre Caslon Text headlines over uppercase/tracked
   Manrope for subheads, nav and body. Flat, bordered cards (no shadows)
   with a soft small-radius shape language (not sharp/square). */
:root{
  /* Color — confirmed via Stitch reference palette sheet (Primary/Secondary/
     Tertiary/Neutral swatches) */
  --primary:#0a6ca9;
  --primary-dark:#085683;
  --primary-light:#eaf2f7;
  --on-primary:#ffffff;
  --secondary:#b98b4e;
  --secondary-dark:#a67a3e;
  --secondary-light:#f4ead8;
  --on-secondary:#ffffff;
  --tertiary:#0a2e47;
  --on-tertiary:#ffffff;
  --neutral:#23303a;

  --surface:#ffffff;
  --bg-soft:#f6f3ec;
  --ink:var(--neutral);
  --muted:#5b6b78;
  --line:#e1e6ea;
  --on-tertiary-variant:rgba(255,255,255,.72);

  /* Shape — soft small radius on buttons/cards/chips, never sharp/square,
     never a full shadow (depth comes from borders + flat color) */
  --radius-sm:.25rem;
  --radius:.5rem;
  --radius-md:.75rem;
  --radius-full:9999px;

  /* Spacing rhythm */
  --space-mobile:24px;
  --space-desktop:64px;
  --gutter:32px;
  --stack-sm:16px;
  --stack-md:32px;
  --stack-lg:80px;
  --section-padding:120px;

  --maxw:1280px;
  --font-serif:"Libre Caslon Text",Georgia,serif;
  --font-sans:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font-sans);color:var(--ink);
  background:var(--surface);line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.text-link{color:var(--primary)}
.text-link:hover{text-decoration:underline}
.text-link strong{color:inherit}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--space-desktop)}
.section{padding:var(--section-padding) 0;scroll-margin-top:96px}
.eyebrow{
  font-family:var(--font-sans);text-transform:uppercase;letter-spacing:.05em;
  font-size:.75rem;font-weight:600;line-height:1;color:var(--primary);margin:0 0 12px;
}
.eyebrow.center,.center{text-align:center}

/* Typography — Libre Caslon Text headlines, Manrope for everything else */
h1,h2{font-family:var(--font-serif);font-weight:600;line-height:1.15;letter-spacing:-.01em;margin:0 0 .4em}
h1{font-size:clamp(2.5rem,6vw,4rem)}
h2{font-weight:600;line-height:1.3;letter-spacing:0;font-size:clamp(1.75rem,4vw,2rem)}
h3{font-family:var(--font-sans);font-size:1.125rem;font-weight:600;line-height:1.5;
  letter-spacing:.1em;text-transform:uppercase;margin:0 0 .4em}
p{margin:0 0 1rem;font-size:1rem;line-height:1.6}
.lede{font-size:1.125rem;line-height:1.8;max-width:560px;margin-left:auto;margin-right:auto}

/* Buttons — soft small radius, flat (no shadow) */
.btn{display:inline-block;padding:15px 32px;border-radius:var(--radius);font-weight:600;
  font-size:.85rem;line-height:1;text-transform:uppercase;letter-spacing:.1em;
  transition:transform .15s ease,background .15s ease,border-color .15s ease,color .15s ease}
.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-2px)}
/* Outline button — used only in the hero, over the photo, so it's styled
   for a dark background (white border/text), not for a light surface */
.btn-outline{background:transparent;border:1.5px solid rgba(255,255,255,.8);color:#fff}
.btn-outline:hover{background:rgba(255,255,255,.14);border-color:#fff}

/* Header / nav — clean white bar, icon mark + serif wordmark */
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:88px}
.brand{display:flex;align-items:center}
.brand-logo{height:38px;width:auto;display:block;object-fit:contain}
.nav-links{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0}
.nav-links a{font-weight:500;font-size:.8rem;line-height:1;text-transform:uppercase;letter-spacing:.15em;
  color:var(--neutral);background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;
  padding-bottom:2px;transition:background-size .25s ease,color .15s ease}
.nav-links a:hover{background-size:100% 1px;color:var(--primary)}
.nav-cta{background:var(--primary);color:var(--on-primary) !important;padding:10px 20px !important;
  border-radius:var(--radius);background-image:none !important}
.nav-cta:hover{background:var(--primary-dark)}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{width:24px;height:2px;background:var(--neutral);border-radius:2px;transition:.2s}

/* Hero — centered layout from the Stitch "Centered Hero" reference (mark +
   caption, serif headline, lede, scroll cue, solid + outline buttons), but
   with the property photo restored as the background instead of Stitch's
   flat gradient (that mockup had no real photo to show). Text recolored
   for contrast against the photo+overlay instead of the light gradient. */
.hero{position:relative;min-height:82vh;display:flex;align-items:center;overflow:hidden;color:#fff}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.05)}
.hero-overlay{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,46,71,.35),rgba(10,46,71,.75))}
.hero-content{position:relative;max-width:680px;margin:0 auto;text-align:center}
.hero-mark{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0 auto 28px}
.hero-mark img{height:38px;width:auto;object-fit:contain;filter:brightness(0) invert(1)}
.hero-mark span{font-family:var(--font-sans);font-size:.68rem;text-transform:uppercase;
  letter-spacing:.2em;color:rgba(255,255,255,.85)}
.hero .eyebrow{color:var(--secondary)}
.hero h1{color:#fff}
.hero .lede{max-width:520px;margin-left:auto;margin-right:auto;color:rgba(255,255,255,.92)}
.hero-scroll-cue{display:inline-block;margin:6px 0 26px;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.2em;color:rgba(255,255,255,.75)}
.hero-scroll-cue::after{content:"⌄";display:block;margin-top:4px;font-size:1rem;line-height:1}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:8px}

/* Intro — asymmetric editorial split (8/4 of 12 columns) */
.intro{display:grid;grid-template-columns:8fr 4fr;gap:64px;align-items:center}
.intro-stats{list-style:none;margin:0;padding:28px;display:grid;gap:20px;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-md)}
.intro-stats li{display:flex;flex-direction:column}
.stat-num{font-family:var(--font-serif);font-weight:500;font-size:1.5rem;color:var(--primary);line-height:1}
.stat-label{color:var(--muted);font-size:.75rem;font-weight:600;line-height:1;
  text-transform:uppercase;letter-spacing:.05em;margin-top:6px}

/* Rooms — soft-radius cards, thin border instead of shadow */
.rooms{background:var(--bg-soft)}
.room-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:36px}
.room-grid-2{grid-template-columns:repeat(2,1fr);max-width:820px;margin-left:auto;margin-right:auto}
.room-grid-2 .room-card img{aspect-ratio:4/3}
.room-meta{color:var(--primary);font-weight:600;font-size:.85rem;margin:0 0 8px}
.room-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);
  overflow:hidden;transition:border-color .18s}
.room-card:hover{border-color:var(--secondary)}
.room-card:hover img{transform:scale(1.03)}
.room-card img{aspect-ratio:3/2;object-fit:cover;width:100%;transition:transform .4s ease}
.room-card-body{padding:18px 20px 22px}
.room-card-body p{color:var(--muted);font-size:.92rem;margin:0}

/* Amenities — icon cards, following ha-website's pattern: auto-fill grid of
   vertical icon-over-label tiles instead of a row of small pill chips */
.amenity-grid{list-style:none;margin:36px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:20px}
.amenity-grid li{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:13px;padding:28px 14px 26px;background:var(--bg-soft);border:1px solid var(--line);
  border-radius:var(--radius-md);transition:transform .18s,box-shadow .18s,border-color .18s}
.amenity-grid li:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(10,46,71,.09);border-color:var(--secondary)}
.amenity-ico{width:36px;height:36px;color:var(--primary)}
.amenity-ico svg{width:100%;height:100%}
.amenity-label{font-family:var(--font-sans);font-size:.95rem;font-weight:400;
  letter-spacing:.02em;color:var(--ink);line-height:1.4}

/* Gallery — full-bleed dark navy mosaic wall, random subset reshuffled per visit */
.gallery{background:var(--tertiary)}
.gallery-header{margin-bottom:40px}
.gallery .eyebrow{color:var(--secondary)}
.gallery h2{color:#fff}
.gallery-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:0 32px}
.gallery-item{position:relative;margin:0;border:0;padding:0;cursor:pointer;overflow:hidden;
  border-radius:0;background:#081f31;aspect-ratio:1}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.gallery-item:hover img{transform:scale(1.06)}
.gallery-item figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:16px 10px 8px;font-size:.78rem;color:#fff;font-weight:500;
  background:linear-gradient(180deg,transparent,rgba(6,20,32,.82));opacity:0;transition:opacity .2s}
.gallery-item:hover figcaption{opacity:1}

/* Location — asymmetric split, soft-radius framed map (border, not shadow) */
.location{background:var(--bg-soft)}
.location-inner{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:center}
.location-media img,.location-media iframe{border-radius:var(--radius-md);border:1px solid var(--line);
  aspect-ratio:3/2;object-fit:cover;width:100%;height:auto;display:block}
.location-addr{color:var(--muted)}
.location-addr a{color:var(--primary);font-weight:600}

/* Book on OTAs — brand-colored pill buttons, ha-website's exact pattern */
.ota-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:14px;margin-top:36px;max-width:900px;margin-left:auto;margin-right:auto}
.ota-btn{position:relative;display:flex;align-items:center;justify-content:center;
  padding:20px 14px;border-radius:var(--radius);font-family:var(--font-sans);
  font-size:.95rem;font-weight:600;text-align:center;
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
.ota-btn:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(10,46,71,.18);filter:brightness(1.06)}
.ota-booking{background:#003580;color:#fff}
.ota-expedia{background:#1d3453;color:#ffc72c}
.ota-trip{background:#1677ff;color:#fff}
.ota-agoda{background:#eb0226;color:#fff}
.ota-airbnb{background:#ff5a5f;color:#fff}
.ota-hotels{background:#d9211d;color:#fff}
.ota-tripadvisor{background:#00aa6c;color:#fff}

/* Contact — small bordered cards, soft radius */
.contact{background:var(--surface)}
.contact-sub{color:var(--muted);max-width:520px;margin:0 auto 32px}
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:820px;margin:0 auto}
.contact-card{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  padding:28px 20px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-md);
  transition:border-color .15s}
a.contact-card:hover{border-color:var(--secondary)}
.contact-ico{font-size:1.6rem}
.contact-label{font-size:.75rem;line-height:1;text-transform:uppercase;letter-spacing:.05em;font-weight:600;color:var(--muted)}
.contact-value{font-family:var(--font-sans);font-weight:600}
.contact-note{color:var(--muted);font-size:.82rem;margin-top:22px}

/* Footer — dark navy (tertiary); logo is its own solid-blue badge, so it
   sits as a contained tile rather than needing to read directly on navy */
.site-footer{background:var(--tertiary);color:var(--on-tertiary-variant);padding:52px 0 24px}
.footer-inner{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;padding-bottom:26px;
  border-bottom:1px solid rgba(255,255,255,.12)}
.footer-brand{display:flex;flex-direction:column;gap:8px}
.footer-logo{height:110px;width:auto;display:block;object-fit:contain}
.footer-brand p{color:rgba(255,255,255,.6);font-size:.9rem;margin:6px 0 0}
.footer-nav{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.footer-heading{color:var(--secondary);font-size:.7rem;line-height:1;font-weight:700;
  text-transform:uppercase;letter-spacing:.18em;margin-bottom:2px}
.footer-nav a{color:rgba(255,255,255,.82);font-size:.75rem;line-height:1;font-weight:500;text-transform:uppercase;letter-spacing:.12em}
.footer-nav a:hover{color:#fff}
.footer-legal{color:rgba(255,255,255,.45);font-size:.82rem;margin-top:20px}
.footer-legal a{color:rgba(255,255,255,.6)}
.footer-legal a:hover{color:#fff}

/* Mobile booking bar — sticky CTA, hidden on desktop (nav already floats one) */
.booking-bar{display:none}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;
  background:rgba(6,20,32,.94);padding:30px}
.lightbox.open{display:flex}
.lb-figure{margin:0;max-width:92vw;max-height:88vh;text-align:center}
.lb-img{max-width:92vw;max-height:80vh;border-radius:var(--radius-md);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb-caption{color:#e7edf1;margin-top:14px;font-size:.95rem}
.lb-close,.lb-prev,.lb-next{position:absolute;background:rgba(255,255,255,.12);color:#fff;
  border:0;cursor:pointer;border-radius:var(--radius-full);width:48px;height:48px;font-size:1.6rem;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background .15s}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.28)}
.lb-close{top:22px;right:22px}
.lb-prev{left:22px;top:50%;transform:translateY(-50%)}
.lb-next{right:22px;top:50%;transform:translateY(-50%)}

/* Responsive */
@media (max-width:960px){
  .container{padding:0 var(--space-mobile)}
  .intro{grid-template-columns:1fr;gap:32px}
  .room-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:repeat(3,1fr);padding:0 20px}
  .location-inner{grid-template-columns:1fr;gap:28px}
  .contact-cards{grid-template-columns:1fr}
}
@media (max-width:680px){
  .section{padding:var(--stack-lg) 0}
  .nav-toggle{display:flex}
  .nav-links{position:absolute;top:88px;left:0;right:0;flex-direction:column;gap:0;
    background:var(--surface);border-bottom:1px solid var(--line);padding:8px 22px 18px;
    display:none}
  .nav-links.open{display:flex}
  .nav-links li{width:100%}
  .nav-links a{display:block;padding:12px 0;background-image:none}
  .nav-cta{display:inline-block;margin-top:6px}
  .room-grid{grid-template-columns:1fr 1fr;gap:10px}
  .room-grid-2{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(2,1fr);gap:3px;padding:0 16px}
  .lb-prev{left:10px}.lb-next{right:10px}

  .booking-bar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:50;
    padding:12px var(--space-mobile);background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
    border-top:1px solid var(--line)}
  .booking-bar .btn{width:100%;text-align:center}
  body{padding-bottom:72px}
}