/* ==========================================================================
   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 (fluid rem multipliers, still fed through the Squarespace
     formula below). The 2026-09 refresh pulled these back from the values
     reverse-engineered off the Squarespace site: the old h1 of 5.19 ran the
     hero headline to three lines and pushed the CTAs under the fold, and the
     headings were set loose enough to read as separate lines rather than one
     block. Body copy went up slightly - Poppins Light is thin at 1.08. */
  --h1-size: 4.40;
  --h2-size: 3.30;
  --h3-size: 2.30;
  --h4-size: 1.35;
  --text-size: 1.12;
  --text-large-size: 1.35;
  --text-small-size: 0.98;

  --heading-line-height: 1.28;
  --body-line-height: 1.72em;
}

/* ---------- 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));
}
/* light-accent band (the palette's one unused color) - black text; the
   light orange is too light for white copy. Used by How-it-works. */
.theme-light {
  --bg: hsl(var(--light-accent-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(--black-hsl));
  --btn-bg: hsl(var(--dark-accent-hsl));
  --btn-text: hsl(var(--white-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, .type-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, .type-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, .type-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, .type-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, .type-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, .type-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; }

/* Heading-size utilities. A heading's LEVEL is document structure (screen
   readers and search engines navigate by it); its SIZE is design. These let the
   two differ where the old markup had them conflated - e.g. the FAQ title is an
   h1 set at h2 size, and the home page's section eyebrows are h3 set at h4 size.
   Declared after the element rules so they win on equal specificity. */
h1.type-h2, h3.type-h2 { font-weight: 700; }
h2.type-h4, h3.type-h4 { font-weight: 700; }

/* ---------- 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));
  /* The old Squarespace 5px white border-bottom was dropped in the
     play-integration redesign - it read as a stray line over the hero. */
  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; }
/* Full-viewport hero: relaxed, focused (Mark, 2026-07-18). svh keeps
   mobile browser chrome from overshooting the fold. */
.section-full   { min-height: 100vh; min-height: 100svh; }
/* 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: 4.2vmax var(--page-padding);        /* 2026-09 refresh: was 3.3vmax */
  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; }
/* <picture> is inline by default, which would leave the img sizing against an
   inline box and add a baseline gap under it. The demo animations are wrapped
   in one (WebP with a GIF fallback), so make the wrapper behave like the img. */
.feature-card .card-image picture { display: block; }
.feature-card .card-image img { border-radius: 28px; width: 100%; display: block; }
.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; }
}

/* ---------- Platform CTAs (hero + #try-giddy section) ----------
   One row offering every platform: App Store + Google Play badges and a
   "Play on the Web" button (play.giddy.com).

   All three rounded rectangles are sized from ONE height (--cta-h) rather than
   from per-item widths. Width-driven sizing drifted: the two official PNGs have
   different effective aspect ratios, so any pair of width clamps only matched at
   a single viewport and diverged everywhere else (App Store rendered ~70px tall
   next to a ~59px Google Play badge at 1440px+). Height-driven sizing holds at
   every viewport; each badge's width follows from its own aspect ratio. */
.platform-ctas {
  --cta-h: 60px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.2rem 1.6rem;
  margin-top: 4rem;
}
.platform-ctas .hero-badge {
  margin-top: 0;
  min-width: 0;
  flex: 0 0 auto;
  /* app-store-badge.png (880x295) is tight-cropped, so box = artwork. */
  height: var(--cta-h);
  width: auto;
}
.platform-ctas .hero-badge img { height: 100%; width: auto; max-width: none; }
/* google-play-badge.png (646x250) is Google's official asset, which carries 41px
   of transparent padding on every side - its artwork is only 564x168. Scale the
   box up by 250/168 so the visible rounded rect lands on --cta-h, then pull the
   padding back out of the layout (41/168 of --cta-h per side) so the row's gaps
   are measured from the artwork, not from the empty margin baked into the PNG. */
.platform-ctas .badge-google {
  height: calc(var(--cta-h) * 250 / 168);
  margin: calc(var(--cta-h) * -41 / 168);
}
/* Round only the CTA-row button so it matches the store badges beside it, and
   drive its height off --cta-h too (its padding+line-height would otherwise
   drift with the fluid font size). */
.platform-ctas .btn {
  border-radius: 10px;
  flex: 0 0 auto;
  height: var(--cta-h);
  padding-top: 0;
  padding-bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.platform-ctas--center { justify-content: center; margin-top: 2.5rem; }
/* Hero copy now has a CTA paragraph between subtitle and badges,
   so the row needs less of its own headroom there. */
.hero-copy .platform-ctas, .hero-copy .platform-tiles { margin-top: 2.5rem; }
/* Apple Music requirement, stated at the point of conversion. */
.platform-fineprint { margin-top: 1.1rem; margin-bottom: 0; opacity: .8; }
@media screen and (max-width: 767px) {
  .platform-ctas { margin-top: 2rem; }
}

/* Home: "How it works" numbered steps - dark-orange cards lift the text
   clear of the animated bokeh background for legibility. */
.how-steps > div {
  background: hsl(var(--dark-accent-hsl));
  border-radius: 12px;
  padding: 1.8rem 2rem 2.2rem;
  /* Cards are always dark orange - pin their text white so a section-theme
     change can never repaint it (black-on-dark-orange was illegible). */
  --heading-s: hsl(var(--white-hsl));
  --paragraph: hsl(var(--white-hsl));
  --paragraph-link: hsl(var(--white-hsl));
}
.how-steps .step-num {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  margin: 0 0 .75rem;
}
@media screen and (max-width: 767px) {
  .how-steps > div + div { margin-top: 1.25rem; }
}

/* Hero Variant B (hero-b.html): three platform tiles.
   TEMPORARY - delete this block (and hero-b.html) once a variant is chosen. */
.platform-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 4rem;
}
.platform-tile {
  flex: 1 1 150px;
  max-width: 210px;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.2rem 1.5rem;
  text-decoration: none;
  background: var(--btn-bg, var(--accent));
  color: var(--btn-text, #fff);
}
a.platform-tile:hover { opacity: .85; }
.platform-tile .tile-platform { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.35rem; line-height: 1.3; }
.platform-tile .tile-action { font-weight: 300; font-size: .95rem; line-height: 1.5; }
@media screen and (max-width: 767px) {
  .platform-tiles { margin-top: 2rem; }
}

/* ---------- 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%; }

/* ---------- Contact form ----------
   Replaced the embedded Google Form iframe, which was a fixed 640x769 box in
   Google's own styling that never matched the site and sat awkwardly on a
   phone. Same backend: it posts to the same Google Form. Borrows the input
   treatment from the newsletter field so the two read as one family. */
.contact-form .form-group { margin-bottom: 1.4rem; }
.contact-form label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.45em;
  color: var(--paragraph, #000);
}
.contact-form .req { color: var(--accent); margin-left: 0.15em; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  display: block;
  width: 100%;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.5;
  color: #000;
  background: #fff;
  border: 1px solid #cfd6d8;
  border-radius: 8px;
  padding: 0.75em 0.9em;
}
.contact-form textarea { resize: vertical; min-height: 8em; }
.contact-form input:focus, .contact-form textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
/* :invalid alone would mark every field red before the visitor has typed a
   thing; .was-validated is set on the first failed submit. */
.contact-form.was-validated input:invalid,
.contact-form.was-validated textarea:invalid { border-color: #c0392b; }
.contact-form .form-note { font-size: 0.9rem; opacity: 0.75; margin: 0 0 1.1rem; }
.contact-thanks { padding: 1.2rem 0; }
.contact-fallback { color: #c0392b; }
.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; }
.spacer-sm { height: 3rem; }
/* Get-involved: lead sentence sits just under the title block. */
.gi-intro { margin-top: 1.5rem; }
/* Get-involved link cards: a .cols row of soft cards, each ending in a button.
   Soft accent tint reads as a card on the white panel without a hard border. */
.link-cards > div {
  display: flex;
  flex-direction: column;
  background: hsl(var(--accent-hsl), 0.06);
  border-radius: 12px;
  padding: 1.7rem 1.9rem 1.9rem;
}
.link-cards .btn { margin-top: auto; align-self: flex-start; }
.link-cards h4 + p { margin-bottom: 1.4rem; }
@media screen and (max-width: 767px) {
  .link-cards > div + div { margin-top: 1.25rem; }
}
.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; }
/* The FAQ title is one h1 split across three lines; .faq-line keeps the
   stacked layout and the spacing the three sibling h2s used to give it. */
.faq-title .faq-line { display: block; margin-bottom: 0.35em; }
.faq-title .faq-line:last-child { margin-bottom: 0; }

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