/* ============================================================
   ALLIES, LLC — shared stylesheet
   Every page (index, about, get-started, contact) links to this
   one file, so changing a color or spacing rule here updates
   every page at once.
   ============================================================ */

/* ---------- DESIGN TOKENS ---------- */
/* Colors pulled from your palm-tree palette image. Change these
   hex codes to re-theme the whole site. */
:root {
  --navy: #33403E;        /* deep slate — header, footer, hero overlay */
  --navy-light: #44524F;  /* hover state on the deep slate */
  --cream: #FAF6F0;       /* default page background (pale sand) */
  --surface: #FFFFFF;     /* card backgrounds */
  --ink: #33403E;         /* body text on light background */
  --muted: #6B7674;       /* secondary/gray text */
  --pale: #F8F4ED;        /* text on the deep slate background */
  --gold: #B49572;        /* buttons, accents (warm caramel/tan) */
  --gold-dark: #96774F;   /* button hover */
  --sage: #5F6B49;        /* small labels/eyebrows (olive green) */
  --border: #DAD2C2;
  --radius: 14px;

  /* Pale section-background tints — each pulled from a different
     swatch in your palette, used to give sections variety instead
     of repeating the same background everywhere. */
  --tint-sand: #F4ECDF;
  --tint-powder: #E9EEEE;
  --tint-sage: #EFF3E7;
  --tint-olive: #EAEEDF;
  --tint-caramel: #F5ECE0;

  /* Hero photo darkness — see .hero below.
     Lower numbers (closer to 0) = lighter/more visible photo.
     Higher numbers (closer to 1) = darker, more text contrast. */
  --hero-overlay-top: rgba(51,64,62,0.55);
  --hero-overlay-bottom: rgba(51,64,62,0.8);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  /* Brandon Grotesque is a paid font, so it isn't loaded from a free
     CDN here. If you ever buy/install it, browsers that have it on
     the system will use it automatically — everyone else gets the
     free Poppins fallback, which has a similar geometric feel. */
  font-family: 'Brandon Grotesque', 'Poppins', sans-serif;
  line-height: 1.65;
}

h1, h2, h3 {
  /* Palatino Linotype ships with Windows, and Mac/iOS has "Palatino" —
     both render here with no extra download needed. Georgia is the
     fallback for systems with neither. */
  font-family: 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  margin: 0;
}
a { color: var(--ink); text-decoration: none; }
img {
  max-width: 100%;
  display: block;
  /* Per-image opacity & darkness control — see README for how to use these. */
  opacity: var(--img-opacity, 1);
  filter: brightness(var(--img-brightness, 1));
}

/* Visible focus ring for keyboard users — don't remove */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage);
}

/* Section background tints — add one of these classes to any
   <section> to give it a pale color instead of the plain default. */
.tint-sand { background: var(--tint-sand); }
.tint-powder { background: var(--tint-powder); }
.tint-sage { background: var(--tint-sage); }
.tint-olive { background: var(--tint-olive); }
.tint-caramel { background: var(--tint-caramel); }

/* ---------- HEADER / NAV ---------- */
header.site-header {
  background: var(--navy);
  position: sticky;
  top: 0;
  z-index: 20;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 24px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--pale);
  font-family: 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  font-weight: 700;
  font-size: 1.15rem;
}
.logo svg { width: 30px; height: 24px; stroke: currentColor; }
/* Logo image — sits in the dark navy header.
   EDIT ME: change height to resize the logo. */
.logo-img {
  height: 44px;
  width: auto;
  display: block;
  border-radius: 6px;
}
.nav-links { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav-links a { color: var(--pale); font-weight: 500; font-size: 0.95rem; opacity: 0.85; padding-bottom: 4px; }
.nav-links a:hover, .nav-links a.active { opacity: 1; border-bottom: 2px solid var(--gold); }
.nav-toggle { display: none; background: none; border: none; color: var(--pale); font-size: 1.5rem; cursor: pointer; }

@media (max-width: 720px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--navy);
    flex-direction: column;
    padding: 18px 24px 24px;
    gap: 18px;
  }
  .nav-links.open { display: flex; }
  .nav-toggle { display: block; }
}

/* ---------- BUTTONS ---------- */
.btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85rem;
  padding: 13px 26px;
  border-radius: var(--radius);
  cursor: pointer;
  border: 1px solid transparent;
  display: inline-block;
}
.btn-solid { background: var(--gold); color: var(--navy); font-weight: 600; border-color: var(--gold); }
.btn-solid:hover { background: var(--gold-dark); }
.btn-outline { background: transparent; color: var(--pale); border-color: var(--pale); }
.btn-outline:hover { background: rgba(255,255,255,0.1); }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- HERO (home page) ---------- */
.hero {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--pale);
  /* EDIT ME: swap images/hero-background.jpg for a different photo anytime */
  background:
    linear-gradient(180deg, var(--hero-overlay-top), var(--hero-overlay-bottom)),
    url('images/hero-background.jpg') center/cover no-repeat,
    var(--navy);
  padding: 90px 24px;
}
.hero-inner { max-width: 720px; }
.hero .eyebrow { color: var(--gold); }
.hero h1 { font-size: clamp(2.4rem, 6vw, 3.8rem); margin: 14px 0 6px; letter-spacing: 0.02em; }
.hero .subtitle {
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
  opacity: 0.85;
  margin-bottom: 16px;
}
.hero .tagline { font-size: 1.25rem; margin-bottom: 30px; opacity: 0.95; }

/* ---------- SECTIONS (shared across pages) ---------- */
section { padding: 80px 0; }
section.alt { background: var(--surface); }
.section-title { font-size: 2rem; margin-bottom: 10px; }
.section-lead { color: var(--muted); max-width: 60ch; margin-bottom: 40px; }
.center { text-align: center; }

/* image + text side-by-side row (used on home page) */
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.feature-row img { border-radius: var(--radius); }
@media (max-width: 760px) { .feature-row { grid-template-columns: 1fr; } }

/* row of 3 photos (home page) */
.photo-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.photo-row img { border-radius: var(--radius); aspect-ratio: 4/3; object-fit: cover; width: 100%; }
@media (max-width: 760px) { .photo-row { grid-template-columns: 1fr; } }

/* a single, modest-sized photo (used at the very bottom of Get Started) */
.single-photo { max-width: 480px; margin: 0 auto; }
.single-photo img { border-radius: var(--radius); aspect-ratio: 4/3; object-fit: cover; }

/* ---------- ABOUT PAGE ---------- */
.mission-block { text-align: center; max-width: 680px; margin: 0 auto 40px; }
.mission-block h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin-bottom: 14px; }

/* Team photo — framed and deliberately NOT full-width, so it reads
   as one accent photo rather than a big block taking over the page. */
.team-photo-frame {
  max-width: 380px;
  margin: 0 auto;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.team-photo-frame img { border-radius: calc(var(--radius) - 6px); }

/* Why Choose Us — one section, two columns: a 1/3-width photo
   column and a 2/3-width column of the four reasons. Listing the
   items in HTML as photo, text, photo, text... automatically pairs
   each photo with its matching reason, row by row. */
.why-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 28px 48px;
  align-items: center;
}
.why-grid img {
  /* EDIT ME: override --img-w / --img-ratio inline on any <img> to
     resize just that one photo — see README for examples. */
  width: var(--img-w, 100%);
  aspect-ratio: var(--img-ratio, 4 / 3);
  object-fit: cover;
  border-radius: var(--radius);
}
.why-grid h3 { font-size: 1.3rem; margin-bottom: 8px; }
.why-grid p { color: var(--muted); margin: 0; }
@media (max-width: 760px) { .why-grid { grid-template-columns: 1fr; } }

/* ---------- GET STARTED PAGE ---------- */
.intro-text { max-width: 700px; margin: 0 auto 16px; }
.referral-box { text-align: center; margin: 40px auto 0; }
.referral-btn { font-size: 1rem; padding: 20px 50px; }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 22px; }
.service-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.service-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.service-card p { color: var(--muted); font-size: 0.92rem; margin: 0; }
.steps { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
.step { display: flex; gap: 20px; }
.step-num {
  font-family: 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  font-size: 1.6rem;
  color: var(--gold);
  min-width: 50px;
}
.step p { margin: 0; }

/* ---------- CONTACT PAGE ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: start; }
.contact-cards { display: flex; flex-direction: column; gap: 20px; }
/* Cards are always white/surface-colored, regardless of what tint
   the section behind them uses — that's what keeps them looking
   like distinct boxes instead of blending into the page. */
.contact-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 26px; }
.contact-card .label { font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sage); display: block; margin-bottom: 6px; }
.contact-card .value { font-size: 1.05rem; }
.map-wrap { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); min-height: 340px; }
.map-wrap iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- FOOTER (shared) ---------- */
footer.site-footer { background: var(--navy); color: var(--pale); padding: 50px 0 30px; }
.footer-grid { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px; }
.footer-grid h3 { font-size: 1.1rem; margin-bottom: 8px; }
.footer-grid p { margin: 2px 0; opacity: 0.85; font-size: 0.92rem; }
.footer-bottom { text-align: center; margin-top: 40px; font-size: 0.8rem; opacity: 0.6; }
@media (max-width: 600px) { .footer-grid { flex-direction: column; } }