/* Layout: a road through time. Left: the road with year signs and traffic lights, and a service loop through a rest area. Right: a sticky "window" with the view from the road. Light by default; "Night drive" in the footer switches to dark with headlights. */
:root{
  --paper:#F4F2EE; --card:#FFFFFF; --ink:#16181B; --ink-2:#565B61; --line:#D8D4CC;
  --asphalt:#E2DDD3; --lane:#F4F2EE; --tyre:rgba(22,24,27,.22); --island:#ECE8E0;
  --blue:#2A6FAE; --blue-2:#8DBBE3; --blue-3:#C7DBEC; --night:#16181B; --on-night:#F4F2EE;
  --stop:#D2453A; --go:#3CC47C; --pick:#E8892B; --sea:#EAF0F4;
  --map-ctx:#F7F5F1; --map-cty:#FFFFFF; --map-stroke:#9AA3AB; --halo:#FFFFFF;
  --chrome:#DFE3E8; --chrome-h:#C9CDD2; --chrome-2:#F1F3F4; --tab-h:#EBEDF0; --logo-bg:#FFFFFF;
  --serif:'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans:'Geist', 'Helvetica Neue', Arial, sans-serif;
  --mono:'Geist Mono', ui-monospace, Menlo, monospace;
  --gutter:clamp(16px,4.4vw,64px);
  --roadpad:136px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --paper:#101316; --card:#181C20; --ink:#ECEAE6; --ink-2:#A6ABB0; --line:#2B3035;
  --asphalt:#262B30; --lane:#6D737A; --tyre:rgba(236,234,230,.16); --island:#1A1F23;
  --blue:#5B9BD5; --blue-2:#8DBBE3; --blue-3:#223A50; --night:#07090B;
  --sea:#12202B; --map-ctx:#1B2025; --map-cty:#252C32; --map-stroke:#4F5961; --halo:#101316;
  --chrome:#202428; --chrome-h:#33383E; --chrome-2:#2A2F34; --tab-h:#2A2F34; --logo-bg:#ECE9E4;
  color-scheme:dark;
}
html[dir="rtl"]{ --serif:'Noto Naskh Arabic', Georgia, serif; --sans:'IBM Plex Sans Arabic','Geist',sans-serif; }
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:var(--paper); color:var(--ink); font:400 17px/1.5 var(--sans); overflow-x:hidden; transition:background .4s, color .4s}
img{max-width:100%; display:block}
a{color:inherit}
button,input,textarea{font:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:4px}
.wrap{padding-inline:var(--gutter)}
.mono{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase}
html[dir="rtl"] .mono{font-family:var(--sans); letter-spacing:0; font-size:14px; text-transform:none}
.eyebrow{color:var(--blue)}
.pill{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 22px; border-radius:999px; background:var(--ink); color:var(--paper); text-decoration:none; border:0; font-weight:500}
.pill:hover{background:var(--blue); color:#fff}
h1,h2,h3{text-wrap:balance}

/* nav */
.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:40; display:flex; align-items:center; gap:24px; padding:14px var(--gutter); background:color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:padding .35s ease}
.nav .brand img{height:28px; width:auto; transition:height .35s ease}
.nav.top{padding-block:24px}
.nav.top .brand img{height:50px}
.brand .night{display:none}
[data-theme="dark"] .brand .day{display:none}
[data-theme="dark"] .brand .night{display:block}
.nav nav{margin-inline-start:auto; display:flex; align-items:center; gap:26px; font-size:15px}
.nav nav a{text-decoration:none}
.nav nav a:hover{color:var(--blue)}
.lang{border:0; background:none; padding:10px 6px}
@media (max-width:820px){ .nav .hide-s{display:none} .nav.top{padding-block:18px} .nav.top .brand img{height:38px} }

/* hero */
.hero{padding-block:clamp(20px,3.2vw,48px) 36px; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:24px; row-gap:28px; align-items:end}
.hero-copy{grid-column:1 / span 8; display:flex; flex-direction:column; gap:24px; min-width:0}
.hero h1{margin:0; font:400 clamp(64px,10vw,150px)/.86 var(--serif); letter-spacing:-.025em}
html[dir="rtl"] .hero h1{font-weight:700; line-height:1.15; letter-spacing:0}
.hero h1 em{color:var(--blue)}
.lede{margin:0; max-width:30em; font-size:clamp(18px,1.6vw,21px); color:var(--ink-2)}
.hero-side{grid-column:9 / span 4; min-width:0}
.quick{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.quick div{background:var(--paper); padding:14px 16px; display:flex; flex-direction:column}
.quick b{font:500 28px/1.1 var(--mono); letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.quick span{font-size:14px; color:var(--ink-2)}
@media (max-width:820px){ .hero-copy,.hero-side{grid-column:1 / -1} }

/* filmstrip */
.film{position:relative; overflow:hidden; padding-block:8px 40px}
.film-track{display:flex; gap:12px; width:max-content; animation:drift 70s linear infinite}
.film:hover .film-track,.film.paused .film-track{animation-play-state:paused}
.film figure{margin:0; width:clamp(200px,22vw,300px); aspect-ratio:4/3; border-radius:10px; overflow:hidden; flex:none}
.film img{width:100%; height:100%; object-fit:cover}
@keyframes drift{to{transform:translateX(-50%)}}
html[dir="rtl"] .film-track{animation-name:driftR}
@keyframes driftR{to{transform:translateX(50%)}}
.film-btn{position:absolute; inset-inline-end:var(--gutter); bottom:52px; width:44px; height:44px; border-radius:50%; border:0; background:var(--paper); color:var(--ink); box-shadow:0 4px 14px rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center}

/* the trip */
.trip{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:clamp(24px,4vw,64px); padding-block:40px 80px}
.roadcol{position:relative; padding-inline-start:var(--roadpad)}
.road{position:absolute; inset-inline-start:34px; top:0; bottom:0; width:44px; background:var(--asphalt); border-radius:22px; transition:background .4s}
.road::after{content:""; position:absolute; inset-inline-start:21px; top:18px; bottom:18px; width:2px; background:repeating-linear-gradient(to bottom, var(--lane) 0 14px, transparent 14px 30px)}
.trail{position:absolute; inset-inline-start:44px; top:14px; width:24px; height:0; z-index:1; pointer-events:none}
.trail::before,.trail::after{content:""; position:absolute; top:0; bottom:0; width:3px; background:repeating-linear-gradient(to bottom, var(--tyre) 0 5px, transparent 5px 9px)}
.trail::before{inset-inline-start:0} .trail::after{inset-inline-end:0}
.eyes{position:absolute; inset:0; pointer-events:none; z-index:1; display:none}
[data-theme="dark"] .eyes{display:block}
.eye{position:absolute; width:4px; height:9px; border-radius:2px; background:#4A4122; transition:background .25s, box-shadow .25s}
.eye.lit{background:#FFD66B; box-shadow:0 0 6px 2px rgba(255,214,107,.7)}
.vanwrap{position:absolute; left:0; top:0; width:40px; height:62px; z-index:5; transform-origin:50% 50%; will-change:transform}
/* easter egg: the founders peek out at the end of the road */
.peek{position:absolute; top:22px; width:36px; height:38px; opacity:0; pointer-events:none; transition:transform .55s cubic-bezier(.3,1.6,.5,1), opacity .3s}
.peek svg{position:static; width:100%; height:100%; overflow:visible}
.peek.l{left:-29px; transform:translateX(18px) scale(.3)}
.peek.r{right:-29px; transform:translateX(-18px) scale(.3)}
.vanwrap.end .peek{opacity:1; transform:none}
.vanwrap.end .peek.r{transition-delay:.25s}
.peek .hand{transform-origin:50% 100%; transform-box:fill-box}
.vanwrap.end .peek .hand{animation:wave 1.1s ease-in-out .7s 3}
@keyframes wave{0%,100%{transform:rotate(0)} 25%{transform:rotate(-24deg)} 75%{transform:rotate(18deg)}}
.hi{position:absolute; inset-inline-start:calc(100% + 34px); top:4px; width:max-content; max-width:170px; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:12px; padding:6px 10px; font-size:13px; line-height:1.3; box-shadow:0 6px 18px rgba(0,0,0,.12); opacity:0; transform:translateY(4px); transition:opacity .3s .9s, transform .3s .9s; pointer-events:none}
.vanwrap.end .hi{opacity:1; transform:none}
html.no-egg .peek,html.no-egg .hi{display:none}
@media (prefers-reduced-motion: reduce){ .peek,.hi{transition:none} .vanwrap.end .peek .hand{animation:none} }
.vanwrap svg{position:absolute; inset:0; width:100%; height:100%}
.beam{position:absolute; left:50%; top:88%; width:160px; height:230px; transform:translateX(-50%); background:radial-gradient(ellipse 50% 90% at 50% 0%, rgba(255,228,150,.55), rgba(255,228,150,.18) 55%, rgba(255,228,150,0) 80%); clip-path:polygon(40% 0, 60% 0, 100% 100%, 0 100%); opacity:0; transition:opacity .5s; pointer-events:none}
[data-theme="dark"] .beam{opacity:1}
[data-theme="dark"] .light,[data-theme="dark"] .sig rect{outline:1px solid #3A4046}
/* green destination signs hang over the road like a motorway gantry; the van passes underneath */
.dest{position:absolute; inset-inline-start:calc(-1 * var(--roadpad) + 12px); top:10px; width:88px; z-index:6; display:flex; flex-direction:column; align-items:stretch; gap:1px; padding:5px 7px 6px; background:#12704A; color:#fff; border-radius:6px; box-shadow:inset 0 0 0 2px #12704A, inset 0 0 0 3.5px #fff, 0 4px 10px rgba(0,0,0,.18); pointer-events:none}
.dest .ar{font:700 14px/1.2 'Noto Naskh Arabic', serif; text-align:right; direction:rtl}
.dest .en{font:600 12px/1.15 var(--sans); text-align:left; direction:ltr; display:flex; justify-content:space-between; align-items:center; gap:4px}
.dest .en svg{flex:none}
.dest small{font:500 10px var(--mono); opacity:.8; direction:ltr; text-align:left}
.chapter{position:relative; min-height:72vh; display:flex; flex-direction:column; justify-content:center; gap:16px; padding-block:48px}
.plate{position:absolute; inset-inline-start:calc(-1 * var(--roadpad) + 14px); top:50%; transform:translateY(-50%); width:84px; display:flex; justify-content:center; z-index:2; background:none; border:0; padding:0}
.plate span{background:var(--card); border:2px solid var(--ink); border-radius:8px; padding:6px 8px; font:500 15px var(--mono); font-variant-numeric:tabular-nums; transition:background .3s, color .3s}
.plate:hover span{border-color:var(--blue); color:var(--blue)}
.chapter.on .plate span{background:var(--ink); color:var(--paper)}
.light{position:absolute; inset-inline-start:calc(-1 * var(--roadpad) + 90px); top:50%; transform:translateY(-50%); width:16px; height:38px; border-radius:6px; background:#16181B; display:flex; flex-direction:column; align-items:center; justify-content:space-evenly; z-index:2}
.light i{width:8px; height:8px; border-radius:50%; background:#3A3D42; transition:background .3s, box-shadow .3s}
.light i:first-child{background:var(--stop); box-shadow:0 0 8px var(--stop)}
.chapter.crossed .light i:first-child{background:#3A3D42; box-shadow:none}
.chapter.crossed .light i:last-child{background:var(--go); box-shadow:0 0 8px var(--go)}
.chapter h2{margin:0; font:400 clamp(48px,5.6vw,84px)/.92 var(--serif); letter-spacing:-.02em}
html[dir="rtl"] .chapter h2{font-weight:700; line-height:1.25; letter-spacing:0}
.chapter p{margin:0; font-size:19px; color:var(--ink-2); max-width:28em}
.places{display:flex; flex-wrap:wrap; gap:8px}
.place{min-height:44px; padding:0 16px; border-radius:999px; border:1px solid var(--line); background:var(--card); font-size:15px}
.place:hover{border-color:var(--blue)}
.place[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.inline-photo{display:none; position:relative; border-radius:12px; overflow:hidden; aspect-ratio:4/3; background:var(--sea)}
.inline-photo img{width:100%; height:100%; object-fit:cover}
.inline-photo img.contain{object-fit:contain; background:#fff}
.inline-photo.map-slot{aspect-ratio:auto; background:var(--card); border:1px solid var(--line)}
.map-slot .levant{position:relative; display:block; width:100%; height:auto; aspect-ratio:900/678; background:var(--sea)}
.maplegend{display:flex; flex-wrap:wrap; gap:6px; padding:10px 12px 4px}
.maplegend button{min-height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--line); background:var(--card); font-size:14px}
.maplegend button[aria-pressed="true"]{border-color:var(--pick); box-shadow:inset 0 0 0 1.5px var(--pick)}
.mapnote{margin:0; padding:4px 14px 12px; min-height:1.5em; font-size:14px; color:var(--ink-2)}
.big{font:500 clamp(40px,4vw,56px)/1 var(--mono); letter-spacing:-.03em; font-variant-numeric:tabular-nums}

/* the service loop: this chapter holds still while the van drives through the station */
.chapter.svc-ch{display:block; min-height:0; padding-block:0}
.svc-sticky{--stick:84px; position:sticky; top:var(--stick); z-index:3; display:flex; flex-direction:column; gap:12px; padding-block:20px 16px}
/* while this section holds still, a still copy of the road covers the scrolling one behind it */
.hold-road{position:absolute; inset-inline-start:calc(-1 * var(--roadpad) + 34px); top:calc(-1 * var(--stick)); height:100vh; width:44px; background:var(--asphalt); pointer-events:none; transition:background .4s}
.hold-road::after{content:""; position:absolute; inset-inline-start:21px; top:0; bottom:0; width:2px; background:repeating-linear-gradient(to bottom, var(--lane) 0 14px, transparent 14px 30px); background-position:0 var(--ph,0px)}
.hold-road::before{content:""; position:absolute; inset-inline-start:20px; top:0; bottom:0; width:4px; display:none; background:repeating-linear-gradient(to bottom, #4A4122 0 9px, transparent 9px 60px); background-position:0 var(--ph2,0px)}
[data-theme="dark"] .hold-road::before{display:block}
.hold-road{overflow:hidden}
.hold-road .ht{position:absolute; inset-inline-start:10px; width:24px; top:0; height:0}
.hold-road .ht::before,.hold-road .ht::after{content:""; position:absolute; top:0; bottom:0; width:3px; background:repeating-linear-gradient(to bottom, var(--tyre) 0 5px, transparent 5px 9px)}
.hold-road .ht::before{inset-inline-start:0} .hold-road .ht::after{inset-inline-end:0}
.hold-road #ht1::before,.hold-road #ht1::after{background-position:0 var(--ph3,0px)}


.svc-sticky h2{font-size:clamp(40px,4.2vw,62px)}
.svc-sticky p{font-size:17px}
.scene{position:relative; height:clamp(240px, 36vh, 320px); margin-inline-start:calc(-1 * var(--roadpad))}
.scene svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.sc-road{fill:none; stroke:var(--asphalt); transition:stroke .4s}
.sc-lane{fill:none; stroke:var(--lane); stroke-width:1.6; stroke-dasharray:10 12}
.sc-island{fill:var(--island); stroke:var(--line); stroke-width:1; transition:fill .4s}
.sc-band{fill:var(--blue)}
.sc-band2{fill:#1F5A8F}
.sc-brand{fill:#FFFFFF; font:600 11px var(--sans); letter-spacing:4px}
.sc-col{fill:#8C9197}
.sc-lamp{fill:#FFFFFF}
[data-theme="dark"] .sc-lamp{fill:#FFE39A; filter:drop-shadow(0 0 4px #FFD66B)}
.pumpbtn{cursor:pointer}
.pumpbtn .hit{fill:transparent}
.pumpbtn .pbody{fill:var(--card); stroke:var(--ink); stroke-width:1.6; transition:fill .2s}
.pumpbtn .pcap{fill:var(--blue)}
.pumpbtn .pscreen{fill:var(--blue-3); transition:fill .2s}
.pumpbtn .phose{fill:none; stroke:var(--ink); stroke-width:1.8; stroke-linecap:round}
.pumpbtn .pnoz,.pumpbtn .pbase{fill:var(--ink)}
.pumpbtn .plabel{fill:var(--ink); font:600 13px var(--sans); transition:fill .2s}
.pumpbtn:hover .pbody,.pumpbtn:focus-visible .pbody{fill:var(--blue-3)}
.pumpbtn:hover .plabel,.pumpbtn:focus-visible .plabel{fill:var(--blue)}
.pumpbtn:focus-visible .hit{stroke:var(--blue); stroke-width:2; rx:8}
.pumpbtn.fueling .pbody{fill:var(--blue)}
.pumpbtn.fueling .pscreen{fill:#FFD66B}
.pumpbtn.fueling .plabel{fill:var(--blue)}
.pumpbtn:focus{outline:none}
.sig rect{fill:#16181B}
.sig circle{fill:#3A3D42; transition:fill .3s}
.sig.red .r{fill:var(--stop)} .sig.green .g{fill:var(--go)}
.stations{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.station{display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:14px 16px; border-radius:14px; border:1px solid var(--line); background:var(--card); text-align:start; transition:border-color .2s, transform .2s; min-width:0}
.station:hover{border-color:var(--blue); transform:translateY(-2px)}
.station b{font:400 28px/1 var(--serif)}
html[dir="rtl"] .station b{font-weight:700; font-size:22px; line-height:1.3}
.station small{color:var(--ink-2); font-size:13px}
.station .open{font-size:14px; color:var(--blue); margin-top:6px; white-space:nowrap}
@media (max-width:1100px){ .station small{display:none} .station{padding:12px} .station b{font-size:24px} }
@media (max-width:420px){ .station b{font-size:20px} .station .open{font-size:13px} }

/* window */
.window{position:sticky; top:96px; height:calc(100vh - 128px); min-height:420px; border-radius:16px; overflow:hidden; background:var(--asphalt)}
.shot{position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .7s ease, transform 6s ease; transform:scale(1.04); pointer-events:none}
img.shot{object-fit:cover}
.shot.on{opacity:1; transform:scale(1); pointer-events:auto}
img.shot.contain{object-fit:contain; background:#fff}
img.shot.small{object-fit:scale-down}
.mapshot{background:var(--sea)}
.levant{position:absolute; inset:0; width:100%; height:100%}
.levant .ctx{fill:var(--map-ctx); stroke:none}
.levant .cty{fill:var(--map-cty); stroke:var(--map-stroke); stroke-width:1.2; cursor:pointer; transition:fill .4s}
.levant .cty.reached{fill:var(--blue-3)}
.levant .cty.now{fill:var(--blue)}
.levant .cty:hover{fill:var(--blue-2)}
.levant .cty.sel{stroke:var(--pick); stroke-width:4; stroke-linejoin:round}
.levant .cty:focus{outline:none}
.levant .city{pointer-events:none}
.levant .city circle{fill:var(--ink); stroke:var(--halo); stroke-width:2}
.levant .city text{font:500 15px var(--sans); fill:var(--ink); paint-order:stroke; stroke:var(--halo); stroke-width:4px}
.mapcard{position:absolute; inset-inline-start:16px; top:16px; background:var(--card); border-radius:12px; padding:12px 16px; box-shadow:0 8px 24px rgba(0,0,0,.14); display:flex; flex-direction:column; gap:2px; min-width:180px}
.mapcard b{font-size:17px}
.mapcard span{font-size:14px; color:var(--ink-2)}
.dash{position:absolute; inset-inline-start:16px; bottom:16px; background:var(--paper); border-radius:12px; padding:12px 20px; box-shadow:0 10px 30px rgba(0,0,0,.18); z-index:2}
.odo{font:500 56px/1 var(--mono); letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.caption{position:absolute; inset-inline-end:16px; top:16px; background:var(--paper); border-radius:999px; padding:8px 14px; font-size:14px; z-index:2}

@media (max-width:900px){
  :root{--roadpad:74px}
  .trip{grid-template-columns:1fr}
  .window{display:none}
  .inline-photo{display:block}
  .road{inset-inline-start:6px; width:32px}
  .road::after{inset-inline-start:15px}
  .trail{inset-inline-start:12px; width:20px}
  .vanwrap{width:30px; height:46px}
  .peek{top:14px; width:30px; height:32px}
  .peek.l{left:-24px} .peek.r{right:-24px}
  .hi{font-size:12px; max-width:140px}
  .dest{inset-inline-start:calc(-1 * var(--roadpad) - 2px); top:-4px; width:70px; padding:4px 5px 5px}
  .dest .ar{font-size:12px} .dest .en{font-size:10.5px} .dest small{font-size:9px}
  .hold-road{inset-inline-start:calc(-1 * var(--roadpad) + 6px); width:32px}
  .hold-road::after{inset-inline-start:15px}
  .hold-road::before{inset-inline-start:14px}
  .hold-road .ht{inset-inline-start:6px; width:20px}
  .beam{width:120px; height:170px}
  .plate{inset-inline-start:calc(-1 * var(--roadpad)); width:44px; top:52px; transform:none}
  .plate span{font-size:11px; padding:3px 4px}
  .light{inset-inline-start:calc(-1 * var(--roadpad) + 46px); top:48px; transform:none; width:12px; height:30px}
  .light i{width:6px; height:6px}
  .chapter{min-height:0}
  .svc-sticky{--stick:72px}
  .scene{height:250px}
}

/* service window: a browser on Windows, with real tabs */
dialog.browser{padding:0; border:1px solid var(--line); border-radius:8px; width:min(980px, calc(100vw - 32px)); height:min(640px, calc(100vh - 40px)); max-width:none; max-height:none; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.35); background:var(--card); color:var(--ink); flex-direction:column}
dialog.browser[open]{display:flex}
dialog.browser.max{width:100vw; height:100vh; margin:0; border:0; border-radius:0}
dialog.browser::backdrop{background:rgba(10,12,14,.4); backdrop-filter:blur(2px)}
.titlebar{display:flex; align-items:flex-end; height:44px; flex:none; background:var(--chrome); padding-inline-start:8px}
.tabs{display:flex; align-items:flex-end; gap:2px; flex:1; min-width:0; height:100%; overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabx{display:flex; align-items:center; gap:8px; height:36px; flex:0 1 220px; min-width:96px; border-radius:8px 8px 0 0; padding-inline:12px 4px; font-size:13px; color:var(--ink-2); cursor:pointer}
.tabx:hover{background:var(--tab-h)}
.tabx[aria-selected="true"]{background:var(--card); color:var(--ink)}
.tabx:focus-visible{outline:2px solid var(--blue); outline-offset:-2px}
.tabx img{width:16px; height:16px; object-fit:contain; flex:none}
.tabx .tt{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:start}
.tabclose{width:24px; height:24px; border:0; border-radius:50%; background:transparent; color:var(--ink-2); display:flex; align-items:center; justify-content:center; flex:none}
.tabclose:hover{background:var(--chrome-h)}
.winctl{display:flex; align-self:stretch; direction:ltr; flex:none; color:var(--ink)}
.winctl button{width:48px; height:100%; border:0; background:transparent; color:inherit; display:flex; align-items:center; justify-content:center}
.winctl button:hover{background:var(--chrome-h)}
.winctl .wclose:hover{background:#E81123; color:#fff}
.addr{display:flex; align-items:center; gap:6px; padding:8px 12px; border-bottom:1px solid var(--line); flex:none}
.navbtn{width:36px; height:36px; border:0; border-radius:50%; background:transparent; color:var(--ink-2); display:flex; align-items:center; justify-content:center}
.navbtn:hover:not(:disabled){background:var(--chrome-2)}
.navbtn:disabled{opacity:.35; cursor:default}
html[dir="rtl"] .navbtn svg{transform:scaleX(-1)}
.addr span{flex:1; min-width:0; background:var(--chrome-2); border-radius:999px; padding:8px 16px; font-size:13px; color:var(--ink-2); font-family:var(--mono); direction:ltr; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bbody{flex:1; min-height:0; overflow:auto}
/* the whole page fits in the window at normal size */
.v-line{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:28px; padding:24px 28px; min-height:100%}
.vl-side{display:flex; flex-direction:column; gap:12px; min-width:0}
.vl-main{display:flex; flex-direction:column; gap:12px; min-width:0}
.v-photo{aspect-ratio:16/9; border-radius:10px; overflow:hidden; background:var(--chrome-2)}
.v-photo img{width:100%; height:100%; object-fit:cover}
.v-item{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); height:100%}
.v-hero{display:grid; grid-template-rows:minmax(0,2fr) minmax(0,1fr); gap:4px; min-height:0; background:var(--chrome-2)}
.v-hero img{width:100%; height:100%; object-fit:cover; min-height:0}
.v-hero img.small{object-fit:scale-down; background:#fff}
.bcontent{padding:22px 28px; display:flex; flex-direction:column; gap:12px; overflow:auto; min-width:0}
.bcontent h3,.vl-side h3{margin:0; font:400 34px/1.02 var(--serif)}
.bcontent h3:focus{outline:none}
html[dir="rtl"] .bcontent h3, html[dir="rtl"] .vl-side h3{font-weight:700; font-size:26px; line-height:1.35}
.bcontent p{margin:0; font-size:16px; color:var(--ink-2); max-width:40em}
.how{display:flex; flex-direction:column; gap:3px; border-top:1px solid var(--line); padding-top:10px}
.how b,.get b{display:block; font:500 11px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--blue)}
html[dir="rtl"] .how b, html[dir="rtl"] .get b{font-family:var(--sans); letter-spacing:0; font-size:13px}
.how p{font-size:15px}
.get{border-radius:10px; background:var(--sea); padding:10px 14px; font-size:15px}
.svc-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.svc-item{display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:48px; padding:8px 14px; border:1px solid var(--line); border-radius:10px; background:var(--card); text-align:start; font-size:15px}
.svc-item:hover{border-color:var(--blue); background:var(--sea)}
.svc-item svg{flex:none; color:var(--blue)}
html[dir="rtl"] .svc-item svg{transform:scaleX(-1)}
.bactions{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:auto; padding-top:4px}
.bactions .pill{min-height:42px; padding:0 18px; font-size:15px}
.ghost{min-height:42px; padding:0 16px; border-radius:999px; border:1px solid var(--line); background:none; font-size:14px}
/* maximised: same layout, more room */
.max .v-line{padding:44px 56px; gap:48px}
.max .bcontent{padding:48px 56px; gap:16px; justify-content:center}
.max .bcontent h3,.max .vl-side h3{font-size:56px}
.max .bcontent p{font-size:18px}
.max .how p{font-size:17px}
.max .svc-item{min-height:58px; font-size:17px}
@media (max-width:640px){
  dialog.browser{width:100vw; height:100dvh; max-height:100dvh; margin:0; border:0; border-radius:0}
  .winctl .wmin,.winctl .wmax{display:none}
  .v-line,.v-item{display:block; height:auto; padding:0}
  .vl-side,.vl-main{padding:18px}
  .vl-main{padding-top:0}
  .svc-list{grid-template-columns:1fr}
  .v-hero{grid-template-rows:none; grid-template-columns:2fr 1fr; aspect-ratio:16/9}
  .bcontent{padding:18px; overflow:visible}
  .bactions{margin-top:8px}
  .tabx{flex-basis:150px}
}

/* totals */
.totals{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--ink); padding-block:0 80px}
.totals div{padding:22px 16px 0 0; display:flex; flex-direction:column; gap:6px; min-width:0}
.totals div + div{border-inline-start:1px solid var(--line); padding-inline-start:20px}
.totals b{font:400 clamp(40px,6.4vw,96px)/.9 var(--serif); letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.totals span{color:var(--ink-2)}
@media (max-width:700px){ .totals{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:24px} .totals div:nth-child(3){border-inline-start:0; padding-inline-start:0} }

/* clients */
.clients{padding-block:80px; background:var(--card); border-block:1px solid var(--line); transition:background .4s}
.clients-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:32px}
.clients h2,.post h2{margin:0; font:400 clamp(48px,6vw,96px)/.92 var(--serif); letter-spacing:-.02em; max-width:12em}
html[dir="rtl"] .clients h2, html[dir="rtl"] .post h2{font-weight:700; line-height:1.25; letter-spacing:0}
.clients h2 em{color:var(--blue)}
.find{display:flex; flex-direction:column; gap:6px; min-width:min(320px,100%)}
.find input{min-height:52px; border:1px solid var(--line); border-radius:999px; padding:0 20px; background:var(--paper); font-size:17px}
.find small{color:var(--ink-2); font-size:14px}
.logos{display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:8px}
.logos.collapsed .logo:nth-child(n+25){display:none}
.logo{aspect-ratio:3/2; border-radius:10px; background:var(--logo-bg); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; padding:12px; transition:opacity .25s, box-shadow .3s, transform .3s, border-color .3s}
.logo img{max-height:100%; width:auto; object-fit:contain; transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.logo:hover{transform:translateY(-4px); box-shadow:0 12px 26px rgba(0,0,0,.12); border-color:var(--blue-3)}
.logo:hover img{transform:scale(1.08)}
.logo.hit{box-shadow:inset 0 0 0 2px var(--blue)}
.logo.dim{opacity:.15}
.logo-foot{margin-top:24px; display:flex; flex-wrap:wrap; align-items:center; gap:16px; color:var(--ink-2); font-size:15px}

/* postcards */
.post{padding-block:88px; display:flex; flex-direction:column; gap:36px}
.cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
.card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:32px; display:flex; flex-direction:column; gap:24px; min-width:0; margin:0}
.card blockquote{margin:0; font:400 clamp(24px,2.3vw,32px)/1.2 var(--serif)}
html[dir="rtl"] .card blockquote{font-size:22px; line-height:1.7}
.who{display:flex; align-items:center; gap:14px; margin-top:auto}
.who img{width:56px; height:56px; border-radius:50%; object-fit:cover}
.who b{display:block; font-weight:600}
.who span{font-size:14px; color:var(--ink-2)}
.habits{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.habit{border-top:1px solid var(--ink); padding-top:14px; display:flex; flex-direction:column; gap:6px}
.habit b{font:400 30px/1.1 var(--serif)}
html[dir="rtl"] .habit b{font-weight:700; font-size:24px}
.habit span{color:var(--ink-2); font-size:16px}
@media (max-width:760px){ .cards,.habits{grid-template-columns:1fr} }

/* close + brief (always a night panel) */
.close{background:var(--night); color:var(--on-night); padding-block:clamp(56px,8vw,96px) 36px; display:flex; flex-direction:column; gap:36px}
.close h2{margin:0; font:400 clamp(64px,10vw,150px)/.86 var(--serif); letter-spacing:-.025em}
html[dir="rtl"] .close h2{font-weight:700; line-height:1.2; letter-spacing:0}
.close h2 em{color:var(--blue-2)}
.brief{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; max-width:1000px}
.brief fieldset{border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; min-width:0}
.brief legend{padding:0; margin-bottom:12px; color:#B9B4AC}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{min-height:44px; padding:0 16px; border-radius:999px; border:1px solid #45484D; background:transparent; color:var(--on-night); font-size:15px}
.chip[aria-pressed="true"]{background:var(--on-night); color:#16181B; border-color:var(--on-night)}
.fields{grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.fields label{display:flex; flex-direction:column; gap:6px; font-size:14px; color:#B9B4AC; min-width:0}
.fields input,.fields textarea{min-height:48px; border-radius:10px; border:1px solid #45484D; background:#202327; color:var(--on-night); padding:0 14px}
.fields textarea{padding:12px 14px; min-height:140px; resize:vertical; line-height:1.5}
.fields .full{grid-column:1 / -1}
.go{grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:16px}
.go .pill{background:var(--on-night); color:#16181B; min-height:56px; font-size:17px}
.go .pill:hover{background:var(--blue-2)}
.sent{grid-column:1 / -1; color:var(--blue-2); margin:0}
.err{color:#F2A195; font-size:14px}
@media (max-width:760px){ .brief,.fields{grid-template-columns:1fr} }
.foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; border-top:1px solid #33363B; padding-top:20px; font-size:15px; color:#CFCAC2}
.foot .mono{color:#9A958D}
.nightbtn{display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 16px 0 8px; border-radius:999px; border:1px solid #45484D; background:transparent; color:var(--on-night); font-size:15px}
.nightbtn .knob{width:40px; height:24px; border-radius:999px; background:#33363B; position:relative; transition:background .3s}
.nightbtn .knob::after{content:""; position:absolute; top:3px; inset-inline-start:3px; width:18px; height:18px; border-radius:50%; background:#F4F2EE; transition:transform .3s}
.nightbtn[aria-pressed="true"] .knob{background:var(--blue)}
.nightbtn[aria-pressed="true"] .knob::after{transform:translateX(16px)}
html[dir="rtl"] .nightbtn[aria-pressed="true"] .knob::after{transform:translateX(-16px)}

@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .film-track{animation:none} .shot{transition:none} .logo,.logo img{transition:none} .logo:hover,.logo:hover img{transform:none} }

.foot a{color:inherit; text-decoration:none}
.foot a:hover{color:#FFFFFF}
.lang{text-decoration:none; display:inline-flex; align-items:center; min-height:44px}
.nav .pill{white-space:nowrap}