/* ============================================================
Archery Sarasota — Design System
v1.0 · Locked 2026-05-05
Direction: A2 — Black · Charcoal · Bright Gold
============================================================
Drop-in stylesheet. Reference from any HTML page as:
Required Google Fonts (paste into ):
============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--navy:#0A0A0A; /* was navy — now near-black */
--navy-2:#1F1F1F; /* was navy-2 — now charcoal */
--graphite:#2A2A2A;
--grey-mid:#4A4A4A;
--grey-light:#9A9A9A;
--gold:#F0C419; /* brighter bullion gold */
--gold-bright:#FFD93D;
--bone:#F5F1E8;
--white:#fff;
--line:rgba(255,255,255,.10);
--line-strong:rgba(240,196,25,.4);
--text:#1a1a1a;
}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:'Inter',sans-serif;background:var(--bone);color:var(--text);line-height:1.5}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
.eyebrow{font-family:'Bebas Neue',sans-serif;letter-spacing:.18em;font-size:14px;color:var(--gold)}
/* NAV */
nav.top{background:var(--navy);color:var(--white);position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);box-shadow:0 1px 0 var(--line-strong)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;max-width:1280px;margin:0 auto}
.brand{display:flex;align-items:center;gap:12px;font-family:'Playfair Display',serif;font-weight:900;font-size:22px;letter-spacing:.02em}
.brand img{height:40px;width:auto;filter:brightness(0) invert(1)}
.nav-links{display:flex;gap:28px;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.08em}
.nav-links a{opacity:.85;transition:opacity .2s,color .2s}
.nav-links a:hover{color:var(--gold);opacity:1}
.book-cta{background:var(--gold);color:var(--navy);padding:12px 22px;font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.1em;border-radius:2px;transition:background .2s}
.book-cta:hover{background:var(--gold-bright)}
/* HERO */
.hero{position:relative;min-height:88vh;background:#000;overflow:hidden;display:flex;align-items:flex-end}
.hero::before{content:"";position:absolute;inset:0;background:url('https://archerysarasota.com/wp-content/uploads/2026/05/archery-sarasota-hero-06-tattoo-draw-v2.jpg') center/cover;opacity:.7}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.15) 100%)}
.hero-inner{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:80px 32px;color:var(--white);width:100%}
.hero-meta{display:flex;align-items:center;gap:16px;margin-bottom:28px}
.hero-meta .dash{height:1px;width:60px;background:var(--gold)}
.hero h1{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(48px,7vw,108px);line-height:.95;letter-spacing:-.02em;margin-bottom:24px}
.hero h1 em{color:var(--gold);font-style:normal}
.hero .lede{font-size:20px;max-width:620px;opacity:.9;margin-bottom:40px;font-weight:300}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap}
.btn{display:inline-block;padding:18px 32px;font-weight:700;text-transform:uppercase;font-size:14px;letter-spacing:.12em;border-radius:2px;transition:all .2s;border:2px solid transparent}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-gold:hover{background:var(--gold-bright)}
.btn-ghost{border-color:var(--white);color:var(--white)}
.btn-ghost:hover{background:var(--white);color:var(--navy)}
/* SCORE STRIP */
.scorestrip{background:var(--navy);color:var(--white);padding:0;border-top:1px solid var(--gold)}
.score-grid{display:grid;grid-template-columns:repeat(4,1fr);max-width:1280px;margin:0 auto}
.score{padding:28px 24px;border-right:1px solid var(--line);text-align:left}
.score:last-child{border-right:none}
.score .num{font-family:'Bebas Neue',sans-serif;font-size:54px;line-height:1;color:var(--gold);letter-spacing:.02em}
.score .label{font-size:12px;text-transform:uppercase;letter-spacing:.12em;opacity:.75;margin-top:4px}
/* SERVICES */
.section{padding:120px 0}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:60px;flex-wrap:wrap;gap:24px}
.section-head h2{font-family:'Playfair Display',serif;font-size:clamp(36px,5vw,68px);font-weight:900;line-height:1;letter-spacing:-.02em;max-width:700px}
.section-head .right{font-size:16px;max-width:380px;opacity:.75}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.svc{background:var(--white);padding:36px;border-top:4px solid var(--gold);position:relative;transition:transform .3s,box-shadow .3s;cursor:pointer;border-left:1px solid #ECE6D6;border-right:1px solid #ECE6D6;border-bottom:1px solid #ECE6D6}
.svc:hover{transform:translateY(-6px);box-shadow:0 24px 48px -16px rgba(0,0,0,.22)}
.svc .num{font-family:'Bebas Neue',sans-serif;font-size:36px;color:var(--gold);letter-spacing:.04em}
.svc h3{font-family:'Playfair Display',serif;font-size:26px;font-weight:700;margin:8px 0 16px;line-height:1.15}
.svc p{font-size:15px;color:#444;margin-bottom:20px}
.svc .price{font-family:'Bebas Neue',sans-serif;font-size:20px;color:var(--navy);letter-spacing:.06em}
.svc .arrow{position:absolute;bottom:24px;right:32px;color:var(--gold);font-size:24px;transition:transform .2s}
.svc:hover .arrow{transform:translateX(6px)}
/* FEATURE BAND */
.feature{background:var(--navy);color:var(--white);padding:120px 0;position:relative;overflow:hidden}
.feature::before{content:"";position:absolute;right:-200px;top:50%;transform:translateY(-50%);width:600px;height:600px;border:1px solid var(--gold);border-radius:50%;opacity:.18}
.feature::after{content:"";position:absolute;right:-100px;top:50%;transform:translateY(-50%);width:380px;height:380px;border:1px solid var(--gold);border-radius:50%;opacity:.3}
.feature-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;position:relative;z-index:2}
.feature h2{font-family:'Playfair Display',serif;font-size:clamp(36px,5vw,64px);font-weight:900;line-height:1.05;margin-bottom:28px}
.feature h2 em{color:var(--gold);font-style:normal}
.feature p{font-size:18px;opacity:.85;margin-bottom:20px;line-height:1.65}
.feature-img{aspect-ratio:4/5;background:url('https://archerysarasota.com/wp-content/uploads/2026/04/usa-archery-720-round-state-champion-sarasota.jpg') center/cover;border:6px solid var(--gold);box-shadow:24px 24px 0 -1px var(--graphite),24px 24px 0 0 var(--gold)}
/* TESTIMONIAL */
.quote-band{padding:100px 0;background:var(--bone);text-align:center}
.quote-band blockquote{font-family:'Playfair Display',serif;font-size:clamp(28px,3.4vw,44px);line-height:1.25;font-weight:700;max-width:980px;margin:0 auto;color:var(--navy)}
.quote-band blockquote em{color:var(--gold);font-style:italic;font-weight:700}
.quote-band cite{display:block;margin-top:32px;font-style:normal;font-size:14px;text-transform:uppercase;letter-spacing:.12em;color:var(--gold);font-weight:600}
/* CTA */
.bigcta{background:var(--navy);color:var(--white);padding:140px 0;text-align:center;background-image:linear-gradient(rgba(10,10,10,.94),rgba(10,10,10,.86)),url('https://archerysarasota.com/wp-content/uploads/2026/05/archery-sarasota-hero-01-stormy-draw-v2.jpg');background-size:cover;background-position:center}
.bigcta h2{font-family:'Playfair Display',serif;font-size:clamp(40px,6vw,80px);font-weight:900;line-height:1.05;letter-spacing:-.02em;margin-bottom:20px}
.bigcta h2 em{color:var(--gold);font-style:normal}
.bigcta p{font-size:18px;opacity:.85;max-width:620px;margin:0 auto 40px}
/* FOOTER */
footer{background:var(--navy);color:var(--white);padding:60px 0 32px;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.foot-brand{font-family:'Playfair Display',serif;font-weight:900;font-size:22px;margin-bottom:14px}
.foot-grid h4{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--gold);margin-bottom:18px}
.foot-grid a{display:block;font-size:14px;opacity:.8;margin-bottom:10px}
.foot-grid a:hover{opacity:1;color:var(--gold)}
.foot-bot{border-top:1px solid var(--line);padding-top:24px;font-size:12px;opacity:.55;text-align:center}
@media(max-width:880px){
.nav-links{display:none}
.svc-grid{grid-template-columns:1fr}
.feature-inner{grid-template-columns:1fr;gap:48px}
.score-grid{grid-template-columns:repeat(2,1fr)}
.foot-grid{grid-template-columns:1fr 1fr}
}
/* ============================================================
MOBILE NAVIGATION (added 2026-05-05)
Hamburger toggle for nav.top at <=880px width.
Triggered by .is-open class on nav.top.
============================================================ */
.nav-toggle{display:none;background:transparent;border:none;width:42px;height:42px;cursor:pointer;padding:0;flex-direction:column;justify-content:center;gap:5px;align-items:center}
.nav-toggle:focus{outline:2px solid var(--gold);outline-offset:2px}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--gold);transition:transform .25s ease,opacity .2s ease}
nav.top.is-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
nav.top.is-open .nav-toggle span:nth-child(2){opacity:0}
nav.top.is-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:880px){
.nav-inner{position:relative;padding:14px 20px}
.nav-toggle{display:flex}
.nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--navy);flex-direction:column;padding:8px 20px 24px;gap:0;border-top:1px solid var(--line-strong);box-shadow:0 12px 30px -10px rgba(0,0,0,.6)}
nav.top.is-open .nav-links{display:flex}
nav.top.is-open .nav-links a{padding:16px 0;border-bottom:1px solid var(--line);width:100%}
nav.top.is-open .nav-links a:last-child{border-bottom:none}
.book-cta{padding:9px 14px;font-size:12px;letter-spacing:.08em}
.brand{font-size:18px}
.brand img{height:34px}
}
/* ============================================================
PAGE HERO IMAGE TREATMENT (added 2026-05-05 v1.1)
Optional photo background for .subhero on every interior page.
Apply via class="subhero with-image" + inline background-image.
============================================================ */
.subhero{padding:80px 0 60px;background:var(--navy);color:var(--white);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.subhero-inner{max-width:1280px;margin:0 auto;padding:0 32px;position:relative;z-index:2}
.subhero .crumbs{font-family:'Bebas Neue',sans-serif;letter-spacing:.18em;font-size:13px;color:var(--gold);margin-bottom:24px}
.subhero h1{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(40px,5.6vw,88px);line-height:1;letter-spacing:-.02em;margin-bottom:20px;max-width:1000px}
.subhero h1 em{color:var(--gold);font-style:normal}
.subhero .lede{font-size:20px;max-width:680px;opacity:.88;font-weight:300}
.subhero.with-image{padding:120px 0 100px;min-height:50vh;background-color:var(--navy);background-size:cover;background-position:center;display:flex;align-items:flex-end}
.subhero.with-image::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.55) 55%,rgba(10,10,10,.18) 100%);z-index:1}
.subhero.with-image .subhero-inner{width:100%}
.subhero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}
.subhero-cta .btn{padding:16px 28px}
@media(max-width:880px){
.subhero.with-image{padding:80px 0 60px;min-height:45vh}
.subhero h1{font-size:clamp(34px,8vw,56px)}
}
/* Tighten body reading width — was 1100px, now 800px for ~70 char lines */
.live-content{max-width:800px}
/* Blog post: also support a hero image overlay */
.article-hero{min-height:55vh;background-color:var(--navy);background-size:cover;background-position:center;display:flex;align-items:flex-end;color:var(--white);position:relative;margin-bottom:0}
.article-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.55) 55%,rgba(10,10,10,.18) 100%);z-index:1}
.article-hero-inner{position:relative;z-index:2;max-width:1100px;margin:0 auto;padding:80px 32px;width:100%}
.article-hero .crumbs{font-family:'Bebas Neue',sans-serif;letter-spacing:.18em;font-size:13px;color:var(--gold);margin-bottom:18px}
.article-hero h1{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(38px,5.4vw,80px);line-height:1.02;letter-spacing:-.02em;margin-bottom:20px;max-width:980px;color:var(--white)}
.article-hero h1 em{color:var(--gold);font-style:normal}
.article-hero .byline{font-size:14px;opacity:.82;font-family:'Inter',sans-serif;letter-spacing:.04em;text-transform:uppercase}
@media(max-width:880px){
.article-hero{min-height:45vh}
.article-hero-inner{padding:60px 24px}
}
/* ============================================================
COMPONENT ALIASES (added 2026-05-05 v1.2)
The build agent invented its own class names instead of using
the design system tokens. These rules style its classes to
match the design system, so existing markup works without
rewriting every page.
============================================================ */
/* SERVICES GRID — was a wall of text, now a proper 3-col card grid */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1280px;margin:60px auto;padding:0 32px}
.service-card{background:var(--white);padding:36px;border-top:4px solid var(--gold);border-left:1px solid #ECE6D6;border-right:1px solid #ECE6D6;border-bottom:1px solid #ECE6D6;position:relative;transition:transform .3s,box-shadow .3s;cursor:pointer;text-decoration:none;color:inherit;display:block}
.service-card:hover{transform:translateY(-6px);box-shadow:0 24px 48px -16px rgba(0,0,0,.22)}
.service-card h3{font-family:'Playfair Display',serif;font-size:24px;font-weight:700;line-height:1.15;margin:0 0 14px;color:var(--text)}
.service-card h3 a{color:inherit;text-decoration:none;border-bottom:none}
.service-card h3 a:hover{color:var(--gold)}
.service-card p{font-size:15px;line-height:1.55;color:#444;margin:0}
/* Hide all decorative emoji icon containers */
.service-icon{display:none}
@media(max-width:880px){
.services-grid{grid-template-columns:1fr;gap:16px;margin:40px auto;padding:0 20px}
}
/* TRUST BAR — was a plain list, now a horizontal credentials strip */
.trust-bar{background:var(--navy);color:var(--white);padding:0;border-top:1px solid var(--gold);border-bottom:1px solid var(--line)}
.trust-inner{display:grid;grid-template-columns:repeat(4,1fr);max-width:1280px;margin:0 auto}
.trust-item{padding:24px 24px;border-right:1px solid var(--line);text-align:center;font-family:'Bebas Neue',sans-serif;font-size:14px;letter-spacing:.14em;color:var(--gold)}
.trust-item:last-child{border-right:none}
@media(max-width:880px){
.trust-inner{grid-template-columns:1fr 1fr}
.trust-item{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 12px}
.trust-item:nth-child(2n){border-right:none}
}
/* BUTTONS — alias to design system buttons */
.btn-primary{display:inline-block;padding:18px 32px;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.12em;border-radius:2px;background:var(--gold);color:var(--navy);text-decoration:none;border:2px solid transparent;transition:background .2s;cursor:pointer;font-family:'Inter',sans-serif}
.btn-primary:hover{background:var(--gold-bright)}
.btn-secondary{display:inline-block;padding:18px 32px;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.12em;border-radius:2px;background:transparent;color:var(--text);text-decoration:none;border:2px solid var(--text);transition:all .2s;cursor:pointer;font-family:'Inter',sans-serif}
.btn-secondary:hover{background:var(--text);color:var(--white)}
/* SECTION CONTAINERS */
.section-inner{max-width:1280px;margin:0 auto;padding:80px 32px}
@media(max-width:880px){.section-inner{padding:60px 20px}}
/* PAGE HERO — secondary heading area on some pages */
.page-hero{padding:80px 0 60px}
.page-hero .hero-inner{max-width:1280px;margin:0 auto;padding:0 32px;text-align:center}
.page-hero h1{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(36px,5vw,68px);line-height:1.05;letter-spacing:-.02em;margin-bottom:20px}
.page-hero h1 span{color:var(--gold)}
.page-hero .hero-tagline{font-size:20px;max-width:680px;margin:0 auto 32px;color:#333;line-height:1.55}
.page-hero .hero-buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* HOW INTRO + similar light content sections */
.how-intro-section{padding:80px 0;background:var(--bone)}
/* Headings inside sections that need design-system styling */
.section-title{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(36px,5vw,68px);line-height:1.05;letter-spacing:-.02em;margin-bottom:20px;text-align:center}
.section-title span{color:var(--gold)}
.section-subtitle{font-size:20px;max-width:680px;margin:0 auto 60px;text-align:center;color:#333;line-height:1.55}
/* ============================================================
HERO SLIDESHOW (added 2026-05-05 v1.3)
Pure-CSS crossfade rotation. Pop the slides into the hero
markup and the keyframes handle the rest. To swap photos,
change the background-image URLs only.
7 slides x 4s each = 28s total cycle, 0.75s crossfade overlap.
============================================================ */
.hero-slides{position:absolute;inset:0;z-index:0}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;animation:heroFade 28s infinite;animation-fill-mode:backwards;will-change:opacity}
.hero-slide:nth-child(1){animation-delay:0s}
.hero-slide:nth-child(2){animation-delay:4s}
.hero-slide:nth-child(3){animation-delay:8s}
.hero-slide:nth-child(4){animation-delay:12s}
.hero-slide:nth-child(5){animation-delay:16s}
.hero-slide:nth-child(6){animation-delay:20s}
.hero-slide:nth-child(7){animation-delay:24s}
@keyframes heroFade{
0%{opacity:0}
2.68%{opacity:.7} /* fade in (0.75s) */
14.29%{opacity:.7} /* hold (3.25s) */
16.96%{opacity:0} /* fade out (0.75s, overlapping next slide) */
100%{opacity:0}
}
/* Pause slideshow when user hovers the hero (desktop only) */
@media(hover:hover){
.hero:hover .hero-slide{animation-play-state:paused}
}
/* Respect reduced motion: hold first slide static */
@media(prefers-reduced-motion:reduce){
.hero-slide{animation:none}
.hero-slide:nth-child(1){opacity:.7}
}
/* Make sure hero overlay + content still sit above the slides */
.hero::before{display:none} /* superseded by .hero-slides */
.hero::after{z-index:1}
.hero-inner{position:relative;z-index:2}
/* Optional dot indicators (for future enhancement) */
.hero-dots{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:3}
.hero-dots .dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);transition:background .3s}
.hero-dots .dot.active{background:var(--gold);width:24px;border-radius:4px}
/* ============================================================
NAV DROPDOWN (added 2026-05-05 v1.4)
Services dropdown — hover on desktop, tap to expand on mobile.
Phone link styled as text in the nav before Book Now.
============================================================ */
.nav-links{position:relative}
.nav-links li,.nav-links .nav-item{list-style:none}
.has-dropdown{position:relative}
.has-dropdown > a::after{content:"▾";font-size:9px;margin-left:6px;opacity:.7;transition:transform .2s}
.has-dropdown:hover > a::after{transform:rotate(180deg);opacity:1}
.dropdown{
position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-8px);
background:var(--navy);min-width:280px;padding:10px 0;
border-top:2px solid var(--gold);box-shadow:0 24px 48px -12px rgba(0,0,0,.5);
opacity:0;visibility:hidden;transition:opacity .18s,visibility .18s,transform .2s;
z-index:60
}
.dropdown li,.dropdown .nav-item{display:block}
.dropdown a{
display:block;padding:11px 22px;font-size:13px;font-weight:500;color:var(--white);
text-transform:uppercase;letter-spacing:.08em;opacity:.85;border-left:3px solid transparent;
transition:all .18s
}
.dropdown a:hover{opacity:1;color:var(--gold);border-left-color:var(--gold);background:rgba(240,196,25,.06)}
@media(hover:hover){
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown{
opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)
}
}
/* Phone link in nav */
.nav-phone{font-family:"Bebas Neue",sans-serif;font-size:15px;letter-spacing:.06em;color:var(--gold);padding:8px 0;white-space:nowrap}
.nav-phone:hover{color:var(--gold-bright)}
/* Mobile: dropdown expands inline inside the drawer */
@media(max-width:880px){
.nav-links{flex-direction:column;align-items:stretch;gap:0}
.has-dropdown > a::after{float:right}
.dropdown{
position:static;transform:none;opacity:1;visibility:visible;
background:var(--navy-2);border-top:none;box-shadow:none;
padding:0;display:none;min-width:0
}
nav.top.is-open .has-dropdown.is-expanded .dropdown{display:block}
.dropdown a{padding:14px 28px;font-size:13px}
.nav-phone{padding:14px 0;text-align:center;border-top:1px solid var(--line);margin-top:8px}
}
/* ============================================================
FULL-WIDTH BREAKOUT (added 2026-05-05 v1.5)
The trust bar lives inside .live-content (which has
max-width:800px). Use negative margins to break out and
span the full viewport width.
============================================================ */
.live-content .trust-bar,
.live-content .scoreboard,
.trust-bar,
.scoreboard{
width:100vw;
margin-left:calc(50% - 50vw);
margin-right:calc(50% - 50vw);
max-width:none
}
/* Restore the inner content max-width */
.trust-inner,.scoreboard-grid{
width:100%;
max-width:1280px;
margin:0 auto
}
/* ============================================================
TRUST BAR POSITIONING (added 2026-05-05 v1.6)
When trust bar is the first child of .live-content, kill the
parent padding so the band sits flush under the hero.
============================================================ */
.live-content > .trust-bar:first-child{
margin-top:-100px;
margin-bottom:60px
}
/* ============================================================
VARIANT A SECTIONS (added 2026-05-05 v1.7)
Component classes used by the rebuilt home page + interior
pages. Matches design-mockups/home-redesign/Variant_A.
============================================================ */
/* WHY band (Why Archers Travel Here) */
.va-why{background:var(--navy);color:var(--white);padding:120px 0}
.va-why .section-head h2{color:var(--white)}
.va-why .section-head p{color:#bbb}
.va-why-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:60px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.va-why-stat{padding:36px 24px;border-right:1px solid var(--line);text-align:center}
.va-why-stat:last-child{border-right:none}
.va-why-stat .num{font-family:"Bebas Neue",sans-serif;font-size:72px;color:var(--gold);line-height:1}
.va-why-stat .label{font-family:"Bebas Neue",sans-serif;font-size:13px;letter-spacing:.16em;color:#aaa;margin-top:8px}
.va-why-features{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:60px}
.va-why-feat{background:var(--navy-2);padding:32px;border-left:3px solid var(--gold)}
.va-why-feat h3{font-family:"Playfair Display",serif;font-size:22px;margin-bottom:12px;color:var(--white)}
.va-why-feat p{font-size:15px;color:#bbb;line-height:1.55}
/* Coaches — 2-col profile cards */
.va-coach-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.va-coach{background:var(--white);overflow:hidden;border-top:4px solid var(--gold)}
.va-coach-photo{aspect-ratio:5/4;background-size:cover;background-position:center}
.va-coach-body{padding:32px}
.va-coach h3{font-family:"Playfair Display",serif;font-size:32px;font-weight:900;line-height:1;margin-bottom:6px}
.va-coach .role{font-family:"Bebas Neue",sans-serif;font-size:14px;letter-spacing:.16em;color:var(--gold);margin-bottom:20px}
.va-coach .creds{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.va-coach .creds span{background:var(--bone);padding:6px 12px;font-size:12px;font-family:"Bebas Neue",sans-serif;letter-spacing:.1em}
.va-coach p{font-size:15px;color:#444;line-height:1.6}
/* Reviews — 3-col cards with big gold quote */
.va-reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.va-review{background:var(--white);padding:40px 32px 32px;border-top:4px solid var(--gold);position:relative}
.va-review::before{content:"“";position:absolute;top:8px;left:24px;font-family:"Playfair Display",serif;font-size:80px;line-height:1;color:var(--gold);font-weight:900}
.va-review p{font-size:15px;line-height:1.65;color:#333;margin-bottom:24px;margin-top:32px}
.va-review .who{font-family:"Bebas Neue",sans-serif;font-size:13px;letter-spacing:.14em;color:var(--gold);border-top:1px solid #eee;padding-top:14px}
/* Find the Studio — 2 col */
.va-find-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:40px;align-items:stretch}
.va-find-info{background:var(--navy);color:var(--white);padding:40px}
.va-find-info h3{font-family:"Playfair Display",serif;font-size:32px;margin-bottom:14px}
.va-find-info p{margin-bottom:20px;opacity:.85}
.va-find-info .label{font-family:"Bebas Neue",sans-serif;font-size:13px;letter-spacing:.14em;color:var(--gold);margin-top:24px}
.va-find-map{background:#ddd;background-image:linear-gradient(135deg,#ddd 25%,#ccc 25%,#ccc 50%,#ddd 50%,#ddd 75%,#ccc 75%,#ccc);background-size:24px 24px;display:flex;align-items:center;justify-content:center;color:#666;font-family:"Bebas Neue",sans-serif;letter-spacing:.14em;min-height:340px}
/* Service-area pill chips */
.va-areas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:40px}
.va-areas a{background:var(--white);border:1px solid #DDD3BB;padding:14px 22px;font-size:14px;font-family:"Bebas Neue",sans-serif;letter-spacing:.12em;color:var(--text);transition:all .2s}
.va-areas a:hover{border-color:var(--gold);background:var(--gold);color:var(--navy)}
/* FAQ list */
.va-faq-list{max-width:880px;margin:40px auto 0}
.va-faq-item{padding:28px 0;border-bottom:1px solid #DDD3BB}
.va-faq-item h3{font-family:"Playfair Display",serif;font-size:24px;margin-bottom:10px;color:var(--text)}
.va-faq-item p{font-size:16px;line-height:1.65;color:#333}
/* Big CTA */
.va-cta{padding:160px 0;color:var(--white);text-align:center;background-size:cover;background-position:center}
.va-cta h2{font-family:"Playfair Display",serif;font-weight:900;font-size:clamp(40px,6vw,80px);line-height:1.05;margin-bottom:18px}
.va-cta h2 em{color:var(--gold);font-style:normal}
.va-cta p{font-size:18px;opacity:.85;max-width:620px;margin:0 auto 36px}
/* Common section helpers */
.va-section{padding:120px 0}
.va-section-head{text-align:center;max-width:780px;margin:0 auto 60px}
.va-section-head h2{font-family:"Playfair Display",serif;font-weight:900;font-size:clamp(38px,5vw,64px);line-height:1.05;letter-spacing:-.02em;margin-bottom:18px}
.va-section-head h2 em{color:var(--gold);font-style:normal}
.va-section-head p{font-size:18px;color:#444;line-height:1.55}
@media(max-width:880px){
.va-why-stats,.va-coach-grid,.va-reviews-grid,.va-find-grid,.va-why-features{grid-template-columns:1fr}
}
/* ============================================================
UNIVERSAL SECTION STYLING (added 2026-05-05 v1.8)
The build agent invented 75+ section class names per page.
Instead of writing CSS for each, this catches them all with
a class$="-section" selector + explicit list for the unusual
ones, giving every section consistent Variant A treatment.
============================================================ */
section[class$="-section"],
section.intro-answer,
section.local-context,
section.academy-section,
section.tournament-month,
section.tourn-programs,
section.tourn-pricing,
section.build-intro,
section.philosophy-section,
section.components-section,
section.elite-section,
section.color-chart-section,
section.order-form-section,
section.arrow-approach,
section.arrow-services,
section.results-banner,
section.adult-section,
section.team-section,
section.prep-overview,
section.training-section,
section.methodology-section,
section.hunts-section,
section.gear-section,
section.brands-section,
section.coaching-section,
section.how-section,
section.who-section,
section.ages-section,
section.curriculum-section,
section.facility-section,
section.disambiguation-section,
section.values-section,
section.credentials-section,
section.about-story-section,
section.coaches-full-section,
section.fletch-section,
section.factors-section,
section.install-section,
section.strings-brands-section,
section.ship-section,
section.results-section,
section.signs-section,
section.diff-section,
section.process-section,
section.pricing-section,
section.strings-section,
section.related-section,
section.hunting-pillars-section,
section.tac-what-section,
section.tac-skills-section,
section.tac-prep-section,
section.tac-advantage-section,
section.build-process-section{
padding:80px 32px;
background:var(--bone)
}
/* Alternate backgrounds for visual rhythm */
section[class$="-section"]:nth-of-type(even),
section.intro-answer,
section.local-context:nth-of-type(odd),
section.process-section,
section.pricing-section{
background:var(--white)
}
/* Inner content centered + max-width */
section[class$="-section"] > *:not(.section-inner):not(div),
section[class$="-section"] > div:not(.section-inner){
max-width:1080px;
margin-left:auto;
margin-right:auto
}
section[class$="-section"] > .section-inner,
section.intro-answer > .section-inner,
section.local-context > .section-inner,
section.academy-section > .section-inner{
max-width:1280px;
margin:0 auto;
padding:0
}
/* Headings inside these sections */
section[class$="-section"] h2,
section.intro-answer h2,
section.local-context h2,
section.academy-section h2{
font-family:"Playfair Display",serif;
font-weight:900;
font-size:clamp(34px,4.4vw,56px);
line-height:1.05;
letter-spacing:-.02em;
margin-bottom:18px;
text-align:center
}
section[class$="-section"] h3,
section.intro-answer h3,
section.local-context h3,
section.academy-section h3{
font-family:"Playfair Display",serif;
font-weight:700;
font-size:24px;
line-height:1.2;
margin:28px 0 14px;
color:var(--text)
}
section[class$="-section"] h2 + p,
section[class$="-section"] h2 + .section-subtitle{
text-align:center;
max-width:780px;
margin:0 auto 48px;
font-size:18px;
color:#444;
line-height:1.55
}
section[class$="-section"] p{
font-size:16px;
line-height:1.7;
color:#222;
margin-bottom:18px;
max-width:780px;
margin-left:auto;
margin-right:auto
}
section[class$="-section"] ul,
section[class$="-section"] ol{
max-width:760px;
margin:0 auto 18px;
padding-left:22px
}
section[class$="-section"] li{
font-size:16px;
line-height:1.7;
color:#222;
margin-bottom:10px
}
/* Big bottom CTAs across all pages — match Variant A */
section.page-cta{
padding:160px 32px !important;
color:var(--white) !important;
text-align:center !important;
background-image:linear-gradient(rgba(10,10,10,.92),rgba(10,10,10,.88)),url("/assets/images/2026/05/archery-sarasota-hero-06-tattoo-draw-v2.jpg") !important;
background-size:cover !important;
background-position:center !important
}
section.page-cta h2,
section.page-cta h3{
color:var(--white) !important;
font-family:"Playfair Display",serif !important;
font-weight:900 !important;
font-size:clamp(40px,6vw,72px) !important;
text-align:center !important
}
section.page-cta p{
color:var(--white) !important;
opacity:.85 !important;
max-width:620px !important;
margin:0 auto 30px !important;
font-size:18px !important;
text-align:center !important
}
/* FAQ-section: clean Q&A list */
section.faq-section{
background:var(--bone);
padding:100px 32px
}
section.faq-section h2{
font-family:"Playfair Display",serif;
font-weight:900;
font-size:clamp(34px,4.4vw,56px);
text-align:center;
margin-bottom:48px
}
section.faq-section h3{
font-family:"Playfair Display",serif;
font-size:22px;
font-weight:700;
color:var(--text);
margin:0 0 10px;
padding-top:28px;
border-top:1px solid #DDD3BB;
max-width:880px;
margin-left:auto;
margin-right:auto
}
section.faq-section h3:first-of-type{
border-top:none;
padding-top:0
}
section.faq-section p{
font-size:16px;
line-height:1.65;
color:#333;
max-width:880px;
margin:0 auto 28px
}
/* Pricing tier cards (when pricing-section uses divs as cards) */
section.pricing-section .pricing-grid,
section.pricing-section .tiers,
section.pricing-section .options{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:24px;
max-width:1080px;
margin:48px auto 0
}
@media(max-width:880px){
section[class$="-section"]{padding:60px 20px}
section.page-cta{padding:120px 20px !important}
}
/* ============================================================
FORM STYLING (added 2026-05-05 v1.9)
Styles FluentForm widgets and any plain HTML form to match
the design system. Native form elements get Variant A look.
============================================================ */
/* Container */
form,form.frm-fluent-form{
max-width:680px;
margin:0 auto;
padding:48px;
background:var(--white);
border-top:4px solid var(--gold);
box-shadow:0 12px 40px -16px rgba(0,0,0,.18)
}
/* Field wrapper (FluentForm uses .ff-el-group) */
form .ff-el-group,
form > div,
form .field{
margin-bottom:18px
}
/* Labels */
form label,
form .ff-el-input--label label{
display:block;
font-family:"Bebas Neue",sans-serif;
font-size:13px;
letter-spacing:.12em;
color:var(--text);
margin-bottom:6px;
text-transform:uppercase
}
/* Inputs / Selects / Textareas */
form input[type=text],
form input[type=email],
form input[type=tel],
form input[type=number],
form input[type=url],
form select,
form textarea,
form .ff-el-form-control{
width:100% !important;
padding:14px 16px !important;
font-family:"Inter",sans-serif !important;
font-size:15px !important;
border:1px solid #DDD !important;
background:var(--white) !important;
border-radius:4px !important;
color:var(--text) !important;
box-sizing:border-box !important;
transition:border-color .15s
}
form input:focus,
form select:focus,
form textarea:focus,
form .ff-el-form-control:focus{
outline:none !important;
border-color:var(--gold) !important;
box-shadow:0 0 0 3px rgba(240,196,25,.15) !important
}
form textarea{
min-height:120px !important;
resize:vertical !important
}
/* Submit button */
form button[type=submit],
form input[type=submit],
form .ff-btn-submit{
display:inline-block;
padding:16px 32px !important;
background:var(--gold) !important;
color:var(--navy) !important;
font-family:"Inter",sans-serif !important;
font-weight:700 !important;
font-size:14px !important;
text-transform:uppercase !important;
letter-spacing:.12em !important;
border:none !important;
border-radius:2px !important;
cursor:pointer !important;
transition:background .2s !important;
margin-top:14px !important
}
form button[type=submit]:hover,
form input[type=submit]:hover,
form .ff-btn-submit:hover{
background:var(--gold-bright) !important
}
/* Section containing Pay links — style them as buttons */
section.order-form-section a[href*="square"],
section.pricing-section a[href*="square"],
section.order-form-section h3 + p a,
section[id="order"] a[href*="checkout"],
.pay-buttons a,
a.pay-button,
a[class*="pay"]:not(.book-cta){
display:inline-block;
padding:16px 28px;
background:var(--gold);
color:var(--navy);
font-family:"Inter",sans-serif;
font-weight:700;
font-size:14px;
text-transform:uppercase;
letter-spacing:.12em;
border-radius:2px;
text-decoration:none !important;
border-bottom:none !important;
margin:8px 6px;
transition:background .2s
}
section.order-form-section a[href*="square"]:hover,
section.pricing-section a[href*="square"]:hover{
background:var(--gold-bright)
}
/* Step heading inside order-form-section */
section.order-form-section h3{
font-family:"Playfair Display",serif !important;
font-size:28px !important;
margin:48px auto 14px !important;
text-align:center !important;
max-width:680px !important
}
/* ============================================================
CUSTOM BOW STRINGS POLISH (added 2026-05-05 v2.0)
Color chart lightbox, process steps, order section, FAQ
accordion, related-services grid.
============================================================ */
/* Color chart — reduced size + click-to-expand lightbox */
.chart-trigger{
display:block;
max-width:560px;
margin:32px auto;
position:relative;
cursor:zoom-in;
border:1px solid #DDD3BB;
background:var(--white);
padding:12px;
text-decoration:none;
border-bottom:none !important;
transition:transform .25s,box-shadow .25s
}
.chart-trigger:hover{
transform:translateY(-2px);
box-shadow:0 16px 32px -12px rgba(0,0,0,.18);
border-color:var(--gold)
}
.chart-trigger img{
width:100%;
height:auto;
display:block
}
.chart-trigger .zoom-hint{
display:block;
text-align:center;
font-family:"Bebas Neue",sans-serif;
font-size:12px;
letter-spacing:.14em;
color:var(--gold);
padding:10px 0 4px;
text-transform:uppercase
}
.chart-lightbox{
display:none;
position:fixed;
inset:0;
background:rgba(10,10,10,.94);
z-index:1000;
padding:60px;
align-items:center;
justify-content:center
}
.chart-lightbox:target{display:flex}
.chart-lightbox img{
max-width:100%;
max-height:90vh;
object-fit:contain;
box-shadow:0 30px 60px -10px rgba(0,0,0,.6)
}
.chart-lightbox-close{
position:absolute;
top:24px;
right:32px;
width:48px;
height:48px;
border-radius:50%;
background:var(--gold);
color:var(--navy) !important;
display:flex;
align-items:center;
justify-content:center;
font-size:32px;
font-weight:700;
text-decoration:none !important;
border-bottom:none !important;
line-height:1;
z-index:1001
}
.chart-lightbox-close:hover{background:var(--gold-bright)}
/* Process steps — clean horizontal flow */
.process-steps{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:24px;
max-width:1200px;
margin:60px auto 0;
counter-reset:step
}
.process-step{
padding:32px 0;
border-top:3px solid var(--gold);
background:transparent !important;
max-width:none !important
}
.process-step .step-number{
font-family:"Bebas Neue",sans-serif;
font-size:48px;
color:var(--gold);
line-height:1;
margin-bottom:14px
}
.process-step .step-content h3{
font-family:"Playfair Display",serif !important;
font-weight:700 !important;
font-size:20px !important;
margin:0 0 10px !important;
text-align:left !important;
line-height:1.2 !important
}
.process-step .step-content p{
font-size:14px !important;
line-height:1.55 !important;
color:#555 !important;
margin:0 !important;
text-align:left !important;
max-width:none !important
}
@media(max-width:880px){
.process-steps{grid-template-columns:1fr 1fr;gap:18px}
}
/* Order form section — center Step 2 / Pay deposit content */
.order-form-section{
background:var(--bone) !important
}
.order-form-section > .section-inner{
max-width:780px !important;
text-align:center
}
.order-form-section h3{
text-align:center !important;
font-family:"Playfair Display",serif !important;
font-size:28px !important;
margin:48px 0 14px !important
}
.order-form-section p{
text-align:center !important;
margin-left:auto !important;
margin-right:auto !important
}
.order-form-section .order-form-notice{
background:var(--white);
padding:20px 28px;
border-left:3px solid var(--gold);
margin:24px auto 32px;
font-size:15px;
color:#333;
text-align:left;
max-width:680px
}
.order-form-section .pay-row,
.order-form-section h3 + p ~ a,
section.order-form-section a[class*="pay"]{
display:inline-block !important
}
/* FAQ accordion */
section.faq-section .faq-item,
.faq-item{
display:block;
background:var(--white);
border-left:3px solid var(--gold);
padding:0;
margin:0 auto 12px;
max-width:880px;
border-radius:0;
overflow:hidden;
border-top:none !important
}
.faq-item summary{
display:flex;
justify-content:space-between;
align-items:center;
cursor:pointer;
padding:22px 28px;
font-family:"Playfair Display",serif;
font-size:20px;
font-weight:700;
color:var(--text);
list-style:none;
user-select:none;
transition:background .15s
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
content:"+";
font-family:"Bebas Neue",sans-serif;
color:var(--gold);
font-size:32px;
margin-left:18px;
transition:transform .25s;
flex-shrink:0;
line-height:1
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{background:rgba(240,196,25,.06)}
.faq-item p{
padding:0 28px 24px !important;
margin:0 !important;
font-size:16px !important;
line-height:1.65 !important;
color:#333 !important;
max-width:none !important;
text-align:left !important
}
/* Related services grid */
.related-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
max-width:1200px;
margin:48px auto 0
}
.related-card{
display:block;
background:var(--white);
padding:32px;
border-top:4px solid var(--gold);
border-left:1px solid #ECE6D6;
border-right:1px solid #ECE6D6;
border-bottom:1px solid #ECE6D6;
text-decoration:none !important;
border-bottom:none;
color:inherit;
transition:transform .3s,box-shadow .3s
}
.related-card:hover{
transform:translateY(-6px);
box-shadow:0 24px 48px -16px rgba(0,0,0,.22)
}
.related-card h3{
font-family:"Playfair Display",serif !important;
font-size:22px !important;
font-weight:700 !important;
margin:0 0 12px !important;
color:var(--text) !important;
text-align:left !important
}
.related-card p{
font-size:14px !important;
line-height:1.6 !important;
color:#555 !important;
margin:0 0 16px !important;
max-width:none !important;
text-align:left !important
}
.related-card .related-link{
font-family:"Bebas Neue",sans-serif;
font-size:13px;
letter-spacing:.14em;
color:var(--gold);
text-transform:uppercase
}
.related-card:hover .related-link{color:var(--gold-bright)}
@media(max-width:880px){
.related-grid{grid-template-columns:1fr}
}
/* Tighten body text width inside content sections */
section.live-content,
section.intro-answer,
section.install-section,
section.color-chart-section,
section.strings-brands-section{
padding-left:32px !important;
padding-right:32px !important
}
section.live-content > *,
section.intro-answer > *,
section.install-section > *,
section.color-chart-section > *{
max-width:780px;
margin-left:auto;
margin-right:auto
}
/* ============================================================
CUSTOM BOW STRINGS POLISH v2.1 (added 2026-05-05)
- Beat .live-content a underline on cards/triggers
- Center "Step 2: Pay Your String Deposit" payment row
- Caption + chart wrap polish
============================================================ */
/* Kill the gold underline bleeding into card/trigger anchors */
section.live-content a.related-card,
section.live-content a.related-card:hover,
section.live-content a.chart-trigger,
section.live-content a.chart-trigger:hover,
section.live-content a.chart-lightbox-close,
section.live-content a.payment-btn,
section.live-content a.payment-btn:hover{
border-bottom:none !important;
background:transparent !important
}
section.live-content a.related-card{
border-top:4px solid var(--gold) !important;
border-left:1px solid #ECE6D6 !important;
border-right:1px solid #ECE6D6 !important;
border-bottom:1px solid #ECE6D6 !important
}
/* Color chart caption — clean and centered under the lightbox link */
.color-chart-caption{
text-align:center;
font-size:13px;
color:#666;
font-style:italic;
max-width:560px;
margin:0 auto 24px;
line-height:1.5
}
/* Step 2 — Pay Your String Deposit payment row */
.payment-row{
margin:56px auto 0;
padding-top:48px;
border-top:1px solid #DDD3BB;
text-align:center;
max-width:680px
}
.payment-row .payment-heading{
font-family:"Playfair Display",serif !important;
font-size:28px !important;
font-weight:700 !important;
color:var(--text);
margin:0 0 12px !important;
text-align:center !important
}
.payment-row .payment-note{
font-size:16px !important;
color:#444 !important;
margin:0 auto 28px !important;
max-width:560px !important;
text-align:center !important
}
.payment-buttons{
display:flex;
justify-content:center;
align-items:stretch;
gap:16px;
flex-wrap:wrap;
margin:0 auto 24px;
max-width:none
}
section.live-content a.payment-btn{
display:inline-flex !important;
align-items:center;
justify-content:center;
background:var(--gold) !important;
color:var(--navy) !important;
font-family:"Bebas Neue",sans-serif !important;
font-size:18px !important;
letter-spacing:.1em !important;
padding:18px 32px !important;
text-decoration:none !important;
border:none !important;
border-radius:2px !important;
transition:background .15s, transform .15s !important;
min-width:220px
}
section.live-content a.payment-btn:hover{
background:var(--gold-bright,#FFD93D) !important;
transform:translateY(-2px)
}
.payment-fine{
font-size:14px !important;
color:#666 !important;
margin:16px auto 0 !important;
max-width:560px !important;
text-align:center !important
}
.payment-fine a{
color:var(--text) !important;
border-bottom:1px solid var(--gold) !important
}
/* Process steps — make the column count breathe better on tablets,
so step #5 doesn't dangle alone in a 2-column grid */
@media(max-width:1100px) and (min-width:881px){
.process-steps{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:880px){
.process-steps{grid-template-columns:1fr}
.process-step{padding:24px 0}
}
/* FAQ section width — keep it readable, not stretched */
section.faq-section > .section-inner{
max-width:920px !important
}