/* ===================================================
   GOLDEN GATE EQUESTRIAN CENTER — style.css
   Palette: Prairie-Heritage (deep hunter green + warm cream + brass)
   Fonts: Fraunces (display) · Inter Tight (body) · JetBrains Mono (labels)
   =================================================== */
:root {
  /* brand world tokens */
  --paddock:     #1B2E1F;
  --paddock-2:   #142318;
  --hay:         #F4F0E4;
  --hay-2:       #EAE2CE;
  --hay-soft:    #FAF6EE;
  --brass:       #B8832E;
  --brass-2:     #D09B42;
  --brass-soft:  #EDD8A8;
  --earth:       #8B5E3A;
  --saddle:      #4A3F2E;
  --tan:         #7C6E58;
  /* structural aliases */
  --paper:       var(--hay);
  --paper-2:     var(--hay-2);
  --paper-soft:  var(--hay-soft);
  --ink:         var(--paddock);
  --ink-2:       var(--paddock-2);
  --accent:      var(--brass);
  --accent-2:    var(--brass-2);
  --accent-soft: var(--brass-soft);
  --spot:        var(--earth);
  --muted:       var(--saddle);
  --muted-2:     var(--tan);
  --line:        rgba(27,46,31,.12);
  --line-2:      rgba(27,46,31,.06);
  --f-display:   "Fraunces", Georgia, serif;
  --f-body:      "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono:      "JetBrains Mono", "SF Mono", Menlo, monospace;
  --container:   1320px;
  --container-narrow: 1040px;
  --gutter:      clamp(20px, 4vw, 56px);
  --ease:        cubic-bezier(.22, 1, .36, 1);
  --shadow-soft: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px -16px rgba(0,0,0,.12);
  --shadow-lift: 0 2px 4px rgba(0,0,0,.06), 0 24px 48px -20px rgba(0,0,0,.18);
}

/* RESET */
*{box-sizing:border-box;margin:0;padding:0;min-width:0}
*::selection{background:var(--ink);color:var(--paper)}
html{scroll-behavior:smooth;overflow-x:hidden;width:100%;max-width:100vw;-webkit-text-size-adjust:100%}
body{font-family:var(--f-body);font-size:16px;line-height:1.65;color:var(--ink);
  background:var(--paper);overflow-x:hidden;width:100%;max-width:100vw;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
section,header,footer{max-width:100vw;overflow-x:clip;position:relative}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:opacity .35s var(--ease)}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--paper-2)}
::-webkit-scrollbar-thumb{background:var(--ink)}

/* FILM GRAIN */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.05;
  mix-blend-mode:multiply;background-size:200px 200px;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media(prefers-reduced-motion:reduce){body::after{display:none}}

/* TYPOGRAPHY */
h1,h2,h3,h4,h5{font-family:var(--f-display);font-weight:400;letter-spacing:-.012em;line-height:1.08;color:var(--ink)}
h1{font-size:clamp(2.6rem,6vw,5.2rem)}
h2{font-size:clamp(2rem,4vw,3.4rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.9rem)}
p{color:var(--muted)}
em,.italic{font-style:italic;font-family:var(--f-display)}
.serif{font-family:var(--f-display);font-weight:400}
.eyebrow{font-family:var(--f-body);text-transform:uppercase;letter-spacing:.4em;font-size:11px;
  font-weight:500;color:var(--ink);display:inline-block}
.eyebrow::before{content:"";display:inline-block;width:28px;height:1px;
  background:var(--accent);margin-right:14px;vertical-align:middle}
.label-mono{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted-2)}

/* LAYOUT */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.container-narrow{max-width:var(--container-narrow);margin:0 auto;padding:0 var(--gutter)}
.section{padding:clamp(64px,10vw,140px) 0}
.section--dark{background:var(--ink);color:var(--paper)}
.section--dark h1,.section--dark h2,.section--dark h3{color:var(--paper)}
.section--dark p{color:rgba(244,240,228,.72)}
.section--paper2{background:var(--paper-2)}
.grid{display:grid;gap:clamp(24px,4vw,64px)}
.center{text-align:center}
.mt-s{margin-top:16px}.mt-m{margin-top:32px}.mt-l{margin-top:64px}
.maxw-prose{max-width:62ch}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-body);
  font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  padding:16px 30px;border:1px solid var(--ink);background:var(--ink);
  color:var(--paper);transition:all .35s var(--ease)}
.btn:hover{background:transparent;color:var(--ink);opacity:1}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn--brass{background:var(--brass);border-color:var(--brass);color:var(--hay)}
.btn--brass:hover{background:var(--brass-2);border-color:var(--brass-2);color:var(--hay)}

/* ANNOUNCE */
.announce{background:var(--paddock-2);text-align:center;padding:11px 20px;
  font-size:10.5px;letter-spacing:.36em;text-transform:uppercase;color:rgba(244,240,228,.8)}
.announce b{color:var(--brass-2);font-weight:500}

/* NAV */
.nav{position:sticky;top:0;z-index:100;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:24px;padding:18px var(--gutter);
  background:color-mix(in srgb,var(--hay) 92%,transparent);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);transition:padding .35s var(--ease)}
.nav.scrolled{padding-top:12px;padding-bottom:12px}
.nav-logo{justify-self:start;font-family:var(--f-display);font-size:1.4rem;letter-spacing:.01em;color:var(--ink)}
.nav-logo span{display:block;font-family:var(--f-mono);font-size:9px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--muted-2);margin-top:2px}
.nav-links{display:flex;gap:32px;justify-self:center;list-style:none;
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;font-weight:500}
.nav-links a:hover{color:var(--accent);opacity:1}
.nav-cta{justify-self:end}
.nav-burger{display:none;flex-direction:column;gap:5px;padding:8px}
.nav-burger span{width:24px;height:1.5px;background:var(--ink);transition:.3s var(--ease)}

/* HERO */
.hero{min-height:94vh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 0 clamp(56px,9vw,120px);position:relative;overflow:hidden;
  background:linear-gradient(150deg,#1A3520 0%,#253E2A 40%,#1B2E1F 100%)}
.hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 70% 30%,rgba(184,131,46,.12) 0%,transparent 70%)}
.hero-ring{position:absolute;right:-10%;top:50%;transform:translateY(-50%);
  width:clamp(300px,45vw,600px);height:clamp(300px,45vw,600px);border-radius:50%;
  border:1px solid rgba(184,131,46,.18);opacity:.6}
.hero-ring-2{right:-6%;width:clamp(220px,35vw,460px);height:clamp(220px,35vw,460px);
  border-color:rgba(184,131,46,.1)}
.hero .container{position:relative;z-index:2}
.hero-meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;
  color:rgba(244,240,228,.55);margin-bottom:28px}
.hero-meta-row .dot{width:3px;height:3px;border-radius:50%;background:var(--brass)}
.hero h1{color:var(--hay);margin-bottom:24px}
.hero-tag{font-size:clamp(1rem,1.6vw,1.15rem);max-width:52ch;color:rgba(244,240,228,.78);line-height:1.7}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}

/* MARQUEE */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding:14px 0;background:var(--paper-2)}
.marquee-track{display:flex;gap:28px;white-space:nowrap;width:max-content;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted-2);animation:marq 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span:nth-child(even){color:var(--brass)}
@keyframes marq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* TRUST STATS */
.stat-num{font-family:var(--f-display);font-size:clamp(2.4rem,4vw,3.8rem);
  font-weight:400;color:var(--ink);letter-spacing:-.02em;display:block}
.stat-label{font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted-2);margin-top:8px;display:block}

/* SERVICE CARDS */
.service-card{border:1px solid var(--line);padding:clamp(28px,3.5vw,48px);
  background:var(--paper-soft);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.service-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.service-icon{font-size:28px;margin-bottom:20px;display:block}

/* ARENA SECTION */
.arena{background:linear-gradient(135deg,var(--paddock-2) 0%,#2C5035 100%);
  padding:clamp(80px,12vw,160px) 0;position:relative;overflow:hidden}
.arena::before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 80% at 30% 50%,rgba(184,131,46,.1) 0%,transparent 65%)}
.arena .container{position:relative;z-index:2}
.arena .eyebrow{color:var(--hay)}
.arena .eyebrow::before{background:var(--brass-2)}
.arena h2{color:var(--hay)}
.arena p{color:rgba(244,240,228,.75)}
.arena-badge{display:inline-flex;align-items:center;gap:10px;
  border:1px solid rgba(184,131,46,.4);padding:10px 20px;margin-top:32px}
.arena-badge span{font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--brass-2)}

/* TESTIMONIAL */
blockquote.quote-main p{font-family:var(--f-display);font-size:clamp(1.4rem,2.6vw,2rem);
  line-height:1.45;color:var(--ink)}
blockquote.quote-main cite{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);font-style:normal;margin-top:20px;display:block}

/* FAQ */
.faq-item{border-top:1px solid var(--line);padding:20px 0}
.faq-item:last-child{border-bottom:1px solid var(--line)}
details summary{font-family:var(--f-display);font-size:1.15rem;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-family:var(--f-body);font-size:1.5rem;
  color:var(--accent);font-weight:300;flex-shrink:0;transition:transform .3s var(--ease)}
details[open]>summary::after{transform:rotate(45deg)}
details p{margin-top:14px;max-width:66ch}

/* CONTACT FORM */
.form-field{width:100%;padding:14px 18px;border:1px solid var(--line);
  background:var(--paper-soft);font-family:var(--f-body);font-size:15px;
  color:var(--ink);transition:border-color .3s var(--ease);outline:none;
  -webkit-appearance:none}
.form-field:focus{border-color:var(--accent)}
textarea.form-field{resize:vertical;min-height:110px}
.form-grid{display:grid;gap:14px}

/* FOOTER */
.footer{background:var(--paddock-2);color:var(--paper);padding:clamp(56px,8vw,100px) 0 40px}
.footer a{color:rgba(244,240,228,.72)}
.footer a:hover{color:var(--brass-2);opacity:1}
.footer-rule{height:1px;background:rgba(244,240,228,.1);margin-top:48px}
.footer-credit{padding-top:24px;font-family:var(--f-mono);font-size:10.5px;
  letter-spacing:.06em;color:rgba(244,240,228,.45);display:flex;
  justify-content:space-between;flex-wrap:wrap;gap:8px}

/* REVEALS */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.is-in,.no-js .reveal,.reveal.reveal--shown{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* IMG FALLBACK */
.img-fallback{display:flex;align-items:center;justify-content:center;
  background:var(--paper-2);border:1px solid var(--line);min-height:220px}
.img-fallback-cap{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-2);padding:24px;text-align:center}

/* RESPONSIVE */
@media(max-width:860px){
  .nav-links{display:none}
  .nav-burger{display:flex}
  .nav{grid-template-columns:1fr auto}
  .nav-links.open{display:flex;position:fixed;inset:64px 0 auto 0;flex-direction:column;
    background:var(--paper);padding:32px var(--gutter);gap:22px;
    border-bottom:1px solid var(--line);z-index:99}
  .grid{gap:32px}
  .hero{min-height:88vh}
  .col-2,.col-3,.col-4{grid-template-columns:1fr !important}
  .hero-ring,.hero-ring-2{display:none}
  .arena-cols{grid-template-columns:1fr !important}
}
@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr 1fr !important}
}