/* Colours are sampled from images/SKlogo.png */
:root {
  --ink: #0b1533;
  --navy: #001a66;
  --blue: #0a62f0;
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23e6efff'/%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.6' fill='none' stroke='%230a62f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* blue tick in a pale circle */
  --shade: 4 10 32; /* RGB of the dark wash over hero images */

  --font-sans: "IBM Plex Sans Thai", system-ui, -apple-system, sans-serif;

  --gutter: clamp(16px, 2.6vw, 48px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Light blue page with soft glows and a faint pattern of crossing curves, so the white cards stand out. */
body {
  margin: 0;
  background:
    url("../images/bg-lines.svg") 50% 0 / max(1100px, 100%) auto repeat-y,
    radial-gradient(ellipse 70% 30% at 100% 12%, rgb(10 98 240 / 0.09), transparent 70%),
    radial-gradient(ellipse 60% 30% at 0% 55%, rgb(10 98 240 / 0.07), transparent 70%),
    linear-gradient(#f6f9ff, #e8f0fd);
  background-color: #eef4fd;
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 1.0625rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s, transform 0.2s;
}

.btn:active {
  transform: scale(0.97);
}

.btn--sm {
  min-height: 42px;
  padding: 0 20px;
  font-size: 0.9375rem;
}

.btn--dark {
  background: var(--navy);
  color: #fff;
}

.btn--dark:hover {
  background: var(--blue);
}

.btn--light {
  background: #fff;
  color: var(--navy);
}

.btn--light:hover {
  background: #e8eefc;
}

/* ---------- Header ----------
   Floats on top of the hero (which is inset by the same 12px), so it has no background of its own. */

.site-header {
  position: absolute;
  inset: 12px 12px auto;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* keeps the menu centred whatever the widths of the logo and button */
  align-items: center;
  gap: 12px clamp(16px, 3vw, 48px);
  padding: clamp(16px, 2.2vw, 28px) clamp(20px, 3.5vw, 56px);
  color: #fff;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* the logo mark in white, so it shows on the dark hero */
.brand img {
  width: auto;
  height: 34px;
  filter: brightness(0) invert(1);
}

.site-nav ul {
  display: flex;
  gap: clamp(20px, 2.4vw, 36px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-block;
  padding: 4px 0;
  font-size: 1.0625rem;
  font-weight: 500;
  white-space: nowrap;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size 0.25s;
}

.site-nav a:hover {
  background-size: 100% 1.5px;
}

.site-header__cta {
  justify-self: end;
}

/* the white button gets a soft glow so it lifts off the dark */
.site-header .btn--light {
  box-shadow: 0 8px 30px -8px rgb(120 170 255 / 0.6);
}

/* Not enough room for one row: the menu drops to its own row under the logo. */
@media (max-width: 719px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .site-nav {
    order: 1;
    grid-column: 1 / -1;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .site-nav ul {
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
  }
}

/* ---------- Hero ----------
   A rounded slab of dark night sky, inset from the window edges, with the header floating on top. The
   headline and buttons sit in the middle; below them a strip of small cards rides a wide arc (positioned
   by js/main.js) in front of a blue glow rising from the bottom. --card-w sets the card size and
   everything inside a card scales with it. */

.hero {
  --card-w: clamp(148px, calc(10vw + 80px), 250px);
  --u: calc(var(--card-w) / 100); /* 1% of a card's width: card padding, text and radii are all multiples of this */
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: clamp(640px, min(calc(100svh - 24px), calc(80vw + 100px)), 960px); /* fills the window, but a tall narrow one does not get a big empty gap */
  margin: 12px 12px 0;
  padding-top: clamp(104px, 14vh, 160px);
  overflow: hidden;
  border-radius: clamp(24px, 3vw, 44px);
  background:
    radial-gradient(ellipse 90% 45% at 50% 105%, rgb(58 130 240 / 0.42), transparent 72%),
    radial-gradient(ellipse 60% 40% at 50% 0%, rgb(24 56 130 / 0.3), transparent 72%),
    linear-gradient(180deg, #04091a 0%, #061430 42%, #09265a 78%, #0e3576 100%);
  color: #fff;
  text-align: center;
}

.hero :focus-visible,
.site-header :focus-visible {
  outline-color: #fff; /* the default blue ring would vanish on the dark */
}

/* Blue glow along the bottom: soft blobs in two layers that drift slowly in opposite directions. */
.hero__glow,
.hero__glow::before {
  position: absolute;
  inset: auto -12% -10%;
  height: 62%;
  background:
    radial-gradient(ellipse 26% 46% at 14% 100%, rgb(40 110 230 / 0.5), transparent 70%),
    radial-gradient(ellipse 30% 56% at 40% 108%, rgb(90 160 255 / 0.55), transparent 68%),
    radial-gradient(ellipse 26% 48% at 62% 100%, rgb(60 130 240 / 0.45), transparent 70%),
    radial-gradient(ellipse 30% 58% at 88% 108%, rgb(50 120 235 / 0.5), transparent 68%);
  filter: blur(22px);
}

.hero__glow {
  z-index: -1;
  animation: glow-drift 46s ease-in-out infinite alternate;
}

.hero__glow::before {
  content: "";
  inset: auto 0 -6%;
  height: 80%;
  background-position: 100% 100%;
  background-size: 140% 100%;
  opacity: 0.7;
  animation: glow-drift 62s ease-in-out infinite alternate-reverse;
}

@keyframes glow-drift {
  from { transform: translateX(-3%); }
  to { transform: translateX(3%); }
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 1000px;
  margin-bottom: clamp(24px, 3vw, 48px);
  padding-inline: var(--gutter);
}

.hero__title {
  margin: 0;
  font-size: clamp(1.875rem, 1.1rem + 3.8vw, 4.5rem);
  font-weight: 500;
  line-height: 1.3;
  text-wrap: balance;
}

.hero__title span {
  display: block;
}

.hero__title-accent {
  color: #b9d8ff;
}

.hero__sub {
  max-width: 34em;
  margin: clamp(12px, 1.6vw, 22px) auto 0;
  color: rgb(255 255 255 / 0.92);
  font-size: clamp(1rem, 0.9rem + 0.45vw, 1.25rem);
  line-height: 1.6;
  text-wrap: balance;
}

.hero__sub span {
  display: inline-block;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(24px, 3vw, 40px);
}

.btn--hero {
  gap: 10px;
  min-height: 56px;
  padding: 0 30px;
}

.btn--hero.btn--light {
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.25), 0 10px 40px -6px rgb(120 170 255 / 0.55);
}

.btn__arrow {
  width: 20px;
  height: 20px;
  transition: transform 0.2s;
}

.btn--hero:hover .btn__arrow {
  transform: translateX(4px);
}

.btn--glass {
  padding-left: 14px;
  border: 1px solid rgb(255 255 255 / 0.55);
  background: rgb(255 255 255 / 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
}

.btn--glass:hover {
  background: rgb(255 255 255 / 0.2);
}

.btn__play {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.22);
}

.btn__play svg {
  width: 14px;
  height: 14px;
  margin-left: 2px; /* optical centring of the triangle */
  fill: currentColor;
}

/* The stage is tall enough for the tallest (square) card plus most of how far the arc drops at the screen
   edges; the outermost cards run off the bottom on purpose. The perspective on it is what makes the outer
   cards turn away and shrink. */
.hero__stage {
  position: relative;
  z-index: 1;
  width: 100%;
  height: calc(var(--card-w) + 8vw + 24px);
  margin-top: auto;
  perspective: 1400px;
  perspective-origin: 50% 20%;
  opacity: 0; /* stays hidden until the script has laid the cards out */
}

.hero__stage[data-ready] {
  opacity: 1;
}

.hero__cards {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Every card starts in the middle of the stage; the script moves it along the arc with a transform.
   --h is the card's height as a percentage of its width, and shorter cards are centred on the same line. */
.hero-card {
  --h: 80;
  position: absolute;
  top: calc((100 - var(--h)) / 2 * var(--u));
  left: 50%;
  display: flex;
  flex-direction: column;
  width: var(--card-w);
  height: calc(var(--h) * var(--u));
  margin-left: calc(var(--card-w) / -2);
  overflow: hidden;
  border-radius: calc(var(--u) * 7);
  background: #fff;
  box-shadow:
    0 calc(var(--u) * 9) calc(var(--u) * 20) calc(var(--u) * -6) rgb(6 24 70 / 0.5),
    0 1px 3px rgb(6 24 70 / 0.16);
  color: var(--ink);
  text-align: left;
  opacity: 0;
  will-change: transform, opacity;
}

.hero-card--tall {
  --h: 100;
}

.hero-card :where(p, ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* a picture that fills the whole card (from images/cards/) */
.hero-card--photo {
  border: 1px solid rgb(255 255 255 / 0.14);
  background: #060d1f;
}

.hero-card--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* text-only cards, each in a different finish so the strip is not a row of identical boxes */
.hero-card--dark,
.hero-card--light,
.hero-card--blue {
  justify-content: space-between;
  padding: calc(var(--u) * 8);
}

.hero-card--dark {
  border: 1px solid rgb(255 255 255 / 0.14);
  background: linear-gradient(160deg, #16295f, var(--ink));
  color: #fff;
}

/* the night-stage picture behind the text */
.hero-card--stage {
  background: #040b1d url("../images/cards/stage.webp") 50% 100% / cover no-repeat;
}

.hero-card--blue {
  border: 1px solid rgb(255 255 255 / 0.35);
  background: linear-gradient(155deg, #2b7bf0, #0a4fd0);
  color: #fff;
}

.hero-card--tint {
  background: #e3edff;
}

.hero-card__kicker {
  color: var(--blue);
  font-size: max(10px, calc(var(--u) * 5.6));
  font-weight: 600;
  line-height: 1.3;
}

.hero-card--dark .hero-card__kicker,
.hero-card--blue .hero-card__kicker {
  color: rgb(255 255 255 / 0.75);
}

.hero-card__big {
  font-size: calc(var(--u) * 26);
  font-weight: 600;
  line-height: 1;
}

.hero-card__big span {
  margin-left: 0.04em;
  color: #7fb2ff;
  font-size: 0.5em;
}

.hero-card__big--sm {
  font-size: calc(var(--u) * 11);
  line-height: 1.25;
}

.hero-card__note {
  color: rgb(255 255 255 / 0.75);
  font-size: max(10px, calc(var(--u) * 5));
  line-height: 1.3;
}

.hero-card__checks {
  display: grid;
  gap: calc(var(--u) * 3.6);
  color: var(--navy);
  font-size: max(11px, calc(var(--u) * 6.6));
  font-weight: 600;
}

.hero-card__checks li {
  padding-left: calc(var(--u) * 10.5);
  background: var(--check) 0 50% / calc(var(--u) * 7.5) no-repeat;
  line-height: 1.5;
}

/* Widgets: little screens from an imaginary shop dashboard. The numbers are sample data. */
.hero-card--ui {
  gap: calc(var(--u) * 2.6);
  padding: calc(var(--u) * 7);
}

.w-label {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  color: #6b7690;
  font-size: max(8.5px, calc(var(--u) * 5));
  font-weight: 500;
  line-height: 1.3;
}

.w-dot {
  flex: none;
  width: calc(var(--u) * 3);
  height: calc(var(--u) * 3);
  border-radius: 50%;
  background: var(--blue);
}

.w-dot--line { background: #06c755; }
.w-dot--green { background: #22c55e; }
.w-dot--amber { background: #f5a524; }

/* sales: the amount beside a progress ring, then two counts */
.w-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 3);
}

.w-num {
  font-size: calc(var(--u) * 12.5);
  font-weight: 600;
  line-height: 1.15;
}

.w-note {
  color: #6b7690;
  font-size: max(8.5px, calc(var(--u) * 4.6));
  line-height: 1.3;
}

.w-ring {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: calc(var(--u) * 26);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#2b7bf0 var(--p), #e6edfb 0);
}

.w-ring::before {
  content: "";
  position: absolute;
  inset: calc(var(--u) * 4);
  border-radius: 50%;
  background: #fff;
}

.w-ring span {
  position: relative;
  font-size: max(8.5px, calc(var(--u) * 5.6));
  font-weight: 600;
}

.w-rows {
  margin-top: auto !important;
  border-top: 1px solid #edf0f7;
}

.w-rows li {
  display: flex;
  justify-content: space-between;
  padding: calc(var(--u) * 2) 0;
  border-bottom: 1px solid #edf0f7;
  font-size: max(9px, calc(var(--u) * 5.2));
  line-height: 1.4;
}

.w-rows b {
  font-weight: 600;
}

/* orders: one white pill per order on a pale blue card */
.w-list {
  display: grid;
  gap: calc(var(--u) * 2);
}

.w-list li {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2.4);
  padding: calc(var(--u) * 2.6) calc(var(--u) * 3);
  border-radius: calc(var(--u) * 3.6);
  background: #fff;
  font-size: max(9px, calc(var(--u) * 5.4));
  line-height: 1.4;
}

.w-list span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.w-list b {
  font-weight: 600;
}

/* LINE chat: two speech bubbles from the customer, one from us */
.w-bubble {
  align-self: flex-start;
  max-width: 82%;
  padding: calc(var(--u) * 2.6) calc(var(--u) * 3.6);
  border-radius: calc(var(--u) * 4) calc(var(--u) * 4) calc(var(--u) * 4) calc(var(--u) * 1);
  background: #eef1f7;
  font-size: max(9px, calc(var(--u) * 5.2));
  line-height: 1.35;
}

.w-bubble--me {
  align-self: flex-end;
  border-radius: calc(var(--u) * 4) calc(var(--u) * 4) calc(var(--u) * 1) calc(var(--u) * 4);
  background: #b8ee8a;
}

/* bookings: a month of little squares, some already taken, one for today */
.w-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: calc(var(--u) * 1.8);
}

.w-cal i {
  aspect-ratio: 1;
  border-radius: calc(var(--u) * 1.8);
  background: #eef1f7;
}

.w-cal i:is(:nth-child(3), :nth-child(4), :nth-child(5), :nth-child(10), :nth-child(11), :nth-child(17), :nth-child(18), :nth-child(19), :nth-child(24), :nth-child(25), :nth-child(31)) {
  background: #cfe0ff;
}

.w-cal i:nth-child(14) {
  background: #2b7bf0;
}

.w-chip {
  align-self: flex-start;
  margin-top: auto !important;
  padding: calc(var(--u) * 2) calc(var(--u) * 3.8);
  border-radius: 999px;
  background: #e3edff;
  color: #0a4fd0;
  font-size: max(9px, calc(var(--u) * 5));
  font-weight: 600;
  line-height: 1.3;
}

/* project status: finished steps are ticked, the current one has a ring */
.hero-card--steps {
  justify-content: flex-start;
  gap: calc(var(--u) * 8);
}

.w-steps {
  display: grid;
  gap: calc(var(--u) * 6.5);
}

.w-steps li {
  position: relative;
  padding-left: calc(var(--u) * 11);
  color: rgb(255 255 255 / 0.55);
  font-size: max(10px, calc(var(--u) * 6.4));
  line-height: calc(var(--u) * 6.4);
}

.w-steps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--u) * 6.4);
  height: calc(var(--u) * 6.4);
  box-sizing: border-box;
  border: 1.5px solid rgb(255 255 255 / 0.3);
  border-radius: 50%;
}

.w-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--u) * 3.2 - 0.5px);
  top: calc(var(--u) * 6.4);
  width: 1px;
  height: calc(var(--u) * 6.5);
  background: rgb(255 255 255 / 0.2);
}

.w-foot {
  display: grid;
  gap: calc(var(--u) * 2.4);
  margin-top: auto;
}

.w-bar {
  height: calc(var(--u) * 2);
  overflow: hidden;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.16);
}

.w-bar i {
  display: block;
  width: 50%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2b7bf0, #7fb2ff);
}

.w-steps .is-done {
  color: #fff;
}

.w-steps .is-done::before {
  border-color: #2b7bf0;
  background: #2b7bf0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.4' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50% / 72% no-repeat;
}

.w-steps .is-now {
  color: #fff;
  font-weight: 600;
}

.w-steps .is-now::before {
  border-color: #7fb2ff;
  background: radial-gradient(circle, #7fb2ff 35%, transparent 40%);
}

.hero__toggle {
  position: absolute;
  left: clamp(16px, 2.2vw, 32px);
  bottom: clamp(16px, 2vw, 28px);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.55);
  border-radius: 50%;
  background: rgb(var(--shade) / 0.45);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s;
}

.hero__toggle:hover {
  background: rgb(var(--shade) / 0.7);
}

.hero__toggle[hidden] {
  display: none;
}

.hero__toggle svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.hero__toggle .icon-play,
.hero__toggle[data-paused="true"] .icon-pause {
  display: none;
}

.hero__toggle[data-paused="true"] .icon-play {
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  /* the text rises in one line at a time */
  .hero__title span,
  .hero__sub,
  .hero__actions {
    animation: hero-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .hero__title-accent { animation-delay: 0.12s; }
  .hero__sub { animation-delay: 0.24s; }
  .hero__actions { animation-delay: 0.36s; }

  .hero__stage {
    transition: opacity 1s 0.3s;
  }
}

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__glow,
  .hero__glow::before {
    animation: none;
  }
}

/* ---------- Sections ---------- */

.section {
  padding-block: clamp(56px, 8vw, 112px);
}

/* ---------- Pop up on scroll ----------
   Anything marked data-reveal waits invisible until it has scrolled well into view, then pops up with a small
   overshoot (js/main.js adds .is-in and, for several arriving together, an animation-delay so they come one after
   another). A big dark panel marked data-slab (Benefits, the footer) keeps its background hidden too, and
   unrolls from the top at the moment the first thing inside it pops up (.slab-in), so an empty box is never
   left sitting on the page. Only with JS and no reduced-motion preference; otherwise nothing is ever hidden. */

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal]:not(.is-in) {
    opacity: 0;
  }

  .js [data-reveal].is-in {
    animation: pop-in 0.8s cubic-bezier(0.34, 1.3, 0.64, 1) backwards;
  }

  .js [data-slab]:not(.slab-in)::before {
    opacity: 0;
  }

  .js [data-slab].slab-in::before {
    animation: slab-in 1s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  }
}

@keyframes slab-in {
  from {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }

  to {
    opacity: 1;
    clip-path: inset(0);
  }
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
  }
}

/* The pop-up overshoots for a moment, which can push a full-width block a pixel past the window edge and flash a
   sideways scrollbar. Clipping sideways inside <main> (which does not make it a scroll box) stops that. */
main {
  overflow-x: clip;
}

/* Hidden on screen but still read by screen readers and search engines. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.section-title {
  margin: 0 0 clamp(24px, 3vw, 40px);
  padding-inline: var(--gutter);
  color: var(--navy);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}

.section-title:has(+ .section-lead) {
  margin-bottom: 10px;
}

.section-lead {
  max-width: 60ch;
  margin: 0 auto clamp(28px, 3.5vw, 48px);
  padding-inline: var(--gutter);
  color: #4a5570;
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  text-align: center;
  text-wrap: balance;
}

.section-lead strong {
  color: var(--blue);
  font-weight: 600;
}

/* a line and a button under a section's content (FAQ, Process) */
.section-cta {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin-top: clamp(28px, 3.5vw, 44px);
  padding-inline: var(--gutter);
  text-align: center;
}

.section-cta p {
  margin: 0;
  color: #4a5570;
  font-size: 1.0625rem;
}

/* ---------- Services ---------- */

/* The heading has its own space; the card row below has its own bottom padding. */
.services {
  padding-block: clamp(56px, 7vw, 104px) 0;
}

/* The Services heading is a normal .section-title with two additions: a softer second line, and the logo set into
   the text as a tile. Anything about the heading's size or font is changed in .section-title. */
.section-title > span {
  display: block;
}

.section-title > .section-title__soft {
  color: #7d879e;
}

.logo-tile {
  display: inline-grid;
  place-items: center;
  width: 1.05em;
  height: 1.05em;
  margin-inline: 0.14em 0.2em;
  vertical-align: -0.14em;
  border-radius: 28%;
  background: var(--navy);
  box-shadow: 0 0.18em 0.4em -0.1em rgb(0 26 102 / 0.35);
}

.logo-tile img {
  width: 62%;
  height: auto;
  filter: brightness(0) invert(1); /* the mark in white, like in the header */
}

@media (prefers-reduced-motion: no-preference) {
  .logo-tile {
    animation: tile-tilt 4.5s ease-in-out infinite;
  }
}

@keyframes tile-tilt {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}

/* One row of cards, centred when it fits the screen; otherwise it fills the width and scrolls sideways
   (swipe on phones, trackpad on laptops), starting from the first card. Set the card width with
   grid-auto-columns on the list. */
.card-row {
  display: grid;
  grid-auto-flow: column;
  gap: clamp(20px, 2.2vw, 32px);
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 16px var(--gutter) 32px; /* room for the card shadows, which the scroll box would otherwise clip */
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}

.card-row > * {
  scroll-snap-align: start;
}

.services__list {
  grid-auto-columns: clamp(210px, 18vw, 260px);
}

/* With JS (and no reduced-motion preference) the row becomes a marquee: js/main.js holds every card twice and this
   slides the list right by exactly one set, over and over: the opposite way to the hero cards, which move left. The
   frame clips it; the list only moves while the section is on screen (.is-live) and not under the mouse (:hover) or a
   finger (.is-held, which js/main.js sets while the row is touched). */
.services {
  --play: paused;
}

.services.is-live {
  --play: running;
}

.marquee {
  overflow: hidden;
}

.services__list.is-marquee {
  max-width: none;
  margin: 0;
  padding-inline: 0 clamp(20px, 2.2vw, 32px); /* one trailing gap, so the two sets are exactly half of the list each */
  overflow: visible;
  scroll-snap-type: none;
  animation: services-run var(--run, 45s) linear infinite;
  animation-play-state: var(--play);
  will-change: transform;
}

@keyframes services-run {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

@media (hover: hover) {
  .marquee:hover .is-marquee {
    animation-play-state: paused;
  }
}

.marquee.is-held .is-marquee {
  animation-play-state: paused;
}

/* Each card image has a transparent margin around the card (72px at its 880px card width) so tiles
   can poke out past the card edge. Pull that margin outside the list item so the cards themselves
   line up with the grid, and let the pop-outs spill into the gaps.
   The transparent parts also mean drop-shadow follows the card's real shape. */
.service-card img {
  --pop: calc(72 / 880 * 100%);
  width: calc(100% + 2 * var(--pop));
  max-width: none;
  height: auto;
  margin: calc(-1 * var(--pop));
  filter: drop-shadow(0 6px 12px rgb(var(--shade) / 0.1));
}

/* ---------- Benefits ----------
   A dark slab in the same shape as the hero, holding six cards in an interlocking bento. Each card has a small
   animation (all decorative). 01, 02 and 03 loop while the section is on screen (js/main.js adds .is-live, which
   flips --play); 04, 05 and 06 play once when their card pops into view (.is-in) and then stay as they ended. The
   animations that build things up (rows appearing, bars growing) run off one number per picture, --t, which sweeps
   from 0 to 100; every part works out its own opacity and position from it. With reduced motion, or without JS,
   --t just sits at its end and every picture shows its finished state. */

@property --t {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.benefits {
  --play: paused;
  position: relative;
  isolation: isolate;
  margin: clamp(40px, 5vw, 72px) 12px 0;
  padding: clamp(64px, 8vw, 112px) var(--gutter) clamp(48px, 6vw, 88px);
  overflow: hidden;
  border-radius: clamp(24px, 3vw, 44px);
  color: #fff;
}

/* the dark panel itself (a layer behind everything in the section, so it can pop up with its first content) */
.benefits::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 55% 30% at 10% 0%, rgb(43 123 240 / 0.3), transparent 70%),
    radial-gradient(ellipse 45% 28% at 100% 60%, rgb(43 123 240 / 0.18), transparent 70%),
    linear-gradient(180deg, #050b1c, #071733 55%, #050b1c);
}

.benefits.is-live {
  --play: running;
}

.benefits__inner {
  max-width: 1180px;
  margin: 0 auto;
}

.benefits__title {
  margin: 0;
  font-size: clamp(1.75rem, 3vw, 2.5rem); /* the same as .section-title */
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
}

.benefits__title span {
  display: block;
  color: #7fb2ff;
}

.benefits__lead {
  max-width: 40em;
  margin: 14px auto 0;
  color: rgb(255 255 255 / 0.7);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.1875rem);
  text-align: center;
  text-wrap: balance;
}

/* One column on phones, two on tablets (the tall cards run across both), twelve on desktop where the tall
   cards take two rows: a wide one on the left first, then a narrow one, so the pieces interlock. */
.bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(12px, 1.5vw, 18px);
  margin-top: clamp(32px, 4vw, 56px);
}

@media (min-width: 640px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bcard--price,
  .bcard--system {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .bento {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .bcard--price { grid-column: 1 / 8; grid-row: 1 / 3; }
  .bcard--fit { grid-column: 8 / 13; grid-row: 1; }
  .bcard--connect { grid-column: 8 / 13; grid-row: 2; }
  .bcard--system { grid-column: 1 / 6; grid-row: 3 / 5; }
  .bcard--hassle { grid-column: 6 / 13; grid-row: 3; }
  .bcard--care { grid-column: 6 / 13; grid-row: 4; }
}

/* The card is the size container, so what is inside can size itself from the card's width (cqw) and the
   wide cards can switch to a row layout once they have room. */
.bcard {
  position: relative;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  padding: clamp(44px, 4vw, 56px) clamp(20px, 2.2vw, 32px) clamp(22px, 2.2vw, 32px);
  overflow: hidden;
  border-radius: clamp(20px, 2.2vw, 28px);
  background: linear-gradient(165deg, #10204a, #0a142f);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
  color: #fff;
}

.bcard--blue {
  background: linear-gradient(150deg, #2468e6, #0a3aa8);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18);
}

.bcard--light {
  background: #e6efff;
  box-shadow: none;
  color: var(--ink);
}

.bcard__no {
  position: absolute;
  top: clamp(18px, 1.8vw, 24px);
  left: clamp(20px, 2.2vw, 32px);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  opacity: 0.55;
}

.bcard__body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

/* The picture. Everything in it is sized in em, so it scales with the card. */
.bcard__art {
  position: relative;
  flex: 1;
  min-height: var(--art-h, 14em);
  font-size: clamp(11px, 3.1cqw, 15px);
}

.bcard__text {
  margin-top: clamp(16px, 2vw, 24px);
}

.bcard__text h3 {
  margin: 0;
  font-size: clamp(1.125rem, 1.05rem + 0.5vw, 1.5rem);
  font-weight: 600;
  line-height: 1.35;
}

.bcard__text p {
  margin: 8px 0 0;
  text-wrap: pretty;
  color: rgb(255 255 255 / 0.72);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.bcard--blue .bcard__text p {
  color: rgb(255 255 255 / 0.85);
}

.bcard--light .bcard__text p {
  color: #4a5570;
}

.bcard--light .bcard__no {
  color: var(--navy);
}

@container (min-width: 560px) {
  .bcard--wide .bcard__body {
    flex-direction: row;
    align-items: stretch;
    gap: clamp(20px, 4cqw, 40px);
  }

  .bcard--flip .bcard__body {
    flex-direction: row-reverse;
  }

  .bcard--wide .bcard__art {
    flex: 1.2;
  }

  .bcard--wide .bcard__text {
    flex: 1;
    align-self: center;
    margin-top: 0;
  }
}

/* small floating pieces shared by the pictures */
.tag,
.chip {
  position: absolute;
  z-index: 3;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 1.2em 2.4em -1em rgb(2 10 40 / 0.55);
}

.tag {
  padding: 0.75em 1.2em;
  border-radius: 0.9em;
  font-size: 1.05em;
}

.tag--dark {
  background: #0b1533;
  color: #fff;
}

.tag--light {
  background: #fff;
  color: var(--ink);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.7em 1.1em;
  border-radius: 999px;
  font-size: 0.95em;
}

.chip--light {
  background: #fff;
  color: var(--ink);
}

.chip--glass {
  border: 1px solid rgb(255 255 255 / 0.4);
  background: rgb(255 255 255 / 0.16);
  color: #fff;
}

.chip i {
  width: 0.65em;
  height: 0.65em;
  border-radius: 50%;
  background: #22c55e;
}

.chip svg {
  width: 1.2em;
  height: 1.2em;
}

/* 01 · price: a receipt, with a giant outlined 999 behind it */
.bcard--price .bcard__art {
  --art-h: 29em;
  font-size: clamp(12px, 3.3cqw, 17px);
}

.art-numeral {
  position: absolute;
  top: -0.1em;
  right: -0.06em;
  color: transparent;
  font-size: 16em;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  -webkit-text-stroke: 1px rgb(255 255 255 / 0.36);
  user-select: none;
}

/* the pictures that count up: --t is how far along they are. 01 loops, so --out fades everything at the end of each
   loop; 04, 05 and 06 play once when their card arrives and stay finished, so they never fade and 100 is the end. */
.receipt {
  --t: 90;
  --out: clamp(0, (94 - var(--t)) / 4, 1);
}

.dash,
.deploy,
.chat {
  --t: 100;
  --out: 1;
}

.receipt {
  position: absolute;
  top: 7%;
  left: 4%;
  z-index: 1;
  width: 22em;
  max-width: 88%;
  padding: 1.4em 1.5em 1.3em;
  border-radius: 1.3em;
  background: #fff;
  box-shadow: 0 2.2em 4em -1.6em rgb(2 10 40 / 0.65);
  color: var(--ink);
  transform: rotate(-3deg);
}

.receipt__head {
  margin: 0;
  color: #6b7690;
  font-size: 0.8em;
  font-weight: 500;
}

.receipt__rows {
  margin: 0.7em 0 0;
  padding: 0;
  list-style: none;
}

.receipt__rows li {
  --p: clamp(0, (var(--t) - var(--s)) / 6, 1);
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.6em 0;
  border-bottom: 1px solid #edf0f7;
  font-size: 0.92em;
  line-height: 1.3;
  opacity: calc(var(--p) * var(--out));
  transform: translateX(calc((1 - var(--p)) * -1em));
}

.receipt__rows li::before {
  content: "";
  flex: none;
  width: 1.3em;
  height: 1.3em;
  background: var(--check) center / contain no-repeat;
  transform: scale(calc(0.4 + 0.6 * var(--p)));
}

.receipt__rows em {
  margin-left: auto;
  padding: 0.1em 0.65em;
  border-radius: 999px;
  background: #d9f7e3;
  color: #157a3a;
  font-size: 0.8em;
  font-style: normal;
  font-weight: 600;
}

.receipt__total {
  --p: clamp(0, (var(--t) - var(--s)) / 6, 1);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0.8em 0 0;
  font-weight: 600;
  opacity: calc(var(--p) * var(--out));
  transform: translateY(calc((1 - var(--p)) * 0.6em)) scale(calc(0.92 + 0.08 * var(--p)));
  transform-origin: right center;
}

.receipt__total b {
  color: var(--blue);
  font-size: 1.9em;
  letter-spacing: -0.02em;
}

/* on a narrow card the receipt fills the width, so the tag waits below it instead of covering a row */
.tag--price {
  right: 5%;
  bottom: 4%;
  rotate: 5deg;
}

@container (min-width: 560px) {
  .tag--price {
    top: 46%;
    right: 6%;
    bottom: auto;
  }
}

.chip--domain {
  bottom: 9%;
  left: 5%;
}

.chip--host {
  bottom: 3%;
  left: 36%;
}

/* 02 · responsive: a page that squeezes from PC to tablet to phone, and re-flows as it goes */
.bcard--fit .bcard__art {
  --art-h: 14em;
}

.rz-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1em;
}

.rz {
  width: 100%;
  max-width: 27em;
  height: 9.6em;
  overflow: hidden;
  border-radius: 0.9em;
  background: #fff;
  box-shadow: 0 1.6em 3em -1.2em rgb(0 0 0 / 0.6);
}

.rz__bar {
  display: flex;
  gap: 0.35em;
  padding: 0.55em 0.7em;
  border-bottom: 1px solid #edf0f7;
  background: #f6f8fc;
}

.rz__bar i {
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: #cdd5e6;
}

.rz__page {
  display: grid;
  gap: 0.6em;
  padding: 0.7em;
}

.rz__hero {
  display: grid;
  gap: 0.4em;
  padding: 0.9em;
  border-radius: 0.6em;
  background: linear-gradient(135deg, #2b7bf0, #0a4fd0);
}

.rz__hero b {
  height: 0.55em;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.85);
}

.rz__hero b:first-child { width: 60%; }
.rz__hero b:last-child { width: 38%; opacity: 0.6; }

.rz__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5em;
}

.rz__grid i {
  height: 3.2em;
  border-radius: 0.5em;
  background: #e6edfb;
}

.rz-chips {
  display: flex;
  gap: 0.5em;
  font-size: 0.85em;
  font-weight: 600;
}

.rz-chips span {
  padding: 0.4em 1em;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.1);
  color: rgb(255 255 255 / 0.6);
}

.rz-chips span:first-child {
  background: #fff;
  color: var(--ink);
}

/* 03 · connect: pills orbiting the logo */
.bcard--connect .bcard__art {
  --art-h: 17em;
}

.orbit {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden; /* the far ring runs off the edges of the picture on purpose */
}

.orbit__core {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3.6em;
  height: 3.6em;
  border-radius: 50%;
  background: #0b1533;
  box-shadow: 0 0 0 0.6em rgb(11 21 51 / 0.08);
}

.orbit__core img {
  width: 1.8em;
  height: auto;
  filter: brightness(0) invert(1);
}

.orbit__ring {
  --d: 10.4em;
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--d);
  height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border: 1px dashed rgb(10 79 208 / 0.32);
  border-radius: 50%;
}

.orbit__ring--in {
  z-index: 1;
}

.orbit__ring--out {
  --d: 15em;
}

.orbit__ring--far {
  --d: 27em;
  border-color: rgb(10 79 208 / 0.16);
}

/* a slot turns to its angle round the ring; the pill then turns back so its text stays upright */
.orbit__slot {
  position: absolute;
  inset: 0;
  transform: rotate(var(--a));
}

.orbit__pill {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%) rotate(calc(var(--a) * -1));
}

.orbit__pill > span {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 0.9em;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0.6em 1.4em -0.4em rgb(10 40 120 / 0.35);
  font-size: 0.85em;
  font-weight: 600;
  white-space: nowrap;
}

.dot {
  width: 0.65em;
  height: 0.65em;
  border-radius: 50%;
}

.dot--line { background: #06c755; }
.dot--fb { background: #1877f2; }

/* 04 · custom system: a tilted dashboard with growing bars, and an order dropping in */
.bcard--system .bcard__art {
  --art-h: 37em; /* the dashboard is about 32em tall, and the order toast hangs below it */
}

.dash {
  position: absolute;
  top: 3%;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: 3.2em 1fr;
  width: 100%;
  max-width: 30em;
  margin-inline: auto;
  border-radius: 1.1em;
  background: #fff;
  box-shadow: 0 2.4em 4.4em -1.6em rgb(0 0 0 / 0.7);
  color: var(--ink);
  transform: perspective(60em) rotateY(-9deg) rotateX(4deg) rotateZ(-2deg);
}

.dash__side {
  display: grid;
  align-content: start;
  gap: 0.8em;
  padding: 1em 0.7em;
  border-radius: 1.1em 0 0 1.1em;
  background: #0b1533;
}

.dash__side i {
  height: 1.6em;
  border-radius: 0.5em;
  background: rgb(255 255 255 / 0.12);
}

.dash__side .on {
  background: var(--blue);
}

.dash__main {
  padding: 1em 1.1em 1.1em;
}

.dash__title {
  margin: 0;
  font-size: 0.85em;
  font-weight: 600;
}

.dash__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6em;
  margin-top: 0.8em;
}

.dash__stats div {
  padding: 0.6em 0.7em;
  border-radius: 0.7em;
  background: #f2f5fb;
}

.dash__stats small {
  display: block;
  color: #6b7690;
  font-size: 0.7em;
}

.dash__stats b {
  font-size: 1.25em;
  font-weight: 600;
}

.dash__chart {
  display: flex;
  align-items: flex-end;
  gap: 0.45em;
  height: 8em;
  margin-top: 0.9em;
}

.dash__chart i {
  --g: clamp(0, (var(--t) - 6 - var(--k) * 3) / 14, 1);
  flex: 1;
  height: var(--h);
  border-radius: 0.35em 0.35em 0 0;
  background: linear-gradient(#5aa8ff, #2b7bf0);
  transform: scaleY(calc(0.12 + 0.88 * var(--g) * var(--out)));
  transform-origin: bottom;
}

.dash__rows {
  display: grid;
  gap: 0.4em;
  margin: 0.9em 0 0;
  padding: 0;
  list-style: none;
}

.dash__rows li {
  --hl: clamp(0, 1 - abs(var(--t) - var(--c)) / 9, 1);
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.5em 0.6em;
  border-radius: 0.6em;
  background: rgb(43 123 240 / calc(var(--hl) * 0.16));
}

.dash__rows li::before {
  content: "";
  flex: none;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  background: #dbe6fb;
}

.dash__rows b {
  flex: 1;
  height: 0.5em;
  border-radius: 999px;
  background: #e3e9f5;
}

.dash__rows em {
  width: 3.2em;
  height: 1.1em;
  border-radius: 999px;
  background: #d9f7e3;
}

.dash__toast {
  --tp: clamp(0, (var(--t) - 50) / 6, 1);
  position: absolute;
  right: 0.4em;
  bottom: -2.6em;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.8em 1.2em;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1.4em 2.6em -1em rgb(0 0 0 / 0.7);
  font-size: 0.95em;
  font-weight: 600;
  opacity: calc(var(--tp) * var(--out));
  transform: translateX(calc((1 - var(--tp)) * 2em));
}

.dash__toast i {
  width: 0.65em;
  height: 0.65em;
  border-radius: 50%;
  background: #22c55e;
}

.tag--system {
  bottom: 4%;
  left: 3%;
  rotate: -4deg;
}

/* with room to spare, the toast hangs off the dashboard's edge instead of sitting inside it */
@container (min-width: 420px) {
  .dash__toast {
    right: -1.4em;
  }
}

/* 05 · no hassle: a set-up progress card */
.bcard--hassle .bcard__art {
  --art-h: 16em;
}

.deploy {
  position: absolute;
  inset: 0;
  width: min(21em, 92%);
  height: fit-content;
  margin: auto;
  padding: 1.2em 1.3em;
  border-radius: 1.2em;
  background: #fff;
  box-shadow: 0 1.8em 3.4em -1.4em rgb(10 40 120 / 0.45);
  color: var(--ink);
  transform: rotate(-2deg);
}

.deploy__head {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: 0;
  font-size: 0.9em;
  font-weight: 600;
}

.deploy__head::before {
  content: "";
  flex: none;
  width: 0.9em;
  height: 0.9em;
  border: 2px solid #cfe0ff;
  border-top-color: var(--blue);
  border-radius: 50%;
}

.deploy__bar {
  height: 0.5em;
  margin-top: 0.8em;
  overflow: hidden;
  border-radius: 999px;
  background: #e6edfb;
  opacity: var(--out);
}

.deploy__bar i {
  display: block;
  width: calc(clamp(0, (var(--t) - 6) / 60, 1) * 100%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2b7bf0, #7fb2ff);
}

.deploy__steps {
  display: grid;
  gap: 0.5em;
  margin: 0.9em 0 0;
  padding: 0;
  list-style: none;
}

.deploy__steps li {
  --p: clamp(0, (var(--t) - var(--s)) / 6, 1);
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: 0.88em;
  opacity: calc(var(--p) * var(--out));
  transform: translateY(calc((1 - var(--p)) * 0.6em));
}

.deploy__steps li::before {
  content: "";
  flex: none;
  width: 1.25em;
  height: 1.25em;
  background: var(--check) center / contain no-repeat;
}

.deploy__ready {
  --p: clamp(0, (var(--t) - 74) / 5, 1);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin: 0.9em 0 0;
  padding: 0.35em 0.9em;
  border-radius: 999px;
  background: #d9f7e3;
  color: #157a3a;
  font-size: 0.85em;
  font-weight: 600;
  opacity: calc(var(--p) * var(--out));
  transform: scale(calc(0.85 + 0.15 * var(--p)));
  transform-origin: left center;
}

.deploy__ready i {
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: #22c55e;
}

.tag--hassle {
  right: 2%;
  bottom: 6%;
  rotate: 5deg;
}

/* 06 · after-care: a short chat */
.bcard--care .bcard__art {
  --art-h: 16em;
}

.chat {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: 0.7em;
  width: min(20em, 92%);
  margin: auto;
}

.chat__l,
.chat__r {
  --p: clamp(0, (var(--t) - var(--s)) / 5, 1);
  margin: 0;
  padding: 0.7em 1em;
  border-radius: 1.1em;
  font-size: 0.92em;
  line-height: 1.35;
  opacity: calc(var(--p) * var(--out));
  transform: translateY(calc((1 - var(--p)) * 0.8em)) scale(calc(0.94 + 0.06 * var(--p)));
}

.chat__l {
  justify-self: start;
  border-bottom-left-radius: 0.3em;
  background: #fff;
  color: var(--ink);
}

.chat__r {
  justify-self: end;
  border-bottom-right-radius: 0.3em;
  background: #0b1533;
  color: #fff;
}

.tag--care {
  top: 4%;
  right: 3%;
  rotate: 5deg;
}

/* Motion. Only with JS and no reduced-motion preference; otherwise everything above is already the finished picture. */
@media (prefers-reduced-motion: no-preference) {
  .js .receipt {
    animation: bento-run 7s linear infinite;
    animation-play-state: var(--play);
  }

  /* 04-06 sit at the start (--t: 0) until their card has popped into view, then play once, hold at the end, and
     never restart */
  .js .dash,
  .js .deploy,
  .js .chat {
    --t: 0;
  }

  .js .is-in .dash,
  .js .is-in .deploy,
  .js .is-in .chat {
    animation: bento-once var(--len) linear 0.7s forwards;
    animation-play-state: var(--play);
  }

  .js .dash { --len: 7.5s; }
  .js .deploy { --len: 6s; }
  .js .chat { --len: 7s; }

  .js .tag--price,
  .js .chip {
    animation: bob 3.2s ease-in-out infinite alternate;
    animation-play-state: var(--play);
  }

  .js .chip--host { animation-delay: -1s; }

  .js .is-in .tag--system,
  .js .is-in .tag--hassle,
  .js .is-in .tag--care {
    animation: tag-pop 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) 1s backwards;
  }

  .js .deploy__head::before {
    animation: bento-spin 0.9s linear infinite;
    animation-play-state: var(--play);
  }

  .js .deploy__ready i {
    animation: pulse 1.6s ease-in-out infinite;
    animation-play-state: var(--play);
  }

  /* 02: the page's width steps down and back up; its columns and the highlighted label change with it */
  .js .rz {
    animation: rz-width 6.5s ease-in-out infinite;
    animation-play-state: var(--play);
  }

  .js .rz__grid {
    animation: rz-cols 6.5s step-end infinite;
    animation-play-state: var(--play);
  }

  .js .rz-chips span {
    animation: 6.5s step-end infinite;
    animation-play-state: var(--play);
  }

  .js .rz-chips span:nth-child(1) { animation-name: chip-pc; }
  .js .rz-chips span:nth-child(2) { animation-name: chip-tablet; }
  .js .rz-chips span:nth-child(3) { animation-name: chip-phone; }

  /* 03: two rings turning in opposite directions, each pill counter-turning to stay upright */
  .js .orbit__ring--in {
    animation: bento-spin 15s linear infinite reverse;
    animation-play-state: var(--play);
  }

  .js .orbit__ring--out {
    animation: bento-spin 22s linear infinite;
    animation-play-state: var(--play);
  }

  .js .orbit__ring--in .orbit__pill > span {
    animation: bento-spin 15s linear infinite;
    animation-play-state: var(--play);
  }

  .js .orbit__ring--out .orbit__pill > span {
    animation: bento-spin 22s linear infinite reverse;
    animation-play-state: var(--play);
  }
}

@keyframes bento-run {
  from { --t: 0; }
  to { --t: 100; }
}

@keyframes bento-once {
  from { --t: 0; }
  to { --t: 100; }
}

@keyframes tag-pop {
  from {
    opacity: 0;
    transform: translateY(0.8em) scale(0.8);
  }
}

@keyframes bento-spin {
  to { transform: rotate(360deg); }
}

@keyframes bob {
  to { translate: 0 -0.5em; }
}

@keyframes pulse {
  50% { box-shadow: 0 0 0 0.35em rgb(34 197 94 / 0.25); }
}

@keyframes rz-width {
  0%, 20% { width: 100%; }
  30%, 50% { width: 56%; }
  60%, 80% { width: 30%; }
  90%, 100% { width: 100%; }
}

@keyframes rz-cols {
  0% { grid-template-columns: repeat(3, 1fr); }
  25% { grid-template-columns: repeat(2, 1fr); }
  55% { grid-template-columns: 1fr; }
  85% { grid-template-columns: repeat(3, 1fr); }
}

@keyframes chip-pc {
  0%, 85% { background: #fff; color: #0b1533; }
  25% { background: rgb(255 255 255 / 0.1); color: rgb(255 255 255 / 0.6); }
}

@keyframes chip-tablet {
  0%, 55% { background: rgb(255 255 255 / 0.1); color: rgb(255 255 255 / 0.6); }
  25% { background: #fff; color: #0b1533; }
}

@keyframes chip-phone {
  0%, 85% { background: rgb(255 255 255 / 0.1); color: rgb(255 255 255 / 0.6); }
  55% { background: #fff; color: #0b1533; }
}

/* ---------- Work ---------- */

.work {
  padding-block: clamp(40px, 5vw, 72px) 0;
}

.work__list {
  grid-auto-columns: clamp(250px, 22vw, 320px);
}

/* A small box: the screenshot in a mini browser window, then the name, the kind of work and a line or two. */
.work-card {
  display: flex;
  flex-direction: column;
  padding: 10px 10px 18px;
  border: 1px solid #e3e8f2;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 6px 18px rgb(var(--shade) / 0.07);
  transition: box-shadow 0.3s, transform 0.3s;
}

.work-card__frame {
  overflow: hidden;
  border: 1px solid #e3e8f2;
  border-radius: 10px;
  background: #f3f5fa;
}

/* title bar with three dots */
.work-card__frame::before {
  content: "";
  display: block;
  height: 16px;
  background:
    radial-gradient(circle, #ff6159 2.5px, transparent 3px) 8px 50% / 8px 8px no-repeat,
    radial-gradient(circle, #ffbd2e 2.5px, transparent 3px) 20px 50% / 8px 8px no-repeat,
    radial-gradient(circle, #28c941 2.5px, transparent 3px) 32px 50% / 8px 8px no-repeat;
  border-bottom: 1px solid #e3e8f2;
}

.work-card__frame img {
  width: 100%;
  height: auto;
  transition: transform 0.5s;
}

@media (hover: hover) {
  .work-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgb(var(--shade) / 0.12);
  }

  .work-card:hover .work-card__frame img {
    transform: scale(1.04);
  }
}

.work-card__title {
  margin: 14px 6px 0;
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
}

.work-card__type {
  margin: 2px 6px 0;
  color: var(--blue);
  font-size: 0.875rem;
  font-weight: 500;
}

.work-card__desc {
  margin: 8px 6px 0;
  color: #4a5570;
  font-size: 0.875rem;
  line-height: 1.55;
}

/* ---------- Process ----------
   Four cards in a row (two on a tablet, one on a phone). The first is blue because it is the only part that is the
   customer's: tell us what you do, and the rest is ours. On a wide screen a small arrow sits in the gap between cards. */

.process {
  --gap: clamp(20px, 2.2vw, 32px);
  --pad: clamp(22px, 2vw, 28px);
  padding-block: clamp(48px, 6vw, 88px) clamp(16px, 2.5vw, 36px);
}

.process__list {
  display: grid;
  gap: 14px var(--gap);
  max-width: calc(480px + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
  list-style: none;
}

@media (min-width: 640px) {
  .process__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: calc(1180px + 2 * var(--gutter));
  }
}

@media (min-width: 1024px) {
  .process__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--pad);
  border: 1px solid #e3e8f2;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 6px 18px rgb(var(--shade) / 0.06);
}

.step--you {
  border-color: transparent;
  background: linear-gradient(155deg, #2b7bf0, #0a3aa8);
  box-shadow: 0 18px 40px rgb(10 98 240 / 0.3);
  color: #fff;
}

.step__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.step__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #e6efff;
  color: var(--blue);
}

.step--you .step__icon {
  background: rgb(255 255 255 / 0.18);
  color: #fff;
}

.step__icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.step__no {
  color: var(--navy);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  opacity: 0.45;
}

.step--you .step__no {
  color: #fff;
  opacity: 0.7;
}

.step__title {
  margin: 20px 0 0;
  color: var(--navy);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
}

.step--you .step__title {
  color: #fff;
}

.step__desc {
  margin: 8px 0 22px;
  color: #4a5570;
  font-size: 0.9375rem;
  line-height: 1.7;
  text-wrap: pretty;
}

.step--you .step__desc {
  color: rgb(255 255 255 / 0.86);
}

/* who does this step, at the bottom of every card so the four line up */
.step__who {
  align-self: flex-start;
  margin: auto 0 0;
  padding: 5px 14px;
  border-radius: 999px;
  background: #e6efff;
  color: var(--navy);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
}

.step--you .step__who {
  background: #fff;
}

@media (min-width: 1024px) {
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: calc(var(--pad) + 24px - 13px); /* level with the middle of the icon */
    right: calc(var(--gap) / -2 - 13px);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a62f0' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") 50% / 12px no-repeat;
    box-shadow: 0 0 0 1px #d5dff3, 0 4px 10px rgb(var(--shade) / 0.1);
  }
}

/* ---------- Pricing ---------- */

.pricing {
  padding-top: clamp(40px, 5vw, 72px);
}

.pricing__list,
.pricing__extras {
  display: grid;
  gap: clamp(20px, 2.2vw, 32px);
  max-width: calc(1180px + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.pricing__list {
  list-style: none;
}

.pricing__extras {
  margin-top: clamp(20px, 2.2vw, 32px);
}

@media (min-width: 900px) {
  .pricing__list {
    grid-template-columns: repeat(3, 1fr);
  }

  .pricing__extras {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* One column on phones and portrait tablets, kept to a readable width. */
@media (max-width: 899px) {
  .pricing__list,
  .pricing__extras {
    max-width: calc(480px + 2 * var(--gutter));
  }
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.4vw, 36px);
  border: 1px solid #e3e8f2;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 6px 18px rgb(var(--shade) / 0.06);
}

.price-card--featured {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
  box-shadow: 0 18px 40px rgb(0 26 102 / 0.28);
}

.price-card__badge {
  position: absolute;
  top: clamp(20px, 2vw, 28px);
  right: clamp(20px, 2vw, 28px);
  margin: 0;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
}

.price-card__name {
  margin: 0;
  color: var(--navy);
  font-size: 1.125rem;
  font-weight: 600;
}

.price-card--featured .price-card__name {
  color: #fff;
}

.price-card__price {
  margin: 14px 0 0;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.1;
}

.price-card__amount {
  font-size: clamp(2.75rem, 4vw, 3.5rem);
  letter-spacing: -0.02em;
}

/* on the same line as the amount, so all three prices line up */
.price-card__from {
  margin-right: 8px;
  color: #4a5570;
  font-size: 1rem;
  font-weight: 500;
}

.price-card__note {
  margin: 8px 0 0;
  color: #4a5570;
  font-size: 0.9375rem;
}

.price-card--featured .price-card__note {
  color: rgb(255 255 255 / 0.78);
}

.price-card__features {
  display: grid;
  gap: 10px;
  margin: 22px 0 28px;
  padding: 22px 0 0;
  border-top: 1px solid #e3e8f2;
  list-style: none;
  font-size: 0.9375rem;
}

.price-card--featured .price-card__features {
  border-top-color: rgb(255 255 255 / 0.18);
}

.price-card__features li {
  padding-left: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23e6efff'/%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.6' fill='none' stroke='%230a62f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0.18em / 20px 20px no-repeat;
}

.price-card--featured .price-card__features li {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23ffffff' fill-opacity='.16'/%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.6' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* the button always sits at the bottom, so all three line up */
.price-card .btn {
  width: 100%;
  margin-top: auto;
}

.pricing__extra {
  padding: 20px 24px;
  border: 1px solid #e3e8f2;
  border-radius: 18px;
  background: rgb(255 255 255 / 0.7);
}

.pricing__extra h3 {
  margin: 0;
  color: var(--navy);
  font-size: 1.0625rem;
  font-weight: 600;
}

.pricing__extra strong {
  color: var(--blue);
}

.pricing__extra p {
  margin: 6px 0 0;
  color: #4a5570;
  font-size: 0.9375rem;
}

/* ---------- FAQ ----------
   Each question is a button that opens its answer (js/main.js flips .is-open and aria-expanded). The answer
   slides open by animating its grid row from 0fr to 1fr, which needs no fixed height. Without JS every answer is
   simply shown, so the rules that fold them away all start with .js. */

.faq {
  padding-block: clamp(40px, 5vw, 72px) clamp(56px, 7vw, 104px);
}

.faq__list {
  display: grid;
  gap: 12px;
  max-width: calc(820px + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
  list-style: none;
}

.faq__item {
  border: 1px solid #e3e8f2;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 6px 18px rgb(var(--shade) / 0.05);
  transition: border-color 0.25s, box-shadow 0.25s;
}

.faq__item.is-open {
  border-color: #b9d0fb;
  box-shadow: 0 10px 28px rgb(10 98 240 / 0.12);
}

.faq__heading {
  margin: 0;
  font: inherit;
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px clamp(18px, 2.4vw, 28px);
  border: 0;
  border-radius: 18px;
  background: none;
  color: var(--navy);
  font: inherit;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
}

/* a plus that turns into a minus */
.faq__icon {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e6efff;
  transition: background-color 0.25s;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 1px;
  background: var(--blue);
  transition: transform 0.3s, background-color 0.25s;
}

.faq__icon::after {
  transform: rotate(90deg);
}

.is-open > .faq__heading .faq__icon {
  background: var(--blue);
}

.is-open > .faq__heading .faq__icon::before,
.is-open > .faq__heading .faq__icon::after {
  background: #fff;
}

.is-open > .faq__heading .faq__icon::after {
  transform: rotate(0);
}

.faq__a {
  display: grid;
  grid-template-rows: 1fr;
}

.faq__a-inner {
  min-height: 0;
  overflow: hidden;
}

.faq__a-body {
  padding: 0 clamp(18px, 2.4vw, 28px) 22px;
  color: #4a5570;
  font-size: 1rem;
  line-height: 1.75;
}

.faq__a-body p {
  margin: 0;
}

.faq__a-body p + ul {
  margin-top: 10px;
}

.faq__a-body ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq__a-body li {
  padding-left: 30px;
  background: var(--check) 0 0.3em / 20px 20px no-repeat;
}

.faq__a-body a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* closed answers are folded to nothing and hidden, so their links leave the tab order too */
.js .faq__a {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.35s ease, visibility 0s linear 0.35s;
}

.js .is-open > .faq__a {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.35s ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .faq__item,
  .faq__icon,
  .faq__icon::before,
  .faq__icon::after,
  .js .faq__a {
    transition: none;
  }
}

/* ---------- Contact + footer ----------
   One dark navy block closes the page, so the bottom stands apart from the white sections above. */

.site-footer {
  --accent: #7fb2ff; /* light blue from the logo, readable on the dark navy */
  position: relative;
  isolation: isolate;
  color: rgb(255 255 255 / 0.75);
}

/* The dark panel, as a layer behind the content so it can pop up together with the first thing in it.
   The photo hangs from the top at no less than 1200px wide and fades into flat navy by 720px down,
   so it looks the same on a tall phone footer and a wide desktop one. */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 70% at 100% 0%, rgb(10 98 240 / 0.28), transparent 70%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgb(10 98 240 / 0.14), transparent 70%),
    linear-gradient(rgb(6 18 56 / 0.62), #061238 720px),
    url("../images/contact-bg.webp") 50% 0 / max(100%, 1200px) auto no-repeat,
    #061238;
}

.site-footer__inner {
  max-width: calc(1180px + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(64px, 8vw, 112px) var(--gutter) 28px;
}

/* Wide letter-spacing breaks up Thai words, so the Thai labels stay tight; a short line sets the eyebrow off. */
.site-footer__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--accent);
  font-size: 0.9375rem;
  font-weight: 600;
}

.site-footer__eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

.site-footer__title {
  margin: 12px 0 0;
  color: #fff;
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  font-weight: 600;
  line-height: 1.25;
}

.site-footer__title span {
  display: block;
  color: var(--accent);
}

.site-footer__grid {
  display: grid;
  gap: 40px 32px;
  margin-top: clamp(40px, 5vw, 64px);
}

@media (min-width: 640px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
  }
}

.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 0.9375rem;
}

.footer-col p {
  margin: 0;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 1.375rem;
  font-weight: 600;
}

/* the logo mark in white, so it shows on the dark background */
.footer-brand img {
  width: auto;
  height: 32px;
  filter: brightness(0) invert(1);
}

.footer-brand__tag {
  margin-top: 6px !important;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.footer-col--brand p:last-child {
  max-width: 34ch;
  margin-top: 14px;
}

.footer-col__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  color: var(--accent);
  font-size: 0.9375rem;
  font-weight: 600;
}

.footer-col__head svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.footer-col address {
  display: grid;
  gap: 6px;
  font-style: normal;
}

.footer-col address a,
.footer-col__list a {
  color: rgb(255 255 255 / 0.85);
  overflow-wrap: anywhere;
  transition: color 0.2s;
}

.footer-col address a:hover,
.footer-col__list a:hover {
  color: #fff;
}

.footer-col .btn {
  margin-top: 20px;
}

.btn--outline {
  min-height: 46px;
  padding: 0 24px;
  border: 1px solid rgb(255 255 255 / 0.55);
  background: transparent;
  color: #fff;
  font-size: 0.9375rem;
}

.btn--outline:hover {
  border-color: #fff;
  background: #fff;
  color: var(--navy);
}

.footer-link {
  margin-top: 16px;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  color: var(--accent);
  font-weight: 600;
  transition: color 0.2s;
}

.footer-link:hover {
  color: #fff;
}

.footer-col__list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: 24px;
  border-top: 1px solid rgb(255 255 255 / 0.14);
  color: rgb(255 255 255 / 0.55);
  font-size: 0.875rem;
}

.site-footer__bottom p {
  margin: 0;
}

.site-footer__bottom a {
  transition: color 0.2s;
}

.site-footer__bottom a:hover {
  color: #fff;
}

.site-footer :focus-visible {
  outline-color: var(--accent);
}

/* ---------- Floating contact button ---------- */

.quick-contact {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
}

/* hidden while the contact footer is on screen: it already shows the same links */
.quick-contact[data-hidden="true"] {
  visibility: hidden;
  opacity: 0;
  transform: translateY(16px);
}

.quick-contact__list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* With JS the list starts closed and opens from the button. */
.js .quick-contact__list li {
  visibility: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}

.js .quick-contact[data-open="true"] .quick-contact__list li {
  visibility: visible;
  opacity: 1;
  transform: none;
}

/* the item nearest the button appears first */
.js .quick-contact[data-open="true"] li:nth-last-child(2) { transition-delay: 0.04s; }
.js .quick-contact[data-open="true"] li:nth-last-child(3) { transition-delay: 0.08s; }

.quick-contact__item {
  --brand: var(--navy);
  display: flex;
  align-items: center;
  gap: 10px;
}

.quick-contact__item--facebook { --brand: #1877f2; }
.quick-contact__item--phone { --brand: #16a34a; }
.quick-contact__item--email { --brand: var(--blue); }

.quick-contact__label {
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 14px rgb(var(--shade) / 0.16);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
}

.quick-contact__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-right: 5px; /* centres the 46px icons over the 56px button */
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 6px 16px rgb(var(--shade) / 0.22);
  color: #fff;
  transition: transform 0.2s;
}

.quick-contact__icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.quick-contact__icon svg[fill="none"] {
  fill: none;
}

.quick-contact__item:hover .quick-contact__icon {
  transform: scale(1.08);
}

.quick-contact__toggle {
  position: relative;
  display: none; /* only useful with JS */
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--navy);
  box-shadow: 0 10px 26px rgb(0 26 102 / 0.35);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
}

.js .quick-contact__toggle {
  display: grid;
  place-items: center;
}

.quick-contact__toggle:hover {
  background: var(--blue);
}

.quick-contact__toggle:active {
  transform: scale(0.94);
}

.quick-contact__toggle svg {
  position: absolute;
  width: 26px;
  height: 26px;
  fill: currentColor;
  transition: opacity 0.2s, transform 0.25s;
}

.quick-contact__toggle .icon-close {
  opacity: 0;
  transform: rotate(-90deg);
}

.quick-contact[data-open="true"] .icon-chat {
  opacity: 0;
  transform: rotate(90deg);
}

.quick-contact[data-open="true"] .icon-close {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .quick-contact,
  .quick-contact *,
  .js .quick-contact__list li {
    transition: none !important;
  }
}

@media (max-width: 640px) {
  .site-header {
    gap: 10px 16px;
    padding-block: 12px;
  }

  .site-header__cta {
    min-height: 38px;
    padding: 0 16px;
    font-size: 0.875rem;
  }

  .site-nav a {
    font-size: 1rem;
  }

  .brand {
    font-size: 1.1875rem;
  }

  .brand img {
    height: 28px;
  }
}