/* Sisi Saigon — foglio di stile generato da build/build.mjs. Non modificare a mano:
   le regole .x* nascono dagli attributi style dei sorgenti .dc.html. */
/* Sisi Saigon — fondamenta condivise (tipografia, palette, reset, animazioni).
   I layout restano nei singoli file di pagina; qui vive tutto ciò che è comune. */

:root {
  /* palette */
  --verde: #396359;
  --oro: #E5AD6A;
  --corallo: #F26C4F;
  --notte: #0B1512;
  --notte-2: #0E1A17;
  --avorio: #F6F1E8;
  --testo: #EDE7DD;

  /* tipografia */
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', system-ui, -apple-system, sans-serif;

  /* movimento */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* altezza della barra di navigazione fissa: i salti ad àncora si fermano
     sotto di essa invece di nascondere il titolo della sezione */
  --nav-h: 96px;
}

@media (max-width: 760px) {
  :root { --nav-h: 176px; } /* qui la navigazione va a capo su due righe */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--notte);
  color: var(--testo);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

a { color: var(--oro); text-decoration: none; }
a:hover { color: var(--corallo); }

::selection { background: rgba(229, 173, 106, 0.3); color: var(--avorio); }

/* fumetto con il nome dell'allergene.
   Il `title` del browser non compare sul telefono, dove non esiste il passaggio del
   mouse: qui il fumetto risponde anche al tocco, perché toccare l'icona le dà il
   focus. `tabindex` la rende raggiungibile anche da tastiera. */
.alg { position: relative; cursor: help; }

.alg::after {
  content: attr(data-alg);
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translate(-50%, 4px);
  z-index: 20;
  padding: 6px 10px;
  border: 1px solid rgba(229, 173, 106, 0.35);
  border-radius: 4px;
  background: #10201c;
  color: var(--avorio);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s var(--ease);
}

/* la punta del fumetto */
.alg::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  z-index: 21;
  width: 7px;
  height: 7px;
  background: #10201c;
  border-right: 1px solid rgba(229, 173, 106, 0.35);
  border-bottom: 1px solid rgba(229, 173, 106, 0.35);
  transform: translate(-50%, 4px) rotate(45deg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s var(--ease);
}

.alg:hover::after, .alg:focus::after,
.alg:hover::before, .alg:focus::before { opacity: 1; }
.alg:hover::after, .alg:focus::after { transform: translate(-50%, 0); }
.alg:hover::before, .alg:focus::before { transform: translate(-50%, 0) rotate(45deg); }

.alg:focus { outline: none; }
.alg:focus-visible { outline: 2px solid rgba(229, 173, 106, 0.6); outline-offset: 3px; }

/* vicino al bordo il fumetto uscirebbe dallo schermo: la prima icona di ogni
   riga lo allinea a sinistra invece che al centro */
.alg:first-child::after { left: 0; transform: translate(0, 4px); }
.alg:first-child:hover::after, .alg:first-child:focus::after { transform: translate(0, 0); }

/* selettore dei menù.
   La pagina del menù contiene tutti e tre i menù. L'attributo data-menu su <html>
   dice quale mostrare, e ogni elemento dichiara in quali compare: il filtro è solo
   CSS, così mentre la pagina carica non si vede per un attimo il menù sbagliato.
   Senza JavaScript resta visibile il menù del ristorante. */
html[data-menu="ristorante"] [data-menu]:not([data-menu~="ristorante"]),
html[data-menu="asporto"] [data-menu]:not([data-menu~="asporto"]),
html[data-menu="pranzo"] [data-menu]:not([data-menu~="pranzo"]),
html.no-js [data-menu]:not([data-menu~="ristorante"]) { display: none !important; }

/* resta agganciato a sinistra mentre le voci delle sezioni scorrono sotto */
.scelta-menu {
  position: sticky;
  left: 0;
  z-index: 2;
  flex: none;
  display: flex;
  gap: 2px;
  padding: 3px;
  margin-right: 4px;
  border: 1px solid rgba(229, 173, 106, 0.32);
  border-radius: 999px;
  background: rgba(11, 21, 18, 0.96);
  box-shadow: 12px 0 14px -8px rgba(11, 21, 18, 0.95);
}

.scelta-menu a {
  padding: 8px 15px;
  border-radius: 999px;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(237, 231, 221, 0.75);
  transition: background 0.35s ease, color 0.35s ease;
}
.scelta-menu a:hover { color: var(--oro); }
.scelta-menu a:focus-visible { outline: 2px solid rgba(229, 173, 106, 0.6); outline-offset: 2px; }

html[data-menu="ristorante"] .scelta-menu [data-scegli="ristorante"],
html[data-menu="asporto"] .scelta-menu [data-scegli="asporto"],
html[data-menu="pranzo"] .scelta-menu [data-scegli="pranzo"],
html.no-js .scelta-menu [data-scegli="ristorante"] { background: var(--oro); color: #10201c; }

/* animazioni */
@keyframes sisiDrift {
  0%   { transform: translate3d(-4%, -2%, 0) scale(1.15); }
  50%  { transform: translate3d(4%, 3%, 0) scale(1.3); }
  100% { transform: translate3d(-4%, -2%, 0) scale(1.15); }
}
@keyframes sisiDrift2 {
  0%   { transform: translate3d(5%, 4%, 0) scale(1.2); }
  50%  { transform: translate3d(-5%, -3%, 0) scale(1.35); }
  100% { transform: translate3d(5%, 4%, 0) scale(1.2); }
}
@keyframes sisiFade {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes sisiCue {
  0%, 100% { opacity: .25; transform: translateY(0); }
  50%      { opacity: .7; transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* comparsa progressiva alla prima visita in viewport (attiva solo con JS) */
.js [data-reveal] { opacity: 0; transform: translateY(22px);
  transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; } }

/* --- classi estratte dai sorgenti --- */
.x0{display:block}
.x1{display: inline-flex;align-items: center;justify-content: center;width: 22px;height: 22px;color: rgba(229,173,106,0.9)}
.x2{display: inline-flex;align-items: center;justify-content: center;width: 17px;height: 17px;color: rgba(229,173,106,0.85)}
.x3{flex: none;font-size: 14.5px;color: #E5AD6A}
.x4{flex: none;width: 30px;font-size: 10.5px;letter-spacing: 0.08em;color: rgba(229,173,106,0.55)}
.x5{position: relative;width: 100%;height: 100%;object-fit: contain;transition: transform 0.8s var(--ease)}
.x5:hover{transform: scale(1.06)}
.x6{display: flex;align-items: baseline;gap: 14px;padding: 12px 0;border-bottom: 1px solid rgba(237,231,221,0.07)}
.x7{flex: 1 1 auto;font-size: 14.5px;font-weight: 300;color: rgba(237,231,221,0.82)}
.x8{font-size: 10.5px;letter-spacing: 0.24em;color: rgba(229,173,106,0.6);margin-bottom: 10px}
.x9{display: flex;flex-direction: column;padding: 26px 26px 28px;border: 1px solid rgba(237,231,221,0.09);border-radius: 4px;background: rgba(246,241,232,0.028);transition: transform 0.6s var(--ease), border-color 0.6s ease, background 0.6s ease}
.x9:hover{transform: translateY(-6px);border-color: rgba(229,173,106,0.34);background: rgba(246,241,232,0.05)}
.xa{margin-top: auto;display: flex;flex-direction: column;gap: 9px}
.xb{display: flex;align-items: baseline;gap: 12px;padding-top: 9px;border-top: 1px solid rgba(237,231,221,0.08)}
.xc{flex: 1 1 auto;font-size: 14px;font-weight: 300;color: rgba(237,231,221,0.85)}
.xd{display: flex;gap: 10px;font-size: 13px;font-weight: 300;line-height: 1.6;color: rgba(237,231,221,0.6)}
.xe{color: rgba(229,173,106,0.55)}
.xf{position: relative;align-self: center;width: 170px;height: 170px;margin-bottom: 22px}
.xg{position: absolute;inset: -10%;border-radius: 50%;background: radial-gradient(circle, rgba(57,99,89,0.55) 0%, rgba(57,99,89,0) 70%)}
.xh{font-family: 'Cormorant Garamond', serif;font-style: italic;font-size: 16px;color: rgba(229,173,106,0.85);margin-bottom: 12px}
.xi{flex: none;align-self: center;display: inline-flex;gap: 7px}
.xj{display: flex;align-items: baseline;gap: 14px}
.xk{flex: none;font-size: 16px;color: #E5AD6A}
.xl{margin: 0 0 12px;font-size: 13px;font-weight: 300;line-height: 1.7;color: rgba(237,231,221,0.5)}
.xm{flex: 1 1 auto;margin: 0 0 4px;font-family: 'Cormorant Garamond', serif;font-weight: 400;font-size: 25px;line-height: 1.2;color: #F6F1E8}
.xn{flex: none;font-size: 15px;color: #E5AD6A}
.xo{font-size: 14.5px;font-weight: 300;color: rgba(241,234,224,0.82);transition: color 0.4s ease, padding-left 0.4s ease}
.xo:hover{color: #E5AD6A;padding-left: 6px}
.xp{display: flex;flex-wrap: wrap;gap: 10px;margin: 0 0 0}
.xq{display: flex;align-items: center;gap: 10px}
.xr{flex: none;display: inline-flex;align-items: center;justify-content: center;width: 24px;height: 24px;color: rgba(229,173,106,0.9)}
.xs{font-size: 13px;font-weight: 300;color: rgba(237,231,221,0.6)}
.xt{font-size: 11px;letter-spacing: 0.34em;text-transform: uppercase;color: rgba(229,173,106,0.8);margin-bottom: 14px}
.xu{flex: none;padding: 9px 18px;border: 1px solid rgba(237,231,221,0.16);border-radius: 999px;font-size: 11.5px;letter-spacing: 0.18em;text-transform: uppercase;color: rgba(237,231,221,0.68);white-space: nowrap;transition: color 0.4s ease, border-color 0.4s ease, background 0.4s ease}
.xu:hover{color: #10201C;background: #E5AD6A;border-color: #E5AD6A}
.xv{display: flex;flex-wrap: wrap;align-items: flex-end;justify-content: space-between;gap: 18px;padding-bottom: 24px;border-bottom: 1px solid rgba(237,231,221,0.12)}
.xw{margin: 0;font-family: 'Cormorant Garamond', serif;font-weight: 300;font-size: clamp(32px, 5vw, 58px);line-height: 1.05;color: #F6F1E8}
.xx{display: flex;flex-wrap: wrap;gap: 10px;margin: 0 0 14px}
.xy{display: flex;flex-direction: column;padding: 22px 22px 24px;border: 1px solid rgba(237,231,221,0.09);border-radius: 4px;background: rgba(246,241,232,0.028);transition: transform 0.6s var(--ease), border-color 0.6s ease}
.xy:hover{transform: translateY(-5px);border-color: rgba(229,173,106,0.32)}
.xz{position: relative;align-self: center;width: 140px;height: 140px;margin-bottom: 18px}
.x10{position: absolute;inset: -10%;border-radius: 50%;background: radial-gradient(circle, rgba(57,99,89,0.5) 0%, rgba(57,99,89,0) 70%)}
.x11{display: flex;align-items: baseline;gap: 12px}
.x12{flex: 1 1 auto;margin: 0 0 8px;font-family: 'Cormorant Garamond', serif;font-weight: 400;font-size: 21px;line-height: 1.25;color: #F6F1E8}
.x13{margin: 0 0 14px;font-size: 12.5px;font-weight: 300;line-height: 1.7;color: rgba(237,231,221,0.48)}
.x14{max-width: 1280px;margin: 0 auto}
.x15{font-size: 12.5px;letter-spacing: 0.2em;text-transform: uppercase;color: rgba(237,231,221,0.72);transition: color 0.4s ease}
.x15:hover{color: #E5AD6A}
.x16{display: flex;flex-direction: column}
.x17{font-size: 11px;letter-spacing: 0.28em;text-transform: uppercase;color: rgba(229,173,106,0.8);margin-bottom: 18px}
.x18{margin: 0;max-width: 320px;font-size: 14px;font-weight: 300;line-height: 1.75;color: rgba(237,231,221,0.55);text-wrap: pretty}
.x19{margin: 0 0 4px;font-family: 'Cormorant Garamond', serif;font-weight: 400;font-size: 25px;line-height: 1.2;color: #F6F1E8}
.x1a{text-align: center;transition: transform 0.6s var(--ease)}
.x1a:hover{transform: translateY(-6px)}
.x1b{margin: 0 0 14px;font-size: 13px;font-weight: 300;line-height: 1.7;color: rgba(237,231,221,0.5)}
.x1c{margin: 0;font-size: 14.5px;font-weight: 300;line-height: 1.75;color: rgba(237,231,221,0.6)}
.x1d{font-size: 11px;letter-spacing: 0.28em;text-transform: uppercase;color: rgba(229,173,106,0.95);margin-bottom: 22px}
.x1e{color: rgba(241,234,224,0.82);transition: color 0.4s ease}
.x1e:hover{color: #E5AD6A}
.x1f{display: flex;gap: 10px;padding: 7px 0;border-bottom: 1px solid rgba(237,231,221,0.07);font-size: 14px;font-weight: 300;color: rgba(237,231,221,0.82)}
.x1g{color: rgba(229,173,106,0.7)}
.x1h{display: flex;align-items: baseline;gap: 14px;padding: 14px 0;border-bottom: 1px solid rgba(237,231,221,0.08)}
.x1i{flex: 1 1 auto;font-size: 15px;font-weight: 300;color: rgba(237,231,221,0.85)}
.x1j{flex: none;display: flex;gap: 9px}
.x1k{max-width: 1240px;margin: 0 auto}
.x1l{display: flex;flex-wrap: wrap;gap: 10px;margin: 0 0 16px}
.x1m{padding: clamp(56px, 8vw, 104px) clamp(20px, 5vw, 64px);background: #0E1A17;scroll-margin-top: 130px}
.x1n{font-size: 11px;letter-spacing: 0.36em;text-transform: uppercase;color: rgba(229,173,106,0.8);margin-bottom: 18px}
.x1o{display: flex;flex-direction: column;gap: 13px}
.x1p{display: grid;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));gap: clamp(18px, 2.4vw, 30px);margin-top: clamp(32px, 4vw, 52px)}
.x1q{padding: clamp(56px, 8vw, 104px) clamp(20px, 5vw, 64px);background: #0B1512;scroll-margin-top: 130px}
.x1r{position: relative;width: 100%;max-width: 220px;margin: 0 auto 20px;aspect-ratio: 1}
.x1s{position: absolute;inset: 0;border-radius: 50%;background: radial-gradient(circle, rgba(229,173,106,0.14) 0%, rgba(229,173,106,0) 68%)}
.x1t{position: relative;width: 100%;height: 100%;object-fit: contain;transition: transform 0.9s var(--ease)}
.x1t:hover{transform: scale(1.06)}
.x1u{font-size: 10.5px;letter-spacing: 0.24em;color: rgba(229,173,106,0.55);margin-bottom: 9px}
.x1v{margin: 0 0 4px;font-family: 'Cormorant Garamond', serif;font-weight: 400;font-size: 22px;line-height: 1.25;color: #F6F1E8}
.x1w{font-family: 'Cormorant Garamond', serif;font-style: italic;font-size: 15px;color: rgba(229,173,106,0.8)}
.x1x{margin-top: 12px;font-size: 16px;color: #E5AD6A}
.x1y{display: flex;flex-wrap: wrap;justify-content: center;gap: 10px;margin: 14px 0 0}
.x1z{display: flex;flex-direction: column;border: 1px solid rgba(237,231,221,0.1);border-radius: 4px;background: rgba(246,241,232,0.028);overflow: hidden;transition: transform 0.6s var(--ease), border-color 0.6s ease}
.x1z:hover{transform: translateY(-6px);border-color: rgba(229,173,106,0.34)}
.x20{position: relative;padding: 26px 26px 0}
.x21{position: relative;width: 100%;aspect-ratio: 1.35;display: flex;align-items: center;justify-content: center}
.x22{position: absolute;inset: 6% 12%;border-radius: 50%;background: radial-gradient(circle, rgba(229,173,106,0.16) 0%, rgba(229,173,106,0) 70%)}
.x23{position: relative;max-width: 82%;max-height: 100%;object-fit: contain;transition: transform 0.9s var(--ease)}
.x23:hover{transform: scale(1.05)}
.x24{padding: 20px 26px 28px}
.x25{display: flex;align-items: baseline;gap: 14px;padding-bottom: 14px;border-bottom: 1px solid rgba(237,231,221,0.1)}
.x26{flex: 1 1 auto;margin: 0;font-family: 'Cormorant Garamond', serif;font-weight: 400;font-size: 24px;color: #F6F1E8}
.x27{flex: none;font-size: 18px;color: #E5AD6A}
.x28{display: flex;flex-direction: column;gap: 7px;margin-top: 16px}
.x29{display: flex;flex-wrap: wrap;gap: 10px;margin-top: 18px}
.x2a{margin-top: 14px;font-size: 10.5px;letter-spacing: 0.18em;text-transform: uppercase;color: rgba(237,231,221,0.38)}
.x2b{scroll-margin-top: var(--nav-h);padding: clamp(84px, 12vw, 160px) clamp(20px, 5vw, 64px);background: #0B1512}
.x2c{transition: transform 0.7s cubic-bezier(0.22,1,0.36,1)}
.x2c:hover{transform: translateY(-8px)}
.x2d{overflow: hidden;border-radius: 3px;background: #101E1A}
.x2e{width: 100%;aspect-ratio: 4 / 5;object-fit: cover;filter: saturate(0.9) brightness(0.94);transition: transform 1.2s cubic-bezier(0.22,1,0.36,1), filter 0.9s ease}
.x2e:hover{transform: scale(1.05);filter: saturate(1) brightness(1)}
.x2f{margin: 26px 0 10px;font-family: 'Cormorant Garamond', serif;font-weight: 400;font-size: 27px;color: #F6F1E8}
.x2g{font-family: 'Cormorant Garamond', serif;font-size: 30px;line-height: 1;color: rgba(229,173,106,0.9);margin-bottom: 14px}
.x2h{margin: 0 0 10px;font-family: 'Cormorant Garamond', serif;font-weight: 400;font-size: 23px;line-height: 1.2;color: #F6F1E8}
.x2i{position: relative;display: flex;flex-direction: column;padding: 30px 28px 32px;border: 1px solid rgba(237,231,221,0.1);border-radius: 4px;background: rgba(246,241,232,0.028);transition: transform 0.6s var(--ease), border-color 0.6s ease, background 0.6s ease}
.x2i:hover{transform: translateY(-6px);border-color: rgba(229,173,106,0.34);background: rgba(246,241,232,0.05)}
.x2j{display: flex;align-items: center;justify-content: space-between;gap: 14px;min-height: 30px;margin-bottom: 16px}
.x2k{font-size: 10.5px;letter-spacing: 0.32em;text-transform: uppercase;color: rgba(229,173,106,0.85)}
.x2l{padding: 5px 11px 5px 13px;border: 1.5px solid rgba(242,108,79,0.8);border-radius: 3px;font-size: 10.5px;font-weight: 500;letter-spacing: 0.26em;text-transform: uppercase;white-space: nowrap;color: #F26C4F;transform: rotate(-3deg)}
.x2m{margin: 0 0 12px;font-family: 'Cormorant Garamond', serif;font-weight: 400;font-size: 30px;line-height: 1.15;color: #F6F1E8}
.x2n{margin: 0 0 22px;font-size: 14.5px;font-weight: 300;line-height: 1.75;color: rgba(237,231,221,0.6)}
.x2o{position: relative;z-index: 1;margin-top: auto;align-self: flex-start;padding: 11px 22px;border: 1px solid rgba(229,173,106,0.5);border-radius: 999px;font-size: 12px;letter-spacing: 0.2em;text-transform: uppercase;color: #E5AD6A;cursor: default;transition: background 0.45s ease, color 0.45s ease, border-color 0.45s ease}
.x2o:hover{background: #E5AD6A;border-color: #E5AD6A;color: #10201C}
.x2p{font-family: 'Cormorant Garamond', serif;font-size: 32px;color: #E5AD6A}
.x2q{font-size: 11px;letter-spacing: 0.2em;text-transform: uppercase;color: rgba(237,231,221,0.5);margin-top: 6px}
.x2r{position: relative;z-index: 2;max-width: 1280px;margin: 0 auto}
.x2s{display: inline-flex;align-items: center;gap: 12px;padding: 15px 30px;border-radius: 999px;background: #E5AD6A;color: #10201C;font-size: 12px;letter-spacing: 0.2em;text-transform: uppercase;transition: transform 0.45s var(--ease), background 0.45s ease, color 0.45s ease}
.x2s:hover{background: #F26C4F;color: #F6F1E8;transform: translateY(-2px)}
.x2t{font-size: 15px;line-height: 1}
.x2u{min-height: 13px;font-size: 10.5px;letter-spacing: 0.24em;text-transform: uppercase;color: rgba(229,173,106,0.6);margin-bottom: 10px}
.x2v{flex: 1 1 auto;margin: 0 0 6px;font-family: 'Cormorant Garamond', serif;font-weight: 400;font-size: 26px;line-height: 1.2;color: #F6F1E8}
.x2w{margin: 0 0 10px;font-size: 13px;font-weight: 300;line-height: 1.7;color: rgba(237,231,221,0.5)}
.x2x{display: flex;flex-direction: column;margin: 0 0 14px}
.x2y{position: relative;width: 100%;max-width: 300px;margin: 0 auto 24px;aspect-ratio: 1}
.x2z{position: absolute;inset: 0;border-radius: 50%;background: radial-gradient(circle, rgba(229,173,106,0.16) 0%, rgba(229,173,106,0) 68%)}
.x30{position: relative;width: 100%;height: 100%;object-fit: contain;transition: transform 0.9s var(--ease)}
.x30:hover{transform: scale(1.05)}
.x31{margin: 0 0 4px;font-family: 'Cormorant Garamond', serif;font-weight: 400;font-size: 27px;color: #F6F1E8}
.x32{font-family: 'Cormorant Garamond', serif;font-style: italic;font-size: 17px;color: rgba(229,173,106,0.85)}
.x33{margin: 14px auto 16px;max-width: 300px;font-size: 13.5px;font-weight: 300;line-height: 1.75;color: rgba(237,231,221,0.55)}
.x34{font-size: 17px;color: #E5AD6A}
.x35{display: flex;flex-wrap: wrap;justify-content: center;gap: 10px;margin: 16px 0 0}
.x36{display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: clamp(28px, 4vw, 64px);margin-top: clamp(30px, 4vw, 46px)}
.x37{width: 100%;aspect-ratio: 1;object-fit: contain}
.x38{padding: 15px 30px;border-radius: 999px;border: 1px solid rgba(237,231,221,0.28);color: rgba(237,231,221,0.85);font-size: 12px;letter-spacing: 0.2em;text-transform: uppercase;transition: border-color 0.45s ease, color 0.45s ease}
.x38:hover{border-color: rgba(229,173,106,0.7);color: #E5AD6A}
.x39{width: 100%;background: #0B1512}
.x3a{display: flex;align-items: center;gap: 12px;color: #EDE7DD}
.x3b{height: 34px;width: auto;filter: invert(1);opacity: 0.92}
.x3c{font-family: 'Cormorant Garamond', serif;font-size: 19px;letter-spacing: 0.16em;text-transform: uppercase;color: #EDE7DD}
.x3d{display: flex;flex-wrap: wrap;align-items: center;gap: 14px clamp(18px, 3vw, 38px)}
.x3e{padding: 11px 22px;border: 1px solid rgba(229,173,106,0.5);border-radius: 999px;font-size: 12px;letter-spacing: 0.2em;text-transform: uppercase;color: #E5AD6A;transition: background 0.45s ease, color 0.45s ease, border-color 0.45s ease}
.x3e:hover{background: #E5AD6A;border-color: #E5AD6A;color: #10201C}
.x3f{display: flex;flex-wrap: wrap;align-items: flex-end;justify-content: space-between;gap: 24px;padding-bottom: 30px;border-bottom: 1px solid rgba(237,231,221,0.12)}
.x3g{margin: 0;font-family: 'Cormorant Garamond', serif;font-weight: 300;font-size: clamp(34px, 5.2vw, 64px);line-height: 1.04;color: #F6F1E8}
.x3h{margin: 0;max-width: 340px;font-size: 15px;font-weight: 300;line-height: 1.8;color: rgba(237,231,221,0.6);text-wrap: pretty}
.x3i{margin: 0;font-size: clamp(15px, 1.5vw, 17px);font-weight: 300;line-height: 1.85;color: rgba(237,231,221,0.72);text-wrap: pretty}
.x3j{margin: 0;font-size: 15px;font-weight: 300;line-height: 1.75;color: rgba(237,231,221,0.65)}
.x3k{margin: 0 0 20px;font-size: clamp(15px, 1.5vw, 17px);font-weight: 300;line-height: 1.85;color: rgba(237,231,221,0.7);text-wrap: pretty}
.x3l{display: grid;grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));gap: clamp(36px, 5vw, 70px)}
.x3m{height: 62px;width: auto;filter: invert(1);opacity: 0.9;margin-bottom: 20px}
.x3n{margin: 0;max-width: 260px;font-size: 14px;font-weight: 300;line-height: 1.8;color: rgba(241,234,224,0.72)}
.x3o{display: flex;flex-direction: column;gap: 13px;font-size: 14.5px;font-weight: 300;line-height: 1.6;color: rgba(241,234,224,0.82)}
.x3p{display: flex;flex-wrap: wrap;justify-content: space-between;gap: 12px 30px;margin-top: clamp(50px, 7vw, 84px);padding-top: 26px;border-top: 1px solid rgba(241,234,224,0.18);font-size: 12px;letter-spacing: 0.06em;color: rgba(241,234,224,0.55)}
.x3q{margin: 0;max-width: 380px;font-size: 14.5px;font-weight: 300;line-height: 1.8;color: rgba(237,231,221,0.6);text-wrap: pretty}
.x3r{display: flex;flex-wrap: wrap;align-items: center;gap: 14px 20px;margin-top: 22px}
.x3s{padding: 11px 22px;border: 1px solid rgba(229,173,106,0.5);border-radius: 999px;font-size: 12px;letter-spacing: 0.2em;text-transform: uppercase;color: #E5AD6A;cursor: default;transition: background 0.45s ease, color 0.45s ease, border-color 0.45s ease}
.x3s:hover{background: #E5AD6A;border-color: #E5AD6A;color: #10201C}
.x3t{margin: 0;max-width: 340px;font-size: 14px;font-weight: 300;line-height: 1.75;color: rgba(237,231,221,0.55);text-wrap: pretty}
.x3u{position: fixed;top: 0;left: 0;right: 0;z-index: 50;display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 16px 28px;padding: 18px clamp(20px, 5vw, 64px);background: linear-gradient(180deg, rgba(11,21,18,0.82), rgba(11,21,18,0));backdrop-filter: blur(6px)}
.x3v{position: relative;min-height: 100svh;display: flex;align-items: center;justify-content: center;overflow: hidden;background: #0B1512}
.x3w{position: absolute;inset: -20%;background: radial-gradient(45% 55% at 30% 35%, rgba(57,99,89,0.85) 0%, rgba(57,99,89,0) 68%);animation: sisiDrift 26s ease-in-out infinite;will-change: transform}
.x3x{position: absolute;inset: -20%;background: radial-gradient(40% 50% at 72% 66%, rgba(229,173,106,0.30) 0%, rgba(229,173,106,0) 70%);animation: sisiDrift2 34s ease-in-out infinite;will-change: transform}
.x3y{position: absolute;inset: -20%;background: radial-gradient(35% 45% at 60% 22%, rgba(242,108,79,0.16) 0%, rgba(242,108,79,0) 72%);animation: sisiDrift 44s ease-in-out infinite reverse;will-change: transform}
.x3z{position: absolute;inset: 0;background: linear-gradient(180deg, rgba(11,21,18,0.55) 0%, rgba(11,21,18,0.15) 45%, rgba(11,21,18,0.92) 100%)}
.x40{position: relative;z-index: 2;padding: 120px clamp(20px, 5vw, 64px) 96px;text-align: center;max-width: 1000px}
.x41{height: clamp(78px, 10vw, 118px);width: auto;margin: 0 auto 30px;filter: invert(1);opacity: 0.9;animation: sisiFade 1.3s 0.1s ease-out both}
.x42{font-size: 11.5px;letter-spacing: 0.42em;text-transform: uppercase;color: rgba(229,173,106,0.85);margin-bottom: 22px;animation: sisiFade 1.2s 0.35s ease-out both}
.x43{margin: 0;font-family: 'Cormorant Garamond', serif;font-weight: 300;font-size: clamp(52px, 12vw, 148px);line-height: 0.94;letter-spacing: -0.01em;color: #F6F1E8;animation: sisiFade 1.4s 0.5s ease-out both}
.x44{margin: 30px auto 0;max-width: 560px;font-size: clamp(15px, 1.6vw, 18px);font-weight: 300;line-height: 1.75;color: rgba(237,231,221,0.74);text-wrap: pretty;animation: sisiFade 1.4s 0.75s ease-out both}
.x45{display: flex;flex-wrap: wrap;justify-content: center;gap: 14px;margin-top: 42px;animation: sisiFade 1.4s 0.95s ease-out both}
.x46{padding: 15px 34px;border-radius: 999px;background: #E5AD6A;color: #10201C;font-size: 12px;letter-spacing: 0.22em;text-transform: uppercase;transition: transform 0.45s cubic-bezier(0.22,1,0.36,1), background 0.45s ease}
.x46:hover{background: #F26C4F;color: #F6F1E8;transform: translateY(-2px)}
.x47{padding: 15px 34px;border-radius: 999px;border: 1px solid rgba(237,231,221,0.28);color: rgba(237,231,221,0.85);font-size: 12px;letter-spacing: 0.22em;text-transform: uppercase;transition: border-color 0.45s ease, color 0.45s ease, transform 0.45s cubic-bezier(0.22,1,0.36,1)}
.x47:hover{border-color: rgba(229,173,106,0.7);color: #E5AD6A;transform: translateY(-2px)}
.x48{position: absolute;bottom: 34px;left: 50%;transform: translateX(-50%);z-index: 2;font-size: 10.5px;letter-spacing: 0.3em;text-transform: uppercase;color: rgba(237,231,221,0.45);animation: sisiCue 3.4s ease-in-out infinite}
.x49{display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: clamp(20px, 3vw, 40px);margin-top: clamp(40px, 6vw, 72px)}
.x4a{display: flex;flex-wrap: wrap;align-items: center;gap: 16px 28px;margin-top: clamp(44px, 6vw, 76px)}
.x4b{padding: 15px 34px;border-radius: 999px;border: 1px solid rgba(229,173,106,0.45);color: #E5AD6A;font-size: 12px;letter-spacing: 0.22em;text-transform: uppercase;transition: background 0.45s ease, color 0.45s ease, transform 0.45s cubic-bezier(0.22,1,0.36,1)}
.x4b:hover{background: #E5AD6A;color: #10201C;transform: translateY(-2px)}
.x4c{font-size: 12px;letter-spacing: 0.22em;text-transform: uppercase;color: rgba(237,231,221,0.6);transition: color 0.4s ease}
.x4c:hover{color: #F26C4F}
.x4d{scroll-margin-top: var(--nav-h);padding: clamp(84px, 12vw, 160px) clamp(20px, 5vw, 64px);background: #0E1A17}
.x4e{display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 30px clamp(36px, 6vw, 90px);align-items: start;padding-bottom: clamp(34px, 5vw, 54px);border-bottom: 1px solid rgba(237,231,221,0.12)}
.x4f{margin: 0;font-family: 'Cormorant Garamond', serif;font-weight: 300;font-size: clamp(34px, 5.2vw, 64px);line-height: 1.04;color: #F6F1E8;text-wrap: balance}
.x4g{display: grid;gap: 18px}
.x4h{display: grid;grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));gap: clamp(24px, 3vw, 44px);margin-top: clamp(38px, 5vw, 60px)}
.x4i{display: grid;grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));gap: clamp(20px, 3vw, 34px);margin-top: clamp(40px, 6vw, 72px)}
.x4j{position: absolute;inset: 0;border-radius: 4px}
.x4k{margin-top: clamp(46px, 6vw, 80px);padding-top: 34px;border-top: 1px solid rgba(237,231,221,0.12);display: grid;grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));gap: 30px clamp(30px, 5vw, 70px);align-items: start;scroll-margin-top: 110px}
.x4l{font-size: 11px;letter-spacing: 0.36em;text-transform: uppercase;color: rgba(229,173,106,0.8);margin-bottom: 16px}
.x4m{margin: 0;font-family: 'Cormorant Garamond', serif;font-weight: 300;font-size: clamp(28px, 3.6vw, 42px);line-height: 1.1;color: #F6F1E8}
.x4n{display: grid;gap: 16px}
.x4o{color: #E5AD6A;transition: color 0.4s ease}
.x4o:hover{color: #F26C4F}
.x4p{display: flex;flex-wrap: wrap;gap: 14px 22px;margin-top: 6px}
.x4q{padding: 14px 30px;border-radius: 999px;border: 1px solid rgba(229,173,106,0.45);color: #E5AD6A;font-size: 12px;letter-spacing: 0.22em;text-transform: uppercase;transition: background 0.45s ease, color 0.45s ease, transform 0.45s cubic-bezier(0.22,1,0.36,1)}
.x4q:hover{background: #E5AD6A;color: #10201C;transform: translateY(-2px)}
.x4r{align-self: center;font-size: 12px;letter-spacing: 0.22em;text-transform: uppercase;color: rgba(237,231,221,0.6);transition: color 0.4s ease}
.x4r:hover{color: #F26C4F}
.x4s{position: relative;min-height: clamp(380px, 62vh, 620px);display: flex;align-items: center;overflow: hidden}
.x4t{position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;filter: saturate(0.55) brightness(0.5)}
.x4u{position: absolute;inset: 0;background: linear-gradient(90deg, rgba(11,21,18,0.9) 0%, rgba(11,21,18,0.55) 55%, rgba(57,99,89,0.35) 100%)}
.x4v{position: relative;z-index: 2;margin: 0;padding: clamp(60px, 9vw, 120px) clamp(20px, 5vw, 64px);max-width: 900px}
.x4w{margin: 0;font-family: 'Cormorant Garamond', serif;font-weight: 300;font-style: italic;font-size: clamp(26px, 4.4vw, 52px);line-height: 1.25;color: #F6F1E8;text-wrap: pretty}
.x4x{margin-top: 30px;font-size: 11px;letter-spacing: 0.3em;text-transform: uppercase;color: rgba(229,173,106,0.85)}
.x4y{max-width: 1240px;margin: 0 auto;display: grid;grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));gap: clamp(36px, 6vw, 90px);align-items: center}
.x4z{position: relative}
.x50{width: 100%;aspect-ratio: 4 / 5;object-fit: cover;border-radius: 3px;filter: saturate(0.85) brightness(0.9)}
.x51{position: absolute;right: -6px;bottom: -34px;width: 42%;aspect-ratio: 3 / 4;object-fit: cover;border-radius: 3px;border: 6px solid #0B1512;filter: saturate(0.85) brightness(0.9)}
.x52{margin: 0 0 28px;font-family: 'Cormorant Garamond', serif;font-weight: 300;font-size: clamp(32px, 4.8vw, 58px);line-height: 1.06;color: #F6F1E8}
.x53{display: flex;flex-wrap: wrap;gap: 12px 44px;margin-top: 40px;padding-top: 30px;border-top: 1px solid rgba(237,231,221,0.12)}
.x54{scroll-margin-top: var(--nav-h);padding: clamp(70px, 9vw, 120px) clamp(20px, 5vw, 64px) 40px;background: linear-gradient(180deg, #0C1714 0%, #162923 32%, #1D362F 70%, #223F37 100%);color: #F1EAE0}
.x55{position: fixed;top: 0;left: 0;right: 0;z-index: 60;display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 16px 28px;padding: 18px clamp(20px, 5vw, 64px);background: linear-gradient(180deg, rgba(11,21,18,0.92) 0%, rgba(11,21,18,0.6) 70%, rgba(11,21,18,0));backdrop-filter: blur(8px)}
.x56{font-size: 12.5px;letter-spacing: 0.2em;text-transform: uppercase;color: #E5AD6A;transition: color 0.4s ease}
.x56:hover{color: #F26C4F}
.x57{position: relative;overflow: hidden;padding: clamp(140px, 19vh, 200px) clamp(20px, 5vw, 64px) clamp(48px, 6vw, 72px);background: #0B1512}
.x58{position: absolute;inset: -25%;background: radial-gradient(42% 55% at 26% 40%, rgba(57,99,89,0.72) 0%, rgba(57,99,89,0) 70%);animation: sisiDrift 28s ease-in-out infinite;will-change: transform}
.x59{position: absolute;inset: -25%;background: radial-gradient(38% 48% at 78% 58%, rgba(229,173,106,0.22) 0%, rgba(229,173,106,0) 72%);animation: sisiDrift2 36s ease-in-out infinite;will-change: transform}
.x5a{position: absolute;inset: 0;background: linear-gradient(180deg, rgba(11,21,18,0.62) 0%, rgba(11,21,18,0.2) 40%, rgba(11,21,18,0.96) 100%)}
.x5b{font-size: 11.5px;letter-spacing: 0.42em;text-transform: uppercase;color: rgba(229,173,106,0.85);margin-bottom: 22px;animation: sisiFade 1.1s 0.1s ease-out both}
.x5c{margin: 0;max-width: 900px;font-family: 'Cormorant Garamond', serif;font-weight: 300;font-size: clamp(44px, 9vw, 100px);line-height: 0.98;color: #F6F1E8;animation: sisiFade 1.2s 0.28s ease-out both}
.x5d{margin: 26px 0 0;max-width: 580px;font-size: clamp(15px, 1.6vw, 18px);font-weight: 300;line-height: 1.8;color: rgba(237,231,221,0.7);text-wrap: pretty;animation: sisiFade 1.2s 0.46s ease-out both}
.x5e{display: flex;flex-wrap: wrap;gap: 14px;margin-top: 36px;animation: sisiFade 1.2s 0.62s ease-out both}
.x5f{padding: 15px 30px;border-radius: 999px;border: 1px solid rgba(237,231,221,0.28);color: rgba(237,231,221,0.85);font-size: 12px;letter-spacing: 0.2em;text-transform: uppercase;transition: border-color 0.45s ease, color 0.45s ease, transform 0.45s var(--ease)}
.x5f:hover{border-color: rgba(229,173,106,0.7);color: #E5AD6A;transform: translateY(-2px)}
.x5g{position: sticky;top: 70px;z-index: 40;padding: 0 clamp(12px, 5vw, 64px);background: linear-gradient(180deg, rgba(11,21,18,0.96), rgba(11,21,18,0.72) 70%, rgba(11,21,18,0));backdrop-filter: blur(8px)}
.x5h{max-width: 1280px;margin: 0 auto;display: flex;align-items: center;gap: 10px;overflow-x: auto;padding: 12px 6px 16px;scrollbar-width: none}
.x5i{scroll-margin-top: 150px}
.x5j{scroll-margin-top: 130px;padding: clamp(56px, 8vw, 104px) clamp(20px, 5vw, 64px);background: #0B1512}
.x5k{display: grid;grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));gap: clamp(18px, 2.4vw, 28px);margin-top: clamp(30px, 4vw, 46px)}
.x5l{position: relative;padding: clamp(56px, 8vw, 104px) clamp(20px, 5vw, 64px);background: #0B1512;scroll-margin-top: 130px;overflow: hidden}
.x5m{position: absolute;inset: -30% -10%;background: radial-gradient(40% 45% at 70% 40%, rgba(57,99,89,0.4) 0%, rgba(57,99,89,0) 70%);animation: sisiDrift2 40s ease-in-out infinite;will-change: transform}
.x5n{display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: clamp(20px, 3vw, 40px);margin-top: clamp(32px, 4vw, 52px)}
.x5o{display: grid;grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));gap: clamp(20px, 3vw, 38px);margin-top: clamp(32px, 4vw, 52px)}
.x5p{position: relative;padding: clamp(56px, 8vw, 104px) clamp(20px, 5vw, 64px);background: #0E1A17;scroll-margin-top: 130px;overflow: hidden}
.x5q{position: absolute;inset: -30% -10%;background: radial-gradient(38% 44% at 24% 30%, rgba(57,99,89,0.5) 0%, rgba(57,99,89,0) 70%);animation: sisiDrift 38s ease-in-out infinite;will-change: transform}
.x5r{display: grid;grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));gap: clamp(18px, 2.4vw, 30px);margin-top: clamp(32px, 4vw, 52px)}
.x5s{display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: clamp(20px, 3vw, 34px);margin-top: clamp(32px, 4vw, 52px)}
.x5t{max-width: 1280px;margin: 0 auto;display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: clamp(34px, 5vw, 70px);align-items: center}
.x5u{margin: 0 0 22px;font-family: 'Cormorant Garamond', serif;font-weight: 300;font-size: clamp(30px, 4.4vw, 52px);line-height: 1.05;color: #F6F1E8}
.x5v{margin: 0 0 30px;max-width: 420px;font-size: 15px;font-weight: 300;line-height: 1.8;color: rgba(237,231,221,0.62);text-wrap: pretty}
.x5w{display: grid;grid-template-columns: 1fr 1fr;gap: 14px}
.x5x{width: 100%;aspect-ratio: 1;object-fit: contain;opacity: 0.95}
.x5y{padding: clamp(56px, 8vw, 104px) clamp(20px, 5vw, 64px) clamp(70px, 10vw, 130px);background: #0E1A17;scroll-margin-top: 130px}
.x5z{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 24px;margin-top: clamp(46px, 7vw, 80px);padding: clamp(28px, 4vw, 44px);border: 1px solid rgba(229,173,106,0.28);border-radius: 4px;background: rgba(57,99,89,0.14)}
.x60{font-family: 'Cormorant Garamond', serif;font-size: clamp(22px, 3vw, 30px);color: #F6F1E8}
.x61{margin: 8px 0 0;max-width: 460px;font-size: 14px;font-weight: 300;line-height: 1.7;color: rgba(237,231,221,0.6)}
.x62{display: flex;flex-wrap: wrap;gap: 12px;align-items: center}
.x63{margin-top: clamp(46px, 7vw, 80px);padding-top: 26px;border-top: 1px solid rgba(237,231,221,0.12);scroll-margin-top: 130px}
.x64{font-size: 11px;letter-spacing: 0.34em;text-transform: uppercase;color: rgba(229,173,106,0.8);margin-bottom: 20px}
.x65{display: grid;grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));gap: 12px 26px}
.x66{margin: 28px 0 0;font-size: 12px;font-weight: 300;line-height: 1.8;color: rgba(237,231,221,0.4)}
.x67{padding: clamp(70px, 9vw, 120px) clamp(20px, 5vw, 64px) 40px;background: linear-gradient(180deg, #0C1714 0%, #162923 32%, #1D362F 70%, #223F37 100%);color: #F1EAE0}
.x68{color: rgba(241,234,224,0.55);transition: color 0.4s ease}
.x68:hover{color: #E5AD6A}