/* Green Street Media: design system.
   This is the <style> block from greenstreetmedia_landing_v3.html, unchanged.
   Layout, colour, type, spacing, hover and motion live here and are never
   editable from the dashboard. */

:root {
  --gsm-black: #080F05;
  --gsm-lime: #A8D520;
  --gsm-green: #4CAF2A;
  --gsm-dark-green: #1A6B0A;
}
html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', sans-serif; background: #FBFBF9; color: var(--gsm-black); -webkit-font-smoothing: antialiased; }
.display { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.01em; }
.mono { font-family: 'Space Mono', monospace; }
.accent { color: var(--gsm-lime); }
.fade-up { opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.fade-up.in { opacity: 1; transform: none; }
.reel-frame { background: var(--gsm-black); position: relative; overflow: hidden; }
.reel-play { width: 84px; height: 84px; border: 1.5px solid rgba(255,255,255,.55); border-radius: 999px; display:flex; align-items:center; justify-content:center; transition: all .4s ease; }
.reel-frame:hover .reel-play { border-color: var(--gsm-lime); transform: scale(1.06); }
.grain::after { content:""; position:absolute; inset:0; opacity:.05; pointer-events:none; background-image: radial-gradient(rgba(255,255,255,.9) .5px, transparent .5px); background-size: 4px 4px; }
.btn-fill { position: relative; overflow: hidden; z-index: 0; }
.btn-fill::before { content:""; position:absolute; inset:0; background: var(--gsm-lime); transform: translateY(101%); transition: transform .45s cubic-bezier(.16,1,.3,1); z-index:-1; }
.btn-fill:hover::before { transform: translateY(0); }
.btn-fill:hover { color: var(--gsm-black) !important; border-color: var(--gsm-lime); }
.link-underline { position: relative; }
.link-underline::after { content:""; position:absolute; left:0; bottom:-3px; width:0; height:1px; background: currentColor; transition: width .35s ease; }
.link-underline:hover::after { width:100%; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary { cursor:pointer; list-style:none; }
.faq-item .plus { transition: transform .35s ease; }
.faq-item[open] .plus { transform: rotate(45deg); }
.cap-row { transition: background .4s ease; }
.cap-row:hover { background: var(--gsm-black); }
.cap-row:hover .cap-title, .cap-row:hover .cap-desc { color: #fff; }
.cap-row:hover .cap-num { color: var(--gsm-lime); }
.ways-card { transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease; }
.ways-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px -20px rgba(8,15,5,.25); }
.ways-card-feature { background: linear-gradient(180deg, rgba(168,213,32,.08), transparent 60%); }
.intent-opt.selected, .timeline-opt.selected { background: var(--gsm-black); color: var(--gsm-lime); border-color: var(--gsm-black); }
@media (prefers-reduced-motion: reduce) { .fade-up { opacity:1; transform:none; transition:none; } html { scroll-behavior:auto; } }
::selection { background: var(--gsm-lime); color: var(--gsm-black); }

/* ------------------------------------------------------------------
   Additions for the WordPress build only. Nothing above this line
   changed. These support media slots, the working contact form and
   accessibility; they do not alter any existing element's appearance.
   ------------------------------------------------------------------ */

/* Real media fills a placeholder frame. It is printed first inside the frame,
   so the gradient wash, the grain and the caption all paint on top of it and
   the designed look is preserved. */
.reel-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel-frame iframe.reel-media { border: 0; z-index: 2; }

/* Uploaded logo, in place of the GREEN STREET type lockup. Height is set from
   the Customizer; width follows the file's own aspect ratio. The wrapper turns
   into a flex box so the image cannot inherit the lockup's line-height and add
   stray space above or below it. */
.gsm-logo { width: auto; max-width: 100%; display: block; }
.gsm-logo-link { display: inline-flex; align-items: center; line-height: 0; }

/* The contact fields now sit inside a real <form>. Tailwind's preflight does
   not zero form margins, and some browsers add one in quirks mode, so the
   wrapper is explicitly neutral and the layout is unchanged. */
form { margin: 0; }

/* Screen-reader-only, used for form labels and the honeypot wrapper. */
.gsm-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Honeypot: never shown, never focusable, invisible to assistive tech. */
.gsm-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Form feedback. Inherits the section's own colours. */
.gsm-form-notice {
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 42rem;
}
.gsm-form-notice--ok { background: var(--gsm-black); color: var(--gsm-lime); }
.gsm-form-notice--error { background: rgba(8,15,5,.08); color: var(--gsm-black); border: 1px solid rgba(8,15,5,.35); }
.gsm-field-error { border-bottom-color: #7a1b1b !important; }

.gsm-turnstile { margin-top: 2rem; }
.gsm-submit[disabled] { opacity: .55; cursor: progress; }

/* Skip link, hidden until focused. */
.gsm-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--gsm-black); color: var(--gsm-lime);
  padding: .75rem 1.25rem; border-radius: 0 0 .5rem 0;
}
.gsm-skip-link:focus { left: 0; }

/* WordPress admin bar offset for the fixed header. */
body.admin-bar header.fixed { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar header.fixed { top: 46px; }
}