/* SOLID BOOKED - CONSULTANCY WEBSITE */

:root {
  --ink: #1a1a1a;
  --ink-light: #4a4a4a;
  --paper: #fafafa;
  --paper-warm: #f5f3f0;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --border: #e5e5e5;
  --grid: 8px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 18px; line-height: 1.6; color: var(--ink); background: var(--paper);
}

h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.2; margin-bottom: calc(var(--grid) * 3); }
h1 { font-size: 48px; letter-spacing: -0.02em; }
h2 { font-size: 36px; letter-spacing: -0.015em; }
h3 { font-size: 24px; }
p { margin-bottom: calc(var(--grid) * 2); }
a { color: var(--accent); text-decoration: none; transition: color 150ms ease-out; }
a:hover { color: var(--accent-hover); }

.container { max-width: 1120px; margin: 0 auto; padding: 0 calc(var(--grid) * 3); }
section { padding: calc(var(--grid) * 12) 0; }
section:nth-child(even) { background: var(--paper-warm); }
.section-header { font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-light); margin-bottom: calc(var(--grid) * 2); font-weight: 600; }
.text-max { max-width: 680px; }

header { position: sticky; top: 0; background: var(--paper); border-bottom: 1px solid var(--border); z-index: 100; }
header .container { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--grid) * 2) calc(var(--grid) * 3); }
.logo { font-size: 18px; font-weight: 600; color: var(--ink); text-decoration: none; letter-spacing: -0.5px; }
.logo:hover { color: var(--accent); }
nav a { font-size: 15px; color: var(--ink-light); margin-left: calc(var(--grid) * 4); transition: color 150ms ease-out; }
nav a:hover { color: var(--ink); }
.nav-toggle { display: none; background: none; border: none; font-size: 24px; cursor: pointer; color: var(--ink); }

.btn { display: inline-block; padding: calc(var(--grid) * 1.75) calc(var(--grid) * 4); background: var(--accent); color: white; text-decoration: none; border-radius: 6px; font-weight: 600; font-size: 16px; border: none; cursor: pointer; transition: background 150ms ease-out; }
.btn:hover { background: var(--accent-hover); }

.hero { padding: calc(var(--grid) * 16) 0 calc(var(--grid) * 12) 0; }
.hero h1 { font-size: 52px; margin-bottom: calc(var(--grid) * 3); max-width: 900px; }
.hero .subheadline { font-size: 22px; color: var(--ink-light); max-width: 680px; margin-bottom: calc(var(--grid) * 6); line-height: 1.5; }
.hero .supporting { font-size: 14px; color: var(--ink-light); margin-top: calc(var(--grid) * 3); }

.pain-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--grid) * 5); margin-top: calc(var(--grid) * 8); }
.pain-point h3 { font-size: 18px; margin-bottom: calc(var(--grid) * 2); }
.pain-point p { font-size: 16px; color: var(--ink-light); margin-bottom: 0; line-height: 1.6; }

.process { margin-top: calc(var(--grid) * 8); }
.process-step { margin-bottom: calc(var(--grid) * 6); padding-bottom: calc(var(--grid) * 6); border-bottom: 1px solid var(--border); }
.process-step:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.process-number { font-size: 32px; font-weight: 600; color: var(--accent); margin-bottom: calc(var(--grid) * 1); }
.process-step h3 { font-size: 22px; margin-bottom: calc(var(--grid) * 2); }
.process-step p { font-size: 17px; color: var(--ink-light); max-width: 680px; margin-bottom: 0; }

.industries { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--grid) * 3); margin: calc(var(--grid) * 6) 0; }
.industry-item { padding: calc(var(--grid) * 3); background: var(--paper); border: 1px solid var(--border); border-radius: 6px; text-align: center; font-size: 16px; color: var(--ink); transition: border-color 150ms ease-out; }
.industry-item:hover { border-color: var(--accent); }
.qualifying { margin-top: calc(var(--grid) * 4); font-size: 15px; color: var(--ink-light); }

.offer-box { background: var(--paper); padding: calc(var(--grid) * 6); border: 1px solid var(--border); border-radius: 6px; margin: calc(var(--grid) * 6) 0; }
.offer-box h3 { font-size: 24px; margin-bottom: calc(var(--grid) * 3); }
.offer-includes { list-style: none; margin: calc(var(--grid) * 4) 0; }
.offer-includes li { padding: calc(var(--grid) * 1.5) 0; padding-left: calc(var(--grid) * 3); position: relative; font-size: 16px; color: var(--ink-light); }
.offer-includes li:before { content: '—'; position: absolute; left: 0; color: var(--accent); font-weight: 600; }
.investment { margin-top: calc(var(--grid) * 6); padding-top: calc(var(--grid) * 4); border-top: 1px solid var(--border); }
.investment-range { font-size: 24px; font-weight: 600; color: var(--ink); margin-bottom: calc(var(--grid) * 1); }
.investment-detail { font-size: 15px; color: var(--ink-light); }
.contrast-statement { margin-top: calc(var(--grid) * 4); font-size: 15px; color: var(--ink-light); font-style: italic; }

.about-text { font-size: 17px; color: var(--ink-light); line-height: 1.7; max-width: 680px; margin-bottom: calc(var(--grid) * 6); }
.trust-signals { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: calc(var(--grid) * 4); margin-top: calc(var(--grid) * 6); }
.trust-item { font-size: 15px; color: var(--ink-light); }
.trust-label { font-weight: 600; color: var(--ink); display: block; margin-bottom: calc(var(--grid) * 1); }

.cta { text-align: center; padding: calc(var(--grid) * 16) 0; }
.cta h2 { margin-bottom: calc(var(--grid) * 3); }
.cta p { font-size: 18px; color: var(--ink-light); max-width: 680px; margin: 0 auto calc(var(--grid) * 6) auto; }

footer { background: var(--ink); color: var(--paper); padding: calc(var(--grid) * 8) 0; text-align: center; font-size: 14px; }
footer .container { display: flex; justify-content: center; gap: calc(var(--grid) * 6); }
footer a { color: var(--paper); }
footer a:hover { text-decoration: underline; }

.skip-link { position: absolute; top: -40px; left: 0; background: var(--accent); color: white; padding: calc(var(--grid) * 1) calc(var(--grid) * 2); text-decoration: none; z-index: 100; }
.skip-link:focus { top: 0; }

@media (max-width: 1024px) {
  h1 { font-size: 40px; } h2 { font-size: 28px; }
  .hero h1 { font-size: 40px; } .hero .subheadline { font-size: 20px; }
  .pain-points { grid-template-columns: repeat(2, 1fr); }
  .industries { grid-template-columns: repeat(2, 1fr); }
  .trust-signals { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  body { font-size: 16px; } h1 { font-size: 32px; } h2 { font-size: 24px; }
  section { padding: calc(var(--grid) * 8) 0; }
  .container { padding: 0 calc(var(--grid) * 2); }
  header .container { padding: calc(var(--grid) * 1.5) calc(var(--grid) * 2); }
  .logo { font-size: 16px; }
  nav { display: none; position: absolute; top: 56px; right: 0; background: var(--paper); border-bottom: 1px solid var(--border); width: 100%; flex-direction: column; padding: calc(var(--grid) * 3); }
  nav.active { display: flex; }
  nav a { margin: calc(var(--grid) * 2) 0; margin-left: 0; display: block; }
  .nav-toggle { display: block; }
  .hero { padding: calc(var(--grid) * 12) 0 calc(var(--grid) * 8) 0; }
  .hero h1 { font-size: 28px; } .hero .subheadline { font-size: 18px; }
  .pain-points { grid-template-columns: 1fr; }
  .industries { grid-template-columns: 1fr; }
  .offer-box { padding: calc(var(--grid) * 4); }
  .cta { padding: calc(var(--grid) * 12) 0; }
  footer .container { flex-direction: column; gap: calc(var(--grid) * 2); }
  .process-number { font-size: 24px; }
  .process-step h3 { font-size: 18px; }
}