/* Hullabaloo! Promotional Products — migrated from WordPress/Divi 2026-08.
   ALL styling lives here (no inline styles ever). Tokens below are extracted
   from the source site's Divi output. One breakpoint (900px) collapses the
   grids; keep it in sync with main.js. */

/* fonts — self-hosted latin woff2 (DM Sans ships as one variable file
   covering 400-700; Anton has a single weight). Never Google Fonts. */
@font-face {
  font-family: "Anton"; src: url("/fonts/anton.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Sans"; src: url("/fonts/dmsans.woff2") format("woff2-variations");
  font-weight: 100 1000; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Sans"; src: url("/fonts/dmsans-italic.woff2") format("woff2-variations");
  font-weight: 100 1000; font-style: italic; font-display: swap;
}

:root {
  --color-primary: #db2792;        /* headings, primary buttons */
  --color-primary-dark: #b01f75;
  --color-teal: #00a3af;           /* links, footer */
  --color-teal-light: #82c0c7;
  --color-orange: #ff5400;
  --color-purple: #5d2c87;
  --color-text: #666;
  --color-heading: #db2792;
  --color-light: #f6f6f6;
  --font-body: "DM Sans", Helvetica, Arial, sans-serif;
  --font-heading: "Anton", Helvetica, Arial, sans-serif;
  --container: 1140px;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; font-family: var(--font-body); color: var(--color-text);
  font-size: 16px; line-height: 1.8; background: #fff;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); color: var(--color-heading);
  text-transform: uppercase; font-weight: 400; line-height: 1.4;
  margin: 0 0 .5em; letter-spacing: .01em;
}
h1 { font-size: 80px; }
h2 { font-size: 48px; }
h3 { font-size: 33px; }
h4 { font-size: 18px; }
img { max-width: 100%; height: auto; }
a { color: var(--color-teal); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.container--narrow { max-width: 760px; }
.center { text-align: center; }
.flow > * + * { margin-top: 1em; }

.btn {
  display: inline-block; background: var(--color-primary); color: #fff !important;
  padding: 14px 32px; border: 2px solid var(--color-primary); border-radius: 5px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  text-decoration: none; cursor: pointer; transition: all 300ms ease;
  font-family: var(--font-body); font-size: 16px;
}
.btn:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.btn--outline { background: transparent; color: var(--color-primary) !important; }
.btn--outline:hover { background: var(--color-primary); color: #fff !important; }
/* On the photographic hero the pink-on-teal outline button falls to ~2:1
   contrast — force white there. */
.hero .btn--outline { color: #fff !important; border-color: #fff; }
.hero .btn--outline:hover { background: #fff; color: var(--color-primary) !important; }
.btn--purple {
  background: var(--color-purple); border-color: var(--color-purple);
  letter-spacing: .18em; font-weight: 800;
}
.btn--purple:hover { background: #462066; border-color: #462066; }

/* header -------------------------------------------------------------- */
.site-header { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.site-header__inner {
  max-width: var(--container); margin: 0 auto; padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.site-header__logo { display: block; line-height: 0; }
.site-header__logo img { width: 200px; height: 93px; }

/* hero ---------------------------------------------------------------- */
.hero {
  padding: 13vw 0 90px; color: #fff;
  background-image: url("/images/hero.webp");
  background-size: cover; background-position: left 25% center;
}
/* The hero copy sits over the light-left part of the photo; the source ran
   the image undimmed, so keep it undimmed and shadow the text instead. */
.hero__lead, .hero__phone { text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.hero__panel { border-left: 10px solid var(--color-primary); padding-left: 30px; margin-bottom: 24px; }
.hero__title { font-size: 80px; color: var(--color-primary); margin: 0; line-height: 1.4; }
.hero__lead { font-size: 20px; max-width: 640px; margin: 0 0 28px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 24px; }
.hero__phone { font-size: 18px; font-weight: 700; margin: 0; }
.hero__phone a { color: #fff; }

/* sections ------------------------------------------------------------ */
.section { padding: 72px 0; }
.section--light { background: var(--color-light); }
.section--accent { background: var(--color-purple); color: #fff; }
.section--accent h2 { color: #fff; }

/* Testimonials — source section_2: #5D2C87 with the confetti art pinned to
   the top right and white wave dividers top and bottom. */
.section--purple {
  background-color: var(--color-purple); color: #fff;
  background-image: url("/images/confetti.webp");
  background-repeat: no-repeat; background-position: right 0 top;
  padding: 120px 0;
}
.section--purple h2, .section--purple h3 { color: #fff; }
.has-waves { position: relative; }
.has-waves::before, .has-waves::after {
  content: ""; position: absolute; left: 0; right: 0; height: 100px;
  background-size: 200% 100px; background-repeat: no-repeat; z-index: 1;
  pointer-events: none;
}
.has-waves::before {
  top: 0; transform: scale(1, -1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100px' viewBox='0 0 1280 140' preserveAspectRatio='none'%3E%3Cg fill='%23ffffff'%3E%3Cpath d='M1094.44 119L172.7 68.72a74.54 74.54 0 0 1-25.19-5.95L0 0v140h1280V0l-133.85 102c-15.84 12.09-33.7 17.95-51.71 17z' fill-opacity='.5'/%3E%3Cpath d='M1093.48 131.85L173 94a76.85 76.85 0 0 1-36.79-11.46L0 0v140h1280V0l-131.81 111.68c-16.47 13.96-35.47 20.96-54.71 20.17z'/%3E%3C/g%3E%3C/svg%3E");
}
.has-waves::after {
  bottom: 0; transform: scale(-1, 1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100px' viewBox='0 0 1280 140' preserveAspectRatio='none'%3E%3Cg fill='%23ffffff'%3E%3Cpath d='M1093.48 131.85L173 94a76.85 76.85 0 0 1-36.79-11.46L0 0v140h1280V0l-131.81 111.68c-16.47 13.96-35.47 20.96-54.71 20.17z'/%3E%3C/g%3E%3C/svg%3E");
}
.has-waves > .container { position: relative; z-index: 2; }
.section__head { border-left: 10px solid var(--color-teal); padding-left: 30px; margin-bottom: 24px; }
.section__title { margin: 0 0 .4em; }
.section__intro { font-size: 18px; max-width: 900px; margin: 0 0 48px; }
.section__outro { font-size: 18px; margin: 0 0 .6em; }
.prose-block { max-width: 900px; margin: 56px auto 0; }

/* product categories --------------------------------------------------- */
.cat { margin-bottom: 56px; }
.cat__title { margin-bottom: .2em; }
.cat__sub { margin: 0 0 24px; font-size: 17px; }
.cat__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.cat__grid img { display: block; width: 100%; height: auto; border-radius: 4px; }

/* testimonials ---------------------------------------------------------- */
.quotes { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; grid-template-columns: repeat(3, 1fr); }
.quote blockquote { margin: 0; }
.quote { text-align: center; }
.quote__mark { display: block; margin: 0 auto 18px; width: 105px; height: 18px; }
.quote blockquote p { margin: 0 0 .8em; font-style: italic; font-size: 17px; color: #fff; }
.quote__by { margin: 0; font-weight: 700; color: #fff; }

/* why choose us ---------------------------------------------------------- */
.grid { display: grid; gap: 32px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.pillar { text-align: center; }
.pillar__icon { display: block; margin: 0 auto 12px; width: 250px; height: 66px; }
.pillar h3 { font-size: 26px; }

/* giving back ------------------------------------------------------------ */
.giving { display: grid; grid-template-columns: 612px 1fr; gap: 48px; align-items: center; }
.giving__img { border-radius: 6px; width: 100%; height: auto; }

/* contact form ------------------------------------------------------------ */
.cform { margin-top: 32px; }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cform__field { margin-bottom: 20px; display: flex; flex-direction: column; }
.cform__field label { font-weight: 700; margin-bottom: 6px; color: #444; }
.req { color: var(--color-orange); }
.cform input, .cform textarea {
  font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid #ccc;
  border-radius: 4px; background: #fff; color: var(--color-text); width: 100%;
}
.cform input:focus, .cform textarea:focus { outline: 2px solid var(--color-teal); border-color: var(--color-teal); }
.cform__count { font-size: 13px; color: #999; margin-top: 4px; }
.cform__status { padding: 12px 16px; border-radius: 4px; margin: 0 0 16px; font-weight: 600; }
.cform__status.is-error { background: #fdecf5; color: #a3175f; border: 1px solid #db2792; }
.cform__status.is-ok { background: #e6f6f7; color: #00707a; border: 1px solid var(--color-teal); }
.cform__submit[disabled] { opacity: .6; cursor: not-allowed; }
.cf-turnstile { margin-bottom: 20px; }

/* footer ------------------------------------------------------------------ */
.site-footer { background: var(--color-teal); color: #fff; margin-top: 0; }
.site-footer a { color: #fff; }
.site-footer__main {
  max-width: var(--container); margin: 0 auto; padding: 48px 20px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
}
.site-footer__logo { background: #fff; padding: 10px 14px; border-radius: 6px; width: 200px; height: auto; }
.site-footer h4 { color: #fff; font-size: 20px; }
.site-footer p { margin: 0 0 .4em; }
.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.25); padding: 20px;
  text-align: center; font-size: 14px;
}

/* responsive -------------------------------------------------------------- */
@media (max-width: 900px) {
  h1, .hero__title { font-size: 40px; }
  h2, .section__title { font-size: 30px; }
  h3 { font-size: 22px; }
  .hero { padding: 64px 0 56px; }
  .section--purple { padding: 80px 0; background-size: 60% auto; }
  .has-waves::before, .has-waves::after { height: 50px; background-size: 200% 50px; }
  .quotes, .grid--3, .cform__row, .site-footer__main { grid-template-columns: 1fr; }
  .giving { grid-template-columns: 1fr; gap: 24px; }
  .cat__grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .site-header__inner { padding: 12px 20px; }
  .site-header__logo img { width: 150px; height: 70px; }
}