:root{--sky:#7FB3D5;--gold:#D99A24;--terra:#B5651D;--sage:#6B8F71;--paper:#F7F3EA;--ink:#20323D;--cream:#F4EFE4;--brown:#6E4A2A;--forest:#2F5D4A;--font-head:'Helvetica Neue',Helvetica,Arial,sans-serif;--font-body:'Helvetica Neue',Helvetica,Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);font-weight:400;font-size:1rem;line-height:1.65;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:500;line-height:1.15;margin:0 0 1rem}
h1{font-size:2.1rem;letter-spacing:-.01em}
h2{font-size:1.65rem;letter-spacing:-.01em}
h3{font-size:1.15rem}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}
img{max-width:100%;height:auto;display:block}
a{color:var(--terra)}
.container{width:100%;max-width:1140px;margin:0 auto;padding-left:1.25rem;padding-right:1.25rem}
.site-header{position:sticky;top:0;z-index:60;background:var(--ink);border-bottom:1px solid rgba(247,243,234,.12)}
.header-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.5rem;padding-top:.9rem;padding-bottom:.9rem}
.brand{display:inline-flex;align-items:center}
.brand-logo{height:40px;width:auto}
.site-nav{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.15rem}
.site-nav a{color:var(--cream);text-decoration:none;font-size:.92rem;letter-spacing:.02em;padding:.25rem 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.site-nav a:hover{color:var(--gold)}
.site-nav a.is-active{color:var(--gold);border-bottom-color:var(--gold)}
.site-nav .nav-cta{border:1px solid var(--gold);border-radius:3px;padding:.4rem .95rem;color:var(--gold)}
.site-nav .nav-cta:hover{background:var(--gold);color:var(--ink)}
.site-nav .nav-cta.is-active{border-bottom-color:var(--gold)}
.hero{background-size:cover;background-position:center;color:var(--paper);padding:4.5rem 0}
.hero--home{background-image:linear-gradient(105deg,rgba(32,50,61,.9) 0%,rgba(32,50,61,.55) 100%),url('https://x.mqx.app/media/brand-profiles/54/webres/17-back-cover.webp')}
.hero--about{background-image:linear-gradient(105deg,rgba(32,50,61,.9) 0%,rgba(47,93,74,.6) 100%),url('https://x.mqx.app/media/brand-profiles/54/webres/11-pmv-tennis-kids.webp')}
.hero--network{background-image:linear-gradient(105deg,rgba(32,50,61,.9) 0%,rgba(32,50,61,.55) 100%),url('https://x.mqx.app/media/brand-profiles/54/webres/09-sd-millennium-park.webp')}
.hero--give{background-image:linear-gradient(105deg,rgba(32,50,61,.9) 0%,rgba(110,74,42,.55) 100%),url('https://x.mqx.app/media/brand-profiles/54/webres/14-proof-points.webp')}
.hero--contact{background-image:linear-gradient(105deg,rgba(32,50,61,.9) 0%,rgba(32,50,61,.6) 100%),url('https://x.mqx.app/media/brand-profiles/54/webres/02-contents-community-group.webp')}
.hero-content{max-width:660px}
.hero h1{margin-bottom:1.1rem}
.lead{font-size:1.1rem;line-height:1.6;opacity:.94}
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.9rem}
.eyebrow{display:inline-block;font-family:var(--font-head);font-weight:500;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 1rem}
.eyebrow--terra{color:var(--terra)}
.btn{display:inline-block;font-family:var(--font-head);font-weight:500;font-size:.95rem;line-height:1;text-decoration:none;padding:.85rem 1.6rem;border-radius:3px;border:1px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}
.btn:hover{transform:translateY(-1px)}
.btn--gold{background:var(--gold);color:var(--ink)}
.btn--gold:hover{background:#c78b1e}
.btn--ink{background:var(--ink);color:var(--paper)}
.btn--ink:hover{background:var(--forest)}
.btn--outline-light{border-color:rgba(247,243,234,.7);color:var(--paper)}
.btn--outline-light:hover{background:var(--paper);color:var(--ink)}
.section{padding:3.5rem 0}
.section--cream{background:var(--cream)}
.section--ink{background:var(--ink);color:var(--paper)}
.section-head{max-width:700px;margin-bottom:2.25rem}
.section-head p{color:#4a5b64}
.section--ink .section-head p{color:var(--cream);opacity:.85}
.split{display:grid;gap:2.25rem;align-items:center}
.grid-2{display:grid;gap:1.5rem}
.grid-3{display:grid;gap:1.5rem}
.grid-4{display:grid;gap:1.25rem}
.kw-grid{display:grid;gap:1.25rem}
.stats-grid{display:grid;gap:1.75rem 1.5rem;grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border-radius:6px;border-top:4px solid var(--sage);padding:1.75rem;box-shadow:0 2px 12px rgba(32,50,61,.07)}
.card h3{margin-bottom:.5rem}
.card p{color:#4a5b64;font-size:.95rem}
.card--sky{border-top-color:var(--sky)}
.card--gold{border-top-color:var(--gold)}
.card--terra{border-top-color:var(--terra)}
.card--sage{border-top-color:var(--sage)}
.card--forest{border-top-color:var(--forest)}
.card-tag{display:block;font-family:var(--font-head);font-weight:500;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brown);margin-bottom:.6rem}
.kw{background:#fff;border-radius:6px;border-top:5px solid var(--sage);padding:1.5rem}
.kw h3{margin-bottom:.35rem}
.kw p{margin:0;color:#4a5b64;font-size:.95rem}
.kw--sky{border-top-color:var(--sky)}
.kw--gold{border-top-color:var(--gold)}
.kw--sage{border-top-color:var(--sage)}
.kw--terra{border-top-color:var(--terra)}
.stat-value{font-family:var(--font-head);font-weight:500;font-size:2rem;line-height:1.05;color:var(--gold);margin:0 0 .4rem}
.stat-label{margin:0;font-size:.92rem;color:var(--cream);opacity:.85}
.img-frame{border-radius:8px;overflow:hidden;box-shadow:0 14px 34px rgba(32,50,61,.18)}
.img-frame img{width:100%}
.quote{background:#fff;border-left:5px solid var(--gold);border-radius:0 8px 8px 0;padding:1.75rem 2rem;max-width:780px;margin:0;box-shadow:0 2px 12px rgba(32,50,61,.07)}
.quote p{font-family:var(--font-head);font-weight:500;font-size:1.1rem;line-height:1.5}
.quote cite{font-style:normal;font-size:.88rem;color:var(--brown)}
.cta-band{background-image:linear-gradient(rgba(47,93,74,.9),rgba(32,50,61,.92)),url('https://x.mqx.app/media/brand-profiles/54/webres/16-tagline.webp');background-size:cover;background-position:center;color:var(--paper);padding:4rem 0}
.cta-inner{max-width:680px;margin:0 auto;text-align:center}
.cta-inner p{opacity:.92}
.cta-inner .hero-actions{justify-content:center}
.team-photo{background:var(--paper);border:2px dashed var(--sage);border-radius:8px;min-height:200px;display:flex;align-items:center;justify-content:center;text-align:center;padding:1rem;color:var(--forest);font-size:.9rem;margin-bottom:1rem}
.team-card h3{margin-bottom:.25rem}
.team-card p{color:#4a5b64;font-size:.95rem}
.notice{background:#fff;border:1px dashed var(--terra);border-radius:6px;padding:1rem 1.25rem;font-size:.92rem;color:var(--brown);max-width:780px;margin-top:2rem}
.notice p{margin:0}
.contact-grid{display:grid;gap:2.5rem;align-items:start}
.contact-form{background:#fff;border-radius:8px;padding:2rem;box-shadow:0 2px 14px rgba(32,50,61,.08);border-top:4px solid var(--gold)}
.contact-form h2{font-size:1.4rem;margin-bottom:1.5rem}
.form-field{margin-bottom:1.15rem}
.form-field label{display:block;font-family:var(--font-head);font-weight:500;font-size:.85rem;letter-spacing:.03em;margin-bottom:.35rem}
.form-field input,.form-field select,.form-field textarea{width:100%;padding:.75rem .9rem;border:1px solid #cdc5b4;border-radius:4px;background:#fdfcf9;font-family:var(--font-body);font-size:1rem;color:var(--ink)}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:2px solid var(--sky);outline-offset:1px;border-color:var(--sky)}
.contact-aside h3{margin:1.25rem 0 .5rem}
.contact-aside h3:first-child{margin-top:0}
.contact-aside p{color:#4a5b64}
.map-placeholder{background:var(--cream);border:2px dashed var(--sage);border-radius:8px;padding:3rem 1.5rem;text-align:center;color:var(--forest);font-size:.92rem;margin-top:1.5rem}
.site-footer{background:var(--ink);color:var(--cream);padding:3rem 0 1.5rem}
.footer-grid{display:grid;gap:2rem}
.footer-logo{height:36px;width:auto;margin-bottom:1rem}
.site-footer h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.16em;color:var(--gold);margin:0 0 .8rem}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:.5rem}
.site-footer a{color:var(--cream);text-decoration:none}
.site-footer a:hover{color:var(--gold)}
.footer-note{font-size:.9rem;opacity:.8;margin:0 0 .4rem}
.footer-bottom{border-top:1px solid rgba(247,243,234,.15);margin-top:2.25rem;padding-top:1.25rem}
.footer-bottom p{font-size:.8rem;opacity:.65;margin:0}
@media(min-width:768px){h1{font-size:2.9rem}h2{font-size:2.1rem}.hero{padding:6.5rem 0}.section{padding:5rem 0}.split{grid-template-columns:1fr 1fr;gap:3.5rem}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(2,1fr)}.kw-grid{grid-template-columns:repeat(2,1fr)}.stats-grid{grid-template-columns:repeat(3,1fr)}.footer-grid{grid-template-columns:2fr 1fr 1.4fr}.contact-grid{grid-template-columns:1.15fr .85fr}}
@media(min-width:1200px){h1{font-size:3.3rem}.hero{padding:7.5rem 0}.grid-4{grid-template-columns:repeat(4,1fr)}.kw-grid{grid-template-columns:repeat(4,1fr)}}.section--phoenix{background-image:linear-gradient(rgba(32,50,61,.93),rgba(32,50,61,.93)),url('https://x.mqx.app/media/brand-profiles/54/webres/11-pmv-tennis-kids.webp');background-size:cover;background-position:center}

/* ============================================================================
   HOME HERO + NAV, 2026-08-05
   ----------------------------------------------------------------------------
   Nav goes sage; hero overlay goes sky. Both changes create a contrast problem
   that has to be solved rather than ignored:

   NAV. White on pure sage #6B8F71 measures 3.63:1, under the 4.5:1 floor for
   body-sized text. Sage darkened to #557857 measures 4.99:1 and still reads
   unmistakably sage, so the nav uses the darker cut and keeps white text.

   HERO. White on sky #7FB3D5 is 2.26:1, badly illegible. Rather than muddy the
   sky by darkening it until white works (which stops looking like sky), the
   text flips to Ink #20323D, which measures 5.87:1 ON pure sky. So the overlay
   is genuinely sky blue and the type is dark. The gradient keeps the sunrise
   photograph faintly visible on the right where no text sits.
   ============================================================================ */

:root{ --sage-nav:#557857; }

/* --- nav ------------------------------------------------------------------ */
.site-header{background:var(--sage-nav);border-bottom:1px solid rgba(247,243,234,.16)}
.site-header a{color:#fff}
.site-header .nav-cta{border-color:#fff;color:#fff}
.site-header .nav-cta:hover{background:#fff;color:var(--sage-nav)}

/* --- home hero ------------------------------------------------------------ */
.hero--home{
  background-image:linear-gradient(105deg,
      rgba(127,179,213,.96) 0%,
      rgba(127,179,213,.90) 42%,
      rgba(127,179,213,.66) 100%),
    url(https://x.mqx.app/media/brand-profiles/54/webres/17-back-cover.webp);
  color:var(--ink);
}
.hero--home h1,
.hero--home p{color:var(--ink)}
/* Gold on sky is barely visible; terra cotta holds against it and is on-palette. */
.hero--home .eyebrow{color:var(--terra)}
/* Solid ink button carries the primary action; the ghost button gets an ink
   outline instead of the white one that vanished against sky. */
.hero--home .btn--gold{background:var(--ink);color:var(--paper)}
.hero--home .btn--gold:hover{background:#16242c}
.hero--home .btn--ink,
.hero--home .btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.hero--home .btn--ink:hover,
.hero--home .btn--ghost:hover{background:var(--ink);color:var(--paper)}

/* The ghost button is .btn--outline-light: white border and white text, which
   vanished on sky (2.26:1). On this hero it becomes an ink outline. */
.hero--home .btn--outline-light{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.hero--home .btn--outline-light:hover{background:var(--ink);color:var(--paper)}

/* The active nav link was gold on sage, which is nearly invisible. White with
   a white underline reads clearly and keeps the same "current page" cue. */
.site-header .is-active{color:#fff;border-bottom-color:#fff}

/* Must out-specify .site-nav a.is-active (0,2,1); .site-header .is-active
   (0,2,0) lost the tiebreak regardless of source order. Gold on the sage nav
   measures about 1.9:1 and was effectively invisible. */
.site-header .site-nav a.is-active{color:#fff;border-bottom-color:#fff}

/* ============================================================================
   COLOUR PASS 2026-08-06
   ----------------------------------------------------------------------------
   Nav goes terracotta. Primary buttons terracotta, secondary buttons forest
   green. Eyebrows take the same colour as the body copy of the hero they sit
   in, so the rule is consistent on every page rather than per-page.

   Contrast, measured rather than assumed:
     white on terracotta #B5651D   4.34:1  passes
     white on forest    #2F5D4A   7.54:1  passes comfortably
     ink   on terracotta          3.06:1  FAILS, so terracotta surfaces
                                          always take white type
   ============================================================================ */

/* --- nav: terracotta ------------------------------------------------------ */
.site-header{background:var(--terra);border-bottom:1px solid rgba(247,243,234,.18)}
.site-header a{color:#fff}
.site-header .nav-cta{border-color:#fff;color:#fff}
.site-header .nav-cta:hover{background:#fff;color:var(--terra)}
.site-header .site-nav a.is-active{color:#fff;border-bottom-color:#fff}

/* --- buttons: primary terracotta, secondary forest green ------------------ */
.btn--gold{background:var(--terra);color:#fff;border:1px solid var(--terra)}
.btn--gold:hover{background:#9d571a;border-color:#9d571a;color:#fff}
.btn--ink{background:var(--forest);color:#fff;border:1px solid var(--forest)}
.btn--ink:hover{background:#26493a;border-color:#26493a;color:#fff}
.btn--outline-light{background:var(--forest);color:#fff;border:1px solid var(--forest)}
.btn--outline-light:hover{background:#26493a;border-color:#26493a;color:#fff}

/* The home hero is the one light-ground hero, so its buttons keep the same
   fills rather than inverting to outlines. */
.hero--home .btn--gold{background:var(--terra);color:#fff;border:1px solid var(--terra)}
.hero--home .btn--gold:hover{background:#9d571a;border-color:#9d571a}
.hero--home .btn--outline-light,
.hero--home .btn--ink,
.hero--home .btn--ghost{background:var(--forest);color:#fff;border:1px solid var(--forest)}
.hero--home .btn--outline-light:hover,
.hero--home .btn--ink:hover,
.hero--home .btn--ghost:hover{background:#26493a;border-color:#26493a;color:#fff}

/* --- eyebrows: always the colour of the copy beneath them ----------------- */
/* Home hero is light-ground, so ink. */
.hero--home .eyebrow,
.hero--home .eyebrow--terra{color:var(--ink)}
/* Every other hero is dark-ground, so the same cream as their body copy. */
.hero .eyebrow,
.hero .eyebrow--terra{color:var(--paper)}
.hero--home .eyebrow,
.hero--home .eyebrow--terra{color:var(--ink)}

/* ============================================================================
   HOME HERO = BOOK COVER, 2026-10-02
   ----------------------------------------------------------------------------
   The hero carries the elevator pitch (client-approved, verbatim) under the
   brand H1, and the R5 book cover (hands over the night city on flat sky)
   as a full-bleed band beneath the type. The cover's sky decodes as #7EB3D8
   in the WebP files, so the hero ground uses that exact value and the photo
   edge disappears. Ink #20323D on that sky measures about 5.9:1.
   Arms run off both edges of the cover, so the band stays full-bleed; past
   1680px it is capped and the arm ends fade into the sky instead of growing.
   ============================================================================ */
.hero--home.hero--cover{background:#7EB3D8;background-image:none;color:var(--ink);padding-bottom:0}
.hero--cover .hero-content{max-width:720px}
.hero--cover h1{text-wrap:balance}
.hero--cover .lead{text-wrap:pretty;opacity:1;max-width:66ch}
.hero-cover-band{display:block;margin-top:2.5rem;line-height:0}
.hero-cover-band img{display:block;width:100%;height:auto;margin:0 auto}
@media(min-width:768px){.hero-cover-band{margin-top:3rem}}
@media(min-width:1024px){
  .hero--cover .hero-content{max-width:none;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);column-gap:4.5rem;grid-template-areas:"eyebrow eyebrow" "head lead" "head actions";align-items:start}
  .hero--cover .eyebrow{grid-area:eyebrow;justify-self:start}
  .hero--cover h1{grid-area:head;font-size:2.95rem;line-height:1.1;margin:0}
  .hero--cover .lead{grid-area:lead;max-width:none;font-size:1.06rem;padding-top:.45rem}
  .hero--cover .hero-actions{grid-area:actions;margin-top:1.6rem}
  .hero--home.hero--cover{padding-top:4.5rem}
  .hero-cover-band{margin-top:2.25rem}
}
@media(min-width:1681px){.hero-cover-band img{max-width:1680px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}}
@media(max-width:640px){.hero--home.hero--cover{display:flex;flex-direction:column;padding-top:0;padding-bottom:3.25rem}.hero-cover-band{order:-1;margin:0 0 2rem!important}.hero--cover .eyebrow{text-wrap:balance;letter-spacing:.16em}.hero--cover h1{font-size:1.85rem;line-height:1.18}.hero--cover .lead{font-size:1.02rem;line-height:1.62}.hero--cover .hero-actions{margin-top:1.5rem}}

/* Widows: site-wide, CSS only (never non-breaking spaces). */
p,li,blockquote{text-wrap:pretty}
h1,h2,h3,h4{text-wrap:balance}

.hero--cover .nw{white-space:nowrap}

/* 2026-10-02 hero copy (James): tagline + one statement, single column */
.hero--cover .hero-content{display:block;max-width:1000px}
.hero--cover h1.hero-tagline{font-size:.9rem;line-height:1.5;font-weight:600;margin:0 0 1.25rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.hero--cover .hero-statement{font-size:clamp(1.45rem,2.5vw,2.25rem);line-height:1.28;color:var(--ink);text-wrap:pretty;max-width:38ch;margin:0}
.hero--cover .hero-actions{margin-top:2rem}

/* 2026-10-02 hero arranged like gundlachs.firebrandagency.com (James): full-bleed photo, text left on the dark side */
.hero--photo{position:relative;overflow:hidden;background:#253846;color:#fff;min-height:min(78vh,760px);display:flex;align-items:center;padding:6rem 0}
.hero--photo .hero-photo{position:absolute;inset:0;margin:0}
.hero--photo .hero-photo img{width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
.hero--photo::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(37,56,70,.96) 0%,rgba(37,56,70,.88) 34%,rgba(37,56,70,.35) 58%,rgba(37,56,70,0) 74%)}
.hero--photo .container{position:relative;z-index:2;width:100%}
.hero--photo .hero-content{max-width:620px;display:block}
.hero--photo h1{color:#fff;font-size:clamp(2.4rem,4.6vw,4rem);line-height:1.04;letter-spacing:-.01em;margin:0 0 1.4rem;text-wrap:balance}
.hero--photo h1 .nl{display:block}
.hero--photo .lead{color:rgba(255,255,255,.92);font-size:1.15rem;line-height:1.6;max-width:56ch;text-wrap:pretty;opacity:1;margin:0}
.hero--photo .hero-actions{margin-top:2rem}
.hero--photo .btn--gold{background:var(--terra);color:#fff;border:1px solid var(--terra)}
.hero--photo .btn--gold:hover{background:#9d571a;border-color:#9d571a}
.hero--photo .btn--outline-light{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.85)}
.hero--photo .btn--outline-light:hover{background:#fff;color:var(--ink)}
@media (max-width:760px){.hero--photo{display:block;min-height:0;padding:0 0 3rem}.hero--photo .hero-photo{position:static}.hero--photo .hero-photo img{height:auto;object-fit:initial}.hero--photo::before{display:none}.hero--photo .container{padding-top:2rem}.hero--photo h1{font-size:2.35rem}}
/* 2026-10-02 tune: keep the forearm out from behind the copy; tighten the phone gap */
.hero--photo::before{background:linear-gradient(90deg,rgba(37,56,70,.97) 0%,rgba(37,56,70,.95) 44%,rgba(37,56,70,.55) 60%,rgba(37,56,70,0) 74%)}
.hero--photo .hero-photo img{object-position:78% center}
@media (max-width:760px){.hero--photo .container{padding-top:.25rem}}
/* 2026-10-02: tablets (761-1024) use the stacked layout too, so the copy never sits on the hands */
@media (min-width:761px) and (max-width:1024px){.hero--photo{display:block;min-height:0;padding:0 0 3.5rem}.hero--photo .hero-photo{position:static}.hero--photo .hero-photo img{height:auto;object-fit:initial;object-position:center}.hero--photo::before{display:none}.hero--photo .container{padding-top:1rem}.hero--photo .hero-content{max-width:680px}}
@media (min-width:1025px){.hero--photo .hero-content{max-width:min(620px,44vw)}.hero--photo h1{font-size:clamp(2.4rem,4.1vw,4rem)}}