:root {
    --bg: #f2f2f2;
    --ink: #000;
    --ink-soft: #2b2b2b;
    --gold: #efc018;
    --line: #000;
    --pad: clamp(16px, 6.8vw, 130px);
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  section { scroll-margin-top: 0; }
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  a { color: inherit; text-decoration: none; }
  .gold { fill: var(--gold); }

  /* ---------- Logo ---------- */
  .logo svg { display: block; width: 100%; height: auto; fill: var(--ink); }

  /* ---------- Navigation: plain at top (hero design), floating pill after scroll (floating-menu design) ---------- */
  .nav {
    position: fixed; z-index: 50;
    top: 0; left: 0; right: 0;
    display: flex; justify-content: center;
    padding: 34px var(--pad) 0;
    pointer-events: none;
  }
  .nav-bar {
    pointer-events: auto;
    width: 100%;
    display: flex; align-items: center; justify-content: flex-end;
    padding: 0;
    border-radius: 26px;
    background: transparent;
    transition: background .45s ease, box-shadow .45s ease, padding .45s ease, max-width .45s ease;
  }
  .nav .logo {
    width: 0; opacity: 0; overflow: hidden;
    transition: width .45s ease, opacity .35s ease;
    flex-shrink: 0;
  }
  .nav-links { display: flex; align-items: center; list-style: none; margin-left: auto; }
  .nav-links li { display: flex; align-items: center; }
  .nav-links a {
    font-weight: 500; font-size: clamp(14px, 1.05vw, 20px);
    letter-spacing: .1em; text-transform: uppercase;
    position: relative; padding: 6px 0;
  }
  .nav-links a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--gold); transform: scaleX(0); transform-origin: left;
    transition: transform .3s ease;
  }
  .nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
  .nav-links .sep { font-weight: 600; margin: 0 clamp(14px, 2vw, 40px); font-size: clamp(14px, 1.05vw, 20px); }
  .menu-btn { display: none; }

  .nav.floating { padding-top: 22px; padding-left: clamp(16px, 2vw, 40px); padding-right: clamp(16px, 2vw, 40px); }
  .nav.floating .nav-bar {
    max-width: 1098px;
    min-height: 106px;
    background: var(--bg);
    box-shadow: 0 0 20px rgba(0,0,0,.6);
    padding: 14px 44px 14px 31px;
  }
  .nav.floating .logo { width: 268px; opacity: 1; }
  .nav.floating .nav-links a, .nav.floating .nav-links .sep { font-size: 17px; }
  .nav.floating .nav-links .sep { margin: 0 clamp(12px, 1.8vw, 34px); }

  /* ---------- Hero ---------- */
  .hero {
    position: relative; height: 100vh; height: 100dvh; min-height: 560px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
  }
  #particles { position: absolute; inset: 0; width: 100%; height: 100%; }
  .hero-center {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 0 20px;
  }
  .hero-logo {
    position: relative;
    width: clamp(260px, 26.5vw, 510px);
    transform-style: preserve-3d;
    transition: transform .2s ease-out;
  }

  /* ---------- Section titles ---------- */
  .title {
    font-weight: 600; text-transform: uppercase;
    font-size: clamp(30px, 2.95vw, 57px);
    letter-spacing: .09em; line-height: 1.1;
    white-space: nowrap;
  }
  .body-text {
    font-size: clamp(16px, 1.12vw, 20px);
    letter-spacing: .02em; line-height: 1.65;
    text-align: left;
    color: var(--ink);
    max-width: 62ch;
  }

  /* ---------- Tentang Kami ---------- */
  .about {
    min-height: 100vh;
    display: grid; grid-template-columns: 1fr 1fr; align-items: center;
    padding: 120px var(--pad);
    gap: 40px;
  }
  .about .title { padding-left: clamp(0px, 3.2vw, 60px); }
  .about .about-body { max-width: 592px; margin-left: clamp(0px, 3.1vw, 60px); }
  .about .body-text p + p { margin-top: 1.1em; }

  /* ---------- Layanan ---------- */
  .services { min-height: 100vh; padding: 170px clamp(16px, 3.1vw, 60px) 120px; }
  .services .title { padding-left: 0; }
  .cards {
    margin-top: clamp(48px, 6.7vw, 128px);
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 1.9vw, 38px);
    perspective: 1200px;
  }
  .card {
    border: 1px solid var(--line);
    aspect-ratio: 421 / 561;
    display: flex; flex-direction: column; align-items: center;
    padding: 21% 14% 10%;
    background: var(--bg);
    transition: transform .25s ease-out, box-shadow .3s ease;
    will-change: transform;
  }
  .card:hover { box-shadow: 0 18px 40px rgba(0,0,0,.12); }
  .card h3 {
    font-weight: 600; text-transform: uppercase; text-align: center;
    font-size: clamp(18px, 1.72vw, 33px); letter-spacing: .09em;
  }
  .card h3::after {
    content: ''; display: block; width: 0; height: 3px; margin: 14px auto 0;
    background: var(--gold); transition: width .35s ease;
  }
  .card:hover h3::after { width: 48px; }
  .card .body-text {
    margin-top: auto; margin-bottom: auto;
    font-size: clamp(14px, .9vw, 16.5px); line-height: 1.55;
    text-align: center;
  }

  /* ---------- Kontak ---------- */
  .contact {
    min-height: 80vh;
    display: grid; grid-template-columns: 1fr 1fr; align-items: center;
    padding: 120px var(--pad) 80px; gap: 40px;
  }
  .contact .title { padding-left: clamp(0px, 3.2vw, 60px); }
  .contact-body { margin-left: clamp(0px, 3.1vw, 60px); max-width: 592px; }
  .contact-list { list-style: none; }
  .contact-list li {
    display: grid; grid-template-columns: 150px 1fr; gap: 16px;
    padding: 18px 0; border-bottom: 1px solid var(--line);
    font-size: clamp(15px, 1.12vw, 21.5px); letter-spacing: .08em;
  }
  .contact-list li:first-child { border-top: 1px solid var(--line); }
  .contact-list .k { font-weight: 600; text-transform: uppercase; font-size: .8em; letter-spacing: .14em; padding-top: .2em; }
  .contact-list a:hover { color: #9a7a00; }
  .cta {
    display: inline-block; margin-top: 36px;
    border: 1px solid var(--ink); padding: 16px 30px;
    font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: 14px;
    background: var(--ink); color: var(--bg);
    transition: background .25s ease, color .25s ease;
  }
  .cta:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

  footer {
    padding: 40px var(--pad);
    display: flex; justify-content: space-between; align-items: center; gap: 20px;
    font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
    border-top: 1px solid rgba(0,0,0,.15);
  }
  footer .logo { width: 140px; }

  /* ---------- Reveal ---------- */
  /* Hidden only when JavaScript runs; without it everything stays visible. */
  .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s ease; }
  .js .reveal.in { opacity: 1; transform: none; }

  /* ---------- Responsive ---------- */
  @media (max-width: 1100px) {
    .cards { grid-template-columns: repeat(2, 1fr); }
    .card { aspect-ratio: auto; min-height: 420px; padding: 56px 12% 48px; }
    .card .body-text { font-size: 15px; margin-top: 24px; margin-bottom: 28px; }
  }
  @media (max-width: 860px) {
    .nav, .nav.floating { padding: 16px; }
    .nav-bar, .nav.floating .nav-bar { justify-content: space-between; padding: 12px 20px; background: var(--bg); box-shadow: 0 0 20px rgba(0,0,0,.35); max-width: none; min-height: 0; }
    section { scroll-margin-top: 84px; }
    .body-text { text-align: left; hyphens: manual; }
    .card .body-text { text-align: center; }
    .hero-tagline { font-size: 15px; }
    .nav .logo, .nav.floating .logo { width: 150px; opacity: 1; }
    .menu-btn {
      display: block; background: none; border: 0; cursor: pointer;
      font: 600 13px 'Montserrat', sans-serif; letter-spacing: .14em; color: var(--ink); padding: 8px 0;
    }
    .nav-links {
      position: absolute; top: calc(100% + 8px); left: 16px; right: 16px;
      flex-direction: column; align-items: stretch;
      background: var(--bg); border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,.25);
      padding: 8px 24px; display: none;
    }
    .nav.open .nav-links { display: flex; }
    .nav-links .sep { display: none; }
    .nav-links li a { display: block; width: 100%; padding: 16px 0; border-bottom: 1px solid rgba(0,0,0,.1); font-size: 15px; }
    .nav-links li:last-child a { border-bottom: 0; }
    .nav-links a::after { display: none; }
    .about, .contact { grid-template-columns: 1fr; padding: 110px 20px 80px; min-height: 0; }
    .about .title, .contact .title, .services .title { padding-left: 0; white-space: normal; }
    .about .body-text, .contact-body { margin-left: 0; }
    .services { padding: 80px 20px; min-height: 0; }
    .contact-list li { grid-template-columns: 1fr; gap: 4px; }
    footer { flex-direction: column; text-align: center; padding: 32px 20px; }
  }
  @media (max-width: 560px) {
    .cards { grid-template-columns: 1fr; }
    .card { min-height: 0; padding: 44px 28px 36px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .js .reveal { opacity: 1; transform: none; transition: none; }
  }

  /* =========================================================
     Additions: reviews, card links, service landing pages
     ========================================================= */

  /* Spots still waiting for real content. Remove the class once filled. */
  .ph { background: rgba(239,192,24,.35); padding: 0 .3em; }

  a.card { color: inherit; cursor: pointer; }
  .card .more { margin-top: 4px;
    font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
    border-bottom: 2px solid transparent; padding-bottom: 4px; transition: border-color .3s ease;
  }
  .card:hover .more { border-color: var(--gold); }

  .btn-line {
    display: inline-block; margin-top: 36px;
    border: 1px solid var(--ink); padding: 16px 30px;
    font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: 14px;
    transition: background .25s ease, color .25s ease;
  }
  .btn-line:hover { background: var(--ink); color: var(--bg); }
  .cta + .btn-line { margin-left: 12px; }

  /* ---------- Ulasan ---------- */
  .reviews {
    min-height: 80vh;
    display: grid; grid-template-columns: 1fr 1fr; align-items: center;
    padding: 120px var(--pad); gap: 40px;
  }
  .reviews .title { padding-left: clamp(0px, 3.2vw, 60px); }
  .reviews-body { margin-left: clamp(0px, 3.1vw, 60px); max-width: 592px; }
  .score { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
  .score .num { font-size: clamp(64px, 6vw, 112px); font-weight: 600; letter-spacing: .02em; line-height: 1; }
  .score .stars { color: var(--gold); font-size: clamp(22px, 1.8vw, 32px); letter-spacing: .12em; }
  .score-meta { margin-top: 10px; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
  .themes { list-style: none; margin-top: 36px; }
  .themes li {
    padding: 16px 0; border-bottom: 1px solid var(--line);
    font-size: clamp(15px, 1.12vw, 21.5px); letter-spacing: .08em;
    display: grid; grid-template-columns: 56px 1fr;
  }
  .themes li:first-child { border-top: 1px solid var(--line); }
  .themes li span { font-weight: 600; }

  /* ---------- Landing page: hero ---------- */
  .page-hero {
    min-height: 88vh;
    display: grid; grid-template-columns: 1fr 1fr; align-items: center;
    padding: 190px var(--pad) 100px; gap: 40px;
  }
  .kicker { font-size: 13px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; margin-bottom: 22px; }
  .page-hero .head { padding-left: clamp(0px, 3.2vw, 60px); }
  .page-hero .title { font-size: clamp(36px, 4.6vw, 88px); white-space: normal; }
  .page-hero .title::after { content: ''; display: block; width: 72px; height: 4px; background: var(--gold); margin-top: 28px; }
  .page-hero .body-wrap { margin-left: clamp(0px, 3.1vw, 60px); max-width: 592px; }

  /* ---------- Landing page: generic block ---------- */
  .block { padding: 110px clamp(16px, 3.1vw, 60px); }
  .block > .title { padding-left: 0; }
  .block-inner { margin-top: clamp(40px, 5vw, 90px); }

  .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 30px); }
  .gallery .slot {
    aspect-ratio: 4 / 3; border: 1px dashed var(--ink);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600; letter-spacing: .24em; color: #777;
    background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(0,0,0,.025) 14px 15px);
  }
  .gallery .slot:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }

  .packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.9vw, 38px); }
  .package { border: 1px solid var(--line); padding: 48px 40px; display: flex; flex-direction: column; }
  .package h3 { font-weight: 600; font-size: clamp(18px, 1.5vw, 28px); letter-spacing: .1em; text-transform: uppercase; }
  .package .price { margin-top: 18px; font-size: clamp(24px, 2vw, 38px); font-weight: 600; letter-spacing: .04em; }
  .package .price small { font-size: .45em; letter-spacing: .14em; font-weight: 500; display: block; margin-bottom: 6px; }
  .package ul { list-style: none; margin: 28px 0 0; }
  .package li { padding: 12px 0; border-top: 1px solid rgba(0,0,0,.15); font-size: 15px; letter-spacing: .06em; }
  .package .btn-line { margin-top: auto; padding-top: 16px; text-align: center; }
  .package ul + .btn-line { margin-top: 32px; }
  .package.featured { box-shadow: 0 18px 40px rgba(0,0,0,.12); border-top: 4px solid var(--gold); }

  .steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
  .step { padding: 36px 28px 40px 0; border-right: 1px solid rgba(0,0,0,.15); }
  .step + .step { padding-left: 28px; }
  .step:last-child { border-right: 0; }
  .step .n { font-size: 14px; font-weight: 600; letter-spacing: .24em; }
  .step h3 { margin: 18px 0 12px; font-size: clamp(17px, 1.3vw, 24px); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
  .step p { font-size: 15px; letter-spacing: .06em; line-height: 1.45; }

  .faq { max-width: 1100px; }
  .faq details { border-bottom: 1px solid var(--line); }
  .faq details:first-child { border-top: 1px solid var(--line); }
  .faq summary {
    list-style: none; cursor: pointer; padding: 24px 48px 24px 0; position: relative;
    font-size: clamp(16px, 1.2vw, 22px); font-weight: 500; letter-spacing: .08em;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: '+'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    font-size: 26px; font-weight: 400; transition: transform .25s ease;
  }
  .faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
  .faq details p { padding: 0 48px 26px 0; font-size: 16px; letter-spacing: .06em; line-height: 1.5; max-width: 820px; }

  .others { list-style: none; border-top: 1px solid var(--line); }
  .others a {
    display: flex; justify-content: space-between; align-items: center;
    padding: 28px 0; border-bottom: 1px solid var(--line);
    font-size: clamp(22px, 2.2vw, 42px); font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
    transition: padding .3s ease;
  }
  .others a span { font-size: .5em; letter-spacing: .2em; }
  .others a:hover { padding-left: 18px; }
  .others a:hover span { color: #9a7a00; }

  @media (max-width: 1100px) {
    .packages { grid-template-columns: 1fr 1fr; }
    .steps { grid-template-columns: 1fr 1fr; }
    .step:nth-child(2) { border-right: 0; }
    .step:nth-child(3) { padding-left: 0; }
    .step:nth-child(n+3) { border-top: 1px solid rgba(0,0,0,.15); }
  }
  @media (max-width: 860px) {
    .reviews, .page-hero { grid-template-columns: 1fr; padding: 110px 20px 70px; min-height: 0; }
    .page-hero { padding-top: 130px; }
    .reviews .title, .page-hero .head, .block > .title { padding-left: 0; white-space: normal; }
    .reviews-body, .page-hero .body-wrap { margin-left: 0; }
    .block { padding: 70px 20px; }
    .gallery { grid-template-columns: 1fr 1fr; }
    .packages { grid-template-columns: 1fr; }
    .cta + .btn-line { margin-left: 0; }
    .cta, .btn-line { display: block; text-align: center; }
  }
  @media (max-width: 560px) {
    .steps { grid-template-columns: 1fr; }
    .step, .step + .step { padding: 28px 0; border-right: 0; }
    .step + .step { border-top: 1px solid rgba(0,0,0,.15); }
    .others a { font-size: 20px; }
  }
  .body-text p + p { margin-top: 1.1em; }
  @media (max-width: 860px) {
    .gallery .slot:first-child { grid-row: auto; aspect-ratio: 16 / 9; }
  }

  /* Real gallery media uploaded from /admin */
  .gallery .slot.media { margin: 0; border: 0; background: #e6e6e6; overflow: hidden; }
  .gallery .slot.media img, .gallery .slot.media video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
  .gallery .slot.media:hover img, .gallery .slot.media:hover video { transform: scale(1.04); }
  .steps { grid-template-columns: repeat(var(--n, 4), 1fr); }
  @media (max-width: 1100px) { .steps { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
  .gallery .slot.media:only-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; }

  /* Hero: one line about what we do + the booking button */
  .hero-tagline {
    margin-top: clamp(22px, 2.2vw, 36px);
    max-width: 34ch;
    font-size: clamp(15px, 1.1vw, 19px); font-weight: 500;
    letter-spacing: .04em; line-height: 1.5;
  }
  .hero-cta { margin-top: clamp(22px, 2vw, 32px); }
  .js .hero-center > * { animation: heroIn 1s cubic-bezier(.16, 1, .3, 1) backwards; }
  .js .hero-center > :nth-child(2) { animation-delay: .25s; }
  .js .hero-center > :nth-child(3) { animation-delay: .4s; }
  @keyframes heroIn { from { opacity: 0; transform: translateY(14px); } }
  @media (prefers-reduced-motion: reduce) { .js .hero-center > * { animation: none; } }

  /* Photos uploaded from /admin (hidden until there is one) */
  .about-img { margin: 36px 0 0; aspect-ratio: 3 / 2; overflow: hidden; background: #e6e6e6; }
  .about-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .card.has-img { padding: 0 0 9%; }
  .card-img { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #e6e6e6; margin-bottom: 12%; }
  .card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
  .card:hover .card-img img { transform: scale(1.05); }
  .card.has-img h3, .card.has-img .body-text, .card.has-img .more { margin-left: 12%; margin-right: 12%; }
  .card.has-img .body-text { margin-top: 22px; margin-bottom: auto; padding-bottom: 22px; }
  @media (max-width: 1100px) { .card.has-img { padding: 0 0 40px; } .card-img { margin-bottom: 36px; } }
  @media (max-width: 860px) { .about .about-body { margin-left: 0; } }
  @media (prefers-reduced-motion: reduce) { .card-img img { transition: none; } }
  /* Once any card has a photo, cards size to the tallest one so the row stays even */
  .cards:has(.has-img) .card { aspect-ratio: auto; }

  /* =========================================================
     v2: cards that always fit, headings clear of the menu, shorter page
     ========================================================= */

  /* Service cards: a column never grows past its share (long tracked titles like DOKUMENTASI
     used to push the fourth card off a laptop screen); four across only where four fit. */
  .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .card { min-width: 0; }
  .card h3 { overflow-wrap: anywhere; }
  @media (max-width: 1320px) {
    .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .card { aspect-ratio: auto; min-height: 360px; padding: 56px 12% 48px; }
    .card .body-text { font-size: 15px; margin-top: 24px; margin-bottom: 28px; }
  }
  @media (max-width: 560px) {
    .cards { grid-template-columns: 1fr; }
    .card { min-height: 0; padding: 44px 28px 36px; }
  }

  /* A menu jump lands the section title below the floating menu bar, not under it. */
  @media (min-width: 861px) { section { scroll-margin-top: 140px; } }

  /* Sections size to their content instead of a full screen each. */
  @media (min-width: 861px) {
    .about, .reviews, .contact { min-height: 0; padding-top: 150px; padding-bottom: 110px; }
    .services { min-height: 0; padding-top: 150px; padding-bottom: 110px; }
    .page-hero { min-height: 70vh; }
  }

  /* Content fades in quicker, so a section reached from the menu is never blank for long. */
  .js .reveal { transform: translateY(16px); transition: opacity .45s ease, transform .45s ease; }

  /* Hero: the Google rating as proof, and a second way in next to the booking button. */
  .hero-proof { margin-top: 14px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
  .hero-proof .star { color: var(--gold); margin-right: 4px; }
  .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: clamp(22px, 2vw, 32px); }
  .hero-actions .cta, .hero-actions .btn-line { margin: 0; }
  .js .hero-center > :nth-child(4) { animation-delay: .55s; }
  @media (max-width: 860px) { .hero-actions { flex-direction: column; align-items: stretch; width: min(320px, 100%); } }

  /* =========================================================
     Section backgrounds set in Admin :: Latar & warna
     data-bg="color|image" carries --sec-bg / --sec-img / --sec-dim; data-tone="light|dark" sets the text.
     ========================================================= */
  [data-bg="color"] { background-color: var(--sec-bg); }
  [data-bg="image"] {
    position: relative; isolation: isolate;
    background-color: #111; background-position: center; background-size: cover; background-repeat: no-repeat;
  }
  [data-bg="image"]::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: rgba(0, 0, 0, var(--sec-dim, .4));
  }
  .hero[data-bg="image"]::before { z-index: 0; }
  .hero[data-bg] #particles { z-index: 1; }

  /* Light text on dark backgrounds: the section swaps its own ink and paper colors,
     so titles, lines, cards and buttons inside follow without per-element rules. */
  [data-tone="light"] { --ink: #fff; --line: rgba(255,255,255,.55); --bg: #141414; color: #fff; }
  [data-tone="light"] .card,
  [data-tone="light"] .package { background: rgba(20,20,20,.72); }
  [data-tone="light"] .contact-list a:hover,
  [data-tone="light"] .others a:hover span { color: var(--gold); }
  [data-tone="light"] .step,
  [data-tone="light"] .package li,
  [data-tone="light"] .step:nth-child(n+3) { border-color: rgba(255,255,255,.25); }
  [data-tone="light"] .gallery .slot { color: #ccc; border-color: rgba(255,255,255,.5); }
  [data-tone="dark"] { --ink: #000; --line: #000; color: #000; }
  footer[data-tone="light"] { border-top-color: rgba(255,255,255,.2); }
  /* The top menu sits over the hero before it turns into the floating bar: white on a dark hero. */
  .nav[data-hero-tone="light"]:not(.floating) .nav-links a,
  .nav[data-hero-tone="light"]:not(.floating) .nav-links .sep { color: #fff; }
  @media (max-width: 860px) { .nav[data-hero-tone="light"]:not(.floating) .nav-links a { color: inherit; } }

  /* White text over a photo gets a soft shadow so bright spots in the picture never wash it out. */
  [data-bg="image"][data-tone="light"] { text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 0 18px rgba(0,0,0,.35); }
  [data-bg="image"][data-tone="light"] .cta, [data-bg="image"][data-tone="light"] .btn-line { text-shadow: none; }

  /* Service page hero: "Chat admin" (WhatsApp) beside "Booking mandiri" (the booking system) */
  .svc-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
  .svc-ctas .cta, .svc-ctas .btn-line { margin: 0; flex: 1 1 150px; min-width: 0; padding: 16px 18px; text-align: center; white-space: nowrap; }
  .svc-cta-note { margin-top: 14px; font-size: 14px; letter-spacing: .02em; line-height: 1.5; opacity: .85; max-width: 46ch; }
  .svc-cta-note a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
  @media (max-width: 860px) { .svc-ctas { flex-direction: column; } .svc-ctas .cta, .svc-ctas .btn-line { display: block; width: 100%; flex: none; } }

  /* Language switch in the menu: ID · EN · JV · SU */
  .nav-links .lang-switch { margin-left: clamp(18px, 2vw, 36px); gap: 2px; border: 1px solid currentColor; border-radius: 99px; padding: 2px; }
  .nav-links .lang-switch a { font-size: 11px; font-weight: 600; letter-spacing: .08em; padding: 5px 8px; border-radius: 99px; line-height: 1; }
  .nav-links .lang-switch a::after { display: none; }
  .nav-links .lang-switch a.on { background: var(--ink); color: var(--bg); }
  .nav[data-hero-tone="light"]:not(.floating) .lang-switch a.on { background: #fff; color: #111; }
  @media (max-width: 860px) {
    .nav-links .lang-switch { margin: 12px 0 6px; align-self: flex-start; border-color: rgba(0,0,0,.25); }
    .nav-links .lang-switch a { display: inline-block; width: auto; padding: 10px 14px; border-bottom: 0; font-size: 13px; }
  }

  /* Language suggestion from the visitor's location: a small card, never a forced switch */
  .lang-hint { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60; width: min(560px, calc(100% - 32px));
    background: #111; color: #fff; padding: 16px 18px; border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.35);
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 14px; letter-spacing: .02em; }
  .lang-hint p { flex: 1 1 220px; margin: 0; }
  .lang-hint a, .lang-hint button { font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 11px 14px; border-radius: 10px; cursor: pointer; text-decoration: none; }
  .lang-hint a { background: var(--gold); color: #111; }
  .lang-hint button { background: none; color: #fff; border: 1px solid rgba(255,255,255,.4); }
  @media (prefers-reduced-motion: no-preference) { .lang-hint { animation: hintIn .35s ease; } @keyframes hintIn { from { opacity: 0; transform: translate(-50%, 12px); } } }


  /* Longer labels (Basa Jawa/Sunda): the two hero buttons wrap or stack instead of cutting the text. */
  .svc-ctas .cta, .svc-ctas .btn-line { flex: 1 1 190px; white-space: normal; line-height: 1.25; }
  @media (max-width: 860px) { .svc-ctas .cta, .svc-ctas .btn-line { flex: none; } }

  /* ---------- Navigation, final layout ----------
     The pill lays out logo | links. Its contents used to be wider than its own max-width, and because the row
     was right-aligned the extra width escaped to the LEFT, pushing the logo out of the pill and on top of the
     first menu item. Now the row is space-between (so nothing can spill over the logo) and the logo, type size
     and gaps scale with the window, which also leaves room for the longer menu words in English and Basa Sunda. */
  .nav-links a { white-space: nowrap; }
  @media (min-width: 861px) {
    .nav-bar { justify-content: space-between; gap: clamp(12px, 2vw, 32px); flex-wrap: nowrap; }
    .nav .logo { flex: 0 0 auto; }
    .nav-links { flex-wrap: nowrap; min-width: 0; }
    .nav.floating .nav-bar { max-width: 1280px; min-height: 92px; padding: 12px clamp(20px, 2.4vw, 36px); }
    .nav.floating .logo { width: clamp(150px, 14.5vw, 220px); }
    .nav-links a, .nav.floating .nav-links a,
    .nav-links .sep, .nav.floating .nav-links .sep { font-size: clamp(13px, 1.05vw, 16px); }
    .nav-links .sep, .nav.floating .nav-links .sep { margin: 0 clamp(7px, .9vw, 16px); }
    .nav-links .lang-switch { margin-left: clamp(10px, 1.2vw, 22px); }
  }

  /* ---------- Heading sizes ----------
     The uppercase wide-tracked headings were shouting: a service title hit 88px and a section title 57px on a
     large screen, so one word filled a third of the width. Scaled back about a quarter; the proportions between
     the levels stay the same. */
  .title { font-size: clamp(26px, 2.3vw, 42px); }
  .page-hero .title { font-size: clamp(32px, 3.6vw, 64px); }
  .page-hero .title::after { margin-top: 22px; }
  .card h3 { font-size: clamp(17px, 1.45vw, 26px); }
  .others a { font-size: clamp(20px, 1.8vw, 32px); }
  .package h3 { font-size: clamp(17px, 1.3vw, 23px); }
  .step h3 { font-size: clamp(16px, 1.15vw, 20px); }
  @media (max-width: 560px) { .others a { font-size: 19px; } }

  /* Service features: a short "what you get" grid between the hero and the gallery */
  .features { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(16px, 1.9vw, 34px); }
  .features li { border-top: 2px solid var(--gold); padding-top: 18px; }
  .features h3 { font-size: clamp(16px, 1.15vw, 20px); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
  .features p { margin-top: 10px; font-size: 15px; letter-spacing: .04em; line-height: 1.55; }
  [data-tone="light"] .features li { border-top-color: var(--gold); }