/* KitchenKraft: fresh white, deep green, mint and coral. Outfit for headings, Manrope for text.
   Change the colours and fonts here; base.css reads these variables. */
:root {
  --bg: #F7F8F6;
  --surface: #FFFFFF;
  --soft: #EEF5F2;
  --ink: #15302B;
  --muted: #536B65;
  --line: #DFE9E5;
  --line-strong: #BFD3CB;
  --brand: #1E4D45;
  --brand-hover: #163B35;
  --brand-ink: #FFFFFF;
  --brand-text: #1E6A5C;
  --mint: #CFE8DF;
  --coral: #F06D4F;
  --eyebrow: #C4472B;
  --head: "Outfit", system-ui, sans-serif;
  --body: "Manrope", system-ui, sans-serif;
  --radius: 14px;
  --radius-lg: 26px;
  --btn-radius: 999px;
  --wrap: 1200px;
  --gap: 22px;
}
h1, h2, h3 { font-weight: 600; letter-spacing: -.02em; }
.btn { font-weight: 700; }
.btn-primary { background: var(--coral); color: #fff; }
.btn-primary:hover { background: #DB5739; }

/* header: floating pill */
.header { padding-top: 12px; background: linear-gradient(var(--bg) 70%, transparent); }
.header > .wrap { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding-inline: 10px 10px; box-shadow: 0 12px 30px -24px rgba(21,48,43,.5); min-height: 64px; }
.logo b { font: 700 1.25rem/1 var(--head); color: var(--brand); }
.logo small { font-size: .72rem; color: var(--muted); }
.nav a { font-weight: 600; color: var(--muted); border-radius: 999px; }
.nav a:hover { background: var(--soft); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--mint); color: var(--brand); }
.header .btn { min-height: 44px; padding: 8px 18px; }
.nav-toggle { border-radius: 999px; width: 44px; height: 44px; }
@media (max-width: 960px) { .nav-open .nav { top: calc(100% + 6px); border-radius: 22px; border: 1px solid var(--line); } }

/* hero */
.hero { padding-block: clamp(20px, 3vw, 40px) clamp(32px, 5vw, 64px); }
.hero-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center; padding: clamp(24px, 4vw, 56px); border-radius: 36px; background: var(--brand); color: #fff; }
@media (max-width: 880px) { .hero-card { grid-template-columns: minmax(0, 1fr); } }
.hero .eyebrow { color: var(--mint); }
.hero h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); line-height: 1.02; margin: 14px 0 18px; }
.hero h1 span { color: var(--mint); }
.hero .lede { color: #CFE1DB; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.hero-art { position: relative; margin: 0; }
.hero-art svg { width: 100%; height: auto; border-radius: 24px; }
.tag { position: absolute; left: -14px; bottom: -14px; display: grid; padding: 12px 18px; border-radius: 18px; background: var(--coral); color: #fff; box-shadow: 0 16px 30px -16px rgba(0,0,0,.5); transform: rotate(-3deg); }
.tag small { font-size: .78rem; opacity: .9; }
.tag b { font: 700 1.6rem/1.1 var(--head); }
@media (max-width: 520px) { .tag { left: 8px; bottom: 8px; } }
.usp { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
@media (max-width: 760px) { .usp { grid-template-columns: 1fr 1fr; } }
.usp li { display: grid; padding: 16px 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.usp b { font: 600 1.1rem var(--head); color: var(--brand); }
.usp span { color: var(--muted); font-size: .9rem; }
.layouts { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--gap); }
.layouts li { padding: 24px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.layouts svg { width: 90px; height: 68px; color: var(--brand); margin-bottom: 10px; }
.layouts li:nth-child(2) svg { color: var(--coral); }
.layouts h3 { font-size: 1.25rem; margin-bottom: 4px; }
.layouts p { color: var(--muted); }
.svc-ico { background: var(--mint); color: var(--brand); border-radius: 50%; }
.step-n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--mint); color: var(--brand); font-size: 1.1rem; }

/* configurator */
.tool-in fieldset.card > legend { float: left; width: 100%; padding: 0; margin-bottom: 14px; font: 600 1.2rem var(--head); }
.tool-in fieldset.card > legend + * { clear: both; }
.tool-in .card.form-row { display: grid; }
.layouts-pick span { text-align: center; }
.walls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.walls [hidden] { display: none; }
@media (max-width: 520px) { .walls { grid-template-columns: 1fr 1fr; } }
.tool-out { border-radius: 30px; box-shadow: 0 30px 60px -40px rgba(21,48,43,.6); }
.tool-svg { background: var(--soft); border: 0; border-radius: 20px; }
.tool-svg svg { max-height: 300px; margin-inline: auto; }
.k-room { fill: #fff; stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 6 5; }
.k-run { fill: var(--mint); stroke: var(--brand); stroke-width: 2; }
.k-lbl { font: 700 12px var(--body); fill: var(--brand); text-anchor: middle; }
.k-sink { fill: #fff; stroke: var(--brand); stroke-width: 2; }
.k-hob circle { fill: none; stroke: var(--coral); stroke-width: 3; }
.k-tall { fill: var(--brand); }
.k-tall + .k-lbl { fill: #fff; }
.tool-total { color: var(--brand); }

/* inner pages */
.page-head { margin-bottom: clamp(24px, 4vw, 40px); }
.page-head h1 { font-size: clamp(2.3rem, 5.4vw, 3.8rem); }
.cta-band .wrap { background: var(--coral); color: #fff; border-radius: 36px; padding: clamp(28px, 5vw, 56px); }
.cta-band .btn-primary { background: #fff; color: var(--ink); }
.cta-band .btn-ghost { color: #fff; border-color: rgba(255,255,255,.7); }
.footer { background: var(--brand); color: #CFE1DB; --footer-line: rgba(255,255,255,.14); }
.footer .logo b { color: #fff; }
.footer .logo-mark rect:first-child { fill: #2F7D6D; }
.footer .logo small { color: #CFE1DB; }
.footer h2 { color: var(--mint); opacity: 1; }
.footer .credit a { color: #fff; }