/* ==========================================================================
   warm.css: the "front porch" look for the business pages
   --------------------------------------------------------------------------
   Warm paper backgrounds and real Knightdale photos, with the site's own type:
   Barlow Condensed (uppercase) for headings and labels, Barlow for text. Used by the homepage
   and the services page. The resident guides keep their dark navy look.

   Pages that use it:
     <link rel="stylesheet" href="/css/nav.css">
     <link rel="stylesheet" href="/css/warm.css">
     <body class="warm">          (turns on the light nav bar in nav.css)
   and load the fonts:
     Barlow Condensed 600-800, Barlow 400-600

   Page-specific layout stays in each page's own <style> block.
   ========================================================================== */

:root {
  /* Brand palette. nav.css reads the first block. */
  --navy: #080f18;
  --navy-mid: #0d1b2a;
  --navy-light: #122b42;
  --teal: #3dbfbf;
  --teal-dark: #2a9a9a;
  --orange: #e8832a;
  --green: #7ab648;
  --white: #ffffff;
  --white-dim: rgba(255,255,255,0.8);
  --white-faint: rgba(255,255,255,0.08);

  /* Warm palette. The *-ink colours are the brand colours darkened enough
     to pass WCAG AA as text on paper. */
  --paper: #f7f2e9;
  --paper-deep: #efe6d6;
  --card: #fffdf8;
  --ink: #14212f;
  --ink-soft: #3c4a58;
  --ink-mute: #5e6975;
  --line: rgba(20,33,47,0.12);
  --teal-ink: #1b7272;
  --orange-ink: #9a4d0c;
  --green-ink: #4a7a22;

  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --teal-head: #2a9a9a; /* brand teal-dark: 3:1 on paper, for large heading accents */
  --body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --label: 'Barlow Condensed', 'Arial Narrow', sans-serif;

  --gutter: clamp(1rem, 4vw, 3rem);
  --radius: 18px;
  --shadow: 0 1px 2px rgba(20,33,47,0.06), 0 8px 24px rgba(20,33,47,0.08);
  --shadow-lift: 0 2px 4px rgba(20,33,47,0.08), 0 16px 36px rgba(20,33,47,0.14);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  background: var(--ink); color: #fff; padding: 0.6rem 1rem; border-radius: 8px;
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 0.75rem; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }

/* ── TYPE ── */
h1, h2, h3 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.98;
}
h3 { font-weight: 700; letter-spacing: 0.03em; line-height: 1.05; }
/* Accent words in headings: plain brand colour, like the rest of the site */
h1 em, h2 em, h3 em { font-style: normal; font-weight: inherit; color: var(--teal-head); }
.accent-orange { color: var(--orange); }
.eyebrow {
  font-family: var(--label);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-ink);
  margin-bottom: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow svg { width: 18px; height: 18px; flex-shrink: 0; }
.section-title { font-size: clamp(2rem, 4.2vw, 3rem); margin-bottom: 1rem; }
.section-lead { font-size: 1.12rem; max-width: 60ch; color: var(--ink-soft); }
.section { padding: clamp(4rem, 9vw, 6.5rem) 0; }
.section.deep { background: var(--paper-deep); }
.section-head { margin-bottom: clamp(2rem, 5vw, 3rem); }
.section-head.split { display: grid; grid-template-columns: 1fr minmax(0, 0.95fr); align-items: end; gap: 1.25rem 3.5rem; }
.section-head.split .section-title { margin-bottom: 0; }
.section-head.split .section-lead { padding-bottom: 0.35rem; }

/* ── BUTTONS & LINKS ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--body); font-weight: 600; font-size: 1.02rem;
  padding: 0.95rem 1.5rem; border-radius: 999px; text-decoration: none;
  border: 2px solid transparent; cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--teal); color: var(--navy); box-shadow: 0 6px 18px rgba(61,191,191,0.35); }
.btn-primary:hover { background: var(--ink); color: #fff; box-shadow: 0 8px 22px rgba(20,33,47,0.25); }
.btn-outline { background: transparent; color: var(--ink); border-color: rgba(20,33,47,0.25); }
.btn-outline:hover { border-color: var(--ink); background: var(--card); }
.text-link {
  font-weight: 600; color: var(--teal-ink); text-decoration: none;
  border-bottom: 2px solid rgba(27,114,114,0.25); padding-bottom: 1px;
  transition: border-color 0.2s, color 0.2s;
}
.text-link:hover { border-color: var(--teal-ink); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* The footer has its own stylesheet, /css/footer.css, shared with the guide pages. */

/* ── REVEAL ON SCROLL ──
   Pages add the .js class to <html> from an inline script, so nothing is
   hidden when scripts don't run. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .section-head.split { grid-template-columns: 1fr; }
}