/* ==========================================================================
   homepage.html — THE PHONE (below 900px). Her call, 5 Oct 2026: "after the
   two pages we already fitted, fit the home page — beautifully, exactly".
   --------------------------------------------------------------------------
   Built the way the other two phones are: a 393 frame (js/homepage.js sets
   --u = min(width / 393, 1.15) below 900), every section back in the page's
   flow, one centred column with 24 of gutter, the site's four phone grid
   lines (73 / 154 / 234 / 315 of 393) behind every section.
   The desktop's absolute frame and its scripted scenes step aside:
   the ring and the projects' pinned gallery are off below 900 (their own
   scripts), the purple circle and its running sentence stay (the run is
   measured by js/homepage-reach.js and given here as --run).
   js/homepage-mobile.js: two-line wordmarks + the fade-in-up on the blocks
   the desktop moves by script.
   ========================================================================== */
@media (max-width: 899px) {

  /* ---- the frame goes, the flow comes back ------------------------------ */
  .page { height: auto !important; overflow: clip; background: #0D0914; }
  .page-bg { display: none; }
  main > section,
  .footrow,
  .foot {
    position: relative !important;
    top: auto !important;
    left: auto;
    width: 100%;
    height: auto !important;
    margin-top: 0 !important;
  }
  /* !important: every desktop rule places its element by class, which
     outranks this reset; on the phone nothing keeps a frame position */
  main > section > *,
  .footrow > *,
  .foot > * {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    translate: none !important;
  }
  main > section > .rain { position: absolute !important; inset: 0 !important; }
  main > section.reach > .reach__lines { position: absolute !important; }

  /* the phone's four grid lines behind every section */
  .hero, .cg, .pj, .about, .quotes, .footrow, .contact { isolation: isolate; }
  .hero::before, .cg::before, .pj::before, .about::before, .quotes::before, .footrow::before, .contact::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    --ln: rgba(247, 247, 247, 0.08);
    background:
      linear-gradient(var(--ln), var(--ln)) no-repeat calc(78.35 * var(--u)) 0 / 1px 100%,
      linear-gradient(var(--ln), var(--ln)) no-repeat calc(156.7 * var(--u)) 0 / 1px 100%,
      linear-gradient(var(--ln), var(--ln)) no-repeat calc(235.58 * var(--u)) 0 / 1px 100%,
      linear-gradient(var(--ln), var(--ln)) no-repeat calc(313.93 * var(--u)) 0 / 1px 100%;
  }
  .about::before, .quotes::before { --ln: rgba(13, 9, 20, 0.08); }

  /* the site's buttons on the phone: the column's width, one size */
  .btn { font-size: calc(18 * var(--u)); padding: calc(12 * var(--u)) calc(24 * var(--u)); gap: calc(14 * var(--u)); }
  .btn__arrow { width: calc(40 * var(--u)); height: calc(7.8 * var(--u)); }

  /* ---- HERO --------------------------------------------------------------- */
  .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(112 * var(--u)) calc(24 * var(--u)) calc(70 * var(--u));
    text-align: center;
    background: #0D0914 url("../assets/img/homepage/hero-bg.webp") center top / auto calc(760 * var(--u)) no-repeat;
  }
  .hero__tag {
    order: 1;
    font-size: calc(11 * var(--u));
    letter-spacing: calc(4.5 * var(--u));
    white-space: normal;
  }
  .hero__title {
    order: 2;
    left: auto;
    width: auto;
    margin-top: calc(18 * var(--u));
    font-size: calc(178 * var(--u));
    line-height: 0.9;
    text-align: center;
    white-space: normal;
  }
  .hero__shot {
    order: 3;
    left: auto;
    top: auto;
    width: calc(280 * var(--u));
    height: calc(320 * var(--u));
    margin-top: calc(-46 * var(--u));     /* under the title's foot, as the frame lays it */
    z-index: -1;
  }
  .hero__sub {
    order: 4;
    right: auto;
    margin-top: calc(30 * var(--u));
    font-size: calc(24 * var(--u));
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }
  .hero__lead {
    order: 5;
    right: auto;
    width: calc(320 * var(--u));
    margin-top: calc(14 * var(--u));
    font-size: calc(16 * var(--u));
    line-height: 1.4;
    text-align: center;
  }
  .hero__cta {
    order: 6;
    left: auto;
    top: auto;
    width: calc(321 * var(--u));
    margin-top: calc(28 * var(--u));
    justify-content: space-between;
  }

  /* ---- THE STATEMENT (the ring is off below 900) -------------------------- */
  .cg { padding: calc(96 * var(--u)) calc(24 * var(--u)); height: auto; }
  .cg__stage { position: relative; height: auto; }
  .cg__ring { display: none; }
  .cg__phrase, .statement__text {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    translate: none;
    font-size: calc(26 * var(--u));
    line-height: 1.35;
    text-align: center;
  }
  .cg__phrase .script { font-size: 1.35em; }

  /* ---- PROJECTS: the three, one after the other --------------------------- */
  .pj {
    display: flex;
    flex-direction: column;
    padding: calc(20 * var(--u)) 0 calc(90 * var(--u));
  }
  .pj > .pj__stage, .pj > .pj__gallery { display: contents; }
  .pj__kicker {
    order: 0;
    left: auto;
    top: auto !important;
    padding: 0 calc(24 * var(--u));
    font-size: calc(18 * var(--u));
    text-align: center;
  }
  .pj__kicker .script { font-size: calc(30 * var(--u)); }
  .pj__panel, .pj__panel:not(.is-active) {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    padding: calc(64 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u));
    text-align: center;
    pointer-events: auto;
  }
  .pj__panel > * { position: relative; left: auto !important; top: auto !important; right: auto; translate: none; transform: none; }
  .pj__panel[data-i="0"] { order: 1; }
  .pj__set[data-i="0"]   { order: 2; }
  .pj__panel[data-i="1"] { order: 3; }
  .pj__set[data-i="1"]   { order: 4; }
  .pj__panel[data-i="2"] { order: 5; }
  .pj__set[data-i="2"]   { order: 6; }
  .project__num { font-size: calc(24 * var(--u)); }
  .project__name { width: auto; margin-top: calc(4 * var(--u)); font-size: calc(54 * var(--u)); line-height: 1.05; }
  .project__desc { width: calc(321 * var(--u)); margin-top: calc(16 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.4; }
  .project__cta { width: calc(321 * var(--u)); margin-top: calc(24 * var(--u)); justify-content: space-between; }
  .pj:not(.pj--live) .pj__panel .drop i { transform: none !important; }
  /* each project's three pictures: a row to swipe through */
  .pj__set, .pj__set:not([data-i="0"]) {
    display: flex !important;
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    gap: calc(12 * var(--u));
    padding: calc(8 * var(--u)) calc(24 * var(--u));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .pj__set::-webkit-scrollbar { display: none; }
  .pj:not(.pj--live) .pj__fig, .pj:not(.pj--live) .pj__fig[style*="aspect-ratio"] {
    position: relative;
    left: auto !important;
    top: auto !important;
    flex: none;
    width: auto !important;
    height: calc(250 * var(--u)) !important;
    scroll-snap-align: center;
    translate: none !important;
    transform: none !important;
  }

  /* ---- ABOUT (on the white) ------------------------------------------------- */
  .about {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(80 * var(--u)) calc(24 * var(--u)) calc(90 * var(--u));
    background:
      radial-gradient(120% 60% at 0% 45%, rgba(159, 147, 255, 0.32) 0%, rgba(159, 147, 255, 0) 70%),
      #FFFFFF;
    text-align: center;
  }
  .about__mark {
    width: calc(345 * var(--u));
    height: auto;
    clip-path: none;
  }
  .about__mark svg { width: 100%; height: auto; aspect-ratio: 1563.67 / 529.484; }
  .about__photo {
    left: auto;
    top: auto;
    width: calc(300 * var(--u));
    height: calc(455 * var(--u));
    margin-top: calc(32 * var(--u));
  }
  .about__hi {
    right: auto;
    width: auto;
    margin-top: calc(30 * var(--u));
    font-size: calc(44 * var(--u));
    text-align: center;
  }
  .about__intro, .about__body {
    right: auto;
    width: calc(330 * var(--u));
    font-size: calc(16 * var(--u));
    line-height: 1.45;
    text-align: center;
  }
  .about__intro { margin-top: calc(10 * var(--u)); }
  .about__body { margin-top: calc(18 * var(--u)); }
  .about__body p + p { margin-top: 0.9em; }
  .about__cta { left: auto; width: calc(321 * var(--u)); margin-top: calc(30 * var(--u)); }

  /* ---- TESTIMONIALS (on the white; the rows run sideways) ------------------ */
  .quotes {
    padding: calc(30 * var(--u)) 0 calc(90 * var(--u));
    background: #FFFFFF;
  }
  .quotes__mark {
    left: auto;
    top: auto;
    width: auto;
    margin: 0 auto;
    font-size: calc(128 * var(--u));
    text-align: center;
  }
  .quotes__cols {
    display: block;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    margin: calc(36 * var(--u)) 0 0;
    padding: 0;
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .quotes__col { display: block; width: 100%; height: auto; overflow: hidden; }
  .quotes__col + .quotes__col { margin-top: calc(12 * var(--u)); }
  .quotes__track {
    flex-direction: row;
    align-items: stretch;
    width: max-content;
    gap: calc(12 * var(--u));
    padding: 1px;
    margin: 0;
  }
  .quotes.is-running .quotes__track { animation: hp-quotes-side var(--speed, 30s) linear infinite; animation-delay: -2s; }
  .quotes.is-running .quotes__col:nth-child(2) .quotes__track { animation-direction: reverse; animation-delay: -7s; }
  .quote {
    flex: none;
    width: calc(250 * var(--u));
    padding: calc(20 * var(--u));
    gap: calc(16 * var(--u));
    font-size: calc(15 * var(--u));
  }
  .quote__face { width: calc(56 * var(--u)); height: auto; }
  /* the whole recommendation, never cut (her call, 7 Oct — the 7-line clamp hid the thank-yous) */
  .quote blockquote p { margin: 0 0 0.4em; }

  /* ---- THE PURPLE CIRCLE --------------------------------------------------- */
  .reach { border-radius: 0 0 calc(32 * var(--u)) calc(32 * var(--u)); }
  .reach__scene { height: calc(100vh + var(--run, 3200px)); }
  .reach__lines { display: none; }
  .reach__top {
    top: calc(50vh - 200 * var(--u));
    padding: 0 calc(24 * var(--u));
    font-size: calc(16 * var(--u));
    line-height: 1.35;
  }
  .reach__line {
    right: calc(24 * var(--u));
    top: calc(50vh - 66 * var(--u));
    font-size: calc(124 * var(--u));
  }
  main > section.reach .reach__cta {
    left: 50%;
    translate: -50% 0;
    top: calc(50vh + 110 * var(--u));
    width: calc(321 * var(--u));
    padding: calc(14 * var(--u)) calc(24 * var(--u));
    font-size: calc(18 * var(--u));
  }
  .reach__cta .btn__arrow { width: calc(56 * var(--u)); height: calc(10 * var(--u)); }
  .reach__rest { margin-top: 0; height: calc(40 * var(--u)); }

  /* ---- THE ROW UNDER THE PANEL: stacked, centred --------------------------- */
  .footrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(22 * var(--u));
    padding: calc(56 * var(--u)) calc(24 * var(--u)) calc(10 * var(--u));
    font-size: calc(16 * var(--u));
  }
  .footrow .reach__btn { left: auto; top: auto; width: calc(321 * var(--u)); padding: calc(12 * var(--u)) calc(24 * var(--u)); }
  .footrow .reach__btn--white { order: 1; }
  .footrow .reach__btn--ghost { order: 2; margin-top: calc(-10 * var(--u)); }
  .footrow__pages { order: 3; right: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: calc(6 * var(--u)) calc(22 * var(--u)); margin-top: calc(14 * var(--u)); }
  .footrow__pages li, .footrow__legal li { height: auto; line-height: 1.6; }
  .footrow__legal { order: 4; left: auto; width: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: calc(6 * var(--u)) calc(18 * var(--u)); font-size: calc(14 * var(--u)); }
  .footrow__icons { order: 5; left: auto; flex-direction: row; gap: calc(22 * var(--u)); }

  /* ---- LET'S TALK + the bar ----------------------------------------------- */
  .contact { padding: calc(24 * var(--u)) 0 0; overflow: hidden; }
  .contact::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url("../assets/img/homepage/hero-bg.webp") center bottom / auto 100% no-repeat;
    transform: scaleY(-1);
  }
  .contact__mark {
    left: auto;
    top: auto;
    width: auto;
    margin: 0 auto;
    font-size: calc(196 * var(--u));
    line-height: 0.88;
    text-align: center;
  }
  .foot {
    height: auto !important;
    padding: calc(18 * var(--u)) calc(24 * var(--u)) calc(80 * var(--u));
    text-align: center;
  }
  .foot__copy { left: auto; top: auto; translate: none; font-size: calc(13 * var(--u)); white-space: normal; }

  /* ---- the opening screen ------------------------------------------------ */
  .intro__lines { display: none; }
  /* her note (6 Oct): on the phone the counter stands in the MIDDLE of the screen */
  .intro__count { left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); font-size: 96px; white-space: nowrap; }
  .intro__tag { right: 24px; top: 72px; font-size: 10px; letter-spacing: 4px; }
}

@keyframes hp-quotes-side {
  to { transform: translateX(calc(-1 * var(--loop, 0px))); }
}
@media (max-width: 899px) {
  /* the title split locks a width (its first line's); DESIGNER is the wider
     line and its D was clipped — the column's width instead */
  .hero__title, .contact__mark, .quotes__mark { width: calc(345 * var(--u)) !important; max-width: 100%; }
}
@media (max-width: 899px) {
  .cg .cg__phrase { font-size: calc(26 * var(--u)); width: auto; line-height: 1.35; }
}
@media (max-width: 899px) {
  .cg__stage { height: auto !important; min-height: 0 !important; }
  .cg { padding-block: calc(110 * var(--u)) calc(60 * var(--u)); }
  .pj__kicker { position: relative !important; left: auto !important; translate: none !important; margin-top: calc(30 * var(--u)); }
  .pj__panel, .pj__set { position: relative !important; }
}
@media (max-width: 899px) {
  /* About and the testimonials are one white: no sub-pixel seam of the dark between them */
  main > section.quotes { margin-top: -2px !important; padding-top: calc(32 * var(--u)); }
}
@media (max-width: 899px) {
  /* under the circle: the white, as the desktop (her call) — the section is
     white until the circle has filled the window, the circle over it */
  .reach:not(.is-full) { background: #FFFFFF; }
  .reach-blob { z-index: 5; }
}
@media (max-width: 899px) {
  /* the panel ends 100 under the form button, as the desktop's does: the
     rest rides up over the stage's empty foot (its top stops on the button's
     foot, 50vh + 165) */
  .reach__scene { height: calc(150vh + var(--run, 3200px) - 165 * var(--u)); }
  .reach__rest { margin-top: calc(-50vh + 165 * var(--u)); height: calc(100 * var(--u)); }
}

/* ==========================================================================
   HER PHONE NOTES, 5 Oct 2026 (round 1) — the phone only
   ========================================================================== */
@media (max-width: 899px) {

  /* ---- HERO: tag, title, picture, words and button in the first screen.
     The title and the picture give way on a short phone (svh: the window
     with the browser's bars showing), the words keep their size ---------- */
  .hero {
    min-height: 100svh;
    justify-content: center;
    padding: min(calc(92 * var(--u)), 11svh) calc(24 * var(--u)) min(calc(36 * var(--u)), 4svh);
  }
  .hero__tag { font-size: calc(10.5 * var(--u)); }
  .hero__title {
    margin-top: min(calc(14 * var(--u)), 1.6svh);
    font-size: min(calc(146 * var(--u)), 16.2svh);
    line-height: 0.9;
  }
  .hero__shot {
    width: min(calc(196 * var(--u)), 18.6svh);
    height: min(calc(224 * var(--u)), 21.2svh);
    margin-top: min(calc(-38 * var(--u)), -3.9svh);
  }
  .hero__sub { margin-top: min(calc(20 * var(--u)), 2.4svh); font-size: calc(22 * var(--u)); }
  .hero__lead { margin-top: calc(8 * var(--u)); width: calc(330 * var(--u)); font-size: calc(15 * var(--u)); }
  .hero__cta { margin-top: min(calc(22 * var(--u)), 2.6svh); }

  /* the drop's clip cut the letters' tops (line-height 0.9): room above,
     taken back by the margin so nothing moves */
  .hero__title .drop, .contact__mark .drop { padding-top: 0.12em; margin-top: -0.12em; }

  /* ---- EVERY BUTTON: centred, from the first line on the right to the
     first on the left (78.35 – 313.93 of 393: the glass columns of her
     frame's background, 5 Oct). They sit 0.36 left of the screen's middle,
     so the centred button moves by that ------------------------------- */
  main .btn, .footrow .btn {
    width: calc(235.58 * var(--u)) !important;
    margin-inline: auto;
    padding-inline: calc(22 * var(--u)) !important;
    justify-content: space-between;
    gap: calc(12 * var(--u));
    font-size: calc(17 * var(--u));
  }
  main > section > .btn, main .pj__panel > .btn, .footrow > .btn { translate: calc(-0.36 * var(--u)) 0 !important; }
  main > section.reach .reach__cta { width: calc(235.58 * var(--u)) !important; translate: calc(-50% - 0.36 * var(--u)) 0; }
  main .btn .btn__arrow, .footrow .btn .btn__arrow { width: calc(36 * var(--u)); height: calc(7 * var(--u)); }

  /* ---- THE STATEMENT: bigger, balanced lines, written by the scroll ----- */
  .cg { min-height: 88svh; display: flex; align-items: center; justify-content: center; padding-block: calc(80 * var(--u)); }
  .cg__stage { width: 100%; }
  .cg .cg__phrase {
    font-size: calc(30 * var(--u));
    line-height: 1.5;
    text-wrap: balance;
    max-width: calc(330 * var(--u));
    margin: 0 auto;
  }
  .cg__phrase.is-writing .w {
    opacity: clamp(0.14, calc((var(--p, 0) * (var(--n) + 6) - var(--i)) / 6), 1);
    will-change: opacity;
  }

  /* ---- PROJECTS: one screen each — words in the middle, the pictures
     (smaller, still coming up with the scroll) under them --------------- */
  .pj { padding-bottom: calc(20 * var(--u)); }
  .pj__screen {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: calc(40 * var(--u));
  }
  .pj__screen[data-i="0"] { order: 1; }
  .pj__screen[data-i="1"] { order: 2; }
  .pj__screen[data-i="2"] { order: 3; }
  .pj__screen .pj__panel { padding: 0 calc(24 * var(--u)); }
  .pj__screen .pj__set { margin-top: calc(36 * var(--u)); padding-block: 0; }
  .pj:not(.pj--live) .pj__fig, .pj:not(.pj--live) .pj__fig[style*="aspect-ratio"] { height: calc(190 * var(--u)) !important; }
  .project__name { font-size: calc(50 * var(--u)); }

  /* ---- ABOUT: the word alone, the screen's width, its top cut by the dark
     as on the desktop (24.08% of it under the projects); the photo, smaller,
     rides up over its foot ------------------------------------------------- */
  .about { padding-top: 0; }
  .about__mark {
    width: calc(369 * var(--u)) !important;
    margin-top: calc(-48.08 * var(--u)) !important;      /* 24.08% of its 199.66 */
    clip-path: inset(24.08% 0 0 0);
  }
  .about__mark svg { aspect-ratio: 978.527 / 529.484; }
  .about__photo {
    width: calc(235.58 * var(--u));             /* line to line, as the buttons */
    height: calc(357 * var(--u));
    translate: calc(-0.36 * var(--u)) 0 !important;
    margin-top: calc(-12 * var(--u));          /* less over ABOUT (her note, 5 Oct: it covered too much) */
    z-index: 2;
  }

  /* ---- the white's grid lines: lighter (her note) ---------------------- */
  .about::before, .quotes::before { --ln: rgba(13, 9, 20, 0.045); }

  /* ---- LET'S TALK: room above its first line ---------------------------- */
  .contact { padding-top: calc(40 * var(--u)); }

  /* ---- the links: two blocks, each one under the other ----------------- */
  .footrow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    align-items: start;
    row-gap: calc(16 * var(--u));
  }
  .footrow > .btn, .footrow__icons { grid-column: 1 / -1; }
  .footrow .reach__btn--ghost { margin-top: 0; }
  .footrow__pages, .footrow__legal {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: calc(8 * var(--u));
    margin-top: calc(18 * var(--u));
    font-size: calc(16 * var(--u));
  }
  .footrow__pages { grid-column: 1; grid-row: 3; }   /* RTL: the right half */
  .footrow__legal { grid-column: 2; grid-row: 3; }
  .footrow__icons { grid-row: 4; margin-top: calc(14 * var(--u)); }
}

/* ==========================================================================
   HER PHONE FRAME, 5 Oct 2026 — Figma 3746:490 (393 wide), the first two
   areas 1:1. Numbers are the frame's, against 393 (--u).
   ========================================================================== */
@media (max-width: 899px) {

  /* ---- the letters' tops (her Samsung, 5 Oct): Android sets the type a
     little higher in its line than Windows does; what rose past a letter's
     box was neither painted (the gradient is clipped to the box) nor shown
     (the line clips). Room above and below every line and every letter,
     taken back by margins so nothing moves; the letters start that much
     higher (js/homepage-titles.js LIFT) so they stay out of sight ---------- */
  main .drop { padding-block: 0.3em; margin-block: -0.3em; }
  main .mark .drop i { padding-block: 0.3em; margin-block: -0.3em; background-origin: content-box; }

  /* ---- HERO ----------------------------------------------------------- */
  main > section.hero {
    display: block !important;
    min-height: 0;
    height: calc(800 * var(--u)) !important;
    padding: 0 !important;
    /* the frame's background group (3746:697: the picture under eleven
       blurred glass columns), exported whole — no backdrop-filter on a phone */
    background: #0D0914 url("../assets/img/homepage/hero-bg-mobile.webp") 50% calc(-7 * var(--u)) / calc(393 * var(--u)) calc(529 * var(--u)) no-repeat;
  }
  main > section.hero > .hero__tag {
    position: absolute !important;
    left: calc(50% + 38.5 * var(--u)) !important;     /* x 235 */
    top: calc(131 * var(--u)) !important;
    margin: 0;
    font-size: calc(9 * var(--u));
    line-height: 1.3;
    letter-spacing: 0;
    text-align: left;
    white-space: nowrap;
    color: #FFFFFF;
  }
  main > section.hero > .hero__title {
    position: absolute !important;
    left: 0 !important;
    top: calc(120 * var(--u)) !important;
    width: 100% !important;
    max-width: none;
    margin: 0;
    font-size: calc(90.767 * var(--u));
    line-height: 0.87;
    text-align: center;
    white-space: nowrap;
  }
  .hero__title .drop { padding-bottom: calc(53 * var(--u)); margin-bottom: calc(-53 * var(--u)); }
  .hero__title .hero__l1, .hero__title .hero__l2 { display: block; }
  .hero__title .hero__l1 {                          /* 3746:690, centred at x 115.5 */
    position: relative;
    left: calc(-81 * var(--u));
    --mark-grad: linear-gradient(0.88deg, #FFFFFF 20.13%, #FFFFFF 67.593%, rgba(255, 255, 255, 0) 134.93%);
  }
  .hero__title .hero__l2 {                          /* 3746:694, top 207.38 */
    margin-top: calc(8.38 * var(--u));
    font-size: calc(177.221 * var(--u));
    --mark-grad: linear-gradient(0.85deg, #FFFFFF 20.619%, #FFFFFF 71.135%, rgba(255, 255, 255, 0) 115.63%);
  }
  main > section.hero > .hero__shot {               /* 3746:693, over the title's foot */
    position: absolute !important;
    left: calc(50% - 102.5 * var(--u)) !important;  /* x 94 */
    top: calc(318 * var(--u)) !important;
    width: calc(207 * var(--u));
    height: calc(243 * var(--u));
    margin: 0;
    border-radius: calc(12 * var(--u));
    z-index: 2;
  }
  main > section.hero > .hero__sub {
    position: absolute !important;
    left: 0 !important;
    top: calc(598 * var(--u)) !important;
    width: 100%;
    margin: 0;
    font-size: calc(20 * var(--u));
    line-height: 1.3;
    color: #F7F7F7;
  }
  main > section.hero > .hero__lead {
    position: absolute !important;
    left: calc(50% - 147.5 * var(--u)) !important;
    top: calc(671 * var(--u)) !important;
    width: calc(295 * var(--u));
    margin: 0;
    font-size: calc(16 * var(--u));
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.7);
  }

  /* ---- THE STATEMENT (3747:719 at 937, the button 3747:720 at 1366) ----- */
  main > section.cg {
    display: block !important;
    min-height: 0 !important;
    padding: calc(137 * var(--u)) 0 calc(98 * var(--u)) !important;
  }
  .cg .cg__phrase {
    width: calc(314 * var(--u));
    max-width: none;
    margin: 0 auto;
    font-size: calc(40 * var(--u));
    line-height: 1.36;
    text-wrap: wrap;
    color: #F7F7F7;
  }
  .cg .cg__phrase .script { font-size: 1em; line-height: 1.36; color: #9F93FF; }
  main > section.cg > .hero__cta {
    margin: calc(48 * var(--u)) auto 0 !important;
    padding: calc(12 * var(--u)) calc(36 * var(--u)) !important;
    justify-content: center;
    gap: calc(19.453 * var(--u));
    font-size: calc(16 * var(--u));
  }
  main > section.cg > .hero__cta .btn__arrow { width: calc(55 * var(--u)); height: calc(10.7 * var(--u)); }

  /* ---- PROJECTS, as the desktop (her note): the words pinned in the middle
     of the screen, a little bigger; each project's three pictures rise past
     them, left / right / middle; the words change when the next project's
     pictures reach the middle. js/homepage-projects.js (.pj--live) -------- */
  main > section.pj.pj--live { display: block !important; height: var(--pj-h) !important; padding: 0 !important; }
  main > section.pj.pj--live > .pj__stage {
    display: block !important;
    position: sticky !important;
    top: 0 !important;
    height: 100svh;
    z-index: 1;
  }
  main > section.pj.pj--live > .pj__gallery {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100%;
    height: 100% !important;
    z-index: 2;
    pointer-events: none;
  }
  .pj.pj--live .pj__kicker {
    position: absolute !important;
    left: 0 !important;
    top: calc(50% - 250 * var(--u)) !important;
    width: 100%;
    margin: 0 !important;
  }
  .pj.pj--live .pj__panel {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    translate: 0 -50%;
    width: 100%;
    height: auto;
    padding: 0 calc(24 * var(--u));
  }
  .pj.pj--live .pj__panel .drop i { transform: translateY(-1.4em); }
  .pj.pj--live .pj__panel.is-in .drop i { transform: none; }
  .pj.pj--live .project__num { font-size: calc(28 * var(--u)); }
  .pj.pj--live .project__name { font-size: calc(58 * var(--u)); }
  .pj.pj--live .project__desc { width: calc(330 * var(--u)); margin-top: calc(18 * var(--u)); font-size: calc(17 * var(--u)); line-height: 1.45; }
  .pj.pj--live .project__cta { margin-top: calc(28 * var(--u)); }
  .pj.pj--live .pj__set {
    display: block !important;
    position: absolute !important;
    left: 0;
    width: 100%;
    height: 0;
    padding: 0;
    overflow: visible;
  }
  .pj.pj--live .pj__fig { position: absolute !important; height: auto !important; }
  .pj.pj--live .pj__fig--a { left: calc(20 * var(--u)) !important; width: calc(200 * var(--u)) !important; }
  .pj.pj--live .pj__fig--b { left: auto !important; right: calc(20 * var(--u)); width: calc(180 * var(--u)) !important; }
  .pj.pj--live .pj__fig--c { left: calc(50% - 120 * var(--u)) !important; width: calc(240 * var(--u)) !important; }
}

/* ==========================================================================
   HER NOTES, 5 Oct 2026 (round 3) — the phone only
   ========================================================================== */
@media (max-width: 899px) {
  /* ---- LET'S TALK: one line, the screen's width (all three pages) ------- */
  main > section.contact { padding: calc(36 * var(--u)) 0 calc(53 * var(--u)) !important; }
  main > section.contact > .contact__mark {
    width: 100% !important;
    max-width: none;
    margin: 0;
    font-size: calc(207 * var(--u));
    letter-spacing: -0.02em;
    line-height: 0.87;
    white-space: nowrap;
    text-align: center;
  }
  /* ---- the bar: the new dark at 60% OVER the picture, as the desktop —
     it lies on LET'S TALK's band instead of under it on the page's ink ---- */
  body .foot {
    margin-top: calc(-53 * var(--u)) !important;
    height: calc(53 * var(--u)) !important;
    padding: 0 calc(24 * var(--u));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    background: rgba(13, 9, 20, 0.6);
  }
}
@media (max-width: 899px) {
  /* projects: the number a little higher, clear of the name (her note) */
  .pj.pj--live .project__num { margin-bottom: calc(10 * var(--u)); }
}

/* ==========================================================================
   LET'S TALK — her frame 3749:891 (5 Oct 2026), the phone
   Degolan 198.737, line 0.83, 468.344 wide (wider than the screen: the L and
   the K run off it), fading top to bottom; its foot lies UNDER the bar —
   95 of it above the bar's top, the bar 56 of the new dark at 49%.
   ========================================================================== */
@media (max-width: 899px) {
  main > section.contact { padding: calc(30 * var(--u)) 0 0 !important; overflow: hidden; }
  main > section.contact > .contact__mark {
    position: relative !important;
    left: 50% !important;
    translate: -50% 0 !important;
    direction: ltr;                                 /* wider than the screen: in RTL it would hang off the left */
    width: calc(468.344 * var(--u)) !important;
    margin: 0 calc(100% - 468.344 * var(--u)) calc(-14 * var(--u)) 0 !important;   /* the foot runs on past the bar: cut */   /* RTL parent: the overflow would hang left; the foot runs past the bar: cut */
    font-size: calc(198.737 * var(--u));
    letter-spacing: 0;
    line-height: 0.83;
    --mark-grad: linear-gradient(180.59deg, #FFFFFF 1.2263%, rgba(255, 255, 255, 0.5) 60.162%, rgba(255, 255, 255, 0) 79.543%);
  }
  body .foot {
    margin-top: calc(-56 * var(--u)) !important;
    height: calc(56 * var(--u)) !important;
    background: rgba(13, 9, 20, 0.49);
  }
  .foot__copy { font-size: calc(12 * var(--u)); }
}
@media (max-width: 899px) {
  /* the gradient wordmarks kept WHOLE (js/homepage-titles.js .is-whole — her
     Samsung cut the split letters): uncovered top to bottom */
  .mark.is-whole {
    clip-path: inset(-30% -30% 100% -30%);
    transition: clip-path 1.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .mark.is-whole.is-shown, .mark.is-whole.is-settled { clip-path: inset(-30% -30% -30% -30%); }
  /* CREATIVE / DESIGNER: each line its own gradient */
  .hero__title.is-whole { background: none; }
  .hero__title.is-whole .hero__l1, .hero__title.is-whole .hero__l2 {
    color: transparent;
    background-image: var(--mark-grad);
    -webkit-background-clip: text;
    background-clip: text;
  }
}
@media (max-width: 899px) {
  /* ONCE AND FOR ALL (her Samsung, third note): no clip-path; a rise + fade;
     room above and below so the gradient covers the letters' tops (the box is
     shorter than the type, and Android sets the type higher) */
  .mark.is-whole {
    clip-path: none !important;
    padding-block: 0.25em;
    margin-block: -0.25em;
    opacity: 0;
    transform: translateY(0.12em);
    transition: opacity 1s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .mark.is-whole.is-shown, .mark.is-whole.is-settled { opacity: 1; transform: none; }
  main > section.contact > .contact__mark.is-whole {
    margin-top: -0.25em !important;
    margin-bottom: calc(-14 * var(--u) - 0.25em) !important;
  }
  .hero__title.is-whole .hero__l1 { padding-block: 0.25em; margin-block: -0.25em; }
  .hero__title.is-whole .hero__l2 { padding-block: 0.25em; margin-top: calc(8.38 * var(--u) - 0.25em); margin-bottom: -0.25em; }
}
@media (max-width: 899px) {
  /* CREATIVE / DESIGNER: the room is on each line (each carries its own
     gradient), not on the h1; a flex column so the two lines' margins add
     up instead of collapsing — both lines on the frame's 120 / 207.38 */
  main > section.hero > .hero__title.is-whole { display: flex; flex-direction: column; padding: 0; margin: 0; }
}
@media (max-width: 899px) {
  /* her call (5 Oct, fourth note): the big wordmarks STILL on a phone */
  .mark.is-whole { opacity: 1 !important; transform: none !important; transition: none !important; }
  /* LET'S TALK ends ON the line (her note): its type box's foot on the bar's top */
  main > section.contact > .contact__mark.is-whole { margin-bottom: calc(56 * var(--u) - 0.25em) !important; }
}
@media (max-width: 899px) {
  /* the tag a little bigger (her note, 5 Oct): 9 -> 11, still at x 235 / top 131 */
  main > section.hero > .hero__tag { font-size: calc(11 * var(--u)); }
}
@media (max-width: 899px) {
  main > section.hero > .hero__tag { font-size: calc(13 * var(--u)); }   /* bigger again (her note, 6 Oct) */
}
@media (max-width: 899px) {
  /* LET'S TALK: its letters' foot ON the purple line (was 7.3 above), the bar where it was */
  main > section.contact { padding-top: calc(37.3 * var(--u)) !important; }
  main > section.contact > .contact__mark.is-whole { margin-bottom: calc(48.7 * var(--u) - 0.25em) !important; }
}
@media (max-width: 899px) {
  /* the footer's ground = the hero's (her note, 6 Oct): the same plate as the
     hero, flipped, at the same size, so its glass columns stand exactly on
     the four lines (78.35 / 156.7 / 235.58 / 313.93) as the hero's do */
  .contact::before {
    background: #0D0914 url("../assets/img/homepage/hero-bg-mobile.webp") 50% 0 / calc(393 * var(--u)) calc(529 * var(--u)) no-repeat;
    transform: scaleY(-1);
  }
}
@media (max-width: 899px) {
  /* LET'S TALK touching the line (her note, 6 Oct: "half a centimetre still"):
     the letters' foot WAS on the line, but the frame's fade reached nothing at
     79.5% of the type, so the last fifth was invisible. The same fade,
     stretched to end at the letters' foot (97.5% of the type) */
  main > section.contact > .contact__mark.contact__mark { --mark-grad: linear-gradient(180.59deg, #FFFFFF 1.5%, rgba(255, 255, 255, 0.5) 73.8%, rgba(255, 255, 255, 0) 97.5%); }
}
@media (max-width: 899px) {
  /* the movement back (her call, 6 Oct): the whole wordmarks rise in and fade up */
  .mark.is-whole.is-whole:not(.is-shown):not(.is-settled) { opacity: 0 !important; transform: translateY(0.15em) !important; }
  .mark.is-whole.is-whole { transition: opacity 1s ease, transform 1.3s cubic-bezier(0.22, 1, 0.36, 1) !important; }
}
@media (max-width: 899px) {
  /* her note (6 Oct): the whole first screen a little higher — every piece
     20 up, and the hero 20 shorter so the statement follows */
  main > section.hero { height: calc(780 * var(--u)) !important; }
  main > section.hero > .hero__tag   { top: calc(111 * var(--u)) !important; }
  main > section.hero > .hero__title { top: calc(100 * var(--u)) !important; }
  main > section.hero > .hero__shot  { top: calc(298 * var(--u)) !important; }
  main > section.hero > .hero__sub   { top: calc(578 * var(--u)) !important; }
  main > section.hero > .hero__lead  { top: calc(651 * var(--u)) !important; }
}
@media (max-width: 899px) {
  /* THE REEL on the phone: in the flow, its stage pinned; the height comes
     from js/homepage-reel.js (inline, !important over the flow reset) */
  main > section.reel { isolation: isolate; }
  main > section.reel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    --ln: rgba(247, 247, 247, 0.08);
    background:
      linear-gradient(var(--ln), var(--ln)) no-repeat calc(78.35 * var(--u)) 0 / 1px 100%,
      linear-gradient(var(--ln), var(--ln)) no-repeat calc(156.7 * var(--u)) 0 / 1px 100%,
      linear-gradient(var(--ln), var(--ln)) no-repeat calc(235.58 * var(--u)) 0 / 1px 100%,
      linear-gradient(var(--ln), var(--ln)) no-repeat calc(313.93 * var(--u)) 0 / 1px 100%;
  }
  main > section.reel > .reel__stage { position: sticky !important; top: 0 !important; height: 100svh; }
  .reel__card, .reel__flyer { border-radius: calc(6 * var(--u)); }
  main > section.reel > .reel__stage { perspective: 900px; }
}
@media (max-width: 899px) {
  /* WAVECAR in Degolan: its 0.09em low drawing, on top of the phone's 4 */
  .project__name.project__name--en { margin-top: calc(4 * var(--u) - 0.0903em); }
}
@media (max-width: 899px) {
  /* her note (7 Oct): on the phone the picture flies OVER the hero's words
     (under them it seemed to vanish) — the reel above the hero */
  main > section.reel { z-index: 3; }
}