/* Rangrez Painters: white, deep indigo, hot pink, sunflower and teal. Bricolage Grotesque for headings, Inter for text.
   Change the colours and fonts here; base.css reads these variables. */
:root {
  --bg: #FFFDF8;
  --surface: #FFFFFF;
  --soft: #FFF5DD;
  --ink: #2D1B69;
  --muted: #5B5280;
  --line: #ECE6F6;
  --line-strong: #CFC4EC;
  --brand: #FF3D7F;
  --brand-hover: #E82A6B;
  --brand-ink: #FFFFFF;
  --brand-text: #D61C5E;
  --sun: #FFC531;
  --teal: #00A6A6;
  --eyebrow: #D61C5E;
  --head: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --radius: 14px;
  --radius-lg: 24px;
  --btn-radius: 999px;
  --wrap: 1200px;
  --gap: 20px;
}
h1, h2, h3 { font-weight: 800; letter-spacing: -.03em; }
.btn { font-weight: 600; }

/* header */
.header { background: var(--bg); border-bottom: 3px solid var(--ink); }
.logo b { font: 800 1.55rem/1 var(--head); color: var(--ink); letter-spacing: -.02em; }
.logo small { color: var(--muted); font-size: .74rem; }
.nav a { font-weight: 600; color: var(--ink); border-radius: 999px; }
.nav a:hover { background: var(--soft); }
.nav a[aria-current="page"] { background: var(--ink); color: #fff; }

/* hero */
.hero { position: relative; padding-block: clamp(36px, 6vw, 84px) clamp(70px, 9vw, 120px); background: var(--sun); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 880px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
.hero-tag { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--ink); color: var(--sun); font-weight: 600; font-size: .88rem; }
.hero h1 { font-size: clamp(2.8rem, 7vw, 5.6rem); line-height: .94; margin: 16px 0 20px; color: var(--ink); }
.c1 { color: var(--brand); } .c2 { color: var(--teal); } .c3 { color: #fff; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }
.hero .lede { color: #3D2B78; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero .btn-primary { background: var(--ink); color: #fff; }
.hero .btn-ghost { border-color: var(--ink); border-width: 2px; }
.chips { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.chips li { display: grid; padding: 8px 8px 10px; border-radius: 12px; background: #fff; box-shadow: 0 14px 30px -18px rgba(45,27,105,.6); transform: rotate(var(--r)); transition: transform .3s; }
.chips li:hover { transform: rotate(0) scale(1.04); }
.chips i { aspect-ratio: 1 / 1.1; border-radius: 8px; background: var(--c); border: 1px solid rgba(0,0,0,.06); }
.chips span { margin-top: 8px; font: 700 .92rem var(--head); }
@media (prefers-reduced-motion: reduce) { .chips li { transform: none; } }
.drips { position: absolute; left: 0; right: 0; bottom: -1px; height: 46px; background: radial-gradient(circle at 20px 0, var(--sun) 18px, transparent 19px) 0 0 / 60px 46px repeat-x, var(--bg); clip-path: none; }
.svc article { border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.svc-ico { background: var(--sun); color: var(--ink); border-radius: 50%; }
.grid-accent li:nth-child(2) .svc-ico { background: var(--brand); }
.band-ink { background: var(--ink); color: #fff; }
.promise { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 760px) { .promise { grid-template-columns: 1fr 1fr; } }
.promise b { display: block; font: 800 clamp(2.2rem, 5vw, 3.4rem)/1 var(--head); }
.promise div:nth-child(1) b { color: var(--sun); } .promise div:nth-child(2) b { color: var(--brand); } .promise div:nth-child(3) b { color: #5FE0E0; } .promise div:nth-child(4) b { color: #fff; }
.promise span { color: #CFC4EC; }
.p-card, .quotes li, .steps li { border: 2px solid var(--ink); }
.p-filters button { border-width: 2px; border-color: var(--ink); border-radius: 999px; }
.p-filters button[aria-pressed="true"] { background: var(--brand); color: #fff; border-color: var(--brand); }
.step-n { color: var(--brand); font-size: 2rem; }
.steps li:nth-child(even) .step-n { color: var(--teal); }

/* calculator */
.tool-in .card { border: 2px solid var(--ink); }
.rooms-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.rooms-head h2 { font-size: 1.6rem; margin: 0; }
.rooms-head .btn { min-height: 44px; padding: 8px 16px; border-width: 2px; border-color: var(--ink); }
.room-list { list-style: none; display: grid; gap: 12px; counter-reset: room; }
.room { counter-increment: room; padding: 14px; border-radius: 16px; background: var(--soft); }
.room-top { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.room-top::before { content: counter(room); display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700; }
.room-top .input { min-height: 44px; flex: 1; }
.rm-del { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line-strong); background: #fff; font-size: 1.3rem; cursor: pointer; color: var(--ink); }
.rm-del:disabled { opacity: .35; cursor: default; }
.room-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; align-items: end; }
@media (max-width: 600px) { .room-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.room-grid .field > label { font-size: .8rem; }
.room-grid .input { min-height: 44px; padding: 8px 10px; }
.room-grid .field-error { font-size: .78rem; }
.ceil { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 600; font-size: .92rem; cursor: pointer; }
.ceil input { width: 18px; height: 18px; accent-color: var(--brand); }
.tool-out { background: var(--ink); color: #fff; border: 0; box-shadow: 8px 8px 0 var(--brand); }
.tool-out .eyebrow { color: var(--sun); }
.tool-total { color: #fff; }
.tool-range, .tool-note, .tool-lines dt { color: #CFC4EC; }
.tool-lines div { border-color: rgba(255,255,255,.14); }
.paint-facts { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.paint-facts li { display: grid; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.08); }
.paint-facts b { font: 800 1.35rem var(--head); color: var(--sun); }
.paint-facts span { font-size: .78rem; color: #CFC4EC; }
.paint-facts li:nth-child(2) b { color: #5FE0E0; } .paint-facts li:nth-child(3) b { color: #FF8DB2; }

/* inner pages */
.page-head { background: var(--sun); margin-bottom: clamp(28px, 4vw, 44px); border-bottom: 3px solid var(--ink); }
.page-head h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); }
.page-head .lede { color: #3D2B78; }
.page-head .eyebrow { color: var(--ink); }
.cta-band { background: var(--brand); color: #fff; }
.cta-band .btn-primary { background: var(--ink); }
.cta-band .btn-ghost { color: #fff; border-color: #fff; }
.footer { background: var(--ink); color: #CFC4EC; --footer-line: rgba(255,255,255,.14); }
.footer .logo b { color: #fff; }
.footer .logo small { color: #CFC4EC; }
.footer h2 { color: var(--sun); opacity: 1; }
.footer .credit a { color: #fff; }