/* =====================================================================
   INFINITE AFRICAN SAFARIS
   Design system — desert meets ocean
   ===================================================================== */
:root{
  /* palette — black / white / khaki */
  --black:      #141312;
  --ink:        #141312;   /* dark sections */
  --ink-2:      #1d1c1a;
  --teal:       #262320;   /* dark gradient partner */
  --char:       #100f0e;

  --khaki:      #b3a079;   /* the accent */
  --khaki-soft: #cabd9c;
  --khaki-deep: #8a7a55;
  --gold:       #8a7a55;   /* legacy alias → khaki-deep */
  --gold-soft:  #cabd9c;   /* legacy alias → khaki-soft */
  --amber:      #141312;   /* legacy alias → primary CTA = black */

  --sand:       #ece4d3;
  --sand-deep:  #ddd0b6;
  --paper:      #f7f4ee;   /* warm white */
  --paper-2:    #efeae0;
  --mist:       #ffffff;

  --txt:        #1c1a17;
  --txt-soft:   #6c6658;
  --line:       rgba(20,19,18,.13);

  /* type */
  --display: "Archivo", system-ui, sans-serif;  /* heavy grotesque headlines */
  --script:  "Tangerine", cursive;
  --body:    "Outfit", system-ui, sans-serif;

  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 72px);
  --r: 18px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--body);
  color:var(--txt);
  background:var(--paper);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
:focus-visible{ outline:2.5px solid var(--amber); outline-offset:3px; border-radius:4px; }

/* ---------- type scale ---------- */
.h2{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(2rem, 5vw, 3.4rem);
  line-height:1.04;
  letter-spacing:-.01em;
  font-optical-sizing:auto;
}
.h2--light{ color:var(--paper); }
.eyebrow{
  font-size:.78rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1rem;
}
.eyebrow--light{ color:var(--gold-soft); }
.lead{ font-size:clamp(1.05rem,1.6vw,1.22rem); color:var(--txt); max-width:54ch; }
.muted{ color:var(--txt-soft); margin-top:1rem; max-width:54ch; }

.section{ padding:clamp(64px,9vw,140px) var(--pad); position:relative; }
.section__head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:2rem;
  flex-wrap:wrap; margin-bottom:clamp(2.5rem,5vw,4rem);
  max-width:var(--maxw); margin-inline:auto;
}
.section__note{ color:var(--txt-soft); max-width:36ch; }
.section__note--link{ color:var(--gold); font-weight:600; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.95em 1.7em; border-radius:100px; font-weight:600; font-size:.98rem;
  letter-spacing:.01em; transition:transform .4s var(--ease), background .3s, color .3s, box-shadow .3s;
  will-change:transform; white-space:nowrap;
}
.btn--solid{ background:var(--black); color:#fff; box-shadow:0 12px 30px -12px rgba(20,19,18,.55); }
.btn--solid:hover{ background:var(--khaki-deep); transform:translateY(-2px); }
.btn--ghost{ border:1.5px solid currentColor; color:var(--paper); }
.btn--ghost:hover{ background:var(--paper); color:var(--ink); }
.btn--ghost-dark{ color:var(--ink); border-color:rgba(20,17,15,.35); }
.btn--ghost-dark:hover{ background:var(--ink); color:var(--paper); }
.btn--block{ width:100%; }

/* ---------- preloader ---------- */
.preloader{
  position:fixed; inset:0; z-index:200; background:var(--ink);
  display:grid; place-items:center; transition:opacity .8s var(--ease), visibility .8s;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader__mark{ display:grid; place-items:center; gap:1.2rem; }
.infinity{ width:120px; height:60px; }
.infinity__path{
  fill:none; stroke:var(--gold-soft); stroke-width:3;
  stroke-dasharray:340; stroke-dashoffset:340;
  animation:draw 1.6s var(--ease) forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }
.preloader__text{
  font-family:var(--body); letter-spacing:.4em; font-size:.7rem; color:var(--sand);
  opacity:0; animation:fadeIn .6s .8s forwards; padding-left:.4em;
}
@keyframes fadeIn{ to{ opacity:.8; } }

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem var(--pad);
  transition:background .4s var(--ease), box-shadow .4s, padding .4s;
}
.nav.is-stuck{ background:rgba(250,245,236,.88); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line); padding-top:.6rem; padding-bottom:.6rem; }
.nav__brand{ display:flex; align-items:center; gap:.7rem; z-index:2; }
.nav__emblem{ width:46px; color:var(--ink); transition:color .4s; }
.nav__emblem svg{ width:100%; height:auto; display:block; }
.nav.is-hero .nav__emblem{ color:var(--paper); }
.nav.is-hero .nav__word{ color:var(--paper); }
.nav__word{ display:flex; flex-direction:column; line-height:1; color:var(--ink); transition:color .4s; }
.nav__word strong{ font-family:var(--display); font-weight:600; letter-spacing:.18em; font-size:1.02rem; }
.nav__word em{ font-style:normal; font-size:.62rem; letter-spacing:.34em; text-transform:uppercase; opacity:.8; margin-top:2px; }

.nav__links{ display:flex; align-items:center; gap:.4rem; }
.nav__links a{ padding:.5rem .85rem; border-radius:100px; font-weight:500; font-size:.95rem; color:var(--ink); transition:color .3s, background .3s; }
.nav.is-hero .nav__links a{ color:var(--paper); }
.nav__links a:hover{ color:var(--amber); }
.nav__cta{ background:var(--amber); color:#fff !important; }
.nav__cta:hover{ background:var(--khaki-deep); }
.nav.is-hero .nav__cta{ color:#fff !important; }

.nav__tools{ display:flex; align-items:center; gap:.8rem; z-index:2; }
.cur{ display:flex; border:1.4px solid var(--line); border-radius:100px; overflow:hidden; }
.nav.is-hero .cur{ border-color:rgba(255,255,255,.35); }
.cur__btn{ padding:.4rem .7rem; font-weight:600; font-size:.85rem; color:var(--ink); transition:background .25s,color .25s; }
.nav.is-hero .cur__btn{ color:var(--paper); }
.cur__btn.is-active{ background:var(--amber); color:#fff; }
.nav.is-hero .cur__btn.is-active{ color:#fff; }

.nav__burger{ display:none; flex-direction:column; gap:5px; padding:8px; }
.nav__burger span{ width:24px; height:2px; background:var(--ink); transition:.3s; }
.nav.is-hero .nav__burger span{ background:var(--paper); }

/* =====================================================================
   HERO — rotating 3D photo wall (black / white / khaki)
   ===================================================================== */
.hero{
  position:relative; min-height:100svh;
  padding:clamp(96px,13vh,150px) var(--pad) clamp(28px,5vh,52px);
  background:
    radial-gradient(120% 90% at 50% 6%, #ffffff 0%, var(--paper) 60%, var(--paper-2) 100%);
  color:var(--black);
  display:flex; flex-direction:column; align-items:center;
  overflow:hidden;
}
.hero__top{ text-align:center; position:relative; z-index:3; }
.hero__kicker{
  font-size:.74rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--khaki-deep); margin-bottom:.9rem;
}
.hero__title{
  font-family:var(--display); font-weight:900;
  font-size:clamp(2.6rem,9vw,6.6rem); line-height:.86; letter-spacing:-.035em;
  text-transform:uppercase; color:var(--black);
}
.hero__sub{ margin:1.2rem auto 0; max-width:60ch; color:var(--txt-soft); font-size:clamp(.98rem,1.4vw,1.16rem); }

/* the rotating cylinder */
.cyl{
  --pw:250px; --ph:340px;
  position:relative; z-index:2; width:100%; flex:1;
  min-height:clamp(280px,40vh,440px);
  margin-top:clamp(8px,2vh,28px);
  perspective:1300px; perspective-origin:50% 46%;
  display:flex; align-items:center; justify-content:center;
  touch-action:pan-y; cursor:grab;
}
.cyl:active{ cursor:grabbing; }
.cyl__rotor{ position:relative; width:1px; height:1px; transform-style:preserve-3d; }
.panel{
  position:absolute; top:0; left:0;
  width:var(--pw); height:var(--ph);
  margin:calc(var(--ph) / -2) 0 0 calc(var(--pw) / -2);
  border-radius:8px; overflow:hidden;
  background:var(--paper-2);
  box-shadow:0 26px 50px -24px rgba(20,19,18,.55), inset 0 0 0 1px rgba(20,19,18,.06);
  backface-visibility:hidden;
}
.panel img{ width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .7s var(--ease); }
.panel img.is-loaded{ opacity:1; }
.panel__cap{
  position:absolute; left:12px; bottom:10px; z-index:2;
  font-size:.7rem; font-weight:600; letter-spacing:.03em; color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.7); opacity:0; transition:opacity .4s;
}
.panel::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(20,19,18,.5), transparent 45%); opacity:.5; }
.panel.is-front .panel__cap{ opacity:1; }

/* soft edge fades so panels bleed off-screen like the reference */
.cyl__fade{ position:absolute; top:0; bottom:0; width:clamp(40px,12vw,180px); z-index:4; pointer-events:none; }
.cyl__fade--l{ left:0; background:linear-gradient(to right, var(--paper), transparent); }
.cyl__fade--r{ right:0; background:linear-gradient(to left, var(--paper), transparent); }

.hero__bottom{ position:relative; z-index:3; text-align:center; }
.hero__tag{ font-family:var(--display); font-weight:600; font-size:clamp(1rem,2vw,1.3rem); letter-spacing:-.01em; }
.hero__tag span{ color:var(--khaki-deep); }
.hero__links{ display:flex; gap:2rem; justify-content:center; margin-top:1rem; }
.hero__links a{ font-weight:600; letter-spacing:.01em; border-bottom:2px solid var(--khaki); padding-bottom:3px; transition:color .25s, border-color .25s; }
.hero__links a:hover{ color:var(--khaki-deep); border-color:var(--khaki-deep); }

/* =====================================================================
   SCENES — built-in landscape artwork (swap with photos anytime)
   ===================================================================== */
.scene{ position:absolute; inset:0; background-size:cover; background-position:center; }
.scene--sunrise{ background:
  linear-gradient(to bottom, #f6b25a 0%, #ec8a3c 26%, #d65f2a 44%, #7a3b3f 60%, #2c2a3e 100%),
  radial-gradient(circle at 50% 42%, rgba(255,240,200,.9), transparent 30%); background-blend-mode:screen; }
.scene--dune{ background:linear-gradient(to bottom, #f3cf8e 0%, #e0a85a 34%, #c98a3d 56%, #8a5a2b 100%); }
.scene--dune::before, .scene--ocean::before, .scene--sunrise::before, .scene--kayak::before,
.scene--savanna::before, .scene--moon::before, .scene--fish::before, .scene--star::before{
  content:""; position:absolute; inset:0;
}
.scene--dune::before{ background:
  radial-gradient(140% 70% at 110% 100%, #6f4622 0 40%, transparent 41%),
  radial-gradient(120% 60% at -20% 100%, #b07a36 0 38%, transparent 39%); }
.scene--ocean{ background:linear-gradient(to bottom,#bfe0e3 0%, #5ea3aa 30%, #1f6f7a 60%, #0c3a44 100%); }
.scene--ocean::before{ background:repeating-linear-gradient(to bottom, transparent 0 22px, rgba(255,255,255,.06) 22px 24px); opacity:.6; }
.scene--kayak{ background:linear-gradient(to bottom,#ffd89b 0%, #e89c5b 28%, #4f93a0 55%, #14525e 100%); }
.scene--kayak::before{ background:radial-gradient(60% 30% at 50% 78%, rgba(12,33,40,.5), transparent 70%); }
.scene--savanna{ background:linear-gradient(to bottom,#f1e2b8 0%, #d9b56a 38%, #9a7b3e 62%, #4d3b22 100%); }
.scene--savanna::before{ background:
  radial-gradient(80% 50% at 78% 100%, #5c4326 0 35%, transparent 36%),
  radial-gradient(60% 44% at 20% 100%, #6b4e2c 0 34%, transparent 35%); }
.scene--moon{ background:linear-gradient(to bottom,#c8c2b0 0%, #9a8f74 36%, #6e5f44 62%, #2f2a22 100%); }
.scene--moon::before{ background:radial-gradient(circle at 76% 22%, #f4efe0 0 5%, transparent 6%); }
.scene--fish{ background:linear-gradient(to bottom,#e9c98e 0%, #c98a3d 22%, #2b6f74 52%, #0c2a30 100%); }
.scene--star{ background:radial-gradient(120% 90% at 50% 120%, #243a4a 0%, #101a2c 60%, #060912 100%); }
.scene--star::before{ background-image:
  radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent),
  radial-gradient(1.5px 1.5px at 70% 20%, #fff, transparent),
  radial-gradient(1px 1px at 40% 60%, #fff, transparent),
  radial-gradient(1.5px 1.5px at 85% 50%, #fff, transparent),
  radial-gradient(1px 1px at 55% 40%, #fff, transparent),
  radial-gradient(1px 1px at 12% 70%, #fff, transparent); opacity:.9; }

/* =====================================================================
   MARQUEE
   ===================================================================== */
.marquee{ background:var(--ink); color:var(--sand); padding:1.1rem 0; overflow:hidden; border-block:1px solid rgba(255,255,255,.08); }
.marquee__track{ display:flex; align-items:center; gap:2.5rem; white-space:nowrap; width:max-content; animation:marquee 26s linear infinite; }
.marquee__track span{ font-family:var(--display); font-style:italic; font-size:clamp(1.4rem,3vw,2.2rem); }
.marquee__track i{ color:var(--gold); font-style:normal; font-size:1rem; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* =====================================================================
   ABOUT
   ===================================================================== */
.about{ background:var(--paper); max-width:none; }
.about__grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.4fr .9fr; gap:clamp(2rem,5vw,5rem); align-items:end; }
.about__intro .h2{ margin:.3rem 0 1.4rem; }
.about__stats{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:1.5rem 2rem; }
.about__stats li{ border-top:2px solid var(--line); padding-top:.8rem; }
.about__stats b{ font-family:var(--display); font-size:clamp(2.2rem,4vw,3rem); font-weight:600; color:var(--ink); display:block; line-height:1; }
.about__stats span{ font-size:.86rem; color:var(--txt-soft); letter-spacing:.02em; }

.why{ max-width:var(--maxw); margin:clamp(3rem,6vw,5rem) auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.why article{ background:var(--mist); border:1px solid var(--line); border-radius:var(--r); padding:1.6rem; transition:transform .4s var(--ease), box-shadow .4s; }
.why article:hover{ transform:translateY(-5px); box-shadow:0 24px 40px -28px rgba(20,17,15,.4); }
.why h3{ font-family:var(--display); font-weight:600; font-size:1.22rem; margin:.9rem 0 .4rem; }
.why p{ color:var(--txt-soft); font-size:.95rem; }
.why__i{ display:block; width:42px; height:42px; border-radius:12px; background:linear-gradient(135deg,var(--gold-soft),var(--amber)); position:relative; }
.why__i::after{ content:""; position:absolute; inset:0; background:var(--ink); -webkit-mask:center/55% no-repeat; mask:center/55% no-repeat; }
.why__i[data-i="local"]::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2C8 2 5 5 5 9c0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7zm0 9.5A2.5 2.5 0 1112 6.5a2.5 2.5 0 010 5z'/%3E%3C/svg%3E"); }
.why__i[data-i="heart"]::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 21s-8-5.3-8-11a4.5 4.5 0 018-2.7A4.5 4.5 0 0120 10c0 5.7-8 11-8 11z'/%3E%3C/svg%3E"); }
.why__i[data-i="family"]::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M9 11a3 3 0 100-6 3 3 0 000 6zm6 0a3 3 0 100-6 3 3 0 000 6zm-6 2c-3 0-6 1.5-6 4v2h8v-2c0-1 .4-1.9 1-2.6A8 8 0 009 13zm6 0c-.7 0-1.4.1-2 .3.6.7 1 1.6 1 2.7v2h7v-2c0-2.5-3-4-6-4z'/%3E%3C/svg%3E"); }
.why__i[data-i="access"]::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='12' cy='4' r='2'/%3E%3Cpath d='M19 13l-4-1V8a2 2 0 10-4 0v6l5 1 3 5 1.7-1-2.7-6zM10 14a4 4 0 104 4h-2a2 2 0 11-2-2v-2z'/%3E%3C/svg%3E"); }
.why__i[data-i="group"]::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 12a4 4 0 100-8 4 4 0 000 8zm0 2c-4 0-8 2-8 5v1h16v-1c0-3-4-5-8-5z'/%3E%3C/svg%3E"); }
.why__i[data-i="star"]::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2l3 6.5 7 .6-5.3 4.6L18.5 22 12 18.3 5.5 22l1.8-8.3L2 9.1l7-.6z'/%3E%3C/svg%3E"); }

/* =====================================================================
   EXPERIENCES
   ===================================================================== */
.exp{ background:var(--paper-2); }
.cards{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.card{ position:relative; border-radius:var(--r); overflow:hidden; background:var(--ink); min-height:320px; display:flex; flex-direction:column; justify-content:flex-end; isolation:isolate; }
.card__scene{ position:absolute; inset:0; z-index:-2; transition:transform .8s var(--ease); }
.card:hover .card__scene{ transform:scale(1.07); }
.card::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, rgba(8,20,25,.92) 8%, rgba(8,20,25,.35) 50%, transparent 80%); }
.card__body{ padding:1.4rem; color:var(--paper); }
.card__meta{ display:flex; gap:.6rem; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:.5rem; }
.card__meta span{ display:inline-flex; align-items:center; gap:.3rem; }
.card h3{ font-family:var(--display); font-weight:600; font-size:1.3rem; line-height:1.1; }
.card p{ font-size:.92rem; color:rgba(243,232,214,.82); margin:.5rem 0 1rem; }
.card__foot{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; border-top:1px solid rgba(255,255,255,.16); padding-top:.9rem; }
.card__price b{ font-family:var(--display); font-size:1.45rem; font-weight:600; }
.card__price small{ display:block; font-size:.72rem; color:rgba(243,232,214,.65); letter-spacing:.04em; }
.card__add{ font-size:.85rem; font-weight:600; color:var(--gold-soft); border:1.4px solid currentColor; border-radius:100px; padding:.45em 1em; transition:.3s; }
.card__add:hover{ background:var(--amber); color:#fff; border-color:var(--amber); }

.rates{ max-width:var(--maxw); margin:2.5rem auto 0; border:1px solid var(--line); border-radius:var(--r); background:var(--mist); overflow:hidden; }
.rates>summary{ list-style:none; cursor:pointer; padding:1.1rem 1.5rem; font-weight:600; color:var(--ink); display:flex; justify-content:space-between; align-items:center; }
.rates>summary::-webkit-details-marker{ display:none; }
.rates>summary::after{ content:"+"; font-size:1.4rem; color:var(--gold); }
.rates[open]>summary::after{ content:"–"; }
.rates__inner{ padding:0 1.5rem 1.5rem; }
.rates__table{ width:100%; border-collapse:collapse; font-size:.92rem; }
.rates__table th, .rates__table td{ text-align:left; padding:.7rem .6rem; border-bottom:1px solid var(--line); }
.rates__table th{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--txt-soft); }
.rates__table th span{ text-transform:none; letter-spacing:0; }
.rates__table td:nth-child(2), .rates__table td:nth-child(3){ font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink); }
.rates__catering{ margin-top:1.4rem; padding:1.2rem; background:var(--sand); border-radius:12px; }
.rates__catering h4{ font-family:var(--display); font-weight:600; font-size:1.05rem; }
.rates__catering h4 span{ font-family:var(--body); font-weight:400; color:var(--txt-soft); font-size:.85rem; }
.rates__catering ul{ list-style:none; display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; margin-top:.7rem; }
.rates__catering li{ position:relative; padding-left:1.3rem; font-size:.92rem; }
.rates__catering li::before{ content:"✓"; position:absolute; left:0; color:var(--amber); font-weight:700; }

/* =====================================================================
   BUILDER
   ===================================================================== */
.builder{ background:radial-gradient(120% 100% at 80% 0%, #2a2620, var(--ink)); color:var(--paper); }
.builder__head{ max-width:var(--maxw); margin:0 auto clamp(2rem,4vw,3rem); }
.builder__intro{ max-width:54ch; color:rgba(243,232,214,.82); margin-top:1rem; }
.builder__grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.5fr 1fr; gap:1.6rem; align-items:start; }
.bpick{ border:1px solid rgba(255,255,255,.14); border-radius:var(--r); padding:1.5rem; background:rgba(255,255,255,.03); margin-bottom:1.4rem; }
.bpick legend{ font-weight:600; letter-spacing:.04em; color:var(--gold-soft); padding:0 .5rem; }
.bpick__list{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-top:1rem; }
.bopt{ display:flex; align-items:center; gap:.7rem; padding:.8rem 1rem; border:1px solid rgba(255,255,255,.14); border-radius:12px; cursor:pointer; transition:.25s; }
.bopt:hover{ border-color:var(--gold-soft); background:rgba(255,255,255,.05); }
.bopt input{ accent-color:var(--amber); width:18px; height:18px; }
.bopt.is-on{ border-color:var(--khaki); background:rgba(179,160,121,.16); }
.bopt__name{ font-size:.92rem; font-weight:500; line-height:1.2; }
.bopt__price{ margin-left:auto; font-size:.82rem; color:var(--gold-soft); white-space:nowrap; font-variant-numeric:tabular-nums; }

.bcount{ display:flex; gap:1.4rem; flex-wrap:wrap; margin-top:1rem; }
.bcount label{ display:flex; flex-direction:column; gap:.5rem; font-size:.9rem; }
.bcount small{ color:rgba(243,232,214,.6); }
.stepper{ display:inline-flex; align-items:center; border:1px solid rgba(255,255,255,.2); border-radius:100px; overflow:hidden; }
.stepper button{ width:38px; height:38px; font-size:1.2rem; color:var(--paper); transition:background .2s; }
.stepper button:hover{ background:rgba(255,255,255,.1); }
.stepper input{ width:48px; text-align:center; background:transparent; border:none; color:var(--paper); font-weight:600; font-size:1rem; -moz-appearance:textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; }
.bfield{ display:flex; flex-direction:column; gap:.5rem; margin-top:1.2rem; font-size:.9rem; }
.bfield input, .bfield textarea{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:10px; padding:.7rem .9rem; color:var(--paper); font-family:inherit; font-size:.95rem; }
.bfield input::-webkit-calendar-picker-indicator{ filter:invert(.8); }

.builder__summary{ position:sticky; top:90px; background:var(--mist); color:var(--txt); border-radius:var(--r); padding:1.6rem; box-shadow:0 30px 60px -30px rgba(0,0,0,.6); }
.builder__summary h3{ font-family:var(--display); font-weight:600; font-size:1.4rem; margin-bottom:1rem; }
.bsum__lines{ list-style:none; display:flex; flex-direction:column; gap:.6rem; min-height:60px; max-height:240px; overflow:auto; }
.bsum__lines li{ display:flex; justify-content:space-between; gap:1rem; font-size:.92rem; padding-bottom:.6rem; border-bottom:1px dashed var(--line); }
.bsum__lines li span:last-child{ font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; }
.bsum__empty{ color:var(--txt-soft); border:none !important; }
.bsum__total{ display:flex; justify-content:space-between; align-items:baseline; margin-top:1.2rem; padding-top:1rem; border-top:2px solid var(--ink); }
.bsum__total span{ font-weight:600; }
.bsum__total strong{ font-family:var(--display); font-size:2rem; font-weight:600; color:var(--ink); }
.bsum__fine{ font-size:.76rem; color:var(--txt-soft); margin:.6rem 0 1.2rem; }
.bsum__actions{ display:grid; gap:.6rem; }

/* =====================================================================
   GALLERY
   ===================================================================== */
.gallery{ background:var(--paper); }
.gallery__grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:14px; }
.gtile{ position:relative; border-radius:14px; overflow:hidden; cursor:pointer; }
.gtile:nth-child(1){ grid-column:span 2; grid-row:span 2; }
.gtile:nth-child(6){ grid-column:span 2; }
.gtile .scene{ transition:transform .7s var(--ease); }
.gtile:hover .scene{ transform:scale(1.08); }
.gtile::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,20,25,.55), transparent 60%); opacity:0; transition:.4s; }
.gtile:hover::after{ opacity:1; }
.gtile span{ position:absolute; left:14px; bottom:12px; color:#fff; font-weight:600; font-size:.9rem; opacity:0; transform:translateY(6px); transition:.4s; z-index:2; text-shadow:0 1px 8px rgba(0,0,0,.6); }
.gtile:hover span{ opacity:1; transform:none; }

/* =====================================================================
   FILM
   ===================================================================== */
.film{ background:var(--paper); }
.film__card{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
.film__media{ position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:16/10; box-shadow:0 40px 80px -40px rgba(12,33,40,.6); }
.film__scene{ position:absolute; inset:0; background:linear-gradient(120deg,#2a2620,#100f0e); }
.film__scene::after{ content:""; position:absolute; inset:0; background:
  radial-gradient(60% 50% at 30% 30%, rgba(179,160,121,.42), transparent 60%),
  radial-gradient(50% 60% at 80% 80%, rgba(138,122,85,.4), transparent 60%); }
.film__play{ position:absolute; inset:0; margin:auto; width:84px; height:84px; border-radius:50%; background:rgba(250,245,236,.92); display:grid; place-items:center; transition:transform .3s, background .3s; }
.film__play svg{ width:34px; height:34px; fill:var(--ink); margin-left:3px; }
.film__play:hover{ transform:scale(1.08); background:#fff; }
.film__play::before{ content:""; position:absolute; inset:-10px; border-radius:50%; border:1.5px solid rgba(250,245,236,.5); animation:pulse 2s var(--ease) infinite; }
@keyframes pulse{ 0%{transform:scale(.9);opacity:1} 100%{transform:scale(1.5);opacity:0} }
.film__text .h2{ margin:.3rem 0 1rem; }

/* =====================================================================
   CLIENT GALLERY
   ===================================================================== */
.client{ background:linear-gradient(120deg,var(--ink),#2a2620); color:var(--paper); }
.client__inner{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.client__text .h2{ margin:.3rem 0 1rem; }
.client__text p{ color:rgba(243,232,214,.82); max-width:46ch; }
.client__form label{ font-weight:600; letter-spacing:.04em; font-size:.85rem; color:var(--gold-soft); }
.client__row{ display:flex; gap:.7rem; margin:.8rem 0; flex-wrap:wrap; }
.client__row input{ flex:1; min-width:200px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.2); border-radius:100px; padding:.9rem 1.3rem; color:var(--paper); font-family:inherit; font-size:1rem; letter-spacing:.08em; }
.client__hint{ font-size:.84rem; color:rgba(243,232,214,.6); }

/* =====================================================================
   REVIEWS
   ===================================================================== */
.reviews{ background:var(--paper-2); overflow:hidden; }
.reviews__track{ display:flex; gap:1.4rem; max-width:var(--maxw); margin:0 auto; overflow-x:auto; padding-bottom:1rem; scroll-snap-type:x mandatory; }
.reviews__track::-webkit-scrollbar{ height:6px; }
.reviews__track::-webkit-scrollbar-thumb{ background:var(--gold); border-radius:10px; }
.rev{ flex:0 0 min(380px,82vw); scroll-snap-align:start; background:var(--mist); border:1px solid var(--line); border-radius:var(--r); padding:1.8rem; display:flex; flex-direction:column; }
.rev__stars{ color:var(--amber); letter-spacing:.1em; margin-bottom:.8rem; }
.rev__text{ font-family:var(--display); font-size:1.12rem; line-height:1.45; color:var(--ink); flex:1; }
.rev__by{ margin-top:1.2rem; font-size:.9rem; }
.rev__by b{ color:var(--ink); }
.rev__by span{ color:var(--txt-soft); }
.reviews__cta{ max-width:var(--maxw); margin:2rem auto 0; text-align:center; color:var(--txt-soft); }
.reviews__cta a{ color:var(--gold); font-weight:600; border-bottom:1.5px solid currentColor; }

/* =====================================================================
   VISIT
   ===================================================================== */
.visit{ background:var(--paper); display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem,5vw,4rem); align-items:center; max-width:var(--maxw); margin-inline:auto; }
.visit__text .h2{ margin:.3rem 0 1rem; }
.visit__facts{ list-style:none; margin:1.6rem 0; display:grid; gap:1rem; }
.visit__facts li{ display:grid; gap:.15rem; border-left:2px solid var(--gold); padding-left:1rem; }
.visit__facts b{ font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; color:var(--txt-soft); font-weight:600; }
.visit__facts a{ color:var(--amber); font-weight:600; }
.visit__map{ border-radius:var(--r); overflow:hidden; box-shadow:0 40px 80px -45px rgba(12,33,40,.6); aspect-ratio:1/1; }
.visit__map iframe{ width:100%; height:100%; border:0; filter:saturate(.9); }

/* =====================================================================
   POLICY
   ===================================================================== */
.policy{ background:var(--paper-2); }
.policy__grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.pol{ border:1px solid var(--line); border-radius:14px; background:var(--mist); overflow:hidden; }
.pol summary{ list-style:none; cursor:pointer; padding:1.2rem 1.4rem; font-family:var(--display); font-weight:600; font-size:1.12rem; color:var(--ink); display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.pol summary::-webkit-details-marker{ display:none; }
.pol summary::after{ content:"+"; color:var(--gold); font-size:1.3rem; }
.pol[open] summary::after{ content:"–"; }
.pol p{ padding:0 1.4rem 1.3rem; color:var(--txt-soft); font-size:.95rem; }

/* =====================================================================
   CONTACT
   ===================================================================== */
.contact{ background:radial-gradient(120% 100% at 20% 0%, #2a2620, var(--ink)); color:var(--paper); }
.contact__grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem,5vw,4rem); }
.contact__text .h2{ margin:.3rem 0 1rem; }
.contact__text p{ color:rgba(243,232,214,.82); max-width:42ch; }
.contact__direct{ list-style:none; margin:1.8rem 0; display:grid; gap:1.1rem; }
.contact__direct li{ display:grid; gap:.1rem; }
.contact__direct span{ font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gold-soft); }
.contact__direct a{ font-size:1.1rem; font-weight:500; }
.contact__direct a:hover{ color:var(--gold-soft); }
.contact__social{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem; }
.soc{ display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1rem; border:1px solid rgba(255,255,255,.2); border-radius:100px; font-size:.85rem; font-weight:500; transition:.25s; }
.soc:hover{ background:var(--amber); border-color:var(--amber); color:#fff; transform:translateY(-2px); }
.soc svg{ width:16px; height:16px; fill:currentColor; }

.contact__form{ background:var(--mist); color:var(--txt); border-radius:var(--r); padding:clamp(1.5rem,3vw,2.4rem); box-shadow:0 40px 80px -40px rgba(0,0,0,.6); }
.cf__row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.cf{ display:flex; flex-direction:column; gap:.4rem; font-size:.82rem; font-weight:600; letter-spacing:.03em; color:var(--txt-soft); text-transform:uppercase; margin-bottom:1rem; }
.cf input, .cf select, .cf textarea{ font-family:inherit; font-size:1rem; font-weight:400; text-transform:none; letter-spacing:0; color:var(--txt); padding:.8rem .95rem; border:1px solid var(--line); border-radius:10px; background:#fff; transition:border .25s, box-shadow .25s; }
.cf input:focus, .cf select:focus, .cf textarea:focus{ outline:none; border-color:var(--khaki-deep); box-shadow:0 0 0 3px rgba(179,160,121,.25); }
.cf__note{ text-align:center; font-size:.8rem; color:var(--txt-soft); margin-top:.9rem; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer{ background:var(--char); color:var(--sand); padding:clamp(3rem,6vw,5rem) var(--pad) 1.5rem; }
.footer__top{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr 1.2fr 1.2fr; gap:2.5rem; padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,.12); }
.footer__brand .nav__emblem{ width:60px; color:var(--gold-soft); }
.footer__word{ font-family:var(--display); letter-spacing:.12em; margin:1rem 0 .4rem; }
.footer__word strong{ font-weight:600; }
.footer__tag{ font-family:var(--display); font-style:italic; color:rgba(243,232,214,.7); font-size:.95rem; }
.footer__tag em{ color:var(--gold-soft); }
.footer__social{ display:flex; gap:.5rem; margin-top:1.2rem; }
.footer__social .soc{ padding:.5rem; width:38px; height:38px; justify-content:center; }
.footer__social .soc span{ display:none; }
.footer h4{ font-size:.78rem; text-transform:uppercase; letter-spacing:.14em; color:var(--gold-soft); margin-bottom:1rem; }
.footer__nav, .footer__contact, .footer__reg{ display:flex; flex-direction:column; gap:.5rem; font-size:.92rem; }
.footer__nav a:hover, .footer__contact a:hover{ color:var(--gold-soft); }
.footer__contact p, .footer__reg p{ color:rgba(243,232,214,.65); }
.footer__bottom{ max-width:var(--maxw); margin:0 auto; padding-top:1.5rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; font-size:.82rem; color:rgba(243,232,214,.5); }

/* =====================================================================
   FAB + LIGHTBOX
   ===================================================================== */
.fab{ position:fixed; right:20px; bottom:20px; z-index:90; width:58px; height:58px; border-radius:50%; background:#25d366; display:grid; place-items:center; box-shadow:0 12px 30px -8px rgba(37,211,102,.7); transition:transform .3s; }
.fab:hover{ transform:scale(1.08) rotate(-4deg); }
.fab svg{ width:32px; height:32px; fill:#fff; }

.lightbox{ position:fixed; inset:0; z-index:150; background:rgba(8,16,20,.94); display:none; place-items:center; padding:4vw; }
.lightbox.is-open{ display:grid; }
.lightbox__fig{ width:min(900px,90vw); aspect-ratio:3/2; border-radius:14px; overflow:hidden; box-shadow:0 40px 100px rgba(0,0,0,.6); position:relative; }
.lightbox__fig .scene{ position:absolute; inset:0; }
.lightbox__fig figcaption{ position:absolute; left:0; right:0; bottom:0; padding:1.2rem; background:linear-gradient(transparent, rgba(0,0,0,.7)); color:#fff; font-weight:500; }
.lightbox__close{ position:absolute; top:20px; right:24px; font-size:1.6rem; color:#fff; width:44px; height:44px; }
.lightbox__nav{ position:absolute; top:50%; transform:translateY(-50%); font-size:2.4rem; color:#fff; width:54px; height:54px; opacity:.7; transition:opacity .2s; }
.lightbox__nav:hover{ opacity:1; }
.lightbox__nav--prev{ left:2vw; }
.lightbox__nav--next{ right:2vw; }

/* =====================================================================
   REVEAL
   ===================================================================== */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1024px){
  .about__grid{ grid-template-columns:1fr; }
  .why{ grid-template-columns:repeat(2,1fr); }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .builder__grid, .film__card, .client__inner, .visit, .contact__grid{ grid-template-columns:1fr; }
  .builder__summary{ position:static; }
  .gallery__grid{ grid-template-columns:repeat(2,1fr); }
  .gtile:nth-child(1){ grid-column:span 2; grid-row:span 1; }
  .gtile:nth-child(6){ grid-column:span 1; }
  .footer__top{ grid-template-columns:1fr 1fr; }
  .cyl{ --pw:210px; --ph:290px; }
}
@media (max-width:760px){
  .nav__links{ position:fixed; inset:0 0 0 auto; width:min(300px,82vw); flex-direction:column; align-items:flex-start; justify-content:center; gap:.4rem; background:var(--ink); padding:2rem; transform:translateX(100%); transition:transform .4s var(--ease); }
  .nav__links.is-open{ transform:none; }
  .nav__links a{ color:var(--paper) !important; font-size:1.1rem; }
  .nav__burger{ display:flex; }
  .policy__grid{ grid-template-columns:1fr; }
  .cf__row{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr; gap:1.8rem; }
  .cyl{ --pw:172px; --ph:240px; min-height:280px; perspective:900px; }
  .hero__links{ gap:1.4rem; }
}
@media (max-width:480px){
  .why{ grid-template-columns:1fr; }
  .cards{ grid-template-columns:1fr; }
  .bpick__list{ grid-template-columns:1fr; }
  .cyl{ --pw:150px; --ph:212px; }
}

/* burger active */
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-reveal]{ opacity:1; transform:none; }
}