/*
 * Organise: The Virtual Organiser. Her own brand made bolder: her orange as
 * the title page, Bitter (her face) for the voice, Instrument Sans for the
 * work. A cool desk-blue ground, squared edges, and motion that files things
 * into place: short, crisp, sideways.
 */
@font-face {
  font-family: "Instrument Sans";
  src: url("/_assets/previews/f/organise/fonts/instrument-normal-400-700.2ee17598a9.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ground: light-dark(#eef1f6, #10141c);
  --surface: light-dark(#e1e6ee, #1a2029);
  --ink: light-dark(#161a24, #e8ecf3);
  --ink-2: light-dark(#4a5163, #a3abbd);
  --accent: light-dark(#a04a0b, #f59d5a);
  --hair: light-dark(#c9d0dc, #2a3240);
  --block-empty: light-dark(#6f788c, #6e788c);
  --focus: light-dark(#a04a0b, #f59d5a);
  --body-font: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --dock-bg: #1a1d27;
  --dock-ink: #f4f5f9;
  --sheet-bg: var(--ground);
  --radius: 6px;
}

/* The title page: her orange, ink type, the same in both themes. */
.title { background: #ed802b; color: #1a1d27; --ink: #1a1d27; --ink-2: #3d2108; --focus: #1a1d27; --proof-ink: #3d2108; }
.title .seal { color: #1a1d27; fill: #1a1d27; }
.title .head__toc:hover { text-decoration: underline; }
.title .btn--call { background: #1a1d27; color: #ed802b; box-shadow: none; }
.btn--ink { background: #1a1d27; color: #f4f5f9; }
.btn--ink:hover { transform: translateY(-2px); }
.textlink { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; }

.hero {
  display: grid; gap: var(--space-6);
  padding: var(--space-4) var(--gutter) var(--space-8);
  max-width: 96rem; margin: 0 auto;
}
.hero__text { display: grid; gap: var(--space-4); justify-items: start; align-content: center; }
.hero__title { display: grid; gap: var(--space-2); }
.hero__verb { font-size: clamp(3.6rem, 13vw, 6rem); line-height: .9; letter-spacing: -.035em; }
.hero__name { font: 700 clamp(1.5rem, 3.2vw, 2.1rem)/1.1 var(--ledger); letter-spacing: -.01em; }
.hero__her { font: italic 500 1.1875rem/1.3 var(--ledger); }
.hero__lede { font-size: 1.125rem; max-width: 34ch; }
.hero__start {
  display: grid; gap: .1rem; padding: var(--space-3) 0 var(--space-3) var(--space-4);
  border-left: 1px solid #1a1d27; font-size: 1rem;
}
.hero__start-k { font: italic 500 .875rem/1.3 var(--ledger); }
.hero__start-v b { font: 700 1.25rem/1.2 var(--ledger); font-variant-numeric: lining-nums tabular-nums; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-2); }
.hero__fig { display: grid; gap: var(--space-2); }
.hero__frame { position: relative; overflow: hidden; border-radius: var(--radius); background: #d7dde7; }
.hero__img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.hero__cap { font: italic 400 .8125rem/1.3 var(--ledger); color: var(--ink-2); }
@media (min-width: 64rem) {
  .hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(2.5rem, 5vw, 5rem); padding-top: var(--space-6); min-height: calc(100svh - 5rem); align-items: center; }
}

/* Sections */
.sec { padding: var(--space-9) var(--gutter) 0; max-width: 80rem; margin: 0 auto; }
.sec__head { display: grid; gap: var(--space-2); margin-bottom: var(--space-6); max-width: 44rem; }
.sec__title { font: 800 clamp(2rem, 4.6vw, 3.4rem)/1.02 var(--ledger); letter-spacing: -.025em; }
.sec__sub { color: var(--ink-2); font-size: 1.0625rem; max-width: 52ch; }

/* The ledger: one row per package, the hours drawn as squares. */
.ledger__cap { font: 700 .875rem/1 var(--ledger); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: var(--space-6) 0 var(--space-3); }
.ledger { list-style: none; display: grid; border-top: 2px solid var(--ink); }
.ledger__row {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name price" "hours hours" "blocks blocks" "note note";
  gap: .35rem var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--hair);
}
.ledger__name { grid-area: name; font: 700 1.375rem/1.15 var(--ledger); letter-spacing: -.01em; }
.ledger__hours { grid-area: hours; font-weight: 600; color: var(--ink-2); }
.ledger__blocks { grid-area: blocks; display: flex; flex-wrap: wrap; gap: 4px; }
.ledger__blocks i { width: 14px; height: 14px; border-radius: 2px; background: #ed802b; box-shadow: inset 0 0 0 1.5px light-dark(#a04a0b, #ed802b); }
.ledger__price { grid-area: price; font: 800 1.75rem/1 var(--ledger); font-variant-numeric: lining-nums tabular-nums; text-align: right; letter-spacing: -.015em; }
.ledger__price small { font: 500 .9375rem/1 var(--ledger); color: var(--ink-2); letter-spacing: 0; }
.ledger__note { grid-area: note; font-size: .9375rem; color: var(--ink-2); max-width: 60ch; }
.prices__foot { margin-top: var(--space-5); color: var(--ink-2); }
@media (min-width: 48rem) {
  .ledger__row {
    grid-template-columns: minmax(0, 13rem) 6.5rem minmax(0, 1fr) 9rem;
    grid-template-areas: "name hours blocks price" ". . note note";
    padding: var(--space-5) 0;
  }
  .ledger__blocks i { width: 18px; height: 18px; }
}

/* What she does */
.does__grid { display: grid; gap: var(--space-7); align-items: center; }
.does__list { display: grid; gap: var(--space-5); }
.does__list div { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--space-4); align-items: baseline; padding-top: var(--space-4); border-top: 1px solid var(--hair); }
.does__list dt { font: 700 1.0625rem/1.3 var(--ledger); color: var(--accent); }
.does__list dd { font-size: 1.0625rem; max-width: 46ch; }
.does__fig { display: grid; gap: var(--space-2); }
.does__img { width: 100%; height: auto; border-radius: var(--radius); }
@media (max-width: 30rem) {
  .does__list div { grid-template-columns: 1fr; gap: .2rem; }
}
@media (min-width: 64rem) {
  .does__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--space-8); }
}

/* Do I need a VA? One surface step, her words large. */
.need { max-width: none; padding-inline: 0; }
.need__inner { background: var(--surface); padding: var(--space-8) var(--gutter); display: grid; gap: var(--space-6); }
.need__inner > * { max-width: 72rem; width: 100%; margin-inline: auto; }
.need__quote p { font: italic 500 clamp(1.75rem, 4.4vw, 3.1rem)/1.14 var(--ledger); letter-spacing: -.015em; max-width: 26ch; }
.need__cols { display: grid; gap: var(--space-5); }
.need__k { font: 700 .875rem/1.2 var(--ledger); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-2); }
.need__cols p { max-width: 40ch; }
.need__src { font: italic 400 .875rem/1.3 var(--ledger); color: var(--ink-2); }
@media (min-width: 56rem) {
  .need__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-7); }
}

/* Booking */
.book { display: grid; justify-items: start; gap: var(--space-6); padding-bottom: 0; }
.book .sec__head { margin-bottom: 0; }
.steps { width: 100%; }
.steps li::before { border-radius: 4px; }
.btn--big { font-size: 1.125rem; min-height: 3.5rem; padding-inline: 1.6em; }

.back { margin-top: var(--space-9); background: var(--surface); }

/*
 * Arrival: filing. The verb slides in from the left like a folder going into
 * a drawer, the lines follow, then the orange shutter slides off the desk
 * photo. Hours file into their squares when the ledger arrives. All of it
 * finishes on its own clock.
 */
@media (prefers-reduced-motion: no-preference) {
  .lt-ready .head { animation: slide-in 420ms var(--ease-out) both; }
  .lt-ready .hero__verb { animation: file-in 620ms var(--ease-out) 80ms both; }
  .lt-ready .hero__name { animation: file-in 560ms var(--ease-out) 160ms both; }
  .lt-ready .hero__her, .lt-ready .hero__lede { animation: file-in 520ms var(--ease-out) 230ms both; }
  .lt-ready .hero__start, .lt-ready .hero__actions { animation: file-in 520ms var(--ease-out) 300ms both; }
  .hero__frame::after {
    content: ""; position: absolute; inset: 0; background: #ed802b;
    transform: translateX(101%);
  }
  .lt-ready .hero__frame::after { animation: shutter 760ms var(--ease-in-out) 120ms both; }
  .lt-ready .hero__img { animation: settle-img 900ms var(--ease-out) 300ms both; }
  .ledger.lt-arrived .ledger__row { animation: file-in 420ms var(--ease-out) both; }
  .ledger.lt-arrived .ledger__row:nth-child(2) { animation-delay: 70ms; }
  .ledger.lt-arrived .ledger__row:nth-child(3) { animation-delay: 140ms; }
  .ledger.lt-arrived .ledger__blocks i { animation: drop 260ms var(--ease-out) both; animation-delay: calc(160ms + var(--b, 0) * 24ms); }
  .does__list.lt-arrived > div { animation: file-in 440ms var(--ease-out) both; }
  .does__list.lt-arrived > div:nth-child(2) { animation-delay: 60ms; }
  .does__list.lt-arrived > div:nth-child(3) { animation-delay: 120ms; }
  .does__list.lt-arrived > div:nth-child(4) { animation-delay: 180ms; }
  .steps.lt-arrived li { animation: file-in 440ms var(--ease-out) both; }
  .steps.lt-arrived li:nth-child(2) { animation-delay: 80ms; }
  .steps.lt-arrived li:nth-child(3) { animation-delay: 160ms; }
}
@media (prefers-reduced-motion: reduce) {
  .lt-ready .hero { animation: fade 200ms linear both; }
}
.ledger__blocks i:nth-child(2) { --b: 1; } .ledger__blocks i:nth-child(3) { --b: 2; } .ledger__blocks i:nth-child(4) { --b: 3; }
.ledger__blocks i:nth-child(5) { --b: 4; } .ledger__blocks i:nth-child(6) { --b: 5; } .ledger__blocks i:nth-child(7) { --b: 6; }
.ledger__blocks i:nth-child(8) { --b: 7; } .ledger__blocks i:nth-child(9) { --b: 8; } .ledger__blocks i:nth-child(10) { --b: 9; }
.ledger__blocks i:nth-child(11) { --b: 10; } .ledger__blocks i:nth-child(12) { --b: 11; } .ledger__blocks i:nth-child(13) { --b: 12; }
.ledger__blocks i:nth-child(14) { --b: 13; } .ledger__blocks i:nth-child(15) { --b: 14; } .ledger__blocks i:nth-child(16) { --b: 15; }
.ledger__blocks i:nth-child(17) { --b: 16; } .ledger__blocks i:nth-child(18) { --b: 17; } .ledger__blocks i:nth-child(19) { --b: 18; }
.ledger__blocks i:nth-child(20) { --b: 19; }
@keyframes slide-in { from { transform: translateY(-8px); opacity: 0; } }
@keyframes file-in { from { transform: translateX(-28px); opacity: 0; } }
@keyframes shutter { from { transform: translateX(0); } to { transform: translateX(101%); } }
@keyframes settle-img { from { transform: scale(1.06); } }
@keyframes drop { from { transform: translateY(-10px) scale(.6); opacity: 0; } }
@keyframes fade { from { opacity: .4; } }