/* ==========================================================================
   Devoted ABA Services — warm, calm design system
   A cream page, the logo's teal for action, deep forest green for trust.
   Tokens below are the source of truth; README.md has the rules.
   ========================================================================== */

:root {
  /* Grounds, lightest to deepest */
  --paper:       #ffffff;   /* cards, inputs */
  --cream:       #fbf7f0;   /* page canvas */
  --linen:       #f4eee4;   /* alternating section tint */
  --sand:        #efe4d3;   /* the About section, the warmest ground */
  --line:        #e6dccb;   /* hairlines, card borders */
  --line-strong: #d3c4ad;   /* emphasised borders */

  /* Greens, from the logo outward */
  --teal:        #008575;   /* the logo's own colour: icons, accents, graphics */
  --teal-deep:   #00675b;   /* primary action, links */
  --teal-wash:   #e3f1ec;   /* soft filled surface behind icons */
  --forest:      #0f3b35;   /* headings, the closing band, the footer */
  --forest-soft: #18504a;

  /* Text */
  --ink:         #1f302d;
  --ink-muted:   #4a5c58;
  --on-forest:        #ffffff;
  --on-forest-muted:  #cfe2dc;

  /* One warm accent, for the hand-drawn mark only. */
  --clay:        #d07a52;

  --font-display: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
  --font: 'Manrope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          'Segoe UI', Roboto, sans-serif;

  /* Type — body is 18px: most visitors are parents reading on a phone. */
  --text-caption: 0.8125rem;
  --text-small: 0.9375rem;
  --text-body: 1.125rem;
  --text-lede: clamp(1.2rem, 1.1rem + 0.45vw, 1.4rem);
  --text-h3: clamp(1.2rem, 1.1rem + 0.4vw, 1.375rem);
  --text-h2: clamp(1.85rem, 1.4rem + 1.9vw, 2.75rem);
  --text-h1: clamp(2.75rem, 1.9rem + 4vw, 4.75rem);

  --page-max: 1160px;
  --narrow-max: 760px;
  --gutter: clamp(20px, 5vw, 40px);
  --section-gap: clamp(64px, 9vw, 120px);

  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --radius-pill: 9999px;

  --shadow-card: 0 1px 2px rgba(15, 59, 53, 0.06), 0 12px 32px -20px rgba(15, 59, 53, 0.28);
  --shadow-lift: 0 24px 60px -32px rgba(15, 59, 53, 0.45);
  --shadow-cta:  0 8px 20px -10px rgba(0, 103, 91, 0.6);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --topbar-h: 68px;
}

/* --- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 500;
  font-size: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: 'opsz' 96;
  color: var(--forest);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); line-height: 1; letter-spacing: -0.025em; }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
p  { margin: 0; text-wrap: pretty; }
em { font-style: italic; }
strong { font-weight: 700; color: var(--forest); }

img { display: block; max-width: 100%; height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--teal-deep); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

::selection { background: var(--teal-wash); color: var(--forest); }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 6px; }
:root { accent-color: var(--teal-deep); }

/* --- layout --------------------------------------------------------------- */
.shell { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: calc(var(--narrow-max) + 2 * var(--gutter)); }
.section { padding-block: var(--section-gap); }
.section--tinted { background: var(--linen); }
.section--sand { background: var(--sand); }

.section__head { margin-bottom: clamp(28px, 4vw, 44px); max-width: 38rem; }
.narrow .section__head { max-width: none; }
.eyebrow {
  font-size: var(--text-caption); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--teal-deep); margin-bottom: 14px;
}

.split { display: grid; gap: clamp(36px, 6vw, 72px); align-items: start; }
.split--center { align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1.1fr 0.9fr; } }

.prose { max-width: 64ch; }
.prose > * + * { margin-top: 1.05em; }
.lede { font-size: var(--text-lede); line-height: 1.5; color: var(--forest); max-width: 40ch; }

.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 100;
  background: var(--forest); color: var(--on-forest);
  padding: 12px 20px; border-radius: var(--radius-pill); font-weight: 600;
}
.skip-link:focus { top: 12px; }

/* --- buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 24px; border-radius: var(--radius-pill);
  font: inherit; font-size: 1.0625rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; text-align: center;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform 0.25s var(--ease-out), background-color 0.25s var(--ease-out),
              border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn .icon--trail { transition: transform 0.25s var(--ease-out); }
.btn:hover .icon--trail { transform: translateX(3px); }

.btn--primary { background: var(--teal-deep); color: #ffffff; box-shadow: var(--shadow-cta); }
.btn--primary:hover { background: var(--forest); }
.btn--ghost { background: transparent; color: var(--forest); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--teal-deep); background: var(--paper); }
.btn--light { background: #ffffff; color: var(--forest); }
.btn--light:hover { background: var(--teal-wash); }
.btn--sm { min-height: 44px; padding: 10px 18px; font-size: var(--text-small); }
.btn--lg { min-height: 60px; padding: 16px 30px; font-size: 1.125rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row--center { justify-content: center; }
@media (max-width: 520px) { .btn-row > .btn--lg { width: 100%; } }

/* --- icons ---------------------------------------------------------------- */
.icon { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon--lg { width: 30px; height: 30px; }
.icon-chip {
  width: 48px; height: 48px; border-radius: 14px; flex: none;
  display: grid; place-items: center;
  background: var(--teal-wash); color: var(--teal-deep);
}

/* --- top bar: slim, sticky, one button ------------------------------------ */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 247, 240, 0.9);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--topbar-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--forest); min-width: 0; }
.brand__mark { width: 44px; height: 44px; flex: none; }
.brand__name {
  font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem;
  letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar__cta { flex: none; }
/* On a phone the name takes two short lines rather than an ellipsis. */
@media (max-width: 560px) {
  .brand__name { white-space: normal; font-size: 0.9375rem; line-height: 1.1; max-width: 7.5em; }
  .brand__mark { width: 40px; height: 40px; }
}
@media (max-width: 340px) { .topbar__cta .icon { display: none; } }

/* --- hero -----------------------------------------------------------------
   Text on the left inside the page grid; the photo bleeds to the right edge
   and runs the full height of the copy, so the column never reads as empty.
   The porch photo is portrait, which is what lets it fill that height without
   cropping a face. */
.hero__grid {
  display: grid; gap: 28px;
  grid-template-areas: "head" "media" "body";
  padding: clamp(28px, 6vw, 56px) var(--gutter) var(--section-gap);
}
.hero__head { grid-area: head; }
.hero__media { grid-area: media; position: relative; }
.hero__body { grid-area: body; }

.hero h1 { margin-bottom: 18px; }
.hero__credential { font-size: var(--text-lede); color: var(--ink-muted); max-width: 34ch; line-height: 1.45; }
.hero__body .lede { margin-bottom: 24px; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem); line-height: 1.35; max-width: 30ch; }

.hero__photo { margin: 0; height: 100%; border-radius: var(--radius-lg); overflow: hidden; background: var(--sand); box-shadow: var(--shadow-lift); }
.hero__photo img { width: 100%; height: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 12%; }

/* The credential plate: the logo and the BCBA number, pinned to the photo. */
.hero__card {
  position: absolute; left: 16px; right: 16px; bottom: -28px;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px 12px 12px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 18px 40px -22px rgba(15, 59, 53, 0.55);
}
.hero__card img { width: 52px; height: 52px; flex: none; }
.hero__card p { display: grid; gap: 2px; line-height: 1.25; }
.hero__card strong { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; }
.hero__card span { font-size: var(--text-caption); color: var(--ink-muted); letter-spacing: 0.04em; }
@media (max-width: 899px) { .hero__media { margin-bottom: 28px; } }

/* The closing sentence of the copy, one fact per line. */
.hero__facts { display: grid; margin-block: 28px 30px; border-top: 1px solid var(--line); max-width: 60ch; }
.hero__facts li { display: flex; gap: 14px; align-items: flex-start; padding-block: 14px; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--forest); line-height: 1.45; }
.hero__facts .icon { color: var(--teal); margin-top: 1px; }

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "head media" "body media";
    grid-template-rows: auto 1fr;
    column-gap: clamp(48px, 6vw, 96px); row-gap: 28px;
    /* Left edge aligns with every other section; the right edge is the viewport. */
    padding: 0 0 var(--section-gap) max(var(--gutter), calc((100vw - var(--page-max)) / 2 + var(--gutter)));
  }
  .hero__head { padding-top: clamp(56px, 7vw, 96px); }
  .hero__media { align-self: stretch; min-height: calc(100svh - var(--topbar-h)); }
  .hero__photo { position: absolute; inset: 0; border-radius: 0 0 0 64px; box-shadow: none; }
  .hero__photo img { aspect-ratio: auto; object-position: 50% 18%; }
  .hero__card { left: -32px; right: auto; bottom: 48px; max-width: 340px; }
}

/* The page's one callout: the last word of the headline, underlined by hand. */
.mark {
  font-style: italic; font-weight: 500; color: var(--teal-deep); position: relative; white-space: nowrap;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 11c38-7 92-9 194-5' fill='none' stroke='%23d07a52' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 100% / 100% 0.22em;
  padding-bottom: 0.08em;
}

/* --- figures -------------------------------------------------------------- */
.figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--sand); box-shadow: var(--shadow-lift); }
.figure img { width: 100%; height: 100%; object-fit: cover; }
figure.figure--landscape img { aspect-ratio: 4 / 3; object-position: 50% 40%; }
.figure--portrait img { aspect-ratio: 4 / 5; }
.figure--soft { box-shadow: var(--shadow-card); }

/* --- entry points: the core mechanic -------------------------------------- */
.entry__title { margin-bottom: clamp(24px, 3vw, 36px); max-width: 22ch; }
.entry { display: grid; gap: 12px; }
@media (min-width: 720px) { .entry { grid-template-columns: 1fr 1fr; gap: 14px; } }
.entry__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; height: 100%; padding: 16px 20px;
  background: var(--paper); color: var(--forest);
  border: 1.5px solid var(--line); border-radius: var(--radius);
  font-weight: 600; font-size: 1.0625rem; line-height: 1.35; text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s var(--ease-out), transform 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}
.entry__btn .icon--trail { color: var(--teal); transition: transform 0.2s var(--ease-out); }
.entry__btn:hover { border-color: var(--teal); transform: translateY(-2px); text-decoration: none; }
.entry__btn:hover .icon--trail { transform: translateX(3px); }
.entry__btn:active { background: var(--teal-wash); transform: none; }

/* Desktop fallback line: only where a text app is unlikely. */
.entry__desktop { display: none; }
@media (hover: hover) and (pointer: fine) {
  .entry__desktop {
    display: flex; gap: 10px; align-items: center; margin-top: 24px;
    font-size: var(--text-small); color: var(--ink-muted);
  }
  .entry__desktop .icon { color: var(--teal); width: 20px; height: 20px; }
}

/* --- steps ---------------------------------------------------------------- */
.steps { display: grid; gap: 0; }
.step { display: grid; grid-template-columns: 48px 1fr; gap: 18px; padding-block: 20px; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step__num {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 1.25rem;
  background: var(--teal-wash); color: var(--teal-deep);
}
.step__text { padding-top: 8px; }
.step__text p { color: var(--ink-muted); }
.step__action { margin-top: 14px; }

/* --- pricing card --------------------------------------------------------- */
.pricing {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(24px, 3.5vw, 36px); box-shadow: var(--shadow-card);
}
@media (min-width: 900px) { .pricing { position: sticky; top: calc(var(--topbar-h) + 32px); margin-top: 40px; } }
.pricing__caption { font-size: var(--text-caption); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-deep); }
.pricing__list { margin: 18px 0 0; }
.pricing__row { padding-block: 18px; border-top: 1px solid var(--line); }
.pricing__row:first-child { border-top: 0; padding-top: 4px; }
.pricing__row dt { font-weight: 700; color: var(--forest); }
.pricing__row dd { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.pricing__value { font-family: var(--font-display); font-weight: 600; font-size: 2.5rem; line-height: 1; color: var(--teal-deep); }
.pricing__note { font-size: var(--text-small); color: var(--ink-muted); }
.pricing__fine { margin-top: 18px; font-size: var(--text-small); color: var(--ink-muted); font-style: italic; line-height: 1.55; }
.pricing__fine--insurance { display: flex; gap: 10px; align-items: flex-start; font-style: normal; padding-top: 18px; border-top: 1px solid var(--line); }
.pricing__fine--insurance .icon { color: var(--teal); margin-top: 1px; width: 20px; height: 20px; }

/* --- why ------------------------------------------------------------------ */
.why { display: grid; gap: 14px; }
@media (min-width: 720px) { .why { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (min-width: 1060px) { .why { grid-template-columns: repeat(3, 1fr); } }
.why__item {
  display: grid; gap: 16px; align-content: start;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 24px; box-shadow: var(--shadow-card);
}
.why__item p { color: var(--ink-muted); }

/* --- about ---------------------------------------------------------------- */
.about { display: grid; gap: clamp(36px, 6vw, 80px); align-items: start; }
@media (min-width: 900px) {
  .about { grid-template-columns: 1fr 1.1fr; }
  .about__media { position: sticky; top: calc(var(--topbar-h) + 32px); }
}
.about__media { position: relative; padding-bottom: 18%; }
/* Bottom-left: Olga sits on the right of the selfie, so the inset must not. */
.figure--inset { position: absolute; left: -4%; bottom: 0; width: 44%; border: 6px solid var(--sand); }
.figure--inset img { aspect-ratio: 1 / 1; object-position: 50% 30%; }
@media (max-width: 899px) { .about__media { max-width: 520px; margin-inline: auto; width: 100%; } .figure--inset { left: -2%; } }
.about .section__head { max-width: 30rem; }
.prose--story p:first-child::first-letter {
  font-family: var(--font-display); font-weight: 600; color: var(--teal-deep);
  float: left; font-size: 3.6em; line-height: 0.82; padding: 0.06em 0.1em 0 0;
}
.about__intro {
  margin-top: 36px; padding: clamp(22px, 3vw, 32px);
  background: var(--cream); border-radius: var(--radius-lg); border: 1px solid var(--line);
}
.about__intro p + p { margin-top: 1em; }
.about__sig { font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--forest); font-size: 1.15rem; }
.about__sig span { font-family: var(--font); font-style: normal; font-size: var(--text-caption); color: var(--ink-muted); letter-spacing: 0.04em; }

/* --- who ------------------------------------------------------------------ */
.ticks { margin-top: 18px; display: grid; gap: 14px; }
.ticks li { position: relative; padding-left: 36px; color: var(--ink); }
.ticks li::before {
  content: ''; position: absolute; left: 4px; top: 0.42em; width: 16px; height: 9px;
  border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg);
}
.who__outro { margin-top: 26px; font-family: var(--font-display); font-weight: 500; font-size: var(--text-lede); line-height: 1.4; color: var(--forest); max-width: 36ch; }

/* --- sessions ------------------------------------------------------------- */
.sessions { text-align: left; }
.sessions__icon { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: var(--paper); color: var(--teal-deep); margin-bottom: 22px; box-shadow: var(--shadow-card); }

/* --- FAQ ------------------------------------------------------------------ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 18px 0; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 1.0625rem; color: var(--forest);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex: none; width: 11px; height: 11px; margin-right: 6px;
  border-right: 2px solid var(--teal-deep); border-bottom: 2px solid var(--teal-deep);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform 0.3s var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.faq summary:hover { color: var(--teal-deep); }
.faq details > div { padding-bottom: 22px; color: var(--ink-muted); max-width: 68ch; }

/* --- closing band --------------------------------------------------------- */
.closing { background: var(--forest); color: var(--on-forest-muted); text-align: center; }
.closing__inner { display: grid; justify-items: center; gap: 18px; }
.closing__logo { width: 112px; height: 112px; opacity: 0.95; margin-bottom: 6px; }
.closing h2 { color: var(--on-forest); font-size: clamp(2.2rem, 1.6rem + 2.8vw, 3.5rem); }
.closing__body { font-size: var(--text-lede); max-width: 34ch; margin-bottom: 8px; }
.closing__call { font-size: var(--text-body); }
.closing a:not(.btn) { color: #ffffff; font-weight: 700; }
.closing .btn--light { box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.5); }

/* --- footer --------------------------------------------------------------- */
.footer { background: #0b2f2a; color: var(--on-forest-muted); padding-block: 48px calc(36px + env(safe-area-inset-bottom)); font-size: var(--text-small); }
.footer__inner { display: grid; gap: 26px; }
.footer__brand { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.footer__brand img { width: 88px; height: 88px; flex: none; }
.footer__name { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; color: #ffffff; }
.footer__blurb { margin-top: 4px; }
.footer__contact { margin-top: 8px; }
.footer a { color: #ffffff; }
.footer__disclaimer { font-style: italic; font-size: var(--text-caption); line-height: 1.6; max-width: 92ch; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.footer__copy { font-size: var(--text-caption); }

/* --- desktop SMS helper --------------------------------------------------- */
.sms-dialog {
  width: min(520px, calc(100vw - 32px)); padding: 0; border: 0;
  border-radius: var(--radius-lg); background: var(--paper); color: var(--ink);
  box-shadow: 0 30px 80px -20px rgba(15, 59, 53, 0.5);
}
.sms-dialog::backdrop { background: rgba(15, 59, 53, 0.45); backdrop-filter: blur(3px); }
.sms-dialog__inner { position: relative; padding: 32px 28px 26px; display: grid; gap: 16px; }
.sms-dialog h2 { font-size: 1.6rem; padding-right: 40px; }
.sms-dialog__lead { color: var(--ink-muted); font-size: var(--text-small); }
.sms-dialog__msg {
  margin: 0; padding: 16px 18px; background: var(--teal-wash); color: var(--forest);
  border-radius: 18px 18px 18px 6px; font-weight: 600; line-height: 1.5;
}
.sms-dialog__close {
  position: absolute; top: 18px; right: 18px; width: 40px; height: 40px;
  display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line);
  background: var(--paper); color: var(--forest); cursor: pointer;
}
.sms-dialog__close:hover { background: var(--linen); }
.sms-dialog__call a { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; }
.sms-dialog__call .icon { width: 18px; height: 18px; }

/* --- 404 ------------------------------------------------------------------ */
.notfound { display: grid; justify-items: center; text-align: center; gap: 20px; }
.notfound h1 { font-size: var(--text-h2); }

/* --- motion: one gentle entrance ------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(14px); }
  .js .reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
    transition-delay: var(--delay, 0ms);
  }
}