:root {
  --bg: #F7F6F4;
  --ink: #242424;
  --muted: #AFAEAD;
  --number: #E6E6E4;
  --edge-x: clamp(40px, 6.3vw, 128px);
  --edge-y: clamp(36px, 6.8vh, 86px);
  --rail-w: clamp(220px, 18vw, 330px);
  --content-left: clamp(280px, 22.8vw, 365px);
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; background: var(--bg); color: var(--ink); }
html { overscroll-behavior: none; }
body {
  min-height: 100svh;
  overflow: hidden;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.about-page {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background: var(--bg);
}

.about-brand {
  position: fixed;
  z-index: 30;
  left: var(--edge-x);
  bottom: var(--edge-y);
  width: clamp(210px, 18vw, 342px);
  line-height: 0;
}
.about-brand img { display: block; width: 100%; height: auto; }

.about-rail {
  position: fixed;
  z-index: 40;
  inset: 0 0 0 auto;
  width: var(--rail-w);
  height: 100svh;
  pointer-events: none;
}

.rail-toggle {
  position: absolute;
  top: var(--edge-y);
  right: var(--edge-x);
  width: 56px;
  height: 56px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  pointer-events: auto;
  display: grid;
  place-items: center;
}
.rail-toggle__glyph {
  position: relative;
  width: 56px;
  height: 56px;
  transition: transform 260ms cubic-bezier(.22,.61,.36,1), opacity 180ms ease;
}
.rail-toggle__glyph::before,
.rail-toggle__glyph::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: currentColor;
  border-radius: 999px;
  transform: translate(-50%, -50%);
}
.rail-toggle__glyph::before { width: 54px; height: 1.35px; }
.rail-toggle__glyph::after { width: 1.35px; height: 54px; }
.rail-toggle.is-open .rail-toggle__glyph { transform: rotate(45deg); }

.about-nav {
  position: absolute;
  top: clamp(170px, 15vh, 196px);
  right: var(--edge-x);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(10px, 1vh, 16px);
  pointer-events: none;
}
.about-nav a {
  font-size: clamp(21px, 1.55vw, 33px);
  line-height: 1.08;
  font-weight: 300;
  letter-spacing: .015em;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(38px);
  transition: opacity 180ms ease-out, transform 260ms cubic-bezier(.22,.61,.36,1), color 150ms ease;
  transition-delay: calc(var(--i) * 72ms);
}
.about-nav.is-open { pointer-events: auto; }
.about-nav.is-open a { opacity: 1; transform: translateX(0); }
.about-nav:not(.is-open) a { transition-delay: 0ms; transition-duration: 110ms; }
.about-nav a.is-current { color: var(--muted); }
.about-nav a:hover { color: var(--muted); }

.about-language {
  position: absolute;
  right: var(--edge-x);
  bottom: var(--edge-y);
  display: flex;
  gap: .42em;
  align-items: center;
  font-size: clamp(10px, .68vw, 14px);
  line-height: 1;
  letter-spacing: .03em;
  color: var(--muted);
  pointer-events: auto;
}
.about-language a:hover { color: var(--ink); }

.about-stage {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  touch-action: none;
}

.about-panel {
  position: absolute;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(12vw, 0, 0);
}
.about-panel.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}
.about-panel.is-entering-next { animation: aboutInNext 640ms cubic-bezier(.22,.61,.36,1) both; }
.about-panel.is-leaving-next { animation: aboutOutNext 640ms cubic-bezier(.22,.61,.36,1) both; }
.about-panel.is-entering-prev { animation: aboutInPrev 640ms cubic-bezier(.22,.61,.36,1) both; }
.about-panel.is-leaving-prev { animation: aboutOutPrev 640ms cubic-bezier(.22,.61,.36,1) both; }

@keyframes aboutInNext {
  from { opacity: 0; transform: translate3d(12vw, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes aboutOutNext {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(-12vw, 0, 0); }
}
@keyframes aboutInPrev {
  from { opacity: 0; transform: translate3d(-12vw, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes aboutOutPrev {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(12vw, 0, 0); }
}

.about-number {
  position: absolute;
  left: clamp(190px, 14.4vw, 255px);
  top: clamp(80px, 10vh, 110px);
  color: var(--number);
  font-size: clamp(116px, 8.5vw, 178px);
  line-height: .86;
  font-weight: 200;
  letter-spacing: -.06em;
}

.about-copy {
  position: absolute;
  left: var(--content-left);
  top: clamp(272px, 31.5vh, 365px);
  width: min(49vw, 720px);
}
.about-copy h1 {
  margin: 0 0 clamp(48px, 6vh, 72px);
  color: var(--ink);
  font-size: clamp(45px, 4.05vw, 67px);
  line-height: 1.02;
  font-weight: 300;
  letter-spacing: -.035em;
}
.about-body {
  max-width: 690px;
  font-size: clamp(15px, 1.02vw, 18px);
  line-height: 1.18;
  font-weight: 300;
  letter-spacing: -.015em;
}
.about-body p { margin: 0 0 22px; }
.about-body p:last-child { margin-bottom: 0; }

.about-panel--final .about-copy { top: clamp(275px, 31.5vh, 365px); }
.about-panel--final .about-copy h1 { margin-bottom: 55px; }
.about-emoji {
  font-size: clamp(90px, 8vw, 132px);
  line-height: 1;
  width: max-content;
  user-select: none;
}

.about-step {
  position: absolute;
  z-index: 15;
  left: min(72vw, 1120px);
  top: 52%;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.about-step__chevron {
  width: 22px;
  height: 22px;
  border-top: 1.2px solid currentColor;
  border-right: 1.2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 220ms ease, color 180ms ease;
}
.about-step.is-last .about-step__chevron { transform: rotate(-135deg); }
.about-step:hover { color: var(--ink); }

@media (max-width: 1100px) {
  :root { --content-left: 240px; --edge-x: 34px; }
  .about-number { left: 150px; }
  .about-copy { width: 53vw; }
  .about-step { left: 74vw; }
}

@media (max-width: 800px) {
  :root { --edge-x: 24px; --edge-y: 30px; --content-left: 24px; }
  body { overflow: hidden; }
  .about-brand { position: absolute; width: min(52vw, 260px); bottom: 30px; left: 24px; }
  .about-rail { width: 100%; height: auto; inset: 0 0 auto 0; }
  .rail-toggle { top: 28px; right: 24px; width: 50px; height: 50px; }
  .rail-toggle__glyph { width: 44px; height: 44px; }
  .rail-toggle__glyph::before { width: 42px; }
  .rail-toggle__glyph::after { height: 42px; }
  .about-nav { top: 92px; right: 24px; gap: 8px; padding: 14px 0; }
  .about-nav a { font-size: 22px; }
  .about-language { position: fixed; right: 24px; bottom: 24px; font-size: 11px; }
  .about-number { left: 24px; top: 122px; font-size: 92px; }
  .about-copy { left: 24px; top: 245px; width: calc(100vw - 48px); padding-right: 16px; }
  .about-copy h1 { font-size: clamp(38px, 11vw, 54px); margin-bottom: 38px; }
  .about-body { max-width: 100%; font-size: 14px; line-height: 1.22; }
  .about-body p { margin-bottom: 17px; }
  .about-step { left: auto; right: 18px; top: 53%; transform: translateY(-50%); }
  .about-panel--final .about-copy { top: 255px; }
  .about-emoji { font-size: 88px; }
}

@media (max-height: 760px) and (min-width: 801px) {
  .about-number { top: 68px; }
  .about-copy { top: 250px; }
  .about-copy h1 { margin-bottom: 38px; }
  .about-body { font-size: 15px; }
  .about-body p { margin-bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}



.about-emoji-link {
  display: inline-block;
  width: max-content;
  line-height: 0;
  cursor: pointer;
  border-radius: 50%;
  outline: none;
}

.about-emoji {
  display: inline-block;
  transform-origin: 50% 60%;
  will-change: transform, opacity;
  transition: opacity 220ms ease, transform 220ms ease;
}

.about-panel.is-active .about-emoji {
  animation: emojiHeadTilt 1380ms cubic-bezier(.22,.61,.36,1) 180ms both;
}

.about-emoji-link:hover .about-emoji,
.about-emoji-link:focus-visible .about-emoji {
  opacity: .78;
  transform: scale(1.035);
}

.about-emoji-link:focus-visible {
  outline: 1px solid var(--muted);
  outline-offset: 10px;
}

@keyframes emojiHeadTilt {
  0%   { transform: rotate(0deg); }
  18%  { transform: rotate(4deg); }
  42%  { transform: rotate(17deg); }
  62%  { transform: rotate(15deg); }
  82%  { transform: rotate(3deg); }
  100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .about-panel.is-active .about-emoji {
    animation: none !important;
  }
}


/* ================================================================
   MOBILE ABOUT — art-directed from supplied mockup
   ================================================================ */
.about-mobile-arrows {
  display: none;
}

.mobile-editorial-break {
  display: none;
}

@media (max-width: 800px) {
  :root {
    --mobile-about-edge: clamp(22px, 6.35vw, 28px);
    --mobile-about-toggle-size: 50px;
    --mobile-about-toggle-top: calc(env(safe-area-inset-top, 0px) + 58px);
    --mobile-about-content-left: calc(var(--mobile-about-edge) + 2px);
  }

  html,
  body {
    width: 100%;
    min-height: 100%;
    background: var(--bg);
    overflow: hidden;
  }

  .about-page,
  .about-stage {
    width: 100%;
    height: 100svh;
    min-height: 100svh;
    overflow: hidden;
    background: var(--bg);
  }

  .about-stage {
    touch-action: none;
  }

  /* Same top system as the other finished mobile pages. */
  .about-brand {
    position: fixed;
    z-index: 42;
    left: var(--mobile-about-edge);
    top: calc(
      var(--mobile-about-toggle-top)
      + (var(--mobile-about-toggle-size) / 2)
    );
    bottom: auto;
    width: min(35vw, 154px);
    transform: translateY(-50%);
  }

  .about-rail {
    position: fixed;
    z-index: 41;
    inset: 0;
    width: 100%;
    height: 100svh;
    pointer-events: none;
  }

  .rail-toggle {
    position: absolute;
    top: var(--mobile-about-toggle-top);
    right: var(--mobile-about-edge);
    width: var(--mobile-about-toggle-size);
    height: var(--mobile-about-toggle-size);
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
  }

  .rail-toggle__glyph {
    width: 44px;
    height: 44px;
  }

  .rail-toggle__glyph::before {
    width: 43px;
    height: 1.25px;
  }

  .rail-toggle__glyph::after {
    width: 1.25px;
    height: 43px;
  }

  .about-nav {
    top: calc(env(safe-area-inset-top, 0px) + 170px);
    right: var(--mobile-about-edge);
    gap: clamp(14px, 1.75svh, 18px);
    padding: 0;
    align-items: flex-end;
  }

  .about-nav a {
    font-size: clamp(19px, 5.15vw, 23px);
    line-height: 1;
    letter-spacing: .01em;
    transform: translateX(30px);
    transition:
      opacity 360ms ease-out,
      transform 520ms cubic-bezier(.22,.61,.36,1),
      color 150ms ease;
    transition-delay: calc(var(--i) * 125ms);
  }

  .about-nav:not(.is-open) a {
    transition-delay: 0ms;
    transition-duration: 130ms;
  }

  .about-language {
    display: none;
  }

  /* Panels still move horizontally: next enters from right and exits left.
     The mobile distance is larger than desktop so the direction reads clearly. */
  .about-panel {
    transform: translate3d(30vw, 0, 0);
  }

  .about-panel.is-entering-next {
    animation: aboutMobileInNext 620ms cubic-bezier(.22,.61,.36,1) both;
  }

  .about-panel.is-leaving-next {
    animation: aboutMobileOutNext 620ms cubic-bezier(.22,.61,.36,1) both;
  }

  .about-panel.is-entering-prev {
    animation: aboutMobileInPrev 620ms cubic-bezier(.22,.61,.36,1) both;
  }

  .about-panel.is-leaving-prev {
    animation: aboutMobileOutPrev 620ms cubic-bezier(.22,.61,.36,1) both;
  }

  @keyframes aboutMobileInNext {
    from { opacity: 0; transform: translate3d(30vw, 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
  }

  @keyframes aboutMobileOutNext {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to   { opacity: 0; transform: translate3d(-30vw, 0, 0); }
  }

  @keyframes aboutMobileInPrev {
    from { opacity: 0; transform: translate3d(-30vw, 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
  }

  @keyframes aboutMobileOutPrev {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to   { opacity: 0; transform: translate3d(30vw, 0, 0); }
  }

  /* Mockup proportions: number first, then title/body on one common left axis. */
  .about-number {
    left: var(--mobile-about-content-left);
    top: 46.2svh;
    font-size: clamp(76px, 19.5vw, 88px);
    line-height: .8;
    font-weight: 200;
    letter-spacing: -.065em;
  }

  .about-copy,
  .about-panel--final .about-copy {
    left: var(--mobile-about-content-left);
    top: 56.3svh;
    width: min(84vw, 365px);
    max-width: none;
    padding: 0;
  }

  .about-copy h1,
  .about-panel--final .about-copy h1 {
    margin: 0 0 clamp(27px, 3.6svh, 34px);
    font-size: clamp(24px, 6.15vw, 28px);
    line-height: 1.02;
    font-weight: 300;
    letter-spacing: -.03em;
  }

  .about-body {
    width: min(82vw, 350px);
    max-width: none;
    font-size: clamp(9.2px, 2.18vw, 10px);
    line-height: 1.14;
    font-weight: 300;
    letter-spacing: -.012em;
  }

  .about-body br:not(.mobile-editorial-break) {
    display: none;
  }

  .mobile-editorial-break {
    display: inline;
  }

  .about-body p {
    margin: 0 0 clamp(11px, 1.55svh, 15px);
  }

  .about-body p:last-child {
    margin-bottom: 0;
  }

  /* Fourth panel keeps the same typography/location system. */
  .about-panel--final .about-copy {
    top: 57.2svh;
  }

  .about-panel--final .about-copy h1 {
    margin-bottom: 26px;
  }

  .about-emoji {
    font-size: clamp(68px, 17vw, 78px);
  }

  /* Number -> title -> copy appear sequentially on every newly active panel. */
  .about-panel.is-active .about-number {
    animation: aboutMobilePieceIn 360ms cubic-bezier(.22,.61,.36,1) 90ms both;
  }

  .about-panel.is-active .about-copy h1 {
    animation: aboutMobilePieceIn 390ms cubic-bezier(.22,.61,.36,1) 220ms both;
  }

  .about-panel.is-active .about-body,
  .about-panel.is-active .about-emoji-link {
    animation: aboutMobilePieceIn 420ms cubic-bezier(.22,.61,.36,1) 390ms both;
  }

  @keyframes aboutMobilePieceIn {
    from {
      opacity: 0;
      transform: translate3d(0, -10px, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  /* Desktop single chevron is replaced by a clear left/right pair on mobile. */
  .about-step {
    display: none;
  }

  .about-mobile-arrows {
    position: fixed;
    z-index: 25;
    left: var(--mobile-about-content-left);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 76px);
    display: flex;
    align-items: center;
    gap: 28px;
    pointer-events: auto;
  }

  .about-mobile-arrow {
    position: relative;
    width: 48px;
    height: 34px;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .about-mobile-arrow span {
    position: absolute;
    left: 4px;
    top: 50%;
    width: 38px;
    height: 1px;
    background: currentColor;
    transform: translateY(-50%);
  }

  .about-mobile-arrow span::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9px;
    height: 9px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
  }

  .about-mobile-arrow--next span::after {
    right: 0;
    transform: translateY(-50%) rotate(45deg);
  }

  .about-mobile-arrow--prev span::after {
    left: 0;
    transform: translateY(-50%) rotate(-135deg);
  }

  .about-mobile-arrow:disabled {
    opacity: .24;
    cursor: default;
  }

  .about-mobile-arrow:not(:disabled):active {
    color: var(--ink);
  }
}

@media (max-width: 390px) {
  :root {
    --mobile-about-edge: 20px;
    --mobile-about-content-left: 22px;
  }

  .about-brand {
    width: min(36vw, 140px);
  }

  .about-number {
    top: 45.2svh;
    font-size: 74px;
  }

  .about-copy,
  .about-panel--final .about-copy {
    top: 55.1svh;
    width: 86vw;
  }

  .about-copy h1,
  .about-panel--final .about-copy h1 {
    font-size: 23px;
    margin-bottom: 25px;
  }

  .about-body {
    width: 84vw;
    font-size: 9px;
  }

  .about-mobile-arrows {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 70px);
  }
}

/* Short mobile screens: preserve Safari-toolbar clearance first. */
@media (max-width: 800px) and (max-height: 760px) {
  .about-number {
    top: 41.5svh;
  }

  .about-copy,
  .about-panel--final .about-copy {
    top: 51.5svh;
  }

  .about-copy h1,
  .about-panel--final .about-copy h1 {
    margin-bottom: 19px;
  }

  .about-body {
    font-size: 8.6px;
    line-height: 1.1;
  }

  .about-body p {
    margin-bottom: 9px;
  }

  .about-mobile-arrows {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 58px);
  }
}


/* ================================================================
   MOBILE ABOUT — v2 editorial line breaks + detail-style arrows
   ================================================================ */
@media (max-width: 800px) {
  /* These are deliberate mobile editorial breaks. */
  .about-body br.mobile-forced-break {
    display: inline !important;
  }

  .about-body .no-break {
    white-space: nowrap;
  }

  /* Match the arrows used in the fullscreen Projects viewer:
     compact 13px chevrons, no long horizontal shafts. */
  .about-mobile-arrows {
    gap: clamp(22px, 1.65vw, 34px);
  }

  .about-mobile-arrow {
    width: 28px;
    height: 34px;
    display: grid;
    place-items: center;
    color: var(--muted);
  }

  .about-mobile-arrow span {
    position: static;
    width: 13px;
    height: 13px;
    background: transparent;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: none;
  }

  .about-mobile-arrow span::after {
    content: none;
  }

  .about-mobile-arrow--prev span {
    transform: rotate(-135deg);
  }

  .about-mobile-arrow--next span {
    transform: rotate(45deg);
  }

  /* Panel 4: double the vertical breathing room between title and emoji. */
  .about-panel--final .about-copy h1 {
    margin-bottom: 52px;
  }
}


/* ================================================================
   TABLET LANGUAGE ALIGNMENT
   iPad Pro / Air / Mini, portrait + landscape only.
   Desktop and phones are untouched.
   ================================================================ */
@media (min-width: 700px) and (max-width: 1366px) and (pointer: coarse) {
  .about-language {
    display: flex !important;
    bottom: var(--tablet-language-bottom) !important;
  }
}


/* ================================================================
   ABOUT — TABLET REFINEMENT v1
   iPad Pro / Air / Mini only.
   Desktop and phone layouts remain untouched.
   ================================================================ */

/* Shared tablet variables. */
@media (min-width: 700px) and (max-width: 1366px) {
  .about-page {
    --about-tablet-title-body-gap: clamp(34px, 4.2vh, 54px);
    --about-tablet-arrow-left: 0px;
    --about-tablet-arrow-top: 0px;
  }

  /* Ensure the tablet language control cannot inherit the phone "display:none". */
  .about-language {
    display: flex !important;
  }
}

/* ------------------------------------------------
   iPad Pro — PORTRAIT
   Logo exactly follows the approved Projects page.
   Number aligns with heading; number→heading gap = 1/2 heading→body gap.
   Arrow sits below body with a full heading→body gap.
   ------------------------------------------------ */
@media (min-width: 901px) and (max-width: 1100px) and (orientation: portrait) {
  .about-page > .about-brand {
    position: fixed !important;
    top: auto !important;
    left: calc(var(--edge-x) * 1.15) !important;
    bottom: calc(var(--edge-y) * .6) !important;
    width: 210px !important;
    transform: none !important;
  }

  .about-copy,
  .about-panel--final .about-copy {
    left: var(--content-left);
  }

  .about-copy h1,
  .about-panel--final .about-copy h1 {
    margin-bottom: var(--about-tablet-title-body-gap);
  }

  .about-number {
    left: var(--content-left);
    top: calc(clamp(272px, 31.5vh, 365px) - (var(--about-tablet-title-body-gap) * .5));
    transform: translateY(-100%);
  }

  .about-step {
    left: var(--about-tablet-arrow-left) !important;
    top: var(--about-tablet-arrow-top) !important;
    transform: none !important;
  }
}

/* ------------------------------------------------
   iPad Pro — LANDSCAPE
   Only number placement changes, as requested.
   ------------------------------------------------ */
@media (min-width: 1201px) and (max-width: 1366px) and (orientation: landscape) {
  .about-copy h1,
  .about-panel--final .about-copy h1 {
    margin-bottom: var(--about-tablet-title-body-gap);
  }

  .about-number {
    left: var(--content-left);
    top: calc(clamp(272px, 31.5vh, 365px) - (var(--about-tablet-title-body-gap) * .5));
    transform: translateY(-100%);
  }
}

/* ------------------------------------------------
   iPad Air — PORTRAIT
   Content group shifts left to 0.75x of the previous left whitespace.
   Logo exactly mirrors the Projects page.
   ------------------------------------------------ */
@media (min-width: 791px) and (max-width: 900px) and (orientation: portrait) {
  .about-page {
    --about-air-content-left: 210px;
  }

  .about-page > .about-brand {
    position: fixed !important;
    top: auto !important;
    left: calc(clamp(28px, 3.7vw, 34px) * 1.2) !important;
    bottom: calc(clamp(30px, 4.1vh, 38px) * .9) !important;
    width: clamp(112px, 15.4vw, 126px) !important;
    transform: none !important;
  }

  .about-copy,
  .about-panel--final .about-copy {
    left: var(--about-air-content-left);
  }

  .about-copy h1,
  .about-panel--final .about-copy h1 {
    margin-bottom: var(--about-tablet-title-body-gap);
  }

  .about-number {
    left: var(--about-air-content-left);
    top: calc(clamp(272px, 31.5vh, 365px) - (var(--about-tablet-title-body-gap) * .5));
    transform: translateY(-100%);
  }

  .about-step {
    left: var(--about-tablet-arrow-left) !important;
    top: var(--about-tablet-arrow-top) !important;
    transform: none !important;
  }
}

/* ------------------------------------------------
   iPad Air — LANDSCAPE
   Logo mirrors Projects page.
   Number receives the same heading alignment.
   Existing arrow location stays untouched.
   ------------------------------------------------ */
@media (min-width: 1061px) and (max-width: 1200px) and (orientation: landscape) {
  .about-page > .about-brand {
    position: fixed !important;
    top: auto !important;
    left: var(--edge-x) !important;
    bottom: var(--edge-y) !important;
    width: clamp(116px, 11.25vw, 133px) !important;
    transform: none !important;
  }

  .about-copy h1,
  .about-panel--final .about-copy h1 {
    margin-bottom: var(--about-tablet-title-body-gap);
  }

  .about-number {
    left: var(--content-left);
    top: calc(clamp(272px, 31.5vh, 365px) - (var(--about-tablet-title-body-gap) * .5));
    transform: translateY(-100%);
  }
}

/* ------------------------------------------------
   iPad mini — PORTRAIT
   It previously inherited the phone layout. Keep the useful two-arrow
   navigation, but scale and place the editorial content specifically for mini.
   ------------------------------------------------ */
@media (min-width: 700px) and (max-width: 790px) and (orientation: portrait) {
  .about-page {
    --about-mini-content-left: clamp(82px, 11.7vw, 90px);
    --about-mini-copy-top: 54.2svh;
    --about-tablet-title-body-gap: 39px;
  }

  /* Exact Projects-page logo size and placement. */
  .about-page > .about-brand {
    position: fixed !important;
    top: auto !important;
    left: calc(clamp(28px, 3.7vw, 34px) * 1.62) !important;
    bottom: calc(clamp(30px, 4.1vh, 38px) * .9) !important;
    width: clamp(112px, 15.4vw, 126px) !important;
    transform: none !important;
  }

  .about-copy,
  .about-panel--final .about-copy {
    left: var(--about-mini-content-left) !important;
    top: var(--about-mini-copy-top) !important;
    width: min(74vw, 570px) !important;
  }

  .about-copy h1,
  .about-panel--final .about-copy h1 {
    margin-bottom: var(--about-tablet-title-body-gap) !important;
    font-size: clamp(31px, 4.55vw, 35px) !important;
    line-height: 1.02;
  }

  .about-body {
    width: min(74vw, 570px) !important;
    max-width: none !important;
    font-size: clamp(12px, 1.68vw, 13px) !important;
    line-height: 1.15 !important;
  }

  .about-body p {
    margin-bottom: 17px !important;
  }

  .about-number {
    left: var(--about-mini-content-left) !important;
    top: calc(var(--about-mini-copy-top) - (var(--about-tablet-title-body-gap) * .5)) !important;
    font-size: clamp(99px, 14.8vw, 114px) !important;
    line-height: .8 !important;
    transform: translateY(-100%) !important;
    animation: none !important;
  }

  .about-panel.is-active .about-copy h1,
  .about-panel.is-active .about-body,
  .about-panel.is-active .about-emoji-link {
    animation: none !important;
  }

  /* Keep the Projects-detail style arrow pair, but scale it ~1.3x. */
  .about-step {
    display: none !important;
  }

  .about-mobile-arrows {
    display: flex !important;
    left: var(--about-tablet-arrow-left) !important;
    top: var(--about-tablet-arrow-top) !important;
    bottom: auto !important;
    gap: 30px !important;
  }

  .about-mobile-arrow {
    width: 36px !important;
    height: 40px !important;
  }

  .about-mobile-arrow span {
    width: 17px !important;
    height: 17px !important;
  }

  .about-emoji {
    font-size: clamp(76px, 11vw, 86px);
  }
}

/* iPad mini — LANDSCAPE
   Keep the approved Projects-page logo. Content stays otherwise unchanged. */
@media (min-width: 700px) and (max-width: 1060px) and (orientation: landscape) {
  .about-page > .about-brand {
    position: fixed !important;
    top: auto !important;
    left: var(--edge-x) !important;
    bottom: calc(var(--edge-y) * .7) !important;
    width: 116px !important;
    transform: none !important;
  }
}


/* ================================================================
   TABLET TR/EN — FIXED PROJECTS-PAGE POSITION
   iPad Pro / Air / Mini, portrait + landscape.
   Desktop and phones untouched.
   ================================================================ */
@media (min-width: 700px) and (max-width: 1366px) {
  .about-language {
    display: flex !important;
    position: fixed !important;
    z-index: 55;
    top: auto !important;
    transform: none !important;
  }
}

/* mini + Air portrait */
@media (min-width: 700px) and (max-width: 900px) and (orientation: portrait) {
  .about-language {
    right: clamp(28px, 3.7vw, 34px) !important;
    bottom: calc(clamp(30px, 4.1vh, 38px) * .9) !important;
  }
}

/* mini landscape */
@media (min-width: 700px) and (max-width: 1060px) and (orientation: landscape) {
  .about-language {
    right: var(--edge-x) !important;
    bottom: calc(var(--edge-y) * .7) !important;
  }
}

/* Air landscape */
@media (min-width: 1061px) and (max-width: 1200px) and (orientation: landscape) {
  .about-language {
    right: var(--edge-x) !important;
    bottom: var(--edge-y) !important;
  }
}

/* Pro portrait */
@media (min-width: 901px) and (max-width: 1100px) and (orientation: portrait) {
  .about-language {
    right: var(--edge-x) !important;
    bottom: calc(var(--edge-y) * .6) !important;
  }
}

/* Pro landscape */
@media (min-width: 1201px) and (max-width: 1366px) and (orientation: landscape) {
  .about-language {
    right: var(--edge-x) !important;
    bottom: var(--edge-y) !important;
  }
}


/* ================================================================
   ABOUT TABLET v2 — exact Projects logo + one fixed story arrow
   iPad Pro / Air / Mini only. Desktop + phone untouched.
   ================================================================ */

/* The tablet experience uses ONLY the original single story arrow.
   It points right on panels 1–3 and flips left on panel 4 via .is-last. */
@media (min-width: 700px) and (max-width: 1366px) {
  .about-step {
    display: grid !important;
    position: absolute !important;
    left: var(--about-tablet-fixed-arrow-left, var(--content-left)) !important;
    top: var(--about-tablet-fixed-arrow-top, 72%) !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
  }

  .about-mobile-arrows {
    display: none !important;
  }
}

/* ------------------------------------------------
   EXACT LOGO GEOMETRY COPIED FROM THE APPROVED
   PROJECTS TABLET PAGE
   ------------------------------------------------ */

/* iPad mini — portrait */
@media (min-width: 700px) and (max-width: 790px) and (orientation: portrait) {
  .about-page > .about-brand {
    position: fixed !important;
    top: auto !important;
    left: calc(clamp(28px, 3.7vw, 34px) * 1.62) !important;
    bottom: calc(clamp(30px, 4.1vh, 38px) * .9) !important;
    width: clamp(112px, 15.4vw, 126px) !important;
    transform: none !important;
  }
}

/* iPad Air — portrait */
@media (min-width: 791px) and (max-width: 900px) and (orientation: portrait) {
  .about-page > .about-brand {
    position: fixed !important;
    top: auto !important;
    left: calc(clamp(28px, 3.7vw, 34px) * 1.2) !important;
    bottom: calc(clamp(30px, 4.1vh, 38px) * .9) !important;
    width: clamp(112px, 15.4vw, 126px) !important;
    transform: none !important;
  }
}

/* iPad Pro — portrait */
@media (min-width: 901px) and (max-width: 1100px) and (orientation: portrait) {
  .about-page > .about-brand {
    position: fixed !important;
    top: auto !important;
    left: calc(clamp(40px, 6.3vw, 128px) * 1.15) !important;
    bottom: calc(clamp(36px, 6.8vh, 86px) * .6) !important;
    width: 210px !important;
    transform: none !important;
  }
}

/* iPad mini — landscape */
@media (min-width: 700px) and (max-width: 1060px) and (orientation: landscape) {
  .about-page > .about-brand {
    position: fixed !important;
    top: auto !important;
    left: clamp(40px, 6.3vw, 128px) !important;
    bottom: calc(clamp(36px, 6.8vh, 86px) * .7) !important;
    width: 116px !important;
    transform: none !important;
  }
}

/* iPad Air — landscape */
@media (min-width: 1061px) and (max-width: 1200px) and (orientation: landscape) {
  .about-page > .about-brand {
    position: fixed !important;
    top: auto !important;
    left: clamp(40px, 6.3vw, 128px) !important;
    bottom: clamp(36px, 6.8vh, 86px) !important;
    width: clamp(116px, 11.25vw, 133px) !important;
    transform: none !important;
  }
}

/* iPad Pro — landscape */
@media (min-width: 1201px) and (max-width: 1366px) and (orientation: landscape) {
  .about-page > .about-brand {
    position: fixed !important;
    top: auto !important;
    left: clamp(40px, 6.3vw, 128px) !important;
    bottom: clamp(36px, 6.8vh, 86px) !important;
    width: clamp(210px, 18vw, 246px) !important;
    transform: none !important;
  }
}


/* ================================================================
   ABOUT TABLET v3 — arrow + mini landscape refinements
   ================================================================ */

@media (min-width: 700px) and (max-width: 1366px) {
  .about-page {
    --about-tablet-arrow-gap-scale: 1;
  }

  /* Horizontal position comes from JS using the paragraph's layout axis.
     No panel-specific movement is allowed. */
  .about-step {
    left: var(--about-tablet-fixed-arrow-left) !important;
  }
}

/* iPad mini — LANDSCAPE
   Number sits on the same left axis as the heading and uses the same
   number→heading rhythm as the other tablet layouts.
   Arrow gap becomes 0.5x of the normal paragraph→arrow gap. */
@media (min-width: 700px) and (max-width: 1060px) and (orientation: landscape) {
  .about-page {
    --about-tablet-arrow-gap-scale: .5;
  }

  .about-copy h1,
  .about-panel--final .about-copy h1 {
    margin-bottom: var(--about-tablet-title-body-gap);
  }

  .about-number {
    left: var(--content-left) !important;
    top: calc(
      clamp(272px, 31.5vh, 365px)
      - (var(--about-tablet-title-body-gap) * .5)
    ) !important;
    transform: translateY(-100%) !important;
  }
}


/* ================================================================
   ABOUT TABLET v4 — HARD FIX
   1) Visible chevron itself aligns to the paragraph's left edge.
   2) Mini landscape number is locked to the heading axis.
   3) Mini landscape paragraph→arrow gap is 0.5x.
   ================================================================ */

/* ALL TABLETS: the BUTTON starts at paragraph-left and the visible chevron
   also starts there. Previous versions aligned the 64px button box, which
   left the actual 22px chevron visually shifted to the right. */
@media (min-width: 700px) and (max-width: 1366px) {
  .about-step {
    left: var(--about-tablet-fixed-arrow-left) !important;
    width: 64px !important;
    height: 44px !important;
    display: block !important;
    place-items: initial !important;
    transform: none !important;
  }

  .about-step__chevron {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    margin: 0 !important;
    transform: translateY(-50%) rotate(45deg) !important;
    transform-origin: 50% 50% !important;
  }

  .about-step.is-last .about-step__chevron {
    transform: translateY(-50%) rotate(-135deg) !important;
  }

  /* Never show the mobile two-arrow control on a tablet. */
  .about-mobile-arrows {
    display: none !important;
  }
}

/* MINI LANDSCAPE:
   Use screen height, not only width, so both 1024×768 and newer
   1133×744-style iPad Mini presets are caught reliably. */
@media (min-width: 700px) and (max-width: 1180px)
       and (max-height: 790px) and (orientation: landscape) {

  .about-page {
    --about-tablet-arrow-gap-scale: .5 !important;
  }

  /* Number shares EXACTLY the same left axis as the heading/copy. */
  .about-number {
    left: var(--content-left) !important;
    top: calc(
      clamp(272px, 31.5vh, 365px)
      - (var(--about-tablet-title-body-gap) * .5)
    ) !important;
    transform: translateY(-100%) !important;
  }
}


/* ================================================================
   GLOBAL TABLET LOGO CONSISTENCY v1
   Exact logo size + position copied from the approved Projects page.
   Applies only to iPad Mini / Air / Pro, portrait + landscape.
   Desktop and phone layouts are untouched.
   ================================================================ */

/* iPad Mini — portrait */
@media (min-width: 700px) and (max-width: 790px) and (orientation: portrait) {
  .about-brand {
    position: fixed !important;
    top: auto !important;
    left: calc(clamp(28px, 3.7vw, 34px) * 1.62) !important;
    bottom: calc(clamp(30px, 4.1vh, 38px) * .9) !important;
    width: clamp(112px, 15.4vw, 126px) !important;
    transform: none !important;
  }
}

/* iPad Air — portrait */
@media (min-width: 791px) and (max-width: 900px) and (orientation: portrait) {
  .about-brand {
    position: fixed !important;
    top: auto !important;
    left: calc(clamp(28px, 3.7vw, 34px) * 1.2) !important;
    bottom: calc(clamp(30px, 4.1vh, 38px) * .9) !important;
    width: clamp(112px, 15.4vw, 126px) !important;
    transform: none !important;
  }
}

/* iPad Pro — portrait */
@media (min-width: 901px) and (max-width: 1100px) and (orientation: portrait) {
  .about-brand {
    position: fixed !important;
    top: auto !important;
    left: calc(clamp(40px, 6.3vw, 128px) * 1.15) !important;
    bottom: calc(clamp(36px, 6.8vh, 86px) * .6) !important;
    width: 210px !important;
    transform: none !important;
  }
}

/* iPad Mini — landscape */
@media (min-width: 700px) and (max-width: 1060px) and (orientation: landscape) {
  .about-brand {
    position: fixed !important;
    top: auto !important;
    left: clamp(40px, 6.3vw, 128px) !important;
    bottom: calc(clamp(36px, 6.8vh, 86px) * .7) !important;
    width: 116px !important;
    transform: none !important;
  }
}

/* iPad Air — landscape */
@media (min-width: 1061px) and (max-width: 1200px) and (orientation: landscape) {
  .about-brand {
    position: fixed !important;
    top: auto !important;
    left: clamp(40px, 6.3vw, 128px) !important;
    bottom: clamp(36px, 6.8vh, 86px) !important;
    width: clamp(116px, 11.25vw, 133px) !important;
    transform: none !important;
  }
}

/* iPad Pro — landscape */
@media (min-width: 1201px) and (max-width: 1366px) and (orientation: landscape) {
  .about-brand {
    position: fixed !important;
    top: auto !important;
    left: clamp(40px, 6.3vw, 128px) !important;
    bottom: clamp(36px, 6.8vh, 86px) !important;
    width: clamp(210px, 18vw, 246px) !important;
    transform: none !important;
  }
}


/* ================================================================
   ABOUT — UNIVERSAL PAGE-ENTRY SEQUENCE
   Desktop + iPad + iPhone.
   Only the initial page-open is affected:
   number -> heading -> body/emoji.
   ================================================================ */
body.about-page-entering .about-panel[data-index="0"].is-active .about-number,
body.about-page-entering .about-panel[data-index="0"].is-active .about-copy h1,
body.about-page-entering .about-panel[data-index="0"].is-active .about-body,
body.about-page-entering .about-panel[data-index="0"].is-active .about-emoji-link {
  animation: none !important;
  opacity: 0;
  translate: 0 -10px;
}

body.about-page-entering.about-page-enter .about-panel[data-index="0"].is-active .about-number,
body.about-page-entering.about-page-enter .about-panel[data-index="0"].is-active .about-copy h1,
body.about-page-entering.about-page-enter .about-panel[data-index="0"].is-active .about-body,
body.about-page-entering.about-page-enter .about-panel[data-index="0"].is-active .about-emoji-link {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity 300ms ease-out,
    translate 420ms cubic-bezier(.22,.61,.36,1);
}

body.about-page-entering.about-page-enter .about-panel[data-index="0"].is-active .about-number {
  transition-delay: 90ms;
}

body.about-page-entering.about-page-enter .about-panel[data-index="0"].is-active .about-copy h1 {
  transition-delay: 210ms;
}

body.about-page-entering.about-page-enter .about-panel[data-index="0"].is-active .about-body,
body.about-page-entering.about-page-enter .about-panel[data-index="0"].is-active .about-emoji-link {
  transition-delay: 360ms;
}

/* Prevent the first panel's older mobile piece animation from replaying
   immediately after the page-entry sequence completes. */
.about-panel[data-index="0"].about-initial-entry-complete.is-active .about-number,
.about-panel[data-index="0"].about-initial-entry-complete.is-active .about-copy h1,
.about-panel[data-index="0"].about-initial-entry-complete.is-active .about-body,
.about-panel[data-index="0"].about-initial-entry-complete.is-active .about-emoji-link {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body.about-page-entering .about-panel[data-index="0"].is-active .about-number,
  body.about-page-entering .about-panel[data-index="0"].is-active .about-copy h1,
  body.about-page-entering .about-panel[data-index="0"].is-active .about-body,
  body.about-page-entering .about-panel[data-index="0"].is-active .about-emoji-link {
    opacity: 1 !important;
    translate: none !important;
    transition: none !important;
  }
}


/* ================================================================
   IPHONE LANDSCAPE v1 — ABOUT
   ================================================================ */
@media (min-width: 700px) and (max-width: 1000px) and (max-height: 560px) and (orientation: landscape) {
  html,
  body {
    width: 100%;
    height: 100%;
    min-height: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  .about-page,
  .about-stage {
    width: 100%;
    height: 100svh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* Logo = existing approved About/Contact landscape geometry. */
  .about-page > .about-brand {
    position: fixed !important;
    top: auto !important;
    left: clamp(40px, 6.3vw, 128px) !important;
    bottom: calc(clamp(36px, 6.8vh, 86px) * .7) !important;
    width: 116px !important;
    transform: none !important;
  }

  /* Menu = Projects reference. */
  .rail-toggle {
    top: 30px !important;
    right: 34px !important;
    width: 52px !important;
    height: 52px !important;
  }

  .rail-toggle__glyph {
    width: 48px !important;
    height: 48px !important;
  }

  .rail-toggle__glyph::before {
    width: 46px !important;
    height: 1.2px !important;
  }

  .rail-toggle__glyph::after {
    width: 1.2px !important;
    height: 46px !important;
  }

  .about-nav {
    top: 126px !important;
    right: 34px !important;
    gap: 9px !important;
    padding: 0 !important;
  }

  .about-nav a {
    font-size: 20px !important;
    line-height: 1.08 !important;
    letter-spacing: .015em !important;
  }

  .about-language {
    display: flex !important;
    position: fixed !important;
    top: auto !important;
    right: 42px !important;
    bottom: calc(clamp(36px, 6.8vh, 86px) * .7) !important;
    font-size: 10px !important;
    transform: none !important;
  }

  /* All text panels share one vertical anchor. JS chooses that anchor so
     the deepest paragraph ends exactly at the logo's bottom edge. */
  .about-copy,
  .about-panel--final .about-copy {
    left: var(--iphone-landscape-about-content-left, 240px) !important;
    top: var(--iphone-landscape-about-copy-top, 148px) !important;
    width: min(49vw, 470px) !important;
    max-width: none !important;
    padding: 0 !important;
  }

  .about-copy h1,
  .about-panel--final .about-copy h1 {
    margin: 0 0 var(--iphone-landscape-about-title-gap, 38px) !important;
  }

  /* Number moves from above the heading to its left.
     Right edge -> 0.7 × title/body gap from the heading.
     Top edge -> exact heading top. */
  .about-number {
    left: auto !important;
    right: calc(
      100vw
      - var(--iphone-landscape-about-content-left, 240px)
      + var(--iphone-landscape-about-number-gap, 26.6px)
    ) !important;
    top: var(--iphone-landscape-about-copy-top, 148px) !important;
    transform: none !important;
    margin: 0 !important;
    line-height: .86 !important;
  }

  /* Keep only the single desktop/tablet story arrow.
     It is fixed relative to the widest title, never panel-dependent. */
  .about-mobile-arrows {
    display: none !important;
  }

  .about-step {
    display: block !important;
    position: absolute !important;
    left: var(--iphone-landscape-about-arrow-left, 760px) !important;
    top: var(--iphone-landscape-about-arrow-top, 150px) !important;
    right: auto !important;
    bottom: auto !important;
    width: 64px !important;
    height: 64px !important;
    transform: none !important;
  }

  .about-step__chevron {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    margin: 0 !important;
  }
}


/* ================================================================
   IPHONE LANDSCAPE v2 — ABOUT refinements
   ================================================================ */
@media (min-width: 700px) and (max-width: 1000px) and (max-height: 560px) and (orientation: landscape) {
  /* Give panel 2 enough line length for "... atmosferi yaratmak için"
     to finish on the upper line. The break AFTER "için" remains,
     so "biraz hayal gücünden..." starts immediately below. */
  .about-panel[data-index="1"] .about-copy {
    width: min(55vw, 525px) !important;
  }

  .about-panel[data-index="1"] .about-body {
    max-width: none !important;
    width: 100% !important;
  }

  /* Move "İşte bu! dediğimizde..." one line upward only in iPhone landscape.
     The following regular <br> remains, so "Proje içerisinde..." starts
     immediately on the next line. */
  .about-body br.iphone-landscape-hide-break {
    display: none !important;
  }

  /* Optical top alignment: the large numeral glyph sat a little lower
     even though the CSS boxes shared the same top coordinate. */
  .about-number {
    top: var(--iphone-landscape-about-copy-top, 148px) !important;
    transform: translateY(-0.065em) !important;
  }

  /* Leave a touch more breathing room at the right of the widest heading.
     Position remains identical on 1 / 2 / 3 / 4. */
  .about-step {
    left: var(--iphone-landscape-about-arrow-left-v2, var(--iphone-landscape-about-arrow-left, 760px)) !important;
  }
}


/* ================================================================
   IPHONE LANDSCAPE v3 — ABOUT paragraph spacing
   Panels 1–3: heading → paragraph gap = 0.6x.
   Panel 4 emoji stays exactly in its previous vertical position.
   ================================================================ */
@media (min-width: 700px) and (max-width: 1000px) and (max-height: 560px) and (orientation: landscape) {
  .about-page {
    --iphone-landscape-about-base-title-gap: 38px;
  }

  .about-panel:not(.about-panel--final) .about-copy h1 {
    margin-bottom: calc(
      var(--iphone-landscape-about-base-title-gap, 38px) * .6
    ) !important;
  }

  .about-panel--final .about-copy {
    top: var(
      --iphone-landscape-about-final-copy-top,
      var(--iphone-landscape-about-copy-top, 148px)
    ) !important;
  }

  /* Keep the final panel's title→emoji spacing untouched. */
  .about-panel--final .about-copy h1 {
    margin-bottom: 52px !important;
  }
}


/* ================================================================
   IPHONE LANDSCAPE v4 — ABOUT vertical block alignment
   - panel 2 sentence stays on one line
   - all number/title/body blocks move upward together
   - title top gap becomes 0.7x of v3
   - arrow moves with the block
   - panel 4 title/number share the exact same anchors as 1/2/3
   - emoji keeps its previous screen position
   ================================================================ */
@media (min-width: 700px) and (max-width: 1000px) and (max-height: 560px) and (orientation: landscape) {
  .about-panel[data-index="1"] .iphone-landscape-single-line {
    white-space: nowrap !important;
  }

  .about-panel[data-index="1"] br.iphone-landscape-hide-first-sentence-break {
    display: none !important;
  }

  /* All four headings now share exactly the same top anchor. */
  .about-copy,
  .about-panel--final .about-copy {
    top: var(--iphone-landscape-about-copy-top-v4, 104px) !important;
  }

  /* All four numerals share exactly the same top anchor. */
  .about-number {
    top: var(--iphone-landscape-about-copy-top-v4, 104px) !important;
    transform: translateY(-0.065em) !important;
  }

  /* Arrow follows the same upward shift and stays fixed across 1/2/3/4. */
  .about-step {
    top: var(--iphone-landscape-about-arrow-top-v4, 106px) !important;
  }

  /* Previous request preserved: emoji itself does not move on screen. */
  .about-panel--final .about-emoji-link {
    transform: translateY(
      var(--iphone-landscape-about-final-emoji-shift-v4, 0px)
    ) !important;
  }
}