/* Loquala landing — coral/apricot/roast/teal on warm cream.
   Deliberately single-theme: the brand commits to the warm room. */
:root{
  --coral:#F2704F; --coral-deep:#D95836; --apricot:#F5A15C;
  --roast:#5C3D1E; --ink:#3C2A16; --teal:#2E7D74;
  --cream:#FDF4E3; --cream-deep:#F6E8CF; --card:#FFFDF7;
  --shadow:0 10px 30px rgba(92,61,30,.14);
  --display:"Baloo 2",ui-rounded,"SF Pro Rounded",Verdana,sans-serif;
  --body:"Figtree",ui-sans-serif,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);line-height:1.6}
img{max-width:100%;display:block}

/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;
  padding:14px clamp(16px,4vw,40px);background:color-mix(in srgb,var(--cream) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid rgba(92,61,30,.08)}
.lockup{display:flex;align-items:center;gap:10px;text-decoration:none}
.mark{width:34px;height:34px}
.mark .awning{fill:var(--apricot)}
.mark .bubble{fill:var(--coral)}
.wordmark{font-family:var(--display);font-weight:700;font-size:24px;color:var(--roast);letter-spacing:-.01em}
.nav nav{display:flex;align-items:center;gap:clamp(10px,2.5vw,26px)}
.nav nav a{color:var(--roast);text-decoration:none;font-weight:600;font-size:15px}
.nav nav a:hover{color:var(--coral-deep)}

/* ---- buttons ---- */
.btn{display:inline-block;border:0;border-radius:999px;font-family:var(--display);font-weight:600;
  text-decoration:none;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.btn:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.btn-primary{background:var(--coral);color:#fff;padding:14px 28px;font-size:17px;box-shadow:var(--shadow)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(217,88,54,.3)}
.btn-ghost{border:2px solid var(--roast);color:var(--roast)!important;padding:8px 18px;font-size:14px}
.btn-ghost:hover{background:var(--roast);color:var(--cream)!important}
.btn-teal{background:var(--teal);color:#fff;padding:12px 22px;font-size:15px}
.btn-big{font-size:20px;padding:16px 36px}

/* ---- hero ---- */
.hero{position:relative;min-height:82vh;display:flex;align-items:flex-end;overflow:hidden}
.hero-plates{position:absolute;inset:0}
.plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s ease}
.plate.is-on{opacity:1}
.plate-wash{position:absolute;inset:0;background:
  linear-gradient(to top,var(--cream) 0%,color-mix(in srgb,var(--cream) 55%,transparent) 28%,transparent 60%),
  linear-gradient(to right,rgba(60,42,22,.35),transparent 55%)}
.hero-inner{position:relative;padding:0 clamp(20px,6vw,72px) clamp(48px,8vh,84px);max-width:760px}
.hero h1{font-family:var(--display);font-weight:700;color:#fff;
  font-size:clamp(38px,6.5vw,68px);line-height:1.04;margin:0 0 14px;text-wrap:balance;
  text-shadow:0 2px 24px rgba(60,42,22,.55)}
.hero .sub{color:#fff;font-size:clamp(16px,2vw,19px);max-width:52ch;margin:0 0 26px;
  text-shadow:0 1px 14px rgba(60,42,22,.65);font-weight:500}
.hero-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cta-note{color:#fff;font-size:14px;opacity:.92;text-shadow:0 1px 10px rgba(60,42,22,.6)}

/* ---- sections ---- */
section{padding:clamp(48px,8vw,88px) clamp(20px,6vw,72px)}
h2{font-family:var(--display);font-weight:700;color:var(--roast);font-size:clamp(24px,3.4vw,34px);
  margin:0 0 10px;display:flex;align-items:center;gap:16px}
h2::after{content:"";flex:1;height:3px;border-radius:3px;background:linear-gradient(to right,var(--apricot),transparent)}
.section-lede{color:color-mix(in srgb,var(--ink) 72%,transparent);max-width:62ch;margin:0 0 30px}

/* ---- locals wall ---- */
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px}
.local{margin:0;background:var(--card);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);
  transition:transform .18s ease}
.local:hover{transform:translateY(-4px)}
.local img{aspect-ratio:3/4;object-fit:cover;object-position:top;background:var(--cream-deep)}
.local figcaption{padding:12px 14px 14px}
.local b{font-family:var(--display);font-size:17px;color:var(--roast);display:block}
.local i{font-style:normal;font-size:12.5px;color:var(--teal);font-weight:600;display:block;margin:1px 0 8px}
.local q{quotes:none;display:block;font-size:14px;font-style:italic;color:var(--ink);
  opacity:0;max-height:0;transition:opacity .25s ease,max-height .25s ease}
.local:hover q,.local:focus-within q{opacity:1;max-height:3.5em}
@media (hover:none){.local q{opacity:1;max-height:3.5em}}

/* ---- how ---- */
.how{background:var(--cream-deep)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:26px}
.step{background:var(--card);border-radius:14px;padding:26px 24px;box-shadow:var(--shadow)}
.step-mark{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--apricot),var(--coral));
  display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:14px}
.step h3{font-family:var(--display);color:var(--roast);font-size:20px;margin:0 0 8px}
.step p{margin:0;font-size:15px}

/* ---- cities ---- */
.city-strip{list-style:none;display:flex;flex-wrap:wrap;gap:10px 12px;padding:0;margin:22px 0 14px}
.city-strip li{background:var(--card);border:1.5px solid rgba(92,61,30,.14);border-radius:999px;
  padding:8px 16px;font-weight:600;font-size:15px;box-shadow:0 3px 10px rgba(92,61,30,.06)}
.city-note{color:color-mix(in srgb,var(--ink) 65%,transparent);font-size:14.5px;margin:0}

/* ---- closer ---- */
.closer{text-align:center;background:
  radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--apricot) 26%,transparent),transparent 60%),var(--cream)}
.closer-line{justify-content:center;font-size:clamp(30px,5vw,48px)}
.closer-line::after{display:none}
.closer .btn-big{margin:18px 0 34px}
.waitlist{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}
.waitlist label{font-weight:600;color:var(--roast)}
.waitlist input{font:inherit;padding:12px 16px;border-radius:999px;border:2px solid rgba(92,61,30,.2);
  background:var(--card);min-width:240px}
.waitlist input:focus{outline:none;border-color:var(--teal)}
.wl-done{font-weight:600;color:var(--teal)}

/* ---- footer ---- */
footer{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:26px clamp(20px,6vw,72px);border-top:1px solid rgba(92,61,30,.1);
  font-size:13.5px;color:color-mix(in srgb,var(--ink) 60%,transparent)}
.foot-tag{font-style:italic}

/* ---- reveal on scroll ---- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .plate,.local,.btn,.reveal{transition:none}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---- city phrase panel ---- */
.city-strip li{padding:0;border:0;background:none;box-shadow:none}
.city-strip button{font:inherit;font-weight:600;font-size:15px;cursor:pointer;
  background:var(--card);border:1.5px solid rgba(92,61,30,.14);border-radius:999px;
  padding:8px 16px;box-shadow:0 3px 10px rgba(92,61,30,.06);color:var(--ink);
  transition:transform .15s ease,border-color .15s ease}
.city-strip button:hover{transform:translateY(-2px);border-color:var(--apricot)}
.city-strip button.is-active{background:var(--coral);border-color:var(--coral);color:#fff}
.city-strip button:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.city-panel{margin:18px 0 16px;background:var(--card);border-radius:14px;box-shadow:var(--shadow);
  padding:20px 22px;animation:cp-in .25s ease}
@keyframes cp-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cp-head{font-size:14px;color:var(--teal);font-weight:600;margin-bottom:14px}
.cp-head b{font-family:var(--display);color:var(--roast);font-size:17px}
.cp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.cp-item{display:flex;flex-direction:column;gap:4px;border-left:3px solid var(--apricot);padding-left:14px}
.cp-target{font-family:var(--display);font-weight:600;font-size:19px;color:var(--roast)}
.cp-gloss{font-size:14px;color:color-mix(in srgb,var(--ink) 70%,transparent)}
@media (prefers-reduced-motion:reduce){.city-panel{animation:none}.city-strip button{transition:none}}

/* ---- footer language switcher ---- */
.lang-switch{display:flex;gap:8px;flex-wrap:wrap}
.lang-switch a{color:var(--teal);text-decoration:none;font-weight:600}
.lang-switch a:hover{text-decoration:underline}
.lang-switch span[aria-current]{color:var(--roast);font-weight:700}

/* ---- nav language picker (details popover) ---- */
.lang-pick{position:relative}
.lang-pick summary{list-style:none;cursor:pointer;font-family:var(--display);font-weight:600;
  font-size:12px;letter-spacing:.08em;color:var(--roast);
  border:2px solid rgba(92,61,30,.22);border-radius:999px;padding:6px 12px;
  transition:border-color .15s ease,background .15s ease}
.lang-pick summary::-webkit-details-marker{display:none}
.lang-pick summary:hover{border-color:var(--apricot)}
.lang-pick[open] summary{background:var(--roast);border-color:var(--roast);color:var(--cream)}
.lang-pick summary:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.lang-pick ul{position:absolute;right:0;top:calc(100% + 8px);margin:0;padding:8px;list-style:none;
  background:var(--card);border-radius:14px;box-shadow:var(--shadow);min-width:150px;z-index:30}
.lang-pick li a,.lang-pick li span{display:block;padding:8px 12px;border-radius:8px;
  font-size:14.5px;font-weight:600;text-decoration:none;color:var(--ink);white-space:nowrap}
.lang-pick li a:hover{background:var(--cream-deep);color:var(--coral-deep)}
.lang-pick li span[aria-current]{color:var(--coral);cursor:default}
@media(max-width:620px){.nav nav a:not(.btn){display:none}}

/* ---- audio affordances + closer link ---- */
.local{position:relative;cursor:pointer}
.spk{position:absolute;right:10px;top:10px;width:30px;height:30px;border-radius:50%;
  background:var(--coral);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:12px;box-shadow:0 3px 10px rgba(92,61,30,.25)}
.cp-play{font:inherit;font-size:11px;cursor:pointer;border:0;border-radius:50%;
  width:24px;height:24px;background:var(--coral);color:#fff;vertical-align:2px;margin-right:2px}
.cp-play:hover{background:var(--coral-deep)}
.closer-app{display:inline-block;margin-top:22px;color:var(--teal);font-weight:600;text-decoration:none}
.closer-app:hover{text-decoration:underline}

/* ---- city pages + privacy ---- */
.city-hero{min-height:56vh}
.crumb{color:#fff;font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  margin:0 0 6px;text-shadow:0 1px 10px rgba(60,42,22,.6)}
.city-body{max-width:1000px;margin:0 auto}
.city-intro{font-size:17.5px;max-width:70ch;margin:0 0 34px}
.city-grid{display:grid;grid-template-columns:280px 1fr;gap:34px;align-items:start}
@media(max-width:760px){.city-grid{grid-template-columns:1fr}}
.city-local{max-width:280px}
.city-right h2{margin-top:0}
.city-right h2+ .cp-grid{margin-bottom:34px}
.city-phrases .cp-item{margin-bottom:4px}
.points{margin:16px 0 0;padding-left:20px}
.points li{margin:10px 0;font-size:15.5px}
.wl-consent{margin:14px 0 0;font-size:12.5px}
.wl-consent a{color:color-mix(in srgb,var(--ink) 55%,transparent)}
.foot-link{color:inherit}
.cp-more{display:inline-block;margin-top:14px;font-weight:700;color:var(--coral-deep);text-decoration:none}
.cp-more:hover{text-decoration:underline}
.legal{max-width:680px;margin:0 auto;padding:48px 20px 80px}
.legal h1{font-family:var(--display);color:var(--roast)}
.legal h2{font-size:17px;letter-spacing:0;text-transform:none;margin-top:34px}
.pv-updated{color:color-mix(in srgb,var(--ink) 55%,transparent);font-size:13.5px}