/* ==========================================================================
   Giddy.com — hand-written rebuild of the Squarespace site.
   Design tokens (colors, type scale, fluid font formula, section themes)
   were extracted from the live site's compiled CSS so rendering matches 1:1.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Site palette (HSL triplets exactly as compiled by Squarespace) */
  --accent-hsl: 19.61538462, 88.13559322%, 53.7254902%;      /* Giddy orange */
  --light-accent-hsl: 19.64285714, 100%, 67.05882353%;
  --dark-accent-hsl: 16.29139073, 65.93886463%, 44.90196078%;
  --white-hsl: 0, 0%, 100%;
  --black-hsl: 0, 0%, 0%;

  --accent: hsl(var(--accent-hsl));
  --dark-accent: hsl(var(--dark-accent-hsl));

  /* Layout */
  --max-page-width: 1400px;
  --page-padding: 4vw;

  /* Type scale (Squarespace "size values": fluid rem multipliers) */
  --h1-size: 5.19;
  --h2-size: 4.12;
  --h3-size: 2.74;
  --h4-size: 1.57;
  --text-size: 1.08;
  --text-large-size: 1.47;
  --text-small-size: 0.98;

  --heading-line-height: 1.46;
  --body-line-height: 1.87em;
}

/* ---------- Section themes (from compiled theme CSS) ----------
   bright (site default): orange bg, white text, white buttons w/ orange text
   white:                 white bg, black text/headings, dark-accent buttons
   white-bold:            white bg, black h1/h4, orange h2/h3, dark-accent buttons
   bright-inverse:        orange bg, white text, black buttons (header/footer)  */
.theme-bright, .theme-bright-inverse {
  --bg: hsl(var(--accent-hsl));
  --heading-xl: hsl(var(--white-hsl));
  --heading-l: hsl(var(--white-hsl));
  --heading-m: hsl(var(--white-hsl));
  --heading-s: hsl(var(--white-hsl));
  --paragraph: hsl(var(--white-hsl));
  --paragraph-link: hsl(var(--white-hsl));
  --btn-bg: hsl(var(--white-hsl));
  --btn-text: hsl(var(--accent-hsl));
}
.theme-bright-inverse {
  --btn-bg: hsl(var(--black-hsl));
  --btn-text: hsl(var(--white-hsl));
}
.theme-white, .theme-white-bold {
  --bg: hsl(var(--white-hsl));
  --heading-xl: hsl(var(--black-hsl));
  --heading-l: hsl(var(--black-hsl));
  --heading-m: hsl(var(--black-hsl));
  --heading-s: hsl(var(--black-hsl));
  --paragraph: hsl(var(--black-hsl));
  --paragraph-link: hsl(var(--accent-hsl));
  --btn-bg: hsl(var(--accent-hsl));   /* "safeDarkAccent" resolves to the accent */
  --btn-text: hsl(var(--white-hsl));
}
.theme-white-bold {
  --heading-l: hsl(var(--accent-hsl));
  --heading-m: hsl(var(--accent-hsl));
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media screen and (max-width: 767px) {
  :root { --page-padding: 6vw; }               /* Squarespace mobile gutter */
}
body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-style: normal;
  line-height: var(--body-line-height);
  letter-spacing: 0em;
  color: #000;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }

/* Fluid type — Squarespace 7.1 formula:
   desktop:  min((S-1)*1.2vw + 1rem, max((S-1)*.012*maxPageWidth + 1rem, S*1rem))
   portrait: (S-1)*(.012*min(100vh,900px)) + 1rem                                  */
h1, h2, h3, h4 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0em;
  margin: 0;
  white-space: pre-wrap;
}
h1 { color: var(--heading-xl, #000); line-height: calc(var(--heading-line-height) * (1 + (1 - var(--h1-size)) / 25) * 1em); }
h2 { color: var(--heading-l, #000);  line-height: calc(var(--heading-line-height) * (1 + (1 - var(--h2-size)) / 25) * 1em); }
h3 { color: var(--heading-m, #000);  line-height: calc(var(--heading-line-height) * (1 + (1 - var(--h3-size)) / 25) * 1em); }
h4 { color: var(--heading-s, #000);  line-height: calc(var(--heading-line-height) * (1 + (1 - var(--h4-size)) / 25) * 1em); }

@media screen and (min-width: 768px), screen and (orientation: landscape) {
  h1 { font-size: min(calc((var(--h1-size) - 1) * 1.2vw + 1rem), max(calc((var(--h1-size) - 1) * 0.012 * var(--max-page-width) + 1rem), calc(var(--h1-size) * 1rem))); }
  h2 { font-size: min(calc((var(--h2-size) - 1) * 1.2vw + 1rem), max(calc((var(--h2-size) - 1) * 0.012 * var(--max-page-width) + 1rem), calc(var(--h2-size) * 1rem))); }
  h3 { font-size: min(calc((var(--h3-size) - 1) * 1.2vw + 1rem), max(calc((var(--h3-size) - 1) * 0.012 * var(--max-page-width) + 1rem), calc(var(--h3-size) * 1rem))); }
  h4 { font-size: min(calc((var(--h4-size) - 1) * 1.2vw + 1rem), max(calc((var(--h4-size) - 1) * 0.012 * var(--max-page-width) + 1rem), calc(var(--h4-size) * 1rem))); }
  p, ol, ul { font-size: min(calc((var(--text-size) - 1) * 1.2vw + 1rem), max(calc((var(--text-size) - 1) * 0.012 * var(--max-page-width) + 1rem), calc(var(--text-size) * 1rem))); }
  .text-large { font-size: min(calc((var(--text-large-size) - 1) * 1.2vw + 1rem), max(calc((var(--text-large-size) - 1) * 0.012 * var(--max-page-width) + 1rem), calc(var(--text-large-size) * 1rem))); }
  .text-small { font-size: min(calc((var(--text-small-size) - 1) * 1.2vw + 1rem), max(calc((var(--text-small-size) - 1) * 0.012 * var(--max-page-width) + 1rem), calc(var(--text-small-size) * 1rem))); }
}
@media screen and (max-width: 767px) and (orientation: portrait) {
  h1 { font-size: calc((var(--h1-size) - 1) * (0.012 * min(100vh, 900px)) + 1rem); }
  h2 { font-size: calc((var(--h2-size) - 1) * (0.012 * min(100vh, 900px)) + 1rem); }
  h3 { font-size: calc((var(--h3-size) - 1) * (0.012 * min(100vh, 900px)) + 1rem); }
  h4 { font-size: calc((var(--h4-size) - 1) * (0.012 * min(100vh, 900px)) + 1rem); }
  p, ol, ul { font-size: calc((var(--text-size) - 1) * (0.012 * min(100vh, 900px)) + 1rem); }
  .text-large { font-size: calc((var(--text-large-size) - 1) * (0.012 * min(100vh, 900px)) + 1rem); }
  .text-small { font-size: calc((var(--text-small-size) - 1) * (0.012 * min(100vh, 900px)) + 1rem); }
}

p { color: var(--paragraph, #000); white-space: pre-wrap; margin: 1rem 0; }
/* Live sets this directly on p/.sqsrte-large/.sqsrte-small so the em resolves
   against each element's own (fluid) font-size, not body's 16px. Lists get no
   such rule on live — they inherit body's computed value. */
p, .text-large, .text-small { line-height: var(--body-line-height); }
/* Squarespace rte lists: an li's only paragraph has its margins zeroed (item
   pitch = bare line-height); a nested list sits .5em under its intro line.
   Single-child li (nav links etc.) are first+last child → unaffected. */
li > * { margin-top: 0.5em; margin-bottom: 0.5em; }
li > *:first-child { margin-top: 0; }
li > *:last-child { margin-bottom: 0; }
p a, li a { color: var(--paragraph-link, var(--accent)); text-decoration: underline; }
strong { font-weight: 700; }

.text-accent { color: var(--accent); }
.text-black { color: #000; }
.text-white { color: #fff; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #fff; color: #000; padding: 0.5em 1em;
}
.skip-link:focus { left: 0; }

/* ---------- Buttons (primary; values from compiled button tweaks) ---------- */
.btn {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  line-height: 1.25em;
  letter-spacing: 0em;
  text-transform: none;
  text-decoration: none;
  padding: 1.2rem 2.004rem;
  border: 0;
  border-radius: 0;
  background-color: var(--btn-bg, var(--dark-accent));
  color: var(--btn-text, #fff);
  cursor: pointer;
  transition: opacity .15s ease;
}
.btn:hover { opacity: .8; }
@media screen and (min-width: 768px), screen and (orientation: landscape) {
  .btn { font-size: min(calc((var(--text-size) - 1) * 1.2vw + 1rem), max(calc((var(--text-size) - 1) * 0.012 * var(--max-page-width) + 1rem), calc(var(--text-size) * 1rem))); }
}
@media screen and (max-width: 767px) and (orientation: portrait) {
  .btn { font-size: calc((var(--text-size) - 1) * (0.012 * min(100vh, 900px)) + 1rem); }
}

/* ---------- Header ----------
   Live metrics: full-width, padding 1vw x pagePadding, logo max-height 58px,
   nav = body font at fluid(1.08), item gap 1.3vw, icons 22px w/ 1.3vw gaps  */
.site-header {
  background: hsl(var(--accent-hsl));
  border-bottom: 5px solid #fff;              /* from the site's custom CSS */
  box-shadow: 0 0 30px rgba(0, 0, 0, .12);
  position: relative;
  z-index: 10;
}
.header-inner {
  display: flex;
  align-items: center;
  padding: 1vw var(--page-padding);
}
.header-logo { margin-right: 1.95vw; }
.header-logo img { height: 58px; width: auto; }
.header-nav {
  display: flex;
  align-items: center;
  gap: 1.3vw;
  flex-wrap: wrap;
}
.header-nav a {
  color: #fff;
  text-decoration: none;
  font-weight: 300;
  white-space: nowrap;
}
@media screen and (min-width: 768px), screen and (orientation: landscape) {
  .header-nav a { font-size: min(calc((var(--text-size) - 1) * 1.2vw + 1rem), max(calc((var(--text-size) - 1) * 0.012 * var(--max-page-width) + 1rem), calc(var(--text-size) * 1rem))); }
}
@media screen and (max-width: 767px) and (orientation: portrait) {
  .header-nav a { font-size: calc((var(--text-size) - 1) * (0.012 * min(100vh, 900px)) + 1rem); }
}
.header-nav a:hover { opacity: .8; }
.header-nav a.active,
.mobile-menu nav a.active { text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 1px; }
.header-social {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.5vw;
}
.header-social a { color: #fff; display: block; }
.header-social svg { width: 18px; height: 18px; display: block; fill: currentColor; }
.header-social a:hover { opacity: .8; }

/* Mobile header / burger */
.burger {
  display: none;
  margin-left: auto;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 28px; height: 2px;
  background: #fff;
  margin: 7px 0;
  transition: transform .2s ease, opacity .2s ease;
}
.mobile-menu {
  display: none;
  background: hsl(var(--accent-hsl));
  padding: 4vw 6vw 8vw;
}
.mobile-menu nav { display: flex; flex-direction: column; gap: 1em; }
.mobile-menu nav a {
  color: #fff;
  text-decoration: none;
  font-size: 1.6rem;
  font-weight: 300;
}
.mobile-menu .header-social { margin: 2em 0 0; }
body.menu-open .mobile-menu { display: block; }
body.menu-open .burger span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

@media screen and (max-width: 799px) {
  .header-nav, .header-social { display: none; }
  .burger { display: block; }
  .header-logo img { width: 90px; }
  .header-inner { padding: 20px 6vw; }
}

/* ---------- Sections ---------- */
.page-section {
  display: flex;
  background: var(--bg, #fff);
  position: relative;
}
.section-small  { min-height: 33vh; }
.section-medium { min-height: 66vh; }
.section-custom { min-height: 50vh; }
/* content area = min(1400px, 100vw - 2*pagePadding), like the live site */
.section-inner {
  width: 100%;
  max-width: calc(var(--max-page-width) + 2 * var(--page-padding));
  margin: auto;                                /* vertical centering */
  padding: 3.3vmax var(--page-padding);
  position: relative;                          /* above generative backgrounds */
}
.section-medium > .section-inner,
.section-medium > .inset-box > .section-inner { padding-top: 6.6vmax; padding-bottom: 6.6vmax; }

/* Squarespace "background width: inset" — orange page bg with the section
   background inset by one page gutter on all sides */
.section-inset {
  background: hsl(var(--accent-hsl));
  padding: var(--page-padding);
}
.section-inset > .inset-box {
  background: var(--bg, #fff);
  display: flex;
  width: 100%;
}

/* Squarespace "content width: medium" = 75% of the content area */
.content-medium { width: 75%; margin: 0 auto; }
@media screen and (max-width: 767px) {
  .content-medium { width: 100%; }
}

/* Generative "bokeh" background (home feature sections) — drawn by bokeh.js */
.bokeh-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------- Feature cards (Squarespace image block, card layout) ----------
   image 48% (minus half of the 8% separation), text card centered beside it  */
.feature-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.feature-card.image-right { flex-direction: row-reverse; }
.feature-card .card-image { width: 44%; flex-shrink: 0; }
.feature-card .card-image img { border-radius: 50px; width: 100%; }
.feature-card .card-text { width: 48%; }
.feature-card .card-text h4 { margin-bottom: 0; }
.feature-card .card-text h2 { margin-top: 6%; margin-bottom: 0.3em; }  /* card title separation */
@media screen and (max-width: 767px) {
  .feature-card, .feature-card.image-right { flex-direction: column; align-items: stretch; }
  .feature-card .card-image, .feature-card .card-text { width: 100%; }
  .feature-card .card-text { margin-top: 2rem; }
}

/* ---------- Home: hero ---------- */
.hero-grid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.hero-copy { width: 66.6%; }
.hero-copy h4 { margin-top: 1.5rem; }
.hero-badge { display: inline-block; margin-top: 4rem; width: 24%; min-width: 170px; }
.hero-phone { width: 29.2%; flex-shrink: 0; }
@media screen and (max-width: 767px) {
  .hero-grid { flex-direction: column; }
  .hero-copy, .hero-phone { width: 100%; }
  .hero-badge { width: 55%; margin-top: 2rem; }
  .hero-phone { margin-top: 2.5rem; }
}

/* ---------- Home: marquee + QR download section ---------- */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: 2rem;
}
.marquee-track {
  display: inline-block;
  animation: marquee-scroll 30s linear infinite;
}
.marquee-track h1 { display: inline; white-space: nowrap; }
.marquee-track h1 span { padding-right: 1.5em; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}
.download-copy { text-align: center; }
.download-copy p { margin: 0; }
.qr-wrap {
  width: 220px;
  margin: 2.5rem auto 0;
}

/* ---------- Contact / Get Involved: text + form layouts ---------- */
.split {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.split-copy { width: 49%; }
.split-embed { width: 46%; }
/* get-involved features section: heading column is narrower (8 of 24 cols) */
.split-narrow .split-copy { width: 32.5%; }
.split-narrow .split-embed { width: 45%; }
.split-copy .btn { display: block; width: fit-content; }
.split-copy .btn + .btn { margin-top: 0.9rem; }
.split-copy .btn-group { margin-top: min(24vw, 370px); }
@media screen and (max-width: 767px) {
  .split-copy .btn-group { margin-top: 2rem; }
}
@media screen and (max-width: 767px) {
  .split { flex-direction: column; }
  .split-copy, .split-embed { width: 100%; }
  .split-embed { margin-top: 2rem; }
}
.google-form-embed { border: 0; max-width: 100%; }
.centered-image { max-width: 46%; margin: 0 auto; }
@media screen and (max-width: 767px) {
  .centered-image { max-width: 100%; }
}

/* ---------- Two/three column rows (classic layout) ---------- */
.cols {
  display: flex;
  gap: 34px;
}
.cols > * { flex: 1 1 0; min-width: 0; }
@media screen and (max-width: 767px) {
  .cols { flex-direction: column; gap: 0; }
}
.spacer { height: 100px; }
.section-inner h1 + h4 { margin-top: 1rem; }

/* ---------- Accordion (FAQ) ----------
   Two live variants: chevron-on-right without dividers, and plus-on-left
   with dividers (classes .accordion / .accordion-plus).                   */
.accordion { --acc-title-size: 1.3; list-style: none; margin: 0; padding: 0; }
.accordion details { border: 0; }
.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2em;
  cursor: pointer;
  list-style: none;
  padding: 1.55em 0;
  font-weight: 700;
  line-height: 1.3em;
  color: var(--heading-s, #000);
}
.accordion summary::-webkit-details-marker { display: none; }
@media screen and (min-width: 768px), screen and (orientation: landscape) {
  .accordion summary { font-size: min(calc((var(--acc-title-size) - 1) * 1.2vw + 1rem), max(calc((var(--acc-title-size) - 1) * 0.012 * var(--max-page-width) + 1rem), calc(var(--acc-title-size) * 1rem))); }
}
@media screen and (max-width: 767px) and (orientation: portrait) {
  .accordion summary { font-size: calc((var(--acc-title-size) - 1) * (0.012 * min(100vh, 900px)) + 1rem); }
}
.accordion summary .title { flex: 1; }
.accordion summary .arrow {
  flex-shrink: 0;
  width: 11px; height: 11px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
  margin-top: -6px;
}
.accordion details[open] summary .arrow { transform: rotate(225deg); margin-top: 6px; }
.accordion .accordion-body { padding: 0 0 1.4em; font-weight: 300; }
.accordion .accordion-body p:first-child { margin-top: 0; }

/* plus-on-left variant with dividers */
.accordion-plus details { border-bottom: 1px solid rgba(0, 0, 0, .18); }
.accordion-plus details:first-of-type { border-top: 1px solid rgba(0, 0, 0, .18); }
.accordion-plus summary { justify-content: flex-start; }
.accordion-plus summary .plus {
  flex-shrink: 0;
  position: relative;
  width: 15px; height: 15px;
  margin-right: 0.6em;
  transition: transform .2s ease;
}
.accordion-plus summary .plus::before,
.accordion-plus summary .plus::after {
  content: "";
  position: absolute;
  background: currentColor;
}
.accordion-plus summary .plus::before { left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; }
.accordion-plus summary .plus::after { top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; }
.accordion-plus details[open] summary .plus { transform: rotate(45deg); }
.accordion-plus .accordion-body { padding-left: calc(15px + 0.6em); }

/* ---------- Newsletter (footer) — visual clone; submit is a placeholder ---------- */
.footer-newsletter { text-align: center; }
.footer-newsletter h3 { margin-bottom: 2.8rem; }
.newsletter-form { max-width: 640px; margin: 0 auto; }
.newsletter-desc { margin: 0 0 3.4rem; }
.newsletter-fields {
  display: flex;
  gap: 13px;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
}
.newsletter-fields input[type="email"] {
  flex: 0 1 280px;
  min-width: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: #000;
  background: #fff;
  border: 0;
  border-radius: 0;
  padding: 0.9em 2em;
}
.newsletter-fields input[type="email"]::placeholder { color: #a7b3b7; }
.newsletter-fields input[type="email"]:focus { outline: 2px solid #000; }
.newsletter-fields .btn { padding: 1.34rem 2rem; }
.newsletter-thanks { font-weight: 300; }

/* ---------- Footer ---------- */
.footer-links-row { text-align: center; }
.footer-links-row p { margin: 0 0 1.5rem; }
.footer-links-row p a {
  color: #fff;
  text-decoration: underline;
  margin: 0 0.75em;
}
.footer-links-row p a:hover { opacity: .8; }
.footer-social {
  display: flex;
  justify-content: center;
  gap: 16px;
}
.footer-social a { color: #fff; }
.footer-social svg { width: 28px; height: 28px; display: block; fill: currentColor; }
.footer-social a:hover { opacity: .8; }

/* ---------- Legal pages (privacy / terms) ---------- */
.legal-content h1 { margin-bottom: 0.5em; }
.legal-content p { margin: 0.4em 0; }
.legal-content [style*="text-align:right"] { text-align: right; }

/* ---------- FAQ heading column ---------- */
.faq-heading h2 { margin-bottom: 0.35em; }

/* ---------- Misc ---------- */
.align-center { text-align: center; }
.google-form-note { border: 0; }