/* The Landed Agency landing pages.
   Tokens + the few components Tailwind cannot express cleanly.
   Palette sampled from the rendered client site. See DESIGN.md. */

:root{
  --color-brand:#E50914;
  --color-brand-press:#C10710;
  --color-dark:#0A0A0A;
  --color-ink:#111114;
  --color-body:#4A4A50;
  --color-muted:#85858C;
  --color-surface:#F6F6F7;
  --color-border:#E6E6E9;
  --radius-card:14px;
  --radius-btn:8px;
  --ease:cubic-bezier(.22,1,.36,1);
}

html{scroll-behavior:smooth}
body{
  font-family:Montserrat,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--color-body);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}
h1,h2,h3,h4{color:var(--color-ink);text-wrap:balance}
[x-cloak]{display:none!important}

/* eyebrow label above every section heading */
.eyebrow{
  display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--color-brand);
}

/* the address bar device, lifted from their own listing cards */
.addr-bar{
  background:var(--color-brand);color:#fff;font-weight:700;
  text-align:center;padding:.5rem .75rem;font-size:.9375rem;
  line-height:1.3;text-wrap:balance;
}

.card{
  background:#fff;border:1px solid var(--color-border);
  border-radius:var(--radius-card);
  transition:box-shadow .3s var(--ease),transform .3s var(--ease);
}
.card:hover{box-shadow:0 18px 40px -24px rgba(17,17,20,.35);transform:translateY(-3px)}

/* buttons: auto width so a long label never orphans a word */
.btn{
  display:inline-block;background:var(--color-brand);color:#fff;font-weight:700;
  padding:1rem 2rem;border-radius:var(--radius-btn);border:0;cursor:pointer;
  font-size:1rem;line-height:1.25;text-decoration:none;text-align:center;
  text-wrap:balance;transition:background-color .22s var(--ease),transform .22s var(--ease);
}
.btn:hover{background:var(--color-brand-press);transform:translateY(-1px)}
.btn:disabled{opacity:.6;cursor:progress;transform:none}
@media (max-width:639px){.btn{display:block;width:100%}}

/* form */
.field label{
  display:block;font-size:.75rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--color-muted);margin-bottom:.35rem;
}
.field input,.field select{
  width:100%;background:#fff;color:var(--color-ink);
  border:1px solid var(--color-border);border-radius:var(--radius-btn);
  padding:.75rem .875rem;font:inherit;font-size:1rem;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field input:focus,.field select:focus{
  outline:none;border-color:var(--color-brand);
  box-shadow:0 0 0 3px rgba(229,9,20,.14);
}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg[data-state="err"]{color:var(--color-brand)}

/* FAQ */
.faq details{border-bottom:1px solid var(--color-border)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.15rem 0;font-weight:700;
  color:var(--color-ink);display:flex;gap:1rem;justify-content:space-between;
  align-items:baseline;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--color-brand);font-weight:700;flex:none}
.faq details[open] summary::after{content:"\2013"}
.faq .ans{padding-bottom:1.15rem;max-width:64ch}

/* mobile sticky CTA */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--color-brand);color:#fff;font-weight:700;text-align:center;
  text-decoration:none;padding:1rem 1.25rem;
  padding-bottom:calc(1rem + env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform .3s var(--ease);
  box-shadow:0 -12px 30px -20px rgba(0,0,0,.6);
}
.sticky-cta.show{transform:none}
@media (min-width:768px){.sticky-cta{display:none}}
@media (max-width:767px){footer{padding-bottom:5.5rem}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  [data-aos]{opacity:1!important;transform:none!important}
}

/* Internal preview slots. Render ONLY on body.bma-preview, so production
   ships no hollow placeholders. deploy.sh blocks on the class. */
.slot{display:none}
body.bma-preview .slot{
  display:block;border:1px dashed var(--color-brand);border-radius:var(--radius-card);
  padding:1.25rem;background:rgba(229,9,20,.04);
}
body.bma-preview .slot .slot-tag{
  display:block;font-size:.75rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--color-brand);margin-bottom:.5rem;
}
body.bma-preview .slot p{color:var(--color-body);font-size:.9375rem;max-width:64ch}