/* Direction E, organise: The Virtual Organiser. Paper, sumi ink and her
   orange; her own Bitter made bolder; motion that sorts and files, crisp. */
@font-face { font-family: "Bitter"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/_assets/previews/e/organise/fonts/Bitter-400-800.0efe0fbe60.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/_assets/previews/e/organise/fonts/AtkinsonHyperlegibleNext-400-700.18b2a1a39a.woff2) format("woff2"); }

:root {
  color-scheme: light dark;
  --f-ground: light-dark(#F4F5F7, #15171C);
  --f-surface: light-dark(#FFFFFF, #1E2128);
  --f-text: light-dark(#191C24, #ECEDEF);
  --f-muted: light-dark(#4A505D, #A9AEB8);
  --f-line: light-dark(#D3D7DE, #33373F);
  --ring: light-dark(#A84C0C, #F5A262);
  --o-deep: light-dark(#A44A0B, #F5A262);
  --here-c: var(--c-organise);
  --here: 0;
  --seal-ink: var(--f-text);
  --seal-paper: var(--f-ground);
  --slab: "Bitter", "Rockwell", "Roboto Slab", Georgia, serif;
  --read: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --arrive-duration: 380ms;
  --arrive-distance: 14px;
  --arrive-stagger: 60ms;
  --arrive-easing: cubic-bezier(.2, .8, .2, 1);
}
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--f-ground); color: var(--f-text); font: 400 17px/1.55 var(--read); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 16px; border-radius: 10px; background: var(--f-surface); font-weight: 700; }
.skip:focus { top: 12px; }
.o-wrap { max-width: 1180px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.o-h2 { margin: 0; font: 800 clamp(30px, 4.6vw, 48px)/1.05 var(--slab); letter-spacing: -.015em; }
.o-h2-small { font-size: clamp(24px, 3vw, 30px); }
.o-h3 { margin: 40px 0 16px; font: 700 14px/1 var(--read); letter-spacing: .14em; text-transform: uppercase; color: var(--f-muted); }
.o-sub { margin: 10px 0 0; color: var(--f-muted); max-width: 52ch; }
.o-small { margin: 18px 0 0; color: var(--f-muted); font-size: 15px; }

/* Hero: the promise on the left, the desk being sorted on the right. */
.o-hero { max-width: 1280px; margin-inline: auto; padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 40px) clamp(48px, 7vw, 96px); display: grid; gap: 40px; align-items: center; }
@media (min-width: 980px) { .o-hero { grid-template-columns: 1fr 1.05fr; gap: 56px; min-height: min(860px, calc(92svh - 61px)); } }
.o-brand { display: flex; align-items: center; gap: 16px; }
.o-brand .seal { width: 92px; height: 92px; flex: none; }
.o-site { margin: 0; font: 700 15px/1.3 var(--slab); letter-spacing: .16em; text-transform: uppercase; }
.o-hero h1 { margin: 22px 0 0; font: 800 clamp(42px, 7.4vw, 76px)/1 var(--slab); letter-spacing: -.02em; max-width: 12ch; text-wrap: balance; }
.o-desc { margin: 14px 0 0; font: 600 19px/1.3 var(--read); color: var(--f-muted); }
.o-lede { margin: 18px 0 0; font-size: 19px; max-width: 34ch; }
.o-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 28px 0 22px; }
.o-link { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--f-muted); }
.o-link:hover { text-decoration-color: var(--f-text); }

.o-desk { position: relative; margin: 0; padding: 18px; border-radius: 18px; background: light-dark(#E9ECF0, #1B1E25); box-shadow: inset 0 0 0 1px var(--f-line); }
.o-pile { position: absolute; left: 50%; top: 42%; width: 1px; height: 1px; }
.trays { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tray { position: relative; padding: 12px 10px 10px; border-radius: 12px; background: var(--f-surface); box-shadow: 0 1px 0 var(--f-line), 0 10px 22px -18px rgb(20 25 35 / .5); }
.tray-h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 700 15px/1 var(--slab); letter-spacing: .02em; }
.tray-ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.msgs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.msg { padding: 9px 10px; border-radius: 7px; background: var(--f-ground); box-shadow: 0 1px 0 var(--f-line); font: 400 14px/1.3 var(--read); }
.o-desk figcaption { margin: 12px 4px 0; color: var(--f-muted); font-size: 14px; }
.o-stamp { position: absolute; right: -8px; top: -34px; display: grid; place-items: center; width: 74px; height: 74px; margin: 0; border-radius: 50%; background: var(--f-surface); box-shadow: inset 0 0 0 3px var(--orange), inset 0 0 0 7px var(--f-surface), inset 0 0 0 8.5px var(--orange); transform: rotate(-12deg); }
.o-stamp span { font: 800 13px/1 var(--slab); letter-spacing: .1em; text-transform: uppercase; color: var(--o-deep); }
@media (min-width: 560px) { .msg { font-size: 15px; } .o-desk { padding: 22px; } .trays { gap: 14px; } .o-stamp { width: 86px; height: 86px; right: -12px; top: -22px; } .o-stamp span { font-size: 15px; } }
.num, .pk-hours, .oo-prices dt { font-family: var(--slab); font-weight: 700; }

/* Services: four labelled trays of her own words, grouped by space. */
.o-svc { padding: clamp(56px, 8vw, 104px) 0; background: var(--f-surface); box-shadow: 0 -1px 0 var(--f-line), 0 1px 0 var(--f-line); }
.svc { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 32px 48px; }
@media (min-width: 760px) { .svc { grid-template-columns: 1fr 1fr; } }
.svc li { display: grid; grid-template-columns: 56px 1fr; column-gap: 18px; align-items: start; }
.svc-ico { grid-row: span 2; width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.svc h3 { margin: 4px 0 6px; font: 700 21px/1.2 var(--slab); }
.svc p { margin: 0; color: var(--f-muted); font-size: 17px; max-width: 46ch; }

/* Prices: the hours as squares of time in the month. */
.o-prices { padding: clamp(56px, 8vw, 104px) 0; }
.pk-row { display: grid; gap: 34px; }
@media (min-width: 900px) { .pk-row { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.pk { padding-top: 18px; box-shadow: 0 -3px 0 var(--f-text); }
.pk-name { margin: 0; font: 700 22px/1.2 var(--slab); }
.pk-price { margin: 10px 0 0; color: var(--f-muted); font-size: 16px; }
.pk-price b { margin-right: 4px; color: var(--f-text); font: 800 clamp(46px, 6vw, 60px)/1 var(--slab); letter-spacing: -.02em; }
.pk-hours { margin: 8px 0 12px; font-weight: 700; }
.hours { display: grid; grid-template-columns: repeat(10, 16px); gap: 5px; margin: 0; }
.hours i { position: relative; width: 16px; height: 16px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--f-line); }
.hours i::after { content: ""; position: absolute; inset: 0; border-radius: 3px; background: var(--f-text); transform: scale(0); }
.h5 i:nth-child(-n+5)::after, .h10 i:nth-child(-n+10)::after, .h20 i::after { transform: none; }
.pk-for { margin: 16px 0 0; color: var(--f-muted); font-size: 15.5px; max-width: 34ch; }
.hours-key { display: flex; align-items: center; gap: 10px; margin: 26px 0 0; color: var(--f-muted); font-size: 15px; }
.hk-on { width: 14px; height: 14px; border-radius: 3px; background: var(--f-text); flex: none; }
.oneoff { display: grid; gap: 34px; }
@media (min-width: 760px) { .oneoff { grid-template-columns: 1fr 1.4fr; gap: 48px; } }
.oo { padding-top: 18px; box-shadow: 0 -3px 0 var(--f-text); }
.oo-name { margin: 0; font: 700 22px/1.2 var(--slab); }
.oo-prices { display: flex; flex-wrap: wrap; gap: 8px 36px; margin: 12px 0 0; }
.oo-prices dt { font-weight: 700; color: var(--f-muted); font-size: 15px; }
.oo-prices dd { margin: 2px 0 0; font: 800 clamp(40px, 5vw, 52px)/1 var(--slab); letter-spacing: -.02em; }
.oo-quote { margin: 16px 0 0; color: var(--f-muted); max-width: 48ch; }

/* Do I need a VA? */
.o-va { padding: clamp(56px, 8vw, 104px) 0; background: var(--f-surface); box-shadow: 0 -1px 0 var(--f-line); }
.o-va-in { display: grid; gap: 36px; align-items: center; }
@media (min-width: 960px) { .o-va-in { grid-template-columns: 1fr 1.1fr; gap: 56px; } }
.o-va-big { margin: 22px 0 0; font: 700 clamp(26px, 3.6vw, 40px)/1.2 var(--slab); max-width: 22ch; }
.o-va-q { margin: 18px 0 0; color: var(--f-muted); max-width: 50ch; }
.o-va-pic { margin: 0; }
.o-va-img { width: 100%; border-radius: 12px; mix-blend-mode: multiply; }
.o-va-pic figcaption { margin-top: 10px; color: var(--f-muted); font-size: 14px; }
@supports (color: light-dark(#000, #fff)) {
  html[data-theme="dark"] .o-va-img { mix-blend-mode: normal; transform: rotate(-1deg); box-shadow: 0 30px 50px -30px rgb(0 0 0 / .7); }
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .o-va-img { mix-blend-mode: normal; transform: rotate(-1deg); box-shadow: 0 30px 50px -30px rgb(0 0 0 / .7); }
}

/* Insurance, in her words. */
.o-cover { padding: clamp(44px, 6vw, 72px) 0; }
.o-cover-in { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; }
.o-shield { width: 52px; height: 52px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.o-cover-q { margin: 10px 0 0; font: 600 clamp(19px, 2.4vw, 24px)/1.4 var(--read); max-width: 52ch; }

/* Booking: a real sequence, numbered like planner tabs. */
.o-book { padding: clamp(56px, 8vw, 104px) 0; background: var(--f-surface); box-shadow: 0 -1px 0 var(--f-line); }
.o-steps { list-style: none; counter-reset: s; margin: 32px 0 34px; padding: 0; display: grid; gap: 24px; }
@media (min-width: 820px) { .o-steps { grid-template-columns: repeat(3, 1fr); gap: 36px; } }
.o-steps li { counter-increment: s; display: grid; gap: 6px; padding-top: 14px; box-shadow: 0 -3px 0 var(--f-text); }
.o-steps li::before { content: counter(s); font: 800 40px/1 var(--slab); }
.o-steps b { font: 700 20px/1.25 var(--slab); }
.o-steps span { color: var(--f-muted); }

/* Arrival: the promise rises, the trays fill (organise.js sorts them). */
@media (prefers-reduced-motion: no-preference) {
  html.lt-ready .o-brand, html.lt-ready .o-hero h1, html.lt-ready .o-desc, html.lt-ready .o-lede, html.lt-ready .o-actions { animation: o-rise 520ms cubic-bezier(.2, .8, .2, 1) backwards; }
  html.lt-ready .o-hero h1 { animation-delay: 60ms; } html.lt-ready .o-desc { animation-delay: 120ms; } html.lt-ready .o-lede { animation-delay: 170ms; } html.lt-ready .o-actions { animation-delay: 220ms; }
  .o-desk.is-sorted .o-stamp { animation: o-stamp 460ms cubic-bezier(.2, .8, .2, 1); }
  .pk.lt-arrived .hours i::after { transition: none; animation: o-fill 260ms cubic-bezier(.2, .8, .2, 1) backwards; }
  .pk.lt-arrived .hours i:nth-child(1)::after { animation-delay: 120ms; } .pk.lt-arrived .hours i:nth-child(2)::after { animation-delay: 150ms; }
  .pk.lt-arrived .hours i:nth-child(3)::after { animation-delay: 180ms; } .pk.lt-arrived .hours i:nth-child(4)::after { animation-delay: 210ms; }
  .pk.lt-arrived .hours i:nth-child(5)::after { animation-delay: 240ms; } .pk.lt-arrived .hours i:nth-child(6)::after { animation-delay: 270ms; }
  .pk.lt-arrived .hours i:nth-child(7)::after { animation-delay: 300ms; } .pk.lt-arrived .hours i:nth-child(8)::after { animation-delay: 330ms; }
  .pk.lt-arrived .hours i:nth-child(9)::after { animation-delay: 360ms; } .pk.lt-arrived .hours i:nth-child(10)::after { animation-delay: 390ms; }
  .pk.lt-arrived .hours i:nth-child(n+11)::after { animation-delay: 430ms; }
}
@keyframes o-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes o-stamp { 45% { transform: rotate(-4deg) scale(1.18); } }
@keyframes o-fill { from { transform: scale(0); } }