/* Green Square: architectural sports portfolio. */
:root { --lime:#b9ef52; --green:#416f21; --forest:#102b22; --muted:#58655f; --patina:url('assets/parchment-overlay.svg'); --paper-material:url('assets/parchment-material.webp'); }
body { background:#f8faf7; }
section[id] { scroll-margin-top:100px; }
:focus-visible { outline:3px solid #6ba926; outline-offset:5px; }
.shell { width:min(1240px,calc(100% - 64px)); }
.topbar { background:#091b15; font-size:.875rem; }
header { background:rgba(12,32,25,.97); color:#fff; border-color:#ffffff14; }
nav { height:88px; }
.links { gap:16px; }
.brand small { color:#b9ef52; font-size:.75rem; }
.brand-mark { border-radius:3px; }
.brand-logo { width:60px; height:60px; flex:0 0 60px; object-fit:contain; background:#fff; border-radius:3px; }
.btn { border-radius:6px; min-height:50px; padding:0 23px; font-size:.9375rem; }
.btn-primary { box-shadow:none; }
.btn-primary:hover { background:#cafd78; box-shadow:0 8px 24px #b9ef521a; }
.nav-actions .btn-ghost,.menu-toggle { background:transparent; color:white; border-color:#ffffff40; }
.menu-toggle { border-radius:6px; }
.hero { background:#0b211a; color:white; padding:0; }
.hero::before { inset:0; height:auto; background:radial-gradient(ellipse at 85% 20%,#234e32aa,transparent 60%); mask-image:none; }
.hero-grid { min-height:680px; grid-template-columns:1.06fr 1fr; gap:24px; position:static; }
.hero-copy { padding:65px 0 100px; position:relative; z-index:4; }
.hero .eyebrow { color:var(--lime); letter-spacing:0; font-size:.875rem; }
h1 { font-size:clamp(2.5rem,4.1vw,4.2rem); color:white; line-height:1.42; letter-spacing:0; margin:20px 0 24px; text-wrap:balance; }
h1 em { color:var(--lime); font-size:.87em; line-height:1.55; }
.hero-copy p { color:#d4e0d8; line-height:2; max-width:540px; font-size:1.03rem; }
.hero-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; max-width:540px; }
.hero-actions .btn { min-width:0; padding:12px 14px; text-align:center; white-space:normal; }
.hero-actions .btn-ghost { color:white; background:#ffffff0a; border-color:#ffffff50; }
.hero-meta { color:#c1d2c7; gap:20px; font-size:.875rem; padding-top:26px; border-top:1px solid #ffffff24; max-width:540px; }
.dot { border-radius:1px; box-shadow:none; width:6px; height:6px; }
.hero-visual { position:absolute; inset:0 auto 0 0; width:58%; min-height:0; z-index:1; }
.hero-frame { inset:0; border:0; border-radius:0; box-shadow:none; }
.hero-frame img { object-position:50% 58%; }
.hero-frame::after { background:linear-gradient(90deg,#0b211a08 35%,#0b211acc 79%,#0b211a 100%),linear-gradient(0deg,#0b211a 0%,transparent 24%,#0b211a24 100%); }
.project-tag { right:auto; left:32px; bottom:45px; background:#0c271bdd; backdrop-filter:blur(12px); border:1px solid #ffffff36; border-inline-start:3px solid var(--lime); border-radius:3px; box-shadow:none; }
.project-tag strong { color:white; }
.project-tag small { color:#ceddcf; font-size:.875rem; }
.year-card { width:120px; height:120px; top:30px; left:32px; background:#b9ef52f2; transform:none; border-radius:3px; box-shadow:none; }
[dir="ltr"] .year-card { transform:none; }
.year-card span { font-size:.875rem; }
[dir="ltr"] .hero-visual { left:auto; right:0; }
[dir="ltr"] .hero-frame::after { background:linear-gradient(270deg,#0b211a08 35%,#0b211acc 79%,#0b211a 100%),linear-gradient(0deg,#0b211a,transparent 24%); }
[dir="ltr"] .year-card,[dir="ltr"] .project-tag { left:auto; right:32px; }
.services { padding:80px 0 90px; color:var(--forest); background-color:#f3f6ed; background-image:linear-gradient(110deg,#f4f8ede0,#f8f5efe6),url('assets/turf-watermark.webp'); background-size:cover; background-position:center; border-top:5px solid var(--lime); }
.eyebrow { letter-spacing:0; font-size:.875rem; }
.section-head { align-items:center; gap:60px; }
.section-head h2,.about h2 { line-height:1.5; letter-spacing:0; font-size:clamp(1.9rem,3.1vw,2.9rem); text-wrap:balance; }
.section-head p { font-size:1rem; color:var(--muted); line-height:1.9; }
.section-head > div { flex:1; }
.section-head > p { flex:.75; }
.service-grid { border:none; gap:16px; }
.service { --surface-image:url('assets/rubber-watermark.webp'); min-height:240px; padding:27px; background-color:#f8f7f2; background-image:linear-gradient(110deg,#faf8f1bf,#fffdf5db),var(--surface-image); background-position:center; background-size:cover; border:1px solid #cdd9c5; border-radius:8px; box-shadow:0 4px 16px #173d1a08; }
.service:nth-child(1) { --surface-image:url('assets/service-football.webp'); }
.service:nth-child(2) { --surface-image:url('assets/rubber-watermark.webp'); }
.service:nth-child(3) { --surface-image:url('assets/service-playground.webp'); }
.service:nth-child(4) { --surface-image:url('assets/turf-watermark.webp'); }
.service:nth-child(5) { --surface-image:url('assets/service-tennis.webp'); }
.service:nth-child(6) { --surface-image:url('assets/service-basketball.webp'); }
.service:nth-child(7) { --surface-image:url('assets/service-indoor.webp'); }
.service:nth-child(8) { --surface-image:url('assets/service-equipment.webp'); }
.service::after { display:none; }
.service .num { color:#466334; font-size:1rem; font-variant-numeric:tabular-nums; padding-bottom:12px; border-bottom:1px solid #dae5d8; width:100%; }
.service h3 { margin:24px 0 12px; line-height:1.65; }
.service p { color:#425742; font-size:.9rem; line-height:1.85; }
.service:hover { background-color:#143d2b; background-image:linear-gradient(110deg,#143d2beb,#143d2bd9),var(--surface-image); color:white; border-color:#143d2b; box-shadow:0 14px 35px #173d1a22; }
.service:hover .num { color:var(--lime); border-color:#ffffff30; }
.service:hover p { color:#d0ddce; }
.project-section { background:#e9eee7; padding:80px 0; }
.project-intro { padding-top:26px; border-top:1px solid #cbd6c7; }
.project-intro h3 { line-height:1.5; }
.project-details { border-radius:5px; }
.project-details div { background:#f6f8f3; }
.project-gallery { gap:18px; grid-template-columns:1fr 1fr 1fr; grid-template-rows:320px 280px; }
.project-gallery figure { border-radius:6px; background:#132a21; box-shadow:0 8px 24px #123b2114; }
.project-gallery figure:first-child img { object-fit:contain; }
.project-gallery figure:last-child img { object-fit:contain; }
.about { background:radial-gradient(ellipse at 5% 100%,#264632,transparent 65%),#10271e; color:white; }
.project-videos { padding:80px 0; background:#f8faf7; }
.video-layout { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:48px; }
.video-intro h2 { font-size:clamp(1.9rem,3.1vw,2.9rem); line-height:1.5; color:var(--forest); }
.video-gallery { display:flex; justify-content:center; min-width:0; }
.project-video { display:block; width:100%; max-width:360px; height:auto; aspect-ratio:512/910; background:#102b22; border-radius:12px; box-shadow:0 16px 48px #102b2224; object-fit:contain; }
@media (max-width:680px) {
  .project-videos { padding:52px 0; }
  .video-layout { grid-template-columns:1fr; gap:24px; }
}
.about h2 { color:white; }
.company-resources { padding:0 0 80px; background:#f8faf7; }
.resource-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.resource-card { padding:40px; border:1px solid #dbe4d8; border-top:4px solid #83b741; border-radius:8px; background:white; }
.resource-card h2 { font-size:clamp(1.9rem,2.8vw,2.6rem); line-height:1.5; margin:16px 0; color:var(--forest); }
.resource-card p { font-size:1rem; line-height:1.9; color:var(--muted); margin:0 0 28px; }
.profile-card { background:#102b22; border-color:#35573b; border-top-color:var(--lime); }
.profile-card h2 { color:white; }
.profile-card .eyebrow { color:var(--lime); }
.profile-card p { color:#d4e0d8; }
.profile-cover { display:block; width:min(100%,220px); margin:0 0 18px; }
.profile-cover img { display:block; width:100%; height:auto; border-radius:5px; }
.profile-card .profile-file-info { font-size:.875rem; margin:0 0 18px; }
.profile-actions { display:flex; flex-wrap:wrap; gap:12px; }
.profile-actions .btn-ghost { background:transparent; color:white; border-color:#ffffff60; }
.resource-status { display:inline-block; padding:8px 14px; border-radius:4px; background:#edf3e7; color:#41602e; font-size:.875rem; }
.profile-card .resource-status { background:#ffffff12; color:#d4e0d8; }
@media (max-width:1280px) {
  nav { position:relative; }
  .links { display:none; }
  .menu-toggle { display:block; flex-shrink:0; }
  .links.is-open { display:flex; position:absolute; inset:100% 0 auto; padding:22px; background:#102b22; border:1px solid #ffffff30; flex-direction:column; align-items:stretch; max-height:75vh; overflow-y:auto; box-shadow:0 16px 28px #0003; }
  .links a { padding:8px; }
}
@media (max-width:680px) {
  .company-resources { padding-bottom:52px; }
  .resource-grid { grid-template-columns:1fr; gap:18px; }
  .resource-card { padding:28px; }
}
.about .eyebrow { color:var(--lime); }
.about p { color:#cad5cc; line-height:2; }
.about .btn-dark { background:var(--lime); color:var(--forest); }
.stat { background:#ffffff04; border-color:#ffffff24; border-radius:4px; }
.stat strong { color:var(--lime); font-size:3.4rem; }
.stat span { color:#eff4ec; font-size:1rem; }
.steps { padding:80px 0; }
.step { border-radius:6px; border-top:3px solid #83b741; }
.step b { border-radius:4px; font-size:1rem; }
.step p { font-size:.9375rem; line-height:1.9; }
.contact { background:linear-gradient(to bottom,#f8faf7 0%,#dce3dc 20%,#91a397 43%,#40594b 66%,#162b20 84%,#07150f 100%); }
.contact-card { border-radius:8px; background:linear-gradient(110deg,#244b24,#0b281f); border:1px solid #35573b; }
.contact-card::after { display:none; }
.contact-card h2 { line-height:1.5; font-size:clamp(1.8rem,3.2vw,3rem); }
footer { font-size:.875rem; }
a[href^="tel:"] { direction:ltr; unicode-bidi:isolate; }
@media (max-width:1100px) {
  .hero-grid { min-height:650px; }
  .hero-copy { padding:50px 0 65px; }
  .service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:980px) {
  nav { position:relative; }
  .links.is-open { display:flex; position:absolute; inset:100% 0 auto; padding:22px; background:#102b22; border:1px solid #ffffff30; flex-direction:column; align-items:stretch; box-shadow:0 16px 28px #0003; }
  .links a { padding:8px; }
  .hero-grid { display:block; min-height:0; }
  .hero-copy { width:66%; }
  h1 { font-size:2.65rem; }
  .hero-visual { width:65%; }
  .year-card { width:90px; height:100px; left:20px; }
  .year-card b { font-size:2rem; }
  .year-card span { font-size:.75rem; }
  .project-tag { left:20px; bottom:24px; padding:12px; }
  .section-head { gap:30px; }
}
@media (max-width:680px) {
  .shell { width:calc(100% - 36px); }
  nav { height:76px; gap:12px; }
  .brand { font-size:1rem; gap:8px; }
  .brand-logo { width:48px; height:48px; flex-basis:48px; }
  .nav-actions { gap:7px; }
  .nav-actions .lang { min-width:46px; padding:0 10px; }
  .hero { padding:0; }
  .hero-copy { width:100%; padding:36px 0 30px; }
  h1 { font-size:clamp(1.95rem,7.8vw,2.8rem); line-height:1.55; margin:14px 0 18px; }
  .hero-copy p { font-size:1rem; line-height:1.95; }
  .hero-meta { margin-top:24px; padding-top:20px; gap:15px; }
  .hero-visual { position:relative; width:calc(100% + 36px); margin-inline:-18px; min-height:360px; }
  .hero-frame { inset:0; border-radius:0; }
  .hero-frame img { object-position:center 58%; }
  .hero-frame::after,[dir="ltr"] .hero-frame::after { background:linear-gradient(0deg,#0b211a9c,transparent 45%,#0b211a 100%); }
  .year-card { top:auto; bottom:24px; left:20px; width:90px; height:95px; }
  .project-tag { left:auto; right:18px; bottom:24px; }
  [dir="ltr"] .project-tag { right:auto; left:18px; }
  [dir="ltr"] .year-card { right:20px; left:auto; }
  .services,.project-section,.about,.steps { padding:52px 0; }
  .service-grid { grid-template-columns:1fr; gap:12px; }
  .service { min-height:0; display:grid; grid-template-columns:40px 1fr; gap:15px; padding:24px; }
  .service .num { border:0; padding:5px 0; }
  .service h3 { margin:0 0 9px; }
  .section-head h2,.about h2 { font-size:1.9rem; }
  .project-gallery { grid-template-columns:1fr 1fr; grid-template-rows:430px 230px 240px; gap:10px; }
  .about-grid { gap:32px; }
  .stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stat { padding:20px 15px; min-height:160px; }
  .stat strong { font-size:2.5rem; }
  .stat span { font-size:.875rem; }
  .contact { padding:0 0 40px; }
  .contact-card { padding:32px 24px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}

/* Aged paper material on painted surfaces; text and photography stay crisp. */
body,.topbar,header,.hero,.project-section,.project-details div,
.project-videos,.company-resources,.resource-card,.steps,.step,.step b,
.stat,.year-card,.project-tag,.resource-status,.profile-card .resource-status,
.links.is-open,footer,.btn,.btn-primary:hover,.about .btn-dark,
.hero-actions .btn-ghost,.profile-actions .btn-ghost,
.nav-actions .btn-ghost,.menu-toggle {
  background-image:var(--patina);
  background-size:680px 680px;
}
.topbar,header,.hero,.profile-card,.step b,.links.is-open,footer,.btn-dark {
  background-image:var(--paper-material);
  background-blend-mode:soft-light;
}
.about {
  background-image:var(--paper-material),radial-gradient(ellipse at 5% 100%,#264632,transparent 65%);
  background-size:680px 680px,cover;
  background-blend-mode:soft-light,normal;
}
.contact {
  background-image:var(--paper-material),linear-gradient(to bottom,#f8faf7 0%,#dce3dc 20%,#91a397 43%,#40594b 66%,#162b20 84%,#07150f 100%);
  background-size:680px 680px,cover;
  background-blend-mode:soft-light,normal;
}
.contact-card {
  background-image:var(--paper-material),linear-gradient(110deg,#244b24,#0b281f);
  background-size:680px 680px,cover;
  background-blend-mode:soft-light,normal;
}
.highlights-card { grid-column:1 / -1; }
.highlights-card > p { max-width:760px; }
.highlights-files { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.highlight-file { display:grid; grid-template-columns:minmax(130px,190px) 1fr; gap:20px; align-items:center; padding:16px; border:1px solid #dbe4d8; border-radius:8px; background:#f8faf7; }
.highlight-cover { display:block; overflow:hidden; border-radius:5px; border:1px solid #d1ddc9; background:#fff; }
.highlight-cover img { display:block; width:100%; height:auto; aspect-ratio:595/842; object-fit:cover; object-position:top; }
.highlight-file-body h3 { margin:0 0 12px; color:var(--forest); font-size:1.15rem; line-height:1.5; }
.highlight-file-body .resource-status { display:block; width:max-content; margin-bottom:18px; }
@media (max-width:680px) { .highlights-files { grid-template-columns:1fr; } .highlight-file { grid-template-columns:110px 1fr; gap:14px; padding:12px; } }