/* ============================================================
   Yalla Booth - shared stylesheet for static SEO landing pages
   Mirrors the homepage design system (src/index.css) so every
   landing page looks identical to the main site.
   ============================================================ */

/* ---------- Milanesa Serif - the single voice of the site ---------- */
@font-face { font-family:"Milanesa"; src:url("/fonts/MilanesaSerif-Light.woff2") format("woff2"); font-weight:300; font-display:swap; }
@font-face { font-family:"Milanesa"; src:url("/fonts/MilanesaSerif-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Milanesa"; src:url("/fonts/MilanesaSerif-DemiBold.woff2") format("woff2"); font-weight:500 600; font-display:swap; }
@font-face { font-family:"Milanesa"; src:url("/fonts/MilanesaSerif-Bold.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Milanesa"; src:url("/fonts/MilanesaSerif-ExtraBold.woff2") format("woff2"); font-weight:800; font-display:swap; }

/* ---------- design tokens ---------- */
:root {
  --canvas:#dcdedd; --canvas-soft:#e5e7e6; --paper:#eef0ef;
  --ink:#23201c; --ink-soft:#585349;
  --copper:#bd7239; --copper-deep:#a45a2b; --copper-ink:#8a4a20; --copper-bright:#d0955f;
  --espresso:#201b17; --espresso-soft:#2b251f; --cream:#ede8e1; --cream-soft:#b3aa9e;
  --line:rgb(35 32 28 / 0.14);
  --font-serif:"Milanesa", Georgia, "Times New Roman", serif;
  --ease:cubic-bezier(0.22, 1, 0.36, 1);
}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:6.5rem; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body {
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--font-serif);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--copper); color:var(--cream); }
:focus-visible { outline:2px solid var(--copper-deep); outline-offset:3px; border-radius:2px; }

/* ---------- typographic voices ---------- */
.caps { text-transform:uppercase; letter-spacing:0.32em; font-weight:500; font-size:0.7rem; }
.display { font-weight:300; line-height:1.02; letter-spacing:-0.015em; text-wrap:balance; }
.text-light { font-weight:300; }
.text-medium { font-weight:500; }
.text-strong { font-weight:600; }
.copper { color:var(--copper-ink); }
.copper-bright { color:var(--copper-bright); }

/* ---------- layout ---------- */
.wrap { max-width:80rem; margin-inline:auto; padding-inline:1.25rem; }
@media (min-width:768px){ .wrap{ padding-inline:2.5rem; } }

/* ---------- buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:0.6rem;
  padding:1.05rem 2.1rem; border-radius:9999px;
  font-family:var(--font-serif); font-size:0.8rem; text-transform:uppercase;
  letter-spacing:0.18em; font-weight:500; cursor:pointer; min-height:44px;
  border:0; position:relative; overflow:hidden;
  transition:background-color .3s var(--ease), border-color .3s var(--ease),
             color .3s var(--ease), box-shadow .3s var(--ease), transform .15s ease;
}
.btn:active { transform:scale(0.96); }
.btn:hover { box-shadow:0 15px 35px rgba(35,32,28,0.2); }
.btn-dark { background:var(--ink); color:var(--cream); }
.btn-dark:hover { background:var(--copper-deep); }
.btn-cream { background:var(--cream); color:var(--ink); }
.btn-cream:hover { background:var(--copper-bright); }
.btn-line { border:1px solid rgb(35 32 28 / 0.35); color:var(--ink); background:transparent; }
.btn-line:hover { border-color:var(--copper-deep); color:var(--copper-ink); }
.btn-line-light { border:1px solid rgb(237 232 225 / 0.45); color:var(--cream); background:transparent; }
.btn-line-light:hover { border-color:var(--copper-bright); color:var(--copper-bright); }
@media (prefers-reduced-motion:reduce){ .btn:active{ transform:none; } }

.tlink { position:relative; padding-bottom:2px; }
.tlink::after {
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(0.35); transform-origin:left;
  transition:transform .35s var(--ease);
}
.tlink:hover::after { transform:scaleX(1); }

/* ---------- scroll progress bar ---------- */
.progress { position:fixed; inset-inline:0; top:0; height:2px; z-index:60; background:var(--copper); transform:scaleX(0); transform-origin:left; }

/* ---------- header / nav ---------- */
.hdr {
  position:fixed; inset-inline:0; top:0; z-index:50;
  transition:background-color .3s var(--ease), box-shadow .3s var(--ease), backdrop-filter .3s var(--ease);
  background:transparent;
}
.hdr.scrolled { background:rgb(220 222 221 / 0.85); box-shadow:0 1px 0 0 var(--line); backdrop-filter:blur(12px); }
.nav { display:flex; align-items:center; justify-content:space-between; gap:1rem;
  max-width:80rem; margin-inline:auto; padding:1rem 1.25rem; }
@media (min-width:768px){ .nav{ padding:1.15rem 2.5rem; } }
.brand { display:flex; align-items:center; gap:0.65rem; }
.brand img { height:2.4rem; width:2.4rem; object-fit:contain; transition:transform .5s var(--ease); }
.brand:hover img { transform:rotate(-6deg) scale(1.1); }
.brand span { text-transform:uppercase; letter-spacing:0.28em; font-weight:600; font-size:0.85rem; color:var(--ink); }
/* over the dark hero, before scroll: light text */
.hdr:not(.scrolled) .brand span,
.hdr:not(.scrolled) .nav-links a,
.hdr:not(.scrolled) .nav-phone { color:var(--cream); }
.hdr:not(.scrolled) .burger span { background:var(--cream); }
.nav-links { display:none; align-items:center; gap:1.75rem; list-style:none; margin:0; padding:0; }
.nav-links a { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.28em; color:var(--ink-soft); }
.nav-links a:hover { color:var(--ink); }
.nav-cta { display:none; align-items:center; gap:1.25rem; }
.nav-phone { font-size:0.85rem; color:var(--ink-soft); }
.nav-phone:hover { color:var(--ink); }
.hdr .btn { padding:0.75rem 1.4rem; }
@media (min-width:1024px){
  .nav-links, .nav-cta { display:flex; }
  .burger { display:none; }
}
.burger { display:flex; flex-direction:column; gap:6px; height:2.6rem; width:2.6rem;
  align-items:center; justify-content:center; background:none; border:0; cursor:pointer; }
.burger span { display:block; height:1.5px; width:1.5rem; background:var(--ink); transition:transform .3s var(--ease), opacity .3s var(--ease); }

/* mobile menu */
.mmenu {
  position:fixed; inset:0; z-index:45; background:var(--canvas);
  display:flex; flex-direction:column; justify-content:center; padding:2rem;
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease); gap:0.5rem;
}
.mmenu.open { opacity:1; visibility:visible; }
.mmenu a.mlink { font-weight:300; font-size:2.6rem; line-height:1.1; color:var(--ink); padding:0.35rem 0; }
.mmenu .btn { margin-top:2rem; width:100%; }
.mmenu .mphone { text-align:center; margin-top:1rem; color:var(--ink-soft); }

/* ---------- hero ---------- */
.hero { position:relative; isolation:isolate; min-height:92vh; display:flex; align-items:flex-end;
  overflow:hidden; background:var(--espresso); }
.hero-bg { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; }
.hero::after {
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgb(20 17 14 / 0.92) 0%, rgb(20 17 14 / 0.55) 42%, rgb(20 17 14 / 0.45) 100%);
}
.hero-inner { max-width:80rem; margin-inline:auto; width:100%; padding:8rem 1.25rem 4.5rem; }
@media (min-width:768px){ .hero-inner{ padding:9rem 2.5rem 6rem; } }
.hero .kicker { color:var(--copper-bright); margin:0 0 1.25rem; }
.hero h1 { font-weight:300; line-height:1.02; letter-spacing:-0.015em; color:var(--cream);
  font-size:clamp(2.6rem, 7vw, 5.5rem); margin:0; max-width:16ch; text-wrap:balance; }
.hero h1 em { font-style:normal; color:var(--copper-bright); }
.hero .lede { color:rgb(237 232 225 / 0.82); font-weight:300; font-size:clamp(1.05rem,2.2vw,1.35rem);
  max-width:52ch; margin:1.75rem 0 0; line-height:1.6; }
.hero .cta { display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.5rem; }
.hero .meta { display:flex; flex-wrap:wrap; gap:1.25rem 2rem; margin-top:2.75rem;
  padding-top:1.75rem; border-top:1px solid rgb(237 232 225 / 0.15); }
.hero .meta div { color:var(--cream); }
.hero .meta .n { font-size:1.6rem; font-weight:300; }
.hero .meta .l { display:block; font-size:0.62rem; text-transform:uppercase; letter-spacing:0.22em; color:var(--cream-soft); margin-top:0.15rem; }

/* ---------- generic section ---------- */
.section { padding:5.5rem 0; }
@media (min-width:768px){ .section{ padding:8rem 0; } }
.section-head { max-width:44rem; }
.section-head.center { margin-inline:auto; text-align:center; }
.section-head .kicker { color:var(--copper-ink); margin:0 0 1rem; }
.section-head h2 { font-weight:300; line-height:1.05; letter-spacing:-0.015em;
  font-size:clamp(2rem,4.5vw,3.25rem); margin:0; color:var(--ink); text-wrap:balance; }
.section-head p { color:var(--ink-soft); font-weight:300; font-size:1.1rem; margin:1.25rem 0 0; }

/* feature grid */
.features { display:grid; gap:1.25rem; margin-top:3.5rem;
  grid-template-columns:repeat(auto-fit, minmax(15.5rem, 1fr)); }
.feature { background:var(--paper); border:1px solid var(--line); border-radius:1rem;
  padding:1.75rem; transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.feature:hover { transform:translateY(-4px); box-shadow:0 20px 40px -20px rgba(35,32,28,0.28); }
.feature .ic { display:grid; place-items:center; height:2.75rem; width:2.75rem; border-radius:9999px;
  background:rgb(189 114 57 / 0.12); color:var(--copper-ink); margin-bottom:1.1rem; }
.feature .ic svg { height:1.35rem; width:1.35rem; }
.feature h3 { font-weight:600; font-size:1.15rem; margin:0 0 0.5rem; color:var(--ink); }
.feature p { margin:0; color:var(--ink-soft); font-weight:300; font-size:0.98rem; line-height:1.6; }

/* ---------- dark band (packages / CTA) ---------- */
.band { background:var(--espresso); color:var(--cream); position:relative; isolation:isolate; overflow:hidden; }
.band::before { content:""; position:absolute; inset:auto 50% -8rem auto; transform:translateX(50%);
  width:80vw; max-width:48rem; height:20rem; background:rgb(189 114 57 / 0.2); filter:blur(90px); z-index:-1; border-radius:9999px; }
.band .section-head h2 { color:var(--cream); }
.band .section-head p { color:rgb(237 232 225 / 0.72); }
.band .section-head .kicker { color:var(--copper-bright); }

/* pill list of inclusions */
.checks { list-style:none; margin:3rem 0 0; padding:0; display:grid; gap:0.9rem;
  grid-template-columns:repeat(auto-fit, minmax(17rem,1fr)); }
.checks li { display:flex; gap:0.75rem; align-items:flex-start; font-weight:300; color:rgb(237 232 225 / 0.88); }
.checks svg { flex:none; height:1.25rem; width:1.25rem; color:var(--copper-bright); margin-top:0.15rem; }

/* ---------- internal links / explore ---------- */
.explore { display:grid; gap:2.5rem; margin-top:3.5rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); }
.explore h3 { font-size:0.65rem; text-transform:uppercase; letter-spacing:0.28em; color:var(--copper-ink); margin:0 0 1.1rem; }
.explore ul { list-style:none; margin:0; padding:0; display:grid; gap:0.7rem; }
.explore a { color:var(--ink-soft); font-weight:300; }
.explore a:hover { color:var(--copper-ink); }

/* ---------- final CTA ---------- */
.finalcta { text-align:center; }
.finalcta .btn { margin-top:2rem; }

/* ---------- footer (mirrors homepage) ---------- */
.ftr { background:var(--espresso); color:var(--cream); position:relative; isolation:isolate; overflow:hidden; }
.ftr::before { content:""; position:absolute; left:50%; bottom:-10rem; transform:translateX(-50%);
  width:80vw; max-width:48rem; height:20rem; background:rgb(189 114 57 / 0.2); filter:blur(90px); z-index:-1; border-radius:9999px; }
.ftr-top { border-bottom:1px solid rgb(237 232 225 / 0.1); }
.ftr-top .wrap { display:flex; flex-direction:column; align-items:center; gap:1.5rem; padding-block:4rem; text-align:center; }
@media (min-width:768px){ .ftr-top .wrap{ flex-direction:row; justify-content:space-between; text-align:left; } }
.ftr-motto { display:flex; align-items:center; gap:1.25rem; }
.ftr-motto .badge { display:grid; place-items:center; height:4.5rem; width:4.5rem; flex:none; border-radius:9999px;
  background:rgb(237 232 225 / 0.08); box-shadow:inset 0 0 0 1px rgb(237 232 225 / 0.15); }
.ftr-motto .badge img { height:3.4rem; width:3.4rem; object-fit:contain; }
.ftr-motto p { font-weight:300; font-size:clamp(1.75rem,4vw,2.75rem); line-height:1.05; margin:0; color:var(--cream); }
.ftr-cols { display:grid; gap:3rem; padding-block:4rem 3rem; }
@media (min-width:768px){ .ftr-cols{ grid-template-columns:1.5fr 1fr 1fr 1.1fr; } }
.ftr h4 { font-size:0.65rem; text-transform:uppercase; letter-spacing:0.28em; color:var(--copper-bright); margin:0 0 1.25rem; font-weight:500; }
.ftr-brandline { text-transform:uppercase; letter-spacing:0.28em; font-weight:500; font-size:0.85rem; margin:0 0 1.1rem; }
.ftr p.blurb { max-width:22rem; color:rgb(237 232 225 / 0.7); font-weight:300; margin:0; }
.ftr ul { list-style:none; margin:0; padding:0; display:grid; gap:0.85rem; }
.ftr-cols a { color:rgb(237 232 225 / 0.82); font-weight:300; }
.ftr-cols a:hover { color:var(--copper-bright); }
.ftr-contact a { display:inline-flex; align-items:center; gap:0.5rem; }
.ftr-contact svg { height:1rem; width:1rem; color:rgb(208 149 95 / 0.8); flex:none; }
.ftr-areas p { color:rgb(237 232 225 / 0.7); font-weight:300; margin:0 0 0.75rem; }
.ftr-word { font-weight:300; text-align:center; letter-spacing:0.04em; white-space:nowrap; margin:3.5rem 0 0;
  font-size:clamp(3rem,11.5vw,10.5rem); line-height:1; color:transparent; -webkit-text-stroke:1px rgb(237 232 225 / 0.22); }
.ftr-word .fill { color:var(--copper-bright); -webkit-text-stroke:0; }
.ftr-legal { display:flex; flex-direction:column; align-items:center; gap:1rem; text-align:center;
  border-top:1px solid rgb(237 232 225 / 0.12); margin-top:3rem; padding-top:2rem; }
@media (min-width:640px){ .ftr-legal{ flex-direction:row; justify-content:space-between; } }
.ftr-legal, .ftr-legal a { font-size:0.58rem; text-transform:uppercase; letter-spacing:0.28em; font-weight:300; color:var(--cream-soft); }
.ftr-legal a:hover { color:var(--copper-bright); }

/* ---------- floating whatsapp ---------- */
.fab { position:fixed; right:1.1rem; bottom:1.1rem; z-index:40; display:inline-flex; align-items:center; justify-content:center;
  height:3.4rem; width:3.4rem; border-radius:9999px; background:#25d366; color:#fff;
  box-shadow:0 10px 30px rgba(37,211,102,0.4); transition:transform .3s var(--ease); }
.fab:hover { transform:scale(1.08); }
.fab svg { height:1.7rem; width:1.7rem; }

/* ---------- media hardening (download deterrent) ---------- */
img, video {
  -webkit-user-drag:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}

/* ---------- scroll reveal ---------- */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }