/* Hallmark · genre: playful · page: service + package detail (shared) · theme: custom (site tokens) · tone: playful-bold · anchor hue: 265
 * Loaded by the Service Detail and Package Detail templates, before service.css / package.css.
 * idea: every service and package has its own arrangement of the three dots; pointing at
 * another one in the tabs rearranges the big dots in the banner into its shape (offer.js).
 * pieces: banner (crumb · tabs · title · facts) · section shell · cards · work · packages ·
 * FAQ · end card · not found.
 */

.icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The three dots, one arrangement each --------------------------------------------
 * Each dot sits at (--xN, --yN) inside a rounded tile; the tile and dot colours change too.
 * Changing the modifier class (offer.js) glides the dots to the new places. */

.odots {
  --x1: 25%; --y1: 50%;
  --x2: 50%; --y2: 50%;
  --x3: 75%; --y3: 50%;
  --dots-bg: var(--color-paper-2);
  --dots-ink: var(--color-ink);
  --dot: 22%;
  position: relative;
  display: block;
  flex: none;
  width: 4.5rem;
  aspect-ratio: 1;
  border-radius: 0.9rem;
  background-color: var(--dots-bg);
  transition: background-color var(--dur-long) var(--ease-out);
}

.odots i {
  position: absolute;
  width: var(--dot);
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--dots-ink);
  translate: -50% -50%;
  transition:
    left var(--dur-reveal) var(--ease-out),
    top var(--dur-reveal) var(--ease-out),
    background-color var(--dur-long) var(--ease-out);
}

.odots i:nth-child(1) { left: var(--x1); top: var(--y1); }
.odots i:nth-child(2) { left: var(--x2); top: var(--y2); transition-delay: 50ms; }
.odots i:nth-child(3) { left: var(--x3); top: var(--y3); transition-delay: 100ms; }

.odots--design {      /* a composition */
  --x1: 50%; --y1: 28%;
  --x2: 28%; --y2: 70%;
  --x3: 72%; --y3: 70%;
  --dots-bg: var(--color-lime);
  --dots-ink: var(--color-ink);
}

.odots--development { /* a stack */
  --x1: 50%; --y1: 24%;
  --x2: 50%; --y2: 50%;
  --x3: 50%; --y3: 76%;
  --dots-bg: var(--color-ink);
  --dots-ink: var(--color-lime);
}

.odots--growth {      /* rising */
  --x1: 26%; --y1: 74%;
  --x2: 50%; --y2: 52%;
  --x3: 74%; --y3: 28%;
  --dots-bg: var(--color-blue-deep);
  --dots-ink: var(--color-blue-soft);
}

.odots--support {     /* one keeps watch over two */
  --x1: 50%; --y1: 30%;
  --x2: 30%; --y2: 68%;
  --x3: 70%; --y3: 68%;
  --dots-bg: var(--color-blue);
  --dots-ink: var(--color-paper);
}

.odots--support i:nth-child(1) {
  --dot: 30%;
}

.odots--ecommerce {   /* a basket */
  --x1: 28%; --y1: 34%;
  --x2: 72%; --y2: 34%;
  --x3: 50%; --y3: 72%;
  --dots-bg: color-mix(in oklch, var(--color-blue) 16%, var(--color-paper));
  --dots-ink: var(--color-blue);
}

.odots--tailored {    /* a corner, made to measure */
  --x1: 28%; --y1: 28%;
  --x2: 28%; --y2: 72%;
  --x3: 72%; --y3: 72%;
  --dots-bg: var(--color-paper);
  --dots-ink: var(--color-blue);
  box-shadow: inset 0 0 0 1px var(--color-rule);
}

.odots--end {
  --dots-bg: transparent;
  --dots-ink: var(--color-rule);
}

@media (prefers-reduced-motion: reduce) {
  .odots i {
    transition: none;
  }
}

/* Banner -------------------------------------------------------------------------- */

.o-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, var(--page-max));
  justify-content: center;
  gap: var(--space-xl);
  padding: calc(var(--header-h) + var(--promo-h, 2.5rem) + var(--ruler-offset, 0px) + var(--space-xl)) var(--gutter) var(--space-3xl);
}

.o-hero__grid {
  mask-image: linear-gradient(to bottom, var(--color-ink) 55%, transparent);
}

.o-hero > :not(canvas) {
  position: relative;
  z-index: 1;
}

.o-hero__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
  padding-block: var(--space-xs);
  border-block: var(--rule-hair) solid var(--color-ink);
}

.o-crumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-xs);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.o-crumb__list li + li::before {
  content: "";
  display: inline-block;
  width: 0.3rem;
  height: 0.3rem;
  margin-inline-end: var(--space-xs);
  border-radius: 50%;
  background-color: var(--color-blue);
  vertical-align: middle;
}

.o-crumb__list a {
  display: inline-block;
  padding-block: 0.6rem;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--dur-short) var(--ease-out);
}

.o-crumb__list [aria-current] {
  color: var(--color-muted);
}

@media (hover: hover) {
  .o-crumb__list a:hover {
    text-decoration-color: currentColor;
  }
}

/* Tabs to the sibling pages: numbers on phones, numbers + names from tablet up. */
.o-switch__list {
  display: flex;
  gap: var(--space-3xs);
  padding: var(--space-3xs);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  background-color: var(--color-paper);
}

.o-switch__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 2.5rem;
  padding: 0 var(--space-sm);
  border-radius: var(--radius-pill);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out);
}

.o-switch__no {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.o-switch__label {
  display: none;
}

.o-switch__link[aria-current="page"] {
  background-color: var(--color-ink);
  color: var(--color-paper);
}

.o-switch__link[aria-current="page"] .o-switch__no {
  color: var(--color-lime);
}

@media (min-width: 64rem) {
  .o-switch__label {
    display: inline;
  }

  /* Only the current one is named until you point at another. */
  .o-switch__link:not([aria-current="page"]) .o-switch__label {
    display: inline-block;
    max-width: 0;
    overflow: clip;
    margin-inline-start: calc(-1 * var(--space-xs));
    transition:
      max-width var(--dur-long) var(--ease-out),
      margin var(--dur-long) var(--ease-out);
  }

  .o-switch__link:not([aria-current="page"]):is(:hover, :focus-visible) .o-switch__label {
    max-width: 14rem;
    margin-inline-start: 0;
  }
}

@media (hover: hover) {
  .o-switch__link:not([aria-current="page"]):hover {
    background-color: var(--color-paper-2);
    color: var(--color-ink);
  }
}

.o-hero__body {
  display: grid;
  gap: var(--space-xl);
  align-items: end;
}

@media (min-width: 56rem) {
  .o-hero__body {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.o-hero__title {
  min-width: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 11vw, 11.5rem);
  font-weight: 400;
  line-height: var(--leading-hero);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.o-hero__line {
  display: block;
}

/* The line above the headline: body type, with a dot in front. */
.o-hero__kicker {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-block-end: var(--space-md);
  color: var(--color-blue-deep);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}

.o-hero__kicker::before {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background-color: var(--color-blue);
}

.o-hero__dots {
  width: clamp(8rem, 15vw, 13rem);
  border-radius: clamp(1.25rem, 2.4vw, 2.25rem);
  translate: var(--px, 0px) var(--py, 0px);
  transition:
    background-color var(--dur-long) var(--ease-out),
    translate var(--dur-reveal) var(--ease-out);
}

@media (max-width: 55.99rem) {
  .o-hero__dots {
    display: none;
  }
}

.o-hero__foot {
  display: grid;
  gap: var(--space-xl);
  align-items: end;
}

@media (min-width: 56rem) {
  .o-hero__foot {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.o-hero__intro {
  display: grid;
  justify-items: start;
  gap: var(--space-lg);
}

.o-hero__lede {
  max-width: 40ch;
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 1.45;
}

.o-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* Three facts, as a strip of label-over-value cells. */
.o-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block-start: var(--rule-hair) solid var(--color-ink);
}

.o-facts__item {
  display: grid;
  align-content: start;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-md) 0 0;
}

.o-facts__item + .o-facts__item {
  padding-inline-start: var(--space-md);
  border-inline-start: var(--rule-hair) solid var(--color-rule);
}

.o-facts dt {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.o-facts dd {
  margin: 0;
  font-weight: 750;
  line-height: 1.3;
}

/* Packages: big numbers first, the label under them. */
.o-facts--big .o-facts__item {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
}

.o-facts--big dd {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.o-facts--big dt {
  max-width: 14ch;
  letter-spacing: 0.06em;
  line-height: 1.35;
}

@media (min-width: 56rem) {
  .o-facts {
    min-width: 30rem;
  }
}

/* Section shell --------------------------------------------------------------------- */

.o-sec {
  padding: var(--space-4xl) var(--gutter);
}

.o-sec__inner {
  display: grid;
  gap: var(--space-2xl);
  max-width: var(--page-max);
  margin-inline: auto;
}

.o-sec__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-lg);
}

/* Written text (an ACF editor field): the "In depth" section, and the text under the Titik OS
 * desktop. Like a journal note, without the drop cap. */
.o-prose {
  min-width: 0;
  max-width: 46rem;
  font-size: 1.125rem;
  line-height: 1.7;
}

.o-prose > * + * {
  margin-block-start: 1.1em;
}

.o-prose h2,
.o-prose h3 {
  margin-block-start: 1.8em;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: var(--leading-tight);
  text-transform: uppercase;
}

.o-prose h3 {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 750;
  line-height: 1.35;
  text-transform: none;
}

.o-prose > :first-child {
  margin-block-start: 0;
}

.o-prose h2 + *,
.o-prose h3 + * {
  margin-block-start: 0.5em;
}

.o-prose a {
  color: var(--color-blue-deep);
  font-weight: 650;
}

.o-prose strong {
  font-weight: 700;
}

.o-prose ul,
.o-prose ol {
  display: grid;
  gap: 0.5em;
  padding-inline-start: 0;
  list-style: none;
  counter-reset: step;
}

.o-prose li {
  position: relative;
  padding-inline-start: 1.6em;
}

.o-prose ul li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.68em;
  inset-inline-start: 0.2em;
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background-color: var(--color-blue);
}

.o-prose ol li {
  counter-increment: step;
}

.o-prose ol li::before {
  content: counter(step) ".";
  position: absolute;
  inset-inline-start: 0;
  color: var(--color-blue);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* "In depth" on a service or package: the heading beside the text on wide screens. */
.o-depth__inner {
  align-items: start;
}

@media (min-width: 64rem) {
  .o-depth__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  }

  .o-depth .section-head {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--ruler-offset, 0px) + var(--space-xl));
  }
}

/* Reveal: offer.js adds .reveal-ready, then .is-in once the list is on screen, then
 * .is-settled when it has finished (so the items' own hover transitions take over again).
 * Without JS (or with reduced motion) everything simply shows. Children stagger by --i. */
.reveal-ready:not(.is-in) > * {
  opacity: 0;
  translate: 0 1.5rem;
}

.reveal-ready.is-in:not(.is-settled) > * {
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    translate var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* What you end up with: cards ----------------------------------------------------- */

.o-cards {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 40rem) {
  .o-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .o-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.o-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-xs);
  padding: var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-lg);
  background-color: var(--color-paper);
  transition:
    border-color var(--dur-short) var(--ease-out),
    translate var(--dur-long) var(--ease-out),
    box-shadow var(--dur-long) var(--ease-out),
    opacity var(--dur-reveal) var(--ease-out);
}

.o-card__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-block-end: var(--space-sm);
  border-radius: 50%;
  background-color: var(--color-paper-2);
  color: var(--color-blue);
  transition:
    background-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out),
    rotate var(--dur-reveal) var(--ease-out);
}

.o-card__no {
  position: absolute;
  inset-block-start: var(--space-lg);
  inset-inline-end: var(--space-lg);
  color: var(--color-rule);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1;
  transition: color var(--dur-short) var(--ease-out);
}

.o-card__name {
  font-size: var(--text-md);
  font-weight: 750;
  line-height: 1.3;
}

.o-card__text {
  color: var(--color-muted);
}

@media (hover: hover) {
  .o-card:hover {
    border-color: var(--color-ink);
    box-shadow: 0 1.25rem 2.5rem -1.75rem var(--color-shadow);
    translate: 0 -0.25rem;
  }

  .o-card:hover .o-card__icon {
    background-color: var(--color-blue);
    color: var(--color-paper);
    rotate: -8deg;
  }

  .o-card:hover .o-card__no {
    color: var(--color-blue);
  }
}

/* Work: two pictures that lean toward the pointer (offer.js sets --rx / --ry) ----------- */

.o-works {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 48rem) {
  .o-works {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.o-workcard {
  position: relative;
  display: grid;
  gap: var(--space-md);
  perspective: 60rem;
}

.o-workcard__media {
  overflow: clip;
  border-radius: var(--radius-lg);
  background-color: var(--color-paper-2);
  transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
  transition: transform var(--dur-long) var(--ease-out), box-shadow var(--dur-long) var(--ease-out);
}

.o-workcard__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: scale var(--dur-reveal) var(--ease-out);
}

.o-workcard__body {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.o-workcard__badge {
  flex: none;
  width: 3rem;
  height: 3rem;
  fill: var(--color-blue);
  transition: rotate var(--dur-reveal) var(--ease-out);
}

.o-workcard__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: var(--leading-tight);
  text-transform: uppercase;
}

.o-workcard__title a {
  text-decoration: none;
}

.o-workcard__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.o-workcard__title a:focus-visible {
  outline: none;
}

.o-workcard__title a:focus-visible::after {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
  border-radius: var(--radius-lg);
}

.o-workcard__tags {
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

@media (hover: hover) {
  .o-workcard:hover .o-workcard__media {
    box-shadow: 0 2rem 3rem -2rem var(--color-shadow);
  }

  .o-workcard:hover .o-workcard__media img {
    scale: 1.05;
  }

  .o-workcard:hover .o-workcard__badge {
    rotate: 1turn;
  }
}

/* Package cards (service page: "Part of these packages"; package page: the others) ---- */

.o-packs {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 56rem) {
  .o-packs {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }
}

.o-pack {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  gap: var(--space-xs) var(--space-md);
  padding: var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-lg);
  background-color: var(--color-paper);
  transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}

.o-pack__dots {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 3.5rem;
  border-radius: 0.75rem;
}

.o-pack__badge {
  grid-column: 1;
  min-height: 1.375rem;
}

.o-pack__name {
  grid-column: 1;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: var(--leading-tight);
  text-transform: uppercase;
}

.o-pack__name a {
  text-decoration: none;
}

.o-pack__name a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.o-pack__name a:focus-visible {
  outline: none;
}

.o-pack__name a:focus-visible::after {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.o-pack__desc {
  grid-column: 1 / -1;
  color: var(--color-muted);
}

.o-pack__go {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-block-start: var(--space-sm);
  color: var(--color-blue-deep);
  font-weight: 750;
}

.o-pack__go .icon {
  transition: translate var(--dur-long) var(--ease-out);
}

.o-pack--dark {
  --color-focus: var(--color-blue-soft);
  border-color: var(--color-rule-dark);
  background-color: var(--color-ink-2);
  color: var(--color-paper);
}

.o-pack--dark .o-pack__desc {
  color: var(--color-muted-dark);
}

.o-pack--dark .o-pack__go {
  color: var(--color-lime);
}

@media (hover: hover) {
  .o-pack:hover {
    border-color: var(--color-ink);
  }

  .o-pack--dark:hover {
    border-color: var(--color-blue-soft);
    background-color: var(--color-ink-3);
  }

  .o-pack:hover .o-pack__go .icon {
    translate: 0.35rem 0;
  }

  .o-pack:hover .odots {
    --x1: 25%; --y1: 50%;
    --x2: 50%; --y2: 50%;
    --x3: 75%; --y3: 50%;
  }
}

/* A small switch (package page: "Only the differences") -------------------------------- */

.o-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 2.75rem;
  font-weight: 650;
  cursor: pointer;
}

.o-toggle__input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.o-toggle__track {
  position: relative;
  flex: none;
  width: 2.75rem;
  height: 1.5rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-rule);
  transition: background-color var(--dur-short) var(--ease-out);
}

.o-toggle__track::after {
  content: "";
  position: absolute;
  inset-block-start: 0.1875rem;
  inset-inline-start: 0.1875rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background-color: var(--color-paper);
  box-shadow: 0 1px 3px var(--color-shadow);
  transition: translate var(--dur-long) var(--ease-out);
}

.o-toggle__input:checked + .o-toggle__track {
  background-color: var(--color-blue);
}

.o-toggle__input:checked + .o-toggle__track::after {
  translate: 1.25rem 0;
}

.o-toggle__input:focus-visible + .o-toggle__track {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

/* FAQ (same as the contact page's) -------------------------------------------------- */

.faq {
  background-color: var(--color-paper);
}

@media (min-width: 64rem) {
  .faq__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    align-items: start;
  }

  .faq__inner > .section-head {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--ruler-offset, 0px) + var(--space-2xl));
  }
}

.faq__list {
  border-block-start: var(--rule-hair) solid var(--color-rule);
}

.faq__item {
  border-block-end: var(--rule-hair) solid var(--color-rule);
}

.faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-lg);
  padding-block: var(--space-lg);
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

.faq__icon {
  position: relative;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: 50%;
  transition:
    background-color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out);
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 0.85rem;
  height: 2px;
  border-radius: 1px;
  background-color: currentColor;
  translate: -50% -50%;
  transition: rotate var(--dur-long) var(--ease-out);
}

.faq__icon::after {
  rotate: 90deg;
}

.faq__item[open] .faq__icon {
  border-color: var(--color-blue);
  background-color: var(--color-blue);
  color: var(--color-paper);
}

.faq__item[open] .faq__icon::after {
  rotate: 0deg;
}

@media (hover: hover) {
  .faq__q:hover .faq__icon {
    border-color: var(--color-ink);
  }

  .faq__item[open] .faq__q:hover .faq__icon {
    border-color: var(--color-blue);
  }
}

.faq__a {
  display: grid;
  justify-items: start;
  gap: var(--space-sm);
  max-width: 62ch;
  padding-block-end: var(--space-lg);
  color: var(--color-muted);
}

@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) and selector(::details-content) {
    .faq__item {
      interpolate-size: allow-keywords;
    }

    .faq__item::details-content {
      block-size: 0;
      overflow: clip;
      transition:
        block-size var(--dur-long) var(--ease-out),
        content-visibility var(--dur-long) allow-discrete;
    }

    .faq__item[open]::details-content {
      block-size: auto;
    }
  }
}

/* End of the page: the next one ---------------------------------------------------- */

.o-end {
  padding: var(--space-3xl) var(--gutter) var(--space-4xl);
  background-color: var(--color-paper-2);
}

.o-end__inner {
  display: grid;
  gap: var(--space-xl);
  max-width: var(--page-max);
  margin-inline: auto;
}

.o-end__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: var(--leading-tight);
  text-transform: uppercase;
}

.o-next {
  --color-focus: var(--color-blue-soft);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: start;
  gap: var(--space-md);
  min-height: 18rem;
  padding: var(--space-xl);
  padding-inline-end: clamp(var(--space-xl), 18vw, 18rem);
  border-radius: var(--radius-lg);
  background-color: var(--color-ink);
  color: var(--color-paper);
  text-decoration: none;
}

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

/* A blue disc grows from the corner while you point at the card. */
.o-next::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-end: -6rem;
  inset-inline-end: -6rem;
  width: 12rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--color-blue);
  scale: 0.5;
  transition: scale var(--dur-flow) var(--ease-out);
}

.o-next__kicker {
  color: var(--color-lime);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.o-next__kicker span {
  display: inline-block;
  transition: translate var(--dur-long) var(--ease-out);
}

.o-next__title {
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  text-wrap: balance;
}

.o-next__text {
  max-width: 40ch;
  color: var(--color-muted-dark);
}

.o-next__count {
  display: flex;
  gap: 0.4rem;
  margin-block-start: auto;
}

.o-next__count i {
  width: 0.6rem;
  height: 0.6rem;
  border: 2px solid var(--color-blue-soft);
  border-radius: 50%;
}

.o-next__count i.is-on {
  background-color: var(--color-blue-soft);
}

.o-next__dots {
  position: absolute;
  inset-block-start: var(--space-xl);
  inset-inline-end: var(--space-xl);
  width: clamp(4.5rem, 9vw, 7rem);
}

@media (hover: hover) {
  .o-next:hover::before {
    scale: 8;
  }

  .o-next:hover .o-next__kicker span {
    translate: 0.35rem 0;
  }

  .o-next:hover .o-next__text {
    color: var(--color-blue-tint);
  }

  .o-next:hover .odots {
    --x1: 25%; --y1: 50%;
    --x2: 50%; --y2: 50%;
    --x3: 75%; --y3: 50%;
  }
}

/* Not found ------------------------------------------------------------------------- */

.o-missing {
  display: grid;
  justify-items: start;
  gap: var(--space-lg);
  max-width: var(--page-max);
  margin-inline: auto;
  padding: calc(var(--header-h) + var(--promo-h, 2.5rem) + var(--ruler-offset, 0px) + var(--space-3xl)) var(--gutter) var(--space-4xl);
}

.o-missing .odots {
  width: 7rem;
}

.o-missing__list {
  display: grid;
  gap: var(--space-xs);
}