:root{
    --ocean-deep:#0B2545; --ocean:#13324B; --ocean-blue:#1B4965; --sky:#5FA8D3;
    --aqua:#00B4D8; --aqua-soft:#48CAE4; --gold:#C6A15B; --gold-soft:#E4CF9E;
    --paper:#F5FAFD; --paper-2:#EAF3F8; --ink:#0B2545; --ink-2:#3D5A73; --muted:#6E869B;
    --line:#D8E6EF; --card:#FFFFFF; --shadow:0 24px 60px -28px rgba(11,37,69,.45);
    --serif:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,serif;
    --sans:'Inter','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
    --maxw:1200px;
  }
  @media (prefers-color-scheme:dark){
    :root{ --paper:#081726; --paper-2:#0B2036; --ink:#EAF3F8; --ink-2:#B9CEDE; --muted:#8AA4B8;
      --line:#1C3A54; --card:#0E273D; --shadow:0 24px 60px -26px rgba(0,0,0,.6);}
  }
  :root[data-theme="dark"]{ --paper:#081726; --paper-2:#0B2036; --ink:#EAF3F8; --ink-2:#B9CEDE; --muted:#8AA4B8; --line:#1C3A54; --card:#0E273D; --shadow:0 24px 60px -26px rgba(0,0,0,.6);}
  :root[data-theme="light"]{ --paper:#F5FAFD; --paper-2:#EAF3F8; --ink:#0B2545; --ink-2:#3D5A73; --muted:#6E869B; --line:#D8E6EF; --card:#FFFFFF; --shadow:0 24px 60px -28px rgba(11,37,69,.45);}

  *{box-sizing:border-box}
  body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}
  h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:-.01em;margin:0;text-wrap:balance}
  a{color:inherit;text-decoration:none}
  img{max-width:100%}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  .eyebrow{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
  .lede{color:var(--ink-2);font-size:clamp(15px,1.6vw,18px)}
  .btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:700;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;padding:15px 26px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:.25s}
  .btn-gold{background:linear-gradient(135deg,var(--gold),#b8903f);color:#1a1204;box-shadow:0 14px 30px -12px rgba(198,161,91,.7)}
  .btn-gold:hover{transform:translateY(-2px);box-shadow:0 20px 40px -12px rgba(198,161,91,.8)}
  .btn-ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.5);backdrop-filter:blur(6px)}
  .btn-ghost:hover{background:rgba(255,255,255,.16)}
  .btn-outline{background:transparent;color:var(--ocean-blue);border-color:var(--line)}
  .btn-outline:hover{border-color:var(--gold);color:var(--gold)}
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
  .reveal.in{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

  /* NAV */
  header.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
  .nav-in{display:flex;align-items:center;justify-content:space-between;height:74px}
  .brand{display:flex;align-items:center;gap:12px}
  .brand .mark{width:40px;height:40px;border-radius:11px;background:linear-gradient(140deg,var(--ocean-blue),var(--aqua));display:grid;place-items:center;box-shadow:0 8px 20px -8px rgba(0,180,216,.6)}
  .brand .name{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:.01em}
  .brand .name b{color:var(--gold);font-weight:600}
  .brand small{display:block;font-family:var(--sans);font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--muted);margin-top:-2px}
  nav.links{display:flex;gap:28px;align-items:center}
  nav.links a{font-size:14px;font-weight:600;color:var(--ink-2);position:relative;padding:4px 0}
  nav.links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--gold);transition:.3s}
  nav.links a:hover{color:var(--ink)} nav.links a:hover::after{width:100%}
  .nav-cta{display:flex;gap:12px;align-items:center}
  .theme-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;display:grid;place-items:center}
  .burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:11px;background:var(--card);cursor:pointer}

  /* HERO */
  .hero{position:relative;min-height:92vh;display:flex;align-items:center;overflow:hidden;color:#fff}
  .hero-bg{position:absolute;inset:0;z-index:0;background:
     radial-gradient(120% 90% at 78% 8%,rgba(0,180,216,.42),transparent 55%),
     radial-gradient(120% 120% at 10% 110%,rgba(95,168,211,.5),transparent 50%),
     linear-gradient(160deg,#0B2545 0%,#13324B 38%,#1B4965 72%,#12556e 100%)}
  .hero-bg::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(circle at 60% 40%,#000,transparent 75%)}
  .hero-waves{position:absolute;left:0;right:0;bottom:-1px;z-index:1;width:100%;height:auto;display:block}
  .hero-in{position:relative;z-index:2;padding:70px 0 130px}
  .hero-in .eyebrow{color:var(--gold-soft)}
  .hero h1{font-size:clamp(40px,6.6vw,82px);margin:18px 0 0;letter-spacing:-.02em}
  .hero h1 .it{font-style:italic;color:var(--gold-soft)}
  .hero p.tag{font-family:var(--serif);font-style:italic;font-size:clamp(18px,2.4vw,26px);color:#dCEBF5;margin:14px 0 0}
  .hero p.desc{max-width:540px;color:#C6DCEC;margin:20px 0 34px;font-size:17px}
  .hero-btns{display:flex;gap:14px;flex-wrap:wrap}
  .hero-meta{display:flex;gap:34px;margin-top:48px;flex-wrap:wrap}
  .hero-meta div{border-left:2px solid var(--gold);padding-left:14px}
  .hero-meta b{font-family:var(--serif);font-size:26px;display:block;line-height:1}
  .hero-meta span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#a9c6da}

  /* BOOKING WIDGET */
  .booking{position:relative;z-index:5;margin:-72px auto 0;max-width:1060px}
  .booking-card{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:22px;display:grid;grid-template-columns:repeat(5,1fr) auto;gap:16px;align-items:end}
  .fld label{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
  .fld input,.fld select{width:100%;padding:12px 12px;border:1px solid var(--line);border-radius:11px;background:var(--paper-2);color:var(--ink);font-family:var(--sans);font-size:14px;outline:none}
  .fld input:focus,.fld select:focus{border-color:var(--aqua);box-shadow:0 0 0 4px rgba(0,180,216,.14)}
  .booking .btn{height:46px;justify-content:center}
  @media(max-width:900px){.booking-card{grid-template-columns:1fr 1fr}.booking .btn{grid-column:1/-1}}

  /* SECTIONS */
  section.blk{padding:clamp(64px,9vw,120px) 0}
  .sec-head{max-width:640px}
  .sec-head h2{font-size:clamp(30px,4.3vw,50px);margin:14px 0 0}
  .sec-head p{margin-top:14px}
  .center{margin-left:auto;margin-right:auto;text-align:center}

  .about{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
  .about-media{position:relative}
  .ph{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:
      linear-gradient(150deg,#1B4965,#13324B 55%,#0B2545);
      display:grid;place-items:center;color:#bcd6e6}
  .ph .lbl{font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;opacity:.75;display:flex;flex-direction:column;align-items:center;gap:10px}
  .ph svg{opacity:.7}
  .about-media .ph.main{aspect-ratio:4/5}
  .about-media .ph.mini{position:absolute;right:-22px;bottom:-26px;width:52%;aspect-ratio:1/1;background:linear-gradient(150deg,var(--sky),var(--aqua));box-shadow:var(--shadow)}
  .usp{list-style:none;padding:0;margin:26px 0 30px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .usp li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--ink-2)}
  .usp .ic{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:var(--paper-2);color:var(--aqua);display:grid;place-items:center;border:1px solid var(--line)}
  .usp b{color:var(--ink);display:block;font-family:var(--sans);font-weight:700;font-size:14.5px}

  /* ACCOMMODATION CARDS */
  .rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px}
  .room{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 12px 34px -22px rgba(11,37,69,.4);transition:.35s}
  .room:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--gold) 50%,var(--line))}
  .room .pic{aspect-ratio:3/2;background:linear-gradient(150deg,#1B4965,#0B2545);position:relative;display:grid;place-items:center;color:#a9c6da}
  .room .pic .tag{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.92);color:var(--ocean-deep);font-size:11px;font-weight:800;letter-spacing:.06em;padding:6px 12px;border-radius:999px;text-transform:uppercase}
  .room .pic .fav{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;background:rgba(11,37,69,.35);backdrop-filter:blur(4px);display:grid;place-items:center;color:#fff}
  .room .body{padding:22px}
  .room h3{font-size:23px}
  .room .price{font-family:var(--serif);font-size:22px;color:var(--ocean-blue);white-space:nowrap}
  .room .price span{font-family:var(--sans);font-size:12px;color:var(--muted);font-weight:600}
  .room .specs{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
  .chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2);background:var(--paper-2);border:1px solid var(--line);padding:6px 10px;border-radius:8px}
  .room .foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px;gap:12px}

  /* AMENITIES STRIP */
  .amen{background:var(--paper-2)}
  .amen-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:44px}
  .amen-grid .a{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 14px;text-align:center;transition:.3s}
  .amen-grid .a:hover{transform:translateY(-4px);border-color:var(--aqua)}
  .amen-grid .a .ic{width:46px;height:46px;margin:0 auto 12px;border-radius:12px;background:linear-gradient(140deg,var(--sky),var(--aqua));display:grid;place-items:center;color:#fff}
  .amen-grid .a span{font-size:12.5px;font-weight:600;color:var(--ink-2)}
  @media(max-width:900px){.amen-grid{grid-template-columns:repeat(3,1fr)}}

  /* GALLERY */
  .gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;gap:14px;margin-top:48px}
  .gal .g{border-radius:14px;overflow:hidden;position:relative;background:linear-gradient(150deg,#1B4965,#0B2545);display:grid;place-items:center;color:#9fbdd2;cursor:pointer}
  .gal .g:nth-child(1){grid-row:span 2}.gal .g:nth-child(4){grid-column:span 2}.gal .g:nth-child(6){grid-row:span 2}
  .gal .g .cap{position:absolute;left:12px;bottom:10px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#dCEBF5;opacity:0;transition:.3s}
  .gal .g::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,37,69,.6),transparent 60%);opacity:0;transition:.3s}
  .gal .g:hover::before,.gal .g:hover .cap{opacity:1}

  /* QUOTE */
  .quote{background:linear-gradient(160deg,#0B2545,#1B4965);color:#fff;text-align:center}
  .quote .stars{color:var(--gold-soft);letter-spacing:4px;font-size:18px}
  .quote blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(22px,3.3vw,34px);line-height:1.4;max-width:820px;margin:18px auto 22px}
  .quote cite{font-style:normal;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:#a9c6da}

  /* CTA */
  .cta{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--ocean-blue),var(--aqua));color:#fff;border-radius:26px;padding:clamp(40px,6vw,72px);text-align:center;box-shadow:var(--shadow)}
  .cta h2{font-size:clamp(28px,4.4vw,46px)}
  .cta p{color:#eaf6fb;max-width:560px;margin:14px auto 28px}

  /* FOOTER */
  footer{background:var(--ocean-deep);color:#c6dcec;padding:70px 0 26px;margin-top:0}
  .fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px}
  footer h4{font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:16px;font-weight:700}
  footer a{color:#c6dcec;font-size:14px;display:block;padding:6px 0;transition:.2s}
  footer a:hover{color:#fff;padding-left:5px}
  .fbrand .name{font-family:var(--serif);font-size:24px;color:#fff}
  .fbrand p{font-size:14px;color:#9fbdd2;max-width:300px;margin:14px 0}
  .social{display:flex;gap:10px;margin-top:6px}
  .social a{width:40px;height:40px;border-radius:11px;border:1px solid rgba(255,255,255,.15);display:grid;place-items:center;padding:0}
  .social a:hover{background:var(--gold);color:#0B2545;border-color:var(--gold)}
  .fbot{border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:#8fb0c8}
  .fbot a{display:inline;padding:0}

  /* mobile sticky book + nav */
  .mbook{display:none;position:fixed;left:16px;right:16px;bottom:16px;z-index:60;gap:10px}
  .mbook .btn{flex:1;justify-content:center;box-shadow:0 16px 40px -12px rgba(0,0,0,.5)}
  .wa{background:#25d366;color:#053;border:none}

  @media(max-width:900px){
    nav.links,.nav-cta .btn{display:none}.burger{display:block}
    .about{grid-template-columns:1fr;gap:40px}.about-media .ph.mini{width:44%}
    .rooms{grid-template-columns:1fr}.usp{grid-template-columns:1fr}
    .gal{grid-template-columns:1fr 1fr;grid-auto-rows:130px}.gal .g:nth-child(4){grid-column:span 2}
    .fgrid{grid-template-columns:1fr 1fr}
    .mbook{display:flex}
    section.blk{padding:64px 0}
  }
  @media(max-width:560px){.fgrid{grid-template-columns:1fr}.hero-meta{gap:20px}}

/* real images */
.ph.has-img,.room .pic.has-img,.gal .g.has-img{background-size:cover;background-position:center}
.hero.has-img .hero-bg{background-size:cover;background-position:center}
.hero.has-img .hero-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(11,37,69,.72),rgba(19,50,75,.5))}

/* ============ INNER PAGES ============ */
.pagehero{position:relative;background:linear-gradient(160deg,#0B2545,#1B4965 70%,#12556e);color:#fff;padding:118px 0 64px;overflow:hidden}
.pagehero::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 85% 0,rgba(0,180,216,.35),transparent 55%)}
.pagehero .wrap{position:relative;z-index:1}
.pagehero .eyebrow{color:var(--gold-soft)}
.pagehero h1{font-size:clamp(32px,5vw,56px);margin:12px 0 0}
.pagehero p{color:#c6dcec;max-width:600px;margin:14px 0 0;font-size:17px}
.crumbs{font-size:13px;color:#9fbdd2;margin-top:16px}.crumbs a{color:#cfe3f0}.crumbs a:hover{color:#fff}

/* accommodation list */
.acc-list{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:8px}
.acc-list .room .pic{aspect-ratio:16/10}
@media(max-width:820px){.acc-list{grid-template-columns:1fr}}

/* accommodation detail */
.detail{display:grid;grid-template-columns:1.5fr .9fr;gap:40px;align-items:start}
.detail-gal{display:grid;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:150px;gap:12px}
.detail-gal .g{border-radius:14px;overflow:hidden;background:linear-gradient(150deg,#1B4965,#0B2545);display:grid;place-items:center;color:#9fbdd2;cursor:pointer;position:relative;background-size:cover;background-position:center}
.detail-gal .g.big{grid-row:span 2;grid-column:span 1}
.spec-row{display:flex;flex-wrap:wrap;gap:14px;margin:22px 0}
.spec-row .s{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink-2)}
.spec-row .s .ic{width:38px;height:38px;border-radius:10px;background:var(--paper-2);border:1px solid var(--line);color:var(--aqua);display:grid;place-items:center}
.spec-row .s b{display:block;color:var(--ink);font-size:15px}
.book-box{position:sticky;top:96px;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:24px}
.book-box .price{font-family:var(--serif);font-size:30px;color:var(--ocean-blue)}
.book-box .price span{font-family:var(--sans);font-size:13px;color:var(--muted);font-weight:600}
.amenlist{list-style:none;padding:0;margin:16px 0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.amenlist li{display:flex;gap:9px;align-items:center;font-size:14px;color:var(--ink-2)}
.amenlist li svg{color:var(--aqua);flex:0 0 auto}
@media(max-width:820px){.detail{grid-template-columns:1fr}.book-box{position:static}.detail-gal{grid-template-columns:1fr 1fr}}

/* forms */
.form-card{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:30px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.frow.one{grid-template-columns:1fr}
.field label{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:11px;background:var(--paper-2);color:var(--ink);font-family:var(--sans);font-size:15px;outline:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--aqua);box-shadow:0 0 0 4px rgba(0,180,216,.14)}
.field textarea{min-height:110px;resize:vertical}
.req{color:#e03131}
@media(max-width:640px){.frow{grid-template-columns:1fr}}

/* notices */
.notice{border-radius:12px;padding:14px 18px;margin-bottom:22px;font-size:14.5px;border:1px solid}
.notice.ok{background:#e9f9f1;border-color:#9ae0c0;color:#0a6b45}
.notice.err{background:#fdecec;border-color:#f3b6b6;color:#a01c1c}
.notice.info{background:#eaf4fb;border-color:#b6d8ef;color:#14557f}
@media (prefers-color-scheme:dark){.notice.ok{background:#0c2a1f;color:#7fe0b4}.notice.err{background:#2c1414;color:#f3a3a3}.notice.info{background:#0d2536;color:#9fd0ee}}

/* faq accordion */
.faq-item{border:1px solid var(--line);border-radius:14px;margin-bottom:12px;background:var(--card);overflow:hidden}
.faq-q{width:100%;text-align:left;background:none;border:none;padding:20px 22px;font-family:var(--sans);font-size:16px;font-weight:700;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq-q .pl{color:var(--gold);font-size:22px;transition:.3s;flex:0 0 auto}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;color:var(--ink-2);padding:0 22px}
.faq-item.open .faq-a{max-height:400px;padding:0 22px 20px}
.faq-item.open .pl{transform:rotate(45deg)}

/* legal / prose */
.legal{max-width:820px;margin:0 auto}
.legal h2{font-size:26px;margin:34px 0 12px}
.legal p,.legal li{color:var(--ink-2);font-size:15.5px}
.legal ul{padding-left:20px}

/* confirmation */
.confirm{max-width:640px;margin:0 auto;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:48px 36px}
.confirm .tick{width:76px;height:76px;border-radius:50%;background:linear-gradient(140deg,#0ca678,#12b886);display:grid;place-items:center;margin:0 auto 20px;color:#fff}
.confirm .ref{font-family:var(--serif);font-size:34px;color:var(--ocean-blue);letter-spacing:.02em;margin:8px 0;background:var(--paper-2);border:1px dashed var(--gold);border-radius:12px;padding:14px 20px;display:inline-block}

/* lightbox */
.lb{position:fixed;inset:0;background:rgba(6,15,26,.94);z-index:200;display:none;align-items:center;justify-content:center;padding:30px}
.lb.on{display:flex}
.lb .box{max-width:90vw;max-height:86vh;border-radius:14px;background:linear-gradient(150deg,#1B4965,#0B2545);min-width:60vw;min-height:60vh;display:grid;place-items:center;color:#cfe3f0;background-size:contain;background-repeat:no-repeat;background-position:center}
.lb .x{position:absolute;top:22px;right:26px;color:#fff;font-size:34px;cursor:pointer;line-height:1}
.lb .nav-a{position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-size:44px;cursor:pointer;padding:0 18px;user-select:none;opacity:.7}.lb .nav-a:hover{opacity:1}
.lb .prev{left:6px}.lb .next{right:6px}
.filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:28px 0 8px}
.filters button{border:1px solid var(--line);background:var(--card);color:var(--ink-2);padding:9px 18px;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer;transition:.2s}
.filters button.on,.filters button:hover{background:var(--ocean-blue);color:#fff;border-color:var(--ocean-blue)}