/* Saaj sample: site.css. APPROACH.md §1, repainted in Phase 8g (2026-09-27, his word "use the 3rd
   one. purple or magenta"): an aubergine ground with a lamp's glow and grain, one malai board for the
   prices, brass the accent on the ground and plum on the board. The tokens keep their Phase 3 names
   (kohl is the ground, henna the accent) so no class or gate changes. Phase 3 wrote the tokens,
   the type scale, the two surfaces and the board's line layout; Phases 4 and 6 compose the
   screens on them. Never minified; animation properties longhand only (the Sinocare lesson).
   contrast.js reads the colour tokens below and fails on any pair under AA.

   Fonts, self-hosted and subset (Phase 2, 2026-09-26) with fontTools in a scratch venv, glyphs
   U+0020-007E, U+00A0, U+00B7, U+2018-2019, U+201C-201D, U+20B9:
   - fraunces-var.woff2: Fraunces[SOFT,WONK,opsz,wght].ttf from google/fonts, wght limited to
     400..600 with varLib.instancer, opsz 9..144, SOFT 0..100 and WONK 0..1 kept; pyftsubset
     --layout-features=kern,liga,case,ss01,rvrn --flavor=woff2. Fraunces has no tnum feature.
   - plex-sans-400.woff2, plex-sans-500.woff2: IBMPlexSans[wdth,wght].ttf instanced at wght 400
     and 500, wdth 100; pyftsubset --layout-features=kern,liga,ccmp,locl. Plex figures are
     tabular by default. */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Sans";
  src: url("../fonts/plex-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Sans";
  src: url("../fonts/plex-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Tokens, as APPROACH.md §1 after Phase 8g. */
:root {
  --kohl: #2A0A2C;          /* the ground, aubergine (8g; was #161311 kohl brown) */
  --kohl-lamp: #401245;     /* the lamp's glow, top right of every kohl surface (was #241C16) */
  --malai: #F1E8DC;         /* the board, top */
  --malai-2: #E6DACA;       /* the board, foot */
  --milk: #F5EEE4;          /* text on kohl */
  --ink: #1A1512;           /* text on malai */
  --mute-kohl: #B9A5B2;     /* captions, minutes, the open strip on kohl; mauve grey (was #A99E92) */
  --mute-malai: #62574F;    /* §1 said #6E635A: 4.2 to 1 at the board's foot, darkened to pass 4.5 */
  --henna: #B98E3E;         /* brass, large or non-text on kohl only (the open dot); no brass clears 3 on both grounds */
  --henna-ink: #852A72;     /* plum: small text on malai, the tapped line's rule and price, focus on malai */
  --henna-light: #E2BF6A;   /* light brass: small text on kohl (eyebrows, focus), and the booking buttons' fill */
  --rule-kohl: rgba(245, 238, 228, .14);
  --rule-malai: rgba(26, 21, 18, .12);
  --grain-kohl: .06;
  --grain-malai: .05;

  --serif: "Fraunces", Georgia, serif;
  --sans: "Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-numeral: clamp(4.5rem, 16vw, 12rem);
  --t-h2: clamp(2.5rem, 7vw, 5rem);
  --t-price: clamp(1.375rem, 3vw, 2rem);
  --t-name: 1.0625rem;
  --t-body: 1.0625rem;
  --t-eyebrow: .75rem;
  --t-caption: .875rem;

  --s-4: 4px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-24: 24px;
  --s-32: 32px; --s-48: 48px; --s-64: 64px; --s-96: 96px; --s-128: 128px;
  --radius: 2px;
  --gutter: var(--s-16);
  --section: var(--s-64);
  --bar-h: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 768px) { :root { --gutter: var(--s-32); } }
@media (min-width: 1024px) { :root { --gutter: var(--s-48); --section: var(--s-96); } }

/* Reset. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--s-24); }
body { margin: 0; }
h1, h2, h3, p, figure, ul, address { margin: 0; }
ul { padding: 0; list-style: none; }
address { font-style: normal; }
img, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }

/* The page. Plex for every word that is not a numeral, a heading, the mark or a price. */
body {
  background-color: var(--kohl);
  color: var(--milk);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--bar-h);
}
@media (min-width: 768px) {
  html { scroll-padding-top: calc(var(--bar-h) + var(--s-24)); }
  body { padding-top: var(--bar-h); padding-bottom: 0; }
}

/* Visually hidden, still read aloud: the hidden headings and the " min" after each minutes figure. */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--s-8); top: -64px; z-index: 20; padding: var(--s-12) var(--s-16); background-color: var(--milk); color: var(--ink); border-radius: var(--radius); }
.skip:focus { top: var(--s-8); }
:focus-visible { outline: 2px solid var(--henna-light); outline-offset: 3px; }
.malai :focus-visible { outline-color: var(--henna-ink); }

/* Surfaces. The only two backgrounds on the page, each with the grain laid over it at its token
   opacity (img/grain.svg, feTurbulence, repeating). A hairline starts every kohl section. */
.kohl, .malai { position: relative; isolation: isolate; }
.kohl::before, .malai::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("../img/grain.svg");
  background-size: 200px 200px;
}
.kohl {
  background-color: var(--kohl);
  background-image: radial-gradient(ellipse 90% 70% at 100% 0%, var(--kohl-lamp) 0%, rgba(64, 18, 69, 0) 70%);
  color: var(--milk);
}
.kohl::before { opacity: var(--grain-kohl); }
.malai {
  background-color: var(--malai);
  background-image: linear-gradient(180deg, var(--malai) 0%, var(--malai-2) 100%);
  color: var(--ink);
}
.malai::before { opacity: var(--grain-malai); }
main > section.kohl + section.kohl, footer.kohl { border-top: 1px solid var(--rule-kohl); }
main > section { padding: var(--section) var(--gutter); }
main > section.seam { padding: 0; }

/* Type. Fraunces with SOFT 100 everywhere it is used; the optical size follows the font size. */
.numeral, h2, .mark, .price, .menu-head, h1 {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 100, "WONK" 0;
  font-optical-sizing: auto;
}
.numeral {
  font-size: var(--t-numeral);
  font-weight: 600;
  line-height: .86;
  letter-spacing: -.035em;
}
.numeral-from {
  font-size: .22em;
  font-weight: 400;
  letter-spacing: 0;
  vertical-align: .9em;
  margin-right: .1em;
  color: var(--henna-light);
}
.numeral data { white-space: nowrap; }
.numeral-for { font-size: var(--t-caption); color: var(--mute-kohl); }
h1 { font-size: var(--t-price); font-weight: 400; line-height: 1.2; max-width: 22ch; }
h2 { font-size: var(--t-h2); font-weight: 400; line-height: 1; letter-spacing: -.02em; }
.eyebrow {
  font-size: var(--t-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  line-height: 1.4;
  color: var(--henna-light);
  margin-bottom: var(--s-16);
}
.malai .eyebrow { color: var(--henna-ink); }
.years, figcaption, .open, .tap, footer, .ribbon, address, .hours { font-size: var(--t-caption); }
.years, figcaption, .open p + p, footer, .ribbon, .hours { color: var(--mute-kohl); }
.open-now { color: var(--milk); font-weight: 500; }

/* Buttons: 2px corners, 48px tall. The booking buttons are the one henna fill on the page. */
.btn, .bar-book, .bar-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--s-24);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.btn, .bar-book { background-color: var(--henna-light); color: var(--kohl); }
.visit-links .btn, .bar-call { background-color: transparent; color: var(--milk); border: 1px solid var(--rule-kohl); }
.visit-links { display: flex; flex-wrap: wrap; gap: var(--s-12); margin-top: var(--s-24); }

/* The bar: fixed to the foot on phones with the page's one shadow, to the top from 768px. */
.bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--s-12);
  height: var(--bar-h);
  padding: 0 var(--gutter);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: var(--kohl);
  border-top: 1px solid var(--rule-kohl);
}
@media (max-width: 767px) { .bar { box-shadow: 0 -8px 24px rgba(0, 0, 0, .35); } }
/* On a phone "Book Head, neck and shoulders" is wider than the room between the wordmark and
   Call, so the label sets at 14px and takes up to two lines; the service is never cut. */
@media (max-width: 767px) {
  .bar-book { flex: 1 1 0; padding: 0 var(--s-12); font-size: var(--t-caption); line-height: 1.2; white-space: normal; text-align: center; }
  .bar-book [data-label] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
}
.bar .mark { margin-right: auto; font-size: 1.625rem; font-weight: 500; line-height: 1; text-decoration: none; letter-spacing: -.01em; }
.bar-book { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bar-book [data-label] { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bar-call { padding: 0 var(--s-16); }
@media (min-width: 768px) {
  .bar { top: 0; bottom: auto; padding-bottom: 0; border-top: 0; border-bottom: 1px solid var(--rule-kohl); }
}

/* The board: a malai surface, each section a photograph and its lines. A line is one tap:
   name, minutes, price on one row, 48px at least, a hairline under it. Fraunces has no tabular
   figures, so the prices are right aligned and end on one edge; the minutes are Plex, which is
   tabular, and are right aligned under the one "min" in the section's head. */
.board h2 { margin-bottom: var(--s-48); }
.menu { --cols: minmax(0, 1fr) 3.25rem 6.5rem; }
.menu + .menu { margin-top: var(--s-64); }
.menu-photo { margin-bottom: var(--s-24); }
.menu-head, .line {
  display: grid;
  grid-template-columns: var(--cols);
  column-gap: var(--s-12);
  align-items: baseline;
}
/* The section head outranks the prices under it (Phase 7 audit: at --t-price they were level). */
.menu-head { font-size: clamp(1.75rem, 3.6vw, 2.75rem); font-weight: 400; line-height: 1.1; padding-bottom: var(--s-12); border-bottom: 1px solid var(--ink); }
.menu-min { grid-column: 2; justify-self: end; font-family: var(--sans); font-size: var(--t-caption); font-weight: 400; color: var(--mute-malai); }
.line {
  min-height: 56px;
  padding: var(--s-12) 0;
  border-bottom: 1px solid var(--rule-malai);
  text-decoration: none;
  color: var(--ink);
}
.line .name { font-size: var(--t-name); line-height: 1.35; }
.line .reason { color: var(--mute-malai); }
.line .mins { justify-self: end; font-size: var(--t-caption); color: var(--mute-malai); }
.line .price { justify-self: end; text-align: right; white-space: nowrap; font-size: var(--t-price); font-weight: 500; line-height: 1; }
.line .from { font-family: var(--sans); font-size: var(--t-caption); font-weight: 400; color: var(--mute-malai); margin-right: .2em; }
.tap { margin-top: var(--s-48); color: var(--mute-malai); }
@media (min-width: 768px) { .menu { --cols: minmax(0, 1fr) 3.5rem 8rem; } }
@media (min-width: 1024px) {
  .board > .eyebrow, .board > h2, .board > .tap, .menu { max-width: 1280px; margin-left: auto; margin-right: auto; }
  .menu {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s-24);
    align-items: start;
    grid-template-rows: auto 1fr;  /* a short section's spare height goes under its lines, not under its head */
  }
  .menu-photo { grid-column: 1 / 5; grid-row: 1 / 3; margin-bottom: 0; }
  .menu-head, .lines { grid-column: 6 / 13; }
  .menu { --cols: minmax(0, 1fr) 4rem 10rem; }
}

/* The chosen line (js/menu.js sets aria-pressed): a henna rule in the gutter on its left and the
   price in henna ink, which holds 4.5 on malai at the phone's 22px price. A hover shows the rule
   faintly, so the line reads as something to press. */
.line { position: relative; }
.line::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--s-12));
  top: var(--s-12);
  bottom: var(--s-12);
  width: 3px;
  border-radius: var(--radius);
  background-color: var(--henna-ink);
  opacity: 0;
  transform: scaleY(0);
}
.line[aria-pressed="true"]::before { opacity: 1; transform: none; }
.line[aria-pressed="true"] .price { color: var(--henna-ink); }
@media (hover: hover) { .line:hover::before { opacity: .4; transform: none; } .line[aria-pressed="true"]:hover::before { opacity: 1; } }

/* Motion (APPROACH.md §1): all of it sits under no-preference, so reduced motion gets none of it
   and every line is visible. The tap: the rule and the price over 160ms, the bar's label crossfades
   over 160ms. The scroll: each line rises into view as it enters, driven by view() where the browser
   has it; the inset keeps the reveal above the phone's bar and below the desktop's. js/motion.js adds
   .reveal and .in for browsers without view(). Longhand only, never minified. */
@keyframes line-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .line::before { transition-property: opacity, transform; transition-duration: 160ms; transition-timing-function: var(--ease); }
  .line .price { transition-property: color; transition-duration: 160ms; transition-timing-function: var(--ease); }
  .bar-book [data-label] { transition-property: opacity; transition-duration: 160ms; transition-timing-function: var(--ease); }
  .bar-book.swap [data-label] { opacity: 0; }
  @supports (animation-timeline: view()) {
    .line {
      animation-name: line-in;
      animation-duration: 1ms;
      animation-timing-function: var(--ease);
      animation-fill-mode: both;
      animation-timeline: view(block 0px 64px);
      animation-range-start: entry 0%;
      animation-range-end: cover 15%;
    }
    @media (min-width: 768px) { .line { animation-timeline: view(block 64px 0px); } }
  }
  .reveal .line { opacity: 0; transform: translateY(12px); transition-property: opacity, transform; transition-duration: 400ms; transition-timing-function: var(--ease); }
  .reveal .line.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .reveal .line { opacity: 1; transform: none; } }

/* 1. The seam (APPROACH.md §1). At 390 the photograph takes the top 60 percent edge to edge and
   the band the rest; the numeral is the band's first line, pulled up by half its height so its
   top half sits on the photograph (a negative margin, no scrim, no card). The eyebrow follows the
   numeral in the band on a phone, so the numeral can be the thing that crosses. From 1024 the seam
   fills the screen under the bar, the photograph above and the band across its foot: eyebrow left,
   numeral centre on the seam, line and button right. The photograph shows its lower part there, so
   the numeral's top half lands on the floor the grade has dimmed (3 to 1 or better, Phase 6). */
.seam { position: relative; background-color: var(--kohl); }
.seam-photo { position: relative; height: 60vh; height: 60svh; min-height: 320px; overflow: hidden; }
.seam-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.seam .band { display: flex; flex-direction: column; padding: 0 var(--gutter) var(--section); }
.seam .band > * + * { margin-top: 0; }
.seam .numeral { order: -2; position: relative; z-index: 1; margin-top: -.43em; color: var(--milk); }
.seam .numeral-for { order: -1; margin-top: var(--s-8); }
.seam .eyebrow { margin-top: var(--s-32); margin-bottom: var(--s-8); }
.seam .btn { align-self: flex-start; margin-top: var(--s-24); }
@media (min-width: 1024px) {
  .seam { display: flex; flex-direction: column; height: calc(100vh - var(--bar-h)); height: calc(100svh - var(--bar-h)); min-height: 640px; }
  .seam-photo { flex: 1 1 auto; height: auto; min-height: 0; }
  .seam-photo img { object-position: 50% 85%; }
  .seam .band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: var(--s-48);
    align-items: end;
    padding: 0 var(--gutter) var(--s-48);
  }
  .seam .eyebrow { grid-column: 1; grid-row: 1; margin: 0; }
  .seam .numeral { grid-column: 2; grid-row: 1; justify-self: center; margin-top: -.5em; }
  .seam .numeral-for { grid-column: 2; grid-row: 2; justify-self: center; align-self: start; }
  .seam h1 { grid-column: 3; grid-row: 1; justify-self: end; font-size: 1.5rem; max-width: 20ch; }
  .seam .btn { grid-column: 3; grid-row: 2; justify-self: end; margin-top: var(--s-16); }
}

/* 2. Open today: one line between two hairlines, a henna dot before the hours. */
/* A div, not a section: the strip has no heading and adds no words. */
main > .open { padding: var(--s-24) var(--gutter); }
.open { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-24); row-gap: var(--s-4); border-bottom: 1px solid var(--rule-kohl); }
.open-now::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: var(--s-12); border-radius: 50%; background-color: var(--henna); vertical-align: .1em; }
@media (min-width: 1024px) { .open { justify-content: center; } }

/* Every other kohl screen keeps its surface full width and its content in the 1280 frame the
   board uses. */
main > section.room, main > section.owner, main > section.ask, main > section.visit, footer {
  padding-left: max(var(--gutter), calc((100% - 1280px) / 2));
  padding-right: max(var(--gutter), calc((100% - 1280px) / 2));
}

/* 4. The room: a swipe row on a phone (scroll-snap, reachable and scrollable by keyboard from its
   focus), three in a row from 768. */
.room-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 80%;
  gap: var(--s-16);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  margin-left: calc(-1 * var(--gutter));
  margin-right: calc(-1 * var(--gutter));
  padding: 0 var(--gutter) var(--s-8);
  scrollbar-width: none;
}
.room-row::-webkit-scrollbar { display: none; }
.room-row figure { scroll-snap-align: start; }
figcaption { margin-top: var(--s-12); }
@media (min-width: 768px) {
  /* Not three equal cards (Phase 7 audit): the floor widest, the spa room, then the door, one
     ratio each so the three step down to a shared foot. */
  .room-row { grid-auto-flow: row; grid-template-columns: 5fr 4fr 3fr; align-items: end; gap: var(--s-24); overflow: visible; margin-left: 0; margin-right: 0; padding: 0; }
}
/* The room's accent: a short henna rule over each caption, the board's chosen-line rule. */
.room figcaption::before { content: ""; display: block; width: var(--s-24); height: 2px; margin-bottom: var(--s-8); background-color: var(--henna-light); }

/* 5. Sana: the photograph above on a phone, on the left five columns from 1024 with her words
   beside it. The name in Fraunces, the two lines in Plex. */
.owner-words { margin-top: var(--s-32); }
.owner h2 { margin-bottom: var(--s-12); }
.owner-words > p + p { margin-top: var(--s-12); max-width: 40ch; }
.years { margin-bottom: var(--s-12); }
.owner-words .years + p { margin-top: var(--s-24); }

/* 6. The ask: the photograph, then the line set as the screen's statement, then its own button.
   From 1024 the photograph goes right, answering Sana's on the left. */
.ask-words { margin-top: var(--s-32); }
.ask-words p { font-family: var(--serif); font-variation-settings: "SOFT" 100, "WONK" 0; font-size: var(--t-price); line-height: 1.25; max-width: 22ch; }
.ask-words .btn { margin-top: var(--s-32); }

@media (min-width: 1024px) {
  .owner, .ask { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-24); align-items: center; }
  .owner-photo { grid-column: 1 / 6; }
  .owner-words { grid-column: 7 / 12; margin-top: 0; }
  .ask-photo { grid-column: 8 / 13; grid-row: 1; }
  .ask-words { grid-column: 2 / 7; grid-row: 1; margin-top: 0; }
}

/* 7. Find us: the map, then the address, the hours and the two buttons; from 1024 the map on
   seven columns and the words on four. */
.map { display: block; margin-bottom: var(--s-24); border: 1px solid var(--rule-kohl); border-radius: var(--radius); overflow: hidden; }
address { font-size: var(--t-body); max-width: 32ch; }
.hours { margin-top: var(--s-8); }
@media (min-width: 1024px) {
  .visit { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-24); align-content: start; }
  .visit .map { grid-column: 1 / 8; grid-row: 1 / 5; margin-bottom: 0; }
  .visit address, .visit .hours, .visit .visit-links { grid-column: 9 / 13; }
  .visit address { align-self: end; }
}

footer { padding: var(--s-48) var(--gutter); display: grid; gap: var(--s-8); }
footer p { max-width: 64ch; }
/* The footer's two links and the bar's wordmark are 48px targets like every other tap. The
   ribbon sits inside the footer so it belongs to a landmark (axe "region"). */
footer a, .bar .mark { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; }
.privacy main { max-width: 40rem; padding: var(--section) var(--gutter); }
.privacy h1 { font-size: var(--t-h2); margin-bottom: var(--s-24); }
.privacy main p + p { margin-top: var(--s-16); }

/* A photograph still loading shows as a warm dark box, never a white flash. */
picture img, .map img { width: 100%; background-color: #3a2338; }

/* The entrance, once, on load (APPROACH.md §1): the photograph comes up from kohl over 700ms (a
   kohl layer over it fades out, so the image itself paints at once and counts for LCP); the
   numeral rises 16px and fades in over 400ms from 120ms; then the line, the button and the bar
   at 80ms steps. Only under no-preference; reduced motion shows everything at once. Longhand. */
@keyframes kohl-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.seam-photo::after { content: ""; position: absolute; inset: 0; background-color: var(--kohl); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .seam-photo::after { animation-name: kohl-out; animation-duration: 700ms; animation-timing-function: var(--ease); animation-fill-mode: both; }
  .seam .numeral, .seam .numeral-for, .seam .eyebrow, .seam h1, .seam .btn, .bar {
    animation-timing-function: var(--ease);
    animation-fill-mode: both;
  }
  .seam .numeral, .seam .numeral-for { animation-name: rise-in; animation-duration: 400ms; animation-delay: 120ms; }
  .seam .eyebrow, .seam h1 { animation-name: rise-in; animation-duration: 400ms; animation-delay: 520ms; }
  .seam .btn { animation-name: fade-in; animation-duration: 400ms; animation-delay: 600ms; }
  .bar { animation-name: fade-in; animation-duration: 400ms; animation-delay: 680ms; }
}