/* Alcove Resale & Gallery — the whole look lives here. */

:root{
  --cream:      #faf5ec;   /* the ground */
  --cream-deep: #f2eade;   /* panels that need to sit back a little */
  --ink:        #23211d;   /* warm near-black, for text */
  --muted:      #6c6558;   /* second-tier text */
  --line:       #ded4c2;   /* hairlines */
  /* Taken straight out of Cristina's logo. The logo used to have green
     in it; the version she sent in September does not, so the green is
     gone from here too rather than sitting on the page matching nothing. */
  --alert:      #d8352a;   /* the iOS/Windows badge red — attention, nothing else */
  --teal:       #006060;   /* the accent — the dark end of the logo's gradient */
  --teal-dark:  #004d4d;   /* hover */

  --serif: "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:  ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;

  --page:  1120px;         /* max content width */
  --gutter: 24px;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
}

img{max-width:100%;display:block}

/* Focus — always visible, never removed. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--teal);
  outline-offset:2px;
  border-radius:2px;
}

/* Anyone who has asked their device to calm down, gets calm. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

.wrap{max-width:var(--page);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:660px}

/* Skip link for keyboard and screen-reader use */
.skip{
  position:absolute;left:-9999px;
  background:var(--ink);color:var(--cream);
  padding:12px 18px;z-index:100;
}
.skip:focus{left:12px;top:12px}


/* ── Announcement banner ─────────────────────────────────── */

.announce{
  background:var(--teal);color:#fff;
  font-size:15px;text-align:center;
}

/* The whole bar is the target, so it's easy to hit on a phone. */
.announce-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:4px 12px;
  padding:11px var(--gutter);
  color:#fff;
  text-decoration:none;
}
.announce-cta{font-weight:600;white-space:nowrap}
a.announce-inner:hover .announce-cta{text-decoration:underline}

/* The usual teal focus ring would vanish against the teal bar. */
a.announce-inner:focus-visible{
  outline:3px solid #fff;
  outline-offset:-4px;
  border-radius:0;
}


/* ── Header and navigation ───────────────────────────────── */

.site-header{
  border-bottom:1px solid var(--line);
  padding:26px 0;
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:28px;flex-wrap:wrap;
}

.wordmark{
  display:block;
  text-decoration:none;
  color:var(--ink);
  line-height:0;              /* no stray gap under the image */
}
.wordmark img{
  height:104px;
  width:auto;
}
.wordmark small{
  display:block;
  font-family:var(--sans);
  font-size:11px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--muted);
  margin-top:6px;
  line-height:1.4;
}
.wordmark-sm img{height:68px}

#site-nav{display:flex;align-items:center;gap:30px}
#site-nav a{
  font-size:15.5px;
  color:var(--ink);
  text-decoration:none;
  padding:4px 0;
  border-bottom:1.5px solid transparent;
  white-space:nowrap;
}
#site-nav a:hover{border-bottom-color:var(--teal)}
#site-nav a[aria-current="page"]{border-bottom-color:var(--ink)}

/* Vendor Portal — deliberately set apart from the rest */
#site-nav .portal{
  border:1.5px solid var(--teal);
  color:var(--teal);
  border-radius:3px;
  padding:8px 16px;
  font-weight:600;
  margin-left:6px;
}
#site-nav .portal:hover{background:var(--teal);color:#fff;border-color:var(--teal)}

/* The menu button — hidden on anything wider than a phone */
.menu-toggle{
  display:none;
  align-items:center;gap:9px;
  background:none;border:1.5px solid var(--line);border-radius:3px;
  font:inherit;font-size:15px;color:var(--ink);
  padding:8px 14px;cursor:pointer;
}
.menu-toggle .bars{display:block;width:17px}
.menu-toggle .bars span{
  display:block;height:1.8px;background:var(--ink);border-radius:2px;
}
.menu-toggle .bars span + span{margin-top:4px}


/* ── Buttons ─────────────────────────────────────────────── */

.btn{
  display:inline-block;
  font:inherit;font-size:16px;font-weight:600;
  padding:14px 26px;
  border-radius:3px;
  text-decoration:none;
  border:1.5px solid var(--teal);
  cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.btn-primary{background:var(--teal);color:#fff}
.btn-primary:hover{background:var(--teal-dark);border-color:var(--teal-dark)}
.btn-quiet{background:transparent;color:var(--teal)}
.btn-quiet:hover{background:var(--teal);color:#fff}


/* ── Type ────────────────────────────────────────────────── */

h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:.01em}
h1{font-size:clamp(34px,6vw,52px);line-height:1.12;margin:0 0 18px}
h2{font-size:clamp(26px,3.6vw,35px);line-height:1.2;margin:0 0 16px}
h3{font-size:21px;line-height:1.3;margin:0 0 8px}
p{margin:0 0 18px}
.lead{font-size:19px;color:var(--muted);max-width:44em}
.eyebrow{
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal);font-weight:600;margin:0 0 14px;
}
.muted{color:var(--muted)}

/* Links in running text. Without this they fall back to the browser's
   default blue, which is the one colour on the page nobody chose. */
main a{color:var(--teal);text-underline-offset:2px}
main a:hover{color:var(--teal-dark)}


/* ── Sections ────────────────────────────────────────────── */

section{padding:72px 0}
section.tight{padding:52px 0}
.panel{background:var(--cream-deep);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}


/* ── Page header (every page except home) ────────────────── */

.page-head{
  padding:58px 0 44px;
  border-bottom:1px solid var(--line);
}
.page-head h1{margin-bottom:14px}
.page-head .lead{margin-bottom:0}


/* ── Prose ───────────────────────────────────────────────── */

.prose{max-width:36em}
.prose h2{margin-top:44px}
.prose h2:first-child{margin-top:0}
.prose ul{padding-left:20px;margin:0 0 18px}
.prose li{margin-bottom:9px}


/* ── Numbered steps ──────────────────────────────────────── */

.steps{list-style:none;counter-reset:step;margin:0;padding:0}
.steps li{
  counter-increment:step;
  position:relative;
  padding-left:52px;
  margin-bottom:28px;
}
.steps li::before{
  content:counter(step);
  position:absolute;left:0;top:-2px;
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--teal);border-radius:50%;
  font-family:var(--serif);font-size:17px;color:var(--teal);
}
.steps h3{margin-bottom:4px}
.steps p{margin:0;color:var(--muted)}

/* Three steps side by side, stacking on small screens */
.steps-across{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  margin-top:34px;
}
.steps-across li{margin-bottom:0}
@media (max-width:900px){
  .steps-across{grid-template-columns:1fr;gap:26px}
  .steps-across li{margin-bottom:0}
}


/* ── Call to action strip ────────────────────────────────── */

.cta{text-align:center}
.cta h2{margin-bottom:12px}
.cta .lead{margin:0 auto 26px}


/* ── Map ─────────────────────────────────────────────────── */

.map{
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
  aspect-ratio:4/3;
  background:var(--cream-deep);
}
.map iframe{width:100%;height:100%;border:0;display:block}


/* ── Placeholder photo blocks ────────────────────────────── */
/* Real photographs replace these. Sized to the real crop so the */
/* page will not jump around when the pictures arrive.           */

.photo{
  background:var(--cream-deep);
  border:1.5px dashed #c3b49a;
  border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  padding:22px;
  color:#8c8069;
}
.photo span{
  font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;
  line-height:1.7;max-width:26em;
}
.photo-wide{aspect-ratio:3/2}
.photo-tall{aspect-ratio:4/5}
.photo-square{aspect-ratio:1/1}


/* ── Hero ────────────────────────────────────────────────── */

.hero{padding:64px 0 72px}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
/* A row of buttons, anywhere on the site. This used to be scoped to .hero,
   so the same markup elsewhere had the buttons sitting on top of each other. */
.actions{display:flex;gap:12px;flex-wrap:wrap}
.hero .actions{margin-top:28px;gap:14px}


/* ── Vendor block — the most important thing on the page ─── */

.vendor-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.rates{
  list-style:none;margin:26px 0 28px;padding:0;
  border-top:1px solid var(--line);
}
.rates li{
  display:flex;justify-content:space-between;gap:20px;
  padding:15px 0;border-bottom:1px solid var(--line);
}
.rates .what{font-weight:600}
.rates .how-much{font-family:var(--serif);font-size:19px;white-space:nowrap}


/* ── Two/three column blocks ─────────────────────────────── */

.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}


/* ── Visit strip ─────────────────────────────────────────── */

.facts{list-style:none;margin:0;padding:0}
.facts li{margin-bottom:16px}
.facts .label{
  display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:3px;
}
.facts a{color:var(--ink)}


/* ── Form ────────────────────────────────────────────────── */

.form-card{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:4px;
  padding:34px;
  max-width:520px;
}
.field{margin-bottom:18px}
.field label{
  display:block;font-size:14px;font-weight:600;margin-bottom:6px;
}
.field input,.field select,.field textarea{
  width:100%;
  font:inherit;font-size:16px;
  color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:3px;
  padding:12px 13px;
}
.field textarea{min-height:110px;resize:vertical}
.field select{appearance:none;background-image:none}
.hp{position:absolute;left:-9999px}
.form-note{font-size:14px;color:var(--muted);margin:14px 0 0}


/* ── Footer ──────────────────────────────────────────────── */

.site-footer{
  border-top:1px solid var(--line);
  padding:52px 0 60px;
  font-size:15px;
}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.site-footer h4{
  font:inherit;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px;
}
.site-footer a{color:var(--ink)}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:8px}
/* The colophon, the Crestworthy line and the ref code are one block at the
   foot of every page, so they share an axis. */
.colophon{
  margin-top:40px;padding-top:22px;border-top:1px solid var(--line);
  font-size:14px;color:var(--muted);text-align:center;
}


/* ── Phone and tablet ────────────────────────────────────── */

@media (max-width:900px){
  .hero-grid,.vendor-grid,.cols-2{grid-template-columns:1fr;gap:36px}
  .cols-3{grid-template-columns:1fr;gap:34px}
  .footer-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:720px){
  body{font-size:16.5px}
  section{padding:52px 0}
  .hero{padding:40px 0 52px}

  .menu-toggle{display:inline-flex}

  #site-nav{
    display:none;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    margin-top:18px;
    border-top:1px solid var(--line);
  }
  #site-nav.is-open{display:flex}
  #site-nav a{
    padding:15px 2px;
    border-bottom:1px solid var(--line);
  }
  #site-nav a:hover{border-bottom-color:var(--line)}
  #site-nav .portal{
    margin:16px 0 4px;
    text-align:center;
    padding:14px 16px;
    border:1.5px solid var(--teal);
  }

  .wordmark img{height:76px}
  .form-card{padding:24px}
  .footer-grid{grid-template-columns:1fr;gap:28px}
}


/* ── Cristina's signature and her closing line ───────────── */

.signature{
  font-family:var(--serif);
  font-size:20px;
  color:var(--muted);
  margin-top:26px;
}

.pullquote-band{text-align:center}
.pullquote{
  font-family:var(--serif);
  font-size:clamp(25px,3.6vw,36px);
  line-height:1.3;
  color:var(--teal);
  margin:0;
}


/* ── Portrait ────────────────────────────────────────────── */

.portrait{margin:0}
.portrait img{
  width:100%;
  height:auto;
  border-radius:3px;
}


/* ── FAQ ─────────────────────────────────────────────────── */
/* Deliberately not an accordion. Everything is on the page,   */
/* readable and searchable, with nothing to tap open first.    */

.faq-wrap{max-width:720px}
.faq-wrap > h2{
  margin:0 0 8px;
  padding-bottom:14px;
  border-bottom:2px solid var(--line);
}
.faq-wrap > h2 ~ h2{margin-top:64px}

.qa{padding:26px 0;border-bottom:1px solid var(--line)}
.qa h3{
  font-family:var(--sans);
  font-size:18px;
  font-weight:700;
  letter-spacing:0;
  margin-bottom:10px;
}
.qa p:last-child{margin-bottom:0}
.qa .rates{margin:18px 0 16px}
.qa .muted{font-size:15.5px}

/* The vendor's share, sitting with the prices it belongs to. */
.keep-note{
  font-weight:600;
  color:var(--teal);
  margin:0 0 18px;
}

/* A two-column block that has lost its photo shouldn't leave half the
   row empty — the remaining column spans the width at a readable measure. */
.cols-2 > :only-child,
.vendor-grid > :only-child{
  grid-column:1 / -1;
  max-width:38em;
}

/* The opening offer, sitting with the price it discounts. */
.promo-note{
  display:inline-block;
  background:var(--mark, #f4ece0);
  border-left:3px solid var(--teal);
  padding:10px 14px;
  margin:0 0 14px;
  font-size:15.5px;
  font-weight:600;
  color:var(--teal-dark);
  border-radius:0 3px 3px 0;
}

/* Real photographs, shown at their own proportions. */
.shot{margin:0}
.shot img{width:100%;height:auto;border-radius:3px}

/* An upright photograph is narrowed by its container rather than cropped,
   so the whole closet stays visible without towering over the words.
   Width stays 100% of that container so the width/height attributes can
   still reserve the space before the image loads — otherwise the page
   jumps as it comes in. */
.shot-tall{max-width:345px;margin-left:auto;margin-right:auto}

/* Numbered steps stacked inside an answer, rather than across a row. */
.steps-list{margin:20px 0 0}
.steps-list li{margin-bottom:22px}
.steps-list li:last-child{margin-bottom:0}
.steps-list h3{font-family:var(--sans);font-size:16px;font-weight:700;margin-bottom:4px}

/* An author rule that sets `display` beats the browser's own [hidden] rule,
   so anything with a class like .btn stays visible. Put the floor back. */
[hidden]{display:none !important}

/* A quiet qualifier beside a price — "depending on size". Sits with the
   thing it qualifies rather than as a footnote further down the page. */
.rates .qual{
  display:block;
  font-weight:400;
  font-size:14px;
  color:var(--muted);
  margin-top:2px;
}

/* ── The private lead list (/enquiries.html) ─────────────────
   Built to be scanned, not read. Groups say what a pile of people
   IS; closed cards say who and one word about whose turn it is;
   only one card opens at a time, so there is only ever one thing
   asking to be dealt with.
   ─────────────────────────────────────────────────────────── */

/* These are <section> elements, so they inherit the site-wide 72px
   section padding. On a list that is scrolled, that is dead space. */
.group{padding:0;margin-bottom:38px}
.group:not([open]){margin-bottom:18px}
.group-head{
  display:flex;align-items:center;gap:12px;
  font-family:var(--sans);
  font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--muted);
  margin:0 0 4px;padding-bottom:10px;
  border-bottom:2px solid var(--line);
  cursor:pointer;list-style:none;
}
.group-head::-webkit-details-marker{display:none}

/* The arrow sits at the far right, where the cards' own chevrons are, so
   the two read as the same gesture. */
.group-head::after{
  content:"";margin-left:auto;
  width:9px;height:9px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);margin-bottom:6px;
  transition:transform .15s ease;
}
.group[open] > .group-head::after{transform:rotate(-135deg);margin-bottom:0}
.group-head:hover{color:var(--ink)}
.group-head .count{
  font-size:13px;letter-spacing:0;
  background:var(--cream-deep);color:var(--muted);
  border:1px solid var(--line);
  border-radius:999px;min-width:22px;padding:1px 8px;text-align:center;
  font-variant-numeric:tabular-nums;
}

/* Red is a promise that something needs her. Only the two groups that
   actually do get it — a red badge on All set would be a false alarm,
   and false alarms are what people learn to stop seeing. */
.group[data-group="to_call"] > .group-head .count,
.group[data-group="setup"] > .group-head .count{
  background:var(--alert);color:#fff;border-color:var(--alert);
  font-weight:700;
}
.group-blurb{font-size:15px;color:var(--muted);margin:10px 0 0}

/* ── A card, closed ──────────────────────────────────────── */

.card{border-bottom:1px solid var(--line)}
.card-top{
  position:relative;
  display:flex;align-items:center;gap:16px;width:100%;
  background:none;border:0;
  font:inherit;text-align:left;color:var(--ink);
  padding:20px 38px 20px 4px;cursor:pointer;
}
/* The chevron is pinned, so it never competes for room with the name. */
.card-top .chev{position:absolute;right:14px;top:50%;margin-top:-6px}
.card-top:hover{background:rgba(0,0,0,.02)}
.card-main{flex:1 1 auto;min-width:0}
.card-name{display:block;font-size:19px;font-weight:700;line-height:1.25}
.card-want{display:block;font-size:15px;color:var(--muted);margin-top:2px}

.card-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.card-count{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}

/* One word, colour-coded, for whose turn it is. */
.badge{
  font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;white-space:nowrap;
}
.b-you{background:var(--teal);color:#fff}
.b-them{background:var(--cream-deep);color:var(--muted);border:1px solid var(--line)}
.b-done{background:transparent;color:var(--muted);border:1px solid var(--line)}

.chev{
  width:9px;height:9px;flex:0 0 auto;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);margin-left:2px;
  transition:transform .15s ease;
}
.card.is-open .chev{transform:rotate(-135deg)}
.card.is-open{background:var(--cream-deep);border-radius:4px;border-bottom-color:transparent}
.card.is-open .card-top{padding-left:18px;padding-right:38px}

/* ── A card, open ────────────────────────────────────────── */

.card-body{padding:0 18px 26px}
.turn{
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  margin:0 0 6px;
}
.turn-you{color:var(--teal)}
.turn-them{color:var(--muted)}
.turn-done{color:var(--muted)}
.card-body .when{font-size:14px;margin:0 0 16px}
.card-body .tiny{font-size:14px;margin:10px 0 0}
.said{
  border-left:3px solid var(--line);
  padding-left:16px;margin:0 0 20px;
}

.pill-head{
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin:26px 0 10px;
}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{
  font:inherit;font-size:15px;padding:9px 15px;
  border:1.5px solid var(--line);border-radius:999px;
  background:var(--cream);color:var(--muted);cursor:pointer;
}
.pill:hover{border-color:var(--teal);color:var(--teal)}
.pill.is-on{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:600}

/* ── The checklist ───────────────────────────────────────── */

.steps-box{
  margin-top:24px;padding:22px;
  background:var(--cream);border:1px solid var(--line);border-radius:4px;
}
.progress{height:7px;border-radius:999px;background:var(--line);overflow:hidden}
.progress-fill{height:100%;background:var(--teal);transition:width .2s ease}
.progress-text{
  font-size:13px;color:var(--muted);margin:8px 0 22px;
  font-variant-numeric:tabular-nums;
}
.check-head{
  font:inherit;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin:0 0 12px;
}
.checks{list-style:none;margin:0;padding:0}
.checks + .check-head{margin-top:28px}
.step{margin-bottom:16px;padding:10px 12px;border-radius:4px}
.step:last-child{margin-bottom:0}

/* The one thing to do next is the only thing that gets emphasis. */
.step.is-next{background:var(--cream-deep);box-shadow:inset 3px 0 0 var(--teal)}
.next-flag{
  display:inline-block;
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:var(--teal);color:#fff;
  padding:3px 8px;border-radius:999px;margin-left:8px;vertical-align:2px;
}

.check{display:flex;gap:14px;align-items:flex-start;cursor:pointer}
.check input{width:26px;height:26px;flex:0 0 auto;margin-top:0;accent-color:var(--teal);cursor:pointer}
.step-label{font-weight:600;line-height:1.45}
.step.is-done{opacity:.55}
.step.is-done .step-label{text-decoration:line-through;font-weight:400}

/* Instructions vanish once the step is done — a finished job's
   instructions are just noise on the page. */
.how{list-style:disc;margin:10px 0 0 54px;padding:0;font-size:15.5px;color:var(--muted)}
.how li{margin-bottom:7px}
.step.is-done .how,
.step:not(.is-next):not(.is-done) .how{display:none}

/* ── The reference block, closed by default ──────────────── */

.how-it-goes{
  background:var(--cream-deep);border:1px solid var(--line);border-radius:4px;
  padding:18px 22px;margin-top:10px;
}
.how-it-goes summary{
  cursor:pointer;font-weight:700;font-size:16px;
}
.how-it-goes ol{margin:16px 0 0;padding-left:22px}
.how-it-goes li{margin-bottom:8px}
.how-it-goes li:last-child{margin-bottom:0}

@media (max-width:600px){
  /* On a phone the name, the count and the badge cannot share one line
     without the name wrapping into them. Stack instead: who, then what,
     then whose turn. */
  .card-top{
    flex-wrap:wrap;gap:0;
    padding:18px 30px 18px 2px;
  }
  .card-main{flex:1 1 100%}
  .card-right{flex:1 1 100%;justify-content:flex-start;margin-top:12px}
  .card-top .chev{top:26px;margin-top:0;right:10px}
  .card.is-open .card-top{padding-left:14px;padding-right:34px}
  .card-body{padding:0 14px 22px}
  .card-name{font-size:18px}
  .steps-box{padding:16px}
  .how{margin-left:40px}
}


/* ── The lead list's own header ──────────────────────────────
   This is a tool she opens every day, not a page she reads. The
   old header spent half a screen on the words "Private" and "Your
   list" before the first name appeared. Now the title is small and
   the count — the only line that tells her what to do — is the
   thing set large.
   ─────────────────────────────────────────────────────────── */

.tool-head{
  padding:26px 0 22px;
  border-bottom:1px solid var(--line);
}
.tool-head h1{
  font-family:var(--sans);
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--muted);
  margin:0 0 6px;
}
/* ── The two numbers at the top ──────────────────────────────
   A sentence that changes shape every day has to be read. A number
   in a slot that is always there can be glanced at — which is the
   only thing that happens to this page most of the time. Zero is
   shown, quietly, rather than the line disappearing. */

.head-row{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px 32px;flex-wrap:wrap;
}
.counts{display:flex;align-items:stretch;gap:0}
.count-tile{
  display:flex;flex-direction:column;gap:2px;
  padding-right:26px;margin-right:26px;
  border-right:1px solid var(--line);
}
.count-tile:last-child{border-right:0;padding-right:0;margin-right:0}
.count-num{
  font-family:var(--serif);
  font-size:clamp(34px,5vw,44px);line-height:1;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.count-label{
  font-family:var(--sans);
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:var(--muted);
}
.count-tile.is-zero .count-num{color:var(--line)}
.count-tile.is-zero .count-label{color:var(--line)}

.head-note{
  font-size:15px;color:var(--muted);margin:14px 0 0;
}
.head-note:empty{display:none}

.head-actions .add-block{margin:0}
.head-actions .add-open{white-space:nowrap}

/* A short reason under a form field, for when asking needs explaining. */
.field-note{font-size:14.5px;color:var(--muted);margin:6px 0 0}
.field-note:empty{display:none}

/* ── Guides at the foot of the list ──────────────────────── */

.guides{margin-top:14px}
.guides-head{
  font-family:var(--sans);
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--muted);margin:0 0 12px;
}
.guides .how-it-goes + .how-it-goes{margin-top:10px}

/* The one thing that goes wrong if she doesn't read the guide. */
.guide-note{
  background:var(--cream);
  border-left:3px solid var(--teal);
  padding:14px 16px;margin:16px 0 0;
  font-size:15.5px;
}
.guide-quiet{
  border-left-color:var(--line);
  color:var(--muted);font-size:15px;
}

/* ── Copying someone's details into ConsignCloud ─────────────
   Separate lines because ConsignCloud's form has separate boxes.
   Handing over one blob would mean re-selecting parts of it, which
   is exactly the fiddly bit this is meant to remove.
   ─────────────────────────────────────────────────────────── */

.copy-block{
  margin-top:24px;padding:18px;
  background:var(--cream);border:1px solid var(--line);border-radius:4px;
}
.copy-head{
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin:0 0 12px;
}

.copy-row{
  display:flex;align-items:center;gap:12px;width:100%;
  font:inherit;text-align:left;color:var(--ink);
  background:none;border:0;border-bottom:1px solid var(--line);
  padding:12px 4px;cursor:pointer;
}
.copy-row:last-of-type{border-bottom:0}
.copy-row:hover{background:var(--cream-deep)}

.copy-label{
  flex:0 0 88px;
  font-size:13px;color:var(--muted);
}
.copy-value{
  flex:1 1 auto;min-width:0;
  font-weight:600;
  overflow-wrap:anywhere;
}
.copy-flag{
  flex:0 0 auto;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--teal);
}
.copy-row.just-copied .copy-flag::after{content:"ied"}   /* Copy → Copied */
.copy-row.just-copied{background:var(--cream-deep)}

.copy-all{margin-top:14px;padding:11px 18px;font-size:15px}

.copy-said{
  min-height:1.4em;margin:10px 0 0;
  font-size:14px;font-weight:600;color:var(--teal);
}
.copy-said.is-bad{color:var(--ink)}

@media (max-width:600px){
  .copy-row{flex-wrap:wrap;gap:2px 10px;padding:12px 2px}
  .copy-label{flex:1 1 100%}
  .copy-flag{margin-left:auto}
}

/* Which blank on the agreement is whose. */
.field-map{overflow-x:auto;margin:18px 0 0}
.field-map table{width:100%;border-collapse:collapse;font-size:15px;background:var(--cream)}
.field-map th,.field-map td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.field-map th{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.field-map td:first-child{width:3em;color:var(--muted);font-variant-numeric:tabular-nums}
.field-map td:last-child{white-space:nowrap}

/* ── The vendor setup page (/gettingstarted) ──────────────────────── */

.vendor-steps{margin-top:6px}
.vendor-steps > li{padding-bottom:30px;margin-bottom:30px;border-bottom:1px solid var(--line)}
.vendor-steps > li:last-child{border-bottom:0;margin-bottom:0}
.vendor-steps h3{font-size:22px;margin-bottom:10px}
.vendor-steps p{color:var(--ink);margin:0 0 12px}
.vendor-steps .tip{color:var(--muted);font-size:15.5px}
.vendor-steps p:last-child{margin-bottom:0}

.vendor-help{
  background:var(--cream-deep);border:1px solid var(--line);border-radius:4px;
  padding:24px 26px;margin-top:40px;
}
.vendor-help h2{font-size:24px;margin-bottom:10px}
.vendor-help p:last-child{margin-bottom:0}

/* ── Making a vendor's agreement ─────────────────────────── */

.agree-block{
  margin-top:16px;padding:18px;
  background:var(--cream);border:1px solid var(--line);border-radius:4px;
}
.agree-open{padding:11px 18px;font-size:15px}
.agree-form{margin-top:16px}
.agree-intro{font-size:15px;color:var(--muted);margin:0 0 16px}
.agree-form .field{margin-bottom:14px}
.agree-form .field label{font-size:14px}
.agree-form input[type="date"]{max-width:14em}

.agree-pay{border:0;padding:0;margin:4px 0 16px}
.agree-pay legend{font-size:14px;font-weight:600;margin-bottom:8px;padding:0}
.agree-pay label{display:inline-flex;align-items:center;gap:7px;margin:0 18px 6px 0;font-size:15px;font-weight:400}
.agree-pay input{width:18px;height:18px;accent-color:var(--teal)}

.agree-same{
  border-top:1px solid var(--line);padding-top:12px;margin:4px 0 18px;
}
.agree-same summary{cursor:pointer;font-weight:600;font-size:15px;margin-bottom:12px}
.agree-note{font-size:14px;color:var(--muted);margin:-4px 0 14px}

.agree-said{margin-top:14px;font-size:15px}
.agree-said p{margin:0 0 8px}
.agree-said p:last-child{margin-bottom:0}
.agree-warn{
  border-left:3px solid #b81a1a;padding:8px 12px;background:#fbeeee;color:var(--ink);
}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}

/* ── "How do I…" ─────────────────────────────────────────────
   The guides live under the whole list, which on a busy day is a
   long way down. This sits at the top, always, and jumps to the
   right one. She asked for the agreement steps to be written down;
   this is how she finds them again without asking.
   ─────────────────────────────────────────────────────────── */

.jump{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;
  margin-top:20px;
}
.jump-lead{
  font-family:var(--sans);font-size:13px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.jump-link{
  font:inherit;font-size:15.5px;
  background:none;border:0;padding:0;cursor:pointer;
  color:var(--teal);font-weight:600;
  border-bottom:1px solid currentColor;
}
.jump-link:hover{color:var(--teal-dark)}

/* ── What to do the second the PDF lands ─────────────────────
   Written out on the card itself, because that is where she is
   standing when she needs it. */

.agree-done{font-weight:600}
.agree-next{margin:14px 0 6px;font-weight:600}
.agree-steps{margin:0;padding-left:22px}
.agree-steps li{margin-bottom:8px}
.agree-steps li:last-child{margin-bottom:0}
.agree-after{
  margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line);color:var(--muted);
}

/* The access code she gives every vendor, remembered on this laptop. */
.code-block{margin-top:20px}
.code-input{
  width:100%;font:inherit;font-size:16px;
  padding:11px 12px;border:1px solid var(--line);border-radius:3px;
  background:#fff;color:var(--ink);
}
.code-input:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal)}
.code-block .agree-note{margin:10px 0 0}

/* ── Adding someone who never used the form ──────────────────
   Most people who want a closet phone or walk in. If they only
   existed on a sticky note they would never get an agreement,
   so the list has to be able to take them too. */

.add-block{margin:0}
.add-form{
  margin-top:14px;padding:18px;
  background:#fff;border:1px solid var(--line);border-radius:6px;
  min-width:min(320px,80vw);
  box-shadow:0 8px 24px -14px rgba(20,19,17,.25);
}
.add-form .field{margin-bottom:14px}
.add-form .field:last-of-type{margin-bottom:18px}

/* ── When something goes wrong ───────────────────────────────
   Written for a bad moment on her own: the question in her words
   first, so she can find hers by scanning, then the fix. */

.stuck-q{
  font-weight:700;margin:20px 0 0;font-size:16px;
}
.how-it-goes .stuck-q:first-of-type{margin-top:16px}
.stuck-a{margin:5px 0 0;color:var(--muted);font-size:15.5px}
.stuck-a strong,.stuck-a em{color:var(--ink)}

.stuck-carl{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
}
.stuck-carl .agree-note{flex:1 1 100%;margin:4px 0 0}

/* Whose work this is, quietly, at the foot of her list. */
.by-crestworthy{margin:16px 0 0;text-align:center}
.by-crestworthy a{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--muted);text-decoration:none;
  font-size:13.5px;font-weight:500;
}
.by-crestworthy img{width:18px;height:18px;display:block}
.by-crestworthy a:hover{color:var(--ink)}

/* A small wag on hover. Nothing moves for anyone who has asked the
   system to keep still. */
@keyframes crestworthy-jiggle{
  0%   {transform:rotate(0deg)}
  20%  {transform:rotate(-11deg)}
  40%  {transform:rotate(9deg)}
  60%  {transform:rotate(-6deg)}
  80%  {transform:rotate(3deg)}
  100% {transform:rotate(0deg)}
}
.by-crestworthy img{transform-origin:50% 85%}
.by-crestworthy a:hover img,
.by-crestworthy a:focus-visible img{
  animation:crestworthy-jiggle .55s ease-in-out;
}
@media (prefers-reduced-motion:reduce){
  .by-crestworthy a:hover img,
  .by-crestworthy a:focus-visible img{animation:none}
}

/* ── The reference code ──────────────────────────────────────
   One tap copies everything we would otherwise have to ask for. */

.ref-line{
  margin:18px 0 0;display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;
  justify-content:center;
}
.ref-code{
  font:inherit;font-size:11.5px;letter-spacing:.1em;font-weight:700;
  font-variant-numeric:tabular-nums;
  background:none;border:0;padding:4px 2px;cursor:pointer;
  color:var(--muted);text-transform:uppercase;
  border-bottom:1px dotted currentColor;
}
.ref-code:hover{color:var(--ink)}
.ref-said{font-size:12.5px;color:var(--muted)}
.ref-said:empty{display:none}


/* ══════════════════════════════════════════════════════════════
   DEFINITION
   Cristina works this page with one eye while doing something
   else, and comes back to it a dozen times a day. A flat run of
   cream text gives her nothing to find her place by, so the one
   card she is working on is lifted onto its own white surface,
   its name stays put while she scrolls it, and everything nested
   inside it steps back down to cream.
   ══════════════════════════════════════════════════════════════ */

.card.is-open{
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:0 1px 2px rgba(20,19,17,.04), 0 8px 24px -12px rgba(20,19,17,.18);
  margin:14px 0 18px;
}

/* Her place in a long card: who this is stays on screen. */
.card.is-open .card-top{
  position:sticky;top:0;z-index:2;
  background:#fff;
  border-bottom:1px solid var(--line);
  border-radius:8px 8px 0 0;
}
.card.is-open .card-top:hover{background:#fff}
.card-body{padding-top:20px}

/* Nested blocks sit back down a level now the card is white. */
.card.is-open .copy-block,
.card.is-open .steps-box,
.card.is-open .agree-block{background:var(--cream-deep)}
/* The form is a level deeper again, so it lifts back to white. */
.card.is-open .agree-form{background:#fff;border:1px solid var(--line);border-radius:4px;padding:16px}
.card.is-open .step.is-next{background:#fff}

/* A closed card stays quiet — a row, not an object. */
.card:not(.is-open) + .card:not(.is-open){border-top:0}

/* The next thing to do, given enough weight to survive a glance. */
.turn-you{
  display:inline-block;
  background:var(--teal);color:#fff;
  padding:5px 11px;border-radius:999px;
  letter-spacing:.08em;
}
.turn-them,.turn-done{
  display:inline-block;
  background:var(--cream-deep);color:var(--muted);
  border:1px solid var(--line);
  padding:4px 10px;border-radius:999px;
  letter-spacing:.08em;
}

@media (max-width:600px){
  .card.is-open{margin-left:-6px;margin-right:-6px}
}

/* Undo, right where the move happened. Moving someone is the easiest
   thing on this page to do by accident. */
.pill-said{
  margin:12px 0 0;font-size:14.5px;color:var(--muted);
}
.pill-undo{
  font:inherit;font-size:14.5px;font-weight:700;
  background:none;border:0;padding:0 0 1px;margin-left:2px;
  color:var(--teal);border-bottom:1px solid currentColor;cursor:pointer;
}
.pill-undo:hover{color:var(--teal-dark)}