/* The pages behind the front page's colour layers (um-arna.html, roknistykki.html, marknadarforing.html). Each opens on its layer as the visitor
   left it: the same colour, the same lighthouse, the same title in the same place. From there it is a page to read, set as the front page's
   colour plates: each plate slides up over the one before; here the scroll is the browser's own. skipanir.html is the first of them and carries
   its own copy of these rules.
   A page sets its opening on <html>: --hero (the layer's colour), --hero-on (its ink), --x (the colour of the ×), --art-w and --art-p (the scene). */
:root {
  --navy: #0b2a5c; --gain: #ff6b2c; --gain-hi: #ff7f47;
  --violet: #4b2d86; --sky: #cfe6ff; --peach: #ff8659; --cream: #fff4e4; --paper: #ffffff;
  --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;
  --r: 34px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--hero); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
::selection { background: var(--gain); color: var(--navy); }
body { margin: 0; background: var(--cream); font-family: var(--font); font-size: 17px; line-height: 1.5; letter-spacing: -0.014em; color: var(--navy); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, blockquote, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 6px; }
@view-transition { navigation: auto; }

/* ---------- shared pieces, as on the front page ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; background: var(--gain); color: var(--navy); font-weight: 600; font-size: 17px; line-height: 1.18; letter-spacing: -0.016em; padding: 13px 24px; border-radius: 9999px; text-decoration: none; white-space: nowrap; transition: background 0.2s, transform 0.2s var(--out); }
.btn:hover { background: var(--gain-hi); }
.btn:active { transform: scale(0.95); }
.btn::after { content: ""; position: absolute; inset: 50% -4px auto; height: max(100%, 44px); transform: translateY(-50%); }
.btn.navy { background: var(--navy); color: #ffffff; }
.btn.navy:hover { background: #173f80; }
.btn.line { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn.line:hover { background: rgb(11 42 92 / 0.07); }
h1, h2 { font-weight: 600; letter-spacing: -0.03em; text-wrap: balance; }
h1 { font-size: clamp(1.45rem, min(4.6vw, 8vh), 4.25rem); line-height: 1.06; }
h1 .by { display: block; white-space: nowrap; }
h1 .x, h2 .x { font-weight: 400; color: var(--x, var(--gain)); }
h2 { font-size: clamp(1.75rem, 3.5vw, 3rem); line-height: 1.08; max-width: 17em; }
h3 { font-weight: 600; font-size: 1.1875rem; line-height: 1.25; letter-spacing: -0.02em; }
h2.long { font-size: clamp(1.5rem, 2.9vw, 2.5rem); line-height: 1.12; max-width: 24em; text-wrap: pretty; }
.sub { font-weight: 500; font-size: clamp(1.0625rem, 1.75vw, 1.5rem); line-height: 1.25; letter-spacing: -0.022em; text-wrap: balance; max-width: 26em; }
.lead { font-size: clamp(1rem, 1.3vw, 1.1875rem); line-height: 1.55; max-width: 36em; text-wrap: pretty; opacity: 0.86; }
.under { justify-self: start; font-weight: 600; text-decoration: none; padding: 4px 0 6px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat; transition: background-size 0.3s var(--out); }
.under:hover { background-size: 100% 3px; }

/* ---------- plates ---------- */
.pl { position: sticky; top: var(--pin, 0px); background: var(--bg); color: var(--on); }
.pl + .pl { border-radius: var(--r) var(--r) 0 0; box-shadow: 0 -22px 70px rgb(8 12 40 / 0.2); }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: clamp(64px, 11vh, 132px) var(--gr) clamp(72px, 12vh, 148px) var(--gl); display: grid; gap: clamp(36px, 6vh, 64px); }
.head { display: grid; gap: clamp(12px, 2vh, 20px); justify-items: start; }
.on-navy { --bg: var(--navy); --on: #ffffff; --rule: rgb(255 255 255 / 0.26); }
.on-violet { --bg: var(--violet); --on: #ffffff; --rule: rgb(255 255 255 / 0.26); --x: #ff8a54; }
.on-sky { --bg: var(--sky); --on: var(--navy); --rule: rgb(11 42 92 / 0.3); }
.on-peach { --bg: var(--peach); --on: var(--navy); --rule: rgb(11 42 92 / 0.34); --x: #ffffff; }
.on-cream { --bg: var(--cream); --on: var(--navy); --rule: rgb(11 42 92 / 0.24); }

/* ---------- the opening: the layer the visitor came from ---------- */
.top { position: absolute; z-index: 3; 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; gap: 16px; }
.top .left { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); }
.logo { display: block; line-height: 0; }
.logo img { height: 40px; width: auto; }
.back { display: inline-flex; align-items: center; gap: 7px; padding: 10px 2px; font-weight: 600; font-size: 16px; letter-spacing: -0.016em; text-decoration: none; opacity: 0.86; transition: opacity 0.2s; }
.back:hover { opacity: 1; }
.back svg { display: block; transition: transform 0.3s var(--out); }
.back:hover svg { transform: translateX(-3px); }
.hero { --bg: var(--hero); --on: var(--hero-on); --rule: color-mix(in srgb, var(--hero-on) 26%, transparent); min-height: 100vh; min-height: 100svh; overflow: hidden; display: grid; }
.hero.cta-navy .btn { background: var(--navy); color: #ffffff; }
.hero.cta-navy .btn:hover { background: #173f80; }
.art { position: absolute; left: 0; bottom: 0; height: min(100%, 60vw); aspect-ratio: 16 / 9; max-width: none; background: var(--art-w) 0 100% / cover no-repeat; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent 96%); mask-image: linear-gradient(90deg, #000 62%, transparent 96%); }
/* the lamp breathes: a slow swell of light at the lantern, placed on the picture itself so it stays on the lantern at every size */
.art::after { content: ""; position: absolute; left: 25.9%; top: 30.7%; width: 26%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 214 150 / 0.5), rgb(255 150 80 / 0.2) 42%, rgb(255 120 70 / 0)); animation: lamp 5.2s ease-in-out infinite; }
@keyframes lamp { 0%, 100% { opacity: 0.25; scale: 0.9; } 50% { opacity: 1; scale: 1.08; } }
.hero-in { position: relative; z-index: 1; align-self: center; margin-left: 44%; padding: calc(var(--top-h) + 24px) calc(var(--gr) + 5vw) 56px 0; display: grid; gap: clamp(10px, 2.4vh, 26px); justify-items: start; }
.hero .sub { font-size: clamp(1rem, min(1.9vw, 3.3vh), 1.75rem); line-height: 1.2; }
.hero .lead { font-size: clamp(0.9375rem, min(1.45vw, 2.6vh), 1.375rem); line-height: 1.42; letter-spacing: -0.012em; max-width: 27em; opacity: 1; }
.hero .lead.rows { display: grid; }
.hero .lead.rows span { padding: clamp(8px, 1.7vh, 15px) 0; border-top: 1px solid var(--rule); }
.hero .btn { margin-top: clamp(4px, 1vh, 10px); }
/* the sum, as a line of type */
.sumline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2em 0.5em; font-weight: 600; font-size: clamp(1rem, min(1.7vw, 3vh), 1.5rem); line-height: 1.3; letter-spacing: -0.02em; max-width: 24em; }
.sumline i { font-style: normal; font-weight: 400; color: var(--x, var(--gain)); }

/* ---------- columns under a rule: three gains, the terms of the sum, the services ---------- */
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 44px); }
.cols > li { display: grid; gap: 8px; align-content: start; padding-top: 18px; border-top: 1px solid var(--rule); }
.cols p { opacity: 0.82; text-wrap: pretty; }
.cols .sign { font-weight: 400; font-size: 1.75rem; line-height: 1; color: var(--x, var(--gain)); }
.pts { display: grid; margin-top: 6px; }
.pts li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 6px 0; font-size: 0.9375rem; line-height: 1.4; }
.tick { align-self: center; width: 18px; height: 18px; }
.cols .under { margin-top: 6px; }

/* ---------- more for less: the same job billed by four suppliers, then by Ráðvit alone. One square is one hour on the invoice. ---------- */
.cost h2 { font-size: clamp(1.5rem, 2.9vw, 2.5rem); line-height: 1.12; max-width: 24em; text-wrap: pretty; }
.fig { --cols: 35; display: grid; gap: clamp(22px, 3.6vh, 36px); padding: clamp(20px, 3vw, 40px); border-radius: 26px; background: rgb(255 255 255 / 0.62); }
.block { display: grid; gap: 14px; }
.block.one { padding-top: clamp(20px, 3.4vh, 32px); border-top: 1px solid rgb(11 42 92 / 0.2); }
.cap { font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.016em; }
.lanes { display: grid; gap: clamp(12px, 2vh, 20px); }
.lane { display: grid; gap: 7px; }
.lane .row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 0.9375rem; }
.lane .role { opacity: 0.78; }
.lane.is-one .role { opacity: 1; font-weight: 600; }
.lane .hrs { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.track { position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: clamp(2px, 0.4vw, 5px); }
.hr { grid-column: var(--at); grid-row: 1; display: block; aspect-ratio: 1; border-radius: 22%; background: var(--navy); transform-origin: 0 50%; }
.is-one .hr { background: var(--violet); }
.wait { grid-column: var(--from) / span 2; grid-row: 1; display: block; border-radius: 4px; background: repeating-linear-gradient(135deg, rgb(11 42 92 / 0.34) 0 1px, transparent 1px 5px); }
.saved { grid-column: 9 / span 27; grid-row: 1; position: relative; align-self: stretch; border-top: 2px solid var(--gain); transform-origin: 0 50%; }
.saved::before, .saved::after { content: ""; position: absolute; top: 0; width: 2px; height: 9px; background: var(--gain); }
.saved::before { left: 0; } .saved::after { right: 0; }
.saved i { position: absolute; left: 50%; top: 9px; translate: -50% 0; font-style: normal; font-weight: 600; font-size: clamp(0.75rem, 1.2vw, 0.9375rem); white-space: nowrap; color: #b23c08; }
.fig-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.note { font-size: 0.875rem; line-height: 1.45; max-width: 44em; opacity: 0.74; text-wrap: pretty; }
.replay { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgb(11 42 92 / 0.08); color: var(--navy); cursor: pointer; transition: background 0.2s; }
.replay:hover { background: rgb(11 42 92 / 0.16); }
.replay svg { width: 16px; height: 16px; fill: currentColor; }
/* the run: the meter ticks square by square, lane after lane */
.cost[data-anim="on"] .hr { scale: 0 1; }
.cost[data-anim="on"] .wait, .cost[data-anim="on"] .hrs { opacity: 0; }
.cost[data-anim="on"] .saved { opacity: 0; scale: 0 1; }
.cost.in .hr { scale: 1 1; transition: scale 0.3s var(--out) calc(var(--d) + var(--i) * var(--tick)); }
.cost.in .wait { opacity: 1; transition: opacity 0.45s calc(var(--d) - 240ms); }
.cost.in .saved { opacity: 1; scale: 1 1; transition: opacity 0.5s var(--d), scale 0.85s var(--out) var(--d); }
.cost.in .hrs { opacity: 1; transition: opacity 0.5s var(--sd); }
.cost.resetting, .cost.resetting * { transition: none !important; }

/* ---------- the founder: his portrait beside his story ---------- */
.story .wrap { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.portrait { position: sticky; top: clamp(24px, 6vh, 64px); display: grid; gap: 16px; }
.face { width: clamp(112px, 12vw, 172px); height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 20px; margin-bottom: clamp(6px, 1.2vh, 12px); }
.portrait img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 26px; }
.portrait figcaption { display: grid; gap: 2px; font-size: 1.1875rem; line-height: 1.2; }
.portrait strong { font-weight: 600; }
.portrait span { font-size: 0.9375rem; opacity: 0.74; }
.prose { display: grid; gap: clamp(16px, 2.4vh, 24px); }
.prose p { font-size: clamp(1.0625rem, 1.45vw, 1.3125rem); line-height: 1.55; max-width: 34em; text-wrap: pretty; }
.prose p:first-of-type { font-weight: 500; font-size: clamp(1.1875rem, 1.9vw, 1.625rem); line-height: 1.4; letter-spacing: -0.02em; }
.marks { display: grid; margin-top: clamp(8px, 1.6vh, 16px); }
.head .marks { width: 100%; max-width: 46em; }
.marks li { padding: clamp(10px, 1.7vh, 15px) 0; border-top: 1px solid var(--rule); font-size: 1rem; line-height: 1.42; text-wrap: pretty; }

/* ---------- his own words ---------- */
.words .wrap { gap: clamp(20px, 3.4vh, 36px); }
.words blockquote p { font-weight: 500; font-size: clamp(1.375rem, 2.9vw, 2.5rem); line-height: 1.28; letter-spacing: -0.026em; max-width: 26em; text-wrap: pretty; }
.words .by { display: flex; align-items: center; gap: 14px; font-weight: 600; }
.words .by img { width: 56px; height: 56px; object-fit: cover; object-position: 50% 18%; border-radius: 50%; }
.words .by span { display: grid; gap: 1px; line-height: 1.25; }
.words .by small { font-weight: 400; font-size: 0.9375rem; opacity: 0.76; }

/* ---------- a person beside a short list: who stands behind the work ---------- */
.duo { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.duo .portrait { position: static; max-width: 340px; justify-self: end; }

/* ---------- arriving: the page opens looking like the layer it came from, so it shows that something happened. Light bursts from the lantern,
   the new lines rise in under the title, and an arrow at the foot of the screen says there is more below. ---------- */
.flash { position: absolute; left: 0; bottom: 0; height: min(100%, 60vw); aspect-ratio: 16 / 9; pointer-events: none; }
.flash::after { content: ""; position: absolute; left: 25.9%; top: 30.7%; width: 26%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgb(255 240 210 / 0.95), rgb(255 196 130 / 0.5) 45%, rgb(255 150 80 / 0)); animation: flash 1.3s var(--out) 0.12s both; }
@keyframes flash { 0% { opacity: 0; scale: 0.4; } 16% { opacity: 1; } 100% { opacity: 0; scale: 8; } }
.hero-in > :not(h1) { animation: rise 0.9s var(--out) 0.45s both; }
.hero-in > :not(h1) ~ :not(h1) { animation-delay: 0.6s; }
.hero-in > .down { animation-delay: 0.95s; }
.hero-in > h1 { animation: settle 0.9s var(--out) both; }
@keyframes rise { from { opacity: 0; translate: 0 22px; } }
@keyframes settle { from { translate: 0 14px; } }
.down { margin-top: clamp(6px, 1.4vh, 14px); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--on); box-shadow: inset 0 0 0 1.5px currentColor; transition: background 0.2s; }
.down:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.down svg { display: block; animation: nod 1.9s ease-in-out 2s infinite; }
@keyframes nod { 0%, 100% { translate: 0 -3px; } 50% { translate: 0 4px; } }

/* ---------- contact: the front page's last plate ---------- */
.contact .wrap { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 88px); padding-bottom: clamp(40px, 7vh, 72px); }
.contact h2 { font-size: clamp(2rem, 4.6vw, 4rem); }
.card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(16px, 2vw, 26px); align-items: center; padding: clamp(20px, 2.4vw, 30px); border-radius: 26px; background: var(--paper); box-shadow: 0 18px 50px rgb(11 42 92 / 0.12); }
.card img { width: clamp(84px, 9vw, 120px); height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; }
.card .who { display: grid; gap: 12px; justify-items: start; }
.card .name { display: grid; gap: 2px; font-size: 1.1875rem; line-height: 1.2; }
.card .name strong { font-weight: 600; }
.card .name span { font-size: 0.9375rem; opacity: 0.74; }
.card .ways { display: flex; flex-wrap: wrap; gap: 10px; }
.foot { grid-column: 1 / -1; font-size: 14px; opacity: 0.74; }

/* the sum, drawn (marknadarforing.html): seed, sapling, tree, and what is poured on the first two. The drawing is the front page's own (style.css, .eq). */
.grow .wrap { gap: clamp(28px, 5vh, 56px); }
.grow .head { display: grid; gap: clamp(6px, 1.2vh, 12px); }
.grow .sub { font-size: clamp(1.0625rem, 1.9vw, 1.75rem); line-height: 1.2; }
.grow .draw { width: 100%; max-width: 1040px; }
.grow .eq { --cap: clamp(0.875rem, 1.35vw, 1.25rem); --fall: clamp(64px, 8.5vw, 124px); --rg: clamp(6px, 1vw, 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(8px, 1.6vw, 26px); width: 100%; }
.grow .term { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; row-gap: var(--rg); min-width: 0; }
.grow .cap { grid-row: 1; display: grid; align-content: end; min-height: calc(var(--cap) * 2.5); margin: 0; font-size: var(--cap); font-weight: 600; letter-spacing: -0.012em; line-height: 1.25; text-align: center; text-wrap: balance; }
.grow .op { align-self: start; justify-self: center; margin: calc(var(--cap) * 1.25) 0 0; font-weight: 600; font-size: calc(var(--cap) * 1.5); line-height: calc(var(--cap) * 1.25); color: var(--gain); }
.grow .drops { grid-row: 2; align-self: end; position: relative; width: clamp(46px, 7vw, 108px); height: var(--fall); }
.grow .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)); }
.grow .drop svg { display: block; width: clamp(12px, 1.4vw, 20px); height: auto; fill: currentColor; }
.grow .plant { grid-row: 3; display: block; height: auto; fill: currentColor; transform-origin: 50% 100%; }
.grow .seed .plant { width: clamp(16px, 2.1vw, 30px); }
.grow .sapling .plant { width: clamp(38px, 5.6vw, 82px); }
.grow .tree .plant { width: clamp(84px, 13.4vw, 200px); }
.grow .kernel { fill: var(--gain); }
.grow .ground { width: 100%; height: 1px; margin-top: -1px; background: var(--rule); 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; } }
/* it grows once, term by term (--at), when the plate is reached; without motion it simply stands grown */
.grow[data-anim] .cap { opacity: 0.62; } /* waiting to grow, the captions are quieter but still easy to read */
.grow[data-anim] .op { opacity: 0.72; }
.grow[data-anim] .drops { opacity: 0; }
.grow[data-anim] .plant { scale: 1 0.04; opacity: 0; }
.grow[data-anim] .ground { scale: 0 1; }
.grow[data-anim].in .cap, .grow[data-anim].in .op, .grow[data-anim].in .drops { opacity: 1; transition: opacity 0.6s ease var(--at, 0s); }
.grow[data-anim].in .plant { scale: 1 1; opacity: 1; transition: scale 1.2s var(--out) calc(var(--at, 0s) + 0.3s), opacity 0.3s ease calc(var(--at, 0s) + 0.3s); }
.grow[data-anim].in .ground { scale: 1 1; transition: scale 2.6s var(--out) 0.2s; }
.grow[data-anim].in .drop { animation: pour 1.9s linear var(--d) infinite; }
@media (max-width: 620px) {
  .grow .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); }
  .grow .drops { width: clamp(46px, 14vw, 76px); }
  .grow .drop svg { width: clamp(11px, 3.3vw, 15px); }
  .grow .seed .plant { width: clamp(16px, 5vw, 24px); }
  .grow .sapling .plant { width: clamp(38px, 12vw, 60px); }
  .grow .tree .plant { width: clamp(84px, 27vw, 132px); }
}
/* the sum in the opening (marknadarforing.html, .hero.grow.hero-sum): it stands under the title in the hero's copy column, where the layer has its
   lines. The column is narrower than a plate and the screen is shared with the title, so it is sized on the height as well as the width; on peach
   the plants are the hero's navy ink and what is poured on them, and the signs, are white, as the × in the title. */
.hero-sum .sub { font-size: clamp(1rem, min(1.9vw, 3.3vh), 1.75rem); line-height: 1.2; }
.hero-sum .draw { max-width: 640px; }
.hero-sum .eq { --cap: clamp(0.8125rem, min(1.15vw, 2vh), 1.125rem); --fall: clamp(44px, min(5.6vw, 9.5vh), 96px); --rg: clamp(4px, 0.9vh, 10px); column-gap: clamp(6px, 1.2vw, 20px); }
.hero-sum .cap { font-weight: 500; letter-spacing: -0.01em; }
.hero-sum .op { font-weight: 600; color: var(--navy); } /* white signs on peach read at about 2:1: navy, as the plants and captions */
.hero-sum[data-anim] .cap, .hero-sum[data-anim] .op { opacity: 0.88; } /* on peach the quieter waiting look must still read at 4.5:1 */
.hero-sum .drops { width: clamp(40px, min(5vw, 8.5vh), 86px); }
.hero-sum .drop { color: var(--x, #ffffff); opacity: 0.95; }
.hero-sum .drop svg { width: clamp(11px, min(1.15vw, 2vh), 18px); }
.hero-sum .kernel { fill: currentColor; }
.hero-sum .seed .plant { width: clamp(14px, min(1.7vw, 3vh), 26px); }
.hero-sum .sapling .plant { width: clamp(32px, min(4.4vw, 7.6vh), 70px); }
.hero-sum .tree .plant { width: clamp(70px, min(11.4vw, 18vh), 168px); }
/* the drawing is taller than the layer's lines, so the block is not centred: the title is held where it stands on the front page's slide
   (measured there: 253 px down at 1440x900, 196 px at 1280x720) and the sum hangs below it */
@media not all and (max-aspect-ratio: 4/5) {
  .hero-sum .hero-in { align-self: start; padding-top: max(calc(var(--top-h) + 24px), calc(31.7vh - 32px)); padding-bottom: clamp(24px, 4vh, 56px); }
}
@keyframes pour-hero { 0% { translate: -50% 0; opacity: 0; } 12% { opacity: 0.95; } 76% { opacity: 0.95; } 100% { translate: calc(-50% + var(--dx)) var(--fall); opacity: 0; } }
.hero-sum[data-anim].in .drop { animation-name: pour-hero; }

/* a finger needs more to press than a line of type gives */
@media (pointer: coarse) { .under { padding: 12px 0 13px; } }
@media (max-width: 900px) {
  .contact .wrap, .story .wrap, .duo { grid-template-columns: minmax(0, 1fr); }
  .cols { grid-template-columns: minmax(0, 1fr); }
  .portrait { position: static; max-width: 300px; }
  .duo .portrait { justify-self: start; grid-row: 1; max-width: 220px; }
}
@media (min-width: 620px) and (max-width: 900px) { .cols.six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* an upright screen: the lighthouse stands above, the copy below it, as on the front page */
@media (max-aspect-ratio: 4/5) {
  :root { --top-h: 62px; --r: 26px; }
  body { font-size: 16px; }
  .logo img { height: 31px; }
  .top .btn { font-size: 15px; padding: 9px 16px; }
  .back { font-size: 15px; }
  .art { left: 0; right: 0; top: 0; bottom: auto; width: 100%; height: auto; aspect-ratio: 900 / 1253; background: var(--art-p) 50% 0 / cover no-repeat;
    -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
  .art::after { left: 67.9%; top: 24.4%; width: 44%; }
  .hero-in { align-self: end; margin: 0; padding: min(101vw, 56svh) calc(var(--gr) + 30px) max(30px, env(safe-area-inset-bottom)) var(--gl); gap: 12px; }
  h1 { font-size: clamp(1.75rem, 8.4vw, 3rem); }
  .hero .sub { font-size: 1.1875rem; }
  .hero .lead { font-size: 15px; }
  .hero .lead.rows span { padding: 7px 0; }
  .hero-in:has(.rows) { padding-top: min(88vw, 47svh); gap: 10px; } /* a title, a line, three rows and the arrow: the copy starts a little higher, so the arrow is on the first screen */
  .sumline { font-size: 1.0625rem; }
  .fig { margin-inline: calc(var(--pad) * -0.4); padding: 18px 14px; border-radius: 20px; }
  .fig-foot { align-items: flex-start; }
  .flash { right: 0; top: 0; bottom: auto; width: 100%; height: auto; aspect-ratio: 900 / 1253; }
  .flash::after { left: 67.9%; top: 24.4%; width: 44%; }
  .down { width: 44px; height: 44px; margin-top: 4px; }
  /* the sum under the title takes the column's whole width, out to the right margin the lines keep free */
  .hero-sum .hero-in { padding-top: max(min(88vw, 47svh), calc(100svh - 350px)); } /* the title where the slide has it, the sum running on below the fold */
  .hero-sum .draw { width: calc(100% + 30px); max-width: none; margin-top: 2px; }
  .hero-sum .eq { --cap: 0.8125rem; --fall: clamp(50px, 15vw, 80px); --rg: 7px; }
  .hero-sum .drops { width: clamp(42px, 13vw, 70px); }
  .hero-sum .drop svg { width: clamp(11px, 3.2vw, 15px); }
  .hero-sum .seed .plant { width: clamp(15px, 4.6vw, 22px); }
  .hero-sum .sapling .plant { width: clamp(34px, 11vw, 56px); }
  .hero-sum .tree .plant { width: clamp(76px, 25vw, 124px); }
}
@media (prefers-reduced-motion: reduce) {
  .pl { position: relative; top: auto; }
  .art::after { animation: none; opacity: 0.6; }
  .cost[data-anim="on"] .hr, .cost[data-anim="on"] .wait, .cost[data-anim="on"] .saved, .cost[data-anim="on"] .hrs { scale: 1 1; opacity: 1; transition: none !important; }
  .flash::after, .hero-in > *, .down, .down svg { animation: none; }
  .hero-sum .hero-in > :not(h1) { animation: none; } /* the sum stands drawn at once (the rule above is outranked by the rise's :not(h1)) */
  @view-transition { navigation: none; }
}