/* The first screen: the phone is the stage. It is there the moment the page
   is, and the scroll turns it through what Lesreg has built, Spiis, Mosede,
   Callster, until its screen turns to paper and opens into the page.

   One picture: the frame, every screen and the white sit in one box that
   alone is moved, so nothing on the phone can slide against it. */
:root{
  --navy-950:#05080F; --navy-900:#0A1020; --navy-800:#101A33; --navy-700:#18264A; --deep:#2B3F7C;
}

/* the stage holds still while the track runs past it: as tall as the screen
   with Safari's bars away, so it never changes size when they come and go */
.hs-track{ position:relative; }
/* Safari colours its own bars from the page behind them: navy while the
   phone is on the stage, paper once its screen has become the page */
html.hs-on, html.hs-on body{ background:var(--navy-950); }
html.hs-on.hs-past, html.hs-on.hs-past body{ background:var(--porcelain); }
/* Safari 26 reads its colour from an opaque fixed strip at each edge, not
   from theme-color or a translucent bar; on a touch screen there is one */
.edge{ display:none; }
@media (hover:none) and (pointer:coarse){
  /* the lock screen's glass rides on the phone as it zooms: drawn, not blurred */
  .hs-lock .note{ -webkit-backdrop-filter:none; backdrop-filter:none; background:linear-gradient(160deg, rgba(120,140,190,.5), rgba(70,86,130,.5)); }
  .edge{ display:block; position:fixed; left:0; right:0; height:6px; z-index:70; pointer-events:none; background:var(--porcelain); }
  .edge-t{ top:0; }
  .edge-b{ bottom:0; }
  html.hs-on:not(.hs-past) .edge{ background:var(--navy-950); }
}
html.hs-on .hs-track{ height:600vh; height:600svh; }
.hs{ position:sticky; top:0; z-index:0; height:100vh; height:100lvh; overflow:hidden; color:var(--porcelain);
  background-color:var(--navy-950); background-image:radial-gradient(70% 60% at 66% 46%, var(--navy-800), var(--navy-950) 72%); }
.pg, .foot{ position:relative; z-index:1; }
/* the closing sentence stands in the middle of a whole screen; the page
   after it comes up over the empty lower part of that screen, so there is
   no blank stretch between the two */
@media (prefers-reduced-motion: no-preference){
  html.hs-on .pg{ margin-top:-18vh; }
}
@media (prefers-reduced-motion: no-preference) and (max-aspect-ratio:1/1), (prefers-reduced-motion: no-preference) and (max-width:760px){
  html.hs-on .pg{ margin-top:-24svh; }
}
.hs-glow{ position:absolute; left:66%; top:calc(50% + 30px); width:min(70vh, 720px); height:min(70vh, 720px); margin:calc(min(70vh, 720px) / -2) 0 0 calc(min(70vh, 720px) / -2);
  border-radius:50%; background:radial-gradient(closest-side, rgba(58,85,168,.42), rgba(43,63,124,.14) 55%, transparent); pointer-events:none; }

/* ---------- the opening words ---------- */
.hs-copy{ position:absolute; left:var(--gut); top:calc(50% + 30px); width:min(44vw, 640px); transform:translateY(-50%); }
.hs-copy-in{ will-change:transform, opacity; }
.hs-kick{ font:600 11px/14px var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--travertine); margin-bottom:clamp(14px, 2.4vh, 22px); }
.hs-h1{ font:500 clamp(52px, min(6.6vw, 12vh), 120px)/.92 var(--sans); letter-spacing:-.05em; }
.hs-h1 .l{ display:block; overflow:hidden; padding-bottom:.12em; margin-bottom:-.12em; }
.hs-h1 .l > span{ display:inline-block; }
.hs-h1 .acc{ font-family:var(--accent); font-style:italic; font-weight:300; letter-spacing:-.03em; }
.hs-lead{ margin-top:clamp(18px, 3vh, 28px); max-width:40ch; font:400 clamp(16px, 1.3vw, 20px)/1.5 var(--sans); color:var(--travertine); }
.hs-cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(22px, 3.6vh, 34px); }
.btn.glass{ padding:0 22px; color:var(--porcelain); background:linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 0 0 1px rgba(255,255,255,.16); }

/* they rise from their own lines as the page opens: no waiting, no loader */
@keyframes hs-up{ from{ transform:translate3d(0,112%,0); } to{ transform:none; } }
@keyframes hs-fade{ from{ opacity:0; transform:translate3d(0,14px,0); } to{ opacity:1; transform:none; } }
html.hs-on .hs-h1 .l > span{ animation:hs-up 1.1s cubic-bezier(.16,1,.3,1) .05s both; }
html.hs-on .hs-h1 .l + .l > span{ animation-delay:.15s; }
html.hs-on .hs-kick{ animation:hs-fade .8s var(--ease) both; }
html.hs-on .hs-lead{ animation:hs-fade .9s var(--ease) .35s both; }
html.hs-on .hs-cta{ animation:hs-fade .9s var(--ease) .5s both; }

/* ---------- what it has built, one at a time beside the phone ---------- */
.hs-ch{ display:none; }
html.hs-on .hs-ch{ display:block; position:absolute; left:var(--gut); top:calc(50% + 30px); width:min(38vw, 560px); height:0; list-style:none; margin:0; padding:0; }
.hs-ch > li{ position:absolute; left:0; right:0; top:0; transform:translateY(-50%); }
.hs-ch > li > div{ opacity:0; will-change:transform, opacity; }
.hs-ck{ display:flex; align-items:center; gap:10px; font:400 12px/16px var(--mono); letter-spacing:.02em; color:var(--travertine); margin-bottom:clamp(14px, 2.4vh, 20px); }
.hs-ck i{ width:22px; height:22px; border-radius:6px; flex:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); display:grid; place-items:center; font:700 11px/1 var(--sans); font-style:normal; color:#fff; }
.hs-who{ display:flex; align-items:center; gap:10px; margin:0 0 clamp(14px, 2.2vh, 20px); font:500 15px/1 var(--sans); color:var(--travertine); letter-spacing:-.01em; }
.hs-who .ck-ic{ width:28px; height:28px; border-radius:7px; }
.hs-ct{ font:500 clamp(36px, min(4.4vw, 7.6vh), 76px)/1 var(--sans); letter-spacing:-.045em; text-wrap:balance; }
.hs-ct em{ font-family:var(--accent); font-style:italic; font-weight:300; letter-spacing:-.025em; }
.hs-cd{ margin-top:clamp(14px, 2.4vh, 22px); max-width:36ch; font:400 clamp(15px, 1.2vw, 19px)/1.5 var(--sans); color:var(--travertine); }
.ck-ic{ width:24px; height:24px; border-radius:6px; flex:none; object-fit:cover; box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 2px 6px rgba(0,0,0,.3); }

/* ---------- the phone: the Callster render, twice as sharp ---------- */
.hs-ph{ --ph-h:min(78vh, 820px); position:absolute; height:var(--ph-h); width:calc(var(--ph-h) * 560 / 1168);
  top:calc(50% - var(--ph-h) / 2 + 30px); left:calc(66% - var(--ph-h) * 280 / 1168); transform-origin:0 0; will-change:transform; }
@supports (height:1svh){ .hs-ph{ --ph-h:min(78svh, 820px); } }
.hs-dev{ width:100%; height:100%; }
html.hs-on .hs-dev{ animation:hs-rise 1.3s cubic-bezier(.16,1,.3,1) .1s both; }
@keyframes hs-rise{ from{ opacity:0; transform:translate3d(0,10%,0) scale(.96); } to{ opacity:1; transform:none; } }
.hs .dev-iph::before{ box-shadow:0 50px 120px rgba(0,0,0,.55), 0 0 90px rgba(58,85,168,.28); }
.hs-dev .scr{ background:#000; }

/* the screens, one over the next */
.hs-s{ position:absolute; inset:0; z-index:0; overflow:hidden; }
html.hs-on .hs-s[data-s]{ opacity:0; will-change:transform, opacity; }
.hs-s[data-s="1"]{ transform-origin:50% 66%; }
.hs-s[data-s="2"]{ transform-origin:50% 100%; }
.hs-s[data-s="3"]{ transform-origin:50% 50%; }
.hs-s video, .hs-s .full{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 0; }
.hs-s .sb{ background:var(--sb, transparent); color:var(--sbc, #fff); }

/* the lock screen, in iOS's own glass */
.hs-lock{ background:radial-gradient(130% 70% at 50% 0%, #3A55A8 0%, var(--deep) 18%, var(--navy-800) 52%, var(--navy-950) 100%); }
.hs-lock .d{ position:absolute; top:19cqw; left:0; right:0; text-align:center; color:rgba(255,255,255,.88);
  font:600 4.6cqw/1 -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif; }
.hs-lock .d::first-letter{ text-transform:uppercase; }
.hs-lock .clock{ position:absolute; top:24cqw; left:0; right:0; text-align:center; color:rgba(255,255,255,.96);
  font:700 24cqw/1 -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif; letter-spacing:-.04em; }
.hs-lock .note{ position:absolute; left:4.5cqw; right:4.5cqw; display:flex; align-items:center; gap:3cqw; padding:3.2cqw 3.6cqw; border-radius:6.4cqw;
  background:linear-gradient(160deg, rgba(255,255,255,.26), rgba(255,255,255,.12)); color:#fff;
  -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(255,255,255,.18), 0 3cqw 8cqw rgba(0,0,0,.25);
  font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif; }
html.hs-on .hs-lock .note{ opacity:0; transform:translate3d(0,-6cqw,0) scale(.94); transition:opacity .5s ease, transform .7s cubic-bezier(.2,1.2,.3,1); }
html.hs-n1 .hs-lock .n1, html.hs-n2 .hs-lock .n2{ opacity:1; transform:none; }
.hs-lock .note.n1{ top:62%; }
.hs-lock .note.n2{ top:75%; }
.hs-lock .note div{ display:flex; flex-direction:column; min-width:0; gap:.6cqw; }
.hs-lock .note b{ font-weight:600; font-size:3.7cqw; line-height:1.15; }
.hs-lock .note div span{ font-size:3.4cqw; line-height:1.25; color:rgba(255,255,255,.85); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hs-lock .note em{ margin-left:auto; align-self:flex-start; font-style:normal; font-size:3cqw; color:rgba(255,255,255,.6); }
.hs-lock .ni{ position:relative; flex:none; width:9cqw; height:9cqw; border-radius:2.2cqw; object-fit:cover; box-shadow:0 0 0 1px rgba(255,255,255,.18);
  display:grid; place-items:center; color:#fff; font:700 4.6cqw/1 -apple-system, system-ui, sans-serif; }

/* the screen turns to paper, then a sheet of it covers the window */
.hs-white{ position:absolute; inset:0; z-index:3; background:var(--porcelain); opacity:0; pointer-events:none; border-radius:13% / 6.2%; }
/* Safari lets a composited layer inside a rounded, scaled box show its
   square corners unless the box has a mask of its own */
.hs-dev .scr{ -webkit-mask-image:-webkit-radial-gradient(white, black); }
.hs-paper{ position:absolute; inset:0; background:var(--porcelain); opacity:0; pointer-events:none; }
html.hx-paper .tb{ background:var(--smoke-dense); }

/* ---------- a phone held upright ---------- */
@media (max-aspect-ratio:1/1), (max-width:760px){
  .hs{ background-image:radial-gradient(90% 55% at 50% 66%, var(--navy-800), var(--navy-950) 72%); }
  .hs-glow{ left:50%; top:66%; width:110vw; height:110vw; margin:-55vw 0 0 -55vw; }
  .hs-copy{ left:20px; right:20px; width:auto; top:calc(76px + env(safe-area-inset-top)); transform:none; }
  .hs-h1{ font-size:min(14vw, 60px); }
  .hs-lead{ display:none; }
  .hs-cta{ margin-top:20px; }
  .hs-cta .btn{ height:46px; }
  html.hs-on .hs-ch{ left:20px; right:20px; width:auto; top:calc(92px + env(safe-area-inset-top)); }
  .hs-ch > li{ transform:none; }
  .hs-ck{ margin-bottom:10px; }
  .hs-ct{ font-size:min(8vw, 34px); }
  .hs-cd{ margin-top:10px; font-size:15px; line-height:1.45; }
  .hs-ph{ --ph-h:min(62vh, 600px); top:calc(100vh - var(--ph-h) - 3vh); left:calc(50% - var(--ph-h) * 280 / 1168); }
  @supports (height:1svh){ .hs-ph{ --ph-h:min(62svh, 600px); top:calc(100svh - var(--ph-h) - 3svh); } }
}
@media (max-aspect-ratio:1/1) and (max-height:720px), (max-width:760px) and (max-height:720px){
  .hs-cd{ display:none; }
}

/* ---------- the bar: a pane of liquid glass, Lesreg's mark beside its
   name, and a menu of two lines that folds into a cross ---------- */
.tb{ border:0; background:linear-gradient(165deg, rgba(36,42,58,.62), rgba(12,14,20,.5));
  -webkit-backdrop-filter:blur(20px) saturate(1.7); backdrop-filter:blur(20px) saturate(1.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), inset 0 0 0 .5px rgba(255,255,255,.16), inset 0 -10px 20px -14px rgba(160,185,255,.25), 0 12px 32px rgba(0,0,0,.28); }
html.nav-light .tb, html.hx-paper .tb{ background:linear-gradient(165deg, rgba(40,44,54,.8), rgba(14,15,16,.74)); }
.tb-brand{ align-items:center; }
.tb-mark{ width:22px; height:22px; flex:none; color:var(--porcelain); }
.tb-menu{ position:relative; }
/* the menu button and its sheet up to where the links fit in the bar */
@media (min-width:761px) and (max-width:1099px){
  .tb-r .tb-menu{ display:inline-flex; }
  .mm-card{ max-width:560px; margin:0 auto; }
}
@media (max-width:1099px){
  .tb{ padding:0 6px 0 18px; }
  .tb-brand{ gap:10px; }
  .tb-brand b{ font:600 17px/1 var(--sans); letter-spacing:-.02em; }
  /* the menu: a slim capsule of glass in the bar, its word and the two short
     lines of LA2.1 Icon / Menu; open, the word reads Luk and the lines fold
     into a small, thin cross. Quiet: no fill, no colour. */
  .tb-menu{ display:inline-flex; align-items:center; gap:10px; height:38px; padding:0 14px 0 16px; border-radius:19px;
    background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); color:var(--porcelain); font:500 14px/16px var(--sans); transition:background .2s var(--ease); }
  .tb-menu:active{ background:rgba(255,255,255,.16); }
  .tb-mt{ display:grid; }
  .tb-mt > span{ grid-area:1 / 1; transition:opacity .25s var(--ease), transform .35s var(--ease); }
  .tb-mt .c{ opacity:0; transform:translateY(6px); }
  html.mm-open .tb-mt .o{ opacity:0; transform:translateY(-6px); }
  html.mm-open .tb-mt .c{ opacity:1; transform:none; }
  .tb-menu .lens{ position:relative; width:14px; height:14px; border-radius:0; background:none; box-shadow:none; }
  .tb-menu .lens i{ position:absolute; height:1.5px; border-radius:1px; background:var(--porcelain); transition:transform .38s cubic-bezier(.2,.9,.25,1), top .38s cubic-bezier(.2,.9,.25,1), left .38s cubic-bezier(.2,.9,.25,1); }
  .tb-menu .lens i:first-child{ left:0; right:0; top:3.25px; }
  .tb-menu .lens i:last-child{ left:5px; right:0; top:9.25px; }
  html.mm-open .tb-menu .lens i:first-child{ top:6.25px; transform:rotate(45deg) scaleX(.85); }
  html.mm-open .tb-menu .lens i:last-child{ left:0; top:6.25px; transform:rotate(-45deg) scaleX(.85); }
}

/* ---------- the bar: links to the sections ---------- */
.tb-links{ display:none; }
@media (min-width:1100px){
  .tb-links{ display:flex; gap:2px; margin:0 auto 0 28px; }
  .tb-links a{ height:40px; padding:0 14px; display:flex; align-items:center; border-radius:20px; font:400 14px/16px var(--sans); color:var(--porcelain); opacity:.86; transition:background-color .25s var(--ease), opacity .25s; }
  .tb-links a:hover{ background:rgba(246,244,239,.12); opacity:1; }
}
/* ---------- the bar on a computer: the same slim glass as on the phone ---
   the mark and the name alone, the links quiet, the language as a small
   capsule and the button slim, its lens shrunk to match */
@media (min-width:761px){
  .tb{ height:60px; border-radius:30px; padding:0 8px 0 22px; }
  .tb-brand{ gap:10px; }
  .tb-brand b{ font:600 18px/1 var(--sans); letter-spacing:-.02em; }
  .tb-brand .anno{ display:none; }
  .tb-r{ gap:10px; }
  .tb-r .seg{ padding:3px; border-radius:20px; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
  .tb-r .seg button{ height:34px; padding:0 12px; border-radius:17px; font:500 12.5px/1 var(--sans); letter-spacing:.02em; color:rgba(246,244,239,.7); }
  .tb-r .seg button[aria-pressed="true"]{ background:rgba(255,255,255,.16); color:var(--porcelain); }
  .tb-r .btn{ height:44px; gap:12px; padding:0 4px 0 18px; border-radius:22px; font-size:14px; }
  .tb-r .btn .lens{ width:36px; height:36px; border-radius:18px; }
  .tb-r .btn .lens svg{ width:14px; height:14px; }
}
/* LA31 Nav / Mobile menu: the navy of the page over all of it (opaque, so
   Safari's bars and the strips at the edges are one colour with it), and a
   card of Smoke glass that drops from under the bar: the four solutions as
   tiles, the sections as rows, the booking button, mail and language */
.mm{ position:fixed; inset:0; z-index:55; padding:80px 16px calc(16px + env(safe-area-inset-bottom)); overflow-y:auto; overscroll-behavior:contain;
  background:radial-gradient(70% 40% at 50% 0%, #18264A, #05080F 70%); background-color:#05080F;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s; }
html.mm-open .mm{ opacity:1; visibility:visible; }
html.mm-open .edge{ background:#05080F !important; }
html.mm-open, html.mm-open body{ overflow:hidden; }
.mm-card{ position:relative; padding:18px 16px 16px; border-radius:28px; color:var(--porcelain); background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  transform:translateY(-12px) scale(.98); transform-origin:50% 0; transition:transform .45s cubic-bezier(.2,.9,.25,1); }
html.mm-open .mm-card{ transform:none; }
.mm-lab{ margin:0 4px 10px; color:rgba(246,244,239,.55); }
.mm-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mm-tile{ display:flex; flex-direction:column; gap:2px; padding:14px; border-radius:18px; background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
.mm-tile:active, .mm-row:active{ background:rgba(255,255,255,.12); }
.mm-ic{ width:34px; height:34px; margin-bottom:10px; border-radius:11px; display:grid; place-items:center; background:var(--porcelain); }
.mm-ic svg{ width:18px; height:18px; fill:none; stroke:var(--obsidian); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.mm-tile b{ font:500 17px/22px var(--sans); letter-spacing:-.01em; }
.mm-tile small, .mm-row small{ font:400 12.5px/17px var(--sans); color:rgba(246,244,239,.6); }
.mm-rows{ display:flex; flex-direction:column; margin-top:10px; }
.mm-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:60px; padding:8px 6px 8px 4px; border-radius:12px; border-bottom:1px solid rgba(246,244,239,.1); }
.mm-row span{ display:flex; flex-direction:column; gap:2px; }
.mm-row b{ font:500 20px/24px var(--sans); letter-spacing:-.015em; }
.mm-arw{ flex:none; width:18px; height:18px; color:rgba(246,244,239,.5); }
.mm-card .btn{ width:100%; justify-content:space-between; margin-top:16px; }
/* about: Mikkel's film, small, leading to the page where it plays */
.mm-vd{ display:grid; grid-template-columns:132px minmax(0, 1fr) auto; align-items:center; gap:14px; margin-top:10px; padding:8px 10px 8px 8px; border-radius:18px;
  background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
.mm-vd:active{ background:rgba(255,255,255,.12); }
.mm-vd-f{ position:relative; aspect-ratio:16 / 9; border-radius:12px; overflow:hidden; display:grid; place-items:center;
  background:radial-gradient(60% 90% at 30% 30%, rgba(36,54,232,.55), transparent 70%), radial-gradient(50% 80% at 80% 80%, rgba(242,138,62,.3), transparent 70%), #0A1020; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.mm-vd-f i{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.18); box-shadow:inset 0 0 0 1px rgba(255,255,255,.4); }
.mm-vd-f i svg{ width:11px; height:11px; margin-left:2px; fill:var(--porcelain); }
.mm-vd-f em{ position:absolute; right:6px; bottom:5px; padding:2px 6px; border-radius:6px; background:rgba(14,15,16,.7); font:500 10px/1.2 var(--sans); font-style:normal; }
.mm-vd > span:not(.mm-vd-f){ display:flex; flex-direction:column; gap:2px; }
.mm-vd b{ font:500 17px/22px var(--sans); }
.mm-vd small{ font:400 12.5px/17px var(--sans); color:rgba(246,244,239,.6); }
.mm-ft{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding:0 4px; }
.mm-ft .anno{ color:rgba(246,244,239,.6); }
.mm .seg button{ height:36px; padding:0 14px; border-radius:18px; color:var(--porcelain); }
.mm .seg button[aria-pressed="true"]{ background:var(--porcelain); color:var(--obsidian); }
@media (min-width:1100px){ .mm{ display:none; } }

@media (prefers-reduced-motion: reduce){
  html.hs-on .hs-track{ height:auto; }
  html.hs-on .hs-ch{ display:none; }
  html.hs-on .hs-h1 .l > span, html.hs-on .hs-kick, html.hs-on .hs-lead, html.hs-on .hs-cta, html.hs-on .hs-dev{ animation:none; }
  html.hs-on .hs-lock .note{ opacity:1; transform:none; transition:none; }
}

/* ---------- the page it opens into: one sentence with what it says running
   inside it. On its own it is a plain section after the phone; with the
   phone turning, it lies over the stage and is written onto the white. */
.hs-end{ position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
  min-height:70vh; padding:clamp(96px, 14vh, 150px) var(--gut) clamp(64px, 10vh, 120px); background:var(--porcelain); color:var(--obsidian); }
@media (prefers-reduced-motion: no-preference){
  html.hs-on .hs-end{ position:sticky; top:0; height:100vh; height:100lvh; min-height:0; margin-top:-100vh; margin-top:-100lvh; background:none; pointer-events:none;
    padding-top:72px; padding-bottom:0; padding-bottom:calc(100lvh - 100svh); }
  html.hs-on .hs-end .g{ opacity:0; will-change:transform, opacity; }
  html.hs-on .hs-end.on{ pointer-events:auto; }
}
.hs-say{ max-width:1180px; font:500 clamp(40px, min(6vw, 10.5vh), 104px)/1.1 var(--sans); letter-spacing:-.045em; text-wrap:balance; }
.hs-say .g, .hs-say2 .g{ display:inline-block; white-space:nowrap; }
.hs-say2{ margin-top:clamp(18px, 3.4vh, 34px); font:400 clamp(20px, 2vw, 32px)/1.3 var(--sans); letter-spacing:-.02em; color:var(--graphite); }
.hs-say2 em{ font-family:var(--accent); font-style:italic; font-weight:300; color:var(--obsidian); }

/* the pills: what each word means, as small live screens drawn in code, so
   they stay sharp at any size. Inside a pill one em is a tenth of its
   height. They run only while the sentence is on screen (.hs-end.on). */
.pill{ position:relative; display:inline-block; vertical-align:-.1em; height:.8em; width:1.6em; margin-right:.04em; border-radius:.4em; overflow:hidden;
  background:var(--navy-900); box-shadow:inset 0 0 0 1px rgba(14,15,16,.08), 0 .06em .22em rgba(14,15,16,.16); transform:translateZ(0); }
.pill .pu{ position:absolute; inset:0; display:flex; align-items:center; font-size:.08em; letter-spacing:0; }
.pill img{ display:block; }

/* apps: a Live Activity in the island, the order ready at 17.30 */
.pill-app{ width:1.85em; background:#000; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), 0 .06em .22em rgba(14,15,16,.2); }
.pill-app .pu{ padding:0 1.7em 0 1.8em; gap:1.3em; }
.pa-ic{ flex:none; width:6.2em; height:6.2em; border-radius:1.7em; }
.pa-t{ display:flex; flex-direction:column; font:500 1.75em/1.18 var(--sans); color:#fff; letter-spacing:-.01em; }
.pa-t span{ font-weight:400; color:#FF9F0A; font-variant-numeric:tabular-nums; }
.pa-ring{ flex:none; margin-left:auto; width:5.4em; height:5.4em; transform:rotate(-90deg); }
.pa-ring circle{ fill:none; stroke-width:4; }
.pa-ring .bg{ stroke:rgba(255,255,255,.16); }
.pa-ring .fg{ stroke:#FF9F0A; stroke-linecap:round; stroke-dasharray:1 1; stroke-dashoffset:.32; }
.hs-end.on .pa-ring .fg{ animation:pa-ring 5s var(--ease) infinite; }
@keyframes pa-ring{ 0%{ stroke-dashoffset:.92; } 70%, 88%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:.92; } }

/* liquid glass, for the dashboard and the sync: a slow light of colour under
   the pill, and over it a pane that blurs it, lit along its top edge with a
   bright sheen across it. The light only drifts while the sentence shows. */
.pg-light{ position:absolute; inset:-30%; border-radius:inherit; pointer-events:none; }
.pill-sys .pg-light{ background:radial-gradient(40% 55% at 22% 40%, rgba(36,54,232,.55), transparent 70%), radial-gradient(40% 60% at 80% 70%, rgba(242,138,62,.55), transparent 70%), radial-gradient(35% 50% at 60% 10%, rgba(110,170,255,.5), transparent 70%), #EDE9E1; }
.pill-int .pg-light{ background:radial-gradient(40% 60% at 20% 70%, rgba(36,54,232,.95), transparent 70%), radial-gradient(36% 60% at 85% 30%, rgba(242,138,62,.6), transparent 70%), radial-gradient(30% 50% at 55% 100%, rgba(110,170,255,.6), transparent 70%), #0A1020; }
.hs-end.on .pg-light{ animation:pg-drift 9s ease-in-out infinite alternate; }
@keyframes pg-drift{ to{ transform:translate3d(8%, -6%, 0) rotate(8deg); } }
.pill-sys .pu, .pill-int .pu{ border-radius:inherit; -webkit-backdrop-filter:blur(.9em) saturate(1.6); backdrop-filter:blur(.9em) saturate(1.6); }
.pill-sys .pu::after, .pill-int .pu::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.28) 46%, rgba(255,255,255,0) 60%); }

/* systems: the dashboard of the business, today's orders ticking from 23 to
   24 with a green +1, and the day's bars growing; on frosted white glass */
.pill-sys{ background:#EDE9E1; box-shadow:0 .06em .22em rgba(14,15,16,.16); }
.pill-sys .pu{ padding:0 1.7em 0 2em; justify-content:space-between; gap:1.2em; background:rgba(255,255,255,.58);
  box-shadow:inset 0 .12em 0 rgba(255,255,255,.95), inset 0 -.1em 0 rgba(255,255,255,.4), inset 0 0 0 .1em rgba(255,255,255,.6); }
.pd-l{ position:relative; z-index:1; display:flex; flex-direction:column; gap:.35em; }
.pd-lab{ font:500 1.2em/1 var(--sans); color:var(--graphite); white-space:nowrap; }
.pd-n{ position:relative; display:flex; align-items:center; gap:.5em; }
.pd-roll{ display:block; height:1em; overflow:hidden; font:600 4.6em/1 var(--sans); letter-spacing:-.04em; color:var(--obsidian); font-variant-numeric:tabular-nums; }
.pd-roll span{ display:block; height:1em; }
.pd-up{ font:600 1.25em/1 var(--sans); font-style:normal; color:#1E7A3C; background:rgba(255,255,255,.7); box-shadow:inset 0 0 0 .08em rgba(52,199,89,.5); padding:.3em .45em; border-radius:.6em; opacity:0; }
.pd-bars{ position:relative; z-index:1; display:flex; align-items:flex-end; gap:.4em; height:6em; }
.pd-bars i{ display:block; width:.85em; height:100%; border-radius:.3em; background:rgba(14,15,16,.16); transform-origin:50% 100%; transform:scaleY(var(--h)); }
.pd-bars .pd-now{ background:var(--ultra); transform:scaleY(.92); }
.hs-end.on .pd-roll span{ animation:pd-roll 4.2s var(--ease) infinite; }
.hs-end.on .pd-up{ animation:pd-up 4.2s var(--ease) infinite; }
.hs-end.on .pd-now{ animation:pd-now 4.2s var(--ease) infinite; }
@keyframes pd-roll{ 0%{ opacity:0; transform:none; } 5%, 44%{ opacity:1; transform:none; } 54%, 92%{ opacity:1; transform:translateY(-100%); } 100%{ opacity:0; transform:translateY(-100%); } }
@keyframes pd-up{ 0%, 48%{ opacity:0; transform:translateY(.4em) scale(.7); } 56%, 90%{ opacity:1; transform:none; } 100%{ opacity:0; } }
@keyframes pd-now{ 0%{ transform:scaleY(.5); background:rgba(14,15,16,.16); } 44%{ transform:scaleY(.5); background:rgba(14,15,16,.16); } 56%, 92%{ transform:scaleY(.92); background:var(--ultra); } 100%{ transform:scaleY(.5); background:rgba(14,15,16,.16); } }

/* integrations: a sync notice on dark glass, the shop and the books on top
   of each other; "Syncing" with the arrows turning, then "Booked" and a tick */
.pill-int{ width:2.15em; background:#0A1020; box-shadow:0 .06em .22em rgba(14,15,16,.22); }
.pill-int .pu{ padding:0 1.8em 0 1.7em; gap:1.3em; background:rgba(10,16,32,.42);
  box-shadow:inset 0 .12em 0 rgba(255,255,255,.32), inset 0 0 0 .1em rgba(255,255,255,.14); }
.pn-ic{ position:relative; flex:none; width:8em; height:5.4em; }
.pn-ic img{ position:absolute; top:.4em; width:4.6em; height:4.6em; border-radius:50%; box-shadow:0 0 0 .3em rgba(10,16,32,.85), 0 .3em .8em rgba(0,0,0,.4); }
.pn-a{ left:0; z-index:1; } .pn-b{ left:3.2em; }
.pn-t{ position:relative; display:flex; flex-direction:column; gap:.25em; min-width:0; }
.pn-l1{ display:grid; justify-items:start; font:500 1.75em/1.1 var(--sans); color:#fff; letter-spacing:-.01em; }
.pn-l1 b{ grid-area:1 / 1; font-weight:500; white-space:nowrap; }
.pn-d{ opacity:0; }
.pn-l2{ font:400 1.35em/1 var(--sans); color:rgba(246,244,239,.62); }
.pn-st{ position:relative; flex:none; margin-left:auto; width:4.4em; height:4.4em; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.1); box-shadow:inset 0 .1em 0 rgba(255,255,255,.3), inset 0 0 0 .1em rgba(255,255,255,.12); }
.pn-st svg{ grid-area:1 / 1; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.pn-sync{ width:2.6em; height:2.6em; stroke:#fff; stroke-width:2; opacity:0; }
.pn-ok{ width:2.4em; height:2.4em; stroke:#fff; stroke-width:2.4; }
.pill-int .pn-st{ background:#34C759; box-shadow:0 0 0 .4em rgba(52,199,89,.2); }
.hs-end.on .pn-st{ animation:pn-st 3.8s ease infinite; }
.hs-end.on .pn-sync{ animation:pn-sync 3.8s linear infinite; }
.hs-end.on .pn-ok{ animation:pn-ok 3.8s var(--ease) infinite; }
.hs-end.on .pn-w{ animation:pn-w 3.8s ease infinite; }
.hs-end.on .pn-d{ animation:pn-d 3.8s ease infinite; }
.hs-end.on .pn-b{ animation:pn-b 3.8s var(--ease) infinite; }
@keyframes pn-st{ 0%, 52%{ background:rgba(255,255,255,.1); box-shadow:inset 0 .1em 0 rgba(255,255,255,.3), inset 0 0 0 .1em rgba(255,255,255,.12); } 58%, 92%{ background:#34C759; box-shadow:0 0 0 .4em rgba(52,199,89,.22), 0 0 1.6em rgba(52,199,89,.6); } 100%{ background:rgba(255,255,255,.1); } }
@keyframes pn-sync{ 0%{ opacity:1; transform:rotate(0); } 50%{ opacity:1; transform:rotate(540deg); } 55%, 100%{ opacity:0; transform:rotate(600deg); } }
@keyframes pn-ok{ 0%, 53%{ opacity:0; transform:scale(.3); } 60%{ opacity:1; transform:scale(1.15); } 66%, 92%{ opacity:1; transform:none; } 100%{ opacity:0; } }
@keyframes pn-w{ 0%, 50%{ opacity:1; transform:none; } 56%, 96%{ opacity:0; transform:translateY(-.3em); } 100%{ opacity:1; transform:none; } }
@keyframes pn-d{ 0%, 52%{ opacity:0; transform:translateY(.3em); } 58%, 94%{ opacity:1; transform:none; } 100%{ opacity:0; } }
@keyframes pn-b{ 0%, 50%{ transform:none; } 56%{ transform:translateX(-.5em) scale(1.06); } 64%, 100%{ transform:none; } }
@media (prefers-reduced-motion: reduce){ .pill *, .pill *::after{ animation:none !important; } }

@media (max-aspect-ratio:1/1), (max-width:760px){
  .hs-say{ font-size:min(9.4vw, 46px); line-height:1.14; }
  .hs-say2{ font-size:min(5.2vw, 22px); }
}

/* the films are shown once a frame of them is drawn; their first picture lies under them */
html.hs-on .hs-s video{ opacity:0; }

@media (max-aspect-ratio:1/1), (max-width:760px){
  .hs-ph{ --ph-h:min(58vh, 560px); }
  @supports (height:1svh){ .hs-ph{ --ph-h:min(58svh, 560px); } }
}
@media (max-aspect-ratio:1/1) and (max-height:820px), (max-width:760px) and (max-height:820px){ .hs-cd{ display:none; } }

/* ---------- iOS 18's lock screen: the padlock, the date over a heavy clock,
   the torch and the camera, the home bar ---------- */
.hs-lock .lk{ position:absolute; top:14.2cqw; left:50%; width:4.8cqw; height:4.8cqw; margin-left:-2.4cqw; }
.hs-lock .d{ top:21.5cqw; font:600 4.7cqw/1 -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif; color:rgba(255,255,255,.92); letter-spacing:.01em; }
.hs-lock .clock{ top:26.5cqw; font:700 25.5cqw/1 -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif; letter-spacing:-.035em; color:#fff;
  text-shadow:0 .4cqw 2cqw rgba(0,0,0,.12); }
.hs-lock .lkb{ position:absolute; bottom:9cqw; width:12.5cqw; height:12.5cqw; border-radius:50%; display:grid; place-items:center;
  background:rgba(20,26,44,.42); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:inset 0 0 0 .3cqw rgba(255,255,255,.08); }
.hs-lock .lkb.l{ left:11cqw; }
.hs-lock .lkb.r{ right:11cqw; }
.hs-lock .lkb svg{ width:5.6cqw; height:5.6cqw; }
/* iOS's home indicator, to Apple's measure on a 402 pt screen: 134 x 5 pt,
   a capsule, 8 pt above the bottom edge. It belongs to the phone, not to the
   app: it stays put at the bottom of the glass while the screens move, goes
   while the app switcher is up, and is light on dark and dark on light */
.hs-hb{ position:absolute; z-index:2; left:50%; bottom:1.99cqw; width:33.33cqw; height:1.244cqw; margin-left:-16.67cqw; border-radius:100px;
  background:#fff; mix-blend-mode:difference; pointer-events:none; }
.hs-lock .note.n1{ top:58%; }
.hs-lock .note.n2{ top:70%; }

/* ---------- the app switcher: what lies behind the cards, and each app's
   icon and name above its card ---------- */
.hs-s{ border-radius:13% / 6.2%; transform-origin:50% 50%; }
/* the card left behind in the switcher is dimmed under the next */
.hs-s::after{ content:""; position:absolute; inset:0; z-index:9; background:#000; opacity:var(--dim, 0); pointer-events:none; }
.hs-sw{ position:absolute; inset:0; z-index:-1; opacity:0; pointer-events:none;
  background:radial-gradient(120% 70% at 50% 30%, #26314f, #0b1020 60%, #05070c); }
.hs-lab{ position:absolute; left:0; top:0; z-index:4; display:flex; align-items:center; gap:2.4cqw; opacity:0; pointer-events:none; white-space:nowrap;
  font:600 3.9cqw/1 -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif; color:#fff; will-change:transform, opacity; }
.hs-lab img{ width:6.4cqw; height:6.4cqw; border-radius:1.5cqw; }

/* ---------- LA32 button, sharpened ----------
   Crisp at any pixel density: a one-pixel light along the top edge and a
   hairline round it instead of a blurred sheen, the lens a small sphere in
   the opposite tone with the arrow on whole pixels (no half-pixel nudge to
   soften it). Hover lifts the button a pixel and slides the arrow; a press
   gives a little. Only transform and shadow move, so it keeps the screen's
   full frame rate. */
.btn{ position:relative; isolation:isolate; gap:14px; padding:0 5px 0 22px; font:500 15px/1 var(--sans); letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; cursor:pointer;
  background:linear-gradient(180deg, #24262C, #0E0F10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.3), 0 10px 24px -12px rgba(0,0,0,.6);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s cubic-bezier(.2,.8,.2,1); }
.btn.light{ background:linear-gradient(180deg, #FFFFFF, #EFECE5); color:var(--obsidian);
  box-shadow:inset 0 1px 0 #fff, inset 0 -1px 0 rgba(14,15,16,.07), 0 0 0 1px rgba(14,15,16,.08), 0 1px 2px rgba(0,0,0,.18), 0 10px 24px -12px rgba(0,0,0,.5); }
.btn .lens{ width:38px; height:38px; border-radius:19px; color:#fff;
  background:linear-gradient(180deg, #2C2F36, #0E0F10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.35);
  transition:background .3s ease, box-shadow .3s ease; }
.btn:not(.light):not(.glass) .lens{ color:var(--obsidian); background:linear-gradient(180deg, #FFFFFF, #E6E2DA); box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,.35); }
.btn .lens svg{ width:16px; height:16px; transform:none; transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.btn.glass{ padding:0 22px; color:var(--porcelain); background:linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.05));
  -webkit-backdrop-filter:blur(16px) saturate(160%); backdrop-filter:blur(16px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), inset 0 0 0 1px rgba(255,255,255,.14), 0 10px 24px -12px rgba(0,0,0,.6); }
@media (hover:hover){
  .btn:hover{ transform:translateY(-1px); }
  .btn.light:hover{ box-shadow:inset 0 1px 0 #fff, inset 0 -1px 0 rgba(14,15,16,.07), 0 0 0 1px rgba(14,15,16,.08), 0 2px 4px rgba(0,0,0,.18), 0 16px 32px -14px rgba(0,0,0,.55); }
  .btn:hover .lens{ background:linear-gradient(180deg, #4A5BFF, #2436E8); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 2px 8px rgba(36,54,232,.45); }
  .btn:hover .lens svg{ transform:translateX(2px); }
  .btn.glass:hover{ background:linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.08)); }
}
.btn:active{ transform:scale(.97); transition-duration:.12s; }
.btn:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--navy-950), 0 0 0 4px var(--ultra); }
.tb-r .btn .lens{ width:34px; height:34px; border-radius:17px; }