/*
 * Organise: The Virtual Organiser. The seal pressed in her own orange: the
 * whole ground is the ink. Paper slips carry the words; sumi ink sets the
 * type. Motion character: things are sorted and squared up.
 */
:root {
  color-scheme: light dark;
  --ground: light-dark(#ed802b, #2a1407);
  --text: light-dark(#1e120a, #fce3cc);
  --muted: light-dark(#3d2412, #e2b48c);
  --paper: light-dark(#fff7ef, #3b1f0e);
  --paper-text: light-dark(#1e120a, #fce3cc);
  --paper-muted: light-dark(#6b3e1c, #e2b48c);
  --paper-line: light-dark(#ecd9c6, #57331b);
  --hour: light-dark(#ed802b, #ed802b);
  --hour-edge: light-dark(#1e120a, #f6a35d);
  --focus: light-dark(#1e120a, #f6a35d);
  --seal-line: var(--text);
  --note-bg: var(--paper);
  --note-text: var(--paper-text);
  --hover-wash: light-dark(rgb(30 18 10 / .09), rgb(252 227 204 / .08));
  --select-bg: light-dark(#1e120a, #ed802b);
  --select-text: light-dark(#fff7ef, #1e120a);
  --scroll-thumb: light-dark(#a8541a, #6b3a19);
  --button-bg: light-dark(#1e120a, #ed802b);
  --button-text: light-dark(#fff7ef, #1e120a);

  --display: "Bitter", "Rockwell", "Roboto Slab", "Georgia", serif;
  --body: "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --max: 84rem;
  --shadow: 0 1px 2px rgb(30 18 10 / .16), 0 14px 28px -16px rgb(30 18 10 / .5);
}

body {
  background: var(--ground); color: var(--text);
  font-family: var(--body); font-size: 1.0625rem; line-height: 1.6;
}
/* Her own seal reads in reverse on her orange: paper waves on ink. */
.top .seal--organise, .hero .seal--organise, .foot .seal--organise { --seal-ink: light-dark(#fff7ef, #ed802b); --seal-wash: .35; }
.top .seal--hub .seal-arc--organise { fill: light-dark(#fff7ef, #ed802b); }

h1, h2, h3 { font-family: var(--display); }
h2 { font-weight: 800; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem); line-height: 1.04; letter-spacing: -.02em; }

/* ---- header ---- */
.top {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .75rem;
  padding: .7rem var(--gutter); background: var(--ground);
}
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; margin-right: auto; min-width: 0; }
.brand-seal { width: 2.75rem; flex: none; transition: transform .35s var(--ease-press); }
.brand:hover .brand-seal { transform: rotate(-12deg); }
.brand-name { font-family: var(--display); font-weight: 800; font-size: clamp(1rem, .9rem + .5vw, 1.25rem); line-height: 1.1; }
.top-nav { display: none; gap: 1.5rem; }
.top-nav a { text-decoration: none; font-weight: 600; padding: .5rem 0; background: linear-gradient(currentColor 0 0) 0 100% / 0 2px no-repeat; transition: background-size .25s var(--ease-out); }
.top-nav a:hover { background-size: 100% 2px; }
.top-actions { display: flex; align-items: center; gap: .25rem; }
.top-home { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; font-weight: 600; font-size: .9375rem; padding: .35rem .55rem .35rem .35rem; border-radius: 999px; transition: background-color .15s ease-out; min-height: 2.75rem; }
.top-home:hover { background: var(--hover-wash); }
.top-home-seal { width: 2rem; flex: none; transition: transform .35s var(--ease-press); }
.top-home:hover .top-home-seal { transform: rotate(-14deg); }
.top-call {
  display: none; padding: .6rem 1rem; border-radius: .5rem; text-decoration: none; font-weight: 700; font-size: .9375rem;
  background: var(--button-bg); color: var(--button-text); transition: transform .15s var(--ease-out);
}
.top-call:hover { transform: translateY(-1px); }
.top-call:active { transform: scale(.97); }
@media (max-width: 479px) { .top-home-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
@media (min-width: 640px) { .top-call { display: inline-block; } }
@media (min-width: 1040px) { .top-nav { display: flex; margin-right: 1rem; } }

/* ---- hero: chaos sorted into a calm stack, then stamped ---- */
.hero {
  max-width: var(--max); margin: 0 auto; padding: clamp(1.5rem, 4vw, 3.5rem) var(--gutter) clamp(2rem, 5vw, 4rem);
  display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.hero-words { display: grid; gap: 1.1rem; justify-items: start; }
h1 { font-weight: 800; font-size: clamp(2.75rem, 1.4rem + 6vw, 6.25rem); line-height: .95; letter-spacing: -.03em; max-width: 9.5ch; }
.descriptor { font-family: var(--display); font-weight: 700; font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); line-height: 1.25; }
.lede { max-width: 46ch; font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: .35rem; }
.button {
  display: inline-flex; align-items: center; padding: .95rem 1.4rem; border-radius: .6rem;
  background: var(--button-bg); color: var(--button-text); font-weight: 700; text-decoration: none;
  box-shadow: var(--shadow); transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0) scale(.98); }
.text-link { display: inline-block; font-weight: 700; padding: .7rem 0; }

.hero-desk { position: relative; width: min(100%, 30rem); justify-self: center; padding-top: 3.5rem; }
.desk-seal { position: absolute; z-index: 2; right: -.5rem; top: -1rem; width: clamp(8.5rem, 30vw, 13rem); transform: rotate(-9deg); }
.desk-seal::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #fffaf4; box-shadow: var(--shadow); }
.desk-seal .seal { position: relative; }
/* on the stack, her seal shows as she made it: orange waves, black LT, white paper */
.hero .desk-seal .seal--organise { --seal-ink: #ed802b; --seal-wash: .18; --seal-line: #1e120a; }
.slips { display: grid; gap: .6rem; }
.slip {
  display: flex; align-items: center; gap: .85rem; padding: 1rem 1.1rem; border-radius: .4rem;
  background: var(--paper); color: var(--paper-text); font-family: var(--display); font-weight: 700; font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem);
  box-shadow: var(--shadow);
}
.tick { width: 1.15rem; height: 1.15rem; flex: none; border-radius: .2rem; background: var(--hour); box-shadow: inset 0 0 0 1.5px var(--hour-edge); position: relative; }
.tick::after { content: ""; position: absolute; left: .34rem; top: .14rem; width: .32rem; height: .6rem; border: solid var(--hour-edge); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.slip--2 { margin-left: 1.25rem; } .slip--4 { margin-left: 1.25rem; }
@media (min-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); min-height: calc(100svh - 4.5rem); }
}

/* ---- quick jumps ---- */
.quick { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.quick a { padding: .7rem 1rem; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .9375rem; box-shadow: inset 0 0 0 1.5px var(--text); transition: background-color .15s ease-out, color .15s ease-out; }
.quick a:hover { background: var(--text); color: var(--ground); }

/* ---- do I need a VA? ---- */
.need {
  max-width: var(--max); margin: 0 auto; padding: clamp(3rem, 7vw, 6rem) var(--gutter);
  display: grid; gap: clamp(1.5rem, 4vw, 4rem); align-items: start;
}
.need-head { display: grid; gap: 1.25rem; }
.need-big { font-family: var(--display); font-weight: 700; font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2.125rem); line-height: 1.25; max-width: 22ch; }
.note {
  background: var(--paper); color: var(--paper-text); padding: clamp(1.5rem, 4vw, 2.75rem); border-radius: .5rem;
  display: grid; gap: 1rem; box-shadow: var(--shadow); max-width: 44rem; rotate: .4deg;
}
.insured { display: flex; gap: 1rem; align-items: center; padding-top: 1rem; border-top: 1px solid var(--paper-line); font-weight: 600; }
.insured-mark { width: 3.5rem; flex: none; rotate: -10deg; }
.insured-mark .seal { --seal-line: var(--paper-text); }
.note-sign { font-size: .9375rem; color: var(--paper-muted); }
@media (min-width: 960px) { .need { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }

/* ---- services ---- */
.services {
  max-width: var(--max); margin: 0 auto; padding: clamp(3rem, 7vw, 6rem) var(--gutter);
  display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: start;
}
.services-head { display: grid; gap: 1.5rem; }
.services-picture { display: grid; gap: .5rem; }
.services-picture img { border-radius: .5rem; box-shadow: var(--shadow); }
.services-picture figcaption { font-size: .875rem; color: var(--muted); }
.ledger { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
.ledger li { display: grid; gap: .4rem; padding-left: 2rem; position: relative; }
.ledger li::before { content: ""; position: absolute; left: 0; top: .35rem; width: 1.15rem; height: 1.15rem; border-radius: .2rem; background: var(--text); }
.ledger h3 { font-weight: 800; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); line-height: 1.15; }
.ledger p { max-width: 52ch; }
@media (min-width: 960px) { .services { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---- packages: Laura's own price list, on one sheet of paper ---- */
.packages { max-width: var(--max); margin: 0 auto; padding: clamp(3rem, 7vw, 6rem) var(--gutter); display: grid; gap: 1.75rem; }
.packages-head { display: grid; gap: .75rem; }
.packages-head p { max-width: 48ch; }
.sheet {
  background: var(--paper); color: var(--paper-text); border-radius: .6rem; box-shadow: var(--shadow);
  padding: clamp(1.5rem, 4vw, 3.25rem); display: grid; gap: clamp(1.5rem, 3vw, 2.25rem);
}
.sheet-title { font-family: var(--display); font-weight: 700; font-size: 1.0625rem; color: var(--paper-muted); }
.plans { display: grid; gap: 2rem; }
.plan, .oneoff { display: grid; gap: .45rem; align-content: start; }
.plan-name { font-family: var(--display); font-weight: 800; font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); line-height: 1.1; }
.plan-price { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.amount { font-family: var(--display); font-weight: 800; font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); line-height: 1; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.02em; }
.per { font-weight: 600; color: var(--paper-muted); }
.plan-hours { font-size: 1rem; }
.plan-text { max-width: 40ch; }
.hours { display: grid; grid-template-columns: repeat(10, 1rem); gap: .3rem; margin: .2rem 0 .35rem; }
.hours span { width: 1rem; height: 1rem; border-radius: .18rem; background: var(--hour); box-shadow: inset 0 0 0 1.5px var(--hour-edge); }
.oneoffs { display: grid; gap: 2rem; padding-top: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid var(--paper-line); }
.detox { display: grid; gap: .5rem; margin: .35rem 0 0; }
.detox div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; max-width: 20rem; padding-bottom: .4rem; border-bottom: 1px dashed var(--paper-line); }
.detox dt { font-weight: 600; }
.detox dd { font-family: var(--display); font-weight: 800; font-size: clamp(1.75rem, 1.5rem + 1vw, 2.375rem); font-variant-numeric: lining-nums tabular-nums; }
.free-call { display: grid; gap: .6rem; justify-items: start; padding-top: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid var(--paper-line); }
.sheet .button { margin-top: .4rem; }
@media (min-width: 760px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } .oneoffs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- booking ---- */
.booking { max-width: var(--max); margin: 0 auto; padding: clamp(3rem, 7vw, 6rem) var(--gutter); display: grid; gap: 2rem; }
.steps { display: grid; gap: 2rem; }
.steps li { display: grid; gap: .5rem; align-content: start; }
.step-no { font-family: var(--display); font-weight: 800; font-size: clamp(3rem, 2.4rem + 2vw, 4.5rem); line-height: .9; }
.steps h3 { font-weight: 800; font-size: 1.5rem; line-height: 1.15; }
.steps p { max-width: 34ch; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- the family, on paper so every ink reads ---- */
.family {
  max-width: var(--max); margin: 0 auto clamp(2rem, 5vw, 4rem); padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--paper); color: var(--paper-text); border-radius: .6rem; box-shadow: var(--shadow);
  display: grid; gap: 1rem; width: calc(100% - 2 * var(--gutter));
}
.family h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); }
.family .seal { --seal-line: var(--paper-text); }
.family .dock { margin-top: .75rem; }
.family { --muted: var(--paper-muted); }

/* ---- footer ---- */
.foot { max-width: var(--max); margin: 0 auto; padding: 2rem var(--gutter) 3rem; display: grid; gap: 1.25rem; align-items: center; }
.foot-brand { display: flex; gap: 1rem; align-items: center; }
.foot-seal { width: 3.5rem; flex: none; }
.foot-links { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.foot-links a { display: inline-block; padding: .7rem 0; font-weight: 600; }
.foot-note { font-size: .9375rem; color: var(--muted); max-width: 64ch; }
@media (min-width: 900px) { .foot { grid-template-columns: auto 1fr; } .foot-links { justify-content: flex-end; } .foot-note { grid-column: 1 / -1; } }

/* ---- the arrival: five slips land in a muddle, square up, and her seal stamps them done ---- */
@media (prefers-reduced-motion: no-preference) {
  .lt-ready .hero-words > * { animation: rise .65s var(--ease-out) both; }
  .lt-ready .hero-words > :nth-child(2) { animation-delay: .06s; }
  .lt-ready .hero-words > :nth-child(3) { animation-delay: .14s; }
  .lt-ready .hero-words > :nth-child(4) { animation-delay: .2s; }
  .lt-ready .hero-words > :nth-child(5) { animation-delay: .26s; }
  .lt-ready .slip { animation: square-up .95s cubic-bezier(.25, .9, .25, 1) both; animation-delay: calc(.2s + var(--n) * 90ms); }
  .lt-ready .desk-seal .seal { animation: stamp-down .6s var(--ease-press) both; animation-delay: 1.05s; }
  .plan.lt-arrived .hours span { animation: hour-in .32s var(--ease-press) both; animation-delay: calc(.15s + var(--h, 0) * 28ms); }
}
@media (prefers-reduced-motion: reduce) {
  .lt-ready .hero { animation: fade .2s ease-out both; }
}
.slip--1 { --n: 0; --x: -2.5rem; --y: 1.5rem; --r: -9deg; }
.slip--2 { --n: 1; --x: 2rem; --y: -.75rem; --r: 7deg; }
.slip--3 { --n: 2; --x: -1.25rem; --y: 1rem; --r: 4deg; }
.slip--4 { --n: 3; --x: 2.75rem; --y: .5rem; --r: -6deg; }
.slip--5 { --n: 4; --x: -2rem; --y: -1.25rem; --r: 10deg; }
.hours span:nth-child(1) { --h: 0; } .hours span:nth-child(2) { --h: 1; } .hours span:nth-child(3) { --h: 2; } .hours span:nth-child(4) { --h: 3; }
.hours span:nth-child(5) { --h: 4; } .hours span:nth-child(6) { --h: 5; } .hours span:nth-child(7) { --h: 6; } .hours span:nth-child(8) { --h: 7; }
.hours span:nth-child(9) { --h: 8; } .hours span:nth-child(10) { --h: 9; } .hours span:nth-child(n+11) { --h: 10; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes square-up {
  0% { opacity: 0; transform: translate(var(--x), calc(var(--y) - 1.5rem)) rotate(calc(var(--r) * 1.6)); }
  35% { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)); }
  100% { opacity: 1; transform: none; }
}
@keyframes stamp-down {
  0% { opacity: 0; transform: translateY(-1.5rem) scale(1.25); }
  60% { opacity: 1; transform: scale(.95); }
  100% { opacity: 1; transform: none; }
}
@keyframes hour-in { from { transform: scale(.35); } }
@keyframes fade { from { opacity: 0; } }
[data-arrive] { --arrive-distance: 1.25rem; --arrive-duration: 650ms; }