/* 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;
}

/* --------------------------------------------------------------------
   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%; }
}

/* ====================================================================
   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);
}

/* -------------------------------------------------------------- 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) { transform: none !important; }
}