/* Design Surrey — hero artwork
   ==================================================================
   The four compositions Claude Design delivered (2200 × 1238 artboards),
   rebuilt as live HTML/CSS rather than exported as images.

   HOW THE SCALING WORKS
   The hero is a container (`container-type: inline-size`), so `1cqw` is
   exactly 1% of the hero's width. Every measurement below is the design's
   pixel value divided by 22 — i.e. `1290px` on a 2200px artboard becomes
   `58.64cqw`. That means the composition scales precisely as drawn at any
   width, with no JavaScript and no breakpoint guesswork.

   Vertical positions are also in cqw, which keeps the artwork's own
   proportions locked. The board is centred inside the hero and clipped, so a
   hero that is shorter than the 1238/2200 artboard simply crops top and
   bottom rather than distorting.

   THE TYPE-SAFE RULE
   Design marked the left 58% as type-safe. Every piece of artwork here sits
   right of 53.5cqw, so the headline never fights it. Below 900px there is no
   room for that split, so the board is scaled up, pushed right and dropped
   behind a heavier scrim — Design's mobile crop. */

.hero {
  container-type: inline-size;
  position: relative;
  overflow: hidden;
}

.hero__art {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* the artboard itself: 2200 × 1238, centred and clipped */
.hero__board {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100cqw;
  height: 56.27cqw;
  transform: translateY(-50%);
}

.hero__board > * { position: absolute; }

/* the field every composition sits on */
.art-field { inset: 0; }
.art-grid  { inset: 0; }

/* --------------------------------------------------------------------
   01 · AUTOMATION
   Phone thread, a column of falling timestamps, and a brass bracket
   tracing the path from enquiry to confirmed booking.
   -------------------------------------------------------------------- */

.art--automation .art-field {
  background: radial-gradient(120% 90% at 78% 42%, #23241F 0%, #161815 42%, #0E0F0E 78%);
}

.art--automation .art-grid {
  background: repeating-linear-gradient(90deg, rgba(251,250,247,0.028) 0 1px, transparent 1px 5cqw);
}

.art-phone {
  left: 58.64cqw; top: 6.73cqw;
  width: 21.36cqw; height: 42.73cqw;
  background: #12140F;
  border: 0.09cqw solid #33342D;
  border-radius: 2cqw;
  padding: 1.18cqw 0.91cqw;
  box-shadow: 0 1.8cqw 4.1cqw rgba(0,0,0,0.5);
}

.art-phone__screen {
  height: 100%;
  background: #0E0F0E;
  border-radius: 1.36cqw;
  padding: 1.55cqw 1.18cqw;
  display: flex;
  flex-direction: column;
}

.art-phone__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1cqw;
  border-bottom: 0.05cqw solid #23241F;
  font: 500 0.68cqw/1 var(--font-mono);
  letter-spacing: 0.14em;
  color: #C99B4E;
}

.art-phone__top span:last-child { color: #6E7269; letter-spacing: 0; font-weight: 400; }

.art-thread { margin-top: 1.18cqw; display: flex; flex-direction: column; gap: 0.82cqw; }

.art-bub {
  max-width: 13.64cqw;
  padding: 0.82cqw 0.91cqw;
  font: 500 0.86cqw/1.4 var(--font-sans);
}

.art-bub--in {
  align-self: flex-start;
  background: #1B1D18;
  border: 0.05cqw solid #2C2E27;
  border-radius: 0.82cqw 0.82cqw 0.82cqw 0.18cqw;
  color: #FBFAF7;
}

.art-bub--out {
  align-self: flex-end;
  max-width: 15.45cqw;
  background: #B8873A;
  border-radius: 0.82cqw 0.82cqw 0.18cqw 0.82cqw;
  color: #0E0F0E;
}

.art-bub__meta {
  font: 400 0.55cqw/1 var(--font-mono);
  letter-spacing: 0.12em;
  color: #6E7269;
}

.art-bub--out .art-bub__meta { color: rgba(14,15,14,0.62); text-align: right; margin-top: 0.55cqw; }
.art-bub--in .art-bub__meta:first-child { margin-bottom: 0.45cqw; }
.art-bub--in .art-bub__meta:last-child  { margin-top: 0.55cqw; }

.art-bub__link {
  margin-top: 0.64cqw;
  background: #0E0F0E;
  border-radius: 0.36cqw;
  padding: 0.55cqw 0.64cqw;
  font: 500 0.68cqw/1 var(--font-mono);
  color: #C99B4E;
}

.art-phone__diary {
  margin-top: auto;
  border: 0.05cqw solid #2C2E27;
  border-left: 0.18cqw solid #B8873A;
  padding: 0.91cqw 1cqw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.art-phone__diary em {
  display: block;
  font: 400 0.55cqw/1 var(--font-mono);
  letter-spacing: 0.12em;
  color: #6E7269;
  font-style: normal;
}

.art-phone__diary b {
  display: block;
  margin-top: 0.36cqw;
  font: 600 0.91cqw/1 var(--font-sans);
  color: #FBFAF7;
}

.art-phone__diary i {
  font: 500 0.59cqw/1 var(--font-mono);
  letter-spacing: 0.1em;
  color: #C99B4E;
  font-style: normal;
}

/* the seconds falling away beside the phone */
.art-ticks {
  left: 83.18cqw; top: 13.64cqw;
  display: grid;
  gap: 4cqw;
  font: 400 1cqw/1 var(--font-mono);
  letter-spacing: 0.12em;
}

.art-ticks span:nth-child(1) { color: rgba(201,155,78,0.55); }
.art-ticks span:nth-child(2) { color: rgba(201,155,78,0.40); }
.art-ticks span:nth-child(3) { color: rgba(201,155,78,0.28); }

/* the brass path: enquiry in at the top, booking out at the bottom */
.art-bracket__top    { left: 53.55cqw; top: 9.73cqw;  width: 5.09cqw; height: 0.09cqw;
                       background: linear-gradient(90deg, rgba(184,135,58,0) 0%, #B8873A 100%); }
.art-bracket__spine  { left: 53.55cqw; top: 9.73cqw;  width: 0.09cqw; height: 28.91cqw;
                       background: linear-gradient(180deg, #B8873A 0%, rgba(184,135,58,0.25) 100%); }
.art-bracket__bottom { left: 53.55cqw; top: 38.55cqw; width: 5.09cqw; height: 0.09cqw;
                       background: linear-gradient(90deg, rgba(184,135,58,0.25) 0%, #B8873A 100%); }
.art-bracket__in     { left: 53.09cqw; top: 9.27cqw;  width: 1cqw; height: 1cqw;
                       border: 0.09cqw solid #B8873A; border-radius: 50%; background: #0E0F0E; }
.art-bracket__out    { left: 53.18cqw; top: 38.18cqw; width: 0.82cqw; height: 0.82cqw;
                       background: #B8873A; }

/* --------------------------------------------------------------------
   02 · WEBSITES
   A build assembling itself — three ghost pages behind the finished one,
   with the PageSpeed dial cutting the corner.
   -------------------------------------------------------------------- */

.art--websites .art-field {
  background: radial-gradient(110% 90% at 74% 38%, #1E1F1A 0%, #15170F 44%, #0E0F0E 80%);
}

.art--websites .art-grid {
  left: 52.27cqw; right: 0; top: 0; bottom: 0;
  background:
    repeating-linear-gradient(90deg, rgba(251,250,247,0.05) 0 1px, transparent 1px 4cqw),
    repeating-linear-gradient(180deg, rgba(251,250,247,0.05) 0 1px, transparent 1px 4cqw);
}

.art-ghost { width: 23.64cqw; height: 30cqw; background: #12140F; border: 0.05cqw solid #2A2C24; }
.art-ghost--3 { left: 73.64cqw; top: 13.45cqw; opacity: 0.3; }
.art-ghost--2 { left: 69.09cqw; top: 11.36cqw; background: #14160F; border-color: #33352C; opacity: 0.55; }
.art-ghost--1 { left: 64.55cqw; top: 9.27cqw;  background: #16180F; border-color: #3A3C32; opacity: 0.8; }

.art-ghost--1 .art-ghost__in { padding: 1cqw; display: grid; gap: 0.64cqw; }
.art-ghost--1 .art-ghost__in i { display: block; }
.art-ghost--1 .art-ghost__in i:nth-child(1) { height: 0.45cqw; width: 40%; background: #3A3C32; }
.art-ghost--1 .art-ghost__in i:nth-child(2) { height: 8.18cqw; background: #1D1F18; }
.art-ghost--1 .art-ghost__in i:nth-child(3) { height: 0.36cqw; width: 70%; background: #2E3028; }
.art-ghost--1 .art-ghost__in i:nth-child(4) { height: 0.36cqw; width: 55%; background: #2E3028; }

.art-page {
  left: 59.09cqw; top: 7.18cqw;
  width: 25.45cqw; height: 32.73cqw;
  background: #191B14;
  border: 0.05cqw solid #4A4C40;
  box-shadow: 0 1.8cqw 4.1cqw rgba(0,0,0,0.5);
}

.art-page__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.91cqw 1.09cqw;
  border-bottom: 0.05cqw solid #2E3028;
  font: 500 0.59cqw/1 var(--font-mono);
  letter-spacing: 0.12em;
  color: #C99B4E;
}

.art-page__bar div { display: flex; gap: 0.45cqw; font-weight: 400; font-size: 0.45cqw; letter-spacing: 0; color: #6E7269; }

.art-page__body { padding: 1.27cqw 1.09cqw; display: grid; gap: 0.73cqw; }
.art-page__body i { display: block; }
.art-page__body i:nth-child(1) { height: 1cqw; width: 78%; background: #4A4C40; }
.art-page__body i:nth-child(2) { height: 1cqw; width: 56%; background: #4A4C40; }
.art-page__body i:nth-child(3) { height: 0.45cqw; width: 66%; background: #2E3028; margin-top: 0.36cqw; }
.art-page__body i:nth-child(4) { height: 0.45cqw; width: 48%; background: #2E3028; }
.art-page__body i:nth-child(5) { height: 2cqw; width: 7.64cqw; background: #B8873A; margin-top: 0.45cqw; }

.art-page__cards { margin-top: 0.64cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 0.64cqw; }
.art-page__cards i { height: 6cqw; background: #1D1F18; border: 0.05cqw solid #2E3028; }

.art-page__foot {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0.91cqw 1.09cqw;
  border-top: 0.05cqw solid #2E3028;
  display: flex;
  justify-content: space-between;
  font: 400 0.5cqw/1 var(--font-mono);
  letter-spacing: 0.1em;
  color: #6E7269;
}

.art-page__foot b { font-weight: 500; color: #C99B4E; }

/* the dial: a conic gradient reading 98, exactly as Design drew it */
.art-dial {
  left: 81.18cqw; top: 41.18cqw;
  width: 11.82cqw; height: 11.82cqw;
  border-radius: 50%;
  background: conic-gradient(#B8873A 0% 98%, #2A2C24 98% 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.art-dial__in {
  width: 9.82cqw; height: 9.82cqw;
  border-radius: 50%;
  background: #0E0F0E;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.36cqw;
}

.art-dial__in b { font: 700 4cqw/0.9 var(--font-sans); letter-spacing: -0.05em; color: #FBFAF7; }
.art-dial__in span { font: 500 0.59cqw/1 var(--font-mono); letter-spacing: 0.14em; color: #C99B4E; }

/* --------------------------------------------------------------------
   03 · SOCIAL
   A month of posts dealt like cards, against a dated schedule rail.
   -------------------------------------------------------------------- */

.art--social .art-field {
  background: radial-gradient(115% 90% at 76% 44%, #1F201B 0%, #16180F 46%, #0E0F0E 82%);
}

.art-rail {
  left: 92.55cqw; top: 6.82cqw; bottom: 6.82cqw;
  width: 0.09cqw;
  background: linear-gradient(180deg, rgba(184,135,58,0) 0%, #B8873A 12%, #B8873A 88%, rgba(184,135,58,0) 100%);
}

.art-dates {
  left: 86.36cqw; top: 8.64cqw;
  display: grid;
  gap: 4.36cqw;
  text-align: right;
  width: 5.45cqw;
}

.art-dates b { display: block; font: 500 1cqw/1 var(--font-mono); color: #C99B4E; }
.art-dates span { display: block; margin-top: 0.27cqw; font: 400 0.68cqw/1 var(--font-mono); color: #6E7269; }
.art-dates div:nth-child(3) b { color: rgba(201,155,78,0.6); }
.art-dates div:nth-child(3) span { color: #4E524B; }
.art-dates div:nth-child(4) b { color: rgba(201,155,78,0.35); }
.art-dates div:nth-child(4) span { color: #3E423B; }

.art-node { left: 92.23cqw; width: 0.73cqw; height: 0.73cqw; background: #B8873A; }
.art-node--1 { top: 9.18cqw; }
.art-node--2 { top: 13.55cqw; }
.art-node--3 { top: 17.95cqw; width: 0.64cqw; height: 0.64cqw; background: none; border: 0.09cqw solid rgba(184,135,58,0.6); }
.art-node--4 { top: 22.32cqw; width: 0.64cqw; height: 0.64cqw; background: none; border: 0.09cqw solid rgba(184,135,58,0.35); }

.art-card { background: #14160F; border: 0.05cqw solid #2A2C24; }

.art-card--3 { left: 61.36cqw; top: 29.09cqw; width: 23.64cqw; height: 23.64cqw; transform: rotate(-2deg); opacity: 0.45; }

.art-card--2 {
  left: 63.64cqw; top: 21.36cqw; width: 23.64cqw; height: 23.64cqw;
  background: #191B14; border-color: #33352C;
  transform: rotate(1.4deg); opacity: 0.7;
  padding: 1.64cqw;
}

.art-card--2 em { font: 500 0.68cqw/1 var(--font-mono); letter-spacing: 0.14em; color: #6E7269; font-style: normal; }
.art-card--2 i { display: block; margin-top: 1.18cqw; height: 10.91cqw; background: linear-gradient(160deg, #2A2C24 0%, #1D1F18 100%); }
.art-card--2 u { display: block; margin-top: 1cqw; height: 0.45cqw; width: 72%; background: #2E3028; }

.art-card--1 {
  left: 60.45cqw; top: 13.64cqw; width: 24.55cqw; height: 24.55cqw;
  background: #1B1D16; border-color: #4A4C40;
  transform: rotate(-1.2deg);
  box-shadow: 0 1.8cqw 4.1cqw rgba(0,0,0,0.5);
  padding: 1.82cqw;
  display: flex;
  flex-direction: column;
}

.art-card__top { display: flex; justify-content: space-between; align-items: center; }
.art-card__top em { font: 500 0.73cqw/1 var(--font-mono); letter-spacing: 0.14em; color: #C99B4E; font-style: normal; }
.art-card__mark {
  width: 2cqw; height: 2cqw; background: #FBFAF7;
  display: flex; align-items: flex-end; padding: 0.27cqw;
  font: 700 0.91cqw/0.8 var(--font-sans); letter-spacing: -0.06em; color: #0E0F0E;
}
.art-card--1 > i {
  display: block; margin-top: 1.27cqw; flex: 1;
  background: linear-gradient(150deg, #35372D 0%, #23241F 52%, #1A1C15 100%);
  border-left: 0.27cqw solid #B8873A;
}
.art-card__cap { margin-top: 1.18cqw; font: 600 1.36cqw/1.2 var(--font-sans); letter-spacing: -0.025em; color: #FBFAF7; }

/* --------------------------------------------------------------------
   04 · BRAND
   Material rather than screen: a brass plate, a type specimen, a folded
   card. Lit from the upper right with the left falling dark.
   -------------------------------------------------------------------- */

.art--brand .art-field {
  background: radial-gradient(90% 80% at 88% 8%, #33352C 0%, #1E201A 40%, #101210 72%, #0B0C0B 100%);
}

.art-plate {
  left: 68.18cqw; top: 8.64cqw;
  width: 23.64cqw; height: 15.45cqw;
  background: linear-gradient(148deg, #E0B978 0%, #B8873A 34%, #8A6410 78%, #6B4E0D 100%);
  box-shadow: 0 2.09cqw 4.09cqw rgba(0,0,0,0.55);
  display: flex;
  align-items: flex-end;
  padding: 1.82cqw;
}

.art-plate__mark {
  width: 4.91cqw; height: 4.91cqw;
  background: linear-gradient(148deg, #A97C2E 0%, #C99B4E 100%);
  border-top: 0.05cqw solid rgba(255,255,255,0.35);
  border-left: 0.05cqw solid rgba(255,255,255,0.22);
  display: flex;
  align-items: flex-end;
  padding: 0.64cqw;
  font: 700 2.18cqw/0.8 var(--font-sans);
  letter-spacing: -0.06em;
  color: rgba(14,15,14,0.62);
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}

/* the shadow falling across the plate from the left */
.art-plate__shade {
  left: 68.18cqw; top: 8.64cqw;
  width: 23.64cqw; height: 15.45cqw;
  background: linear-gradient(120deg, rgba(14,15,14,0.55) 0%, rgba(14,15,14,0) 46%);
}

.art-spec {
  left: 58.64cqw; top: 25.73cqw;
  width: 21.36cqw; height: 13.64cqw;
  background: #F3F1EC;
  box-shadow: 0 1.82cqw 3.64cqw rgba(0,0,0,0.5);
  padding: 1.82cqw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.art-spec em { font: 500 0.68cqw/1 var(--font-mono); letter-spacing: 0.18em; color: #8A6410; font-style: normal; }
.art-spec b { display: block; font: 400 4.18cqw/0.86 var(--font-serif); color: #0E0F0E; }
.art-spec i { display: block; margin-top: 0.82cqw; height: 0.14cqw; width: 5.45cqw; background: #B8873A; }

.art-spec__shade {
  left: 58.64cqw; top: 25.73cqw;
  width: 21.36cqw; height: 13.64cqw;
  background: linear-gradient(112deg, rgba(14,15,14,0.6) 0%, rgba(14,15,14,0.06) 52%);
}

.art-fold      { left: 77.82cqw; top: 31.36cqw; width: 15.45cqw; height: 10.91cqw;
                 background: linear-gradient(160deg, #E8E4DA 0%, #CFC9BC 100%);
                 box-shadow: 0 1.36cqw 2.73cqw rgba(0,0,0,0.45); transform: rotate(-3deg); }
.art-fold__lid { left: 77.82cqw; top: 31.36cqw; width: 15.45cqw; height: 5.45cqw;
                 background: linear-gradient(180deg, #FBFAF7 0%, #E4E0D6 100%);
                 transform: rotate(-3deg); transform-origin: top center;
                 box-shadow: 0 0.55cqw 1.09cqw rgba(0,0,0,0.3); }
.art-fold__type { left: 79.09cqw; top: 33cqw; transform: rotate(-3deg);
                  font: 500 0.73cqw/1.7 var(--font-mono); letter-spacing: 0.12em; color: #6B6B63; }

.art-glint { left: 65.64cqw; top: 44cqw; width: 29.09cqw; height: 0.23cqw;
             background: linear-gradient(90deg, rgba(184,135,58,0) 0%, #B8873A 40%, #E0B978 100%); }

/* --------------------------------------------------------------------
   THE SCRIM
   Design's spec: the left 58% must stay quiet enough to hold a headline.
   The gradient is horizontal on wide screens and vertical on narrow ones,
   where the artwork sits behind the type rather than beside it.
   -------------------------------------------------------------------- */

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(14,15,14,0.97) 0%, rgba(14,15,14,0.92) 34%, rgba(14,15,14,0.55) 58%, rgba(14,15,14,0.12) 78%, rgba(14,15,14,0.08) 100%);
}

.hero__inner { position: relative; z-index: 2; }

/* --------------------------------------------------------------------
   NARROW
   Design's mobile crop: the board scales up and shifts right so a
   fragment of the artwork reads, and the scrim turns vertical so the
   headline sits over the whole frame.
   -------------------------------------------------------------------- */

@media (max-width: 899px) {
  /* Widening the board does nothing to the artwork: every child is sized in
     cqw, which resolves against the hero — the container — not against its
     parent. Scaling it is the only thing that actually makes the composition
     bigger, so the board keeps its true size and is transformed instead.
     The origin sits right of centre so the interesting material lands in
     frame and the quiet left edge is what gets cropped. */
  .hero__board {
    width: 100cqw;
    height: 56.27cqw;
    left: 0;
    transform: translateY(-50%) scale(2.1);
    transform-origin: 72% 50%;
  }

  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(14,15,14,0.42) 0%, rgba(14,15,14,0.74) 32%, rgba(14,15,14,0.93) 60%, rgba(14,15,14,0.97) 100%);
  }
}

/* Container query units are the whole mechanism here. Without them the
   artboard would collapse, so hide it and keep the field gradient — the
   hero still reads, it just loses the composition. */
@supports not (container-type: inline-size) {
  .hero__board > *:not(.art-field) { display: none; }
  .hero__board { position: absolute; inset: 0; width: auto; height: auto; transform: none; }
}

/* ====================================================================
   SECTION COMPOSITIONS
   Built in Design's language — the same field gradients, the same brass,
   the same 58% type-safe rule — for the interior page heroes. Design's
   components note lists the phone frame, schedule rail, dial and post
   card as reusable; these extend that set rather than starting a second
   visual system alongside it.
   ==================================================================== */

/* --------------------------------------------------------------------
   05 · INVOICE PROCESSING
   A bill being read: the fields light up in brass, then land in the
   ledger marked for a human to approve. The approval step is the point.
   -------------------------------------------------------------------- */

.art--invoice .art-field {
  background: radial-gradient(112% 88% at 76% 36%, #21221D 0%, #16180F 44%, #0E0F0E 80%);
}

.art-doc {
  left: 58.64cqw; top: 6.36cqw;
  width: 24.55cqw; min-height: 29.55cqw;
  background: #F3F1EC;
  box-shadow: 0 1.82cqw 4.09cqw rgba(0,0,0,0.5);
  padding: 1.64cqw 1.82cqw;
}

.art-doc__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 0.91cqw;
  border-bottom: 0.09cqw solid #DAD6CC;
  font: 500 0.64cqw/1 var(--font-mono);
  letter-spacing: 0.16em;
  color: #8A6410;
}

.art-doc__head span:last-child { color: #8A8B84; letter-spacing: 0.08em; }

.art-doc__rows { margin-top: 1.09cqw; display: grid; gap: 0.45cqw; }

.art-doc__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5cqw 0.55cqw;
  font: 500 0.68cqw/1.2 var(--font-mono);
  letter-spacing: 0.05em;
  color: #6E7269;
}

/* the fields the reader has already picked out */
.art-doc__row.is-lit {
  background: rgba(184,135,58,0.18);
  box-shadow: inset 0 0 0 0.09cqw #B8873A;
  color: #0E0F0E;
}

.art-doc__row b { font-weight: 600; }

.art-doc__total {
  margin-top: 1.09cqw;
  padding-top: 0.91cqw;
  border-top: 0.09cqw solid #DAD6CC;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.art-doc__total em { font: 500 0.64cqw/1 var(--font-mono); letter-spacing: 0.16em; color: #8A8B84; font-style: normal; }
.art-doc__total b { font: 700 2cqw/1 var(--font-sans); letter-spacing: -0.04em; color: #0E0F0E; }

/* the path from the document down into the ledger */
.art-extract       { left: 70cqw; top: 36.82cqw; width: 0.09cqw; height: 3.18cqw;
                     background: linear-gradient(180deg, #B8873A 0%, rgba(184,135,58,0.3) 100%); }
.art-extract__node { left: 69.55cqw; top: 39.55cqw; width: 1cqw; height: 1cqw;
                     border: 0.09cqw solid #B8873A; border-radius: 50%; background: #0E0F0E; }

.art-ledger {
  left: 55.45cqw; top: 41.82cqw;
  width: 36.36cqw;
  background: #191B14;
  border: 0.05cqw solid #4A4C40;
  border-left: 0.27cqw solid #B8873A;
  box-shadow: 0 1.36cqw 3.18cqw rgba(0,0,0,0.45);
  padding: 1.09cqw 1.36cqw;
}

.art-ledger__top {
  display: flex;
  justify-content: space-between;
  font: 400 0.55cqw/1 var(--font-mono);
  letter-spacing: 0.14em;
  color: #6E7269;
  padding-bottom: 0.73cqw;
  border-bottom: 0.05cqw solid #2E3028;
}

.art-ledger__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.82cqw;
  font: 500 0.86cqw/1 var(--font-sans);
  color: #FBFAF7;
}

.art-ledger__row i { font: 500 0.59cqw/1 var(--font-mono); letter-spacing: 0.12em; color: #C99B4E; font-style: normal; }

/* --------------------------------------------------------------------
   06 · SCHEDULING
   A week that fills itself, and one released slot going straight back out
   to the next person waiting.
   -------------------------------------------------------------------- */

.art--diary .art-field {
  background: radial-gradient(118% 90% at 74% 40%, #20211C 0%, #16180F 46%, #0E0F0E 82%);
}

.art-week {
  left: 58.64cqw; top: 8.18cqw;
  width: 33.64cqw;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.45cqw;
}

.art-week__col { display: grid; gap: 0.45cqw; align-content: start; }

.art-week__day {
  font: 500 0.59cqw/1 var(--font-mono);
  letter-spacing: 0.12em;
  color: #6E7269;
  padding-bottom: 0.45cqw;
  border-bottom: 0.05cqw solid #2E3028;
  margin-bottom: 0.27cqw;
}

.art-slot { height: 4.09cqw; background: #191B14; border: 0.05cqw solid #2A2C24; }
.art-slot--booked   { background: rgba(184,135,58,0.22); border-color: #B8873A; }
.art-slot--released { background: none; border: 0.09cqw dashed rgba(184,135,58,0.7); }
.art-slot--new      { background: #B8873A; border-color: #B8873A; }

.art-refill {
  left: 55.91cqw; top: 41.36cqw;
  width: 34.09cqw;
  background: #1B1D16;
  border: 0.05cqw solid #4A4C40;
  border-left: 0.27cqw solid #B8873A;
  box-shadow: 0 1.36cqw 3.18cqw rgba(0,0,0,0.45);
  padding: 1.09cqw 1.36cqw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.36cqw;
}

.art-refill b  { display: block; font: 600 0.95cqw/1.3 var(--font-sans); color: #FBFAF7; }
.art-refill em { display: block; margin-top: 0.36cqw; font: 400 0.59cqw/1 var(--font-mono);
                 letter-spacing: 0.12em; color: #6E7269; font-style: normal; }
.art-refill i  { flex: none; font: 500 1.36cqw/1 var(--font-mono); color: #C99B4E; font-style: normal; }

/* --------------------------------------------------------------------
   07 · THE MONTHLY NUMBER
   What the report actually looks like: one figure, twelve months behind
   it, and no vocabulary that would need explaining.
   -------------------------------------------------------------------- */

.art--report .art-field {
  background: radial-gradient(105% 88% at 78% 34%, #23241F 0%, #16180F 46%, #0E0F0E 82%);
}

.art--report .art-grid {
  left: 54.55cqw; right: 0; top: 0; bottom: 0;
  background: repeating-linear-gradient(180deg, rgba(251,250,247,0.04) 0 1px, transparent 1px 4cqw);
}

.art-report {
  left: 58.64cqw; top: 9.09cqw;
  width: 32.73cqw;
  background: #191B14;
  border: 0.05cqw solid #4A4C40;
  border-bottom: 0.36cqw solid #B8873A;
  box-shadow: 0 1.82cqw 4.09cqw rgba(0,0,0,0.5);
  padding: 1.82cqw;
}

.art-report__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font: 500 0.64cqw/1 var(--font-mono);
  letter-spacing: 0.16em;
  color: #C99B4E;
}

.art-report__top span:last-child { color: #6E7269; }

.art-report__fig { margin-top: 1.36cqw; display: flex; align-items: baseline; gap: 0.91cqw; }
.art-report__fig b { font: 700 4.55cqw/0.9 var(--font-sans); letter-spacing: -0.05em; color: #FBFAF7; }
.art-report__fig i {
  font: 500 0.68cqw/1 var(--font-mono); letter-spacing: 0.1em; color: #0E0F0E; font-style: normal;
  background: #B8873A; padding: 0.36cqw 0.55cqw;
}

.art-report__cap { margin-top: 0.73cqw; font: 400 0.82cqw/1.4 var(--font-sans); color: #8A8D84; }

.art-report__bars {
  margin-top: 1.82cqw;
  padding-top: 1.36cqw;
  border-top: 0.05cqw solid #2E3028;
  display: flex;
  align-items: flex-end;
  gap: 0.45cqw;
  height: 8.18cqw;
}

.art-report__bars i { flex: 1; background: #2E3028; }
.art-report__bars i:nth-child(n+9) { background: #B8873A; }
.art-report__bars i:nth-child(1)  { height: 22%; }
.art-report__bars i:nth-child(2)  { height: 30%; }
.art-report__bars i:nth-child(3)  { height: 26%; }
.art-report__bars i:nth-child(4)  { height: 38%; }
.art-report__bars i:nth-child(5)  { height: 34%; }
.art-report__bars i:nth-child(6)  { height: 46%; }
.art-report__bars i:nth-child(7)  { height: 52%; }
.art-report__bars i:nth-child(8)  { height: 48%; }
.art-report__bars i:nth-child(9)  { height: 66%; }
.art-report__bars i:nth-child(10) { height: 74%; }
.art-report__bars i:nth-child(11) { height: 88%; }
.art-report__bars i:nth-child(12) { height: 100%; }

.art-report__foot {
  margin-top: 1.09cqw;
  display: flex;
  justify-content: space-between;
  font: 400 0.55cqw/1 var(--font-mono);
  letter-spacing: 0.12em;
  color: #6E7269;
}

/* --------------------------------------------------------------------
   08 · PRICING
   The rate card. Pricing was the only page on the site with no hero art
   at all, which is why it read as an unfinished template next to the
   other six.

   The composition is the page's argument rather than a decoration of it:
   seven services, seven figures, and a footer that says there is no POA
   row. Every number here also appears in the page body — if one changes
   there it has to change here, which is the cost of art that states
   facts instead of gesturing at them.

   Authored in its finished state, like every other composition here, so
   the card is complete and readable before a single frame runs. The
   stagger below is the flourish on top, and motion.js arms it only once
   the hero is genuinely on screen.
   -------------------------------------------------------------------- */

.art--pricing .art-field {
  background: radial-gradient(108% 90% at 76% 38%, #23241F 0%, #16180F 46%, #0E0F0E 82%);
}

.art--pricing .art-grid {
  left: 54.55cqw; right: 0; top: 0; bottom: 0;
  background: repeating-linear-gradient(180deg, rgba(251,250,247,0.04) 0 1px, transparent 1px 4cqw);
}

.art-rate {
  left: 58.64cqw; top: 11.8cqw;
  width: 32.73cqw;
  background: #191B14;
  border: 0.05cqw solid #4A4C40;
  border-bottom: 0.36cqw solid #B8873A;
  box-shadow: 0 1.82cqw 4.09cqw rgba(0,0,0,0.5);
  padding: 1.64cqw 1.82cqw 1.45cqw;
}

.art-rate__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font: 500 0.64cqw/1 var(--font-mono);
  letter-spacing: 0.16em;
  color: #C99B4E;
  padding-bottom: 1.09cqw;
  border-bottom: 0.05cqw solid #3A3C33;
}

.art-rate__top span:last-child { color: #6E7269; }

.art-rate__rows { list-style: none; margin: 0; padding: 0; }

.art-rate__rows li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.09cqw;
  padding: 0.86cqw 0;
  border-bottom: 0.05cqw solid rgba(251,250,247,0.07);
}

.art-rate__rows li b {
  font: 400 0.95cqw/1 var(--font-sans);
  letter-spacing: -0.01em;
  color: #CFCEC5;
}

.art-rate__rows li i {
  font: 500 1.18cqw/1 var(--font-mono);
  font-style: normal;
  letter-spacing: -0.02em;
  color: #FBFAF7;
  font-variant-numeric: tabular-nums;
}

/* one row carried in brass, so the card has a rhythm rather than reading
   as a wall of equal weight. Automation because it is the lead line. */
.art-rate__rows li.is-pick { border-bottom-color: rgba(184,135,58,0.5); }
.art-rate__rows li.is-pick b { color: #C99B4E; }
.art-rate__rows li.is-pick i { color: #C99B4E; }

.art-rate__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 1.18cqw;
  font: 500 0.64cqw/1 var(--font-mono);
  letter-spacing: 0.16em;
  color: #6E7269;
}

.art-rate__foot b { color: #FBFAF7; font-weight: 500; }

/* --------------------------------------------------------------------
   Interior heroes are shorter than the homepage's, so the artboard is
   allowed to sit a little higher and the copy block is capped tighter.
   -------------------------------------------------------------------- */

.hero--page .hero__inner { padding-block: var(--s24); }
.hero--page .hero__inner > * { max-width: 54%; }

@media (max-width: 899px) {
  .hero--page .hero__inner > * { max-width: 100%; }
}

/* --------------------------------------------------------------------
   10 · WORK
   A wall of work with one piece pulled out of it and a number on the
   front. Work and Studio were both flying the brand kit; this one is
   about volume and track record, which the kit cannot say.

   Everything except the wall itself is sized as a PERCENTAGE OF THE WALL
   rather than in cqw. That is deliberate: cqw resolves against the hero's
   width, so eight independently positioned pieces drift apart at any
   width other than the one they were drawn at - which is exactly what
   went wrong with the insight panel. Here only one element is measured
   against the hero. Everything else is measured against that.
   -------------------------------------------------------------------- */

.art--work .art-field {
  background: radial-gradient(96% 86% at 78% 14%, #2E3127 0%, #1C1E18 38%, #101210 74%, #0B0C0B 100%);
}

.art--work .art-grid {
  left: 52cqw; right: 0; top: 0; bottom: 0;
  background: repeating-linear-gradient(90deg, rgba(251,250,247,0.045) 0 1px, transparent 1px 3.2cqw);
}

/* the one element measured against the hero. 13cqw is half of 26cqw, so
   the wall stays centred on the board at every width the cap allows. */
.art-wall {
  left: 55cqw;
  top: calc(50% - min(13cqw, 192px));
  width: min(38cqw, 560px);
  height: min(26cqw, 384px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 3.6%;
}

.art-tile {
  background: #16180F;
  border: 1px solid #2E3028;
  padding: 8% 8% 9%;
  display: flex; flex-direction: column; gap: 7%;
  overflow: hidden;
}
.art-tile i  { display: block; flex: none; height: 5%; width: 44%; background: #4A4C40; }
.art-tile b  { display: block; flex: 1; background: #1F211A; border: 1px solid #292B23; }
.art-tile em { display: block; flex: none; height: 4%; width: 66%; background: #33352C; }

/* the piece that is live */
.art-tile--live { background: #1B1D13; border-color: rgba(184,135,58,0.55); }
.art-tile--live i { background: #C99B4E; width: 58%; }
.art-tile--live b {
  background: linear-gradient(150deg, #3E3116 0%, #1F1A0E 72%);
  border-color: rgba(184,135,58,0.28);
}
.art-tile--live em { background: #6B5626; }

/* the piece pulled to the front */
.art-case {
  position: absolute;
  right: -6%; bottom: -8%;
  width: 56%;
  background: #24271D;
  border: 1px solid #5C5F52;
  border-bottom: 3px solid #B8873A;
  box-shadow: 0 min(1.6cqw, 24px) min(3.4cqw, 50px) rgba(0,0,0,0.58);
  padding: 7% 8% 8%;
}
.art-case__top {
  display: flex; justify-content: space-between; align-items: center;
  font: 500 min(0.62cqw, 9px)/1 var(--font-mono);
  letter-spacing: 0.14em; color: #C99B4E;
  padding-bottom: 7%;
  border-bottom: 1px solid #33352C;
}
.art-case__top span:last-child { color: #6E7269; }
.art-case__fig {
  display: block; margin-top: 8%;
  font: 700 min(4.4cqw, 65px)/0.86 var(--font-sans);
  letter-spacing: -0.05em; color: #FBFAF7;
}
.art-case__cap {
  display: block; margin-top: 4%;
  font: 500 min(0.62cqw, 9px)/1 var(--font-mono);
  letter-spacing: 0.16em; color: #9A9E92;
}
.art-case__rule {
  display: block; margin-top: 8%;
  height: min(0.27cqw, 4px); width: 46%;
  background: #B8873A; transform-origin: left;
}

/* --------------------------------------------------------------------
   11 · STUDIO
   One mark with six disciplines assembled around it. Same construction
   rule as 10 · WORK: a single SQUARE element is measured against the
   hero, and everything inside is a percentage of that. Square matters
   here - the spokes are sized as a percentage of width and the nodes are
   placed as a percentage of both, so anything other than 1:1 and the
   lines stop landing on the chips.
   -------------------------------------------------------------------- */

.art--studio .art-field {
  background: radial-gradient(88% 84% at 70% 22%, #31342A 0%, #1D1F19 40%, #101210 76%, #0B0C0B 100%);
}

.art-hub {
  left: 58cqw;
  top: calc(50% - min(14cqw, 205px));
  width: min(28cqw, 410px);
  height: min(28cqw, 410px);
}

/* the faint orbit the disciplines sit on */
.art-hub__ring {
  position: absolute; left: 10%; top: 10%; width: 80%; height: 80%;
  border: 1px solid rgba(184,135,58,0.22); border-radius: 50%;
}

/* one point of contact */
.art-hub__core {
  position: absolute; left: 50%; top: 50%;
  width: 26%; height: 26%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(148deg, #E0B978 0%, #B8873A 42%, #8A6410 100%);
  box-shadow: 0 min(0.9cqw, 14px) min(2.4cqw, 34px) rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  font: 700 min(1.5cqw, 22px)/1 var(--font-sans);
  letter-spacing: -0.06em; color: #17190F;
}

/* Each spoke is a rotated FRAME with the line inside it. The rotation has
   to live on a different element from the scaleX the animation drives,
   or dsGrowX would overwrite it and every line would snap back to
   horizontal the moment it drew. */
.art-spoke {
  position: absolute; left: 50%; top: 50%;
  width: 40%; height: 1px;
  transform-origin: left center;
}
.art-spoke i {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(90deg, rgba(184,135,58,0.62) 0%, rgba(184,135,58,0.16) 100%);
  transform-origin: left center;
}
.art-spoke--1 { transform: rotate(-90deg); }
.art-spoke--2 { transform: rotate(-30deg); }
.art-spoke--3 { transform: rotate(30deg); }
.art-spoke--4 { transform: rotate(90deg); }
.art-spoke--5 { transform: rotate(150deg); }
.art-spoke--6 { transform: rotate(210deg); }

/* the six chips, centred on the ends of the spokes */
.art--studio .art-disc {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: min(0.5cqw, 7px) min(0.8cqw, 12px);
  background: #1B1E15;
  border: 1px solid #4A4C40;
  border-bottom: 2px solid #B8873A;
  font: 500 min(0.6cqw, 9px)/1 var(--font-mono);
  letter-spacing: 0.14em; color: #CFCEC5;
  white-space: nowrap;
}
.art--studio .art-disc--1 { left: 50%;   top: 10%; }
.art--studio .art-disc--2 { left: 84.6%; top: 30%; }
.art--studio .art-disc--3 { left: 84.6%; top: 70%; }
.art--studio .art-disc--4 { left: 50%;   top: 90%; }
.art--studio .art-disc--5 { left: 15.4%; top: 70%; }
.art--studio .art-disc--6 { left: 15.4%; top: 30%; }

/* -7%, not -13%. The hub stops growing at its 410px cap around a 1460px
   hero while the hero's height does not, so at 1920 the deeper offset left
   the tag 25px off the brass edge at the bottom of the hero — measured, not
   guessed. This keeps it clear of the bottom chip and off the edge. */
.art-hub__tag {
  position: absolute; left: 50%; bottom: -7%;
  transform: translateX(-50%);
  background: #B8873A; color: #0E0F0E;
  padding: min(0.42cqw, 6px) min(0.9cqw, 13px);
  font: 500 min(0.6cqw, 9px)/1 var(--font-mono);
  letter-spacing: 0.16em; white-space: nowrap;
}

/* ====================================================================
   MOTION
   Claude Design's animation layer, lifted from the v2 service banners:
   its keyframes, its easing, its stagger. The long duration with an early
   keyframe stop (movement finishes at 16–30%, then holds to 100%) is
   Design's pattern — it means one pass of movement followed by a long
   settled hold, rather than a loop that nags.

   Everything runs off `.is-active`, so each composition plays when its
   slide comes up and replays if the visitor comes back to it. Only
   transform and opacity are animated, so it composites and costs nothing.
   ==================================================================== */

@keyframes dsFadeUp  { 0% { opacity: 0; transform: translateY(18px); } 16%, 100% { opacity: 1; transform: none; } }
@keyframes dsFadeIn  { 0% { opacity: 0; } 16%, 100% { opacity: 1; } }
@keyframes dsInLeft  { 0% { opacity: 0; transform: translateX(-24px); } 18%, 100% { opacity: 1; transform: none; } }
@keyframes dsInRight { 0% { opacity: 0; transform: translateX(24px); } 18%, 100% { opacity: 1; transform: none; } }
@keyframes dsGrowX   { 0% { transform: scaleX(0); } 30%, 100% { transform: scaleX(1); } }
@keyframes dsBar     { 0% { transform: scaleY(0.06); } 30%, 100% { transform: scaleY(1); } }
@keyframes dsPulse   { 0%, 100% { opacity: 0.28; } 50% { opacity: 0.95; } }

/* the deal keyframes carry each card's resting rotation in the 100% frame,
   so the stack settles exactly where the static layout puts it */
@keyframes dsDealA { 0% { opacity: 0; transform: translate(26px, 22px) rotate(5deg); } 20%, 100% { opacity: 1; transform: rotate(-1.2deg); } }
@keyframes dsDealB { 0% { opacity: 0; transform: translate(30px, 26px) rotate(7deg); } 24%, 100% { opacity: 0.7; transform: rotate(1.4deg); } }
@keyframes dsDealC { 0% { opacity: 0; transform: translate(34px, 30px) rotate(9deg); } 28%, 100% { opacity: 0.42; transform: rotate(-2.2deg); } }

/* a released slot clearing out of the diary */
@keyframes dsClear { 0% { opacity: 1; transform: none; } 34%, 100% { opacity: 0.35; transform: translateX(10px); } }

:root { --ds-ease: cubic-bezier(0.2, 0.7, 0.3, 1); --ds-hold: 9s; }

/* ---------------------------------------------------------- 01 automation
   Design's timing exactly: reply at 1.1s, the answer back at 2.2s, the
   diary entry at 3.1s. The seconds beside it pulse on their own. */

.is-active .art--automation .art-bub--out   { animation: dsInRight var(--ds-hold) var(--ds-ease) 1.1s 1 forwards; opacity: 0; }
.is-active .art--automation .art-bub--in:last-of-type { animation: dsInLeft var(--ds-hold) var(--ds-ease) 2.2s 1 forwards; opacity: 0; }
.is-active .art--automation .art-phone__diary { animation: dsFadeUp var(--ds-hold) var(--ds-ease) 3.1s 1 forwards; opacity: 0; }

.is-active .art--automation .art-ticks span:nth-child(1) { animation: dsPulse 3s ease-in-out 0s    infinite; }
.is-active .art--automation .art-ticks span:nth-child(2) { animation: dsPulse 3s ease-in-out 0.4s  infinite; }
.is-active .art--automation .art-ticks span:nth-child(3) { animation: dsPulse 3s ease-in-out 0.8s  infinite; }

.is-active .art--automation .art-bracket__spine  { animation: dsFadeIn var(--ds-hold) var(--ds-ease) 0.5s 1 forwards; opacity: 0; }
.is-active .art--automation .art-bracket__out    { animation: dsFadeUp var(--ds-hold) var(--ds-ease) 3.4s 1 forwards; opacity: 0; }

/* ------------------------------------------------------------ 02 websites
   The build assembling: ghosts first, the finished page over them, then
   the dial last because it is the payoff. */

.is-active .art--websites .art-ghost--3 { animation: dsFadeUp var(--ds-hold) var(--ds-ease) 0.9s 1 forwards; opacity: 0; }
.is-active .art--websites .art-ghost--2 { animation: dsFadeUp var(--ds-hold) var(--ds-ease) 1.3s 1 forwards; opacity: 0; }
.is-active .art--websites .art-ghost--1 { animation: dsFadeUp var(--ds-hold) var(--ds-ease) 1.7s 1 forwards; opacity: 0; }
.is-active .art--websites .art-page     { animation: dsFadeUp var(--ds-hold) var(--ds-ease) 2.2s 1 forwards; opacity: 0; }
.is-active .art--websites .art-dial     { animation: dsFadeUp var(--ds-hold) var(--ds-ease) 3.2s 1 forwards; opacity: 0; }

/* the call-to-action bar inside the mock page draws across */
.is-active .art--websites .art-page__body i:nth-child(5) {
  animation: dsGrowX var(--ds-hold) var(--ds-ease) 2.8s 1 forwards;
  transform-origin: left center;
  transform: scaleX(0);
}

/* ------------------------------------------------------------- 08 pricing
   The card lands, then the rows fill from the top the way a price list is
   read, then the footer that says there is no POA row. */

.is-active .art--pricing .art-rate      { animation: dsFadeUp var(--ds-hold) var(--ds-ease) 0.6s 1 forwards; opacity: 0; }
.is-active .art--pricing .art-rate__top { animation: dsFadeIn var(--ds-hold) var(--ds-ease) 0.9s 1 forwards; opacity: 0; }
.is-active .art--pricing .art-rate__rows li:nth-child(1) { animation: dsFadeUp var(--ds-hold) var(--ds-ease) 1.00s 1 forwards; opacity: 0; }
.is-active .art--pricing .art-rate__rows li:nth-child(2) { animation: dsFadeUp var(--ds-hold) var(--ds-ease) 1.22s 1 forwards; opacity: 0; }
.is-active .art--pricing .art-rate__rows li:nth-child(3) { animation: dsFadeUp var(--ds-hold) var(--ds-ease) 1.44s 1 forwards; opacity: 0; }
.is-active .art--pricing .art-rate__rows li:nth-child(4) { animation: dsFadeUp var(--ds-hold) var(--ds-ease) 1.66s 1 forwards; opacity: 0; }
.is-active .art--pricing .art-rate__rows li:nth-child(5) { animation: dsFadeUp var(--ds-hold) var(--ds-ease) 1.88s 1 forwards; opacity: 0; }
.is-active .art--pricing .art-rate__rows li:nth-child(6) { animation: dsFadeUp var(--ds-hold) var(--ds-ease) 2.10s 1 forwards; opacity: 0; }
.is-active .art--pricing .art-rate__rows li:nth-child(7) { animation: dsFadeUp var(--ds-hold) var(--ds-ease) 2.32s 1 forwards; opacity: 0; }
.is-active .art--pricing .art-rate__foot { animation: dsFadeUp var(--ds-hold) var(--ds-ease) 2.7s 1 forwards; opacity: 0; }

/* -------------------------------------------------------------- 03 social
   Dealt like cards. The keyframes carry the resting rotation, so these
   override the static transforms rather than fighting them. */

.is-active .art--social .art-card--1 { animation: dsDealA var(--ds-hold) var(--ds-ease) 0.8s 1 forwards; opacity: 0; }
.is-active .art--social .art-card--2 { animation: dsDealB var(--ds-hold) var(--ds-ease) 1.2s 1 forwards; opacity: 0; }
.is-active .art--social .art-card--3 { animation: dsDealC var(--ds-hold) var(--ds-ease) 1.6s 1 forwards; opacity: 0; }

.is-active .art--social .art-node--1 { animation: dsFadeIn var(--ds-hold) var(--ds-ease) 2.0s 1 forwards; opacity: 0; }
.is-active .art--social .art-node--2 { animation: dsFadeIn var(--ds-hold) var(--ds-ease) 2.3s 1 forwards; opacity: 0; }
.is-active .art--social .art-node--3 { animation: dsFadeIn var(--ds-hold) var(--ds-ease) 2.6s 1 forwards; opacity: 0; }
.is-active .art--social .art-node--4 { animation: dsFadeIn var(--ds-hold) var(--ds-ease) 2.9s 1 forwards; opacity: 0; }

/* --------------------------------------------------------------- 04 brand
   Material settling into place, lit from the upper right. */

.is-active .art--brand .art-plate      { animation: dsFadeUp var(--ds-hold) var(--ds-ease) 0.8s 1 forwards; opacity: 0; }
.is-active .art--brand .art-plate__shade { animation: dsFadeIn var(--ds-hold) var(--ds-ease) 1.0s 1 forwards; opacity: 0; }
.is-active .art--brand .art-spec       { animation: dsFadeUp var(--ds-hold) var(--ds-ease) 1.4s 1 forwards; opacity: 0; }
.is-active .art--brand .art-spec__shade { animation: dsFadeIn var(--ds-hold) var(--ds-ease) 1.6s 1 forwards; opacity: 0; }
.is-active .art--brand .art-fold       { animation: dsFadeUp var(--ds-hold) var(--ds-ease) 2.0s 1 forwards; opacity: 0; }
.is-active .art--brand .art-fold__lid  { animation: dsFadeUp var(--ds-hold) var(--ds-ease) 2.2s 1 forwards; opacity: 0; }
.is-active .art--brand .art-fold__type { animation: dsFadeIn var(--ds-hold) var(--ds-ease) 2.5s 1 forwards; opacity: 0; }

.is-active .art--brand .art-glint {
  animation: dsGrowX var(--ds-hold) var(--ds-ease) 2.8s 1 forwards;
  transform-origin: left center;
  transform: scaleX(0);
}

/* ------------------------------------------------------------- 05 invoice
   The fields light one at a time — that is the product, so it gets the
   slowest stagger on the page. Then the drafted row arrives last, because
   the approval step is the reassurance. */

.is-active .art--invoice .art-doc { animation: dsFadeUp var(--ds-hold) var(--ds-ease) 0.6s 1 forwards; opacity: 0; }
.is-active .art--invoice .art-doc__row.is-lit:nth-of-type(1) { animation: dsFadeIn var(--ds-hold) var(--ds-ease) 1.4s 1 forwards; opacity: 0; }
.is-active .art--invoice .art-doc__row.is-lit:nth-of-type(2) { animation: dsFadeIn var(--ds-hold) var(--ds-ease) 1.8s 1 forwards; opacity: 0; }
.is-active .art--invoice .art-doc__row.is-lit:nth-of-type(3) { animation: dsFadeIn var(--ds-hold) var(--ds-ease) 2.2s 1 forwards; opacity: 0; }
.is-active .art--invoice .art-doc__row.is-lit:nth-of-type(4) { animation: dsFadeIn var(--ds-hold) var(--ds-ease) 2.6s 1 forwards; opacity: 0; }

.is-active .art--invoice .art-extract {
  animation: dsBar var(--ds-hold) var(--ds-ease) 3.0s 1 forwards;
  transform-origin: top center;
  transform: scaleY(0.06);
}
.is-active .art--invoice .art-extract__node { animation: dsFadeIn var(--ds-hold) var(--ds-ease) 3.4s 1 forwards; opacity: 0; }
.is-active .art--invoice .art-ledger        { animation: dsFadeUp var(--ds-hold) var(--ds-ease) 3.7s 1 forwards; opacity: 0; }

/* --------------------------------------------------------------- 06 diary
   The week fills column by column, the released slot clears, and the
   replacement drops in where it was. */

.is-active .art--diary .art-week__col:nth-child(1) { animation: dsFadeUp var(--ds-hold) var(--ds-ease) 0.7s 1 forwards; opacity: 0; }
.is-active .art--diary .art-week__col:nth-child(2) { animation: dsFadeUp var(--ds-hold) var(--ds-ease) 1.0s 1 forwards; opacity: 0; }
.is-active .art--diary .art-week__col:nth-child(3) { animation: dsFadeUp var(--ds-hold) var(--ds-ease) 1.3s 1 forwards; opacity: 0; }
.is-active .art--diary .art-week__col:nth-child(4) { animation: dsFadeUp var(--ds-hold) var(--ds-ease) 1.6s 1 forwards; opacity: 0; }
.is-active .art--diary .art-week__col:nth-child(5) { animation: dsFadeUp var(--ds-hold) var(--ds-ease) 1.9s 1 forwards; opacity: 0; }

.is-active .art--diary .art-slot--released { animation: dsClear var(--ds-hold) var(--ds-ease) 2.6s 1 forwards; }
.is-active .art--diary .art-slot--new      { animation: dsFadeIn var(--ds-hold) var(--ds-ease) 3.2s 1 forwards; opacity: 0; }
.is-active .art--diary .art-refill         { animation: dsFadeUp var(--ds-hold) var(--ds-ease) 3.6s 1 forwards; opacity: 0; }

/* -------------------------------------------------------------- 07 report
   Twelve months growing from the axis, then the figure over the top. */

.is-active .art--report .art-report { animation: dsFadeUp var(--ds-hold) var(--ds-ease) 0.6s 1 forwards; opacity: 0; }
.is-active .art--report .art-report__bars i { transform-origin: bottom center; transform: scaleY(0.06);
                                              animation: dsBar var(--ds-hold) var(--ds-ease) 1.4s 1 forwards; }
.is-active .art--report .art-report__bars i:nth-child(2)  { animation-delay: 1.5s; }
.is-active .art--report .art-report__bars i:nth-child(3)  { animation-delay: 1.6s; }
.is-active .art--report .art-report__bars i:nth-child(4)  { animation-delay: 1.7s; }
.is-active .art--report .art-report__bars i:nth-child(5)  { animation-delay: 1.8s; }
.is-active .art--report .art-report__bars i:nth-child(6)  { animation-delay: 1.9s; }
.is-active .art--report .art-report__bars i:nth-child(7)  { animation-delay: 2.0s; }
.is-active .art--report .art-report__bars i:nth-child(8)  { animation-delay: 2.1s; }
.is-active .art--report .art-report__bars i:nth-child(9)  { animation-delay: 2.2s; }
.is-active .art--report .art-report__bars i:nth-child(10) { animation-delay: 2.3s; }
.is-active .art--report .art-report__bars i:nth-child(11) { animation-delay: 2.4s; }
.is-active .art--report .art-report__bars i:nth-child(12) { animation-delay: 2.5s; }

.is-active .art--report .art-report__fig { animation: dsFadeUp var(--ds-hold) var(--ds-ease) 2.9s 1 forwards; opacity: 0; }

/* --------------------------------------------------------------------
   REDUCED MOTION
   Design's brief asked for a defined static state that still communicates
   the idea. That is the finished composition, so every animation is
   dropped and every element is simply shown where it lands.
   -------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .hero__art *,
  .hero__art {
    animation: none !important;
    opacity: 1 !important;
  }
  .art-slot--released { opacity: 0.35 !important; }
  .art--social .art-card--2 { opacity: 0.7 !important; }
  .art--social .art-card--3 { opacity: 0.42 !important; }
  .art--websites .art-ghost--3 { opacity: 0.3 !important; }
  .art--websites .art-ghost--2 { opacity: 0.55 !important; }
  .art--websites .art-ghost--1 { opacity: 0.8 !important; }
  .hero__art [style*="scaleX"], .art-glint, .art-extract,
  .art-report__bars i, .art-page__body i:nth-child(5),
  .art-case__rule, .art-spoke i { transform: none !important; }
}

/* --------------------------------------------------------------------
   09 · INSIGHT
   An article writing itself, out of a stack of others. Geometry matched to
   .art-page — explicit height, same column, same top — because a
   content-sized panel came out short and clipped its own top edge.
   -------------------------------------------------------------------- */

.art--insight .art-field {
  background: radial-gradient(112% 92% at 70% 38%, #23241F 0%, #16180F 44%, #0E0F0E 80%);
}

.art--insight .art-grid {
  left: 52cqw; right: 0; top: 0; bottom: 0;
  background: repeating-linear-gradient(180deg, rgba(251,250,247,0.035) 0 1px, transparent 1px 3.2cqw);
}

.art-piece {
  left: 57.27cqw;
  top: calc(50% - min(14cqw, 200px));
  width: min(31.82cqw, 470px); height: min(28cqw, 400px);
  /* lifted from #191B14: the shared scrim lays up to 62% near-black over this
     side of the hero, and at the old value a panel this large sank into the
     field behind it. */
  background: #24271D;
  border: 0.05cqw solid #5C5F52;
  border-bottom: 0.36cqw solid #B8873A;
  box-shadow: 0 1.8cqw 4.1cqw rgba(0,0,0,0.5);
  display: flex; flex-direction: column;
}

.art-piece__top {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.91cqw 1.27cqw;
  border-bottom: 0.05cqw solid #2E3028;
  font: 500 0.59cqw/1 var(--font-mono);
  letter-spacing: 0.12em; color: #C99B4E;
}
.art-piece__top span:last-child { color: #6E7269; }

.art-piece__in { padding: 1.36cqw 1.27cqw; flex: 1; display: flex; flex-direction: column; }

.art-piece__head { display: grid; gap: 0.45cqw; }
.art-piece__head i {
  display: block; height: 0.86cqw; background: #FBFAF7; opacity: 1;
  transform-origin: left;
}
.art-piece__head i:nth-child(1) { width: 94%; }
.art-piece__head i:nth-child(2) { width: 100%; }
.art-piece__head i:nth-child(3) { width: 52%; }

.art-piece__rule { margin-top: 1.18cqw; height: 0.05cqw; background: #2E3028; }

.art-piece__body {
  margin-top: 1.18cqw; flex: 1;
  display: flex; flex-direction: column; justify-content: space-between;
}
.art-piece__body i {
  display: block; height: 0.3cqw; background: #9A9E92; opacity: 0.62;
  transform-origin: left;
}
.art-piece__body i:nth-child(1)  { width: 100%; }
.art-piece__body i:nth-child(2)  { width: 96%; }
.art-piece__body i:nth-child(3)  { width: 99%; }
.art-piece__body i:nth-child(4)  { width: 92%; }
.art-piece__body i:nth-child(5)  { width: 61%; }
.art-piece__body i:nth-child(7)  { width: 98%; }
.art-piece__body i:nth-child(8)  { width: 100%; }
.art-piece__body i:nth-child(9)  { width: 94%; }
.art-piece__body i:nth-child(10) { width: 99%; }
.art-piece__body i:nth-child(11) { width: 88%; }
.art-piece__body i:nth-child(12) { width: 97%; }
.art-piece__body i:nth-child(13) { width: 100%; }
.art-piece__body i:nth-child(14) { width: 57%; }

/* the passage that highlights itself */
.art-piece__mark { position: relative; width: 86%; }
.art-piece__mark::after {
  content: ""; position: absolute; left: -0.45cqw; right: -0.45cqw;
  top: -0.41cqw; bottom: -0.41cqw;
  background: #B8873A; opacity: 0.34;
  transform: scaleX(0); transform-origin: left;
}

.art-piece__foot {
  margin-top: auto; padding-top: 1.09cqw;
  border-top: 0.05cqw solid #2E3028;
  display: flex; justify-content: space-between; align-items: center;
  font: 500 0.59cqw/1 var(--font-mono); letter-spacing: 0.12em; color: #6E7269;
}
.art-piece__foot b {
  color: #0E0F0E; background: #B8873A; padding: 0.32cqw 0.55cqw; font-weight: 500;
}

/* the stack it comes out of */
.art--insight .art-ghost { height: min(25cqw, 356px); width: min(23.64cqw, 350px); }
.art--insight .art-ghost--3 { left: 50cqw;    top: calc(50% - min(12.5cqw, 178px) + 56px); }
.art--insight .art-ghost--2 { left: 52.73cqw; top: calc(50% - min(12.5cqw, 178px) + 36px); }
.art--insight .art-ghost--1 { left: 55.45cqw; top: calc(50% - min(12.5cqw, 178px) + 16px); }

/* 09 · insight
   The article writes itself. Ghosts deal in, the sheet lands, then the
   headline and every line of body draw left to right in sequence — which is
   the one thing this page is actually about. One passage then highlights. */
.is-active .art--insight .art-ghost--3 { animation: dsDealC var(--ds-hold) var(--ds-ease) 0.6s 1 forwards; opacity: 0; }
.is-active .art--insight .art-ghost--2 { animation: dsDealB var(--ds-hold) var(--ds-ease) 0.85s 1 forwards; opacity: 0; }
.is-active .art--insight .art-ghost--1 { animation: dsDealA var(--ds-hold) var(--ds-ease) 1.1s 1 forwards; opacity: 0; }
.is-active .art--insight .art-piece    { animation: dsFadeUp var(--ds-hold) var(--ds-ease) 1.55s 1 forwards; opacity: 0; }

/* the headline, three strokes */
.is-active .art--insight .art-piece__head i { transform: scaleX(0); }
.is-active .art--insight .art-piece__head i:nth-child(1) { animation: dsGrowX 0.5s var(--ds-ease) 2.0s 1 forwards; }
.is-active .art--insight .art-piece__head i:nth-child(2) { animation: dsGrowX 0.5s var(--ds-ease) 2.16s 1 forwards; }
.is-active .art--insight .art-piece__head i:nth-child(3) { animation: dsGrowX 0.5s var(--ds-ease) 2.32s 1 forwards; }

/* the body, written line by line */
.is-active .art--insight .art-piece__body i { transform: scaleX(0); }
.is-active .art--insight .art-piece__body i:nth-child(1) { animation: dsGrowX 0.3s var(--ds-ease) 2.600s 1 forwards; }
.is-active .art--insight .art-piece__body i:nth-child(2) { animation: dsGrowX 0.3s var(--ds-ease) 2.675s 1 forwards; }
.is-active .art--insight .art-piece__body i:nth-child(3) { animation: dsGrowX 0.3s var(--ds-ease) 2.750s 1 forwards; }
.is-active .art--insight .art-piece__body i:nth-child(4) { animation: dsGrowX 0.3s var(--ds-ease) 2.825s 1 forwards; }
.is-active .art--insight .art-piece__body i:nth-child(5) { animation: dsGrowX 0.3s var(--ds-ease) 2.900s 1 forwards; }
.is-active .art--insight .art-piece__body i:nth-child(6) { animation: dsGrowX 0.3s var(--ds-ease) 2.975s 1 forwards; }
.is-active .art--insight .art-piece__body i:nth-child(7) { animation: dsGrowX 0.3s var(--ds-ease) 3.050s 1 forwards; }
.is-active .art--insight .art-piece__body i:nth-child(8) { animation: dsGrowX 0.3s var(--ds-ease) 3.125s 1 forwards; }
.is-active .art--insight .art-piece__body i:nth-child(9) { animation: dsGrowX 0.3s var(--ds-ease) 3.200s 1 forwards; }
.is-active .art--insight .art-piece__body i:nth-child(10) { animation: dsGrowX 0.3s var(--ds-ease) 3.275s 1 forwards; }
.is-active .art--insight .art-piece__body i:nth-child(11) { animation: dsGrowX 0.3s var(--ds-ease) 3.350s 1 forwards; }
.is-active .art--insight .art-piece__body i:nth-child(12) { animation: dsGrowX 0.3s var(--ds-ease) 3.425s 1 forwards; }
.is-active .art--insight .art-piece__body i:nth-child(13) { animation: dsGrowX 0.3s var(--ds-ease) 3.500s 1 forwards; }
.is-active .art--insight .art-piece__body i:nth-child(14) { animation: dsGrowX 0.3s var(--ds-ease) 3.575s 1 forwards; }
/* and the passage worth keeping */
.is-active .art--insight .art-piece__mark::after { animation: dsGrowX 0.8s var(--ds-ease) 3.9s 1 forwards; }
.is-active .art--insight .art-piece__foot b      { animation: dsFadeIn var(--ds-hold) var(--ds-ease) 4.4s 1 forwards; opacity: 0; }

/* ----------------------------------------------------------------- 10 work
   The wall fills, then one piece comes forward carrying a number. Four
   beats, not eleven: six tiles on a fast stagger read as ONE event, then
   the card, then the figure, then the rule under it. */
.is-active .art--work .art-tile:nth-child(1) { animation: dsFadeUp var(--ds-hold) var(--ds-ease) 0.55s 1 forwards; opacity: 0; }
.is-active .art--work .art-tile:nth-child(2) { animation: dsFadeUp var(--ds-hold) var(--ds-ease) 0.70s 1 forwards; opacity: 0; }
.is-active .art--work .art-tile:nth-child(3) { animation: dsFadeUp var(--ds-hold) var(--ds-ease) 0.85s 1 forwards; opacity: 0; }
.is-active .art--work .art-tile:nth-child(4) { animation: dsFadeUp var(--ds-hold) var(--ds-ease) 1.00s 1 forwards; opacity: 0; }
.is-active .art--work .art-tile:nth-child(5) { animation: dsFadeUp var(--ds-hold) var(--ds-ease) 1.15s 1 forwards; opacity: 0; }
.is-active .art--work .art-tile:nth-child(6) { animation: dsFadeUp var(--ds-hold) var(--ds-ease) 1.30s 1 forwards; opacity: 0; }

.is-active .art--work .art-case      { animation: dsFadeUp var(--ds-hold) var(--ds-ease) 1.85s 1 forwards; opacity: 0; }
.is-active .art--work .art-case__top { animation: dsFadeIn var(--ds-hold) var(--ds-ease) 2.15s 1 forwards; opacity: 0; }
.is-active .art--work .art-case__fig { animation: dsFadeUp var(--ds-hold) var(--ds-ease) 2.35s 1 forwards; opacity: 0; }
.is-active .art--work .art-case__cap { animation: dsFadeIn var(--ds-hold) var(--ds-ease) 2.60s 1 forwards; opacity: 0; }
.is-active .art--work .art-case__rule {
  animation: dsGrowX var(--ds-hold) var(--ds-ease) 2.85s 1 forwards;
  transform: scaleX(0);
}

/* --------------------------------------------------------------- 11 studio
   The studio assembling around one point of contact: the orbit, the mark,
   then each discipline drawn out to its own chip. The chips fade rather
   than move - they are centred with a translate, and dsFadeUp would fight
   it and drop each one half its own height out of position. */
.is-active .art--studio .art-hub__ring { animation: dsFadeIn var(--ds-hold) var(--ds-ease) 0.45s 1 forwards; opacity: 0; }
.is-active .art--studio .art-hub__core { animation: dsFadeIn var(--ds-hold) var(--ds-ease) 0.70s 1 forwards; opacity: 0; }

.is-active .art--studio .art-spoke i { transform: scaleX(0); }
.is-active .art--studio .art-spoke--1 i { animation: dsGrowX 0.45s var(--ds-ease) 1.05s 1 forwards; }
.is-active .art--studio .art-spoke--2 i { animation: dsGrowX 0.45s var(--ds-ease) 1.20s 1 forwards; }
.is-active .art--studio .art-spoke--3 i { animation: dsGrowX 0.45s var(--ds-ease) 1.35s 1 forwards; }
.is-active .art--studio .art-spoke--4 i { animation: dsGrowX 0.45s var(--ds-ease) 1.50s 1 forwards; }
.is-active .art--studio .art-spoke--5 i { animation: dsGrowX 0.45s var(--ds-ease) 1.65s 1 forwards; }
.is-active .art--studio .art-spoke--6 i { animation: dsGrowX 0.45s var(--ds-ease) 1.80s 1 forwards; }

.is-active .art--studio .art-disc--1 { animation: dsFadeIn var(--ds-hold) var(--ds-ease) 1.35s 1 forwards; opacity: 0; }
.is-active .art--studio .art-disc--2 { animation: dsFadeIn var(--ds-hold) var(--ds-ease) 1.50s 1 forwards; opacity: 0; }
.is-active .art--studio .art-disc--3 { animation: dsFadeIn var(--ds-hold) var(--ds-ease) 1.65s 1 forwards; opacity: 0; }
.is-active .art--studio .art-disc--4 { animation: dsFadeIn var(--ds-hold) var(--ds-ease) 1.80s 1 forwards; opacity: 0; }
.is-active .art--studio .art-disc--5 { animation: dsFadeIn var(--ds-hold) var(--ds-ease) 1.95s 1 forwards; opacity: 0; }
.is-active .art--studio .art-disc--6 { animation: dsFadeIn var(--ds-hold) var(--ds-ease) 2.10s 1 forwards; opacity: 0; }

.is-active .art--studio .art-hub__tag { animation: dsFadeIn var(--ds-hold) var(--ds-ease) 2.55s 1 forwards; opacity: 0; }