/* Layout: the page opens on the skipper's view, and scrolling goes through the fog to one fixed sky with the lighthouse on its island in it. The day turns to dusk as the page scrolls and the lamp takes over;
   then colour layers slide up one over another and the beam lights each title. Type, pills and the frosted bar follow the Apple reference in lab/apple-DESIGN.md,
   with Ráðvit's navy as ink and its orange as the one accent. */
:root {
  --navy: #0b2a5c;
  --gain: #ff6b2c;
  --gain-hi: #ff7f47;
  --dusk: 0; /* 0 by day, 1 at dusk; set from the scroll */
  --ink: color-mix(in srgb, #ffffff calc(var(--dusk) * 100%), var(--navy));
  --ink-soft: color-mix(in srgb, rgb(255 255 255 / 0.8) calc(var(--dusk) * 100%), rgb(11 42 92 / 0.8));
  --hair: color-mix(in srgb, rgb(255 255 255 / 0.45) calc(var(--dusk) * 100%), rgb(11 42 92 / 0.34));
  --bar: color-mix(in srgb, rgb(12 20 62 / 0.26) calc(var(--dusk) * 100%), rgb(255 255 255 / 0.3));
  --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --out: cubic-bezier(0.16, 1, 0.3, 1);
  --pad: clamp(20px, 4.4vw, 64px);
  --gl: max(var(--pad), env(safe-area-inset-left, 0px));
  --gr: max(var(--pad), env(safe-area-inset-right, 0px));
  --top-h: 76px;
}
body { /* the sky: morning until the scroll says otherwise */
  --sky0: #6db5ff; --sky1: #a3d3ff; --sky2: #d2eaff; --sky3: #ecf6ff; --sky4: #ffffff;
  --sun: rgb(255 250 240 / 0.95); --sun0: rgb(255 250 240 / 0); --sun-x: 15%; --sun-y: 10%; --sun-r: 36; --horizon: 74%;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: #a3d3ff; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
::selection { background: var(--gain); color: var(--navy); }
html:not(.live) { scroll-padding-top: calc(var(--top-h) + 16px); }
body { margin: 0; background: #a3d3ff; font-family: var(--font); font-size: 17px; line-height: 1.47; letter-spacing: -0.022em; color: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { content: ""; position: fixed; z-index: 0; inset: 0; pointer-events: none;
  background:
    radial-gradient(calc(var(--sun-r) * 1vmax) calc(var(--sun-r) * 1vmax) at var(--sun-x) var(--sun-y), var(--sun), var(--sun0) 70%),
    linear-gradient(180deg, var(--sky0) 0%, var(--sky1) 30%, var(--sky2) 58%, var(--sky3) var(--horizon), var(--sky4) 100%); }
h1, h2, p, ol { margin: 0; padding: 0; }
ol { list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

/* ---------- shared pieces ---------- */
.top { position: fixed; z-index: 6; inset: 0 0 auto 0; height: calc(var(--top-h) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) var(--gr) 0 var(--gl); display: flex; align-items: center; justify-content: space-between;
  background: color-mix(in srgb, var(--bar) calc(var(--bar-on, 1) * 100%), transparent); -webkit-backdrop-filter: saturate(calc(100% + 80% * var(--bar-on, 1))) blur(calc(20px * var(--bar-on, 1))); backdrop-filter: saturate(calc(100% + 80% * var(--bar-on, 1))) blur(calc(20px * var(--bar-on, 1))); }
.logo { position: relative; display: block; line-height: 0; }
.logo img { height: 40px; width: auto; display: block; }
.logo .day { opacity: calc(1 - var(--dusk)); }
.logo .night { position: absolute; left: 0; top: 0; opacity: var(--dusk); }

.btn, .toplink { display: inline-flex; align-items: center; justify-content: center; background: var(--gain); color: var(--navy); font-weight: 600; line-height: 1.18; border-radius: 9999px; text-decoration: none; white-space: nowrap; transition: background 0.2s, transform 0.2s var(--out); }
.btn:hover, .toplink:hover { background: var(--gain-hi); }
.btn:active, .toplink:active { transform: scale(0.95); }
.toplink { font-size: 17px; letter-spacing: -0.016em; padding: 12px 22px; background: color-mix(in srgb, var(--navy) calc(var(--cta, 0) * 100%), var(--gain)); color: color-mix(in srgb, #ffffff calc(var(--cta, 0) * 100%), var(--navy)); }
.toplink:hover { background: color-mix(in srgb, #173f80 calc(var(--cta, 0) * 100%), var(--gain-hi)); }
.btn, .toplink { position: relative; }
.btn::after, .toplink::after { content: ""; position: absolute; inset: 50% -4px auto; height: max(100%, 44px); transform: translateY(-50%); } /* the press area, where the pill itself is lower than 44px */
.btn { font-size: clamp(14px, 2.6vh, 17px); padding: clamp(9px, 1.6vh, 13px) clamp(18px, 3vh, 24px); }
.btn.big { font-size: clamp(15px, 2.9vh, 19px); padding: clamp(10px, 1.9vh, 16px) clamp(20px, 3.6vh, 30px); }

h1 { font-weight: 600; font-size: clamp(1.6rem, min(5.7vw, 10.4vh), 5.5rem); line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; }
h1 .ln { display: block; overflow: hidden; padding: 0.08em 0 0.12em; margin: -0.08em 0 -0.12em; }
h1 .ln > span { display: block; }
.lead { font-size: clamp(0.9375rem, min(1.6vw, 2.9vh), 1.5rem); line-height: 1.36; letter-spacing: -0.012em; color: var(--ink-soft); max-width: 25em; text-wrap: pretty; }
.ask { font-weight: 600; font-size: clamp(1.6rem, min(5.7vw, 10.4vh), 5.5rem); line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; } /* the opening line: set as the h1 is */
h2 { font-weight: 600; font-size: clamp(1.45rem, min(4.6vw, 8vh), 4.25rem); line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance; max-width: 12.5em; }
.peak { font-weight: 600; font-size: clamp(1.5rem, min(5.6vw, 9.5vh), 5.25rem); line-height: 1.05; letter-spacing: -0.032em; }
.peak .x { font-weight: 400; color: var(--gain); }
.layer { --ink: var(--on); --hair: color-mix(in srgb, var(--on) 40%, transparent); }
.layer h2 .x { font-weight: 400; color: var(--x, var(--gain)); }
.sub { font-weight: 500; font-size: clamp(1rem, min(1.9vw, 3.3vh), 1.75rem); line-height: 1.2; letter-spacing: -0.022em; text-wrap: balance; max-width: 21em; }
.say { font-size: clamp(0.9375rem, min(1.4vw, 2.5vh), 1.3125rem); line-height: 1.42; letter-spacing: -0.012em; max-width: 26em; text-wrap: pretty; }
.layer ul { list-style: none; margin: 0; padding: 0; display: grid; width: 100%; max-width: 41em; }
.layer li { padding: clamp(6px, 1.7vh, 15px) 0; border-top: 1px solid color-mix(in srgb, var(--on) 24%, transparent); font-size: clamp(0.9375rem, min(1.45vw, 2.6vh), 1.375rem); line-height: 1.38; text-wrap: pretty; }
h2 .by { display: block; white-space: nowrap; } /* a service title is written as a sum on paper: the sign starts the second line */
.reach { display: flex; flex-wrap: wrap; gap: 2px clamp(20px, 2.6vw, 40px); font-weight: 600; font-size: clamp(1.0625rem, min(1.9vw, 3.3vh), 1.75rem); letter-spacing: -0.022em; line-height: 1.2; }
.reach a { text-decoration: none; padding: 6px 0 9px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat; transition: background-size 0.3s var(--out); }
.reach a:hover { background-size: 100% 3px; }
/* the way from a service layer to its own page: a pill in the layer's ink, so it is not taken for the orange booking button */
.go { justify-self: start; margin-top: clamp(2px, 0.8vh, 8px); background: var(--on); color: var(--bg); }
.go:hover { background: color-mix(in srgb, var(--on) 86%, var(--bg)); }
.gos { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; max-width: none; } /* two ways on from one layer, side by side */
html.live .go.lt { color: var(--bg); opacity: calc(0.5 + 0.5 * var(--l, 0)); }
html:not(.live) .go { color: #ffffff; }
/* back from that page: nothing of the opening shows while the scene loads */
html.back, html.back body { background: var(--back, #4b2d86); }
html.back body::before, html.back .reel, html.back .helm, html.back .ask, html.back .cue { display: none !important; }
@view-transition { navigation: auto; }
.foot { margin-top: clamp(2px, 1.4vh, 16px); font-size: clamp(12px, 1.9vh, 14px); letter-spacing: -0.006em; opacity: 0.74; }

/* Ráð × Vit: the founder. His portrait anchors the block; his name, what he has done and the way to the whole story stand beside it. */
.who .say { max-width: 30em; font-size: clamp(0.9375rem, min(1.6vw, 2.8vh), 1.4375rem); line-height: 1.4; }
.who .say p, .who .say blockquote { margin: 0; }
.who .say blockquote { margin-top: 0.6em; font-weight: 500; }
.who .say footer { margin-top: 0.3em; font-size: 0.78em; font-weight: 600; }
.person { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "img name" "img rows" "img more"; align-items: start; column-gap: clamp(14px, 2vw, 30px); row-gap: clamp(4px, 1.1vh, 12px); width: 100%; max-width: 44em; }
.person img { grid-area: img; display: block; width: clamp(72px, min(11vw, 18vh), 168px); height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: clamp(12px, 1.3vw, 20px); box-shadow: 0 14px 34px rgb(11 42 92 / 0.22); }
.person .id { display: contents; }
.person .id p { grid-area: name; display: grid; gap: 2px; font-size: clamp(1rem, min(1.6vw, 2.8vh), 1.4375rem); line-height: 1.2; }
.person strong { font-weight: 600; }
.person .id span { font-size: 0.74em; opacity: 0.74; }
.person ul { grid-area: rows; max-width: none; }
.who li { padding: clamp(5px, 1.25vh, 11px) 0; font-size: clamp(0.875rem, min(1.25vw, 2.2vh), 1.1875rem); }
.person .go { grid-area: more; margin-top: clamp(4px, 1vh, 10px); }
.more { grid-area: more; justify-self: start; text-decoration: none; -webkit-appearance: none; appearance: none; border: 0; margin: clamp(0px, 0.5vh, 6px) 0 0; padding: 5px 0 7px; font: inherit; font-weight: 600; font-size: clamp(14px, 2.4vh, 17px); letter-spacing: -0.016em; color: inherit; cursor: pointer;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 3px) / 100% 1.5px no-repeat; transition: background-size 0.3s var(--out); }
.more:hover { background-size: 100% 2.5px; }


/* the sum: expertise × AI = growth, drawn as three plants on one ground line. What is poured on falls as small marks. */
.sum h2 { font-size: clamp(1.3rem, min(3.6vw, 6.6vh), 3.5rem); max-width: none; }
.eq { --cap: clamp(0.8125rem, min(1.3vw, 2.3vh), 1.25rem); --fall: clamp(46px, min(8vw, 13.5vh), 124px); --rg: clamp(4px, 1.3vh, 14px);
  display: grid; grid-template-columns: minmax(min-content, 1.5fr) auto minmax(min-content, 1fr) auto minmax(min-content, 1.9fr);
  align-items: stretch; column-gap: clamp(5px, 1.5vw, 26px); width: 100%; margin-top: clamp(2px, 1.4vh, 16px); }
.term { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; row-gap: var(--rg); min-width: 0; }
/* captions are set in sentence case and stand on a shared last line: each has room for two lines and sits at the bottom of it, and the signs sit on that line too */
.cap { grid-row: 1; display: grid; align-content: end; min-height: calc(var(--cap) * 2.5); font-size: var(--cap); font-weight: 600; letter-spacing: -0.012em; line-height: 1.25; text-align: center; text-wrap: balance; color: var(--on); }
.op { align-self: start; justify-self: center; margin-top: calc(var(--cap) * 1.25); font-weight: 600; font-size: calc(var(--cap) * 1.5); line-height: calc(var(--cap) * 1.25); letter-spacing: 0; color: var(--x, var(--gain)); }
.drops { grid-row: 2; align-self: end; position: relative; width: clamp(40px, min(7vw, 12vh), 108px); height: var(--fall); color: var(--on); }
.drop { position: absolute; left: var(--sx); top: 0; display: block; line-height: 0; opacity: 0.8; translate: calc(-50% + var(--dx)) calc(var(--fall) * var(--rest)); }
.drop svg { display: block; width: clamp(11px, min(1.4vw, 2.45vh), 20px); height: auto; fill: currentColor; }
.plant { grid-row: 3; display: block; height: auto; fill: var(--on); transform-origin: 50% 100%; }
.seed .plant { width: clamp(11px, min(2.1vw, 3.6vh), 30px); }
.sapling .plant { width: clamp(26px, min(5.6vw, 9.6vh), 82px); }
.tree .plant { width: clamp(56px, min(13.4vw, 23.5vh), 200px); }
.kernel { fill: var(--gain); }
.ground { width: 100%; height: 1px; margin-top: calc(clamp(8px, 2.4vh, 26px) * -1); background: color-mix(in srgb, var(--on) 32%, transparent); transform-origin: 0 50%; }
@keyframes pour {
  0% { translate: -50% 0; opacity: 0; }
  12% { opacity: 0.8; }
  76% { opacity: 0.8; }
  100% { translate: calc(-50% + var(--dx)) var(--fall); opacity: 0; }
}

#stage canvas { display: block; width: 100%; height: 100%; }
.wash, .map, .spacer, .stars, .pool, .plate, .reel, .cue, .helm { display: none; }

/* ---------- plain page: no WebGL, or reduced motion. Short, in flow, readable, nothing moves. ---------- */
html:not(.live) #stage { position: fixed; z-index: 0; inset: 0; }
/* the plain page (motion reduced, or no scene): the copy runs down the left over a picture that stands still, so the sea would come under the lower lines. A wash of the morning sky keeps every line on a light ground; the lighthouse on the right stays clear. */
html:not(.live) #stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(238 247 255 / 0.93), rgb(238 247 255 / 0.88) 46%, rgb(238 247 255 / 0) 68%); }
/* no WebGL: a still of the lighthouse, feathered so it has no edges */
html:not(.gl) #stage::before { content: ""; position: absolute; right: 5vw; top: 5%; height: 90%; aspect-ratio: 1000 / 1344; background: url(/assets/81e29ea6/poster.jpg) 50% 50% / contain no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 58%, transparent 100%); }
html:not(.live):not(.gl) #stage canvas { display: none; }
html:not(.live) main { position: relative; z-index: 1; width: min(54vw, 800px); padding: calc(var(--top-h) + 6vh) 0 14vh var(--gl); display: grid; gap: clamp(56px, 12vh, 120px); }
html:not(.live) main { gap: 0; }
html:not(.live) main > * + * { margin-top: clamp(56px, 12vh, 120px); }
html:not(.live) .ask { order: -3; margin: 8vh 0 0; font-size: clamp(1.0625rem, min(1.9vw, 3.3vh), 1.75rem); line-height: 1.2; letter-spacing: -0.022em; max-width: 24em; color: var(--gain); } /* on the plain page the question leads in to the headline */
html:not(.live) main > .hero { order: -2; margin-top: 18px; }
html:not(.live) main > .peak { order: -1; }
html:not(.live) .hero { display: grid; gap: 24px; justify-items: start; min-height: calc(70svh - var(--top-h) - 6vh); align-content: start; }
html:not(.live) .layer { --on: var(--navy) !important; --x: var(--gain) !important; }
html:not(.live) .in { display: grid; gap: 18px; justify-items: start; }
html:not(.live) .sum .ground { margin-top: -18px; }
@media (max-aspect-ratio: 4/5) {
  html:not(.live) #stage::after { display: none; } /* here the picture stands above the copy, not under it */
  html:not(.live) #stage { position: relative; inset: auto; height: 62svh; margin-top: var(--top-h);
    -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
  html:not(.gl) #stage::before { right: auto; left: 50%; top: 0; height: 100%; transform: translateX(-50%); }
  html:not(.live) main { width: auto; padding: 8px var(--gr) 72px var(--gl); gap: 0; }
  html:not(.live) main > * + * { margin-top: 56px; }
  html:not(.live) main > .ask { margin-top: 20px; }
  html:not(.live) main > .hero { margin-top: 12px; }
  html:not(.live) .hero { min-height: 0; }
}

/* ---------- the live page: one fixed stage, copy at waypoints ---------- */
html.live .spacer { display: block; height: 1010vh; height: 1010lvh; } /* 9.1 screens of scroll (UMAX in main.js) */
html.live.filmed .spacer { height: 1110vh; height: 1110lvh; } /* 10.1 screens of scroll: 1 from the wheel to the lighthouse, then 9.1 for the rest (UALL in main.js) */
html.live #stage { position: fixed; z-index: 2; inset: 0; height: 100vh; height: 100lvh; pointer-events: none; opacity: 0; transition: opacity 1.1s ease 0.1s; }
html.live body.ready #stage { opacity: 1; }
html.live .stars { display: block; position: fixed; z-index: 0; inset: 0 0 auto 0; height: 64vh; pointer-events: none; opacity: calc(var(--dusk) * var(--dusk) * 0.9);
  background: 50% 0 / cover no-repeat; -webkit-mask-image: linear-gradient(#000 35%, transparent); mask-image: linear-gradient(#000 35%, transparent); }
html.live .wash { display: block; position: fixed; z-index: 3; inset: 0; pointer-events: none; opacity: var(--wash, 0);
  background: radial-gradient(110vmax 110vmax at var(--lx, 50%) var(--ly, 30%), rgb(255 214 150 / 0.95) 0%, rgb(255 150 80 / 0.62) 20%, rgb(255 120 70 / 0.26) 50%, rgb(255 110 70 / 0) 100%); }

/* nothing scrolls under the bar on the live page, so it has no band of its own: the logo and the button stand on the picture */
html.live .top { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.live .w { position: fixed; margin: 0; }
html.live .hero .lead { text-shadow: 0 0 22px rgb(255 255 255 / 0.55); }
html.live .hero { z-index: 4; left: var(--gl); top: calc(36% + var(--top-h) / 2); width: min(56vw, 800px); display: grid; gap: clamp(10px, 2.6vh, 28px); justify-items: start;
  opacity: var(--o, 1); transform: translate3d(0, calc(-50% + var(--y, 0px)), 0); }
html.live .hero.off { pointer-events: none; }

/* colour layers: the plate is under the lighthouse, the copy over it. The copy is cut by the next plate, in script. */
html.live .plate { display: block; position: fixed; z-index: 1; inset: 0; height: 100vh; height: 100lvh; background: var(--bg); border-radius: var(--r, 0px) var(--r, 0px) 0 0; box-shadow: 0 -22px 70px rgb(8 12 40 / 0.2); visibility: hidden; will-change: transform; }
html.live .copy { position: fixed; z-index: 4; inset: 0; height: 100vh; height: 100lvh; pointer-events: none; visibility: hidden; color: var(--on); }
html.live .in { position: absolute; left: 44%; right: calc(var(--gr) + 5vw); top: calc(50% + var(--top-h) / 2); display: grid; gap: clamp(8px, 2.4vh, 26px); justify-items: start; transform: translate3d(0, calc(-50% + var(--ty, 0px)), 0); }
/* each title and element is in half light until the beam reaches it: readable at any point of the scroll, and the beam still has something to do */
html.live .lt { color: color-mix(in srgb, var(--on) calc((0.44 + 0.56 * var(--l, 0)) * 100%), transparent); }
html.live .lt .x { color: color-mix(in srgb, var(--x, var(--gain)) calc((0.44 + 0.56 * var(--l, 0)) * 100%), transparent); }
html.live .person img { opacity: calc(0.5 + 0.5 * var(--l, 0)); }
/* the sum is given more of the width, and is scrubbed: the light walks the row, and each term wakes and grows under it */
html.live .sum .in { left: 42%; right: calc(var(--gr) + 5vw); }
html.live .sum .cap { color: color-mix(in srgb, var(--on) calc((0.44 + 0.56 * var(--l, 0)) * 100%), transparent); }
html.live .sum .op { color: color-mix(in srgb, var(--x, var(--gain)) calc((0.4 + 0.6 * var(--l, 0)) * 100%), transparent); }
html.live .sum .drops { opacity: var(--l, 0); }
html.live .sum.on .drop { animation: pour 1.9s linear var(--d) infinite; }
html.live .sum .plant { scale: 1 calc(0.04 + 0.96 * var(--g, 0)); opacity: min(1, calc(var(--g, 0) * 9)); }
html.live .sum .ground { scale: var(--g, 0) 1; }
html.live .pool { display: block; position: fixed; z-index: 3; left: 0; top: 0; width: 96vmin; height: 96vmin; margin: -48vmin 0 0 -48vmin; pointer-events: none; opacity: var(--po, 0); transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  background: radial-gradient(closest-side, rgb(255 204 150 / 0.32), rgb(255 160 100 / 0.11) 55%, rgb(255 150 90 / 0)); }

/* the line is in the dusk; each word brightens as the beam passes over it */
html.live .peak { z-index: 4; left: 0; right: 0; top: 87%; text-align: center; transform: translateY(-50%); opacity: var(--o, 0); pointer-events: none; text-shadow: 0 1px 30px rgb(6 10 34 / 0.6); }
html.live .peak span { color: rgb(255 255 255 / calc(0.52 + 0.48 * var(--l, 0))); }
html.live .peak .x { color: color-mix(in srgb, var(--gain) calc(var(--l, 0) * 100%), rgb(255 255 255 / 0.52)); }

html.live .map { display: block; position: fixed; z-index: 6; right: clamp(14px, 2vw, 30px); top: 50%; transform: translateY(-50%); line-height: 0; opacity: 0; transition: opacity 0.8s ease 0.9s; }
html.live:not(.reeling) body.ready .map { opacity: 1; }
.map { --ink: color-mix(in srgb, #ffffff calc(var(--dusk-mid, 0) * 100%), var(--navy)); --hair: color-mix(in srgb, rgb(255 255 255 / 0.5) calc(var(--dusk-mid, 0) * 100%), rgb(11 42 92 / 0.36)); }
.map svg { overflow: visible; }
.map path { fill: color-mix(in srgb, rgb(255 255 255 / 0.2) calc(var(--dusk-mid, 0) * 100%), rgb(255 255 255 / 0.7)); stroke: var(--hair); stroke-width: 1.25; stroke-linejoin: round; transition: fill 0.5s var(--out), stroke 0.5s var(--out); }
.map a { outline-offset: 2px; }
.map a:hover path { stroke: var(--ink); }
.map a.on path { fill: var(--ink); stroke: var(--ink); }
.map a.on path.lamp { fill: color-mix(in srgb, rgb(255 255 255 / 0.2) calc(var(--dusk-mid, 0) * 100%), rgb(255 255 255 / 0.7)); }
.map a.glow path.lamp { fill: var(--gain); stroke: var(--gain); }
.map a { cursor: pointer; }
.map .tip { position: absolute; right: calc(100% + 12px); top: 0; padding: 7px 11px 8px; border-radius: 9px; font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; pointer-events: none;
  background: var(--ink); color: color-mix(in srgb, var(--navy) calc(var(--dusk-mid, 0) * 100%), #ffffff); opacity: 0; transform: translate(6px, -50%); transition: opacity 0.18s ease, transform 0.3s var(--out); }
.map .tip.on { opacity: 1; transform: translate(0, -50%); }

/* the cue on the first screen: a small compass whose needle wanders, a course not yet found, over a short line with a light running down it.
   The line goes with the first scroll (--o). The needle settles on the way to the lighthouse (--a), and the compass goes when the light is reached (--oc). All three come from main.js. */
html.live .cue { display: grid; justify-items: center; gap: 9px; position: fixed; z-index: 5; left: 50%; bottom: max(22px, calc(env(safe-area-inset-bottom, 0px) + 14px)); transform: translateX(-50%); pointer-events: none; color: #ffffff; opacity: var(--oc, 1); }
/* the steering sign above the compass: it comes with the skipper's turn of the wheel, goes with the first scroll (--o) and, once the visitor has steered, for good (html.steered) */
.cue .steer { display: block; height: 34px; opacity: var(--o, 1); transition: opacity 0.5s ease; }
html.steered .cue .steer { opacity: 0; }
.cue .steer svg { display: none; height: 100%; width: auto; opacity: 0; }
html.live:not(.step) .cue .steer .keys, html.live.step .cue .steer .tilt { display: block; }
html.live:not(.step) .cue .steer { height: 28px; }
html.live body.ready .cue .steer svg { animation: compass-in 0.9s ease 2.4s forwards; }
.cue .steer .phone { transform-box: view-box; transform-origin: 33px 17px; animation: steer-rock 2.6s ease-in-out 2.4s infinite; }
.cue .steer .kl { animation: steer-l 2.6s ease-in-out 2.4s infinite; } .cue .steer .kr { animation: steer-r 2.6s ease-in-out 2.4s infinite; }
@keyframes steer-rock { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-15deg); } 75% { transform: rotate(15deg); } }
@keyframes steer-l { 0%, 50%, 100% { opacity: 0.45; } 25% { opacity: 1; } }
@keyframes steer-r { 0%, 50%, 100% { opacity: 0.45; } 75% { opacity: 1; } }
.cue .compass { display: block; width: clamp(38px, 5.8vh, 48px); height: auto; opacity: 0; }
html.live body.ready .cue .compass { animation: compass-in 1.2s ease 0.9s forwards; }
.cue .needle { transform-box: view-box; transform-origin: 24px 24px; transform: rotate(calc(var(--a, 22) * 1deg)); }
.cue .run { position: relative; display: block; width: 2px; height: 28px; border-radius: 1px; overflow: hidden; background: rgb(255 255 255 / 0.3); opacity: var(--o, 1); clip-path: inset(0 0 100% 0); }
html.live body.ready .cue .run { animation: cue-in 1s var(--out) 1.3s forwards; }
.cue .run::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 46%; background: linear-gradient(rgb(255 255 255 / 0), #ffffff); animation: cue-run 2.2s cubic-bezier(0.65, 0, 0.35, 1) 2.1s infinite backwards; }
@keyframes compass-in { to { opacity: 1; } }
@keyframes cue-in { to { clip-path: inset(0); } }
@keyframes cue-run { 0% { transform: translateY(-100%); } 62%, 100% { transform: translateY(240%); } }

/* load: one sequence, then nothing moves unless the visitor moves it */
html.live h1 .ln > span { transform: translateY(112%); transition: transform 1.1s var(--out); }
html.live h1 .ln:nth-child(2) > span { transition-delay: 0.09s; }
html.live .hero .lead, html.live .hero .btn { opacity: 0; transform: translateY(14px); transition: opacity 0.9s ease 0.45s, transform 1s var(--out) 0.45s, background 0.2s; }
html.live .hero .btn { transition-delay: 0.58s, 0.58s, 0s; }
html.live:not(.hold) body.ready h1 .ln > span { transform: none; }
html.live:not(.hold) body.ready .hero .lead, html.live:not(.hold) body.ready .hero .btn { opacity: 1; transform: none; }
html.live:not(.hold) body.ready .hero .btn { transition: opacity 0.9s ease 0.58s, transform 0.2s var(--out), background 0.2s; }

@media (max-aspect-ratio: 4/5) {
  :root { --top-h: 62px; }
  .logo img { height: 31px; }
  .toplink { font-size: 15px; padding: 9px 16px; }
  h1 { font-size: clamp(2rem, 9.6vw, 3.4rem); }
  html.live .hero { top: calc(var(--top-h) + 22px); width: auto; right: var(--gr); gap: 14px; transform: translate3d(0, var(--y, 0px), 0); }
  .lead { font-size: 17px; line-height: 1.4; }
  html.live .peak { padding: 0 var(--gr) 0 var(--gl); font-size: clamp(1.6rem, 8.6vw, 3.5rem); top: 80%; }
  html.live .in { left: var(--gl); right: calc(var(--gr) + 30px); top: auto; bottom: max(26px, env(safe-area-inset-bottom)); gap: 12px; transform: translate3d(0, var(--ty, 0px), 0); }
  h2 { font-size: clamp(1.75rem, 8.4vw, 3rem); }
  .sub { font-size: 1.1875rem; }
  .say { font-size: 1rem; }
  .layer li { padding: 9px 0; font-size: 15px; }
  .layer:has(.go) li { padding: 7px 0; } /* a layer with a button under its list: the rows sit a little closer, so the title stays under the clouds */
  .go { font-size: 15px; padding: 10px 18px; margin-top: 2px; }
  /* Ráð × Vit has the most to say: on a phone it is set a little closer, so it stays under the lighthouse */
  html.live .who .in { gap: 10px; }
  .who .say { font-size: 0.9375rem; line-height: 1.38; }
  .who li { padding: 7px 0; font-size: 14px; line-height: 1.38; }
  .person { grid-template-areas: "img id" "rows rows"; align-items: center; column-gap: 14px; row-gap: 10px; }
  .person img { width: 60px; border-radius: 12px; }
  .person .id { display: grid; grid-area: id; justify-items: start; gap: 1px; }
  .person .id p, .person .more, .person .go { grid-area: auto; }
  .person .go { margin-top: 4px; font-size: 14px; padding: 8px 15px; }
  .who ul { display: none; } /* an upright phone: with the founder's own words on the slide, his three lines are left to his page, so the copy stays under the lighthouse */
  .person .id p { font-size: 1rem; }
  .more { margin: 0; font-size: 14px; }
  .reach { font-size: 1.1875rem; }
  .btn.big { font-size: 18px; padding: 15px 28px; }
  /* the sum on a phone: the row keeps its three columns, with a smaller caption and more column for the longest words */
  .sum h2 { font-size: clamp(1.6rem, 7.4vw, 2.6rem); }
  html.live .sum .in { left: var(--gl); right: calc(var(--gr) + 30px); }
  .eq { --cap: 0.8125rem; --fall: clamp(54px, 17vw, 86px); --rg: 8px; column-gap: clamp(7px, 2.2vw, 14px); grid-template-columns: minmax(min-content, 1.6fr) auto minmax(min-content, 0.75fr) auto minmax(min-content, 1.5fr); margin-top: 4px; }
  .drops { width: clamp(46px, 14vw, 76px); }
  .drop svg { width: clamp(11px, 3.3vw, 15px); }
  .seed .plant { width: clamp(16px, 5vw, 24px); }
  .sapling .plant { width: clamp(38px, 12vw, 60px); }
  .tree .plant { width: clamp(84px, 27vw, 132px); }
  .ground { margin-top: -12px; }
  /* on a phone the elevation only shows progress: its segments are too small to press */
  html.live .map { right: 10px; top: auto; bottom: 14px; transform: scale(0.62); transform-origin: 100% 100%; pointer-events: none; }
}

/* a short window, such as a small preview pane: a slimmer bar and a smaller map */
@media (max-height: 560px) and (min-aspect-ratio: 4/5) {
  :root { --top-h: 56px; }
  .logo img { height: 29px; }
  .toplink { font-size: 14px; padding: 8px 15px; }
  html.live .map { transform: translateY(-50%) scale(0.6); transform-origin: 100% 50%; }
  html.live .peak { top: 86%; }
}

/* ---------- the opening: the skipper's view, the question, and the way to the lighthouse ---------- */
html.live:not(.filmed) .ask { display: none; }
html.live .ask span { display: block; } /* one sentence to a line */
html.live { --dusk: 1; } /* the page opens dark: white ink until the day comes */
/* the reel: frames drawn by main.js, covering the screen. Its first frame is the background, so it is there before the script.
   background-position is part of the match with the page: main.js (REF.crop) crops the page's picture from the same point. */
html.live.filmed .reel { display: block; position: fixed; z-index: 2; inset: 0; width: 100%; height: 100vh; height: 100lvh; pointer-events: none; background: #0a1018 url(/assets/81e29ea6/seq/w/000.webp) 50% 14% / cover no-repeat; }
html.shot .reel, html.shot .helm { display: none !important; }
/* the helm: three layers laid over the reel's first frame, in the same box the reel's frame covers the screen with (main.js sets each layer's
   place in pixels, and turns the wheel and moves the sea). Its opacity is set by main.js: it comes up once the sea plays and both pictures are in,
   and goes with the first scroll. */
html.live.filmed .helm { display: block; position: fixed; z-index: 2; inset: 0; width: 100%; height: 100vh; height: 100lvh; overflow: hidden; pointer-events: none; opacity: var(--o, 0); }
.helm > * { position: absolute; left: 0; top: 0; display: block; max-width: none; user-select: none; -webkit-user-drag: none; }
.helm .sea { object-fit: cover; will-change: transform; }
.helm .wheel { will-change: transform; }
/* the headline arrives with the picture, one sentence after the other; the second sentence takes its light from the far lamp (--l, from main.js) */
html.live.filmed .ask span { animation: ask-in 1.1s var(--out) 0.05s both; }
html.live.filmed .ask span:last-child { animation-delay: 0.22s; color: color-mix(in srgb, #ffe7c6 calc(var(--l, 1) * 100%), rgb(255 255 255 / 0.74));
  text-shadow: 0 1px 2px rgb(4 10 22 / 0.45), 0 0 26px rgb(4 10 22 / 0.5), 0 0 64px rgb(255 150 70 / calc(var(--l, 1) * 0.55)); }
@keyframes ask-in { from { opacity: 0; transform: translateY(0.3em); } }
/* the opening line stands where the headline will stand by day, set the same way; white, because it is dark here */
html.live .ask { z-index: 4; left: var(--gl); top: calc(36% + var(--top-h) / 2); width: min(56vw, 850px); margin: 0; color: #fff;
  opacity: var(--o, 1); transform: translate3d(0, calc(-50% + var(--y, 0px)), 0); pointer-events: none;
  text-shadow: 0 1px 2px rgb(4 10 22 / 0.45), 0 0 26px rgb(4 10 22 / 0.5), 0 0 70px rgb(4 10 22 / 0.45); }
html.shot .top, html.shot main, html.shot .map { display: none !important; } /* ?shot: the scene alone */
@media (max-aspect-ratio: 4/5) {
  html.live.filmed .reel { background-image: url(/assets/81e29ea6/seq/p/000.webp); background-position: 50% 40%; }
  .ask { font-size: clamp(1.6rem, calc((100vw - var(--gl) - var(--gr)) / 9.95), 3.4rem); } /* sized so the longer sentence keeps to one line */
  html.live .ask { top: calc(var(--top-h) + 22px); width: auto; right: var(--gr); transform: translate3d(0, var(--y, 0px), 0); }
  html:not(.live) .ask { font-size: 1.0625rem; }
}

/* ---------- touch screens: one swipe moves one section (main.js) ----------
   The page does not pan under the finger, so the browser's bars stay as they are: the stage is sized to the screen that is actually visible.
   Pinching to zoom still works, and a zoomed page pans as usual. The panel with the founder's story scrolls as usual. */
html.step, html.step body { overscroll-behavior: none; }
html.step body { touch-action: pinch-zoom; }
html.step.zoomed body { touch-action: auto; }
html.live.step #stage, html.live.step .plate, html.live.step .copy, html.live.filmed.step .reel, html.live.filmed.step .helm { height: 100dvh; }

/* a short phone screen, such as a small phone with the browser's bars showing: each layer is set closer, so its copy stays under the lighthouse.
   The founder's three lines are left to the panel behind "Les meira um Árna", where they stand in full. */
@media (max-aspect-ratio: 4/5) and (max-height: 600px) {
  html.live .in { gap: 9px; bottom: max(18px, env(safe-area-inset-bottom)); }
  .layer li { padding: 7px 0; font-size: 14.5px; }
  .who ul, .foot { display: none; }
  .eq { --fall: 46px; }
  .sapling .plant { width: 34px; }
  .tree .plant { width: 74px; }
}


/* ---------- the lighthouse speaks: "Spyr Vitan", a small cloud from the lamp that opens the chat (fund.html) ----------
   .vb stands on the lamp's point on the screen (main.js writes its transform each frame). The cloud floats off it on the side with room
   (data-side: r-up, l-up, l-down), --vbx across and --vbo up or down from the lamp (main.js), and a trail of three puffs of growing size runs from the lantern to it, so the
   lighthouse is still the one speaking. The cloud is just a cloud's shape: a flat body with three round lobes on top, sized by the cloud's
   height and placed by its width, so when it widens for a line the body stretches and the lobes stay round. The shapes are drawn twice,
   first a little larger in white (the light rim), then in a pale sky tint (the fill); the whole is then made slightly see-through as one,
   so the rim runs round the outside only.
   Navy words on it on every layer; a soft blue-grey shadow underneath keeps it apart from the real clouds of the daylight sky. Only on the live page. */
@property --vbA { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --vbW { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
.vb, .vb-sweep { display: none; }
html[data-vitin="off"] .vb, html[data-vitin="off"] .vb-sweep { display: none !important; } /* Vitin switched off (index.html): no bubble, no beam */
html.live .vb { display: block; position: fixed; z-index: 5; left: 0; top: 0; width: 0; height: 0; pointer-events: none; visibility: hidden; opacity: var(--bo, 0); will-change: transform, opacity;
  --sx: 1; --sy: -1; --vb-shade: rgb(36 62 108 / 0.26); --vb-shade2: rgb(36 62 108 / 0.16); }
html.live .vb[data-side="l-up"] { --sx: -1; }
html.live .vb[data-side="l-down"] { --sx: -1; --sy: 1; }
html.live .vb { --vb-fill: #e9f2fc; --vb-op: 0.9; }
html.live .vb[data-at="head"], html.live .vb[data-at="radvit"] { --vb-shade: rgb(30 56 104 / 0.34); --vb-shade2: rgb(30 56 104 / 0.2); } /* a pale cloud on a white-clouded sky and on sky blue: a little more shadow */
html.live .vb[data-at="skipanir"], html.live .vb[data-at="marknadarforing"] { --vb-op: 0.95; } /* on violet and peach: less of the colour comes through */
html.live .vb.is-on { visibility: visible; }
/* the lamp's one blink: a soft orange glow over the lantern, in daylight as well */
.vb-blink { position: absolute; left: -38px; top: -38px; width: 76px; height: 76px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgb(255 226 170 / 0.95), rgb(255 150 70 / 0.6) 38%, rgb(255 120 50 / 0.18) 70%, rgb(255 120 50 / 0)); }
.vb.is-blink .vb-blink { animation: vb-blink 1.05s cubic-bezier(0.3, 0, 0.2, 1) both; }
@keyframes vb-blink { 0% { opacity: 0; scale: 0.4; } 30% { opacity: 1; scale: 1.1; } 100% { opacity: 0; scale: 0.8; } }
/* the trail: three puffs on the diagonal from the lantern to the cloud, the smallest at the lamp */
.vb-trail { position: absolute; left: 0; top: 0; }
.vb-trail i { position: absolute; width: var(--w); height: var(--w); margin: calc(var(--w) * -0.5) 0 0 calc(var(--w) * -0.5); border-radius: 50%;
  left: calc(var(--sx) * var(--vbx, var(--vbo, 60px)) * var(--f)); top: calc(var(--sy) * var(--vbo, 60px) * var(--f));
  background: color-mix(in srgb, var(--vb-fill) calc(var(--vb-op) * 100%), transparent);
  box-shadow: 0 0 0 1.75px rgb(255 255 255 / 0.92), 0 4px 8px var(--vb-shade), 0 1px 2px var(--vb-shade2); opacity: 0; scale: 0.2; }
.vb-trail i:nth-child(1) { --w: 8px; --f: 0.46; }
.vb-trail i:nth-child(2) { --w: 12px; --f: 0.67; }
.vb-trail i:nth-child(3) { --w: 17px; --f: 0.89; }
.vb.is-in .vb-trail i { animation: vb-puff 0.42s var(--out) both, vb-bob 4.6s ease-in-out 0.9s infinite; }
.vb.is-in .vb-trail i:nth-child(2) { animation-delay: 0.1s, 1.5s; }
.vb.is-in .vb-trail i:nth-child(3) { animation-delay: 0.2s, 2.1s; }
@keyframes vb-puff { from { opacity: 0; scale: 0.2; } to { opacity: 1; scale: 1; } }
@keyframes vb-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2px; } }
/* the link is the words' box; the cloud lies behind it and reaches well beyond it, so its soft rim is clear of the words */
.vb-a { position: absolute; display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; min-height: 48px; width: max-content; max-width: var(--vbmax, 320px);
  padding: 12px 10px 12px 12px; color: var(--navy); font-size: 17.5px; font-weight: 600; line-height: 1.22; letter-spacing: -0.015em;
  text-decoration: none; text-wrap: wrap; pointer-events: none; isolation: isolate; border-radius: 22px;
  opacity: 0; transform: scale(0.12); }
.vb.is-in .vb-a { pointer-events: auto; animation: vb-grow 0.7s var(--out) 0.22s both, vb-breathe 6s ease-in-out 1s infinite, vb-float 9s ease-in-out 1s infinite; }
@keyframes vb-grow { from { opacity: 0; transform: scale(0.12); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes vb-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.025; } }
@keyframes vb-float { 0%, 100% { translate: 0 0; } 30% { translate: 3px -4px; } 65% { translate: -2px -2px; } }
.vb.is-talk .vb-a { animation-play-state: running, paused, paused; }
.vb.is-talk .vb-trail i { animation-play-state: running, paused; }
.vb-c { position: absolute; z-index: -1; inset: -30px -18px -8px -18px; container-type: size; pointer-events: none;
  filter: drop-shadow(0 9px 12px var(--vb-shade)) drop-shadow(0 2px 3px var(--vb-shade2)); transition: translate 0.35s var(--out), filter 0.35s ease; }
.vb-c { opacity: var(--vb-op); }
.vb-c i { position: absolute; border-radius: 50%; aspect-ratio: 1; background: var(--vb-fill); }
.vb-c i:nth-child(-n+6) { background: #ffffff; box-shadow: 0 0 0.5px 1.75px #ffffff; } /* the rim pass */
.vb-c i:nth-child(6n+1) { left: 0; right: 0; bottom: 0; height: 64%; aspect-ratio: auto; border-radius: 999px; } /* the body */
.vb-c i:nth-child(6n+2) { height: 62cqh; left: 12%; bottom: 30%; }
.vb-c i:nth-child(6n+3) { height: 92cqh; left: calc(50% - 60cqh); bottom: 8%; }
.vb-c i:nth-child(6n+4) { height: 72cqh; right: 9%; bottom: 22%; }
.vb-c i:nth-child(6n+5), .vb-c i:nth-child(6n) { display: none; }
/* a cloud widened for a line gets two more lobes, so its top stays bumpy all the way along */
@container (min-aspect-ratio: 3) {
  .vb-c i:nth-child(6n+2) { height: 58cqh; left: 5%; bottom: 30%; }
  .vb-c i:nth-child(6n+5) { display: block; height: 80cqh; left: calc(27% - 30cqh); bottom: 16%; }
  .vb-c i:nth-child(6n+3) { height: 96cqh; left: calc(50% - 46cqh); bottom: 6%; }
  .vb-c i:nth-child(6n) { display: block; height: 82cqh; left: calc(72% - 44cqh); bottom: 14%; }
  .vb-c i:nth-child(6n+4) { height: 64cqh; right: 5%; bottom: 26%; }
}
/* Vitin's lamp: a still, small orange dot before the words */
.vb-dot { flex: none; width: 9px; height: 9px; margin: 0 1px 0 2px; border-radius: 50%; background: var(--gain); box-shadow: 0 0 0 2px rgb(255 255 255 / 0.9); }
.vb-t { min-width: 0; }
/* a small navy chevron after the words: this is a way in, not a label */
.vb-a::after { content: ""; order: 3; flex: none; width: 14px; height: 14px; margin-left: -1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M5 2.8 9.2 7 5 11.2' fill='none' stroke='%230b2a5c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat; transition: translate 0.35s var(--out); }
.vb-dot, .vb-t { transition: translate 0.35s var(--out); }
.vb-a:hover .vb-c { translate: 0 -3px; filter: brightness(1.02) drop-shadow(0 13px 16px var(--vb-shade)) drop-shadow(0 2px 3px var(--vb-shade2)); }
.vb-a:hover .vb-dot, .vb-a:hover .vb-t { translate: 0 -3px; }
.vb-a:hover::after { translate: 2px -3px; }
.vb-a:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.vb[data-side="r-up"] .vb-a { left: var(--vbx, var(--vbo, 60px)); bottom: var(--vbo, 60px); transform-origin: 0 100%; }
.vb[data-side="l-up"] .vb-a { right: var(--vbx, var(--vbo, 60px)); bottom: var(--vbo, 60px); transform-origin: 100% 100%; }
.vb[data-side="l-down"] .vb-a { right: var(--vbx, var(--vbo, 60px)); top: var(--vbo, 60px); transform-origin: 100% 0; }
@media (prefers-reduced-motion: reduce) {
  .vb.is-in .vb-a { animation: vb-grow 0.01s both; }
  .vb.is-in .vb-trail i { animation: vb-puff 0.01s both; }
}
/* the beam carries the visitor in: a wedge of warm light from the lamp sweeps the screen and ends as a full warm wash (#fff6e6, where fund.html begins) */
html.live .vb-sweep { display: block; position: fixed; z-index: 9; inset: 0; pointer-events: none; visibility: hidden; }
html.live .vb-sweep.is-on { visibility: visible; pointer-events: auto; }
.vb-sweep::before, .vb-sweep::after { content: ""; position: absolute; inset: 0; opacity: 0; }
.vb-sweep::before { background: conic-gradient(from calc(var(--vbA) - var(--vbW) / 2) at var(--lx, 50%) var(--ly, 30%), rgb(255 214 160 / 0) 0deg, rgb(255 226 182 / 0.92) calc(var(--vbW) * 0.3),
  rgb(255 244 224 / 0.97) calc(var(--vbW) * 0.5), rgb(255 226 182 / 0.92) calc(var(--vbW) * 0.7), rgb(255 214 160 / 0) var(--vbW)); }
.vb-sweep::after { background: radial-gradient(140vmax 140vmax at var(--lx, 50%) var(--ly, 30%), #fff6e6 30%, #ffefd9); }
.vb-sweep.is-on::before { animation: vb-beam 0.55s cubic-bezier(0.45, 0, 0.6, 1) both; }
.vb-sweep.is-on::after { animation: vb-wash 0.55s ease-in both; }
@keyframes vb-beam { 0% { opacity: 0; --vbA: var(--a0); --vbW: 16deg; } 18% { opacity: 1; } 100% { opacity: 1; --vbA: var(--a1); --vbW: 420deg; } }
@keyframes vb-wash { 0%, 40% { opacity: 0; } 100% { opacity: 1; } }
@media (max-aspect-ratio: 4/5) {
  .vb-a { font-size: 16px; padding: 11px 8px 11px 10px; min-height: 46px; gap: 7px; }
  .vb-c { inset: -26px -15px -5px -15px; }
  .vb.is-talk .vb-a::after { display: none; } /* a typed line on a phone gets the chevron's room */
  .vb-trail i:nth-child(1) { --w: 7px; }
  .vb-trail i:nth-child(2) { --w: 10px; }
  .vb-trail i:nth-child(3) { --w: 14px; }
}