/* Pakka Materials: charcoal, cement grey, brick red and sand. Oswald for headings, Source Sans 3 for text.
   Change the colours and fonts here; base.css reads these variables. */
:root {
  --bg: #17181A;
  --surface: #202225;
  --soft: #1C1D20;
  --ink: #EDE6D8;
  --muted: #A8A296;
  --line: #2F3135;
  --line-strong: #46494F;
  --brand: #C8553D;
  --brand-hover: #DA6750;
  --brand-ink: #FFFFFF;
  --brand-text: #E8846D;
  --sand: #E8DCC4;
  --eyebrow: #E8846D;
  --head: "Oswald", "Arial Narrow", sans-serif;
  --body: "Source Sans 3", system-ui, sans-serif;
  --fs-body: 1.06rem;
  --radius: 3px;
  --radius-lg: 4px;
  --btn-radius: 3px;
  --wrap: 1220px;
  --gap: 18px;
  --menu-bg: #17181A;
  --input-bg: #17181A;
  color-scheme: dark;
}
h1, h2, h3 { font-weight: 600; text-transform: uppercase; letter-spacing: .01em; }
h3 { text-transform: none; font-weight: 500; letter-spacing: .02em; }
.btn { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: .92rem; }
.btn-ghost:hover { border-color: var(--sand); }
body { background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px); background-size: 6px 6px; }

/* header */
.header { background: #111214; border-bottom: 3px solid var(--brand); }
.topbar { background: var(--brand); color: #fff; }
.topbar a { color: #fff; }
.logo b { font: 700 1.6rem/1 var(--head); text-transform: uppercase; color: var(--sand); letter-spacing: .04em; }
.logo small { color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; }
.nav a { font: 500 1rem var(--head); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--sand); background: var(--surface); }

/* hero */
.hero { padding-block: clamp(36px, 6vw, 84px); }
.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: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
.hero h1 { font-size: clamp(2.8rem, 7.4vw, 5.6rem); line-height: .98; margin: 16px 0 20px; color: var(--sand); }
.hero h1 span { color: var(--brand); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.board { border: 2px solid var(--line-strong); background: #0F1011; box-shadow: 10px 10px 0 var(--brand); }
.board-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 2px solid var(--line-strong); }
.board-head span { font: 600 1.3rem var(--head); text-transform: uppercase; color: var(--sand); }
.board-head small { color: var(--muted); }
.board table { width: 100%; border-collapse: collapse; }
.board th, .board td { padding: 10px 18px; border-bottom: 1px dashed var(--line-strong); text-align: left; font-weight: 400; }
.board th small { display: block; color: var(--muted); font-size: .8rem; }
.board td { text-align: right; font: 600 1.3rem var(--head); color: #F2B84B; font-variant-numeric: tabular-nums; white-space: nowrap; }
.svc-ico { background: var(--brand); color: #fff; border-radius: 3px; }
.svc article, .p-card, .quotes li, .steps li { border-color: var(--line-strong); }
.step-n { color: var(--brand); font-size: 2.2rem; }
.teaser { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: clamp(24px, 4vw, 40px); border: 2px dashed var(--brand); }
.teaser .sec-title { margin-bottom: 8px; }
.p-filters button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }

/* calculator */
.tool-out { background: var(--sand); color: #1B1A17; border: 0; }
.tool-out .eyebrow { color: #8E3523; }
.tool-total { color: #1B1A17; }
.tool-range, .tool-note { color: #5B5548; }
.mat-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mat-table th, .mat-table td { padding: 9px 6px; border-bottom: 1px solid #CDBF9F; text-align: left; font-size: .95rem; }
.mat-table th { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: #5B5548; font-weight: 600; }
.mat-table td:nth-child(2) { white-space: nowrap; }
.mat-table td:last-child, .mat-table th:last-child { text-align: right; font-weight: 700; white-space: nowrap; }
@media (max-width: 420px) { .mat-table th, .mat-table td { font-size: .86rem; padding: 8px 3px; } }
.tool-out .btn-primary { background: #1B1A17; color: var(--sand); }

/* inner pages */
.page-head { border-bottom: 2px solid var(--line-strong); margin-bottom: clamp(28px, 4vw, 44px); }
.page-head h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); color: var(--sand); }
.cta-band { background: var(--brand); color: #fff; }
.cta-band .btn-primary { background: #111214; }
.cta-band .btn-ghost { color: #fff; border-color: #fff; }
.footer { background: #111214; color: var(--muted); }
.footer h2 { color: var(--sand); opacity: 1; font-family: var(--head); }
.footer .credit a { color: var(--sand); }