/* ============================================================
   caputocleaning.com — the whole design system.
   No build step, no dependencies, no JavaScript.

   COLOUR LAW — measured, not eyeballed. Ratios against cream
   #FAF6EE, computed 2026-09-25:

     char   #333138  11.90:1  → ALL body text and headings
     plum   #3B2A4A  12.06:1  → nav and footer band, cream text on it
     teal   #245A57   7.28:1  → second background band, cream text on it
     rose   #A3405E   5.64:1  → the call button, cream text on it
     lilac  #9B86C4   2.95:1  ⛔ FILL ONLY — must never carry text
     blush  #E3A8B8   1.84:1  ⛔ FILL ONLY — must never carry text

   The two soft colours are shape and fill: rules, borders, chips,
   card tops. That is why links keep the body colour and take a
   rose underline instead of turning pink.

   LAYOUT LAW:
   Body copy runs the FULL width of .wrap. The wrap's own padding
   IS the reading measure. No max-width in ch, no ~700px prose
   column, no text-wrap:balance anywhere in this file.
   See .claude/rules/full-width-body-copy.md in the Komorebi repo.
   ============================================================ */

:root{
  --cream: #FAF6EE;
  --char:  #333138;
  --plum:  #3B2A4A;
  --teal:  #245A57;
  --rose:  #A3405E;
  --lilac: #9B86C4;
  --blush: #E3A8B8;

  --wrap:   1100px;
  --bar-y:  clamp(3.5rem, 7vw, 6rem);
  --gutter: 24px;
}

*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--cream);
  color:var(--char);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  /* +10% over a default 1rem base — Marika's standing type preference */
  font-size:1.1rem;
  line-height:1.65;
}

/* ---------- bands ---------- */
.bar{padding:var(--bar-y) var(--gutter)}
.bar--cream{background:var(--cream);color:var(--char)}
.bar--teal {background:var(--teal); color:var(--cream)}
.bar--cream + .bar--cream,
.bar--teal  + .bar--teal{padding-top:0}

.wrap{max-width:var(--wrap);margin:0 auto}

/* ---------- type ---------- */
h1,h2,h3{line-height:1.15;margin:0 0 .6rem}
h1{font-size:clamp(2.6rem,6.2vw,4.2rem);letter-spacing:-.02em}
h2{font-size:clamp(1.8rem,3.6vw,2.6rem)}
h3{font-size:1.25rem;font-weight:600}

p{margin:0 0 1.1rem}
.lede{font-size:clamp(1.25rem,2.2vw,1.5rem);line-height:1.5}

.eyebrow{
  font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;
  opacity:.75;margin:0 0 .5rem;
}

.rule{border:0;height:5px;width:104px;background:var(--blush);margin:1.4rem 0 1.8rem}
.bar--teal .rule{background:var(--lilac)}

/* ---------- links ---------- */
a{color:inherit;text-decoration:none;border-bottom:2px solid var(--rose)}
a:hover{background:rgba(227,168,184,.4)}
.bar--teal a{border-bottom-color:var(--lilac)}
.bar--teal a:hover{background:rgba(155,134,196,.35)}

/* ---------- nav ---------- */
.nav{background:var(--plum);color:var(--cream);padding:14px var(--gutter)}
.nav .wrap{display:flex;gap:28px;align-items:baseline;flex-wrap:wrap}
.nav .name{font-weight:700;letter-spacing:.02em;margin-right:auto}
.nav a{border-bottom:2px solid transparent;font-size:1rem}
.nav a:hover{border-bottom-color:var(--blush);background:none}

/* ---------- call buttons ---------- */
.cta{
  display:inline-block;background:var(--rose);color:var(--cream);
  border:0;border-bottom:0;padding:.9rem 1.7rem;
  font-size:1.2rem;font-weight:700;letter-spacing:.01em;
  margin:.4rem .6rem .4rem 0;
}
.cta:hover{background:var(--rose);opacity:.88}
.cta--quiet{background:transparent;color:inherit;box-shadow:inset 0 0 0 3px var(--lilac)}
.cta--quiet:hover{background:rgba(155,134,196,.3);opacity:1}
.bar--teal .cta--quiet{color:var(--cream)}

/* ---------- cards ---------- */
.grid{display:grid;gap:28px;margin-top:2rem}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

.card{background:#fff;color:var(--char);padding:1.6rem 1.7rem;border-top:6px solid var(--lilac)}
.bar--teal .card{background:var(--cream);border-top-color:var(--blush)}
.card h3{margin-bottom:.5rem}
.card p:last-child{margin-bottom:0}
.card ul{margin:.4rem 0 0;padding-left:1.15rem}
.card li{margin-bottom:.3rem}

/* ---------- price rows ---------- */
.price{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:baseline;
       padding:1.1rem 0;border-bottom:3px solid var(--blush)}
.price:last-child{border-bottom:0}
.price__what{font-weight:700;font-size:1.2rem;flex:1 1 16rem}
.price__num{font-size:1.35rem;font-weight:700;font-variant-numeric:tabular-nums}
.price__note{flex:1 1 100%;opacity:.85;font-size:1rem}

/* ---------- area chips ---------- */
.areas{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;padding:0;margin:1.4rem 0 0}
.areas li{background:var(--cream);color:var(--char);padding:.45rem 1rem;font-weight:600}

/* ---------- footer ---------- */
.foot{font-size:1rem}
.foot__meta{margin-top:1.2rem;opacity:.8;font-size:.95rem}
.foot__legal{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;justify-content:space-between;
             margin:1.6rem 0 0;padding-top:1rem;border-top:2px solid var(--lilac);
             font-size:.85rem;opacity:.75}
.foot__by{white-space:nowrap}

@media print{ .nav,.cta{display:none} .bar{padding:1.2rem 0} }