/* home.css — styles specific to the home page (index.html).
   Shared design-system rules are in base.css. */

:root {
  /* Preloader (Fourmula) palette — home only, cream bg + ink text */
  --mainbg: #F2EDEB;
  --fonts-100: #221F20;
  --fonts-50: #221F2080;
}

    /* ---------- Preloader (Fourmula) ---------- */

    html.is-loading .preloader { opacity: 1; }
    html.is-loading .preloader > * {
      opacity: 0;
      visibility: hidden;
    }

    .preloader {
      position: fixed;
      inset: 0;
      z-index: 9999;
      pointer-events: none;
      background-color: var(--mainbg);
      display: flex;
      flex-flow: column;
      justify-content: space-between;
      align-items: flex-start;
      font-size: clamp(12px, 0.93vw, 24px); /* Fourmula fluid scale, em-based below */
      padding: 2em;
      color: var(--fonts-100);
      font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    }

    .preloader > * { will-change: opacity, filter; }

    .preloader__number {
      font-size: 5.5em;
      line-height: 0.94;
      font-weight: 400;
      letter-spacing: -0.03em;
      color: var(--fonts-100);
    }
    /* Returning-visitor wordmark: brand serif instead of the big counter */
    .preloader__number--name {
      font-family: var(--serif);
      font-size: 3em;
      letter-spacing: -0.01em;
    }

    .preloader__wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
    }

    /* wordmark — exactly the same style as the nav logo (.header__logo) */
    .preloader__logo {
      color: var(--fonts-100);
      font-family: var(--sans);
      font-size: 14px;
      letter-spacing: 0.02em;
      line-height: 1;
    }

    .preloader__loader__wrap {
      width: 3.5em;
      height: 3.5em;
      color: var(--fonts-100);
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }

    .preloader__loader {
      width: 3.5em;
      height: 3.5em;
      display: flex;
      justify-content: center;
      align-items: center;
      animation: spinStep 1s steps(8) infinite;
    }
    .preloader__loader svg { width: 100%; height: 100%; }

    @keyframes spinStep {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }

    .preloader__images__wrap {
      position: absolute;
      inset: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      pointer-events: none;
    }

    .preloader__images {
      position: relative;
      width: 16em;
      height: 24em;
      font-size: clamp(12px, 0.93vw, 24px);
    }

    .preloader__images-in {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    @media (max-width: 767px) {
      .preloader { font-size: clamp(14px, 4.1vw, 18px); }
      .preloader__loader,
      .preloader__loader__wrap {
        width: 2.5em;
        height: 2.5em;
      }
      .preloader__images {
        width: 10.5em;
        height: 16em;
      }
      .preloader__number { letter-spacing: -0.015em; }
    }


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

    .header {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 31;
      mix-blend-mode: difference;
      filter: invert(1);
      transform: translateY(0);
      transition: transform 1s var(--ease-soft);
    }
    .header.is-hidden { transform: translateY(-110%); }
    .header__main {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: clamp(16px, calc(16px + 8 * (var(--vp) - 320px) / 448), 24px);
    }
    .header a { color: var(--ink); text-decoration: none; }
    .header__logo {
      font-family: var(--sans);
      font-size: 14px;
      letter-spacing: 0.02em;
    }
    .header__nav {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .header__nav ul {
      display: flex;
      align-items: center;
      justify-content: space-between;
      list-style: none;
      gap: 3.2rem;
    }
    .header__nav li {
      position: relative;
    }
    /* underline scales in from center on hover */
    .header__nav li::after {
      content: '';
      position: absolute;
      bottom: -0.1rem;
      left: 50%;
      transform: translateX(-50%) scaleX(0);
      width: 100%;
      height: 0.1rem;
      background-color: var(--ink);
      transition: transform 0.4s var(--ease-inout);
      transform-origin: 0 0;
    }
    .header__nav li:hover::after {
      transform: translateX(-50%) scaleX(1);
    }
    /* dot marking items with a submenu — fades in after the preloader */
    .header__nav li.has-dot::before {
      content: '';
      position: absolute;
      top: 0.5rem;
      right: -0.8rem;
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 50%;
      background-color: var(--ink);
      opacity: 0;
      transition: opacity 1s cubic-bezier(0.22, -0.03, 1, 1) 0.8s;
    }
    html:not(.is-loading) .header__nav li.has-dot::before { opacity: 1; }
    .header__nav a {
      position: relative;
      display: inline-flex;
      overflow: hidden;
      text-decoration: none;
    }
    .header__nav .nav__text {
      font-size: 1.3rem;
      line-height: 1.1;
      text-transform: uppercase;
      white-space: nowrap;
      transition: transform 0.4s var(--ease-snap);
    }
    .header__nav .nav__text:nth-child(2) {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform: translateY(-100%);
    }
    .header__nav a:hover .nav__text:nth-child(1) { transform: translateY(100%); }
    .header__nav a:hover .nav__text:nth-child(2) { transform: translateY(0); }
    .header__loc {
      display: grid;
      font-size: 14px;
      line-height: 1;
      letter-spacing: -0.01em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    @media (max-width: 1023px) {
      .header__nav { display: none; }
    }


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

    .hero {
      position: relative;
      height: 100svh;
      overflow: hidden;
    }
    .hero__line {
      position: absolute;
      bottom: 0; left: 0;
      width: calc(100% - 2 * var(--side));
      margin-left: var(--side);
      height: 1px;
      background-color: var(--ink);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 1.5s var(--ease-soft);
    }
    .hero__line.is-visible { transform: scaleX(1); }

    .hero__letters {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      user-select: none;
    }
    .hero__letter {
      position: absolute;
      top: 0; left: 0;
      font-family: var(--serif);
      font-weight: 400;
      line-height: 1;
      color: var(--ink);
      will-change: transform;
      visibility: hidden;
    }

    .hero__content {
      position: relative;
      z-index: 1;
    }
    /* top spacer: 200px on mobile easing down to 176px on wide screens */
    .hero__spacer {
      display: block;
      min-width: 0.1rem;
      min-height: clamp(176px, calc(200px - 24 * (var(--vp) - 375px) / 1425), 200px);
    }
    .hero__title-wrap { position: relative; }
    @media (min-width: 64rem) {
      .hero__heading { grid-column: 7 / span 6; }
    }
    @media (min-width: 125rem) {
      .hero__heading { grid-column: 8 / span 5; }
    }
    .hero__title {
      max-width: 17ch;
      font-family: var(--serif);
      font-weight: 400;
      line-height: 0.95;
      letter-spacing: -0.03em;
      font-size: clamp(42px, calc(var(--vp) / 1920 * 88), 88px);
    }
    .hero__indent { display: inline-block; padding-left: 1.7em; }
    /* "(I AM)" label sits inside the first-line indent; the wrapper is sized
       at the H1's font-size with height 1em so the small text centers
       vertically against the first line of the heading. */
    .hero__label {
      position: absolute;
      top: 0;
      left: 0;
      height: 1em;
      display: flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
      padding-left: 1.8rem;
      line-height: 1;
      font-size: clamp(42px, calc(var(--vp) / 1920 * 88), 88px);
    }
    .hero__label-in {
      font-size: 12px;
      font-family: var(--sans);
      font-weight: 700;
      line-height: 1.2;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .hero__label .bracket {
      opacity: 0;
      transition: opacity 0.8s var(--ease-inout) 1s;
    }
    .hero__label .label-text {
      display: inline-block;
      opacity: 0;
      transform: scaleX(0.8);
      transform-origin: left center;
      transition: opacity 1s var(--ease-soft) 0.5s, transform 1s var(--ease-soft) 0.5s;
    }
    html:not(.is-loading) .hero__label .bracket { opacity: 1; }
    html:not(.is-loading) .hero__label .label-text { opacity: 1; transform: scaleX(1); }
    .hero__title-reveal {
      display: block;
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 1.5s var(--ease-soft) 0.2s, transform 1.5s var(--ease-soft) 0.2s;
    }
    html:not(.is-loading) .hero__title-reveal { opacity: 1; transform: translateY(0); }

    /* ---------- Poetic intro: serif headline with inline images ----------
       Editorial layout: small tracked labels in the corners (top + bottom),
       and a large centred serif sentence with small landscape photos sitting
       inline between the words. Middle phrase in italic. */

    .poetic {
      /* uniform section spacing — longhand so .container side margins survive */
      margin-top: 100px;
      margin-bottom: 100px;
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }
    .poetic__labels {
      display: flex;
      justify-content: center;
      text-align: center;
      text-transform: uppercase;
      font-size: 12px;
      letter-spacing: 0.15em;
      line-height: 1.6;
    }
    .poetic__label { white-space: nowrap; }

    .poetic__title {
      margin: clamp(70px, calc(70px + 90 * (var(--vp) - 375px) / 1425), 160px) 0;
      text-align: center;
      font-family: var(--serif);
      font-weight: 400;
      line-height: 1.22;
      letter-spacing: -0.01em;
      font-size: clamp(34px, calc(var(--vp) / 1920 * 80), 80px);
    }
    .poetic__title em { font-style: italic; }
    .poetic__line { display: block; }
    /* stagger the line reveals */
    .poetic__line:nth-child(2) { transition-delay: 0.15s; }
    .poetic__line:nth-child(3) { transition-delay: 0.3s; }

    /* small photo sitting inline in the text row; grows open on reveal */
    .poetic__media {
      display: inline-block;
      overflow: hidden;
      width: 0;
      height: 0.76em;
      margin: 0 0.28em;
      vertical-align: -0.07em;
      transition: width 1.4s var(--ease-soft) 0.5s;
    }
    .poetic__media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .poetic__line.is-visible .poetic__media { width: 1.6em; }
    .poetic__line:nth-child(2).is-visible .poetic__media { transition-delay: 0.65s; }
    .poetic__line:nth-child(3).is-visible .poetic__media { transition-delay: 0.8s; }

    @media (max-width: 767px) {
      .poetic__labels { font-size: 10px; letter-spacing: 0.12em; }
    }


    /* ---------- Pinned media showcase ---------- */

    .showcase {
      position: relative;
      margin: 100px 0; /* uniform section spacing */
    }
    .showcase__media {
      width: 100%;
      height: 100svh;
      object-fit: cover;
      display: block;
    }
    .showcase__overlay {
      position: absolute;
      inset: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 2rem;
    }
    /* row that sizes to the panel, so the timeline can stretch to match it */
    .showcase__inner {
      display: flex;
      align-items: stretch;
      gap: clamp(32px, 5vw, 80px);
    }
    /* cream portrait panel floating on the image — editorial, airy */
    .showcase__panel {
      background: var(--bg);
      color: var(--ink);
      width: clamp(300px, 26vw, 420px);
      padding: clamp(32px, 3vw, 48px) clamp(28px, 2.5vw, 40px);
    }
    .showcase__panel-label {
      display: block;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      margin-bottom: 1.6rem;
    }
    .showcase__panel-list {
      list-style: none;
    }
    .showcase__panel-list li {
      padding: 2.4rem 0;
    }
    .showcase__panel-list li + li {
      border-top: 1px solid rgba(34, 31, 32, 0.15);
    }
    .showcase__panel-org {
      display: block;
      font-family: var(--serif);
      font-size: clamp(18px, calc(var(--vp) / 1920 * 24), 24px);
      line-height: 1.2;
    }
    .showcase__panel-meta {
      display: block;
      margin-top: 0.8rem;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      opacity: 0.6;
    }
    .showcase__panel-cta { margin-top: 1.6rem; }

    /* vertical year timeline beside the panel — the line draws itself in,
       the years fade in one by one (all keyed off the .reveal observer) */
    .showcase__timeline {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-self: stretch;               /* match the panel's height */
      padding: 1rem 0;
      color: var(--bg);
    }
    .showcase__timeline-line {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0.3rem;                      /* centre of the dots */
      width: 1px;
      background: var(--bg);
      transform: scaleY(0);
      transform-origin: top;
      transition: transform 1.6s var(--ease-soft);
    }
    .showcase__timeline.is-visible .showcase__timeline-line { transform: scaleY(1); }
    .showcase__timeline-years {
      list-style: none;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
    }
    .showcase__timeline-years li {
      display: flex;
      align-items: center;
      gap: 1.2rem;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      line-height: 1;
      opacity: 0;
      transform: translateX(-8px);
      transition: opacity 0.8s var(--ease-soft), transform 0.8s var(--ease-soft);
    }
    .showcase__timeline-years li::before {
      content: '';
      width: 0.7rem;
      height: 0.7rem;
      border-radius: 50%;
      background: var(--bg);
      flex-shrink: 0;
    }
    .showcase__timeline.is-visible .showcase__timeline-years li {
      opacity: 1;
      transform: translateX(0);
    }
    /* stagger, following the line as it draws downward */
    .showcase__timeline-years li:nth-child(1) { transition-delay: 0.15s; }
    .showcase__timeline-years li:nth-child(2) { transition-delay: 0.4s; }
    .showcase__timeline-years li:nth-child(3) { transition-delay: 0.65s; }
    .showcase__timeline-years li:nth-child(4) { transition-delay: 0.9s; }
    .showcase__timeline-years li:nth-child(5) { transition-delay: 1.15s; }
    .showcase__timeline-years li:nth-child(6) { transition-delay: 1.4s; }
    @media (max-width: 767px) {
      .showcase__timeline { display: none; }
    }


    /* ---------- Case studies ---------- */

    .work {
      margin-top: 100px;
      margin-bottom: 100px;
      text-align: center;
    }
    .work__head {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      padding-bottom: clamp(24px, calc(24px + 8 * (var(--vp) - 375px) / 1425), 32px);
      text-align: left;
    }
    .work__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
    }
    .work__card {
      text-decoration: none;
      color: var(--ink);
      display: block;
    }
    .work__card-image {
      position: relative;
      overflow: hidden;
      aspect-ratio: 1 / 1.2;
    }
    .work__card-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.8s var(--ease-soft), filter 0.6s var(--ease-soft);
    }
    /* hovering the photo: blur + slight zoom, "View more" fades in centred */
    .work__card-image:hover img {
      transform: scale(1.06);
      filter: blur(10px);
    }
    .work__card-hover {
      position: absolute;
      inset: 0;
      z-index: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      color: var(--bg);
      opacity: 0;
      transition: opacity 0.5s var(--ease-soft);
      pointer-events: none;
    }
    .work__card-image:hover .work__card-hover { opacity: 1; }
    /* small status tag, top-right corner of the cover (stays readable on hover) */
    .work__card-tag {
      position: absolute;
      top: 1rem;
      right: 1rem;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      gap: 0.5em;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      padding: 0.5em 0.9em;
      border-radius: 100px;
      background: var(--bg);
      color: var(--ink);
    }
    .work__card-tag::before {
      content: '';
      width: 0.5em;
      height: 0.5em;
      border-radius: 50%;
      background: currentColor;
    }
    .work__card-details {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 2.4rem;
      gap: 0.8rem;
    }
    .work__card-brand {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
    }
    .work__card-title {
      font-family: var(--serif);
      font-size: clamp(18px, calc(var(--vp) / 1920 * 24), 24px);
      line-height: 1.2;
    }
    @media (max-width: 1023px) {
      .work__grid { grid-template-columns: 1fr; gap: 4.5rem; }
    }


    /* ---------- Design × AI teaser ---------- */

    .ai {
      margin-top: 100px;
      margin-bottom: 100px;
    }
    .ai__label {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      margin-bottom: 3.2rem;
    }
    .ai__statement {
      font-family: var(--serif);
      font-weight: 400;
      line-height: 1;
      letter-spacing: -0.02em;
      font-size: clamp(30px, calc(var(--vp) / 1920 * 56), 56px);
      max-width: 22ch;
    }
    .ai__statement em { font-style: italic; }
    .ai__strip {
      margin-top: 6.4rem;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: clamp(8px, calc(8px + 12 * (var(--vp) - 375px) / 905), 20px);
    }
    .ai__frame {
      position: relative;
      overflow: hidden;
      aspect-ratio: 3 / 4;
    }
    .ai__frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.8s var(--ease-soft);
    }
    .ai__frame:hover img { transform: scale(1.05); }
    .ai__cta { margin-top: 4rem; }
    @media (max-width: 1023px) {
      .ai__strip { grid-template-columns: repeat(2, 1fr); }
    }


    /* ---------- Footer (incl. newsletter) ---------- */

    .footer {
      background-color: var(--bg);
      position: relative;
      margin-top: 100px; /* uniform section spacing */
      padding-top: clamp(24px, calc(24px + 8 * (var(--vp) - 375px) / 1425), 32px);
      border-top: 1px solid var(--ink);
    }
    .footer__heading { margin-top: 4rem; }
    .footer__newsletter {
      position: relative;
      margin-top: 5.4rem;
      max-width: 48rem;
    }
    .footer__newsletter-label {
      font-size: 12px;
      text-transform: uppercase;
      font-weight: 700;
      margin-bottom: 2rem;
      display: block;
    }
    .footer__form { position: relative; }
    .footer__form input {
      appearance: none;
      display: block;
      width: 100%;
      color: currentColor;
      border: none;
      background-color: transparent;
      font-family: var(--sans);
      font-weight: 400;
      line-height: 1.4;
      font-size: clamp(18px, calc(var(--vp) / 1920 * 20), 20px);
      padding-bottom: 1.6rem;
      border-bottom: 1px solid var(--ink);
      outline: none;
    }
    .footer__form input::placeholder { color: var(--ink); opacity: 0.5; }
    .footer__form button {
      position: absolute;
      right: 0;
      top: 0.6rem;
      background-color: transparent;
      border: none;
      overflow: hidden;
      cursor: pointer;
      font-size: 20px;
      color: var(--ink);
    }
    .footer__menus {
      display: grid;
      grid-column-gap: 2rem;
      grid-template-columns: repeat(7, 1fr);
      margin-top: 5.4rem;
    }
    .footer__menu {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
    }
    .footer__menu-title {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      margin-bottom: 0.8rem;
    }
    .footer__menu a {
      color: var(--ink);
      text-decoration: none;
      font-size: 14px;
      text-transform: uppercase;
      line-height: 1.6;
      opacity: 0.7;
      transition: opacity 0.3s;
    }
    .footer__menu a:hover { opacity: 1; }
    .footer__contact { grid-column: span 2; }
    .footer__contact-email {
      font-family: var(--serif);
      font-size: clamp(20px, calc(var(--vp) / 1920 * 28), 28px);
      color: var(--ink);
      text-decoration: none;
    }
    .footer__contact-addr {
      margin-top: 1.2rem;
      font-size: 14px;
      text-transform: uppercase;
      line-height: 1.6;
      opacity: 0.7;
    }
    .footer__bottom {
      padding: 3.2rem 0;
      margin-top: 5.4rem;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: clamp(8px, calc(8px + 16 * (var(--vp) - 375px) / 1425), 24px);
      font-size: 12px;
      text-transform: uppercase;
      border-top: 1px solid var(--ink);
    }
    .footer__bottom nav { display: flex; gap: 2.4rem; }
    .footer__bottom a { color: var(--ink); text-decoration: none; opacity: 0.7; }
    .footer__bottom a:hover { opacity: 1; }
    @media (max-width: 1023px) {
      .footer__menus { grid-template-columns: repeat(2, 1fr); grid-row-gap: 3.2rem; }
      .footer__contact { grid-column: span 2; }
    }


    /* ---------- Scroll timeline sidebar ---------- */

    .scroll-timeline {
      position: fixed;
      right: 2rem;
      top: 50%;
      transform: translateY(-50%);
      z-index: 100;
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 80vh;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s;
    }
    .scroll-timeline.visible { opacity: 1; }

    /* section name rides along the bar at the current scroll position */
    .st-label {
      position: absolute;
      right: calc(100% + 14px);
      font-family: var(--sans);
      font-size: 1.3rem;
      line-height: 1.1;
      text-transform: uppercase;
      color: var(--ink);
      white-space: nowrap;
      letter-spacing: 0.02em;
    }

    .scroll-pct {
      position: fixed;
      left: 2rem;
      top: 50%;
      transform: translateY(-50%);
      z-index: 100;
      font-family: var(--sans);
      font-size: 1.3rem;
      line-height: 1.1;
      text-transform: uppercase;
      color: var(--ink);
      letter-spacing: 0.02em;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.4s;
    }
    .scroll-pct.visible { opacity: 1; }

    .st-bar {
      position: relative;
      width: 2px;
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .st-seg {
      flex: 1;
      position: relative;
      background: rgba(34, 31, 32, 0.12);
      cursor: pointer;
      pointer-events: auto;
      transform-origin: center;
      transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .st-seg:hover { transform: scaleX(3); }
    .scroll-timeline:not(.visible) .st-seg { pointer-events: none; }
    /* widen the hit area so a 2px bar is easy to click */
    .st-seg::before {
      content: '';
      position: absolute;
      inset: 0 -10px;
    }

    .st-seg-fill {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 0%;
      background: var(--ink);
    }

    @media (max-width: 1023px) {
      .scroll-timeline,
      .scroll-pct { display: none; }
    }