/* ==========================================================================
   Trades Get Discovered — shared stylesheet
   One file for a 7-page static site with no build step. All colours, type
   and spacing are defined as CSS custom properties below so the palette
   can be swapped in one place if the brand changes later.
   ========================================================================== */

:root {
  /* Colour palette: deep navy (trust, B2B) + a single confident teal accent.
     Deliberately avoids orange/hi-vis/hard-hat visual cliches — this site
     sells web/marketing services TO tradespeople, it isn't a trade site. */
  --navy-900: #081527;
  --navy-800: #0b1f3a;
  --navy-700: #12294f;
  --navy-600: #1c3a68;
  --teal-600: #0f766e;   /* accent, text-safe on white (AA contrast) */
  --teal-500: #14b8a6;   /* accent, backgrounds/buttons */
  --teal-400: #2dd4bf;   /* accent, highlights on dark backgrounds */

  --ink: #16202e;         /* body text on light backgrounds */
  --ink-soft: #46566b;    /* secondary text on light backgrounds */
  --paper: #ffffff;
  --paper-alt: #f4f7fa;   /* alternating section background */
  --line: #dde4ec;        /* borders/dividers on light backgrounds */

  --on-navy: #eef3f8;      /* body text on navy backgrounds */
  --on-navy-soft: #b7c6db; /* secondary text on navy backgrounds */

  --radius: 10px;
  --shadow: 0 4px 18px rgba(8, 21, 39, 0.08);
  --max-width: 1120px;

  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 16px;
}
img { max-width: 100%; display: block; }

/* Type scale: consistent, deliberate steps rather than raw browser defaults
   (h4 previously matched body text size — no hierarchy). */
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 0.5em; color: var(--navy-800); font-weight: 800; }
h1 { font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem); }
h2 { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); }
h3 { font-size: 1.125rem; font-weight: 700; }
h4 { font-size: 1rem; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--teal-600); }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }

/* Visible keyboard focus on every interactive element */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--teal-500);
  outline-offset: 2px;
}

/* Respect reduced-motion for the hover/press motion introduced below */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--teal-600);
  color: #fff;
  padding: 0.75em 1em;
  z-index: 1000;
  border-radius: 0 0 6px 0;
}
.skip-link:focus {
  left: 0;
}

/* ---------- Layout helpers ---------- */
.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}
section { padding: 56px 0; }
.section-alt { background: var(--paper-alt); }
.section-navy { background: var(--navy-800); color: var(--on-navy); }
.section-navy h2, .section-navy h3 { color: #fff; }
.section-navy p { color: var(--on-navy-soft); }

.center { text-align: center; }
.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-600);
  margin-bottom: 0.6em;
}
.section-navy .eyebrow { color: var(--teal-400); }
.lede {
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 640px;
}
.center .lede { margin-left: auto; margin-right: auto; }

.grid {
  display: grid;
  gap: 24px;
}
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 860px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover { box-shadow: var(--shadow); border-color: var(--teal-500); }
.section-alt .card { background: var(--paper); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
  padding: 0.85em 1.6em;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  font-size: 1rem;
  font-family: inherit;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(8, 21, 39, 0.16); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn-primary {
  background: var(--teal-500);
  color: var(--navy-900);
}
.btn-primary:hover { background: var(--teal-400); }
.btn-outline {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.btn-outline:hover { background: rgba(255, 255, 255, 0.08); }
.section:not(.section-navy) .btn-outline { border-color: var(--navy-800); color: var(--navy-800); }
.section:not(.section-navy) .btn-outline:hover { background: var(--paper-alt); }
.btn-block { display: block; width: 100%; text-align: center; }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.btn[disabled]:hover { transform: none; box-shadow: none; }

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------- Header ---------- */
/*
  Shared header/footer markup is REPEATED on every page rather than loaded
  via a JS include (fetch + innerHTML).

  Tradeoff: a JS include avoids duplicating this markup once, but it means
  the header/nav don't exist in the initial HTML response — they flash in
  after JS runs, layout can shift, and anything relying on the DOM before
  that point (no-JS agents, some crawlers, accessibility tooling) sees a
  broken page. For a 7-page static site with no build step, the small
  duplication cost is worth the reliability. If this grows into a larger
  site, switch to a static-site generator (11ty/Astro) or a build step
  that inlines a real template at build time, rather than a runtime fetch.
*/
.site-header {
  background: var(--navy-800);
  color: var(--on-navy);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  gap: 16px;
}
.logo {
  font-weight: 800;
  font-size: 1.15rem;
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.logo .logo-accent { color: var(--teal-400); }

/* No-JS-dependent responsive nav: <details>/<summary> collapses on mobile,
   is unwrapped visually on wider screens via display:contents. */
.nav-toggle { position: relative; }
.nav-toggle > summary {
  list-style: none;
  cursor: pointer;
  color: #fff;
  background: var(--navy-700);
  border: 1px solid var(--navy-600);
  border-radius: 6px;
  padding: 0.5em 0.9em;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: 0.95rem;
}
.nav-toggle > summary::-webkit-details-marker { display: none; }
.nav-toggle > summary::after { content: " \25BE"; }
.nav-toggle[open] > summary::after { content: " \25B4"; }
.nav-toggle ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 8px;
  background: var(--navy-700);
  border-radius: 8px;
  position: absolute;
  right: 0;
  min-width: 200px;
  box-shadow: var(--shadow);
  animation: nav-dropdown-in 0.15s ease;
}
@keyframes nav-dropdown-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.nav-toggle li a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.6em 0.8em;
  color: var(--on-navy);
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-toggle li a:hover,
.nav-toggle li a[aria-current="page"] { background: var(--navy-600); color: #fff; }

@media (min-width: 780px) {
  .nav-toggle { display: contents; }
  .nav-toggle > summary { display: none; }
  .nav-toggle ul {
    display: flex;
    gap: 4px;
    position: static;
    background: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
  }
  .nav-toggle li a { padding: 0.5em 0.7em; }
}

.header-cta { display: none; }
@media (min-width: 780px) {
  .header-cta {
    display: inline-block;
  }
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(160deg, var(--navy-900), var(--navy-800) 60%, var(--navy-700));
  color: var(--on-navy);
  padding: 64px 0;
}
.hero h1 { color: #fff; font-size: clamp(2rem, 5vw, 3rem); }
.hero .lede { color: var(--on-navy-soft); max-width: 640px; font-size: 1.2rem; }
.hero-note {
  margin-top: 28px;
  font-size: 0.9rem;
  color: var(--on-navy-soft);
  border-top: 1px solid var(--navy-600);
  padding-top: 18px;
  max-width: 640px;
}

/* Scannable, honest reassurance strip under a hero's primary CTA — restates
   claims already made in the lede, just skimmable at a glance. */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}
.trust-strip li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--on-navy);
}
.trust-strip svg { width: 18px; height: 18px; color: var(--teal-400); flex-shrink: 0; }

.page-hero {
  background: var(--navy-800);
  color: var(--on-navy);
  padding: 48px 0;
}
.page-hero h1 { color: #fff; margin-bottom: 0.3em; }
.breadcrumb {
  font-size: 0.85rem;
  color: var(--on-navy-soft);
  margin-bottom: 12px;
}
.breadcrumb a { color: var(--on-navy-soft); }

/* ---------- Step list (how it works) ---------- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.steps li:last-child { border-bottom: none; }
.steps li::before {
  content: counter(step);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy-800);
  color: #fff;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.steps h3 { margin-bottom: 0.2em; }

/* ---------- Objection / FAQ ---------- */
details.faq {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px 20px;
  margin-bottom: 12px;
  background: var(--paper);
}
details.faq > summary {
  cursor: pointer;
  font-weight: 700;
  padding: 16px 0;
  list-style: none;
}
details.faq > summary::-webkit-details-marker { display: none; }
details.faq > summary::before { content: "+ "; color: var(--teal-600); }
details.faq[open] > summary::before { content: "\2212 "; }
details.faq p { padding-bottom: 16px; margin: 0; color: var(--ink-soft); }

/* ---------- Placeholder blocks ---------- */
.placeholder {
  border: 2px dashed #b9c4d1;
  border-radius: var(--radius);
  background: var(--paper-alt);
  padding: 24px;
  color: var(--ink-soft);
  text-align: center;
}
.placeholder strong { color: var(--navy-800); display: block; margin-bottom: 6px; }

/* ---------- Cards: services / trust ---------- */
.icon-tile {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--navy-800);
  color: var(--teal-400);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-weight: 800;
}
.icon-tile svg { width: 24px; height: 24px; }

/* ---------- Form ---------- */
form { max-width: 640px; }
.form-row { display: grid; gap: 16px; margin-bottom: 16px; }
@media (min-width: 560px) {
  .form-row.two { grid-template-columns: 1fr 1fr; }
}
label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 6px;
  color: var(--navy-800);
}
input, textarea, select {
  width: 100%;
  padding: 0.75em 0.9em;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
}
textarea { min-height: 140px; resize: vertical; }
input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown) {
  border-color: #c0392b;
}
.field-error {
  color: #b3261e;
  font-size: 0.85rem;
  margin-top: 4px;
  display: none;
}
.field-error.show { display: block; }
.form-status {
  padding: 14px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-weight: 600;
  display: none;
}
.form-status.show { display: block; }
.form-status.success { background: #e3f6ee; color: #0f5132; border: 1px solid #a6e4c8; }
.form-status.error { background: #fdecea; color: #7a271a; border: 1px solid #f3b6ae; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-900);
  color: var(--on-navy-soft);
  padding: 48px 0 24px;
  margin-top: 64px;
}
.footer-grid {
  display: grid;
  gap: 32px;
  margin-bottom: 32px;
}
@media (min-width: 700px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}
.footer-grid h4 { color: #fff; font-size: 0.95rem; margin-bottom: 12px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 8px; }
.footer-grid a { color: var(--on-navy-soft); text-decoration: none; }
.footer-grid a:hover { color: #fff; text-decoration: underline; }
.footer-logo { color: #fff; font-weight: 800; font-size: 1.1rem; text-decoration: none; }
.footer-logo .logo-accent { color: var(--teal-400); }
.footer-bottom {
  border-top: 1px solid var(--navy-700);
  padding-top: 20px;
  font-size: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
}
.footer-bottom a { color: var(--on-navy-soft); }

/* ---------- Utility ---------- */
.mt-0 { margin-top: 0; }
.text-soft { color: var(--ink-soft); }
.small { font-size: 0.85rem; }
.tag {
  display: inline-block;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.3em 0.9em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--navy-800);
}