/* ==========================================================================
   RAE'S RESUMES — the home page.
   Loaded by index.html only, after style.css, whose tokens it uses.

   Two surfaces, and they never mix (Rae, 2026-10-01: "differentiate between
   foreground areas and background areas so the interactive background
   doesn't get in the way of reading anything"):

     paper   everything to be read: headings, copy, the white instrument
             cards, the menu card
     silk    the stages things are displayed on: black satin lit by a light
             that follows the pointer (js/silk.js). Nothing to be read is
             ever set on it.

   The brief behind the look, in her words: "buying a lamborgini, getting a
   suit tailored, or checking out a new product from the apple store. think
   luxury." Still only ink, paper and bronze, in the site's two faces.
   ========================================================================== */

:root {
  /* Bronze dark enough to set small type in. --bronze on --paper measures
     about 2.8:1, which is fine for a numeral and fails for a label; this is
     5.4:1. */
  --bronze-ink: #7d5f33;
  --champagne: #ecdcbc;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --stage-radius: 34px;
}

/* Lets the miniatures' accent glide from one colour to the next instead of
   snapping. Browsers that do not know @property simply snap, as before. */
@property --accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #141414;
}

/* ==========================================================================
   STAGES: STILL AND LIVE
   Rae, 2026-10-02: "only enable the interactive background on the two black
   blocks, the one in the middle and the one at the bottom" -- the
   Complimentary Services band and the closing quote.

   So there are two materials. A STILL stage (.stage-dark) is the panel the
   services and the four tools stand on: black silk under a soft light that
   does not move. A LIVE stage ([data-silk], js/silk.js) is a full-width
   black block whose cloth is lit by a light that follows the pointer.
   Without WebGL a live stage is simply its own dark background.
   ========================================================================== */
.stage-dark {
  position: relative;
  isolation: isolate;
  border-radius: var(--stage-radius);
  background:
    radial-gradient(42rem 30rem at 70% 18%, rgba(236, 220, 188, 0.16), rgba(236, 220, 188, 0) 60%),
    linear-gradient(140deg, #1d1a17 0%, #0e0d0c 55%, #141210 100%);
  background-color: #141210;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 30px 70px rgba(20, 20, 20, 0.16);
}
.stage-dark > :not(.silk-canvas) { position: relative; z-index: 1; }
/* A faint rim of light along the top edge, as on a polished plinth. */
.stage-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 18%);
}

[data-silk] {
  position: relative;
  isolation: isolate;
}
/* Holds a lens's feathered edge inside its block. Not on the four tool
   frames, which carry no lens: their instruments sit on cards. */
.showroom, .free-band { overflow: hidden; }
.silk-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
}
[data-silk] > :not(.silk-canvas) { position: relative; z-index: 1; }
/* The footer is live too: Rae, 2026-10-02, "enable the interactive
   background on the bottom panel, underneath the quote ... be sure to
   preserve the readability of the words at the bottom." It is not a stage
   of its own. The closing quote's cloth runs on beneath it (data-silk-under
   on .home-close; js/silk.js adds .silk-under only while it is drawing),
   so quote and footer are one surface with no seam. Its words sit on one
   lens, the same softness as every other: separate lenses per column
   read as boxes with strips of light between them. */
.footer.silk-under { position: relative; background: transparent; }
.footer.silk-under .container { position: relative; isolation: isolate; }
.footer.silk-under .container::before {
  content: "";
  position: absolute;
  /* The bottom edge stops at the footer's own: 2rem is its bottom padding.
     Any further and the page scrolled 16px past the footer, onto ivory. */
  inset: -3rem -4.5rem -2rem;
  z-index: -1;
  border-radius: 7rem;
  background: var(--lens-ink);
  filter: blur(var(--lens-blur));
  pointer-events: none;
}
/* Half-strength ivory was fine on flat ink; over moving light it measured
   just under 4.5:1. */
.footer.silk-under .footer-bottom { color: rgba(248, 243, 232, 0.62); }

/* ---------- The lens ----------
   Rae: "ensure that this feature doesn't get in the way of reading any text
   on the blocks, perhaps by creating a faded lens behind the text". A pool
   of ink under the words, feathered so it has no edge. The light still
   crosses the whole block; behind the words it is dimmed to almost nothing.
   tests/home-e2e.mjs parks the light directly behind the text and measures
   what is left, off a screenshot. */
/* One softness for every lens on the page (Rae, 2026-10-02: "normalize the
   softness of the light/borders"). The shapes differ with what they sit
   behind; the ink and the feather do not. */
:root { --lens-ink: rgba(12, 11, 10, 0.93); --lens-blur: 44px; }
.lens { position: relative; isolation: isolate; }
.lens::before {
  content: "";
  position: absolute;
  inset: -3rem -6rem;
  z-index: -1;
  border-radius: 50%;
  background: var(--lens-ink);
  filter: blur(var(--lens-blur));
  pointer-events: none;
}

/* ==========================================================================
   HERO
   The headline on paper; under it, the showroom.
   ========================================================================== */
.home-hero { padding-block: clamp(1.5rem, 3vw, 2.25rem) clamp(3.5rem, 7vw, 5.5rem); }

/* One centred column on the showroom's axis: headline, its subtitle, the
   two actions, the reviews. Rae, 2026-10-02: the subtitle sat in a column
   of its own beside the headline and "looks out of place". */
.hero-top { margin-bottom: clamp(1.75rem, 3.5vw, 2.6rem); text-align: center; }
.hero-copy { display: flex; flex-direction: column; align-items: center; }
.hero-top .display {
  font-size: clamp(2.5rem, 2.6vw + 1.3rem, 4rem);
  line-height: 1.06;
  max-width: 11em;
}
.hero-top .eyebrow { margin-bottom: 0.9rem; }
.hero-copy .lede {
  max-width: 60ch;
  margin: 1.15rem auto 0;
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--muted);
  text-wrap: balance;
}
.hero-top .hero-ctas { margin-top: 1.6rem; justify-content: center; }
.hero-copy .home-proof { margin-top: 1.15rem; justify-content: center; font-size: 0.86rem; gap: 0.3rem 0.65rem; }
/* The ghost button is transparent everywhere else; here it sits on paper and
   needs the paper behind it to read as a button. */
.home-hero .btn-ghost { background: var(--paper); }

.home-proof {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.8rem;
  color: var(--muted);
  transition: color 0.2s ease;
}
.home-proof .proof-go {
  font-weight: 600;
  color: var(--bronze-ink);
  border-bottom: 1px solid var(--bronze-soft);
}
.home-proof:hover { color: var(--ink); }
.home-proof .arrow { display: inline-block; transition: transform 0.2s ease; }
.home-proof:hover .arrow { transform: translateX(3px); }

/* ==========================================================================
   THE SHOWROOM
   A stage of silk the width of the page, and two dark panes on it: the
   display on the left, the services on the right. The panes are the
   foreground and they are OPAQUE. Rae, 2026-10-02: "ensure the foreground
   of the premium services is unaffected by the spotlight." The light moves
   on the frame around them and behind the heading's lens, never through a
   pane. (They were smoked glass that let the light through, until then.)
   ========================================================================== */
.showroom-head {
  grid-column: 1 / -1;
  padding: clamp(1.5rem, 3.5vw, 2.6rem) 1rem clamp(0.6rem, 1.5vw, 1.1rem);
}
.showroom {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(0.9rem, 1.8vw, 1.4rem);
  padding: clamp(0.9rem, 2vw, 1.6rem);
  border-radius: 40px;
}

.glass {
  position: relative;
  border-radius: 24px;
  background: linear-gradient(180deg, #1e1c19, #0d0c0b);
  border: 1px solid rgba(236, 220, 188, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 22px 60px rgba(0, 0, 0, 0.35);
  color: #f3ede2;
}

/* For-pointer and for-touch versions of the same instruction. */
.for-touch { display: none; }
@media (hover: none) {
  .for-touch { display: inline; }
  .for-pointer { display: none; }
}

/* ---------- The services ---------- */
.svc-menu {
  display: flex;
  flex-direction: column;
  padding: 1.35rem 0.75rem 1rem;
}
.svc-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0 0.9rem 0.85rem;
  border-bottom: 1px solid rgba(176, 141, 87, 0.28);
}
.svc-head-note,
.svc-foot {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(236, 220, 188, 0.76);
}
.svc-foot {
  margin-top: auto;
  padding: 0.95rem 0.9rem 0.1rem;
  text-align: center;
  letter-spacing: 0.14em;
}

.svc-list { list-style: none; padding: 0.35rem 0 0.4rem; }
.svc { position: relative; border-radius: 14px; }
.svc + .svc::before {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  top: 0;
  border-top: 1px solid rgba(236, 220, 188, 0.09);
  transition: opacity 0.25s ease;
}
.svc.is-on::before,
.svc.is-on + .svc::before { opacity: 0; }

.svc-link {
  position: relative;
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 0.4rem;
  padding: 0.82rem 1rem 0.82rem 0.9rem;
  border-radius: 14px;
  color: #f3ede2;
  overflow: hidden;
  transition: background-color 0.35s ease;
}
.svc-link:focus-visible { outline: 2px solid var(--bronze); outline-offset: -2px; }
.svc-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--bronze);
}
.svc-name {
  font-family: var(--serif);
  font-size: clamp(1.32rem, 0.9vw + 0.95rem, 1.7rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.005em;
  transition: transform 0.45s var(--ease-out), color 0.3s ease;
}
/* The leader went with the white card; the column keeps its slot so the
   price lands in the same place on every row. */
.svc-leader { display: none; }
.svc-price {
  font-family: var(--serif);
  font-size: 1.2rem;
  white-space: nowrap;
  font-variant-numeric: lining-nums;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.3s ease, transform 0.45s var(--ease-out);
}
.svc-price small {
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-right: 0.15rem;
}
.svc-price::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.55rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  -webkit-text-fill-color: var(--bronze-soft);
  transition: transform 0.25s ease;
}

/* Pointed at: the row catches the light. A warm wash from the left, a bronze
   edge, a single glint across it, and the price in foil. */
.svc.is-on .svc-link {
  background: linear-gradient(90deg, rgba(176, 141, 87, 0.2), rgba(176, 141, 87, 0.05) 55%, rgba(176, 141, 87, 0) 85%);
  box-shadow: inset 2px 0 0 var(--bronze);
}
.svc.is-on .svc-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(255, 240, 210, 0) 35%, rgba(255, 240, 210, 0.12) 48%, rgba(255, 240, 210, 0) 62%);
  transform: translateX(-100%);
  animation: glint 1.1s var(--ease-out) forwards;
  pointer-events: none;
}
@keyframes glint { to { transform: translateX(100%); } }
.svc.is-on .svc-name { transform: translateX(6px); color: #fbf6ec; }
.svc.is-on .svc-price {
  opacity: 1;
  transform: none;
  color: transparent;
  background: linear-gradient(100deg, #b08d57 0%, #d6bd8c 30%, #f3e4bf 48%, #d6bd8c 64%, #a8844f 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: foil 3.6s ease-in-out infinite;
}
.svc.is-on .svc-price small { -webkit-text-fill-color: rgba(236, 220, 188, 0.7); }
.svc.is-on .svc-link:hover .svc-price::after { transform: translateX(3px); }
@keyframes foil {
  0%, 100% { background-position: 100% 0; }
  50% { background-position: 0% 0; }
}

/* ---------- The display ---------- */
.showcase {
  min-height: 27rem;
  overflow: hidden;
}

/* The plinth: a pool of light on a round stand, waiting. When a service is
   pointed at, its picture stands on it. */
.plinth {
  position: absolute;
  left: 50%;
  top: 0;
  width: 78%;
  height: 58%;
  transform: translateX(-50%);
  pointer-events: none;
}
.plinth-beam {
  position: absolute;
  left: 50%;
  top: -12%;
  width: 72%;
  height: 112%;
  transform: translateX(-50%);
  background: radial-gradient(50% 100% at 50% 0%, rgba(236, 220, 188, 0.2), rgba(236, 220, 188, 0.05) 55%, rgba(236, 220, 188, 0) 80%);
  animation: breathe 6s ease-in-out infinite;
}
.plinth-top {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 62%;
  height: 34px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(236, 220, 188, 0.3), rgba(236, 220, 188, 0.1) 62%, rgba(236, 220, 188, 0) 100%);
  box-shadow: 0 0 0 1px rgba(236, 220, 188, 0.14), 0 14px 30px rgba(0, 0, 0, 0.45);
}
@keyframes breathe {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

.svc-idle,
.svc-show {
  position: absolute;
  inset: 0;
  transition: opacity 0.4s ease;
}
.svc-idle {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 1.8rem 2rem;
  text-align: center;
}
.idle-line {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1vw + 1rem, 1.75rem);
  line-height: 1.25;
  color: #f3ede2;
}
.idle-hint {
  margin-top: 0.5rem;
  font-size: 0.84rem;
  line-height: 1.5;
  color: rgba(236, 220, 188, 0.76);
}
.showcase.is-showing .svc-idle { opacity: 0; }
.svc-show { opacity: 0; }
.showcase.is-showing .svc-show { opacity: 1; }

/* What a pointed-at service shows: its picture on the plinth, its name and
   price, and what it is. */
.svc-detail { display: none; }
.show-art {
  position: absolute;
  left: 50%;
  top: 7%;
  width: 8rem;
  height: 8.5rem;
  transform: translateX(-50%) scale(1.35);
  transform-origin: 50% 0;
}
.show-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 1.8rem 1.75rem;
  text-align: center;
  animation: show-in 0.45s 0.06s var(--ease-out) both;
}
@keyframes show-in { from { opacity: 0; transform: translateY(8px); } }
.show-name {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  font-family: var(--serif);
  font-size: clamp(1.45rem, 0.8vw + 1.05rem, 1.75rem);
  line-height: 1.15;
  color: #f8f3ea;
}
.show-price {
  font-size: 0.72em;
  color: transparent;
  background: linear-gradient(100deg, #b08d57 0%, #d6bd8c 30%, #f3e4bf 48%, #d6bd8c 64%, #a8844f 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: foil 3.6s ease-in-out infinite;
}
.show-price small {
  font-family: var(--sans);
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-right: 0.15rem;
  -webkit-text-fill-color: rgba(236, 220, 188, 0.7);
}
.svc-what {
  max-width: 42ch;
  margin: 0.5rem auto 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(243, 237, 226, 0.84);
}
.svc-terms {
  margin-top: 0.6rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze-soft);
}
/* The display's own button is for fingers. A pointer books from the row,
   and reaching the display from a row crosses the rows between, which would
   change what it shows on the way. */
.svc-cta { display: none; }
@media (hover: none) {
  .svc-show .svc-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #f8f3ea;
    border-bottom: 1px solid var(--bronze);
  }
}

/* ---------- The six pictures ----------
   Drawn in HTML and SVG, paper and bronze on the ink of the display, so
   they stay sharp at any density and cost nothing to download. Each one
   plays as it is put into the display. */
.svc-art {
  position: relative;
  width: 8rem;
  height: 8.5rem;
  border-radius: 6px;
  overflow: hidden;
}
.svc-art i, .svc-art b { display: block; }

/* paper, used by several */
.a-sheet {
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--paper);
  border-radius: 2px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5);
}

/* 01 Resume — the page writes itself, then two keywords are found. */
.art-resume .a-sheet {
  width: 84px;
  height: 110px;
  padding: 9px 8px;
  display: flex;
  flex-direction: column;
  transform: translate(-50%, -50%) rotate(-3deg);
}
.a-name { height: 6px; width: 54%; margin: 0 auto 3px; background: var(--ink); border-radius: 1px; }
.a-meta { height: 2px; width: 70%; margin: 0 auto; background: #bdb6aa; }
.art-resume .a-rule { height: 1px; background: var(--bronze); margin: 5px 0; }
.a-cols { display: grid; grid-template-columns: 0.55fr 1fr; gap: 6px; }
.a-rail, .a-main { display: flex; flex-direction: column; gap: 4px; }
.a-rail { border-right: 1px solid #ddd6c9; padding-right: 4px; }
.art-resume .a-cols i { height: 2.5px; border-radius: 1px; background: #cdc6b8; transform-origin: left center; }
.art-resume .a-main i:nth-child(3n) { width: 78%; }
.art-resume .a-main i:nth-child(3n + 2) { width: 90%; }
.art-resume .a-rail i:nth-child(2n) { width: 72%; }

.svc-show .art-resume .a-sheet { animation: a-rise 0.7s var(--ease-out) both; }
.svc-show .art-resume .a-cols i { animation: a-write 0.5s var(--ease-out) both; }
.svc-show .art-resume .a-key { animation: a-write 0.5s var(--ease-out) both, a-mark 0.5s 1.35s ease forwards; }
.art-resume .a-rail i:nth-child(1) { animation-delay: 0.25s; }
.art-resume .a-rail i:nth-child(2) { animation-delay: 0.3s; }
.art-resume .a-rail i:nth-child(3) { animation-delay: 0.35s; }
.art-resume .a-rail i:nth-child(4) { animation-delay: 0.4s; }
.art-resume .a-rail i:nth-child(5) { animation-delay: 0.45s; }
.art-resume .a-rail i:nth-child(6) { animation-delay: 0.5s; }
.art-resume .a-main i:nth-child(1) { animation-delay: 0.35s; }
.art-resume .a-main i:nth-child(2) { animation-delay: 0.45s; }
.art-resume .a-main i:nth-child(3) { animation-delay: 0.55s, 1.35s; }
.art-resume .a-main i:nth-child(4) { animation-delay: 0.65s; }
.art-resume .a-main i:nth-child(5) { animation-delay: 0.75s; }
.art-resume .a-main i:nth-child(6) { animation-delay: 0.85s, 1.5s; }
.art-resume .a-main i:nth-child(7) { animation-delay: 0.95s; }
.art-resume .a-main i:nth-child(8) { animation-delay: 1.05s; }

@keyframes a-rise {
  from { opacity: 0; transform: translate(-50%, -38%) rotate(-9deg); }
  to   { opacity: 1; transform: translate(-50%, -50%) rotate(-3deg); }
}
@keyframes a-write { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes a-mark {
  to { background: var(--bronze); box-shadow: 0 0 0 1.5px rgba(176, 141, 87, 0.35); }
}

/* 02 CV — three pages fan out: it runs long, and that is the point. */
.art-cv .a-sheet {
  width: 74px;
  height: 96px;
  padding: 8px 7px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.art-cv .a-sheet i { height: 2.5px; background: #cdc6b8; border-radius: 1px; }
.art-cv .a-sheet i:nth-child(3n) { width: 74%; }
.art-cv .a-sheet:nth-child(1) { background: #e4dfd5; }
.art-cv .a-sheet:nth-child(2) { background: #eeebe4; }
.art-cv .a-cv {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1;
  color: var(--ink);
  text-align: center;
}
.art-cv .a-rule { height: 1px; background: var(--bronze); margin: 2px 0 3px; }
.art-cv .a-sheet:nth-child(1) { --to: translate(-84%, -46%) rotate(-12deg); }
.art-cv .a-sheet:nth-child(2) { --to: translate(-57%, -52%) rotate(-4deg); }
.art-cv .a-top { --to: translate(-28%, -48%) rotate(7deg); }
.art-cv .a-sheet { transform: var(--to); }
.svc-show .art-cv .a-sheet { animation: a-fan 0.8s var(--ease-out) both; }
.svc-show .art-cv .a-sheet:nth-child(2) { animation-delay: 0.08s; }
.svc-show .art-cv .a-top { animation-delay: 0.16s; }
@keyframes a-fan {
  from { opacity: 0; transform: translate(-50%, -40%) rotate(0deg); }
  to   { opacity: 1; transform: var(--to); }
}

/* 03 Cover letter — a greeting, a few lines, then it is signed. */
.art-letter .a-sheet {
  width: 90px;
  height: 112px;
  padding: 11px 9px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transform: translate(-50%, -50%) rotate(2deg);
}
.art-letter .a-sheet i { height: 2.5px; background: #cdc6b8; border-radius: 1px; transform-origin: left center; }
.art-letter .a-sheet i:nth-child(4n) { width: 82%; }
.art-letter .a-dear { width: 46%; background: var(--ink) !important; margin-bottom: 3px; }
.a-sign { width: 58px; height: 21px; margin: 4px 0 0 auto; display: block; overflow: visible; }
.a-sign path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 190;
  stroke-dashoffset: 190;
}
.svc-show .art-letter .a-sheet { animation: a-rise-letter 0.7s var(--ease-out) both; }
.svc-show .art-letter .a-sheet i { animation: a-write 0.45s var(--ease-out) both; }
.art-letter .a-sheet i:nth-child(1) { animation-delay: 0.25s; }
.art-letter .a-sheet i:nth-child(2) { animation-delay: 0.4s; }
.art-letter .a-sheet i:nth-child(3) { animation-delay: 0.5s; }
.art-letter .a-sheet i:nth-child(4) { animation-delay: 0.6s; }
.art-letter .a-sheet i:nth-child(5) { animation-delay: 0.7s; }
.art-letter .a-sheet i:nth-child(6) { animation-delay: 0.8s; }
.svc-show .a-sign path { animation: a-sign 1.3s 1s ease-in-out forwards; }
@keyframes a-sign { to { stroke-dashoffset: 0; } }
@keyframes a-rise-letter {
  from { opacity: 0; transform: translate(-50%, -38%) rotate(8deg); }
  to   { opacity: 1; transform: translate(-50%, -50%) rotate(2deg); }
}

/* 04 LinkedIn — a profile, its headline typed in, then the connections. */
.a-net { position: absolute; inset: 0; width: 100%; height: 100%; }
.a-net path {
  fill: none;
  stroke: rgba(248, 243, 232, 0.32);
  stroke-width: 1;
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
}
.a-node {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.35);
  transform: scale(0);
}
.a-node.n1 { left: 15%; top: 16%; }
.a-node.n2 { left: 87%; top: 13%; }
.a-node.n3 { left: 91%; top: 68%; }
.a-node.n4 { left: 11%; top: 77%; }
.a-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80px;
  height: 72px;
  transform: translate(-50%, -50%);
  background: var(--paper);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5);
}
.a-banner { height: 20px; background: linear-gradient(120deg, #b08d57, #5e4626); }
.a-avatar {
  display: block;
  width: 22px;
  height: 22px;
  margin: -11px 0 4px 8px;
  border-radius: 50%;
  border: 2px solid var(--paper);
  background: radial-gradient(circle at 50% 36%, #8d8579 0 28%, #3a3631 29%);
}
.a-card i { height: 3px; margin: 0 8px 4px; background: #cdc6b8; border-radius: 1px; }
.a-card .a-who { width: 44%; height: 4px; background: var(--ink); }
.a-card .a-headline { width: 0; background: var(--bronze); }
.svc-show .a-card { animation: a-pop 0.6s var(--ease-out) both; }
.svc-show .a-headline { animation: a-type 0.9s 0.55s steps(9) forwards; }
.svc-show .a-net path { animation: a-draw 0.7s 1.35s ease forwards; }
.svc-show .a-node { animation: a-dot 0.4s var(--ease-out) forwards; }
.svc-show .a-node.n1 { animation-delay: 1.75s; }
.svc-show .a-node.n2 { animation-delay: 1.85s; }
.svc-show .a-node.n3 { animation-delay: 1.95s; }
.svc-show .a-node.n4 { animation-delay: 2.05s; }
@keyframes a-pop {
  from { opacity: 0; transform: translate(-50%, -42%) scale(0.92); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes a-type { to { width: calc(100% - 16px); } }
@keyframes a-draw { to { stroke-dashoffset: 0; } }
@keyframes a-dot { to { transform: scale(1); } }

/* 05 Interview prep — forty-five minutes on the dial, and a conversation. */
.a-dial {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 104px;
  height: 104px;
  transform: translate(-50%, -50%) rotate(-90deg);
}
.a-track { fill: none; stroke: rgba(248, 243, 232, 0.13); stroke-width: 5; }
.a-arc {
  fill: none;
  stroke: var(--bronze);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
}
.a-mins {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(248, 243, 232, 0.6);
}
.a-mins b {
  display: block;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  color: var(--paper);
}
.a-say {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--paper);
  opacity: 0;
}
.a-say::after {
  content: "";
  position: absolute;
  bottom: -4px;
  width: 8px;
  height: 8px;
  background: inherit;
  transform: rotate(45deg);
}
.a-q {
  right: 2px;
  top: 8px;
  width: 24px;
  height: 21px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink);
}
.a-q::after { left: 6px; }
.a-a {
  left: 0;
  bottom: 12px;
  width: 34px;
  height: 19px;
  padding: 5px 6px;
  gap: 3px;
  background: var(--bronze);
}
.a-a::after { right: 7px; }
.a-a i { width: 100%; height: 2px; background: rgba(20, 20, 20, 0.45); }
.a-a i + i { width: 70%; justify-self: start; }
.svc-show .a-arc { animation: a-arc 1.4s 0.2s var(--ease-out) forwards; }
.svc-show .a-q { animation: a-talk 3.2s 0.9s infinite; }
.svc-show .a-a { animation: a-talk 3.2s 2.5s infinite; }
@keyframes a-arc { to { stroke-dashoffset: 15; } }
@keyframes a-talk {
  0%, 100% { opacity: 0; transform: translateY(4px); }
  12%, 46% { opacity: 1; transform: none; }
  58% { opacity: 0; transform: translateY(-2px); }
}

/* 06 Digital portfolio — a window, and the work arranging itself in it. */
.a-window {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 118px;
  height: 90px;
  transform: translate(-50%, -50%);
  background: var(--paper);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5);
}
.a-bar { display: flex !important; gap: 3px; align-items: center; height: 11px; padding: 0 6px; background: #e4dfd5; }
.a-bar i { width: 4px; height: 4px; border-radius: 50%; background: #b9b2a6; }
.a-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  padding: 5px;
  height: calc(100% - 11px);
}
.a-grid > span { border-radius: 3px; background: #ddd6c9; transform: scale(0.6); opacity: 0; position: relative; overflow: hidden; }
.a-grid .t1 { grid-column: span 2; background: #2b2b2b; }
.a-sun { position: absolute; right: 9px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--bronze); }
.a-hill {
  position: absolute;
  left: -6px;
  bottom: -14px;
  width: 50px;
  height: 28px;
  background: #5c5650;
  border-radius: 50% 50% 0 0;
}
.a-grid .t2 { display: flex !important; align-items: flex-end; gap: 3px; padding: 4px; background: #efe9dd; }
.a-grid .t2 i { flex: 1; background: var(--bronze); border-radius: 1px; }
.a-grid .t2 i:nth-child(1) { height: 40%; }
.a-grid .t2 i:nth-child(2) { height: 75%; }
.a-grid .t2 i:nth-child(3) { height: 55%; }
.a-grid .t2 i:nth-child(4) { height: 90%; }
.a-grid .t3 { background: #c9b393; }
.a-grid .t4 { background: #2b2b2b; }
.a-grid .t5 { background: #d8d1c4; }
.svc-show .a-window { animation: a-pop 0.55s var(--ease-out) both; }
.svc-show .a-grid > span { animation: a-tile 0.5s var(--ease-out) forwards; }
.svc-show .a-grid .t1 { animation-delay: 0.35s; }
.svc-show .a-grid .t2 { animation-delay: 0.5s; }
.svc-show .a-grid .t3 { animation-delay: 0.62s; }
.svc-show .a-grid .t4 { animation-delay: 0.74s; }
.svc-show .a-grid .t5 { animation-delay: 0.86s; }
@keyframes a-tile { to { transform: none; opacity: 1; } }

/* ==========================================================================
   COMPLIMENTARY SERVICES
   ========================================================================== */
.free {
  position: relative;
  padding-block: clamp(4rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem);
}
.free::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(var(--container), calc(100% - 2.5rem));
  transform: translateX(-50%);
  border-top: 1px solid var(--line);
}

/* The heading the two panels share, so Premium and Complimentary are the
   same size by construction rather than by two numbers kept equal. */
.panel-head { text-align: center; }
.panel-head .eyebrow { color: var(--bronze); }
.panel-head h2 {
  font-size: clamp(2.5rem, 4.2vw + 1rem, 4.4rem);
  letter-spacing: -0.015em;
  color: #f8f3ea;
}
.free-head {
  max-width: 860px;
  margin: 0 auto;
}
.free-head .lede {
  max-width: 64ch;
  margin: 1.4rem auto 0;
  font-size: clamp(1.05rem, 0.45vw + 0.95rem, 1.22rem);
  line-height: 1.7;
}

.free-index {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2.2rem;
  border-block: 1px solid var(--line);
}
.free-index li + li { border-left: 1px solid var(--line); }
.free-index a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.85rem 1.4rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-soft);
  transition: color 0.2s ease, background-color 0.2s ease;
}
.free-index a span {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--bronze-ink);
}
.free-index a:hover { color: var(--ink); background: var(--white); }

/* The O*NET credit, under the four tools. */
.free-sources {
  max-width: 78ch;
  margin: clamp(1rem, 3vw, 2rem) auto 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
}
.free-sources a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- One tool: words on paper, the instrument on a plinth ---------- */
.tool {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3rem, 6vw, 5rem);
  scroll-margin-top: 90px;
}
.tool + .tool { border-top: 1px solid var(--line); }
.tool-flip { grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr); }
.tool-flip .tool-copy { order: 2; }
.tool-flip .tool-plinth { order: 1; }

.tool-num {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(4.4rem, 8vw, 7rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--bronze);
  margin-bottom: 1.1rem;
  letter-spacing: -0.03em;
}
.tool-copy h3 {
  font-size: clamp(1.9rem, 2.4vw + 0.6rem, 2.6rem);
  margin-bottom: 1rem;
}
.tool-copy p {
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.75;
  max-width: 46ch;
}
.tool-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 1.7rem;
}
.tool-link {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  border-bottom: 1px solid var(--bronze-soft);
  padding-bottom: 1px;
}
.tool-link .arrow { display: inline-block; transition: transform 0.2s ease; }
.tool-link:hover .arrow { transform: translateX(4px); }

/* The plinth, and the instrument on it. */
.tool-plinth { padding: clamp(0.9rem, 2.4vw, 2rem); }
.tool-stage {
  background: var(--white);
  border-radius: 22px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28), 0 34px 80px rgba(0, 0, 0, 0.45);
  padding: 1.1rem 1.3rem 1.3rem;
  container-type: inline-size;
}
/* ---------- 01 Layouts ---------- */
.stage-layouts { transition: --accent 0.6s ease; }
.desk {
  position: relative;
  height: 452px;
  border-radius: 14px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 58%, rgba(20, 20, 20, 0.07), rgba(20, 20, 20, 0) 70%),
    var(--paper);
  perspective: 1400px;
  overflow: hidden;
}
.desk-sheet {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateX(28px) rotate(1.5deg);
  transition: opacity 0.45s ease, transform 0.7s var(--ease-out), visibility 0s 0.45s;
}
.desk-sheet.is-leaving { transform: translateX(-28px) rotate(-1.5deg); }
.desk-sheet.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.45s ease, transform 0.7s var(--ease-out), visibility 0s;
}
.desk-sheet .mini {
  --mini-w: 300px;
  box-shadow: 0 2px 4px rgba(20, 20, 20, 0.06), 0 26px 56px rgba(20, 20, 20, 0.18);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.25s ease-out, border-color 0.2s ease;
}

.stage-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.3rem;
  margin-top: 1.1rem;
}
.swatches { display: flex; gap: 0.55rem; }
.sw {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 0 0 1px var(--line);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s ease;
}
.sw:hover { transform: scale(1.08); }
.sw[aria-checked="true"] {
  transform: scale(1.06);
  box-shadow: 0 0 0 2px var(--white), 0 0 0 3.5px var(--ink);
}
.stage-read { flex: 1; min-width: 14rem; font-size: 0.86rem; line-height: 1.5; color: var(--muted); }
.stage-read strong { color: var(--ink); font-weight: 600; }
.ats-ok { color: #2f4f3e; font-weight: 600; white-space: nowrap; }

/* ---------- 02 Job search ---------- */
.occ-search { position: relative; flex: 1 1 15rem; max-width: 22rem; }
.occ-search::before {
  content: "";
  position: absolute;
  left: 0.95rem;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -7px;
  border: 1.7px solid var(--muted);
  border-radius: 50%;
  pointer-events: none;
}
.occ-search::after {
  content: "";
  position: absolute;
  left: 1.62rem;
  top: 50%;
  width: 6px;
  height: 1.7px;
  margin-top: 3px;
  background: var(--muted);
  transform: rotate(45deg);
  pointer-events: none;
}
.occ-input {
  width: 100%;
  font: inherit;
  font-size: 0.93rem;
  padding: 0.6rem 1rem 0.6rem 2.3rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.occ-input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.16); }
.occ-list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  max-height: 270px;
  overflow-y: auto;
  list-style: none;
  padding: 0.3rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-lift);
}
.occ-list li { padding: 0.5rem 0.7rem; border-radius: 8px; font-size: 0.88rem; cursor: pointer; }
.occ-list li small { display: block; font-size: 0.74rem; color: var(--muted); }
.occ-list li:hover, .occ-list li.is-active { background: var(--paper-deep); }
.occ-list .occ-note { cursor: default; color: var(--muted); font-size: 0.82rem; }
.occ-list .occ-note:hover { background: none; }

.occ-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; min-height: 1.9rem; }
.occ-chips button, .q-examples button {
  padding: 0.32rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--white);
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.occ-chips button:hover, .q-examples button:hover { border-color: var(--bronze); color: var(--ink); }
.occ-chips button.is-gone { display: none; }
.occ-chips-done { font-size: 0.8rem; color: var(--muted); padding: 0.32rem 0; }

.constellation {
  position: relative;
  margin-top: 1rem;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 50%, rgba(176, 141, 87, 0.12), rgba(176, 141, 87, 0) 55%),
    var(--paper);
  overflow: hidden;
}
/* With JavaScript off this is a heading and a list, in flow. */
.con-nodes { padding: 1.2rem; }
.con-center { font-family: var(--serif); font-size: 1.2rem; }
.con-kicker {
  display: block;
  font-family: var(--sans);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze-ink);
}
.con-ring { list-style: none; display: grid; gap: 0.4rem; margin-top: 0.6rem; }
.con-ring button { font-size: 0.86rem; text-align: left; color: var(--ink-soft); }

/* Live: the same nodes, laid out as a small star map. */
.constellation.is-live { height: 330px; }
.constellation.is-live .con-nodes { position: absolute; inset: 0; padding: 0; }
.con-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.con-lines line {
  stroke: color-mix(in srgb, var(--ink) 22%, transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 4 5;
  animation: con-flow 1.6s linear infinite;
}
@keyframes con-flow { to { stroke-dashoffset: -18; } }
.constellation.is-live .con-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15rem;
  max-width: 46%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 1.25rem;
  line-height: 1.2;
  padding-top: 1.6rem;
  transition: opacity 0.35s ease;
}
.constellation.is-live .con-center::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 5px var(--paper), 0 0 0 6px var(--bronze), 0 0 26px 8px rgba(176, 141, 87, 0.35);
}
.constellation.is-live .con-ring { margin: 0; display: block; }
.constellation.is-live .con-ring li {
  position: absolute;
  width: 11.5rem;
  max-width: 34%;
  transform: translate(-50%, -50%);
  transition: opacity 0.4s ease;
}
.constellation.is-live .con-ring button {
  position: relative;
  display: block;
  width: 100%;
  padding: 1.25rem 0.4rem 0.3rem;
  text-align: center;
  font-size: 0.84rem;
  line-height: 1.3;
  color: var(--ink-soft);
  border-radius: 10px;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.constellation.is-live .con-ring button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.25rem;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--ink);
  transition: background-color 0.2s ease, transform 0.25s var(--ease-out);
}
.constellation.is-live .con-ring button::after {
  /* "add" -- a choice is being made, not only a direction taken */
  content: "+";
  position: absolute;
  left: calc(50% + 9px);
  top: -0.05rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--bronze-ink);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.constellation.is-live .con-ring button:hover { color: var(--ink); background: rgba(255, 255, 255, 0.7); }
.constellation.is-live .con-ring button:hover::before { background: var(--bronze); transform: scale(1.25); }
.constellation.is-live .con-ring button:hover::after { opacity: 1; }
.constellation.is-entering .con-ring li,
.constellation.is-entering .con-center { opacity: 0; }
.constellation.is-loading::after {
  content: "Reading the occupation list\2026";
  position: absolute;
  left: 50%;
  bottom: 0.8rem;
  transform: translateX(-50%);
  font-size: 0.74rem;
  color: var(--muted);
}
.con-empty {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  width: 80%;
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
}

/* The shortlist. */
.occ-picks { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.occ-picks-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.occ-picks-count { letter-spacing: 0.06em; color: var(--bronze-ink); }
.occ-picks-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.occ-picks-list:empty { display: none; }
.occ-picks-list li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  padding: 0.32rem 0.35rem 0.32rem 0.8rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.8rem;
  line-height: 1.3;
  animation: pick-in 0.4s var(--ease-out);
}
.occ-picks-list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.occ-picks-list button {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--paper);
  background: rgba(248, 243, 232, 0.16);
  font-size: 0.9rem;
  line-height: 1;
}
.occ-picks-list button:hover { background: rgba(248, 243, 232, 0.3); }
.occ-picks-empty { margin-top: 0.5rem; font-size: 0.8rem; color: var(--muted); }
.occ-picks-note { margin-top: 0.5rem; font-size: 0.8rem; color: var(--bronze-ink); }
@keyframes pick-in { from { opacity: 0; transform: translateY(6px) scale(0.96); } }

/* ---------- 03 Quantifier ---------- */
.q-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.q-line-wrap { position: relative; margin-top: 0.2rem; }
/* The textarea and the highlight layer under it must set text identically,
   or the marks drift off their words. Every property that affects wrapping
   is declared on both -- and on the read view, so switching between them
   does not make the line jump. */
.q-line, .q-proof, .q-read {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1vw + 0.9rem, 1.38rem);
  line-height: 1.85;
  letter-spacing: 0;
  padding: 1rem 0 0.5rem;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
}
.q-line {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  resize: none;
  overflow: hidden;
  caret-color: var(--bronze);
}
.q-line:focus { outline: none; border-bottom-color: var(--ink); }
.q-proof {
  position: absolute;
  inset: 0;
  color: transparent;
  pointer-events: none;
  border-bottom: 1px solid transparent;
}
/* The whole word, not a band under it. Rae, 2026-10-02: "highlight the
   whole word, as needed." The shadow pads it without moving a letter, which
   matters in the proof layer: its words must sit exactly on the textarea's. */
.q-proof mark, .q-read mark {
  color: inherit;
  background: rgba(176, 141, 87, 0.22);
  border-radius: 4px;
  box-shadow: 0 0 0 0.1em rgba(176, 141, 87, 0.22);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.q-proof mark { color: transparent; }

/* The read view: the same line, with each answer written in after the words
   it belongs to. Inline, so it reflows with the sentence and can never sit on
   top of anything. */
.q-read {
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  cursor: text;
}
.q-read:hover { border-bottom-color: var(--bronze-soft); }
.q-read:focus-visible { outline: 2px solid var(--bronze); outline-offset: 4px; }
.q-read ins {
  display: inline-block;
  margin: 0 0.2em 0 0.35em;
  padding: 0.12em 0.6em 0.16em;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 0.56em;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-decoration: none;
  vertical-align: 0.22em;
  animation: q-ink 0.4s var(--ease-out);
}
.q-read ins::before { content: "\2038\00a0"; color: var(--bronze-soft); }
.q-line-wrap.is-reading .q-line,
.q-line-wrap.is-reading .q-proof { display: none; }
@keyframes q-ink { from { opacity: 0; transform: translateY(3px); } }

.q-examples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.8rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.q-examples > span { margin-right: 0.2rem; }

.q-questions { list-style: none; margin-top: 1.1rem; display: grid; gap: 0.75rem; counter-reset: q; }
.q-questions > li {
  position: relative;
  padding: 0.95rem 1rem 1rem 3rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  counter-increment: q;
  animation: q-ink 0.45s var(--ease-out) both;
}
.q-questions > li::before {
  content: counter(q);
  position: absolute;
  left: 1rem;
  top: 1rem;
  width: 1.45rem;
  height: 1.45rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.72rem;
  font-weight: 700;
}
.q-questions > li.q-none::before, .q-questions > li.q-error::before { display: none; }
.q-questions > li.q-none, .q-questions > li.q-error { padding-left: 1rem; }
.q-ask { font-family: var(--serif); font-size: 1.05rem; line-height: 1.35; }
.q-ask q { quotes: none; font-style: italic; color: var(--bronze-ink); }
.q-help { font-size: 0.8rem; color: var(--muted); line-height: 1.5; margin-top: 0.3rem; }
.q-answer { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.7rem; margin-top: 0.65rem; }
.q-amount {
  font-family: var(--serif);
  font-size: 1.05rem;
  /* Wide enough for the engine's own example, e.g. complaints from 20 a quarter to 5. */
  width: 18rem;
  max-width: 100%;
  padding: 0.25rem 0.1rem;
  border: 0;
  border-bottom: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
}
.q-amount:focus { outline: none; border-bottom-color: var(--bronze); }
.q-amount::placeholder { color: #a9a39a; font-style: italic; }
.q-periods { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.q-periods button {
  padding: 0.22rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.74rem;
  color: var(--ink-soft);
  background: var(--white);
}
.q-periods button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.q-none, .q-error { color: var(--muted); font-size: 0.86rem; }

.q-brief {
  margin: 0;
  max-height: 23rem;
  overflow: auto;
  padding: 1.1rem 1.2rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--ink-soft);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- 04 ATS check ---------- */
.tool-wide { grid-template-columns: 1fr; gap: 2.2rem; }
/* Number, title, the paragraph under it, then the list: the order the
   other three tools read in. Rae, 2026-10-02: beside the title, the
   paragraph was "in an awkward location". */
.tool-wide .tool-copy { display: block; }
.tool-wide .tool-title h3 { margin-bottom: 1rem; }
.tool-wide .tool-copy p { max-width: 60ch; }

/* The real drop zone. */
.tray-drop {
  margin-top: 1.5rem;
  padding: 1.5rem 1.25rem;
  border: 1.5px dashed color-mix(in srgb, var(--ink) 24%, transparent);
  border-radius: 16px;
  background: var(--paper);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
.tray-drop:hover, .tray-drop.is-over { border-color: var(--bronze); background: #fdf8ee; }
.tray-drop.is-over { transform: scale(1.01); }
.tray-drop:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }
.tray-drop.has-file { cursor: default; border-style: solid; border-color: var(--bronze-soft); background: #fdf8ee; }
.tray-icon { width: 34px; height: 34px; margin: 0 auto 0.45rem; color: var(--bronze); }
.tray-title { font-family: var(--serif); font-size: 1.25rem; line-height: 1.3; }
.tray-name { font-style: italic; overflow-wrap: anywhere; }
.tray-help { margin-top: 0.3rem; font-size: 0.84rem; color: var(--muted); }
.tray-browse { text-decoration: underline; text-underline-offset: 3px; color: var(--ink-soft); }
.tray-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.8rem 1.3rem; margin-top: 1rem; }
.tray-clear { font-size: 0.86rem; font-weight: 600; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.tray-clear:hover { color: var(--ink); }
.tray-warn { margin-top: 0.5rem; font-size: 0.84rem; color: #8a3a22; }
.tray-or { margin-top: 0.9rem; text-align: center; font-size: 0.9rem; font-weight: 600; }
.tray-or a { border-bottom: 1px solid var(--bronze-soft); }

/* The pill that says a file is being carried, and the veil a dragged file
   brings up anywhere on the page. */
.tray-pill {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  max-width: min(32rem, calc(100vw - 2rem));
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.8rem;
  line-height: 1.35;
  box-shadow: var(--shadow-lift);
  animation: pill-in 0.5s var(--ease-out);
}
.tray-pill strong { font-weight: 600; color: #f1e2bd; overflow-wrap: anywhere; }
.tray-pill-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--bronze); animation: live 2.4s ease-out infinite; }
.tray-pill-x {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--paper);
  font-size: 1.1rem;
  line-height: 1;
  background: rgba(248, 243, 232, 0.1);
}
.tray-pill-x:hover { background: rgba(248, 243, 232, 0.22); }
@keyframes pill-in { from { opacity: 0; transform: translateY(14px); } }

.drop-veil {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(20, 20, 20, 0.72);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  color: var(--paper);
  pointer-events: none;
}
.drop-veil p {
  max-width: 34rem;
  padding: 2.6rem 3rem;
  border: 1.5px dashed rgba(248, 243, 232, 0.5);
  border-radius: 26px;
  text-align: center;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(248, 243, 232, 0.85);
}
.drop-veil span { display: block; font-family: var(--serif); font-size: clamp(2rem, 4vw, 2.8rem); color: var(--paper); margin-bottom: 0.6rem; }

/* ==========================================================================
   CLOSING
   ========================================================================== */
.home-close { padding-block: clamp(4.5rem, 9vw, 7.5rem) clamp(3rem, 5vw, 4rem); }
.close-copy { max-width: 820px; margin-inline: auto; }
.close-cta { text-align: center; margin-top: 2.4rem; }
/* The closing band and the footer are both ink; a hairline keeps them two
   things rather than one long dark slab. */
.home-close ~ .footer { border-top: 1px solid rgba(248, 243, 232, 0.1); }

/* ==========================================================================
   THE DARK BAND
   Rae, 2026-10-01, in two steps: "lean into the dark theme a little bit
   more", and then, having seen the whole section go dark, "tone down the
   dark mode. use it to accent the page, just more than before." So the ink
   is a band: the section's title card, full width, between the showroom and
   the tools, which stand on paper again with their silk plinths. Its words
   sit on solid ink, never on silk.
   ========================================================================== */
.free { padding-top: 0; }
.free::before { display: none; }
/* A panel like the showroom: same width (both fill the container), same
   corners, same material. */
.free-band {
  border-radius: 40px;
  color: #efe8db;
  padding: clamp(3rem, 6vw, 4.75rem) clamp(1.25rem, 4vw, 3rem);
  margin-bottom: clamp(0.5rem, 2vw, 1.5rem);
}
.free-band .lede { color: rgba(239, 232, 219, 0.74); }
.free-band .free-index { border-color: rgba(236, 220, 188, 0.16); }
.free-band .free-index li + li { border-left-color: rgba(236, 220, 188, 0.16); }
/* border-color also colours the pills the phone layout draws round these. */
.free-band .free-index a { color: rgba(239, 232, 219, 0.86); border-color: rgba(236, 220, 188, 0.22); }
.free-band .free-index a span { color: var(--bronze); }
.free-band .free-index a:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
/* The four tools set like the six services: serif names, large, so the
   two panels read as a pair and the space the panel gains is used. */
.free-band .free-index { margin-top: 2.6rem; }
/* Wider than the heading's oval lens reaches, so a lens of its own. */
.free-band .free-index { position: relative; isolation: isolate; }
.free-band .free-index::before {
  content: "";
  position: absolute;
  inset: -1.5rem -3rem;
  z-index: -1;
  border-radius: 999px;
  background: var(--lens-ink);
  filter: blur(var(--lens-blur));
  pointer-events: none;
}
.free-band .free-index a {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.1rem, 0.55vw + 0.92rem, 1.45rem);
  padding: 1.1rem 1.7rem;
  color: #f3ede2;
}
.free-band .free-index a span { font-size: 0.78em; }
/* The same height as the showroom, while the showroom is two columns. */
@media (min-width: 961px) {
  .free-band { min-height: var(--premium-h, auto); display: grid; align-content: center; }
}
@media (max-width: 520px) {
  .free-band .free-index a { padding: 0.5rem 0.95rem; font-size: 1.05rem; }
}

/* ---------- The checklists ----------
   Rae's pattern: six lines, the practical first and last, the fun in the
   middle, each one an invitation -- and, at her second asking, simple: one
   line each and a plain bronze check. Checked off one by one as the list
   comes into view; without JavaScript the checks are simply there. */
.checklist {
  list-style: none;
  display: grid;
  gap: 0.6rem;
  margin-top: 1.4rem;
}
.checklist li {
  display: grid;
  grid-template-columns: 1.05rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
  /* On a phone a line that wraps takes a word or two down with it, never
     one stranded word. */
  text-wrap: pretty;
}
.tick { width: 1.05rem; height: 1.05rem; margin-top: 0.24rem; overflow: visible; }
.tick path {
  fill: none;
  stroke: var(--bronze-ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.js .tool-copy .tick path { stroke-dasharray: 20; stroke-dashoffset: 20; }
.js .tool-copy.in-view .tick path { animation: tick-mark 0.4s var(--d, 0s) ease-out forwards; }
.checklist li:nth-child(1) { --d: 0.25s; }
.checklist li:nth-child(2) { --d: 0.37s; }
.checklist li:nth-child(3) { --d: 0.49s; }
.checklist li:nth-child(4) { --d: 0.61s; }
.checklist li:nth-child(5) { --d: 0.73s; }
.checklist li:nth-child(6) { --d: 0.85s; }
@keyframes tick-mark { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .js .tool-copy .tick path { animation: none; stroke-dashoffset: 0; }
}

/* The wide row (the ATS check): the title and the blurb share a row, and
   the list runs the full width under them, three short lines across. */
.tool-wide .checklist {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 2.4rem;
}
@media (max-width: 960px) {
  .tool-wide .checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .tool-wide .checklist { grid-template-columns: 1fr; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 960px) {
  .showroom { grid-template-columns: 1fr; }
  .tool, .tool-flip, .tool-wide { grid-template-columns: 1fr; }
  .tool-flip .tool-copy, .tool-flip .tool-plinth { order: 0; }
  .tool-copy p { max-width: 62ch; }
}

@media (max-width: 760px) {
}

@media (max-width: 520px) {
  :root { --stage-radius: 24px; }
  .showroom { padding: 0.6rem; border-radius: 28px; }
  .svc-menu { padding: 1.1rem 0.4rem 0.85rem; }
  .svc-link { grid-template-columns: 2rem minmax(0, 1fr) auto; padding: 0.75rem 0.7rem; }
  .svc-price { font-size: 1.05rem; }
  /* A phone shows a service's snapshot under the row that was tapped
     (js/home.js moves the display there), so the resting display, a whole
     screen above, is not needed. */
  .showroom > .showcase { display: none; }
  .showcase.is-inline { display: block; min-height: 0; margin: 0.2rem 0.3rem 0.6rem; }
  .showcase.is-inline .svc-idle { display: none; }
  .showcase.is-inline .svc-show { position: relative; inset: auto; }
  .showcase.is-inline .plinth { height: 13.4rem; }
  .showcase.is-inline .show-art { position: relative; left: auto; top: auto; margin: 1.4rem auto 3.3rem; transform: scale(1.25); transform-origin: 50% 50%; }
  .showcase.is-inline .show-text { position: relative; padding: 0 1.1rem 1.4rem; }
  .free-index { border: 0; gap: 0.4rem; }
  .free-index li + li { border-left: 0; }
  .free-index a { padding: 0.45rem 0.8rem; border: 1px solid var(--line); border-radius: 999px; }
  .tool-plinth { padding: 0.6rem; }
  .tool-stage { padding: 0.9rem 0.85rem 1rem; border-radius: 18px; }
  .desk { height: 400px; }
  .desk-sheet .mini { --mini-w: 250px; }
  .tray-pill { left: 0.6rem; right: 0.6rem; bottom: 0.6rem; max-width: none; }
}

/* A narrow instrument lays the star map out as a list. */
@container (max-width: 470px) {
  .constellation.is-live { height: auto; }
  .constellation.is-live .con-nodes { position: static; padding: 1.1rem; }
  .constellation.is-live .con-center { position: static; transform: none; width: auto; max-width: none; text-align: left; padding: 0 0 0 1.6rem; }
  .constellation.is-live .con-center::before { left: 0.5rem; top: 0.3rem; margin-left: 0; }
  .constellation.is-live .con-ring { display: grid; gap: 0.2rem; margin-top: 0.8rem; }
  .constellation.is-live .con-ring li { position: static; width: auto; max-width: none; transform: none; }
  .constellation.is-live .con-ring button { text-align: left; padding: 0.45rem 0.4rem 0.45rem 1.6rem; }
  .constellation.is-live .con-ring button::before { left: 0.5rem; top: 50%; margin: -5.5px 0 0; }
  .constellation.is-live .con-ring button::after { left: auto; right: 0.6rem; top: 50%; transform: translateY(-50%); }
  .con-lines { display: none; }
  .con-empty { position: static; transform: none; width: auto; padding: 0 1.1rem 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .svc.is-on .svc-price, .show-price { animation: none; background-position: 50% 0; }
  .svc.is-on .svc-link::after { animation: none; display: none; }
  .plinth-beam { animation: none; }
  .tray-pill-dot { animation: none; }
  .con-lines line { animation: none; }
  .desk-sheet .mini { transform: none; }
}

/* ---------- A floor under the small type (2026-10-02) ----------
   Rae: "verify all changes are optimized for both desktop & mobile". The
   tracked capitals above were set from 0.6 to 0.74rem, 9.6 to 11.8px, which
   is below what a phone reads comfortably. The kicker the page opens with
   ("Tailored to you") is 0.75rem, so that is the floor and nothing grows
   past it; a sentence in small print gets 0.8rem. Measured by
   atschecker-build/tests/responsive-audit.mjs at 375, 768, 1280 and 1440. */
.for-touch, .for-pointer, .svc-foot, .svc-price small, .con-kicker,
.occ-picks-head, .q-label { font-size: 0.75rem; }