/* ===========================================================================
   Asili Signature Events. Site styles.
   Aligned to the approved business card: Asili Green on white,
   deep pine panels and the organic curve device. Flat colour, no gradients.
   =========================================================================== */

:root {
  color-scheme: light;

  /* surfaces (token names kept from earlier; values are the card system) */
  --navy-deep: #FAF9F4;   /* body / warm off-white */
  --navy: #FFFFFF;        /* plain section */
  --navy-raised: #FFFFFF; /* cards */
  --navy-line: #E6E3D8;   /* hairline */

  /* brand greens */
  --gold: #3DA53D;        /* Asili Green, primary accent */
  --gold-bright: #63B845; /* lighter curve / hover on dark */
  --gold-deep: #2E7D32;   /* pressed / deep accent */
  --ember: #3DA53D;
  --pine: #123D20;        /* deep forest panel */
  --pine-soft: #1B5130;
  --teal: #2E7D32;
  --teal-bright: #63B845;

  /* text on light */
  --ink: #141414;
  --ink-soft: #4A4A45;
  --ink-dim: #7C7C74;

  /* text on pine */
  --on-pine: #EAF1E8;
  --on-pine-soft: #C4D6C7;
  --on-pine-dim: #9FB6A2;

  --ivory: #F1EFE7;      /* warm section */
  --ivory-ink: #141414;
  --ivory-dim: #4A4A45;
  --ivory-line: #E6E3D8;

  --wrap: 1500px;
  --measure: 68ch;
  --radius: 14px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-logo: "Poppins", Arial, Helvetica, sans-serif; /* wordmark only, matches the card */
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--navy-deep);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.14rem);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: var(--gold-deep); text-decoration: none; }
a:hover { color: var(--pine); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}

p { margin: 0; }

/* ---------- Layout ---------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: clamp(20px, 5vw, 64px);
}

section { position: relative; }

.section { padding-block: clamp(60px, 10vw, 116px); }
.section--tight { padding-block: clamp(48px, 7vw, 78px); }

.section--ivory { background: var(--ivory); color: var(--ivory-ink); }
.section--ivory p { color: var(--ivory-dim); }
.section--ivory a { color: var(--gold-deep); }
.section--ivory a:hover { color: var(--pine); }

.section--navy { background: var(--navy); }

/* deep pine panel, the card's dark surface */
.section--pine {
  background: var(--pine);
  color: var(--on-pine);
}
.section--pine h1, .section--pine h2, .section--pine h3, .section--pine h4 { color: #fff; }
.section--pine p { color: var(--on-pine-soft); }
.section--pine .eyebrow { color: var(--gold-bright); }
.section--pine a { color: var(--gold-bright); }
.section--pine .btn--ghost { border-color: rgba(255,255,255,0.5); color: #fff; }
.section--pine .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,0.08); color: #fff; }

/* spark kept as a no-op so existing markup still works */
.spark { position: relative; }
.spark::before, .spark::after { content: none; display: none; }
.spark > .wrap { position: relative; z-index: 1; }

/* ---------- Bits --------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gold-deep);
  margin-bottom: 14px;
}
.section--ivory .eyebrow { color: var(--gold-deep); }

/* ---------- Positioning statement (pine pull-quote) --------------------- */

.position-block .wrap { text-align: center; }
.position-quote { max-width: 720px; margin: 0 auto; }
.position-quote .quote-mark {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(4.5rem, 11vw, 7.5rem);
  line-height: 0.6;
  color: var(--gold-bright);
  opacity: 0.4;
  margin-bottom: 0.3em;
}
.position-quote .eyebrow { justify-content: center; }
.position-quote h2 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); }
.position-quote .lede { margin: 20px auto 0; }
.position-proof {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 4vw, 40px);
  max-width: 780px;
  margin: clamp(40px, 7vw, 64px) auto 0;
  text-align: left;
}
.position-proof > div { padding-top: 20px; border-top: 2px solid var(--gold-bright); }
.position-proof h3 { font-size: 1.05rem; color: #fff; margin-bottom: 6px; }
.position-proof p { font-size: 0.94rem; }
@media (max-width: 620px) {
  .position-proof { grid-template-columns: 1fr; }
}

.lede {
  font-size: clamp(1.14rem, 1.04rem + 0.6vw, 1.5rem);
  line-height: 1.55;
  color: var(--ink-soft);
  font-weight: 400;
}
.section--ivory .lede { color: var(--ivory-dim); }
.section--pine .lede { color: var(--on-pine-soft); }

.rule { width: 100%; height: 1px; background: var(--navy-line); border: 0; margin: 0; }

/* ---------- Buttons ---------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.96rem;
  letter-spacing: 0;
  padding: 14px 28px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.15s var(--ease), background-color 0.2s, border-color 0.2s, color 0.2s;
}
.btn svg { width: 17px; height: 17px; }
.btn:hover { transform: translateY(-2px); }

.btn--primary { background: var(--gold); color: #fff; }
.btn--primary:hover { color: #fff; background: var(--gold-deep); }

.btn--ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-deep); }

.section--ivory .btn--primary, .section--ivory .btn--primary:hover { color: #fff; }
.section--ivory .btn--ghost { border-color: var(--ivory-ink); color: var(--ivory-ink); }
.section--ivory .btn--ghost:hover { border-color: var(--gold); color: var(--gold-deep); }

/* ---------- Header / nav --------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 249, 244, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--navy-line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 74px;
}

.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); }
.brand:hover { color: var(--ink); }

.brand__mark {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--gold);
  display: grid;
  place-items: center;
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: 1.25rem;
  color: #fff;
  flex-shrink: 0;
}
.brand__name {
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: 1.16rem;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink);
}
.brand__sub { color: var(--gold); }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 9px 14px;
  border-radius: 8px;
  transition: color 0.2s, background-color 0.2s;
}
.nav a:hover { color: var(--ink); background: rgba(61, 165, 61, 0.1); }
.nav a[aria-current="page"] { color: var(--gold-deep); }
.nav .btn { margin-left: 10px; padding: 10px 18px; }
.nav .btn--primary { color: #fff; }
.nav .btn--primary:hover { color: #fff; background: var(--gold-deep); }
.nav .btn--ghost { color: var(--ink); }
.nav .btn--ghost:hover { color: var(--gold-deep); background: transparent; }

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--navy-line);
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed;
    inset: 74px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 16px clamp(20px, 5vw, 44px) 28px;
    background: rgba(250, 249, 244, 0.98);
    border-bottom: 1px solid var(--navy-line);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s var(--ease);
  }
  .nav[data-open="true"] { opacity: 1; transform: none; pointer-events: auto; }
  .nav a { padding: 13px 12px; font-size: 0.9rem; }
  .nav .btn { margin: 10px 0 0; justify-content: center; }
}

/* ---------- Hero -------------------------------------------------------- */

.hero { padding-block: clamp(64px, 12vw, 132px); }
.hero .wrap > * { max-width: 780px; }
.hero .accent-bar {
  width: 44px;
  height: 4px;
  background: var(--gold);
  border-radius: 2px;
  margin: 0 0 26px;
}
.hero h1 {
  font-size: clamp(2rem, 1.4rem + 3vw, 3.6rem);
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}
@media (max-width: 500px) { .hero h1 .brk { display: none; } }
.hero .lede { margin: 22px 0 0; max-width: 46ch; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: flex-start;
  margin-top: 36px;
}
@media (max-width: 560px) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: center; }
}

/* wordmark lockup (home hero) */
.wordmark {
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.8rem);
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--ink);
}
.wordmark span { color: var(--gold); }
.wordmark-rule {
  width: min(280px, 55%);
  height: 3px;
  border-radius: 2px;
  margin: 16px 0 12px;
  background: var(--gold);
}
.wordmark-sub {
  font-size: clamp(0.62rem, 2vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* page hero (interior) */
.page-hero { padding-block: clamp(56px, 9vw, 104px); }
.page-hero .wrap > * { max-width: 800px; }
.page-hero h1 {
  font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem);
  letter-spacing: -0.015em;
  max-width: 20ch;
  margin: 0;
  text-wrap: balance;
}
.page-hero .lede { margin: 22px 0 0; max-width: 52ch; }

/* ---------- Section headings ------------------------------------------- */

.sec-head { max-width: 42ch; margin-bottom: clamp(36px, 6vw, 60px); }
.sec-head h2 { font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3rem); }
.sec-head p { margin-top: 16px; max-width: var(--measure); font-size: 1.02em; color: var(--ink-soft); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center p { margin-inline: auto; }

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

.grid { display: grid; gap: clamp(16px, 2.4vw, 26px); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.card {
  background: var(--navy-raised);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius);
  padding: clamp(28px, 3vw, 40px);
  transition: transform 0.2s var(--ease), border-color 0.2s, box-shadow 0.2s;
}
.card p { font-size: 1rem; line-height: 1.62; color: var(--ink-soft); }

a.card--link { display: block; color: inherit; }
a.card--link:hover { color: inherit; }
.card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--gold-deep);
  transition: gap 0.2s var(--ease);
}
.card__more svg { width: 15px; height: 15px; }
a.card--link:hover .card__more { gap: 12px; }
.card:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 18px 40px rgba(18, 61, 32, 0.1); }
.section--ivory .card { background: #fff; border-color: var(--ivory-line); color: var(--ivory-ink); }
.section--ivory .card p { color: var(--ivory-dim); }

/* solid green icon disc, matching the card's contact icons */
.card__icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gold);
  color: #fff;
  margin-bottom: 20px;
}
.card__icon svg { width: 22px; height: 22px; }
.section--ivory .card__icon { background: var(--gold); color: #fff; }

.card h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); margin-bottom: 12px; }
.card__num {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--gold-deep);
  letter-spacing: 0;
  margin-bottom: 14px;
}

/* feature list */
.tick-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 11px; }
.tick-list li {
  position: relative;
  padding-left: 26px;
  font-size: 1rem;
  color: var(--ink-soft);
}
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--gold);
}
.section--ivory .tick-list li { color: var(--ivory-dim); }
.section--pine .tick-list li { color: var(--on-pine-soft); }
.section--pine .tick-list li::before { background: var(--gold-bright); }

/* split rows */
.split {
  display: grid;
  grid-template-columns: minmax(200px, 0.7fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: start;
  padding-block: clamp(40px, 6vw, 64px);
  max-width: 1180px;
}
.split + .split { border-top: 1px solid var(--navy-line); }
.section--ivory .split + .split { border-top-color: var(--ivory-line); }
.split h3 { font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2.1rem); }
.split__body { max-width: var(--measure); }
.split--flush { padding-block: 0; }
.split h2 { font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3rem); }
.split .lede-sm { font-size: 1.1rem; line-height: 1.7; color: var(--ink-soft); }
.split__body p { font-size: 1.05rem; line-height: 1.7; }
.split__body p + p { margin-top: 14px; }
@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; gap: 18px; }
}

/* outcomes */
.outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
.outcomes > div { padding-top: 22px; border-top: 3px solid var(--gold); }
.outcomes h3 { font-size: 1.15rem; margin-bottom: 8px; }
.outcomes p { font-size: 0.98rem; line-height: 1.6; }
@media (max-width: 820px) { .outcomes { grid-template-columns: 1fr; } }

/* industries */
.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chips span {
  border: 1px solid var(--navy-line);
  border-radius: 999px;
  padding: 11px 22px;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.section--ivory .chips span { border-color: var(--ivory-line); }
.section--pine .chips span { border-color: rgba(255,255,255,0.22); color: var(--on-pine); }

/* ---------- CTA band --------------------------------------------------- */

.cta-band { text-align: center; }
.cta-band h2 { font-size: clamp(1.9rem, 1.3rem + 2.8vw, 3.1rem); max-width: 26ch; margin: 0 auto; text-wrap: balance; }
.cta-band p { margin: 18px auto 0; max-width: 46ch; font-size: 1.06rem; }
.cta-band .btn { margin-top: 30px; }
.section--pine.cta-band p, .section--pine .cta-band p { color: var(--on-pine-soft); }

/* ---------- Work / placeholders -------------------------------------------- */

.ph {
  background:
    repeating-linear-gradient(45deg, rgba(61, 165, 61, 0.07) 0 10px, transparent 10px 20px),
    var(--navy-raised);
  border: 1px dashed var(--navy-line);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--ink-dim);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  aspect-ratio: 4 / 3;
}
.work-card h3 { font-size: 1.15rem; margin: 18px 0 4px; }
.work-card .meta { font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600; }
.work-card p { margin-top: 10px; font-size: 0.92rem; color: var(--ink-soft); }

.logo-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.logo-strip .ph { aspect-ratio: 3 / 2; font-size: 0.58rem; }
@media (max-width: 900px) { .logo-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .logo-strip { grid-template-columns: repeat(2, 1fr); } }

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

.contact-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(30px, 6vw, 72px);
  align-items: start;
}
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-detail { display: grid; gap: 22px; }
.contact-detail .row .k {
  font-size: 0.85rem;
  color: var(--gold-deep);
  font-weight: 600;
  margin-bottom: 5px;
}
.contact-detail .row .v { font-size: 1rem; color: var(--ink); }

.form { display: grid; gap: 18px; }
.form .field { display: grid; gap: 7px; }
.form .field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .form .field--row { grid-template-columns: 1fr; } }
.form label {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.form input,
.form select,
.form textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--ink);
  background: var(--navy-raised);
  border: 1px solid var(--navy-line);
  border-radius: 10px;
  padding: 13px 15px;
  width: 100%;
  transition: border-color 0.2s;
}
.form textarea { resize: vertical; min-height: 130px; }
.form input:focus,
.form select:focus,
.form textarea:focus { outline: none; border-color: var(--gold); }
.form select { appearance: none; }
.form .btn { justify-content: center; margin-top: 6px; }
.form__note { font-size: 0.8rem; color: var(--ink-dim); }

/* ---------- Footer --------------------------------------------------------- */

.site-footer {
  position: relative;
  margin-top: clamp(70px, 11vw, 130px);
  background: var(--pine);
  color: var(--on-pine);
  padding-block: clamp(56px, 8vw, 88px);
}
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: clamp(56px, 8vw, 104px);
  background: no-repeat center / 100% 100%
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 120" preserveAspectRatio="none"><path d="M0,52 C220,116 430,118 720,66 C1000,16 1230,14 1440,74 L1440,120 L0,120 Z" fill="%23123D20"/><path d="M0,40 C220,104 430,106 720,54 C1000,4 1230,2 1440,62" fill="none" stroke="%2363B845" stroke-width="4"/></svg>');
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(28px, 5vw, 56px);
}
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

.site-footer .brand { margin-bottom: 16px; color: #fff; }
.site-footer .brand:hover { color: #fff; }
.site-footer .brand__name { color: #fff; }
.site-footer .brand__sub { color: var(--gold-bright); }
.site-footer .tagline {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--on-pine-soft);
}
.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--gold-bright);
  margin-bottom: 16px;
}
.footer-col a, .footer-col span {
  display: block;
  color: var(--on-pine-soft);
  font-size: 0.9rem;
  font-weight: 300;
  padding: 5px 0;
}
.footer-col a:hover { color: #fff; }

.footer-base {
  margin-top: clamp(36px, 6vw, 54px);
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.75rem;
  color: var(--on-pine-dim);
  letter-spacing: 0.02em;
}
.footer-base .powered { font-size: 0.75rem; }
.footer-base .powered a { color: var(--on-pine-dim); }
.footer-base .powered a:hover { color: var(--gold-bright); }
.footer-base .powered strong { font-weight: 600; color: var(--gold-bright); }

/* ---------- WhatsApp floating button ---------------------------------- */
.wa-fab {
  position: fixed;
  right: clamp(16px, 3.5vw, 28px);
  bottom: clamp(16px, 3.5vw, 28px);
  z-index: 60;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(18, 61, 32, 0.24);
  transition: transform 0.16s var(--ease), box-shadow 0.2s;
}
.wa-fab:hover { transform: translateY(-2px) scale(1.04); color: #fff; box-shadow: 0 14px 30px rgba(18, 61, 32, 0.32); }
.wa-fab:active { transform: scale(0.97); }
.wa-fab svg { width: 30px; height: 30px; }
@media (max-width: 480px) { .wa-fab { width: 52px; height: 52px; } .wa-fab svg { width: 27px; height: 27px; } }

/* ---------- Reveal on scroll -------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .btn:hover, .card:hover { transform: none; }
}