/* ==========================================================================
   Site stylesheet: one file for every page. Mobile-first: base styles are for
   phones; @media (min-width: ...) blocks add tablet/desktop layout.
   BRAND: change only the variables in :root to re-skin a site.
   ========================================================================== */

:root {
  /* Brand colors, sampled from the WestTX Social sunset logo.
     #0047AB with white text = 8.6:1 contrast (passes WCAG AA/AAA). Orange/gold are decoration only. */
  --color-primary: #0047AB;        /* logo blue: buttons, links */
  --color-primary-dark: #0B2E6B;   /* deep evening blue: hover, dark sections */
  --color-accent: #FF914D;         /* logo orange ("WEST") */
  --color-accent-soft: #FFF1DC;    /* sunset cream: tinted sections */
  --color-gold: #FDBA35;           /* logo gold (bottom of the sun) */

  /* Neutrals */
  --color-text: #1f2937;
  --color-muted: #4b5563;
  --color-bg: #ffffff;
  --color-bg-alt: #f7f7f5;
  --color-border: #e5e7eb;

  /* Type */
  --font-heading: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-script: "Yellowtail", "Brush Script MT", cursive;   /* echoes "Social Media Marketing" in the logo */
  --text-base: 1.0625rem;

  /* Hero background: the logo's sunset. Mobile: top-to-bottom (text sits on the blue part). */
  --hero-bg: linear-gradient(180deg, #0B2E6B 0%, #0047AB 60%, #B0839A 78%, #FDA67A 90%, #FDBA35 100%);
  --hero-text: #ffffff;

  /* Shape */
  --radius: 14px;
  --shadow: 0 6px 24px rgba(17, 24, 39, 0.08);
  --container: 1120px;
  --header-height: 72px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-underline-offset: 3px; }
a:hover { color: var(--color-primary-dark); }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.15;
  margin: 0 0 0.6em;
  color: var(--color-text);
}
h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.7rem, 4.2vw, 2.5rem); }
h3, .h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }

.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 100; background: var(--color-bg); padding: 0.6rem 1rem; border-radius: 8px; }
.skip-link:focus { top: 1rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border: 2px solid var(--color-primary);
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font: 700 1rem/1 var(--font-heading);
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, transform 0.15s;
}
.btn:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--color-primary); }
.btn-outline:hover { background: var(--color-primary); color: #fff; }
.btn-light { background: #fff; border-color: #fff; color: var(--color-primary-dark); }
.btn-light:hover { background: transparent; color: #fff; border-color: #fff; }
.btn-ghost { background: transparent; border-color: rgba(255, 255, 255, 0.8); color: #fff; }
.btn-ghost:hover { background: #fff; border-color: #fff; color: var(--color-primary-dark); }
.btn-small { padding: 0.6rem 1.1rem; font-size: 0.95rem; }
.btn[disabled] { opacity: 0.6; cursor: wait; transform: none; }

/* ---------- Header & navigation ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-height); gap: 1rem; }
.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--color-text); font: 800 1.05rem/1.2 var(--font-heading); }
.brand img { width: 52px; height: 52px; object-fit: contain; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
}
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after {
  display: block; width: 24px; height: 2.5px; border-radius: 2px; background: var(--color-text);
  transition: transform 0.2s, opacity 0.2s; content: "";
}
.nav-toggle .bars { position: relative; }
.nav-toggle .bars::before { position: absolute; top: -7px; }
.nav-toggle .bars::after { position: absolute; top: 7px; }
.nav-toggle[aria-expanded="true"] .bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after { transform: translateY(-7px) rotate(-45deg); }

.site-nav {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow);
}
.site-nav.is-open { display: block; }
.site-nav ul { list-style: none; margin: 0; padding: 0.5rem 1.25rem 1.25rem; }
.site-nav a { display: block; padding: 0.8rem 0.25rem; text-decoration: none; color: var(--color-text); font-weight: 600; }
.site-nav a[aria-current="page"]:not(.btn) { color: var(--color-primary); }
.site-nav .btn { margin-top: 0.5rem; color: #fff; }

@media (min-width: 860px) {
  .nav-toggle { display: none; }
  .site-nav { display: block; position: static; background: none; border: 0; box-shadow: none; }
  .site-nav ul { display: flex; align-items: center; gap: 0.35rem; padding: 0; }
  .site-nav a { padding: 0.5rem 0.75rem; border-radius: 8px; }
  .site-nav a:not(.btn):hover { background: var(--color-bg-alt); }
  .site-nav a[aria-current="page"]:not(.btn) { box-shadow: inset 0 -3px 0 var(--color-accent); border-radius: 0; }
  .site-nav .btn { margin: 0 0 0 0.5rem; padding: 0.6rem 1.1rem; }
}

/* ---------- Sections ---------- */
.section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.section-alt { background: var(--color-bg-alt); }
.section-tint { background: var(--color-accent-soft); }
.section-dark { background: var(--color-primary-dark); color: #fff; }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-head { max-width: 46rem; margin: 0 auto 2.5rem; text-align: center; }
.eyebrow {
  display: inline-block; margin-bottom: 0.75rem;
  font: 800 0.8rem/1 var(--font-heading); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-primary);
}
.section-dark .eyebrow { color: var(--color-accent); }
.lead { font-size: 1.2rem; color: var(--color-muted); }
.section-dark .lead { color: rgba(255, 255, 255, 0.85); }

/* ---------- Hero ---------- */
.hero { background: var(--hero-bg); color: var(--hero-text); padding-block: clamp(3.5rem, 10vw, 7rem); overflow: hidden; }
.hero h1 { color: var(--hero-text); }
.hero .lead { color: var(--hero-text); opacity: 0.92; }
.hero-inner { display: grid; gap: 2.5rem; align-items: center; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.75rem; }
.hero-actions.is-centered { justify-content: center; }
.hero-media img { width: min(65%, 440px); margin-inline: auto; }
@media (min-width: 860px) { .hero-media img { width: min(100%, 440px); } }
@media (min-width: 860px) {
  .hero-inner { grid-template-columns: 1.15fr 0.85fr; }
}

.page-hero { background: var(--hero-bg); color: var(--hero-text); padding-block: clamp(3rem, 8vw, 5rem); text-align: center; }
.page-hero h1 { color: var(--hero-text); margin-bottom: 0.3em; }
.page-hero p { max-width: 40rem; margin-inline: auto; font-size: 1.15rem; opacity: 0.92; }

/* ---------- Layout helpers ---------- */
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split-reverse > :first-child { order: 2; }
}
.split img { width: 100%; max-height: 32rem; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.split img.portrait { object-position: center top; }
.split img.portrait-seated { object-position: center 35%; }
.split-top { align-items: start; }
.split img.contact-photo { margin-top: 1.5rem; }
.prose { max-width: 44rem; }
.center { text-align: center; }
.stack-lg > * + * { margin-top: 2rem; }
.actions-after { margin-top: 2rem; }

/* ---------- Cards ---------- */
.card-grid { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.card {
  display: flex; flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
/* Fixed 4:3 frame: the photo is cropped to fit, so tall and wide photos line up. */
.card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-bg-alt); }
.card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-media img.crop-lower { object-position: center 60%; }
.card-media img.crop-bottom { object-position: center 90%; }
.card-body { padding: 1.4rem 1.4rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { margin-bottom: 0.4em; }
.card-body p { color: var(--color-muted); }
.card-body .price { margin-top: auto; padding-top: 0.75rem; font-weight: 800; color: var(--color-primary-dark); }

/* ---------- Testimonials ---------- */
.quote-grid { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .quote-grid { grid-template-columns: repeat(3, 1fr); } }
.quote {
  margin: 0; padding: 1.75rem;
  background: var(--color-bg); border-radius: var(--radius); box-shadow: var(--shadow);
  border-top: 5px solid var(--color-accent);
  display: flex; flex-direction: column;
}
.quote blockquote { margin: 0 0 1.25rem; font-size: 1.05rem; }
.quote blockquote::before { content: "\201C"; display: block; font: 800 3rem/0.8 Georgia, serif; color: var(--color-accent); }
.quote figcaption { margin-top: auto; color: var(--color-muted); font-size: 0.95rem; }
.quote figcaption strong { display: block; color: var(--color-text); font-size: 1.05rem; }

/* ---------- Call to action band ---------- */
.cta-band { background: var(--hero-bg); color: var(--hero-text); text-align: center; padding-block: clamp(3rem, 7vw, 4.5rem); }
.cta-band h2 { color: var(--hero-text); }
.cta-band p { max-width: 38rem; margin: 0 auto 1.5rem; opacity: 0.92; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1.1rem; max-width: 44rem; }
.form-row { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
.field label { display: block; margin-bottom: 0.35rem; font-weight: 700; }
.field .optional { font-weight: 400; color: var(--color-muted); }
.field input, .field textarea, .field select {
  width: 100%; padding: 0.8rem 0.9rem;
  font: inherit; color: inherit;
  background: #fff; border: 1.5px solid #cbd0d8; border-radius: 10px;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--color-primary); outline: 3px solid color-mix(in srgb, var(--color-primary) 25%, transparent); outline-offset: 0; }
.field textarea { min-height: 9rem; resize: vertical; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } /* spam trap, hidden from people */
.form-status { min-height: 1.5em; font-weight: 600; }
.form-status.is-success { color: #166534; }
.form-status.is-error { color: #b91c1c; }

/* ---------- Footer ---------- */
.site-footer { background: #111827; color: #d1d5db; padding-block: 3.5rem 2rem; font-size: 0.95rem; }
.site-footer a { color: #fff; }
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-brand img { width: 72px; height: 72px; margin-bottom: 0.75rem; }
.footer-title { color: #fff; font: 800 0.85rem/1 var(--font-heading); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1rem; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.social-links { display: flex; gap: 0.75rem; list-style: none; padding: 0; margin: 1rem 0 0; }
.social-links a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.1); color: #fff; transition: background-color 0.15s;
}
.social-links a:hover { background: var(--color-primary); }
.social-links svg { width: 20px; height: 20px; }
.footer-bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.12); color: #9ca3af; font-size: 0.875rem; }

/* ---------- 404 ---------- */
.not-found { min-height: 60vh; display: grid; place-items: center; text-align: center; }
.not-found .code { font: 900 clamp(5rem, 20vw, 9rem)/1 var(--font-heading); color: var(--color-primary); margin: 0; }

/* ==========================================================================
   WestTX Social additions (site-specific; not part of the template)
   ========================================================================== */
@media (min-width: 860px) {
  /* Desktop: sunset runs left-to-right so the text column stays on deep blue. */
  :root { --hero-bg: linear-gradient(110deg, #0B2E6B 0%, #0047AB 48%, #B0839A 70%, #FDA67A 84%, #FDBA35 100%); }
}
.script { font-family: var(--font-script); font-weight: 400; letter-spacing: 0; text-transform: none; }
.hero h1 .script { display: block; font-size: 1.15em; line-height: 1.1; color: var(--color-gold); }
.page-hero .script { color: var(--color-gold); font-size: 1.4em; }
.cta-band .script { color: #fff; }

.brand span { font-size: 1.1rem; }
.brand .brand-accent { color: var(--color-accent); }


.quote-feature { max-width: 46rem; margin-inline: auto; }

.social-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; }
.social-cta svg { width: 20px; height: 20px; }

.card-media.illustration { display: grid; place-items: center; background: linear-gradient(160deg, #e8efff, var(--color-accent-soft)); }
.card-media.illustration svg { width: 70%; height: auto; }
/* Inner-page banners and CTA bands: solid evening blue (text stays readable at any height) with a sunset stripe. */
.page-hero, .cta-band {
  background: linear-gradient(135deg, #0B2E6B, #0047AB);
  border-bottom: 6px solid transparent;
  border-image: linear-gradient(90deg, #0047AB, #B0839A, #FF914D, #FDBA35) 1;
}
.hero .eyebrow { color: var(--color-gold); }
/* Expertise.com award (text badge; their hosted image URL no longer works) */
.badge-link {
  display: inline-flex; align-items: center; gap: 0.75rem; margin-top: 1rem;
  padding: 0.75rem 1.1rem; border-radius: var(--radius);
  background: var(--color-accent-soft); border: 1px solid #F6D3A8;
  color: var(--color-primary-dark); text-decoration: none; font-size: 0.9rem; line-height: 1.35;
}
.badge-link strong { display: block; font-size: 0.95rem; }
.badge-link:hover { border-color: var(--color-accent); color: var(--color-primary-dark); }
.badge-star { font-size: 1.6rem; color: var(--color-accent); }
/* "Trusted by" client logos (home page). Logos sit on white tiles so white-background files blend in. */
.logo-band { padding-block: clamp(2.5rem, 6vw, 3.5rem); }
.logo-band-title { display: block; margin: 0 0 1.5rem; text-align: center; }
/* Flex (not grid) so a short last row stays centered. --cols = logos per row. */
.logo-wall {
  --cols: 2; --gap: 0.75rem;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap);
  margin: 0; padding: 0; list-style: none;
}
@media (min-width: 640px) { .logo-wall { --cols: 3; } }
@media (min-width: 1024px) { .logo-wall { --cols: 6; } }
.logo-wall li {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  display: flex; align-items: center; justify-content: center;
  height: 96px; padding: 0.9rem 1rem;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
}
.logo-wall img { width: auto; height: auto; max-width: 100%; max-height: 64px; }
.logo-wall img.is-wide { max-height: 40px; }
/* Grey until hovered on devices with a mouse; phones always show full color. */
@media (hover: hover) {
  .logo-wall img { filter: grayscale(1); opacity: 0.75; transition: filter 0.2s ease, opacity 0.2s ease; }
  .logo-wall li:hover img { filter: none; opacity: 1; }
}