/* =========================================================
   CORE LOOK: Garamond, warm background, readable width
   ========================================================= */
:root{
  --bg: #f6f4f1;
  --text: #202020;
  --muted: rgba(0,0,0,.62);
  --line: rgba(0,0,0,.12);
  --card: rgba(255,255,255,.55);
  --card2: rgba(255,255,255,.35);

  /* Button palette (authoritative) */
  --btn-bg: #2f3a40;
  --btn-bg-hover: #3b4950;
  --btn-text: #ffffff;
  --btn-border: #1f272c;

  --btn2-bg: #f6f4f1;
  --btn2-bg-hover: #efece6;
  --btn2-text: #202020;

  /* Nav accent */
  --nav-accent: #7a1f2b; /* TCL maroon */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: "Garamond","Georgia",serif;
  background: var(--bg);
  color: var(--text);
  line-height:1.6;
}

a{ color: var(--text); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* =========================================================
   CONTAINERS (used by interior pages)
   ========================================================= */
.container{
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 18px;
}

.content-narrow{
  max-width: 980px;
}

.section{
  padding: 22px 0 52px;
}

.muted{
  color: var(--muted);
}

/* =========================================================
   LANDING PAGE HEADER (eel-*)
   ========================================================= */
.eel-container{
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 18px;
}

.eel-header{
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.eel-header-inner{
  max-width: 1040px;
  margin: 0 auto;
  padding: 14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.eel-brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 240px;
}

.eel-logo{
  width: 46px;
  height: 46px;
  object-fit: contain;
  display:block;
}

.eel-site{
  font-size: 1.35rem;
  line-height: 1.1;
  letter-spacing: .2px;
}

.eel-tag{
  font-size: .95rem;
  color: var(--muted);
  margin-top: 2px;
}

/* Landing nav */
.eel-nav{
  display:flex;
  align-items:center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.eel-nav a{
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  text-decoration: none;
}

.eel-nav a:hover{
  border-bottom-color: var(--nav-accent);
  text-decoration:none;
}

.eel-nav a[aria-current="page"]{
  border-bottom-color: var(--nav-accent);
  font-weight: 600;
}

/* IMPORTANT: do NOT make one nav item look like a button */
.eel-nav-cta{
  border: none;
  background: transparent;
}

/* =========================================================
   INTERIOR PAGES HEADER (header-inner / main-nav)
   ========================================================= */
header{
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 0;
}

.branding{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 240px;
}

.site-logo{
  width: 46px;
  height: 46px;
  object-fit: contain;
  display:block;
}

.branding-text .site-title{
  font-size: 1.35rem;
  line-height: 1.1;
  letter-spacing: .2px;
}

.branding-text .site-subtitle{
  font-size: .95rem;
  color: var(--muted);
  margin-top: 2px;
}

/* Interior nav links: match landing style */
.main-nav{
  display:flex;
  align-items:center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.main-nav a{
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  text-decoration: none;
}

.main-nav a:hover{
  border-bottom-color: var(--nav-accent);
  text-decoration:none;
}

.main-nav a[aria-current="page"]{
  border-bottom-color: var(--nav-accent);
  font-weight: 600;
}

/* =========================================================
   MAIN / HERO (landing page)
   ========================================================= */
.eel-main{ padding-bottom: 34px; }

.eel-hero{
  padding: 34px 0 18px;
}

.eel-hero h1{
  font-size: 2.1rem;
  margin: 0 0 10px 0;
}

.eel-lede{
  margin: 0 0 18px 0;
  font-size: 1.15rem;
  color: rgba(0,0,0,.72);
  max-width: 56rem;
}

.eel-hero-actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* =========================================================
   CARDS GRID (landing page)
   ========================================================= */
.eel-grid-section{ padding: 10px 0 26px; }

.eel-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.eel-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 16px 14px;
}

.eel-card h2{
  margin: 0 0 8px 0;
  font-size: 1.35rem;
}

.eel-card p{
  margin: 0 0 10px 0;
  color: rgba(0,0,0,.72);
}

.eel-link{
  font-weight: 600;
  display:inline-block;
}

/* =========================================================
   BOTTOM STRIP (landing page)
   ========================================================= */
.eel-footer-pitch{ padding: 6px 0 24px; }

.eel-strip{
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 14px;
  flex-wrap: wrap;
}

.eel-strip h3{ margin:0 0 6px 0; }
.eel-strip p{ margin:0; color: rgba(0,0,0,.72); }
.eel-strip-actions{ display:flex; gap: 10px; flex-wrap: wrap; }

/* =========================================================
   FOOTERS (both systems)
   ========================================================= */
.eel-footer{
  border-top: 1px solid var(--line);
  padding: 14px 0;
}

.eel-footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
}

.eel-footer-links{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
  color: rgba(0,0,0,.60);
}

.eel-footer-links a{ color: rgba(0,0,0,.80); }

/* Interior footer structure (your newer pages use footer-inner) */
footer{
  border-top: 1px solid var(--line);
  padding: 14px 0;
}

.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
}

/* =========================================================
   CROSS-TRANSIT STRIPS
   ========================================================= */
.cross-transit{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2rem;
}

.contact-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* =========================================================
   BUTTONS — FINAL AUTHORITATIVE OVERRIDE (site-wide)
   ========================================================= */
a.btn, .btn{
  display: inline-block;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.2;

  background-color: var(--btn-bg);
  color: var(--btn-text);

  border: 1px solid var(--btn-border);
  border-radius: 12px;

  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

a.btn:hover, .btn:hover{
  background-color: var(--btn-bg-hover);
  border-color: var(--btn-border);
  text-decoration: none;
}

a.btn:active, .btn:active{
  transform: translateY(1px);
}

a.btn.btn-secondary, .btn.btn-secondary{
  background-color: var(--btn2-bg);
  color: var(--btn2-text);
  border: 1px solid var(--btn-border);
}

a.btn.btn-secondary:hover, .btn.btn-secondary:hover{
  background-color: var(--btn2-bg-hover);
  text-decoration: none;
}

/* Ensure no container overrides button borders */
.eel-hero-actions a.btn,
.eel-strip-actions a.btn,
.cross-transit a.btn,
.contact-actions a.btn{
  border: 1px solid var(--btn-border);
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 820px){
  .eel-grid{ grid-template-columns: 1fr; }
  .eel-hero h1{ font-size: 1.85rem; }
  .eel-logo{ width: 42px; height: 42px; }
  .site-logo{ width: 42px; height: 42px; }
}.cross-transit .btn {
  background-color: #7a1f2b;   /* your dark maroon */
  color: #ffffff;
  border-color: #7a1f2b;
}

.cross-transit .btn:hover,
.cross-transit .btn:focus {
  background-color: #641923;
  border-color: #641923;
}

/* === FINAL BUTTON AUTHORITY (do not override) === */
a.btn, .btn{
  background-color: #2f3a40;
  color: #ffffff;
  border: 1px solid #1f272c;
}

a.btn:hover, .btn:hover{
  background-color: #3b4950;
}

a.btn.btn-secondary, .btn.btn-secondary{
  background-color: #f6f4f1;
  color: #202020;
  border: 1px solid #1f272c;
}

a.btn.btn-secondary:hover, .btn.btn-secondary:hover{
  background-color: #efece6;
}
--btn-bg