/* INTRO — giant words, a statement that lights as you read, and four living tiles */
.intro { position: relative; z-index: 3; background: var(--cream); color: var(--ink); padding: clamp(60px, 8vw, 120px) 0 clamp(70px, 9vw, 140px); overflow: hidden; }
.intro__wrap { position: relative; max-width: 1480px; margin: 0 auto; padding: 0 clamp(18px, 3.4vw, 48px); }
.intro .sh { color: var(--ink); }

/* moving word rows */
.intro__words { margin: clamp(22px, 3vw, 44px) 0 clamp(40px, 6vw, 90px); display: flex; flex-direction: column; gap: clamp(2px, .8vw, 12px); user-select: none; }
.intro__row { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 36px); white-space: nowrap; width: max-content; will-change: transform; }
.iw { font-size: clamp(3.4rem, 11.5vw, 11.5rem); font-weight: 800; letter-spacing: -.055em; line-height: .9; padding: .04em 0 .1em; }
html.is-rtl .iw { letter-spacing: 0; line-height: 1.1; }
.iw--solid { color: var(--ink); }
.iw--out { color: transparent; -webkit-text-stroke: 2px var(--ink); }
.iw--dot { font-family: var(--dot); font-variation-settings: 'ROND' 100; font-weight: 900; letter-spacing: -.02em; color: #e11d34; }
.ic { flex: none; width: clamp(90px, 13vw, 210px); height: clamp(48px, 6.6vw, 108px); border-radius: 999px; background: #1b1818 var(--img) center / cover no-repeat; transition: transform .6s cubic-bezier(.2, .8, .2, 1), width .6s cubic-bezier(.2, .8, .2, 1); }
.ic--red { background: linear-gradient(140deg, #e11d34, #6a0813); }
.ic--dark { background: #0a0909 radial-gradient(circle, rgba(255, 255, 255, .5) 1.4px, transparent 1.8px) 0 0 / 12px 12px; }
.intro__row:hover .ic { width: clamp(120px, 17vw, 270px); }

/* statement */
.intro__body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 72px); align-items: start; }
.intro__statement { margin: 0; font-size: clamp(1.5rem, 2.7vw, 2.6rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.16; position: sticky; top: 120px; }
html.is-rtl .intro__statement { letter-spacing: 0; line-height: 1.5; }
.intro__statement .iwd { color: rgba(10, 9, 9, .2); transition: color .35s ease; }
.intro__statement .iwd.on { color: var(--ink); }

/* bento */
.intro__bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); }
.tile { position: relative; min-height: clamp(200px, 20vw, 290px); border-radius: clamp(18px, 2vw, 28px); padding: clamp(18px, 1.8vw, 28px); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease; will-change: transform; }
.tile:hover { box-shadow: 0 30px 60px rgba(0, 0, 0, .18); }
.tile__label { margin: 0; font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7; position: relative; z-index: 2; }
html.is-rtl .tile__label { font-family: var(--font); letter-spacing: 0; text-transform: none; font-size: .82rem; }
.tile--num { background: #0a0909; color: #fff; }
.tile__big { margin: 0; display: flex; align-items: baseline; font-family: var(--dot); font-variation-settings: 'ROND' 100; font-weight: 900; font-size: clamp(4rem, 8vw, 8rem); line-height: .85; }
.tile__big i { font-style: normal; color: #ff4a5a; }
.tile__foot { margin: 0; font-size: .86rem; line-height: 1.45; color: rgba(255, 255, 255, .65); max-width: 26ch; }
.tile--ascii { background: linear-gradient(140deg, #c2152a, #6a0813 70%, #3a0309); color: #fff; }
.tile__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tile__title { margin: 0; position: relative; z-index: 2; font-size: clamp(1.3rem, 2vw, 1.9rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; max-width: 12ch; }
html.is-rtl .tile__title { letter-spacing: 0; }
.tile--clock { background: #fff; border: 1px solid rgba(10, 9, 9, .1); }
.tile__clocks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tile__clocks li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(10, 9, 9, .12); padding-top: 10px; }
.tile__clocks .foot-time { font-family: var(--dot); font-variation-settings: 'ROND' 100; font-weight: 900; font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: 1; font-variant-numeric: tabular-nums; }
.tile__clocks em { font-style: normal; font-size: .9rem; opacity: .65; }
.tile--chips { background: #e8e5df; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: inherit; font-size: .82rem; font-weight: 600; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(10, 9, 9, .22); background: transparent; color: var(--ink); cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease; }
.chip:hover, .chip.is-lit { background: #e11d34; border-color: #e11d34; color: #fff; }

@media (max-width: 960px) {
  .intro__body { grid-template-columns: 1fr; }
  .intro__statement { position: static; }
}
@media (max-width: 560px) { .intro__bento { grid-template-columns: 1fr; } .iw--out { -webkit-text-stroke-width: 1.5px; } }
@media (prefers-reduced-motion: reduce) { .intro__row { transform: none !important; } }

/* ── BELIEF index: four lines you can read, point at and open ── */
.intro__words { display: none; }
.bl { position: relative; max-width: 1480px; margin: clamp(26px, 3.4vw, 50px) auto clamp(44px, 6vw, 90px); padding: 0 clamp(18px, 3.4vw, 48px); }
.bl__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid rgba(10, 9, 9, .16); }
.bl__row { position: relative; border-top: 1px solid rgba(10, 9, 9, .16); overflow: hidden;
  opacity: 0; transform: translateY(34px); transition: opacity .8s ease calc(var(--i) * 90ms), transform 1s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * 90ms); }
.bl.is-in .bl__row { opacity: 1; transform: none; }
.bl__row::before { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, #e11d34, #8f0c1a); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s cubic-bezier(.7, 0, .2, 1); z-index: 2; }
html.is-rtl .bl__row::before { transform-origin: 100% 50%; }
.bl__a { position: relative; z-index: 1; transition: opacity .4s ease; display: grid; grid-template-columns: clamp(52px, 6vw, 96px) minmax(0, 1fr) minmax(0, 30ch) 44px; align-items: center; gap: clamp(12px, 2vw, 32px);
  padding: clamp(16px, 2.2vw, 30px) 0; color: var(--ink); text-decoration: none; transition: opacity .4s ease, color .4s ease, padding .5s cubic-bezier(.2, .8, .2, 1); }
.bl__n { font-family: var(--dot); font-variation-settings: 'ROND' 100; font-weight: 900; font-size: clamp(1.1rem, 1.8vw, 1.7rem); opacity: .55; }
.bl__word { position: relative; display: block; line-height: 1; }
.bl__w { display: block; font-size: clamp(2.8rem, 9vw, 9rem); font-weight: 800; letter-spacing: -.055em; line-height: .96; padding: .02em 0 .08em; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
html.is-rtl .bl__w { letter-spacing: 0; line-height: 1.3; font-size: clamp(2.2rem, 6.2vw, 6.2rem); }
.bl__w--dot { position: absolute; inset: 0; font-family: var(--dot); font-variation-settings: 'ROND' 100; font-weight: 900; letter-spacing: -.02em; color: transparent; background: linear-gradient(120deg, #ff5b6b 0%, #e11d34 45%, #8f0c1a 100%); -webkit-background-clip: text; background-clip: text; clip-path: inset(0 100% 0 0); transition: clip-path .6s cubic-bezier(.7, 0, .2, 1); }
html.is-rtl .bl__w--dot { clip-path: inset(0 0 0 100%); }
.bl__txt { font-size: clamp(.84rem, 1vw, .96rem); line-height: 1.5; color: rgba(10, 9, 9, .62); transition: color .4s ease; }
.bl__txt em { display: block; font-style: normal; font-weight: 600; color: inherit; margin-bottom: 4px; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; font-family: var(--mono); }
html.is-rtl .bl__txt em { font-family: var(--font); letter-spacing: 0; text-transform: none; font-size: .85rem; }
.bl__go { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(10, 9, 9, .25); display: grid; place-items: center; font-size: 1.1rem; transition: background .35s ease, color .35s ease, transform .5s cubic-bezier(.2, .8, .2, 1), border-color .35s ease; }
.bl__thumb { display: none; }

.bl__pv { position: fixed; left: 0; top: 0; z-index: 60; width: clamp(200px, 22vw, 320px); aspect-ratio: 4 / 3; margin: 0; border-radius: 8px; overflow: hidden; pointer-events: none; background: #15111a;
  opacity: 0; transform: translate3d(-999px, -999px, 0) scale(.85); transition: opacity .3s ease; box-shadow: 0 30px 70px rgba(0, 0, 0, .35); will-change: transform; }
.bl__pv.is-on { opacity: 1; }
.bl__pv img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (hover: hover) {
  .bl__row:hover::before { transform: scaleX(1); }
  .bl__row:hover .bl__a { padding-inline-start: clamp(10px, 1.4vw, 22px); }
  .bl__row:hover .bl__txt { color: rgba(10, 9, 9, .9); }
  .bl__row:hover .bl__w--dot { clip-path: inset(0 0 0 0); }
  .bl__row:hover .bl__w:not(.bl__w--dot) { opacity: 0; }
  .bl__list:hover .bl__row:not(:hover) .bl__a { opacity: .35; }
  .bl__row:hover .bl__go { background: #0a0909; color: #fff; border-color: #0a0909; transform: rotate(45deg); }
  .bl__row:hover .bl__n { opacity: 1; color: transparent; background: linear-gradient(140deg, #ff5b6b, #e11d34 55%, #8f0c1a); -webkit-background-clip: text; background-clip: text; }
}
@media (max-width: 860px) {
  .bl__pv { display: none; }
  .bl__a { grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 10px 12px; }
  .bl__word { grid-column: 2; } .bl__go { grid-column: 3; grid-row: 1; width: 40px; height: 40px; }
  .bl__txt { grid-column: 2 / 4; } .bl__w { font-size: clamp(1.8rem, 9vw, 3.4rem); }
  .bl__thumb { display: block; grid-column: 2 / 4; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 6px; }
}
@media (prefers-reduced-motion: reduce) { .bl__row { opacity: 1; transform: none; transition: none; } }
.bl__pv:not(.ok) { opacity: 0 !important; }
.bl__pv { background: #e8e5df; }
/* tighter join between the tiles and the numbers section */
.intro { padding-bottom: clamp(24px, 3vw, 44px); }
.intro + .nm { padding-top: clamp(24px, 3vw, 44px); }
.intro + .nm .nm__wrap { row-gap: clamp(20px, 2.4vw, 34px); }