@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"); 
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,600&family=Poppins:wght@300;400;500;600;700&display=swap"); 
 /* ============ TOKENS ============ */
  :root{
    --lake-deep:#0B3B4D;
    --lake-mid:#146C8E;
    --lake-light:#4FA8C7;
    --marble:#FBF6EA;
    --marble-2:#F3EBD8;
    --sandstone:#C98A2C;
    --gold:#E8C171;
    --maroon:#7A1F2B;
    --ink:#152426;
    --ink-soft:#3E5257;
    --white:#ffffff;
    --shadow: 0 20px 45px -18px rgba(11,59,77,.35);
    --arch: 110px 110px 10px 10px;
    --ease: cubic-bezier(.22,.9,.32,1);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Poppins', sans-serif;
    color:var(--ink);
    background:var(--marble);
    overflow-x:hidden;
    line-height:1.6;
  }
  h1,h2,h3,h4,.display{
    font-family:'Cormorant Garamond', serif;
    font-weight:700;
    color:var(--lake-deep);
    line-height:1.15;
  }
  a{text-decoration:none; color:inherit;}
  ul{list-style:none;}
  img{max-width:100%; display:block;}
  .container{width:min(1200px, 92%); margin:0 auto;}
  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-family:'Poppins'; font-size:.72rem; letter-spacing:3px; text-transform:uppercase;
    color:var(--sandstone); font-weight:600; margin-bottom:10px;
  }
  .eyebrow::before{content:""; width:26px; height:2px; background:var(--sandstone); display:inline-block;}
  .section-head{text-align:center; max-width:640px; margin:0 auto 46px;}
  .section-head h2{font-size:clamp(2rem, 4vw, 2.9rem); margin-bottom:12px;}
  .section-head p{color:var(--ink-soft); font-size:1rem;}
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:2px 15px; border-radius:6px; font-weight:600; font-size:.85rem;
    letter-spacing:.4px; cursor:pointer; border:1px solid transparent; transition:all .35s var(--ease);
    white-space:nowrap;
  }
  .btn-primary{background:var(--sandstone); color:#fff;}
  .btn-primary:hover{background:#b3781f; transform:translateY(-2px); box-shadow:0 12px 24px -8px rgba(201,138,44,.55);}
  .btn-outline{border-color:rgba(255,255,255,.6);}
  .btn-outline:hover{background:rgba(255,255,255,.15); transform:translateY(-2px);}
  .btn-line{border-color:var(--lake-mid); color:var(--lake-deep); background:transparent;}
  .btn-line:hover{background:var(--lake-deep); color:#fff; border-color:var(--lake-deep);}
  .btn-wa{background:#1fae59; color:#fff;}
  .btn-wa:hover{background:#178f48; transform:translateY(-2px); box-shadow:0 12px 24px -8px rgba(31,174,89,.55);}
  .btn-sm{padding:9px 16px; font-size:.75rem;}
  .btn-full{width:100%;}

  /* ============ WAVE DIVIDER ============ */
  .wave{display:block; width:100%; line-height:0;}
  .wave svg{width:100%; height:70px; display:block;}

  /* ============ REVEAL ============ */
  .reveal{transform:translateY(34px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
  .reveal.in{opacity:1; transform:translateY(0);}

  /* ============ TOPBAR ============ */
  .topbar{
    background:var(--lake-deep); color:#dceef4; font-size:.78rem;
    padding:8px 0; position:relative; z-index:60;
  }
  .topbar .container{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;}
  .topbar-left{display:flex; gap:22px; flex-wrap:wrap;}
  .topbar-left a{display:flex; align-items:center; gap:7px; color:#dceef4; transition:color .25s;}
  .topbar-left a:hover{color:var(--gold);}
  .topbar-left i{color:var(--gold); font-size:.85rem;}
  .topbar-right{display:flex; align-items:center; gap:14px;}
  .social-ic{
    width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.08); font-size:.72rem; transition:all .3s var(--ease);
  }
  .social-ic:hover{background:var(--sandstone); transform:translateY(-3px);}
  .topbar-wa{
    display:flex; align-items:center; gap:6px; background:#1fae59; padding:5px 12px; border-radius:20px; font-weight:500;
  }
  .topbar-wa:hover{background:#178f48;}

  /* ============ HEADER ============ */
  header.site{
    position:sticky; top:0; z-index:59; background:#FFFEFF;
    backdrop-filter:blur(10px); box-shadow:0 2px 18px rgba(11,59,77,.08);
    transition:all .4s var(--ease);
  }
  .nav-wrap{display:flex; align-items:center; justify-content:space-between; padding:3px 0; transition:padding .35s;}
  header.site.shrink .nav-wrap{padding:9px 0;}
  .logo{display:flex; align-items:center; gap:11px;}
  .logo-badge{
    width:46px; height:46px; border-radius:var(--arch); background:linear-gradient(160deg,var(--lake-mid),var(--lake-deep));
    display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:1.2rem; flex-shrink:0;
    box-shadow:0 8px 16px -6px rgba(11,59,77,.5);
  }
  .logo-text .l1{font-family:'Cormorant Garamond'; font-weight:700; font-size:1.5rem; color:var(--lake-deep); letter-spacing:.5px; line-height:1;}
  .logo-text .l2{font-size:.6rem; letter-spacing:3px; text-transform:uppercase; color:var(--sandstone); font-weight:600;}
  nav.menu{display:flex; align-items:center; gap:34px;}
  nav.menu a{
    font-size:.85rem; font-weight:500; color:var(--ink); position:relative; padding:6px 0;
  }
  nav.menu a::after{
    content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--sandstone); transition:width .3s var(--ease);
  }
  nav.menu a:hover::after, nav.menu a.active::after{width:100%;}
  .nav-cta{display:flex; align-items:center; gap:14px;}
  .toggle-btn{
    display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; z-index:70; padding:6px;
  }
  .toggle-btn span{width:26px; height:2.5px; background:var(--lake-deep); border-radius:2px; transition:all .35s var(--ease);}
  .toggle-btn.active span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
  .toggle-btn.active span:nth-child(2){opacity:0;}
  .toggle-btn.active span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
  .nav-overlay{
    position:fixed; inset:0; background:rgba(11,20,23,.5); opacity:0; pointer-events:none; transition:opacity .35s; z-index:55;
  }
  .nav-overlay.active{opacity:1; pointer-events:auto;}

 @media (max-width: 920px) {

  nav.menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    width: 100%;
    height: auto;
    min-height: 100vh;

    background: var(--marble);

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    padding: 46px 30px 40px;
    gap: 24px;

    /* Hidden above the screen */
    transform: translateY(-100%);

    /* Smooth top-to-bottom animation */
    opacity: 0;
    visibility: hidden;

    transition:
      transform 0.55s cubic-bezier(.77,0,.18,1),
      opacity 0.35s ease,
      visibility 0.55s ease;

    box-shadow: 0 20px 50px rgba(0,0,0,.18);

    z-index: 60;
    overflow-y: auto;
  }

  /* Open menu */
  nav.menu.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  /* Menu links animation */
  nav.menu a {
    width: 100%;
    padding: 1px 0;

    font-size: 18px;
    text-decoration: none;

    opacity: 0;
    transform: translateY(-15px);

    transition:
      opacity 0.4s ease,
      transform 0.4s ease;
  }

  /* Animate links after menu opens */
  nav.menu.active a {
    opacity: 1;
    transform: translateY(0);
  }

  /* Small delay for each menu item */
  nav.menu.active a:nth-child(1) {
    transition-delay: .10s;
  }

  nav.menu.active a:nth-child(2) {
    transition-delay: .15s;
  }

  nav.menu.active a:nth-child(3) {
    transition-delay: .20s;
  }

  nav.menu.active a:nth-child(4) {
    transition-delay: .25s;
  }

  nav.menu.active a:nth-child(5) {
    transition-delay: .30s;
  }

  nav.menu.active a:nth-child(6) {
    transition-delay: .35s;
  }

  .nav-cta .btn-line {
    display: none;
  }

  .toggle-btn {
    display: flex;
    position: relative;
    z-index: 70;
  }
}

  /* ============ HERO SLIDER ============ */
  .hero{position:relative; height:92vh; min-height:560px; overflow:hidden; color:#fff;}
  .slide{
    position:absolute; inset:0; opacity:0; transition:opacity 1.3s ease;
    background-size:cover; background-position:center; transform:scale(1.08);
    animation: none;
  }
  .slide.active{opacity:1; animation:kenburns 9s ease-in-out forwards;}
  @keyframes kenburns{from{transform:scale(1.12);} to{transform:scale(1);}}
  .hero::before{
    content:""; position:absolute; inset:0; z-index:2;
    background:linear-gradient(180deg, rgba(6,30,40,.55) 0%, rgba(6,30,40,.35) 40%, rgba(6,30,40,.75) 100%);
  }
  .hero-content{
    position:relative; z-index:3; height:100%; display:flex; flex-direction:column; align-items:center;
    justify-content:center; text-align:center; padding:0 20px;
  }
  .hero-content .eyebrow{color:var(--gold);}
  .hero-content .eyebrow::before{background:var(--gold);}
  .hero-content h2{
    font-size:clamp(2.4rem, 6vw, 4.6rem); color:#fff; max-width:900px; text-shadow:0 8px 30px rgba(0,0,0,.35);
  }
  .hero-content h2 em{font-style:italic; color:var(--gold);}
  .hero-content p{max-width:560px; margin:20px auto 32px; color:#eaf3f6; font-size:1.05rem;}
  .hero-btns{display:flex; gap:16px; flex-wrap:wrap; justify-content:center;}
  .hero-arch{
    position:absolute; bottom:-2px; left:50%; transform:translateX(-50%); width:min(220px,60vw); z-index:3; opacity:.9;
  }
  .slider-dots{position:absolute; z-index:4; bottom:100px; left:50%; transform:translateX(-50%); display:flex; gap:10px;}
  .slider-dots button{
    width:10px; height:10px; border-radius:50%; border:1.5px solid #fff; background:transparent; cursor:pointer; transition:all .3s;
  }
  .slider-dots button.active{background:var(--gold); border-color:var(--gold); width:26px; border-radius:6px;}
  .slider-arrows{position:absolute; z-index:4; bottom:96px; width:100%; display:flex; justify-content:space-between; padding:0 4%;}
  .slider-arrows button{
    width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.4);
    color:#fff; cursor:pointer; backdrop-filter:blur(6px); transition:all .3s;
  }
  .slider-arrows button:hover{background:var(--sandstone); border-color:var(--sandstone);}
  @media(max-width:700px){.slider-arrows{display:none;}}

  .stats-strip{
    position:relative; z-index:5; margin-top:-56px; display:flex; justify-content:center;
  }
  .stats-strip .container{
    background:#fff; border-radius:16px; box-shadow:var(--shadow); display:flex; flex-wrap:wrap;
    justify-content:space-around; padding:26px 20px; gap:18px;
  }
  .stat{text-align:center; padding:0 12px;}
  .stat h3{font-size:2.1rem; color:var(--maroon);}
  .stat span{font-size:.72rem; text-transform:uppercase; letter-spacing:1.5px; color:var(--ink-soft); font-weight:600;}

  /* ============ ABOUT ============ */
  .about{padding:130px 0 90px; background:var(--marble);}
  .about-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:center;}
  .about-img{position:relative;}
  .about-img .frame{
    border-radius:var(--arch); overflow:hidden; box-shadow:var(--shadow); border:6px solid #fff;
  }
  .about-img .frame img{height:460px; width:100%; object-fit:cover;}
  .about-img .badge-float{
    position:absolute; bottom:-30px; right:-24px; background:var(--maroon); color:#fff; padding:20px 24px;
    border-radius:14px; box-shadow:0 18px 30px -12px rgba(122,31,43,.5); text-align:center;
  }
  .about-img .badge-float h4{color:var(--gold); font-size:2.1rem;}
  .about-img .badge-float span{font-size:.68rem; letter-spacing:1.5px; text-transform:uppercase;}
  .about-text h2{font-size:clamp(2rem,4vw,2.8rem); margin-bottom:18px;}
  .about-text p{color:var(--ink-soft); margin-bottom:16px; text-align: justify;}
  .about-list{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:24px 0 30px;}
  .about-list li{display:flex; gap:10px; align-items:flex-start; font-size:.9rem; color:var(--ink);}
  .about-list i{color:var(--sandstone); margin-top:3px;}
  @media(max-width:860px){.about-grid{grid-template-columns:1fr; gap:70px;} .about-list{grid-template-columns:1fr;}}

  /* ============ CARD GRID SECTIONS ============ */
  .section{padding:100px 0;}
  .section.alt{background:var(--lake-deep); color:#fff;}
  .section.alt .section-head h2{color:#fff;}
  .section.alt .section-head p{color:#bcd8e2;}
  .grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:32px;}
  .grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:32px;}

  @media(max-width:960px){.grid3{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:620px){.grid3{grid-template-columns:1fr;}}
 @media(max-width:960px){.grid4{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:620px){.grid4{grid-template-columns:1fr;}}

  .card{
    background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 14px 30px -16px rgba(11,59,77,.25);
    transition:transform .45s var(--ease), box-shadow .45s var(--ease); position:relative;
  }
  .card:hover{transform:translateY(-9px); box-shadow:0 26px 45px -18px rgba(11,59,77,.4);}
  .card-img{position:relative; height:230px; overflow:hidden; border-radius:0 0 0 0;}
  .card-img img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease);}
  .card:hover .card-img img{transform:scale(1.12) rotate(1deg);}
  .card-img::after{
    content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,59,77,0) 40%, rgba(11,29,38,.75) 100%);
  }
  .card-tag{
    position:absolute; top:14px; left:14px; z-index:2; background:var(--sandstone); color:#fff; font-size:.68rem;
    padding:6px 12px; border-radius:20px; letter-spacing:.5px; font-weight:600;
  }
  .card-body{padding:24px 22px 22px;}
  .card-body h3{font-size:1.35rem; margin-bottom:10px; color:var(--lake-deep);}
  .card-meta{display:flex; gap:16px; flex-wrap:wrap; font-size:.78rem; color:var(--ink-soft); margin-bottom:14px;}
  .card-meta span{display:flex; align-items:center; gap:6px;}
  .card-meta i{color:var(--sandstone);}
  .card-price{
    display:flex; align-items:center; justify-content:space-between; padding-top:14px; margin-top:6px;
    border-top:1px dashed #e3d9c2;
  }
  .card-price .price{font-family:'Cormorant Garamond'; font-weight:700; font-size:1.05rem; color:var(--maroon);}
  .card-price .price small{font-family:'Poppins'; font-weight:400; font-size:.68rem; color:var(--ink-soft); display:block;}
  .card-actions{display:flex; gap:10px; margin-top:16px;}
  .card p.desc{color:var(--ink-soft); font-size:.85rem; margin-bottom:8px; text-align: justify;}

  /* Tourism / Attractions simpler cards */
  .place-card .card-body{padding:20px;}
  .place-card h3{font-size:1.2rem;}

  /* ============ CAR RENTAL ============ */
  .rental{
    background:linear-gradient(155deg, var(--lake-deep), var(--lake-mid) 120%);
    position:relative; color:#fff; overflow:hidden;
  }
  .rental::before{
    content:""; position:absolute; inset:0; opacity:.14; background-image:
    radial-gradient(circle at 15% 25%, #fff 0, transparent 2px),
    radial-gradient(circle at 80% 15%, #fff 0, transparent 2px),
    radial-gradient(circle at 60% 80%, #fff 0, transparent 2px);
    background-size:140px 140px;
  }
  .rental .section-head h2{color:#fff;}
  .rental .section-head p{color:#cfe6ee;}
  .rental-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; position:relative; z-index:2;}
  @media(max-width:980px){.rental-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:560px){.rental-grid{grid-template-columns:1fr;}}
  .rental-card{
    background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:16px; padding:12px 12px;
    backdrop-filter:blur(6px); transition:all .4s var(--ease);
  }
  .rental-card:hover{background:rgba(255,255,255,.14); transform:translateY(-8px);}
  .rental-ic{
    border-radius:var(--arch);  color:var(--lake-deep);
    display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:18px;
  }
  .rental-ic img{border-radius: 10px; }
  .rental-card h3{color:#fff; font-size:1.25rem; margin-bottom:8px;}
  .rental-card p{color:#cfe6ee; font-size:.83rem; margin-bottom:14px; min-height:58px;}
  .rental-price{font-family:'Cormorant Garamond'; font-weight:700; color:var(--gold); font-size:1.15rem; margin-bottom:16px;}
  .rental-actions{display:flex; gap:8px; flex-wrap:wrap;}

  .rental-note{
    display:flex; align-items:center; gap:14px; background:rgba(255,255,255,.08); border:1px dashed rgba(255,255,255,.35);
    border-radius:14px; padding:20px 24px; margin-top:46px; position:relative; z-index:2; flex-wrap:wrap;
  }
  .rental-note i{font-size:1.6rem; color:var(--gold);}
  .rental-note p{color:#e7f2f6; font-size:.88rem; flex:1; min-width:220px;}

  /* ============ CTA BAND ============ */
  .cta-band{
    background:url('https://commons.wikimedia.org/wiki/Special:FilePath/Ambrai%20ghat%20at%20evening.jpg') center/cover fixed;
    position:relative; padding:110px 0; text-align:center; color:#fff;
  }
  .cta-band::before{content:""; position:absolute; inset:0; background:rgba(9,34,45,.72);}
  .cta-band .container{position:relative; z-index:2;}
  .cta-band h2{color:#fff; font-size:clamp(2rem,4.5vw,3rem); margin-bottom:16px;}
  .cta-band p{color:#dcedf2; max-width:560px; margin:0 auto 30px;}
  .cta-band .hero-btns{justify-content:center;}

  /* ============ FOOTER ============ */
  footer{background:var(--ink); color:#c9d6d8; position:relative;}
  .footer-top{padding:90px 0 50px;}
  .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:44px;}
  @media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
  @media(max-width:560px){.footer-grid{grid-template-columns:1fr;}}
  .footer-logo{display:flex; align-items:center; gap:11px; margin-bottom:18px;}
  .footer-logo .logo-text .l1{color:#fff;}
  footer h4{color:#fff; font-family:'Cormorant Garamond'; font-size:1.25rem; margin-bottom:20px; position:relative; padding-bottom:10px;}
  footer h4::after{content:""; position:absolute; left:0; bottom:0; width:34px; height:2px; background:var(--sandstone);}
  footer p{font-size:.85rem; color:#a9bcc0; margin-bottom:16px;}
  .footer-social{display:flex; gap:10px;}
  .footer-social a{
    width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.07); display:flex; align-items:center;
    justify-content:center; transition:all .3s var(--ease); color:#fff;
  }
  .footer-social a:hover{background:var(--sandstone); transform:translateY(-4px);}
  .footer-links li{margin-bottom:12px;}
  .footer-links a{font-size:.87rem; color:#a9bcc0; transition:all .3s; display:flex; gap:8px; align-items:center;}
  .footer-links a:hover{color:var(--gold); padding-left:4px;}
  .footer-links i{font-size:.65rem; color:var(--sandstone);}
  .footer-contact li{display:flex; gap:12px; margin-bottom:16px; font-size:.85rem; color:#c9d6d8;}
  .footer-contact i{color:var(--gold); margin-top:3px;}
  .newsletter{display:flex; margin-top:6px; border-radius:8px; overflow:hidden; border:1px solid rgba(255,255,255,.15);}
  .newsletter input{flex:1; border:none; background:rgba(255,255,255,.05); padding:12px 14px; color:#fff; font-size:.82rem;}
  .newsletter input:focus{outline:none;}
  .newsletter button{background:var(--sandstone); color:#fff; border:none; padding:0 18px; cursor:pointer;}

  .footer-bottom{
    border-top:1px solid rgba(255,255,255,.08); padding:22px 0 100px;
  }
  .footer-bottom .container{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;}
  .fb-copy{font-size:.78rem; color:#93a6a9;}
  .fb-contacts{display:flex; gap:14px; flex-wrap:wrap;}
  .fb-chip{
    display:flex; align-items:center; gap:8px; font-size:.78rem; background:rgba(255,255,255,.06);
    padding:8px 14px; border-radius:24px; transition:all .3s;
  }
  .fb-chip i{color:var(--gold);}
  .fb-chip:hover{background:var(--sandstone); color:#fff;}
  .fb-chip:hover i{color:#fff;}

  /* ============ FLOATING FIXED BUTTONS ============ */
  .float-stack{position:fixed; right:22px; bottom:26px; z-index:80; display:flex; flex-direction:column; gap:14px; align-items:flex-end;}
  .float-btn{
    width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:1.4rem; box-shadow:0 14px 28px -10px rgba(0,0,0,.4); position:relative; cursor:pointer;
  }
  .float-btn.wa{background:#25D366;}
  .float-btn.call{background:var(--maroon);}
  .float-btn::before{
    content:""; position:absolute; inset:0; border-radius:50%; border:2px solid currentColor; opacity:.6;
    animation:pulse 2.2s infinite;
  }
  .float-btn.wa::before{color:#25D366;}
  .float-btn.call::before{color:var(--maroon);}
  @keyframes pulse{0%{transform:scale(1); opacity:.6;} 100%{transform:scale(1.7); opacity:0;}}
  .float-label{
    position:absolute; right:70px; top:50%; transform:translateY(-50%); background:#fff; color:var(--ink);
    padding:7px 14px; border-radius:6px; font-size:.75rem; font-weight:600; white-space:nowrap; box-shadow:0 8px 18px rgba(0,0,0,.15);
    opacity:0; pointer-events:none; transition:opacity .25s;
  }
  .float-btn:hover .float-label{opacity:1;}
  .top-scroll{
    width:44px; height:44px; border-radius:50%; background:var(--lake-deep); color:#fff; display:flex; align-items:center;
    justify-content:center; box-shadow:0 10px 20px -8px rgba(0,0,0,.3); opacity:0; pointer-events:none; transition:all .35s;
  }
  .top-scroll.show{opacity:1; pointer-events:auto;}

  /* ============ MODAL (View More) ============ */
  .modal-overlay{
    position:fixed; inset:0; background:rgba(9,25,32,.72); z-index:100; display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .35s; padding:20px;
  }
  .modal-overlay.active{opacity:1; pointer-events:auto;}
  .modal-box{
    background:#fff; max-width:560px; width:100%; border-radius:18px; overflow:hidden; transform:translateY(30px) scale(.96);
    transition:transform .4s var(--ease); box-shadow:0 30px 60px rgba(0,0,0,.35);
  }
  .modal-overlay.active .modal-box{transform:translateY(0) scale(1);}
  .modal-img{height:230px; overflow:hidden;}
  .modal-img img{width:100%; height:100%; object-fit:cover;}
  .modal-content{padding:28px 30px 30px;}
  .modal-content h3{font-size:1.6rem; margin-bottom:10px;}
  .modal-content p{color:var(--ink-soft); font-size:.9rem; margin-bottom:20px;}
  .modal-close{
    position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.9);
    display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; color:var(--ink);
  }
  .modal-actions{display:flex; gap:10px;}

  ::selection{background:var(--gold); color:var(--ink);}