@font-face{font-family:'Gabarito';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/gabarito-normal-400-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/spectral-italic-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* --------------------------------------------------------------------------
   O'Mauna Yoga — design tokens.
   The logo is two continuous rounded strokes; the page takes that as its
   grammar: curved joins between sections, photographs cut into soft pebble
   shapes, a shallow gradient from shallow water to deep. The palette is the
   sea off Paramé: foam, shallow water, deep water, and wet sand for the one
   warm accent. The dark tone is deliberately lighter than the mockup it came
   from, and it is the only dark surface on the site.
   -------------------------------------------------------------------------- */
:root {
  --foam:    #f4faf9;   /* page */
  --shallow: #dcefee;   /* bands, quote cards, footer */
  --deep:    #1f5c63;   /* buttons, and the cookie note */
  --mid:     #256468;   /* links, button hover */
  --sandy:   #9c6228;   /* trial price and class-size mark; never small text on shallow */
  --ink:     #16302f;   /* text and headings */
  --soft:    #4d6766;   /* secondary text, 4.6:1 on shallow */
  --line:    rgba(23, 73, 79, 0.16);

  /* older names, kept so no selector had to be renamed */
  --shell: var(--foam);
  --mist: var(--shallow);
  --slate: var(--ink);
  --sea: var(--mid);
  --ochre: var(--sandy);
  --granite: var(--soft);

  --sans: 'Gabarito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Spectral', 'Iowan Old Style', Georgia, serif;

  --measure: 62ch;
  --wrap: 1160px;
  --gutter: 1.25rem;
  --radius: 22px;
  --pebble: 42% 58% 55% 45% / 48% 42% 58% 52%;
  --step: clamp(3rem, 7vw, 5rem); /* vertical rhythm between sections */
}

@media (min-width: 48em) { :root { --gutter: 2rem; } }

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--foam);
  color: var(--ink);
  font: 400 1.0625rem/1.68 var(--sans);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

/* ---------- type scale: one sans for everything, the serif only where a voice speaks */
h1, h2, h3, h4 { margin: 0 0 .5em; font-family: var(--sans); font-weight: 600; letter-spacing: -.015em; text-wrap: balance; }
h1, .display { font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.06; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.35rem); line-height: 1.12; }
h3 { font-size: 1.0625rem; line-height: 1.35; letter-spacing: 0; }
h4 { font-size: 1rem; letter-spacing: 0; }

p, ul, ol, dl, table, figure, blockquote { margin: 0 0 1.15em; }
p, li { max-width: var(--measure); }
ul, ol { padding-left: 1.15em; }
li { margin-bottom: .4em; }
strong { font-weight: 600; }
small { font-size: .9375rem; }
em { font-family: var(--serif); font-style: italic; font-size: 1.08em; color: var(--mid); }

a { color: var(--mid); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--sandy); outline-offset: 3px; border-radius: 4px; }

blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--shallow);
  border-radius: var(--radius);
  padding: 1.75rem 1.6rem;
  max-width: none;
}
blockquote cite { display: block; margin-top: .8rem; font: 500 .875rem/1.4 var(--sans); font-style: normal; color: var(--soft); }

img { max-width: 100%; height: auto; }
figure img, .photo { border-radius: 20px; display: block; }
figcaption { font-size: .9375rem; color: var(--soft); margin-top: .6rem; }

/* ---------- layout */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--step); }
.section > :last-child { margin-bottom: 0; }
.band { background: var(--shallow); }
.rule { border: 0; border-top: 1px solid var(--line); margin-block: var(--step); }
.lede { font-size: 1.125rem; line-height: 1.6; color: var(--soft); max-width: 50ch; }
.skip { position: absolute; left: -9999px; }
.skip:focus { position: fixed; left: 1rem; top: 1rem; z-index: 60; background: var(--ink); color: #fff; padding: .7rem 1rem; border-radius: 999px; }

/* ---------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: .8rem 1.6rem;
  border-radius: 999px;
  background: var(--deep); color: #fff;
  font: 600 .9375rem/1 var(--sans);
  text-decoration: none;
  border: 1.5px solid var(--deep);
}
.btn:hover { background: var(--mid); border-color: var(--mid); }
.btn-quiet { background: transparent; color: var(--deep); border-color: rgba(23, 73, 79, .28); }
.btn-quiet:hover { background: transparent; color: var(--deep); border-color: var(--deep); }
.btns { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.15em; }

/* ---------- header: brand row, then the navigation on its own line at desktop */
.site-header { background: var(--foam); }
.site-header .wrap { display: flex; align-items: center; gap: 1rem; min-height: 70px; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand img { width: 34px; height: 34px; flex: none; }
.brand b { display: block; font: 700 1.0625rem/1.15 var(--sans); letter-spacing: -.01em; }
.brand span { display: block; font-size: .8125rem; color: var(--soft); line-height: 1.3; white-space: nowrap; }
@media (max-width: 26em) { .brand > span > span { display: none; } } /* name only on the narrowest phones */

.menu { position: relative; }
.menu > summary { cursor: pointer; padding: .65rem 1rem; border: 1.5px solid rgba(23, 73, 79, .28); border-radius: 999px; font: 600 .9375rem/1 var(--sans); color: var(--deep); list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { background: var(--shallow); }
.menu ul { position: absolute; top: calc(100% + .6rem); right: 0; z-index: 40; width: 15.5rem; margin: 0; padding: .35rem 1rem .6rem; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 30px rgba(23, 73, 79, .12); }
.menu li { margin: 0; max-width: none; }
.menu a { display: block; padding: .7rem 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: .9375rem; }
.menu > ul > li:last-child a { border-bottom: 0; color: var(--deep); font-weight: 600; }
.menu a[aria-current] { color: var(--deep); font-weight: 600; }
.nav-desktop { display: none; }

/* a navigation group: a <details>, so it opens on click and on Enter, with no script */
:is(.navgroup, .subnav) > summary { cursor: pointer; list-style: none; }
:is(.navgroup, .subnav) > summary::-webkit-details-marker { display: none; }
:is(.navgroup, .subnav) > summary::after {
  content: ''; display: inline-block; width: .38rem; height: .38rem; margin-left: .42rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-.14em) rotate(45deg);
}
:is(.navgroup, .subnav)[open] > summary::after { transform: translateY(.06em) rotate(-135deg); }
.menu .subnav > summary { padding: .7rem 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; font: 500 .9375rem/1.4 var(--sans); color: var(--ink); }
.menu .subnav ul { position: static; width: auto; margin: 0; padding: 0 0 0 .9rem; background: none; border: 0; box-shadow: none; }

@media (min-width: 64em) {
  .menu { display: none; }
  .site-header .wrap { flex-wrap: wrap; align-items: center; padding-block: .75rem .25rem; }
  .nav-desktop { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem 1.4rem; order: 3; width: 100%; padding-top: .35rem; }
  .nav-desktop a { padding: .4rem 0; font-size: .9375rem; font-weight: 500; color: var(--soft); text-decoration: none; }
  .nav-desktop a:hover { color: var(--deep); }
  .nav-desktop a[aria-current] { color: var(--deep); font-weight: 600; }
  .nav-desktop .navgroup { position: relative; }
  .nav-desktop .navgroup > summary { padding: .4rem 0; font-size: .9375rem; font-weight: 500; color: var(--soft); }
  .nav-desktop .navgroup > summary:hover { color: var(--deep); }
  .nav-desktop .navgroup > summary[aria-current] { color: var(--deep); font-weight: 600; }
  .nav-desktop .navgroup > div {
    position: absolute; top: calc(100% + .55rem); left: -1rem; z-index: 40;
    display: grid; min-width: 13.5rem; padding: .2rem 1rem .4rem;
    background: #fff; border: 1px solid var(--line); border-radius: 16px;
    box-shadow: 0 12px 30px rgba(23, 73, 79, .12);
  }
  .nav-desktop .navgroup > div a { padding: .65rem 0; border-bottom: 1px solid var(--line); color: var(--ink); }
  .nav-desktop .navgroup > div a:last-child { border-bottom: 0; }
  .header-cta { display: inline-flex; padding: .6rem 1.2rem; min-height: 40px; }
}
@media (max-width: 63.99em) { .header-cta { display: none; } }

/* ---------- hero: a shallow gradient, a curved bottom edge, the photo as a pebble */
.hero {
  position: relative;
  background: linear-gradient(180deg, var(--foam), var(--shallow));
  padding-top: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: clamp(4.5rem, 10vw, 8rem);
}
.hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: clamp(40px, 6vw, 80px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%23f4faf9' d='M0 64c180-40 360-40 540 0s360 40 540 0 360-40 360 0v56H0z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  pointer-events: none;
}
.hero-grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
.hero-head > :last-child, .hero-body > :last-child { margin-bottom: 0; }
.hero-head h1 { max-width: 16ch; }
.hero-photo { margin: 0; }
.hero-photo img { width: 100%; object-fit: cover; border-radius: var(--pebble); }
/* the Shirotchampi: the client's face is at the bottom edge, so the crop keeps the bottom */
.hero-photo img.pin-bottom { object-position: 50% 100%; }
/* a panorama in a tall column: cut to 4:3 around the teacher rather than show a thin strip */
.hero-photo img.crop-wide { aspect-ratio: 4 / 3; object-position: 62% 50%; }

/* portrait photos would otherwise run the full height of a tablet screen */
@media (min-width: 34em) { .hero-photo img { max-height: 26rem; } }
/* two columns again from tablet up: the pitch and the timetable stack on the left,
   the photo holds the right. On a phone the source order puts it between the two. */
@media (min-width: 52em) {
  .hero-grid {
    grid-template-columns: 1.02fr .98fr;
    grid-template-areas: "head photo" "body photo";
    align-items: start;
    row-gap: 1.15rem;
  }
  .hero-head { grid-area: head; }
  .hero-body { grid-area: body; }
  .hero-photo { grid-area: photo; align-self: center; }
  .hero-photo img { max-height: 30rem; }
}

/* ---------- the timetable: a real table, styled as a calm list of days */
.week { margin: 0 0 1.5rem; }
.week table { width: 100%; border-collapse: collapse; margin: 0; }
.week caption { text-align: left; font: 400 .9375rem/1.4 var(--sans); color: var(--soft); padding-bottom: .6rem; }
.week caption .cap { margin: .55rem 0 .15rem; }
.week th, .week td { text-align: left; padding: .75rem 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.week th { font: 600 1.0625rem/1.4 var(--sans); color: var(--ink); width: 7.5rem; padding-right: 1rem; }
.week td { font-variant-numeric: tabular-nums; color: var(--soft); }
.week td span { display: block; font-size: 1.0625rem; }

/* class-size mark: eight strokes, because the number is the promise */
.cap { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.15em; }
.cap-marks { display: flex; gap: .28rem; flex: none; }
.cap-marks i { display: block; width: .3rem; height: 1.35rem; background: var(--sandy); border-radius: 999px; }
.cap span:last-child { font-size: .9375rem; color: var(--soft); }

/* trial-class price: same ink as every other price on the site */
.trial { display: flex; align-items: baseline; gap: .6rem; margin-bottom: 1.15em; }
.trial b { font: 600 clamp(2rem, 4.6vw, 2.75rem)/1 var(--sans); color: var(--ink); letter-spacing: -.02em; }
.trial span { font-size: 1rem; color: var(--soft); max-width: 26ch; }

/* ---------- credentials: four white pillars on the shallow band */
.creds { display: grid; gap: 1.25rem; margin: 0; padding: 0; }
.creds > div { background: #fff; border-radius: var(--radius); padding: 1.5rem 1.4rem; }
.creds dt { font: 600 1.0625rem/1.35 var(--sans); margin-bottom: .35rem; }
.creds dd { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--soft); }
@media (min-width: 46em) { .creds { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
@media (min-width: 70em) { .creds { grid-template-columns: repeat(4, 1fr); } }

/* ---------- prices: white cards, the lead price in sand */
.rates { display: grid; gap: 1.5rem; margin: 0 0 .5rem; padding: 0; list-style: none; }
.rates > li { max-width: none; margin: 0; background: #fff; border-radius: var(--radius); padding: 1.6rem 1.4rem 1.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; }
.rate-name { font: 600 1rem/1.35 var(--sans); margin: 0 0 .5rem; }
.rate-price { font: 600 2.75rem/1 var(--sans); letter-spacing: -.02em; margin: 0 0 .2rem; color: var(--ink); }
.rate-unit { font-size: .875rem; color: var(--soft); margin: 0 0 .8rem; }
.rate-note { font-size: .9375rem; line-height: 1.5; color: var(--soft); margin: 0 0 1rem; max-width: 30ch; }
.rates a { display: inline-flex; align-items: center; min-height: 44px; margin-top: auto; padding: .7rem 1.3rem; border-radius: 999px; border: 1.5px solid rgba(23, 73, 79, .28); color: var(--deep); font: 600 .875rem/1 var(--sans); text-decoration: none; }
.rates a:hover { border-color: var(--deep); }
.rates + p { max-width: none; }
@media (min-width: 44em) { .rates { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68em) { .rates { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } }

/* ---------- editorial pieces */
/* the portrait left this block, so the prose becomes one centred column rather
   than a half-empty two-column grid */
.prose { max-width: 68ch; margin-inline: auto; }
.prose > :last-child { margin-bottom: 0; }
/* every other figure is cropped square; the portrait keeps its own framing */
.portrait { max-width: 20rem; margin-bottom: 1.6em; }
.cols figure.portrait img { aspect-ratio: 3 / 4; }

.cols { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.cols > div { min-width: 0; }
.cols figure img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--pebble); }
@media (min-width: 52em) { .cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 52em) { .cols-wide { grid-template-columns: 1.25fr .75fr; } }

.faq h3 { margin-top: 1.75rem; font-size: 1.0625rem; }
.faq h3:first-of-type { margin-top: 0; }
.faq p { margin-bottom: .75em; }

.note {
  background: #fff;
  border-left: 3px solid var(--sandy);
  border-radius: 0 16px 16px 0;
  padding: .9rem 1.1rem;
  margin-bottom: 1.5em;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--soft);
}
.note p { max-width: 58ch; margin-bottom: .5em; }
.note p:last-child { margin-bottom: 0; }

.author { display: flex; gap: 1rem; align-items: flex-start; border-top: 1px solid var(--line); padding-top: 1.25rem; margin-bottom: 1.5em; }
.author img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: top center; flex: none; }
.author p { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--soft); max-width: 52ch; }
.author b { display: block; font: 600 1rem/1.4 var(--sans); color: var(--ink); }

.quotes { display: grid; gap: 1.5rem; }
@media (min-width: 52em) { .quotes { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.band blockquote { background: #fff; }

.linkcards { display: grid; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.linkcards > li { max-width: none; margin: 0; }
.linkcards img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; margin-bottom: .9rem; }
.linkcards h3 { margin-bottom: .3rem; }
.linkcards h3 a { text-decoration: none; color: var(--ink); }
.linkcards h3 a:hover { color: var(--mid); text-decoration: underline; }
.linkcards p { font-size: .9375rem; color: var(--soft); margin-bottom: .4rem; }
@media (min-width: 46em) { .linkcards { grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); gap: 2rem; } }

.booking-frame { width: 100%; min-height: 820px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.booking-embed { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.5rem; max-width: 42rem; }
.booking-embed ul { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.booking-embed li { display: flex; justify-content: space-between; gap: 1rem; max-width: 26rem; padding: .5rem 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.booking-embed button { cursor: pointer; font-family: var(--sans); }
.booking-note { font-size: .875rem; color: var(--soft); margin: 0; }

/* ---------- the one dark tone: a section of the homepage, and the closing band */
.end {
  position: relative;
  background: var(--shallow); color: var(--ink);
  text-align: center;
  padding-top: clamp(4.5rem, 9vw, 7rem);
}
/* The wave is cut out of the band, so its fill has to be whatever sits directly
   above it — hence no margin here, and a second fill for a preceding .band. */
.end::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px;
  height: clamp(40px, 6vw, 80px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%23f4faf9' d='M0 56c180 40 360 40 540 0s360-40 540 0 360 40 360 0V0H0z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  pointer-events: none;
}
.band + .end::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%23dcefee' d='M0 56c180 40 360 40 540 0s360-40 540 0 360 40 360 0V0H0z'/%3E%3C/svg%3E"); }
.end h2 { max-width: 22ch; margin-inline: auto; }
.end p, .end .lede { color: var(--soft); margin-inline: auto; max-width: 48ch; }
.end .btns { justify-content: center; }

/* ---------- footer: on the page tone below the pale closing band, three columns the audit asks for */
.site-footer { background: var(--foam); border-top: 1px solid var(--line); color: var(--ink); padding-block: clamp(2.5rem, 5vw, 3.5rem) 6.5rem; }
.site-footer a { color: var(--deep); }
.site-footer h2 { font-size: 1.0625rem; margin-bottom: .6rem; }
.foot-grid { display: grid; gap: 2rem; }
@media (min-width: 52em) { .foot-grid { grid-template-columns: 1.1fr 1fr 1fr; gap: 2.5rem; } }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { margin-bottom: .45rem; font-size: .9375rem; }
.foot-grid .ico { width: 1em; height: 1em; vertical-align: -.16em; margin-right: .45em; flex: none; }
.foot-grid p { font-size: .9375rem; color: var(--soft); }
.foot-week { list-style: none; margin: 0; padding: 0; font-variant-numeric: tabular-nums; }
.foot-week li { display: flex; gap: .6rem; }
.foot-week b { font-weight: 600; min-width: 4.2rem; color: var(--ink); }
.foot-week span { color: var(--soft); }
.legal { border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1.25rem; font-size: .875rem; color: var(--soft); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.legal p { margin: 0; max-width: none; }
@media (min-width: 52em) { .site-footer { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); } }

/* ---------- mobile action bar */
.actionbar {
  position: fixed; inset: auto 0 0 0; z-index: 50;
  display: flex; gap: .5rem;
  padding: .55rem var(--gutter) calc(.55rem + env(safe-area-inset-bottom));
  background: rgba(244, 250, 249, .94); backdrop-filter: blur(8px); border-top: 1px solid var(--line);
}
.actionbar a { flex: 1; justify-content: center; padding: .7rem 1rem; font-size: .9375rem; }
@media (min-width: 52em) { .actionbar { display: none; } }

/* ---------- cookie note */
.cookienote[hidden] { display: none; }
.cookienote { position: fixed; z-index: 45; left: var(--gutter); right: var(--gutter); bottom: 4.6rem; background: var(--deep); color: #eef3f2; padding: .9rem 1rem; border-radius: 16px; font-size: .875rem; display: flex; gap: 1rem; align-items: center; }
.cookienote p { margin: 0; max-width: none; }
.cookienote button { flex: none; border: 1.5px solid rgba(255,255,255,.5); background: transparent; color: #fff; font: 600 .875rem/1 var(--sans); padding: .55rem .9rem; border-radius: 999px; cursor: pointer; }
@media (min-width: 52em) { .cookienote { bottom: 1rem; left: auto; max-width: 30rem; } }

/* ---------- 404 */
.error-page { padding-block: clamp(3rem, 8vw, 6rem); }

/* ---------- scroll reveal.
   Only the inline script at the end of <body> adds `reveal` and `js-reveal`, so
   without JavaScript nothing is ever hidden. The hero never gets the class: the
   LCP element must not fade. prefers-reduced-motion is handled by the script
   (it does nothing) and, belt and braces, by the rule at the top of this file. */
.js-reveal .reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity .7s cubic-bezier(.2, .6, .2, 1), transform .7s cubic-bezier(.2, .6, .2, 1);
}
.js-reveal .reveal.in { opacity: 1; transform: none; }
.js-reveal :is(.creds, .linkcards, .rates, .quotes, .cols) > .reveal:nth-child(2) { transition-delay: .08s; }
.js-reveal :is(.creds, .linkcards, .rates, .quotes, .cols) > .reveal:nth-child(3) { transition-delay: .16s; }
.js-reveal :is(.creds, .linkcards, .rates, .quotes, .cols) > .reveal:nth-child(4) { transition-delay: .24s; }