/* Camilla Gardens Karen — Storyfront demo
   Palette "Garden ember", derived from the client's own logo:
   the vine is #FF6601 at pixel level, the field is pure black. Black is warmed
   to a garden green here so five pages of it read as daylight, not nightclub. */

:root {
  --ink: #12211A;
  --ink-2: #1B2F25;
  --ink-3: #26402F;
  --ember: #FF7A1F;
  --ember-deep: #E2621F;
  --ember-ink: #A8430A;      /* ember dark enough for text on ivory (5.6:1) */
  --paper: #FAF6F0;
  --paper-2: #F1EAE0;
  --leaf: #3F6B52;
  --on-ink: #EDE7DE;
  --on-ink-muted: #A9B8AE;
  --on-paper: #23342B;
  --on-paper-muted: #5A6E61;
  --line-ink: rgba(237, 231, 222, 0.16);
  --line-paper: rgba(35, 52, 43, 0.14);
  --shadow: 0 18px 50px -24px rgba(9, 18, 13, 0.55);
  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --wrap: 1180px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--on-paper);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.68;
  overflow-x: hidden;
}

/* height:auto matters — every img carries width/height attributes to reserve
   layout space, and without it max-width squeezes the width while the attribute
   pins the height, stretching the picture. */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--ember-ink); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 0.5em;
  letter-spacing: -0.005em;
}

h1 { font-size: clamp(2.5rem, 7vw, 4.6rem); }
h2 { font-size: clamp(1.95rem, 4.6vw, 3.1rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }

p { margin: 0 0 1.1em; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, 820px); margin-inline: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -140%);
  background: var(--ember); color: #241000; padding: 0.7rem 1.3rem;
  border-radius: 0 0 10px 10px; font-weight: 600; z-index: 200; transition: transform 0.2s;
}
.skip-link:focus { transform: translate(-50%, 0); }

:focus-visible { outline: 3px solid var(--ember); outline-offset: 3px; }

/* ---------------------------------------------------------------- splash */

#splash {
  position: fixed; inset: 0; z-index: 300; background: var(--ink);
  display: grid; place-items: center; transition: opacity 0.7s var(--ease), visibility 0.7s;
}
#splash.gone { opacity: 0; visibility: hidden; }
#splash img { width: clamp(150px, 34vw, 216px); animation: splashIn 1.1s var(--ease) both; }
#splash .ring {
  position: absolute; width: clamp(196px, 44vw, 280px); aspect-ratio: 1;
  border-radius: 50%; border: 1.5px solid rgba(255, 122, 31, 0.28);
  border-top-color: var(--ember); animation: spin 1.5s linear infinite;
}
@keyframes splashIn { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- header */

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  background: var(--ink);                       /* solid, never backdrop-filter */
  border-bottom: 1px solid var(--line-ink);
  transform: translateY(0); transition: transform 0.38s var(--ease);
}
.site-header.hidden { transform: translateY(-105%); }

.header-inner {
  display: flex; align-items: center; gap: 1rem;
  min-height: 70px; padding-block: 0.6rem;
}

.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; margin-right: auto; }
.brand img { width: 44px; height: 44px; border-radius: 50%; }
.brand b {
  font-family: var(--display); font-size: 1.32rem; font-weight: 600;
  color: var(--on-ink); letter-spacing: 0.01em; line-height: 1.05; display: block;
}
.brand span {
  display: block; font-size: 0.62rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ember); font-weight: 600;
}

.nav { display: flex; align-items: center; gap: 0.35rem; }
.nav a {
  color: var(--on-ink); text-decoration: none; font-size: 0.92rem; font-weight: 500;
  padding: 0.55rem 0.8rem; border-radius: 8px; position: relative; transition: color 0.2s;
}
.nav a::after {
  content: ""; position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.34rem; height: 1.5px;
  background: var(--ember); transform: scaleX(0); transform-origin: left;
  transition: transform 0.32s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ember); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line-ink); border-radius: 9px;
  width: 44px; height: 42px; cursor: pointer; padding: 0; position: relative;
}
.nav-toggle i { display: block; height: 1.6px; background: var(--on-ink); margin: 4.5px auto; width: 20px; transition: 0.3s var(--ease); }
.nav-toggle[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 70px 0 auto; background: var(--ink); flex-direction: column;
    align-items: stretch; gap: 0; padding: 0.5rem 1.25rem 1.5rem;
    border-bottom: 1px solid var(--line-ink);
    clip-path: inset(0 0 100% 0); transition: clip-path 0.42s var(--ease);
  }
  .nav.open { clip-path: inset(0 0 0 0); }
  .nav a { padding: 0.95rem 0.2rem; border-bottom: 1px solid var(--line-ink); font-size: 1.05rem; }
  .nav a::after { display: none; }
}

/* ---------------------------------------------------------------- hero */

.hero { position: relative; min-height: 88svh; display: grid; align-items: end; isolation: isolate; overflow: hidden; }
.hero.short { min-height: 66svh; }

.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; animation: kb 22s var(--ease) both; }
@keyframes kb { from { transform: scale(1.12); } to { transform: scale(1); } }

/* The scrim is carrying accessibility, not just mood. These heroes have bright
   sky and white chairs in them, so the band the text sits in has to stay dark
   enough for 11px ember to clear 4.5:1 against the lightest pixel behind it. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
    rgba(18, 33, 26, 0.96) 0%,
    rgba(18, 33, 26, 0.93) 46%,
    rgba(18, 33, 26, 0.84) 68%,
    rgba(18, 33, 26, 0.44) 85%,
    rgba(18, 33, 26, 0.32) 100%);
}

/* Once there's room for the text to sit in a column, darken sideways instead of
   flattening the whole photograph — the garden is the thing being sold. */
@media (min-width: 880px) {
  .hero::after {
    background:
      linear-gradient(to right,
        rgba(18, 33, 26, 0.94) 0%,
        rgba(18, 33, 26, 0.92) 36%,
        rgba(18, 33, 26, 0.60) 57%,
        rgba(18, 33, 26, 0.14) 78%,
        rgba(18, 33, 26, 0.06) 100%),
      linear-gradient(to top,
        rgba(18, 33, 26, 0.80) 0%,
        rgba(18, 33, 26, 0.42) 42%,
        rgba(18, 33, 26, 0.16) 70%,
        rgba(18, 33, 26, 0.34) 100%);
  }
}

.hero-inner { padding-block: 3rem 4.5rem; color: var(--on-ink); position: relative; }

/* Full-strength ember is only 2.4:1 on ivory, so the eyebrow darkens on light
   sections and goes back to the bright brand orange on ink and over photos. */
.eyebrow {
  font-size: 0.72rem; letter-spacing: 0.27em; text-transform: uppercase;
  color: var(--ember-ink); font-weight: 600; margin: 0 0 1rem;
}
.on-ink .eyebrow { color: var(--ember); }

/* In a hero the eyebrow sits high up, where the scrim has to stay light enough
   to show the photograph. Rather than black out the whole image for one line of
   11px type, it carries its own backing and clears contrast inside that. */
.hero .eyebrow {
  color: var(--ember);
  display: inline-block;
  background: rgba(18, 33, 26, 0.93);
  border: 1px solid rgba(255, 122, 31, 0.45);
  padding: 0.44rem 0.9rem;
  border-radius: 99px;
  margin-bottom: 1.15rem;
}

.hero h1 { color: #fff; max-width: 15ch; text-shadow: 0 2px 30px rgba(9, 18, 13, 0.5); }
.hero .lede { font-size: clamp(1.02rem, 1.9vw, 1.2rem); color: var(--on-ink); max-width: 52ch; }

.reveal-line { display: block; overflow: hidden; }
.reveal-line > span { display: block; transform: translateY(105%); animation: lineUp 0.95s var(--ease) both; }
.reveal-line:nth-of-type(2) > span { animation-delay: 0.1s; }
.reveal-line:nth-of-type(3) > span { animation-delay: 0.2s; }
@keyframes lineUp { to { transform: none; } }

.hero-fade { animation: fadeUp 0.9s var(--ease) 0.42s both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  font-family: var(--body); font-size: 0.97rem; font-weight: 600; text-decoration: none;
  padding: 0.85rem 1.5rem; border-radius: 10px; border: 1.5px solid transparent;
  cursor: pointer; transition: transform 0.18s var(--ease), background 0.2s, color 0.2s, border-color 0.2s;
  line-height: 1.2;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn-primary { background: var(--ember); color: #241000; }
.btn-primary:hover { background: #FF8C3C; }

.btn-ghost { border-color: rgba(237, 231, 222, 0.42); color: var(--on-ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ember); color: var(--ember); }

.btn-dark { background: var(--ink); color: var(--on-ink); }
.btn-dark:hover { background: var(--ink-2); }

.btn-outline { border-color: rgba(35, 52, 43, 0.3); color: var(--on-paper); }
.btn-outline:hover { border-color: var(--ember-ink); color: var(--ember-ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.9rem; }

/* ---------------------------------------------------------------- sections */

section { padding-block: clamp(3.6rem, 8vw, 6.4rem); }
.on-ink { background: var(--ink); color: var(--on-ink); }
.on-ink h2, .on-ink h3 { color: #fff; }
.on-ink .muted { color: var(--on-ink-muted); }
.on-paper-2 { background: var(--paper-2); }

.muted { color: var(--on-paper-muted); }

.section-head { max-width: 62ch; margin-bottom: 2.8rem; }
.section-head h2 { position: relative; display: inline-block; padding-bottom: 0.32em; }
.section-head h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2.5px; width: 100%;
  background: var(--ember); transform: scaleX(0); transform-origin: left;
  transition: transform 0.85s var(--ease) 0.15s;
}
.section-head.in h2::after { transform: scaleX(1); }

.grid { display: grid; gap: 1.5rem; }
.g-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.g-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }

/* ---------------------------------------------------------------- stats */

.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1px; background: var(--line-ink); border-block: 1px solid var(--line-ink); }
.stat { background: var(--ink); padding: 1.9rem 1.4rem; text-align: center; }
.stat b { display: block; font-family: var(--display); font-size: clamp(2.2rem, 5vw, 3rem); font-weight: 600; color: var(--ember); line-height: 1; }
.stat span { display: block; font-size: 0.8rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--on-ink-muted); margin-top: 0.6rem; }

.rating { display: inline-flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.stars { color: var(--ember); letter-spacing: 0.12em; font-size: 1.05rem; }

/* ---------------------------------------------------------------- cards */

.card {
  background: #fff; border: 1px solid var(--line-paper); border-radius: 16px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.card-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-2); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.75s var(--ease); }
.card:hover .card-media img { transform: scale(1.06); }
.card-body { padding: 1.5rem 1.5rem 1.7rem; flex: 1; display: flex; flex-direction: column; }
.card-body h3 { margin-bottom: 0.4rem; }
.card-body p { font-size: 0.97rem; }
.card-body .tail { margin-top: auto; padding-top: 0.9rem; }

.pill {
  display: inline-block; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase;
  font-weight: 600; color: var(--ember-ink); background: rgba(255, 122, 31, 0.12);
  padding: 0.32rem 0.7rem; border-radius: 99px; margin-bottom: 0.8rem;
}
/* .pkg.featured is a dark card inside a light section, so it needs the
   on-ink treatment even though no .on-ink ancestor applies. */
.on-ink .pill, .pkg.featured .pill { color: var(--ember); background: rgba(255, 122, 31, 0.16); }

/* feature list with a drawn tick */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.62rem; }
.ticks li { position: relative; padding-left: 1.85rem; font-size: 0.97rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.46em; width: 11px; height: 6px;
  border-left: 2px solid var(--ember); border-bottom: 2px solid var(--ember);
  transform: rotate(-45deg);
}

/* ---------------------------------------------------------------- packages */

.pkg { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line-paper); border-radius: 18px; padding: 1.9rem 1.7rem 2rem; }
.pkg.featured { background: var(--ink); color: var(--on-ink); border-color: var(--ember); position: relative; }
.pkg.featured h3 { color: #fff; }
.pkg.featured .ticks li { color: var(--on-ink); }
.pkg.featured .price small { color: var(--on-ink-muted); }
.pkg .price { font-family: var(--display); font-size: 2.1rem; font-weight: 600; color: var(--ember-ink); line-height: 1.1; margin: 0.2rem 0 0.15rem; }
.pkg.featured .price { color: var(--ember); }
.pkg .price small { display: block; font-family: var(--body); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-paper-muted); margin-bottom: 0.5rem; }
.pkg .tail { margin-top: auto; padding-top: 1.4rem; }
.pkg-flag { font-size: 0.85rem; color: var(--on-paper-muted); font-style: italic; }

.tier-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tier-table th, .tier-table td { text-align: left; padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--line-paper); }
.tier-table th { font-weight: 600; font-size: 0.74rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--on-paper-muted); }
.tier-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
/* The capacity table sits in a dark card on spaces.html — the paper-toned
   header and rules are unreadable there. */
.on-ink .tier-table th { color: var(--on-ink-muted); }
.on-ink .tier-table th, .on-ink .tier-table td { border-bottom-color: var(--line-ink); }

/* ---------------------------------------------------------------- gallery */

.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }
.gal button {
  padding: 0; border: 0; background: var(--ink-2); border-radius: 12px; overflow: hidden;
  cursor: zoom-in; aspect-ratio: 4 / 3; position: relative; display: block; width: 100%;
}
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease), filter 0.45s; }
.gal button:hover img { transform: scale(1.07); filter: brightness(1.06); }
.gal button::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(18, 33, 26, 0.5), transparent 46%);
  opacity: 0; transition: opacity 0.4s;
}
.gal button:hover::after { opacity: 1; }
.gal .tall { aspect-ratio: 3 / 4; }

#lb {
  position: fixed; inset: 0; z-index: 250; background: rgba(9, 17, 12, 0.97);
  display: none; grid-template-rows: 1fr auto; padding: clamp(0.8rem, 3vw, 2rem);
}
#lb.open { display: grid; animation: lbIn 0.3s var(--ease); }
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
#lb .stage { display: grid; place-items: center; min-height: 0; }
#lb img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
#lb .bar { display: flex; align-items: center; gap: 1rem; padding-top: 1rem; color: var(--on-ink); }
#lb figcaption { font-size: 0.95rem; color: var(--on-ink-muted); flex: 1; margin: 0; }
#lb .count { font-variant-numeric: tabular-nums; font-size: 0.85rem; letter-spacing: 0.1em; color: var(--ember); }
#lb .nav-btn, #lb .close-btn {
  background: rgba(237, 231, 222, 0.08); border: 1px solid var(--line-ink); color: var(--on-ink);
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  font-size: 1.2rem; transition: background 0.2s, border-color 0.2s;
}
#lb .nav-btn:hover, #lb .close-btn:hover { background: var(--ember); border-color: var(--ember); color: #241000; }
#lb .close-btn { position: absolute; top: clamp(0.8rem, 3vw, 2rem); right: clamp(0.8rem, 3vw, 2rem); }

/* ---------------------------------------------------------------- form */

.form-card { background: #fff; border: 1px solid var(--line-paper); border-radius: 18px; padding: clamp(1.5rem, 3.4vw, 2.5rem); }
.on-ink .form-card { background: var(--ink-2); border-color: var(--line-ink); }

.field { display: grid; gap: 0.4rem; margin-bottom: 1.05rem; }
.field label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-paper-muted); }
.on-ink .field label { color: var(--on-ink-muted); }
.field input, .field select {
  font-family: var(--body); font-size: 1rem; color: var(--on-paper);
  padding: 0.8rem 0.9rem; border: 1.5px solid var(--line-paper); border-radius: 10px;
  background: var(--paper); width: 100%; transition: border-color 0.2s, box-shadow 0.2s;
}
.on-ink .field input, .on-ink .field select { background: var(--ink); color: var(--on-ink); border-color: var(--line-ink); }
.field input:focus, .field select:focus { border-color: var(--ember); box-shadow: 0 0 0 3px rgba(255, 122, 31, 0.2); outline: none; }
.field-row { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }

.form-note { font-size: 0.86rem; color: var(--on-paper-muted); margin-top: 1rem; }
.on-ink .form-note { color: var(--on-ink-muted); }
.err { color: #C0391B; font-size: 0.84rem; min-height: 1.2em; margin: 0; }
.on-ink .err { color: #FF9C7A; }

/* ---------------------------------------------------------------- faq */

.faq { border-top: 1px solid var(--line-paper); }
.faq details { border-bottom: 1px solid var(--line-paper); }
.faq summary {
  cursor: pointer; padding: 1.25rem 2.5rem 1.25rem 0; position: relative;
  font-family: var(--display); font-size: clamp(1.1rem, 2vw, 1.34rem); font-weight: 600; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 0.4rem; top: 50%; width: 11px; height: 11px;
  border-right: 2px solid var(--ember); border-bottom: 2px solid var(--ember);
  transform: translateY(-70%) rotate(45deg); transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .answer { padding-bottom: 1.35rem; animation: fadeUp 0.45s var(--ease) both; }
.faq .answer p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- map */

.map-frame { border-radius: 16px; overflow: hidden; border: 1px solid var(--line-paper); background: var(--ink-2); }
.map-frame iframe { width: 100%; height: 420px; border: 0; display: block; }

/* ---------------------------------------------------------------- footer */

.site-footer { background: var(--ink); color: var(--on-ink); padding-block: 3.6rem 2.2rem; }
.footer-top { display: grid; gap: 2.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.footer-brand img { width: 74px; height: 74px; border-radius: 50%; margin-bottom: 0.9rem; }
.footer-brand p { color: var(--on-ink-muted); font-size: 0.95rem; max-width: 34ch; }
.site-footer h4 { font-family: var(--body); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ember); margin: 0 0 0.9rem; }
.site-footer a { color: var(--on-ink); text-decoration: none; }
.site-footer a:hover { color: var(--ember); text-decoration: underline; }
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; font-size: 0.95rem; }
.socials { display: flex; gap: 0.6rem; margin-top: 1rem; }
.socials a { width: 40px; height: 40px; border: 1px solid var(--line-ink); border-radius: 50%; display: grid; place-items: center; transition: 0.25s var(--ease); }
.socials a:hover { background: var(--ember); border-color: var(--ember); color: #241000; transform: translateY(-3px); }
.socials svg { width: 18px; height: 18px; }
.footer-bottom { margin-top: 2.6rem; padding-top: 1.5rem; border-top: 1px solid var(--line-ink); font-size: 0.82rem; color: var(--on-ink-muted); display: grid; gap: 0.7rem; }

/* ---------------------------------------------------------------- floating CTA */

.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 130;
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: var(--ember); color: #241000; text-decoration: none; font-weight: 600;
  padding: 0.9rem 1.15rem; border-radius: 99px; font-size: 0.95rem;
  box-shadow: 0 12px 30px -10px rgba(226, 98, 31, 0.6);
  transition: transform 0.25s var(--ease), box-shadow 0.25s;
}
.wa-float:hover { transform: translateY(-3px) scale(1.03); }
.wa-float svg { width: 21px; height: 21px; }
.wa-float .label { display: inline; }
@media (max-width: 520px) { .wa-float .label { display: none; } .wa-float { padding: 0.95rem; } }

/* ---------------------------------------------------------------- motion */

.rv { opacity: 0; transform: translateY(26px); transition: opacity 0.75s var(--ease), transform 0.75s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: 0.08s; } .rv-d2 { transition-delay: 0.16s; }
.rv-d3 { transition-delay: 0.24s; } .rv-d4 { transition-delay: 0.32s; }

.tilt { transform-style: preserve-3d; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .rv { opacity: 1; transform: none; }
  .reveal-line > span { transform: none; }
  .hero-media img { animation: none; }
}