/* Arteko Studio — tokens taken from the brand site (Manrope + Sora, ink #2E2E3F on #F7F7F4, mint accent) */
:root {
  --ground: #ffffff;
  --paper: #FFFFFF;
  --card: #EEEEEA;
  --ink: #2E2E3F;
  --ink-soft: #565669;
  --on-dark: #F7F7F4;
  --on-dark-soft: #C9C9D6;
  --mint: #9DF2C3;
  --mist: #E9EAEC;

  --font-display: "Manrope", system-ui, sans-serif;
  --font-text: "Sora", system-ui, sans-serif;

  --margin: clamp(16px, 2.6vw, 40px);
  --gap: clamp(16px, 2vw, 28px);
  --section: clamp(96px, 12vw, 200px);
  --radius: clamp(18px, 2vw, 28px);

  --step-hero: clamp(42px, 5.6vw, 96px);
  --step-h2: clamp(36px, 4.4vw, 72px);
  --step-statement: clamp(26px, 2.5vw, 40px);
  --step-h3: clamp(20px, 1.6vw, 26px);
  --step-text: clamp(16px, 1.1vw, 18px);
  --step-small: 14px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 300;
  font-size: var(--step-text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
::selection { background: var(--mint); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: fixed; left: var(--margin); top: 8px; z-index: 100;
  padding: 10px 16px; background: var(--ink); color: var(--on-dark);
  border-radius: 999px; transform: translateY(-160%); transition: transform .2s;
}
.skip:focus { transform: none; }

.wrap { padding-inline: var(--margin); max-width: 1680px; margin-inline: auto; }

h1, h2, h3, .hero__statement { text-wrap: balance; }
p { text-wrap: pretty; }

/* SplitText line masks: room for descenders */
.line-mask { padding-bottom: 0.14em; margin-bottom: -0.14em; }

.h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-h2);
  line-height: 1;
  letter-spacing: -0.035em;
}

/* Buttons: one shape, 18px corners */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px;
  border-radius: 18px;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.02em;
  text-transform: uppercase; text-decoration: none;
  transition: translate .35s var(--ease-out), scale .2s, background-color .25s, color .25s;
}
.btn--dark { background: var(--ink); color: var(--on-dark); }
.btn--dark:hover { background: #1F1F2C; translate: 0 -2px; }
.btn:active { translate: 0 0; scale: .97; }
.btn--small { min-height: 42px; padding: 0 20px; font-size: 13px; }

.chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px;
  border-radius: 18px; background: rgba(255, 255, 255, .82); color: var(--ink);
  /* same lettering as the small button in the bar */
  font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.02em;
  text-transform: uppercase; text-decoration: none; transition: background-color .25s, translate .35s var(--ease-out);
}
.chip:hover { background: var(--paper); translate: 0 -2px; }

/* Back to top: a small arrow in the corner, from the second featured case to the end of the page;
   as tall and as round as the call to action button */
.to-top {
  position: fixed; right: var(--margin); bottom: var(--margin); z-index: 49;
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 18px;
  background: var(--paper); color: var(--ink); border: 1px solid #DCDCE0;
  box-shadow: 0 6px 18px rgba(46, 46, 63, .08);
  transition: opacity .35s, transform .45s var(--ease-out), visibility 0s, border-color .25s;
}
.to-top:hover { border-color: #BFBFC7; transform: translateY(-2px); }
.js .to-top:not(.is-shown) {
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .35s, transform .45s var(--ease-out), visibility 0s .45s;
}

/* ---------- Bar ---------- */
/* Scrolls away with the hero; below it, a fixed copy slides in only while scrolling back up */
.bar {
  position: absolute; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: 32px;
  height: 72px; padding-inline: var(--margin);
}
.bar.is-fixed {
  position: fixed; background: var(--ground);
  transform: translateY(-100%);
  transition: transform .45s var(--ease-out);
}
.bar.is-fixed.is-shown { transform: none; }
.bar.no-anim { transition: none; }
.bar__logo img { width: 128px; height: auto; }
.bar__nav { display: flex; gap: 28px; margin-left: auto; font-family: var(--font-display); font-weight: 500; font-size: 15px; }
.bar__nav a { text-decoration: none; padding: 6px 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .35s var(--ease-out); }
.bar__nav a:hover { background-size: 100% 1.5px; }

/* ---------- Hero ---------- */
.hero__stage {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap);
  padding: 0 var(--margin) clamp(32px, 5vh, 64px);
  overflow: hidden;
  cursor: default;
}
.hero__media { position: absolute; inset: 0; background: #DCDDE0; }
.hero__poster, .hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 46%; }
/* where the bud sits on screen, read by the bloom script */
.hero__canvas { --bud-x: 0.62; --bud-y: 0.44; opacity: 0; transition: opacity .6s; }
.hero__canvas.is-ready { opacity: 1; }
.js .hero__poster { visibility: hidden; }
.hero__scrim {
  position: absolute; inset: auto 0 0 0; height: 28%;
  background: linear-gradient(to bottom, rgba(247, 247, 244, 0), var(--ground));
  pointer-events: none;
}
.hero__copy {
  position: relative; grid-column: 1 / span 6;
  align-self: start;
  padding-top: clamp(120px, 20vh, 210px);
}
.hero__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--step-hero); line-height: 1.02; letter-spacing: -0.035em;
  max-width: 8.4em;
}
.hero__title strong { font-weight: 600; }
.hero__lede { max-width: 30em; margin-top: 36px; font-size: clamp(15px, 1vw, 17px); color: var(--ink); }
.hero__aside {
  position: relative; grid-column: 9 / -1; align-self: end;
  padding-bottom: clamp(8px, 4vh, 40px);
}
.hero__jumps { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.hero__baseline { font-size: clamp(16px, 1.2vw, 20px); }
.hero__statement {
  margin-top: 6px;
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--step-statement); line-height: 1.08; letter-spacing: -0.025em;
  max-width: 13em;
}

/* ---------- Featured projects: one case at a time on a design canvas ---------- */
/* Default (phones, reduced motion, no script): the cases simply stack, one large case per screen */
/* 5vw above the heading, 4vw below the last case */
.cases { position: relative; padding-block: clamp(48px, 5vw, 80px) clamp(40px, 4vw, 64px); }
/* A soft, static halftone behind the cases: a fine dot screen in the ink colour, fading out in two
   loose clouds so it reads as texture, never as a grid */
.cases {
  --halftone: radial-gradient(circle, rgba(46, 46, 63, .16) 0 1.1px, transparent 1.7px) 0 0 / 12px 12px;
  --halftone-mask:
    radial-gradient(ellipse 55% 60% at 80% 28%, #000 0%, rgba(0, 0, 0, .55) 40%, transparent 72%),
    radial-gradient(ellipse 50% 55% at 16% 80%, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .35) 42%, transparent 70%);
  /* ...which also fade out towards the top and bottom edges, so the dots never stop at a hard line */
  --halftone-edges: linear-gradient(to bottom, transparent 0%, #000 24%, #000 76%, transparent 100%);
}
.cases::before, .cases.is-board .cases__stage::before {
  content: ""; position: absolute; inset: 0; background: var(--halftone); pointer-events: none;
  -webkit-mask: var(--halftone-edges), var(--halftone-mask); -webkit-mask-composite: source-in, source-over;
  mask: var(--halftone-edges), var(--halftone-mask); mask-composite: intersect, add;
}
.cases > * { position: relative; z-index: 1; }
.cases__head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: clamp(32px, 4vw, 56px); }
.cases__board { display: grid; gap: clamp(56px, 8vw, 96px); padding-inline: var(--margin); }
.cases__links { display: none; }
/* Title and text under the picture */
.cases { --case-inset: clamp(12px, 1.4vw, 20px); } /* the tags' inset; the title and text line up with it */
.case__title {
  margin-top: 22px; padding-inline: var(--case-inset);
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-h3);
  letter-spacing: -0.02em; line-height: 1.15;
}
.case__media {
  position: relative; border-radius: var(--radius); aspect-ratio: 16 / 10; background: var(--mist);
}
.case__media img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
/* The film that plays while a case is in focus, over its picture. Hidden until then, and in the stacked layout.
   It runs a pixel past the box, and once it plays the picture and box colour are off, so no edge shows around it. */
.case__media:has(.case__video) { overflow: hidden; }
.case__media .case__video { position: absolute; left: -1px; top: -1px; width: calc(100% + 2px); max-width: none; height: calc(100% + 2px); object-fit: cover; opacity: 0; pointer-events: none; }
.case__media.is-film { background: transparent; }
.case__media.is-film > img { visibility: hidden; }
.case__media .case__tags { z-index: 1; }
.case__tags {
  position: absolute; left: var(--case-inset); bottom: var(--case-inset); right: 12px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.case__tags li {
  padding: 7px 14px; border-radius: 14px; background: rgba(255, 255, 255, .88);
  font-family: var(--font-display); font-weight: 600; font-size: 13px; line-height: 1.2;
}
.case__text { margin-top: 8px; padding-inline: var(--case-inset); color: var(--ink-soft); font-size: 16px; } /* fills the card width */

/* Canvas mode (set by the script on wider screens): the heading scrolls by as usual,
   then the stage pins and the camera glides from case to case */
/* The pinned stage is a full screen tall with the last case centred in it; the empty space under that
   case (measured by the script as --cases-slack) is taken back, so the same 4vw remains below its frame */
.cases.is-board { padding-bottom: 0; margin-bottom: calc(clamp(40px, 4vw, 64px) - var(--cases-slack, 0px)); }
/* The heading sits on the canvas, placed by the script so it rests at the page margin above the first case, and travels with it */
.cases.is-board .cases__head { position: absolute; margin: 0; }
.cases.is-board .cases__stage { position: relative; height: 100svh; overflow-x: clip; }
/* The cases are cropped to the stage; the heading, on the stage above that crop, never is */
.cases__crop { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.cases.is-board .cases__head { z-index: 2; will-change: transform; }
/* While pinned, the halftone lives on the stage, so it stays still as the camera glides over it */
.cases.is-board::before { display: none; }
.cases.is-board .cases__board { z-index: 1; }
/* The stage tucks up so the heading keeps the section's gap below the hero; the space above the heading is measured by the script */
.cases.is-board .cases__stage { margin-top: calc(-1 * var(--cases-title-top, 0px)); pointer-events: none; }
.cases.is-board .cases__board { display: block; position: absolute; left: 0; top: 0; padding: 0; will-change: transform; }
.cases.is-board .cases__links { display: block; position: absolute; left: 0; top: 0; width: 1px; height: 1px; max-width: none; overflow: visible; pointer-events: none; }
/* One line style for the selection frame and the connectors: same colour, weight and opacity */
.cases { --case-line: rgba(46, 46, 63, .32); --case-line-w: 1px; }
.cases__links path { fill: none; stroke: var(--case-line); stroke-width: var(--case-line-w); vector-effect: non-scaling-stroke; }
.cases.is-board .case { position: absolute; width: var(--case-w); will-change: opacity; }
/* the card itself is solid, so the halftone never sits behind its words */
.cases.is-board .case::before { content: ""; position: absolute; inset: -16px; z-index: -1; border-radius: calc(var(--radius) + 12px); background: var(--ground); opacity: 0; transition: opacity .45s; }
/* ...but only once its words are in: while the camera glides, the halftone shows around the picture */
.cases.is-board .case.is-shown::before { opacity: 1; }
/* The case in focus carries a selection frame around the picture, title and text, with corner handles */
.cases.is-board .case::after {
  content: ""; position: absolute; inset: -16px; border-radius: calc(var(--radius) + 12px);
  border: var(--case-line-w) solid var(--case-line);
  background:
    linear-gradient(var(--ink), var(--ink)) 0 0 / 8px 8px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 0 / 8px 8px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 100% / 8px 8px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 100% / 8px 8px no-repeat;
  opacity: 0; transform: scale(1.015); transition: opacity .45s, transform .6s var(--ease-out);
  pointer-events: none;
}
.cases.is-board .case.is-active::after { opacity: 1; transform: none; }
/* Until a case is in focus only its picture shows; the script brings the words and tags in */
.cases.is-board .case:not(.is-shown) .case__title,
.cases.is-board .case:not(.is-shown) .case__text,
.cases.is-board .case:not(.is-shown) .case__tags li { opacity: 0; }

/* ---------- Brand system, alternative: orbit globe ---------- */
/* No hard edges: the wave picture fades into the page ground at the top and bottom.
   The bottom padding is smaller so the gap to "Pick what fits" matches the gap above the heading. */
.orbit { position: relative; overflow: hidden; background: var(--ground); padding-block: clamp(80px, 9vw, 140px) clamp(40px, 4vw, 64px); }
.orbit__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 72%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 72%, transparent);
}
.orbit__inner {
  position: relative;
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap);
  grid-template-rows: auto 1fr auto;
  min-height: clamp(620px, 52vw, 820px);
}
.orbit__intro { grid-column: 1 / span 5; grid-row: 1; position: relative; z-index: 2; }
.orbit__title { max-width: 9em; } /* size comes from .h2, like "Pick what fits" */
.orbit__lede { margin-top: 32px; max-width: 17em; font-size: clamp(19px, 1.6vw, 24px); line-height: 1.35; font-weight: 400; }
.orbit__globe {
  grid-column: 5 / span 5; grid-row: 1 / -1; align-self: center; justify-self: center;
  position: relative; width: min(100%, 640px); aspect-ratio: 1;
  touch-action: pan-y; cursor: grab;
}
.orbit__globe:active { cursor: grabbing; }
.orbit__globe img {
  position: absolute; left: 50%; top: 50%;
  width: 25%; aspect-ratio: 1; margin: -12.5% 0 0 -12.5%;
  object-fit: cover; border-radius: clamp(10px, 1.1vw, 18px);
  background: var(--paper);
  will-change: transform, opacity;
  user-select: none; -webkit-user-drag: none;
}
.orbit__offer { grid-column: 10 / -1; grid-row: 3; align-self: end; position: relative; z-index: 2; max-width: 22em; }
.orbit__offer-title { font-family: var(--font-text); font-weight: 400; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.2; }
.orbit__offer-text { margin-top: 14px; font-size: 16px; }
.orbit__offer .btn { margin-top: 24px; }
/* Without scripts the globe is a plain grid of the same tiles */
html:not(.js) .orbit__globe { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; aspect-ratio: auto; }
html:not(.js) .orbit__globe img { position: static; width: 100%; margin: 0; }

/* ---------- Packages ---------- */
.packages { padding-block: clamp(64px, 7vw, 112px) 0; }
.packages .h2 { margin-bottom: clamp(40px, 5vw, 64px); }
.packages__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.package {
  display: flex; flex-direction: column;
  min-height: clamp(380px, 32vw, 500px);
  padding: clamp(24px, 2.4vw, 40px);
  border-radius: var(--radius);
  background: var(--card);
  transition: translate .5s var(--ease-out);
}
.package:hover { translate: 0 -6px; }
.package--dark { background: var(--ink); color: #FFFFFF; }
.package__head { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.package__title {
  font-family: var(--font-text); font-weight: 400;
  font-size: clamp(32px, 2.8vw, 46px); line-height: 1.02; letter-spacing: -0.02em;
  max-width: 7em;
}
/* outline icons: 10% larger than the 44px original, 1.25px stroke in the card text colour */
.package__icon { width: 48px; height: 48px; flex: none; overflow: visible; }
.package__icon path { fill: none; stroke: currentColor; stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.package__text { margin-top: auto; padding-top: 48px; max-width: 24em; }
.package--dark .package__text { color: #FFFFFF; }
.package__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.package__tags li {
  padding: 8px 16px; border-radius: 14px;
  font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 1.2;
  background: var(--ink); color: var(--on-dark);
}
.package--dark .package__tags li { background: var(--mint); color: var(--ink); }

/* ---------- CTA + meadow ---------- */
.cta {
  position: relative; z-index: 2;
  overflow-x: clip; /* the clusters bleed off the sides; the reflection still hangs below */
  background: var(--paper);
  margin-top: clamp(48px, 5vw, 80px);
  padding-top: clamp(72px, 8vw, 128px);
  /* the plants' tops reach up beside the text, as in the composition */
  padding-bottom: clamp(110px, 9vw, 160px);
}
.cta__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cta__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-h2); line-height: 1.02; letter-spacing: -0.035em;
  max-width: 13.5em;
}
.cta__text { margin-top: 28px; max-width: 30em; }
.cta__inner .btn { margin-top: 36px; }

/* Two low clusters from "flowers composition.eps", each about a third of the width, inset by the page margin */
.meadow {
  --meadow-w: clamp(260px, 36vw, 680px);
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 0; /* sides are positioned against the water line */
  pointer-events: none;
}
/* the flowers, standing on the water line; script sets the size. They reach 1px behind the line so no gap can open */
.meadow__side { position: absolute; bottom: -1px; display: block; }
.meadow__side--left { left: 0; }
.meadow__side--right { right: 0; }
/* the water line and the mirrored flowers under it: a canvas of the same width, its top edge on the line */
.meadow__reflection { position: absolute; top: 0; display: block; width: var(--meadow-w); height: auto; }
.meadow__reflection--left { left: 0; }
.meadow__reflection--right { right: 0; }

/* ---------- Footer ---------- */
.footer { position: relative; z-index: 1; background: var(--ground); padding-top: clamp(88px, 8vw, 140px); padding-bottom: 32px; }
.footer__inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--gap);
}
.footer__logo { width: clamp(220px, 21vw, 320px); height: auto; }
.footer__board { container-type: inline-size; width: clamp(240px, 22vw, 340px); aspect-ratio: 2.3 / 1; }
.flaps {
  display: grid; grid-template-columns: repeat(6, 14.06cqw); grid-auto-rows: 21cqw; gap: 1.15cqw;
  justify-content: center; align-content: center; height: 100%;
}
.flap { position: relative; display: block; perspective: 120cqw; font-family: var(--font-display); font-weight: 700; font-size: 13.5cqw; line-height: 1; color: #EDEDEF; }
.flap__half { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; display: block; }
.flap__half > span { position: absolute; left: 0; right: 0; height: 200%; display: flex; align-items: center; justify-content: center; }
.flap__half--top { top: 0; border-radius: .6cqw .6cqw 0 0; background: linear-gradient(#3B3B50 55%, #2C2C3F); transform-origin: 50% 100%; }
.flap__half--top > span { top: 0; }
.flap__half--bottom { bottom: 0; border-radius: 0 0 .6cqw .6cqw; background: linear-gradient(#2C2C3F, #3B3B50 45%); transform-origin: 50% 0; }
.flap__half--bottom > span { bottom: 0; }
.flap__leaf { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* the hinge */
.flap::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; margin-top: -.5px; background: rgba(255, 255, 255, .22); }
.footer__contact { justify-self: end; font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 1.6; }
.footer__title { font-family: var(--font-text); font-weight: 400; font-size: clamp(26px, 2.2vw, 34px); margin-bottom: 10px; letter-spacing: -0.01em; }
.footer__contact a { text-decoration: none; transition: opacity .25s; }
.footer__contact a:hover { opacity: .5; }
.footer__legal { margin-top: clamp(48px, 6vw, 96px); font-size: 14px; color: var(--ink-soft); }

/* ---------- Script-driven initial states (only when JS runs) ---------- */
.js [data-hero-title], .js [data-hero-item] { visibility: hidden; }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .hero__copy { grid-column: 1 / span 8; }
  .hero__lede { max-width: 20em; }
  .hero__aside { grid-column: 7 / -1; }
  .hero__canvas { --bud-x: 0.62; --bud-y: 0.5; --frame-max: 1.6; }
  .orbit__inner { min-height: 0; grid-template-rows: auto auto auto; }
  .orbit__intro { grid-column: 1 / span 8; }
  .orbit__globe { grid-column: 1 / -1; grid-row: 2; width: min(100%, 600px); margin-block: 24px; }
  .orbit__offer { grid-column: 7 / -1; grid-row: 3; }
  .packages__list { grid-template-columns: 1fr 1fr; }
  .packages__list > :first-child { grid-column: 1 / -1; min-height: 320px; }
}

/* Tablet only */
@media (min-width: 721px) and (max-width: 1024px) {
  /* the intro's words run the full width of its column, two thirds of the screen */
  .orbit__title, .orbit__lede { max-width: none; }
  /* the globe and the wave come up closer to the words. The tiles leave about the same empty edge at the top
     and bottom of the globe's box, so equal margins give equal gaps (about 32px) to the words above and below */
  .orbit__globe { margin-block: -16px; }
  .orbit__bg { top: -15%; height: 115%; }
  /* the logo on the left; the contact details and the board under them in the right column */
  .footer__inner { grid-template-columns: 1fr auto; row-gap: 32px; }
  .footer__logo { grid-column: 1; grid-row: 1; align-self: center; } /* level with the middle of the contact details */
  .footer__board { grid-column: 2; grid-row: 2; justify-self: start; width: clamp(208px, 25.6vw, 256px); }
  .footer__board .flaps { justify-content: start; } /* the letters line up with the contact details above */
  .footer__contact { grid-column: 2; grid-row: 1; justify-self: start; align-self: end; }
}

/* ---------- Phone ---------- */
@media (max-width: 720px) {
  .bar { height: 60px; gap: 16px; }
  .bar__nav { display: none; }
  .bar .btn { margin-left: auto; }
  .bar__logo img { width: 112px; }

  .hero__stage { display: block; min-height: 0; padding: 0; overflow: visible; }
  .hero__media { position: relative; inset: auto; height: 100svh; min-height: 560px; overflow: hidden; }
  .hero__poster, .hero__canvas { object-position: 50% 50%; }
  .hero__canvas { --bud-x: 0.5; --bud-y: 0.52; --frame-max: 2.4; }
  .hero__copy { position: absolute; inset: 0; align-self: stretch; padding: 92px var(--margin) 0; pointer-events: none; } /* the peony still feels the touch */
  .hero__copy > * { pointer-events: auto; }
  .hero__title { font-size: clamp(38px, 10.6vw, 52px); }
  /* the lede and the two jump buttons sit together at the foot of the picture, the buttons 32px from its edge
     and the lede 16px above them; the two statements are left out on a phone */
  .hero__lede { position: absolute; left: var(--margin); bottom: 88px; width: 80vw; max-width: none; margin: 0; font-size: 15px; }
  .hero__aside { position: absolute; left: 0; right: 0; bottom: 32px; padding: 0 var(--margin); }
  .hero__jumps { margin-bottom: 0; }
  .hero__baseline, .hero__statement { display: none; }

  .case__title, .case__text { padding-inline: 0; } /* the words under a case start at its left edge */

  .orbit { padding-top: 16px; } /* keeps the gaps above and below the section about equal on a phone */
  .orbit__intro, .orbit__offer { grid-column: 1 / -1; }
  .orbit__lede { margin-top: 20px; }
  .orbit__title, .orbit__lede { width: 80vw; max-width: none; }
  .orbit__offer { max-width: none; }
  .orbit__offer-text { width: 80vw; }
  .orbit__globe { width: 100%; margin-block: 8px; }
  .orbit__globe img { width: 27%; margin: -13.5% 0 0 -13.5%; }

  .packages__list { grid-template-columns: 1fr; }
  .packages__list > :first-child { grid-column: auto; }
  .package { min-height: 300px; }

  /* on a phone the clusters sit under the button rather than beside it */
  .cta { padding-bottom: calc(46vw * 0.33 + 48px); }
  .cta__title { font-size: clamp(32px, 9vw, 44px); }
  .meadow { --meadow-w: calc(50vw - 6px); }

  .footer { padding-top: 72px; }
  .footer__inner { grid-template-columns: 1fr; justify-items: center; row-gap: 32px; text-align: center; }
  /* logo, contact details, then the board, all centred */
  .footer__contact { grid-row: 2; justify-self: center; }
  .footer__board { grid-row: 3; width: min(72%, 231px); }
  .footer__legal { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}