/* Green Square sports identity: grass green, lime, white and soft square forms. */
:root {
  --forest:#285116; --forest-2:#356821; --green:#548f25;
  --lime:#add12b; --mist:#e7f1d8; --ink:#252b23; --muted:#53614b;
  --line:#d9e5cf; --patina:none; --paper-material:none;
  --track:#a83c29; --court:#086e96; --play:#976b00;
  --shadow:0 16px 40px #28511612;
}
body { background:#fff; }
header { background:#fffffff5; background-image:none; border-color:var(--line); backdrop-filter:blur(12px); }
nav { height:90px; }
.brand { color:var(--forest); }
.brand-logo { border-radius:3px; }
.brand small { color:var(--muted); letter-spacing:.06em; }
.btn,.menu-toggle,.header-whatsapp { border-radius:12px; background-image:none; }
.btn-primary,.nav-actions .btn-primary,.quote-submit { background:var(--forest); color:#fff; }
.btn-primary:hover,.nav-actions .btn-primary:hover,.quote-submit:hover { background:#386b1e; color:#fff; }
.btn-ghost,.nav-actions .btn-ghost,.menu-toggle { background:#fff; color:var(--forest); border-color:#c9d9bb; }
.header-whatsapp { color:#21813a; background:#f1f8e9; border-color:#d9e5cf; }
.links.is-open { background:#285116; border-radius:0 0 16px 16px; }
.links a::after { background:var(--green); }
:focus-visible { outline:3px solid #548f25; outline-offset:4px; }
.hero { background:#f3f8ed; color:var(--ink); padding:36px 0 42px; }
.hero-grid { position:relative; grid-template-columns:1fr 1fr; gap:44px; min-height:540px; align-items:center; }
.hero-copy { padding:24px 0; max-width:none; }
.hero .eyebrow { color:var(--forest); }
.eyebrow::before { width:12px; height:12px; border-radius:3px; background:var(--lime); }
h1 { color:var(--forest); font-size:clamp(2.15rem,3.6vw,3.5rem); line-height:1.5; }
h1 em { color:var(--green); }
.hero-copy p { color:var(--muted); font-size:1.04rem; }
.hero-actions .btn-ghost { background:#fff; border-color:#c9d9bb; color:var(--forest); }
.hero-actions .btn-primary { background:var(--forest); color:#fff; }
.hero-actions .btn:hover { box-shadow:0 8px 20px #28511614; }
.hero-meta { color:var(--muted); border-color:#d4e2c7; }
.dot { background:var(--green); }
.hero-visual,[dir="ltr"] .hero-visual { position:relative; inset:auto; width:100%; height:510px; min-height:0; margin:0; }
.hero-visual::before { content:""; position:absolute; width:70px; height:70px; background:var(--lime); border-radius:16px; top:-14px; inset-inline-end:-14px; }
.hero-visual::after { content:""; position:absolute; width:100px; height:100px; border:2px solid #b8d499; border-radius:18px; bottom:-14px; inset-inline-start:-14px; z-index:-1; }
.hero-frame { inset:0; border-radius:22px; background:var(--forest); box-shadow:var(--shadow); }
.hero-frame img { object-position:center; }
.hero-frame::after,[dir="ltr"] .hero-frame::after { background:linear-gradient(0deg,#18390ce0,transparent 45%); }
.project-tag,[dir="ltr"] .project-tag { left:20px; right:20px; bottom:20px; padding:16px 20px; background:#ffffffed; border:0; border-inline-start:5px solid var(--lime); border-radius:12px; backdrop-filter:none; }
.project-tag strong { color:var(--forest); }
.project-tag small { color:var(--muted); }
.project-section,.quote-section,.project-videos,.company-resources,.steps { background:#fff; background-image:none; }
.project-section { padding-top:64px; }
.project-filters { gap:10px; }
.filter { --category:var(--forest); background:#f4f8ed; color:var(--forest); border:1px solid #d9e5cf; border-bottom:3px solid var(--category); border-radius:10px; padding:10px 18px; font-weight:700; }
.filter[data-filter="turf"] { --category:var(--green); }
.filter[data-filter="rubber"] { --category:var(--track); }
.filter[data-filter="children"] { --category:var(--play); }
.filter[data-filter="other"] { --category:var(--court); }
.filter.active { background:var(--category); border-color:var(--category); color:#fff; }
.filter:hover:not(.active) { background:#e7f1d8; }
.project-intro { border-color:var(--line); }
.project-details { border-radius:12px; border-color:var(--line); background:var(--line); }
.project-details div { background:#f3f8ed; background-image:none; }
.project-gallery figure,.project-gallery figure:first-child,.project-gallery figure:last-child { border-radius:14px; border-color:var(--line); background:#f2f7ec; }
.project-gallery figcaption { color:var(--forest); padding:16px 10px; }
.project-gallery figure:last-child img { background:#285116; }
.project-empty { background:#f3f8ed; border-color:var(--line); border-radius:12px; }
.quote-card { background:linear-gradient(130deg,#edf5e4,#e2efcf); border-color:var(--line); border-radius:20px; padding:36px; }
.court-option { background:#fff; border-color:#d4e3c7; border-radius:12px; }
.court-option:has(input:checked) { background:#fff; border-color:var(--green); box-shadow:inset 0 0 0 1px var(--green); }
.court-option input { accent-color:var(--green); }
.quote-fields input { color:var(--ink); border-color:#c5d5b6; border-radius:10px; }
.quote-note { color:var(--muted); }
.services { background:#f3f8ed; background-image:none; border-top:0; }
.service { --service-accent:var(--green); border-color:#d3e1c6; border-top:4px solid var(--service-accent); border-radius:14px; background-image:linear-gradient(110deg,#ffffffe0,#ffffffec),var(--surface-image); }
.service:nth-child(2) { --service-accent:var(--track); }
.service:nth-child(3) { --service-accent:var(--play); }
.service:nth-child(4),.service:nth-child(5),.service:nth-child(6) { --service-accent:var(--court); }
.service .num { color:var(--service-accent); border-color:var(--line); }
.service p { color:#4c5b43; }
.service:hover { background-color:var(--forest); background-image:linear-gradient(110deg,#285116ef,#285116df),var(--surface-image); border-color:var(--forest); }
.service:hover .num { color:#d5ed8a; }
.service:hover p { color:#e7f1d8; }
.resource-card { background:#f3f8ed; background-image:none; border-color:var(--line); border-top-color:var(--green); border-radius:18px; }
.profile-card { background:#285116; border-color:#416b2d; border-top-color:var(--lime); }
.profile-card h2 { color:#fff; }
.profile-card p { color:#e1edda; }
.profile-card .eyebrow { color:#d5ed8a; }
.profile-actions .btn-ghost { background:#ffffff0b; }
.profile-card .btn-primary { background:var(--lime); color:#203914; }
.resource-status { background:#e2efcf; color:var(--forest); }
.about { background:#285116; background-image:none; }
.about .eyebrow,.stat strong { color:#d5ed8a; }
.about p { color:#e1edda; }
.about .btn-dark { background:var(--lime); color:#203914; }
.stat { background:#ffffff0a; background-image:none; border-color:#ffffff30; border-radius:14px; }
.step { background:#f3f8ed; background-image:none; border-color:var(--line); border-top-color:var(--green); border-radius:14px; }
.step b { background:var(--forest); background-image:none; color:#fff; border-radius:10px; }
.contact { background:linear-gradient(to bottom,#fff 0%,#e7f1d8 24%,#92b875 49%,#41682d 73%,#18310f 100%); }
.contact-card { background:#285116; background-image:none; border-color:#577d39; border-radius:20px; }
.contact-card .btn-primary { background:var(--lime); color:#203914; }
.contact-card .btn-primary:hover { background:#c6e45c; }
footer { background:#18310f; background-image:none; color:#d5e1ce; }
@media (min-width:681px) and (max-width:980px) {
  .hero-grid { display:grid; gap:24px; min-height:0; }
  .hero-copy { width:100%; }
  .hero-visual,[dir="ltr"] .hero-visual { height:540px; }
  h1 { font-size:2.1rem; }
}
@media (max-width:680px) {
  nav { height:80px; }
  .hero { padding:20px 0 32px; }
  .hero-grid { width:calc(100% - 36px); display:flex; gap:26px; }
  .hero-copy { padding:0; background:none; }
  .hero-visual,[dir="ltr"] .hero-visual { height:280px; min-height:0; width:100%; margin:0; }
  .hero-visual::before { width:48px; height:48px; top:-8px; inset-inline-end:-8px; border-radius:12px; }
  .hero-visual::after { display:none; }
  .hero-frame { border-radius:16px; }
  h1 { font-size:clamp(1.9rem,7vw,2.5rem); line-height:1.5; }
  .hero-frame img { object-position:center 65%; }
  .project-tag,[dir="ltr"] .project-tag { left:12px; right:12px; bottom:12px; padding:10px 14px; }
  .hero-meta { gap:12px; }
  .quote-card { padding:26px 18px; border-radius:16px; }
  .contact-card { border-radius:16px; }
}
.highlights-card { background:#285116; border-color:#416b2d; border-top-color:var(--lime); }
.highlights-card h2 { color:#fff; }
.highlights-card p { color:#e1edda; }
.highlights-card .eyebrow { color:#d5ed8a; }
.highlights-card .highlight-file { background:#f3f8ed; border-color:#8cae73; }
.highlights-card .highlight-file-body h3 { color:var(--forest); }
.highlights-card .highlight-file-body .btn-primary { background:var(--lime); color:#203914; }