/* =========================================================
   phone-fix.css  (added 2026-11-13)
   Fixes for the phone view (screens 760px wide or less).
   It is loaded LAST on every page, so it wins over older files.
   Desktop is not changed by anything in the @media block.
   Numbers match the list on the "Phone view check" page.
   ========================================================= */
@media screen and (max-width:760px){

  /* 1. HERO: the 4 small boxes ("~6 minutes"...) were cut off at the
        bottom of the first screen. Make the film a bit shorter and the
        boxes compact, so everything fits on the first screen. */
  html body[data-page="home"] #top #cv{max-height:200px}
  html body[data-page="home"] #top .caps{padding-bottom:6px!important}
  /* the 4 boxes sit in ONE row now; swipe sideways to see the last ones */
  html body[data-page="home"] #top .hprom{display:flex!important;gap:6px!important;margin-top:0!important;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  html body[data-page="home"] #top .hprom::-webkit-scrollbar{display:none}
  html body[data-page="home"] #top .hprom li{flex:0 0 46%;padding:9px 12px!important;min-height:0!important;height:auto!important;align-content:start!important}
  html body[data-page="home"] #top .hprom b{font-size:14px!important}

  /* 2 + 7. WORDS THAT LIGHT UP while you scroll (About on the homepage,
        "Who we are" on About us): on a phone half the sentence stayed
        faint. Show every word fully. */
  html body [data-lit] .w{transform:none!important;opacity:1!important;color:var(--ink,#191715)!important}

  /* 3. HOW IT WORKS FILM: see the film part at the end of this file. */

  /* 4. COLOMBO SKYLINE drawing: on phones it sat behind the headings.
        Now it sits only at the very bottom of each light section,
        below the content, and scrolls with the page. */
  html[data-sky] body{background-image:none!important}
  html[data-sky] body #app,
  html[data-sky] body #stations,
  html[data-sky] body #faq,
  html[data-sky] body #franchise{
    background-attachment:scroll!important;
    background-size:180% auto!important;
    background-position:center bottom!important;
    padding-bottom:110px!important;
  }

  /* 5. FRANCHISE heading overlapped the sentence under it. Cause: the
        headings drift up/down a little while you scroll (js/motion.js).
        On phones there is no room for that, so they stay still. */
  html body main section .chap + h2{transform:none!important}

  /* 8. SITE REQUIREMENTS: the wash bay picture stayed pale on phones
        (it only becomes solid after a long scroll). Show it solid. */
  html body[data-page="site"] #baystack{opacity:1!important;transform:none!important}

  /* 9. SMALL LABELS were 10px, hard to read. Now 11px. */
  html body main .chap,
  html body main .chap span,
  html body main .chap .next,
  html body main .label,
  html body main p.label,
  html body .hcap .n,
  html body #top .ghost{font-size:11px!important}

  /* 3. HOW IT WORKS FILM: on a tall phone screen the wide film was
        zoomed in to fill the screen, so you only saw its middle
        (the car and machine were cut off). Now the whole film shows
        at full width, the heading sits above it and the step words
        below it, on black. */
  html body[data-page="home"] section.howfilm .hf-pin #hcv{
    top:104px!important;bottom:auto!important;left:0;right:0;
    height:calc(100vw * 9 / 16)!important;   /* the film is 16:9 */
  }
  html body[data-page="home"] section.howfilm .hf-veil{display:none}
  html body[data-page="home"] section.howfilm .hf-title{opacity:1!important;transform:none!important}
  html body[data-page="home"] section.howfilm .hf-caps{top:calc(104px + 100vw * 9 / 16 + 22px)!important;bottom:auto!important;height:150px}
  html body[data-page="home"] section.howfilm .hcap{top:0!important;bottom:auto!important}
}