/* ============================================================
   Creekside marketing site — base styles
   Variables come from colors_and_type.css
   ============================================================ */

* { box-sizing: border-box; }

.cks-site {
  background: var(--paper);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  width: 100%;
  overflow: hidden;
}

.container { max-width: 1180px; margin: 0 auto; padding: 0 40px; width: 100%; }
.container-wide { max-width: 1280px; margin: 0 auto; padding: 0 56px; width: 100%; }

/* ============ Reset within site ============ */
.cks-site h1, .cks-site h2, .cks-site h3, .cks-site h4, .cks-site h5,
.cks-site p, .cks-site ul, .cks-site ol, .cks-site figure { margin: 0; padding: 0; }
.cks-site ul, .cks-site ol { list-style: none; }
.cks-site a { color: inherit; text-decoration: none; }
.cks-site button { font: inherit; cursor: pointer; }
.cks-site img, .cks-site svg { display: block; max-width: 100%; }

/* ============ TOP BAR ============ */
.topbar {
  background: var(--paper);
  border-bottom: 1px solid var(--stone-200);
  padding: 14px 0;
}
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 100px; height: auto; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.brand-mark img { width: 100%; height: auto; object-fit: contain; }
.brand-wordmark { font-family: var(--font-display); font-weight: 900; font-size: 24px; text-transform: uppercase; letter-spacing: 0.01em; color: var(--stone-900); line-height: 1; }
.brand-sub { font-family: var(--font-mono); font-size: 10px; color: var(--stone-500); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px; }
.nav { display: flex; gap: 28px; align-items: center; }
.nav-link { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--stone-700); text-transform: uppercase; letter-spacing: 0.08em; padding: 6px 0; white-space: nowrap; position: relative; transition: color 120ms; }
.nav-link:hover { color: var(--stone-900); }
.nav-link.active { color: var(--stone-900); }
.nav-link.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rust-600); }
.tb-actions { display: flex; gap: 14px; align-items: center; }
.phone-link { font-family: var(--font-mono); font-size: 13px; color: var(--stone-700); white-space: nowrap; transition: color 120ms; }
.phone-link:hover { color: var(--rust-600); }

/* Dark topbar variant */
.topbar.dark { background: var(--pine-900); border-bottom: 1px solid var(--pine-700); }
.topbar.dark .brand-wordmark { color: var(--cream); }
.topbar.dark .brand-sub { color: var(--pine-300); }
.topbar.dark .brand-mark img { filter: invert(1) sepia(0.08) hue-rotate(330deg) brightness(0.95); }
.topbar.dark .nav-link { color: var(--pine-200); }
.topbar.dark .nav-link:hover, .topbar.dark .nav-link.active { color: var(--cream); }
.topbar.dark .phone-link { color: var(--pine-200); }

/* ============ BUTTONS ============ */
.btn { font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 1; padding: 13px 22px; border-radius: var(--radius-sm); border: 1px solid transparent; transition: background 120ms, color 120ms, transform 120ms, box-shadow 120ms; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.btn-primary { background: var(--pine-700); color: var(--cream); }
.btn-primary:hover { background: var(--pine-800); }
.btn-accent { background: var(--rust-600); color: var(--cream); }
.btn-accent:hover { background: var(--rust-700); }
.btn-ghost { background: transparent; color: var(--stone-900); border-color: var(--stone-900); }
.btn-ghost:hover { background: var(--stone-900); color: var(--cream); }
.btn-ghost-light { background: transparent; color: var(--cream); border-color: var(--cream); }
.btn-ghost-light:hover { background: var(--cream); color: var(--stone-900); }
.btn-stamp { background: var(--bone); color: var(--stone-900); border: 2px solid var(--stone-900); box-shadow: 4px 4px 0 0 var(--stone-900); font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 14px 24px; font-size: 16px; }
.btn-stamp:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 0 var(--stone-900); }
.btn-large { padding: 18px 28px; font-size: 16px; }
.btn-xl { padding: 22px 32px; font-size: 18px; }

/* ============ Generic ============ */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  color: var(--bark-500);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow.with-rule::after { content: ""; height: 1px; width: 48px; background: currentColor; }
.eyebrow.light { color: var(--pine-300); }

.h-display { font-family: var(--font-display); font-weight: 900; line-height: 0.95; letter-spacing: -0.015em; text-transform: uppercase; color: var(--stone-900); }

/* ============ FOOTER (shared base) ============ */
.footer { background: var(--pine-900); color: var(--cream); padding: 72px 0 36px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 56px; }
.footer h5 { font-family: var(--font-body); font-size: 11px; font-weight: 700; color: var(--pine-300); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 16px; }
.footer-col ul { display: grid; gap: 10px; }
.footer-col a { color: var(--pine-100); font-size: 14px; transition: color 120ms; }
.footer-col a:hover { color: var(--rust-500); }
.footer-brand img { width: 150px; height: auto; margin-bottom: 18px; filter: invert(1) sepia(0.08) hue-rotate(330deg) brightness(0.95); }
.footer-brand p { color: var(--pine-200); font-size: 14px; line-height: 1.55; margin: 0 0 18px; max-width: 32ch; }
.footer-bottom { border-top: 1px solid var(--pine-700); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--pine-400); letter-spacing: 0.04em; }

/* ============ Photo card frame ============ */
.photo-frame { position: relative; overflow: hidden; background: var(--bark-900); }
.photo-frame > svg { display: block; width: 100%; height: 100%; }
.photo-frame > img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* SVG photo plates fill their containers (whether used directly or via Photo fallback) */
.cks-site .photo-plate > svg,
.cks-site .about-plate > svg,
.cks-site .hero-photo .frame > svg,
.cks-site .svc-photo > svg,
.cks-site .about-photo > svg,
.cks-site .bg-plate > svg { display: block; width: 100%; height: 100%; }

/* shared utility classes */
.grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(31,29,25,0.10) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: 0.5;
  mix-blend-mode: multiply;
}