/* SaulOS website, direction A "Een dag in de praktijk": mobile layer.
   Loaded with media="(max-width: 1024px)" and scoped to html.m (set in <head> when window.MOBILE).
   Wider screens never apply these rules, so the desktop film stays exactly as it is.
   Behaviour lives in assets/mobile.js; the hooks in index.html are listed in MOBILE-HOOKS.md. */

/* Latin subsets of the same families as fonts-a.css (which stays desktop-only). */
@font-face{font-family:'Instrument Serif';src:url(fonts/m-instrument-serif.woff2) format('woff2');font-style:normal;font-weight:400;font-display:block}
@font-face{font-family:'Instrument Serif';src:url(fonts/m-instrument-serif-italic.woff2) format('woff2');font-style:italic;font-weight:400;font-display:block}
@font-face{font-family:'Instrument Sans';src:url(fonts/m-instrument-sans.woff2) format('woff2');font-style:normal;font-weight:400 700;font-display:swap}
@font-face{font-family:'SaulOS Wordmark';src:url(fonts/m-wordmark.woff2) format('woff2');font-weight:600;font-display:swap}

html.m{--s:.6;--navh:56px;--pad:20px;--imgh:56vh;scroll-snap-type:y proximity;-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-width:auto}
html.m.mtour,html.m.mgo{scroll-snap-type:none}
html.m body{font-size:16px;line-height:1.5;-webkit-tap-highlight-color:rgba(242,238,230,.12)}

/* ---------- buttons (tap targets >= 44 px) ---------- */
html.m .btn{height:48px;padding:0 20px;font-size:16px;gap:10px}
html.m .btn.lg{height:52px;padding:0 24px;font-size:17px}
html.m .btn .play{border-left-width:9px;border-top-width:6px;border-bottom-width:6px}

/* ---------- nav: logo, one CTA, the rest in a menu ---------- */
html.m #nav{height:var(--navh);gap:8px;padding:0 10px 0 14px;pointer-events:auto;
  background:linear-gradient(180deg,rgba(5,6,10,.97),rgba(5,6,10,.9))}
html.m .brand{min-height:44px;gap:9px}
html.m .brand img{height:22px}
html.m .brand span{font-size:18px}
html.m #nav .cta{gap:6px;align-items:center}
html.m #nav .cta .btn.ghost{display:none}
html.m #nav .cta .btn.solid{height:44px;padding:0 16px;font-size:15px}
html.m #mmenu{flex:none;width:44px;height:44px;border-radius:12px;border:1px solid rgba(242,238,230,.22);background:rgba(242,238,230,.04);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;padding:0}
html.m #mmenu i{display:block;width:18px;height:1.5px;border-radius:1px;background:var(--paper);transition:transform .25s,opacity .25s}
html.m.mopen #mmenu i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
html.m.mopen #mmenu i:nth-child(2){opacity:0}
html.m.mopen #mmenu i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
html.m #nav .links{display:none;position:fixed;left:0;right:0;top:var(--navh);margin:0;padding:8px var(--pad) 22px;flex-direction:column;gap:0;
  background:#0b0d13;border-bottom:1px solid var(--line);box-shadow:0 24px 48px rgba(0,0,0,.6)}
html.m.mopen #nav .links{display:flex}
html.m #nav .links a{display:flex;align-items:center;min-height:52px;font-size:18px;color:var(--paper);border-bottom:1px solid var(--line)}
html.m #nav .links .btn{margin-top:18px;align-self:flex-start}

/* slim day progress at the bottom edge of the nav (the desktop clock, day bar and rail become this) */
html.m #mprog{position:absolute;left:16px;right:16px;bottom:0;height:2px;pointer-events:none;opacity:0;transition:opacity .35s}
html.m #mprog.on{opacity:1}
html.m #mprog s{position:absolute;inset:0;background:rgba(242,238,230,.16)}
html.m #mprog b{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,rgba(242,238,230,.12),rgba(242,238,230,.75))}
html.m #mprog i{position:absolute;top:-2px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#06070b;border:1px solid rgba(242,238,230,.45);transition:background .3s,border-color .3s}
html.m #mprog i.on{background:var(--paper);border-color:var(--paper)}
html.m #mprog i.rd.on{background:var(--termijn);border-color:var(--termijn)}
html.m #mprog u{position:absolute;top:-3px;left:calc(var(--p,0) * 100%);width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#ffe2b0;box-shadow:0 0 10px 2px rgba(255,214,160,.7)}

/* ---------- the film becomes vertical scenes in normal flow ---------- */
html.m #film{height:auto!important}
html.m #stage{position:relative;height:auto;overflow:visible;background:transparent}
html.m #sky,html.m #shafts,html.m #cam,html.m #beams,html.m #dust,html.m #tags,html.m #bars,html.m #hud,html.m #rail,html.m #vignette,html.m #grain,html.m #fcur{display:none!important}
html.m #titles{position:relative;inset:auto;display:flex;flex-direction:column;pointer-events:auto;z-index:auto}

/* hero */
html.m #hero{position:relative;left:auto;top:auto;width:auto;transform:none;min-height:calc(100vh - 100px);min-height:calc(100svh - 100px);
  display:flex;flex-direction:column;justify-content:center;padding:calc(var(--navh) + 28px) var(--pad) 12px;scroll-snap-align:start;
  background:radial-gradient(90% 46% at 12% 92%,rgba(74,66,117,.32),transparent 72%),linear-gradient(180deg,#05060a 0%,#090b16 70%,#0b0d18 100%)}
html.m #hero .k{font-size:15px;line-height:1.45;letter-spacing:.14em}
html.m #hero h1{font-size:clamp(60px,18.5vw,116px);line-height:.86;margin:18px 0 22px}
html.m #hero p{font-size:18px;line-height:1.5;max-width:34em}
html.m #hero .acts{flex-wrap:wrap;gap:10px;margin-top:26px}
html.m #cue{position:relative;left:auto;bottom:auto;transform:none;height:100px;flex-direction:row;justify-content:flex-start;align-items:flex-start;gap:12px;
  padding:10px var(--pad) 0;font-size:15px;letter-spacing:.12em;background:linear-gradient(180deg,#0b0d18,#0d0f1b)}
html.m #cue i{width:28px;height:1px;margin-top:10px;background:linear-gradient(90deg,rgba(242,238,230,.7),transparent);transform-origin:0 50%;animation:mcue 2.4s ease-in-out infinite}
html.m #credit{position:relative;right:auto;bottom:auto;order:99;text-align:left;font-size:15px;line-height:1.5;padding:40px var(--pad) 64px;background:#0b0d14}
html.m #credit br{display:none}

@keyframes mrise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes mcue{0%,100%{transform:scaleX(.35)}50%{transform:scaleX(1)}}
html.m #hero>*{animation:mrise .9s cubic-bezier(.2,.8,.2,1) backwards}
html.m #hero>:nth-child(2){animation-delay:.12s}
html.m #hero>:nth-child(3){animation-delay:.3s}
html.m #hero>:nth-child(4){animation-delay:.45s}

/* scenes: time, title, short text, one focus image */
html.m .copy{position:relative;top:auto;left:auto;right:auto;width:auto;visibility:visible;transform:none;
  min-height:calc(100vh - var(--navh));min-height:calc(100svh - var(--navh));display:flex;flex-direction:column;justify-content:center;
  padding:36px var(--pad) 36px;scroll-snap-align:start;scroll-snap-stop:always;scroll-margin-top:var(--navh);
  background:radial-gradient(95% 42% at var(--sx) 78%,var(--gl),transparent 74%),linear-gradient(180deg,var(--c0),var(--c1))}
html.m .copy .mtx{max-width:36em}
html.m .copy .k{font-size:15px;gap:12px;letter-spacing:.14em}
html.m .copy .k b{font-size:22px}
html.m .copy h2{font-size:clamp(38px,11.4vw,62px);line-height:1;margin:14px 0 14px}
html.m .copy p{font-size:17px;line-height:1.55;max-width:none}
html.m .copy p+p{margin-top:12px}
html.m .bigred{font-size:clamp(76px,24vw,128px);margin:10px 0 0}
html.m .bigred small{font-size:15px;line-height:1.45;margin-top:10px;max-width:24em}
html.m .copy .bigred+h2{margin-top:22px}

/* scene skies: one colour band per scene, joined to the next, with the sun glow moving left to right through the day */
html.m .copy[data-ch="0"]{--c0:#0d0f1b;--c1:#131423;--gl:rgba(232,168,106,.22);--sx:14%}
html.m .copy[data-ch="1"]{--c0:#131423;--c1:#15192b;--gl:rgba(236,180,122,.2);--sx:20%}
html.m .copy[data-ch="2"]{--c0:#15192b;--c1:#132036;--gl:rgba(240,192,142,.18);--sx:26%}
html.m .copy[data-ch="3"]{--c0:#132036;--c1:#13233b;--gl:rgba(169,198,234,.17);--sx:44%}
html.m .copy[data-ch="4"]{--c0:#13233b;--c1:#14263f;--gl:rgba(169,198,234,.15);--sx:50%}
html.m .copy[data-ch="5"]{--c0:#14263f;--c1:#14121c;--gl:rgba(199,217,240,.16);--sx:62%}
html.m .copy[data-ch="6"]{--c0:#14121c;--c1:#080a12;--gl:rgba(217,152,79,.22);--sx:86%}
html.m .copy[data-ch="7"]{--c0:#080a12;--c1:#0b0d14;--gl:rgba(51,65,109,.26);--sx:90%}

/* focus image */
html.m .mf{margin:22px 0 0;position:relative}
/* the card is as wide as the column, but never so wide that the image gets taller than --imgh */
html.m .mf-card{position:relative;width:min(100%,calc(var(--imgh) * var(--arw,1)));border-radius:12px;overflow:hidden;background:#fafafa;transform-origin:50% 30%;will-change:transform;
  box-shadow:0 0 0 1px rgba(255,255,255,.09),0 18px 46px rgba(0,0,0,.55)}
html.m .mf.dark .mf-card{background:#121318}
html.m .mf.narrow .mf-card{max-width:340px}
html.m .mf img{display:block;width:100%;height:auto;aspect-ratio:var(--ar)}
html.m .mf-hl{position:absolute;border-radius:6px;pointer-events:none;opacity:0;transition:opacity .7s ease;
  box-shadow:0 0 0 2px rgba(210,171,98,.95),0 0 22px rgba(210,171,98,.45)}
html.m .mf.on .mf-hl{opacity:1}
html.m .mf figcaption{display:flex;align-items:center;gap:10px;margin-top:12px;font:500 15px/1.35 var(--sans);color:var(--muted)}
html.m .mf figcaption i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--paper);box-shadow:0 0 10px rgba(242,238,230,.6)}
html.m .mf.brass figcaption i{background:var(--brass);box-shadow:0 0 10px rgba(var(--brass-a),.8)}
html.m .mf.red figcaption i{background:var(--termijn);box-shadow:0 0 10px rgba(226,96,92,.6)}

/* ---------- investors, CTAs, footer ---------- */
html.m .rv{opacity:1;transform:none}
html.m .flow{padding:76px var(--pad) 56px;scroll-snap-align:start;scroll-margin-top:var(--navh);scroll-snap-stop:always}
html.m .kick{font-size:15px;line-height:1.4;letter-spacing:.13em}
html.m .big{font-size:clamp(44px,12.6vw,78px);line-height:.95;margin:16px 0 22px}
html.m .mid{font-size:clamp(36px,10.2vw,60px);line-height:1;margin:14px 0 20px!important}
html.m .lead{font-size:17px;line-height:1.55}
html.m .why{grid-template-columns:1fr 1fr;gap:30px 18px;margin:56px 0 0;padding-top:30px}
html.m .num b{font-size:64px}
html.m .num span{font-size:15px;letter-spacing:.1em;margin:12px 0 8px}
html.m .num p{font-size:15px;line-height:1.5}
html.m .moat,html.m .wallsec,html.m .status{margin-top:92px}
html.m .cards{grid-template-columns:1fr;gap:14px;margin-top:8px}
html.m .card{min-height:0;padding:20px 20px 24px;border-radius:16px}
html.m .card svg{width:100%;max-width:300px;height:auto;aspect-ratio:300/160;margin:0 0 12px}
html.m .card h4{font-size:30px;margin:0 0 10px}
html.m .card p{font-size:16px}
html.m .wall{display:none}
html.m .ticker{white-space:normal;overflow:visible;border:0;padding:0;margin-top:26px}
html.m .ticker #tick{display:flex;flex-wrap:wrap;gap:8px;transform:none!important}
html.m #tick span{display:inline-flex;align-items:center;min-height:36px;margin:0;padding:6px 14px;border:1px solid var(--line);border-radius:999px;
  font:500 15px/1.2 var(--sans);color:var(--paper);background:rgba(242,238,230,.03)}
html.m .capt{font-size:15px;margin-top:18px}
html.m .status{padding-bottom:20px}
html.m .steps{grid-template-columns:1fr;gap:30px;margin:34px 0 42px;padding-left:38px}
html.m .steps::before{left:11px;right:auto;top:8px;bottom:8px;width:1px;height:auto}
html.m .steps .bar{display:none}
html.m .steps li{padding-top:0}
html.m .steps li::before{left:-38px;top:2px}
html.m .steps .tagline{font-size:15px;letter-spacing:.12em;margin-bottom:10px}
html.m .steps h4{font-size:32px;margin-bottom:10px}
html.m .steps p{font-size:16px}
html.m #status>.btn{height:auto;min-height:52px;white-space:normal;text-align:left;line-height:1.25;padding:12px 24px}
html.m #cta{padding:84px var(--pad) 64px}
html.m .ctas{grid-template-columns:1fr;gap:14px;margin-top:34px}
html.m .ctas .c{padding:24px 20px 26px;border-radius:18px}
html.m .ctas .c p{font-size:17px;margin:12px 0 20px}
html.m .ctas .btn{height:auto;min-height:52px;white-space:normal;text-align:left;line-height:1.25;padding:12px 22px}
html.m .ph{font-size:15px;margin-top:22px}
html.m footer{grid-template-columns:1fr;gap:26px;padding:48px var(--pad) calc(88px + env(safe-area-inset-bottom))}
html.m footer p{font-size:16px;margin-top:12px}
html.m footer h5{font-size:15px;margin:0 0 4px}
html.m footer ul{gap:0}
html.m footer li a,html.m footer li button{display:inline-flex;align-items:center;min-height:44px;font-size:17px}
html.m footer .fine{font-size:15px;padding-top:22px}

/* ---------- modal and tour pill ---------- */
html.m #modal{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(3,4,6,.84);align-items:flex-end}
html.m #modal .sheet{width:100%;max-height:100%;overflow:auto;border-radius:22px 22px 0 0;padding:26px var(--pad) calc(24px + env(safe-area-inset-bottom))}
html.m #modal h3{font-size:40px;margin:14px 0 10px;padding-right:48px}
html.m #modal p{font-size:16px;margin:0 0 20px}
html.m #modal label{font-size:15px;margin-bottom:6px}
html.m #modal input{height:48px;font-size:16px;margin-bottom:14px}
html.m #modal .x{width:44px;height:44px;right:14px;top:14px;font-size:24px}
html.m #modal .note{font-size:15px;letter-spacing:.1em}
html.m #tourpill{left:auto;right:10px;top:6px;bottom:auto;transform:none;height:44px;padding:0 16px;gap:10px;font-size:15px;z-index:60}
html.m.mtour #nav .cta,html.m.mtour #mmenu{visibility:hidden}

/* ---------- tablets in portrait ---------- */
@media (min-width:600px) and (orientation:portrait){
  html.m{--pad:48px;--navh:64px}
  html.m #nav{padding:0 22px 0 30px}
  html.m #mprog{left:30px;right:30px}
  html.m #hero p{font-size:20px}
  html.m .copy{padding-top:44px;padding-bottom:52px}
  html.m .copy .mtx{max-width:600px}
  html.m .copy h2{font-size:clamp(56px,8.4vw,76px)}
  html.m .copy p{font-size:19px}
  html.m{--imgh:50vh}
  html.m .mf figcaption{font-size:16px}
  html.m .why{grid-template-columns:repeat(4,1fr)}
  html.m .cards{grid-template-columns:1fr 1fr}
  html.m .ctas{grid-template-columns:1fr 1fr}
  html.m footer{grid-template-columns:2fr 1fr 1fr}
  html.m #modal{align-items:center}
  html.m #modal .sheet{width:min(560px,90vw);border-radius:22px}
}

/* ---------- phones in landscape: text beside the image ---------- */
@media (orientation:landscape) and (max-height:500px){
  html.m{--navh:52px;--pad:max(28px,env(safe-area-inset-left))}
  html.m #nav{padding:0 max(12px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left))}
  html.m #hero{padding-top:calc(var(--navh) + 30px);min-height:calc(100vh - 72px);min-height:calc(100svh - 72px)}
  html.m #hero h1{font-size:clamp(44px,7vw,72px);margin:10px 0 12px}
  html.m #hero p{font-size:16px;max-width:40em}
  html.m #hero .acts{margin-top:16px}
  html.m #cue{height:72px;padding-top:6px}
  html.m .copy{flex-direction:row;align-items:center;justify-content:center;gap:clamp(20px,4vw,48px);padding:26px var(--pad) 16px}
  html.m .copy .mtx{flex:1 1 44%;max-width:30em}
  html.m .copy .k{font-size:15px}
  html.m .copy .k b{font-size:19px}
  html.m .copy h2{font-size:clamp(28px,4.1vw,40px);margin:8px 0 8px}
  html.m .copy p{font-size:15px;line-height:1.4}
  html.m .copy p+p{margin-top:6px}
  html.m .bigred{font-size:clamp(44px,6vw,56px);margin:2px 0 0}
  html.m .bigred small{margin-top:4px}
  html.m .copy .bigred+h2{margin-top:10px}
  html.m{--imgh:calc(100vh - var(--navh) - 70px)}
  html.m .mf{flex:1 1 56%;margin:0;display:flex;flex-direction:column;align-items:center}
  html.m .mf figcaption{margin-top:8px;align-self:stretch;justify-content:center}
  html.m .flow{padding-top:56px}
  html.m .why{grid-template-columns:repeat(4,1fr)}
  html.m .num b{font-size:52px}
  html.m .cards{grid-template-columns:1fr 1fr}
  html.m .ctas{grid-template-columns:1fr 1fr}
  html.m footer{grid-template-columns:2fr 1fr 1fr}
  html.m #modal{align-items:center}
  html.m #modal .sheet{width:min(560px,90vw);border-radius:22px}
}

@media (prefers-reduced-motion:reduce){
  html.m #hero>*,html.m #cue i{animation:none}
  html.m .mf-hl,html.m #mprog,html.m #mmenu i{transition:none}
  html.m .mf-card{will-change:auto}
}