/* ═══════════════════════════════════════════════════════════════
   1-on-1 Coaching — Coach Jovanni, Abu Dhabi
   ---------------------------------------------------------------
   Direction: TIME IS THE MATERIAL. His whole offer is a number —
   four hours out of your 168, and thirty-one weeks to change a
   body. So time is what the page draws: a week with four sessions
   lit in it, and a measured span between every before and after.
   Everything else stays quiet.

   Three chapters — ink, limestone, ink. The dark bookends hold him
   and the ask; the light middle is for reading. Archivo on its
   WIDTH axis for display (expanded, not the condensed face every
   gym site uses), Newsreader for prose — his clients are lawyers
   and consultants, so the page should read as counsel, not gym —
   and Plex Mono only where there are figures or hours.

   This file is self-contained: index.html keeps site.css.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── ground: ink chapter ───────────────────────────────── */
  --ink:        #101216;   /* the dark chapters */
  --ink-raised: #191C21;   /* the form panel sitting on it */
  --ink-rule:   #2A2E34;
  --on-ink:     #E7E4DD;
  --on-ink-dim: #9BA1A7;   /* 8.1:1 on --ink */

  /* ── ground: limestone chapter ─────────────────────────── */
  --stone:        #E7E4DD;  /* cooler and greyer than a cream */
  --stone-deep:   #DBD7CE;
  --stone-rule:   #C9C4B9;
  --on-stone:     #14161A;
  --on-stone-dim: #565B60;  /* 6.6:1 on --stone */

  /* ── one accent hue, two values ────────────────────────── */
  --pine: #1C5A44;   /* the green off the poster in his own gym */
  --jade: #77C2A2;   /* the same hue lifted, for the ink chapters */
  --bad:  #C0705F;   /* errors live only on ink */
  --bad-stone: #8C3A2C;

  /* ── type ──────────────────────────────────────────────── */
  --t-display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --t-body:    "Newsreader", Iowan Old Style, Georgia, serif;
  --t-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wd: 116;   /* the display width axis — expanded */

  --f-micro: .6875rem;                       /* mono labels        */
  --f-body:  1.125rem;                       /* prose              */
  --f-lede:  clamp(1.1875rem,1.6vw,1.375rem);
  --f-say:   clamp(1.375rem,2.2vw,1.75rem);  /* someone speaking   */
  --f-h2:    clamp(1.875rem,3.6vw,2.875rem);
  --f-h1:    clamp(2.375rem,5.4vw,4.375rem);

  /* ── space ─────────────────────────────────────────────── */
  --s1:.5rem; --s2:.75rem; --s3:1rem;  --s4:1.5rem;
  --s5:2rem;  --s6:3rem;   --s7:4.5rem; --s8:7rem;

  --gut:1.5rem;
  --maxw:76rem;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:6rem;     /* clears the sticky masthead */
  background:var(--ink);
}

body{
  margin:0;
  background:var(--stone);
  color:var(--on-stone);
  font-family:var(--t-body);
  font-size:var(--f-body);
  line-height:1.6;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

/* the form is a grid, and a display value beats the UA's [hidden]
   rule — site.js hides it by attribute, so say so explicitly */
[hidden]{ display:none !important; }

:focus-visible{
  outline:2px solid var(--jade);
  outline-offset:3px;
  border-radius:1px;
}
.stone :focus-visible,
.who :focus-visible,.proof :focus-visible,.says :focus-visible,
.how :focus-visible,.faq :focus-visible{ outline-color:var(--pine); }

/* the page is laid out against one measure; the hero is the one
   deliberate exception (its plate runs to the viewport edge) */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }

/* grid items default to a min-content floor, which a form control or
   a long word can push past the measure; every grid on this page is
   allowed to shrink instead */
.hero > *,.book-grid > *,.who-grid > *,.closer-grid > *,
.proof-grid > *,.quotes > *,.steps > *,.faq dl > *,
.week-days > *,.radio-pair > *,.pair > *{ min-width:0; }


/* ══════════════  atoms  ══════════════ */

.label,.eyebrow,.trust,.case-meta,.example-note,.week-title,
.week-sum,.step-n,.foot-in,.cred-k,.span,.hero-act-note,
.masthead-nav,.field label,.radio-set legend{
  font-family:var(--t-mono);
  font-size:var(--f-micro);
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-feature-settings:"tnum";
}

/* a section label is a bracket, not a full rule — the rule runs
   only as far as the words, so the page stays open */
.label{
  display:flex; align-items:center; gap:var(--s3);
  margin:0 0 var(--s5);
  line-height:1.4;
  color:var(--on-stone-dim);
}
.label::after{
  content:""; flex:1 1 auto; height:1px;
  background:var(--stone-rule);
  max-width:5rem;
}

h1,h2,h3{
  font-family:var(--t-display);
  font-variation-settings:"wdth" var(--wd),"wght" 600;
  letter-spacing:-.03em;
  line-height:1.04;
  margin:0;
  text-wrap:balance;
}


/* ══════════════  masthead  ══════════════ */

.masthead{
  position:sticky; top:0; z-index:40;
  background:var(--ink);
  color:var(--on-ink);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
}
.masthead.is-stuck{ border-bottom-color:var(--ink-rule); }

.masthead-in{
  max-width:var(--maxw); margin-inline:auto;
  padding:var(--s3) var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
}
.wordmark{
  font-family:var(--t-display);
  font-variation-settings:"wdth" var(--wd),"wght" 600;
  font-size:.9375rem; letter-spacing:-.01em;
  text-decoration:none;
}
.masthead-nav{ display:flex; align-items:center; gap:var(--s4); }
.masthead-nav a{
  color:var(--on-ink-dim);
  text-decoration:none;
  padding:.55rem 0;
  transition:color .18s var(--ease);
}
.masthead-nav a:hover{ color:var(--on-ink); }
.masthead-cta{
  color:var(--ink) !important;
  background:var(--jade);
  padding:.55rem .875rem !important;
  border-radius:2px;
  transition:background .18s var(--ease);
}
.masthead-cta:hover{ background:#8FD3B6; }
@media (max-width:34rem){
  .masthead-nav a:not(.masthead-cta){ display:none; }
}


/* ══════════════  chapter one — hero  ══════════════ */

.hero{
  background:var(--ink);
  color:var(--on-ink);
  position:relative;
  /* content aligns to the measure on the left; on wide screens the
     plate runs off the right edge. 100% here is the viewport minus
     the scrollbar, so this never causes horizontal overflow. */
  --pad-x:max(var(--gut),calc((100% - var(--maxw)) / 2));
  padding:var(--s6) var(--pad-x) var(--s7);
  display:grid;
  gap:var(--s6);
}

@media (min-width:60rem){
  .hero{
    grid-template-columns:minmax(0,1fr) minmax(17rem,23rem);
    column-gap:var(--s7);
    align-items:center;
    padding-top:var(--s6);
    padding-bottom:var(--s8);
  }
}
@media (min-width:82rem){
  .hero{ padding-right:0; column-gap:var(--s8); }
}

.eyebrow{
  display:block;
  margin:0 0 var(--s4);
  color:var(--jade);
}
.eyebrow::before{
  content:""; display:inline-block;
  width:1.75rem; height:1px; margin-right:.75rem;
  vertical-align:.28em;
  background:var(--jade);
}

/* the headline is set to break in three deliberate lines, but only
   where there is room for them; narrow screens wrap on their own */
.brk{ display:none; }
@media (min-width:48rem){ .brk{ display:inline; } }

h1{
  font-size:var(--f-h1);
  font-variation-settings:"wdth" var(--wd),"wght" 650;
  letter-spacing:-.035em;
}

.lede{
  margin:var(--s4) 0 0;
  max-width:34rem;
  font-size:var(--f-lede);
  line-height:1.45;
  color:var(--on-ink);
}
.lede-2{
  margin:var(--s2) 0 0;
  max-width:34rem;
  font-size:1rem;
  line-height:1.55;
  color:var(--on-ink-dim);
}

/* ── the signature: a week, with the four hours lit ───────── */

.week{
  margin:var(--s5) 0 0;
  max-width:27rem;
  padding-top:var(--s3);
  border-top:1px solid var(--ink-rule);
}
.week-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3);
  color:var(--on-ink-dim);
}
.week-title{ color:var(--on-ink); }

.week-days{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:.375rem;
  margin-top:var(--s4);
}
.day{ display:grid; gap:.625rem; }

/* a day is a column of hours, drawn as faintly as it can still be
   read; a session is the one solid mark on it, sitting at the hour
   it would actually happen — two mornings, two evenings */
.day i{
  display:block;
  position:relative;
  width:min(2.5rem,100%);
  margin-inline:auto;
  height:5.25rem;
  background:rgba(231,228,221,.045);
}
.day.is-on i{ background:rgba(231,228,221,.075); }
.day.is-on i::after{
  content:"";
  position:absolute; left:0; right:0;
  top:var(--at); height:24%;
  background:var(--jade);
  transform:scaleY(0);
  transform-origin:top;
}
.day span{
  font-family:var(--t-mono);
  font-size:.625rem; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase;
  color:#7E858C;
  text-align:center;
}
.day.is-on span{ color:var(--on-ink); }

.week-note{
  margin:var(--s4) 0 0;
  font-size:.9375rem;
  line-height:1.5;
  color:var(--on-ink-dim);
  max-width:29rem;
}

/* ── hero action ───────────────────────────────────────────── */

.hero-act{
  margin:var(--s5) 0 0;
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3) var(--s4);
}
.hero-act-note{ color:var(--on-ink-dim); letter-spacing:.06em; }

.btn{
  appearance:none; cursor:pointer;
  display:inline-block;
  padding:1.0625rem 1.75rem;
  background:var(--jade); color:var(--ink);
  border:1px solid var(--jade);
  border-radius:2px;
  font-family:var(--t-display);
  font-variation-settings:"wdth" 106,"wght" 600;
  font-size:.875rem;
  letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap;
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.btn:hover{ background:#8FD3B6; border-color:#8FD3B6; }
/* the ring would be jade on jade otherwise */
.btn:focus-visible,.masthead-cta:focus-visible,.cta-bar:focus-visible{ outline-color:var(--on-ink); }
.btn.is-wide{ width:100%; text-align:center; }

/* ── the plate: mono, so he joins the client photographs ──── */

.hero-plate{
  position:relative;
  align-self:stretch;
  min-height:22rem;
  background:#0B0D10;
  overflow:hidden;
}
.hero-plate img{
  width:100%; height:100%;
  object-fit:cover; object-position:50% 16%;
  filter:grayscale(1) contrast(1.1) brightness(.86);
}
/* scrim: lets the plate sit in the chapter instead of on top of it */
.hero-plate::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to bottom,rgba(16,18,22,.14) 0%,rgba(16,18,22,0) 34%,rgba(16,18,22,.55) 100%);
}
@media (max-width:60rem){
  .hero-plate{ aspect-ratio:4/3; min-height:0; }
  .hero-plate img{ object-position:50% 14%; }
}


/* ══════════════  booking band  ══════════════ */

.book{
  background:var(--ink);
  color:var(--on-ink);
  padding-bottom:var(--s8);
}
.book-grid{ display:grid; gap:var(--s6); }
@media (min-width:60rem){
  .book-grid{ grid-template-columns:1fr minmax(22rem,26rem); gap:var(--s8); align-items:start; }
}

.book-copy h2{
  font-size:var(--f-h2);
  padding-top:var(--s5);
  border-top:1px solid var(--ink-rule);
}
.book-sub{
  margin:var(--s3) 0 0;
  max-width:30rem;
  font-size:var(--f-lede);
  line-height:1.5;
  color:var(--on-ink-dim);
}

.ticks{
  list-style:none; margin:var(--s5) 0 0; padding:0;
  max-width:30rem;
}
.ticks li{
  position:relative;
  padding:var(--s3) 0 var(--s3) 1.75rem;
  border-top:1px solid var(--ink-rule);
  line-height:1.45;
}
.ticks li:last-child{ border-bottom:1px solid var(--ink-rule); }
.ticks li::before{
  content:""; position:absolute; left:0; top:1.4em;
  width:.5rem; height:1px; background:var(--jade);
}

/* ── the form (used twice: here and in the closer) ────────── */

.book-form{
  background:var(--ink-raised);
  border:1px solid var(--ink-rule);
  border-radius:3px;
  padding:var(--s5);
}
@media (min-width:60rem){
  .book-form{ position:sticky; top:5.5rem; }
}
.closer-grid .book-form{ position:static; }

.grab{ display:grid; gap:var(--s4); }

.field label,.radio-set legend{
  display:block; padding:0;
  margin-bottom:.5rem;
  color:var(--on-ink-dim);
}
.field input{
  width:100%;
  padding:.9375rem 1rem;
  background:#0E1014;
  border:1px solid #33383F;
  border-radius:2px;
  color:var(--on-ink);
  font-family:var(--t-body); font-size:1.0625rem;
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.field input::placeholder{ color:#6B7178; }
.field input:hover{ border-color:#454B53; }
.field input:focus{ background:#0B0D10; border-color:var(--jade); outline:none; }
.field input.is-bad{ border-color:var(--bad); }

.radio-set{ margin:0; padding:0; border:0; min-inline-size:0; }
.radio-pair{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.radio{ position:relative; display:block; cursor:pointer; }
.radio input{
  position:absolute; inset:0; opacity:0;
  width:100%; height:100%; margin:0; cursor:pointer;
}
.radio span{
  display:block;
  padding:.875rem .625rem;
  background:#0E1014;
  border:1px solid #33383F;
  border-radius:2px;
  text-align:center;
  font-family:var(--t-display);
  font-variation-settings:"wdth" 100,"wght" 500;
  font-size:.9375rem;
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.radio:hover span{ border-color:#454B53; }
.radio input:checked + span{ background:var(--jade); border-color:var(--jade); color:var(--ink); }
.radio input:focus-visible + span{ outline:2px solid var(--jade); outline-offset:3px; }
.radio-set.is-bad span{ border-color:var(--bad); }

.err{
  margin:.5rem 0 0;
  font-size:.9375rem;
  color:var(--bad);
}
.trust{
  margin:0;
  text-transform:none; letter-spacing:.05em;
  font-size:.6875rem; line-height:1.6;
  color:var(--on-ink-dim);
}

.sent h3{
  margin:0;
  font-size:1.75rem;
  color:var(--jade);
}
.sent p{ margin:var(--s2) 0 0; color:var(--on-ink-dim); }


/* ══════════════  chapter two — limestone  ══════════════ */

.who,.proof,.says,.how,.faq{ background:var(--stone); }
.who{ padding:var(--s8) 0 var(--s7); }
.proof,.says,.how{ padding:0 0 var(--s8); }
.faq{ padding:0 0 var(--s8); }

/* ── who ───────────────────────────────────────────────────── */

.who-grid{ display:grid; gap:var(--s6); }
@media (min-width:60rem){
  .who-grid{ grid-template-columns:minmax(0,1fr) 22rem; column-gap:var(--s7); align-items:start; }
}

.who-body{
  margin:0;
  max-width:34rem;
  font-size:var(--f-say);
  line-height:1.42;
  text-wrap:pretty;
}
/* the record as a ledger: what he holds on the left, what it is on
   the right — four rows, because there are four things */
.creds{
  list-style:none;
  margin:0; padding:0;
  border-top:1px solid var(--stone-rule);
}
.creds li{
  display:flex; gap:var(--s3); align-items:baseline;
  padding:.6875rem 0;
  border-bottom:1px solid var(--stone-rule);
  font-family:var(--t-mono);
  font-size:.6875rem; line-height:1.5; letter-spacing:.04em;
  color:var(--on-stone-dim);
}
.cred-k{
  flex:0 0 4.25rem;
  text-transform:none; letter-spacing:.06em;
  color:var(--pine);
}

/* ── proof ─────────────────────────────────────────────────── */

.proof-grid{ display:grid; gap:var(--s7); }
@media (min-width:52rem){ .proof-grid{ grid-template-columns:1fr 1fr; gap:var(--s6); } }

.case{ margin:0; }
.pair{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--stone-rule); }
.pair img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  background:var(--stone-deep);
}

/* the same measure as the week strip, applied to a person: the
   honest number here is how long it took */
.span{
  display:flex; align-items:center; gap:.625rem;
  margin-top:.75rem;
  color:var(--on-stone-dim);
  font-size:.625rem;
}
.span-rule{
  flex:1 1 auto; height:1px;
  background:var(--stone-rule);
  position:relative;
  transform:scaleX(0);
}
.span-rule:first-of-type{ transform-origin:left; }
.span-rule:last-of-type{ transform-origin:right; }
.span-mid{ color:var(--pine); white-space:nowrap; }
.span-end{ white-space:nowrap; }

.case-stat{
  margin:var(--s4) 0 0;
  font-family:var(--t-display);
  font-variation-settings:"wdth" var(--wd),"wght" 600;
  font-size:clamp(1.5rem,3vw,2.125rem);
  letter-spacing:-.03em;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.case-stat em{ font-style:normal; color:var(--pine); }
.case-meta{ margin:.5rem 0 0; color:var(--on-stone-dim); }

.note{
  margin:var(--s6) 0 0;
  padding-top:var(--s3);
  border-top:1px solid var(--stone-rule);
  max-width:44rem;
  font-size:.9375rem; line-height:1.55;
  color:var(--on-stone-dim);
}

/* ── what clients say ──────────────────────────────────────── */

.says-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s3) var(--s4); }
.says-head .label{ margin-bottom:var(--s5); }
.example-note{
  margin:0 0 var(--s5);
  color:var(--on-stone-dim);
  letter-spacing:.08em;
}
.example-note::before{ content:"● "; color:var(--bad-stone); font-size:.5rem; vertical-align:.2em; }

.quotes{ display:grid; gap:var(--s5); }
@media (min-width:56rem){ .quotes{ grid-template-columns:repeat(3,1fr); gap:var(--s6); } }

.quote{ margin:0; padding-top:var(--s3); border-top:1px solid var(--stone-rule); }
.quote p{
  margin:0;
  font-style:italic;
  font-size:1.125rem; line-height:1.5;
  text-wrap:pretty;
}
.quote cite{
  display:block; margin-top:var(--s3);
  font-family:var(--t-mono); font-size:var(--f-micro); font-weight:500;
  letter-spacing:.09em; text-transform:uppercase;
  font-style:normal; color:var(--on-stone-dim);
}

/* ── how it works ──────────────────────────────────────────── */

.steps{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
@media (min-width:52rem){ .steps{ grid-template-columns:repeat(3,1fr); gap:var(--s6); } }

.steps li{
  padding:var(--s4) 0 0;
  border-top:1px solid var(--stone-rule);
}
.step-n{ display:block; color:var(--pine); }
.steps h3{
  margin:var(--s3) 0 0;
  font-size:1.25rem;
  font-variation-settings:"wdth" 106,"wght" 600;
  letter-spacing:-.02em;
}
.steps p{ margin:var(--s2) 0 0; color:var(--on-stone-dim); line-height:1.55; }

/* ── questions ─────────────────────────────────────────────── */

.faq dl{ margin:0; display:grid; gap:0; }
@media (min-width:52rem){ .faq dl{ grid-template-columns:1fr 1fr; column-gap:var(--s7); } }
.faq dl > div{ padding:var(--s4) 0; border-top:1px solid var(--stone-rule); }
.faq dt{
  font-family:var(--t-display);
  font-variation-settings:"wdth" 104,"wght" 600;
  font-size:1.0625rem; letter-spacing:-.015em;
  margin-bottom:.375rem;
}
.faq dd{ margin:0; color:var(--on-stone-dim); line-height:1.55; }


/* ══════════════  chapter three — closer  ══════════════ */

.closer{
  background:var(--ink);
  color:var(--on-ink);
  padding:var(--s8) 0 var(--s7);
}
.closer .label{ color:var(--on-ink-dim); }
.closer .label::after{ background:var(--ink-rule); }

.closer-grid{ display:grid; gap:var(--s6); }
@media (min-width:60rem){
  .closer-grid{ grid-template-columns:1fr minmax(22rem,26rem); gap:var(--s8); align-items:center; }
}
.closer h2{ font-size:var(--f-h2); }
.closer-sub{
  margin:var(--s4) 0 0;
  max-width:28rem;
  font-size:var(--f-lede); line-height:1.5;
  color:var(--on-ink-dim);
}

.foot{
  background:var(--ink);
  color:#7E858C;
  padding-bottom:var(--s6);
}
.foot-in{
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s6);
  justify-content:space-between;
  padding-top:var(--s4);
  border-top:1px solid var(--ink-rule);
  letter-spacing:.06em;
}
.foot-mark{ color:var(--on-ink-dim); }


/* ══════════════  sticky CTA, small screens  ══════════════ */

.cta-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:none;
  padding:1.0625rem 1rem;
  background:var(--jade); color:var(--ink);
  text-align:center; text-decoration:none;
  font-family:var(--t-display);
  font-variation-settings:"wdth" 106,"wght" 600;
  font-size:.875rem; letter-spacing:.08em; text-transform:uppercase;
  transform:translateY(100%);
  transition:transform .32s var(--ease-out);
}
@media (max-width:52rem){
  .cta-bar:not([hidden]){ display:block; transform:translateY(0); }
  body{ padding-bottom:3.75rem; }
}


/* ══════════════  motion  ══════════════
   Three beats on load — the plate resolves, the words rise, the
   week fills in — then quiet 14px reveals down the page. */

.js [data-lift]{ opacity:0; }
.js [data-reveal]{ opacity:0; }

@media (prefers-reduced-motion:no-preference){

  .js [data-lift]{
    transform:translateY(14px);
  }
  .js .hero-plate[data-lift]{ transform:none; }
  .js .hero-plate[data-lift] img{ transform:scale(1.05); }

  body.is-ready [data-lift]{
    animation:lift .85s var(--ease-out) both;
    animation-delay:calc(var(--i,0) * 70ms);
  }
  body.is-ready .hero-plate[data-lift]{
    animation:plate 1.1s var(--ease-out) both;
  }
  body.is-ready .hero-plate[data-lift] img{
    animation:plate-img 1.6s var(--ease-out) both;
  }

  /* the week fills a block at a time, after the words have settled */
  body.is-ready .day.is-on i::after{
    animation:fill .5s var(--ease-out) both;
    animation-delay:calc(700ms + var(--n,0) * 90ms);
  }

  [data-reveal]{ transform:translateY(14px); }
  [data-reveal].in{
    animation:lift .9s var(--ease-out) both;
    animation-delay:calc(var(--i,0) * 70ms);
  }

  /* the measured span draws itself when the pair comes into view */
  [data-reveal] .span-rule{ transition:transform .8s var(--ease-out) .25s; }
  [data-reveal].in .span-rule{ transform:scaleX(1); }

  @keyframes lift{
    from{ opacity:0; transform:translateY(14px); }
    to  { opacity:1; transform:none; }
  }
  @keyframes plate{
    from{ opacity:0; }
    to  { opacity:1; }
  }
  @keyframes plate-img{
    from{ transform:scale(1.05); }
    to  { transform:none; }
  }
  @keyframes fill{
    from{ transform:scaleY(0); }
    to  { transform:scaleY(1); }
  }
}

/* reduced motion, and the no-JS path: everything is simply there */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js [data-lift],.js [data-reveal]{ opacity:1; transform:none; }
  .day.is-on i::after{ transform:scaleY(1); }
  .span-rule{ transform:scaleX(1) !important; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-delay:0ms !important;
    transition-duration:.001ms !important;
  }
}

html:not(.js) [data-lift],
html:not(.js) [data-reveal]{ opacity:1; transform:none; }
html:not(.js) .day.is-on i::after{ transform:scaleY(1); }
html:not(.js) .span-rule{ transform:scaleX(1); }
html:not(.js) .cta-bar{ display:none !important; }