@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700;800;900&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --charcoal:#1B1F22;
  --charcoal-2:#242A2D;
  --stone:#E7E2D8;
  --stone-dim:#D8D2C4;
  --copper:#B8703E;
  --copper-light:#D89A66;
  --pine:#2F5D53;
  --pine-light:#437767;
  --pewter:#9AA3A6;
  --ink:#22262A;
  --white:#FBFAF7;

  --display:'Big Shoulders Display', sans-serif;
  --body:'Inter', sans-serif;
  --mono:'IBM Plex Mono', monospace;

  --maxw:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--stone);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:0.01em;
  margin:0 0 .4em 0;
  line-height:0.95;
  color:var(--charcoal);
}
p{line-height:1.6;margin:0 0 1em 0;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.eyebrow{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.72rem;
  color:var(--copper);
  display:flex;
  align-items:center;
  gap:.6em;
  margin-bottom:.9em;
}
.eyebrow::before{
  content:"";
  width:22px;height:1px;
  background:var(--copper);
  display:inline-block;
}

/* ---------- topo contour texture (signature motif) ---------- */
.topo{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.16;
  background-image:
    repeating-radial-gradient(circle at 18% 30%, transparent 0 26px, rgba(27,31,34,.55) 27px 28px, transparent 29px 60px),
    repeating-radial-gradient(circle at 82% 74%, transparent 0 34px, rgba(27,31,34,.4) 35px 36px, transparent 37px 70px);
}
.topo.light{
  background-image:
    repeating-radial-gradient(circle at 18% 30%, transparent 0 26px, rgba(251,250,247,.5) 27px 28px, transparent 29px 60px),
    repeating-radial-gradient(circle at 82% 74%, transparent 0 34px, rgba(251,250,247,.35) 35px 36px, transparent 37px 70px);
}

/* ---------- resin pour swirl (signature motif) ---------- */
.pour{
  background:
    radial-gradient(circle at 22% 28%, rgba(216,154,102,.9), transparent 40%),
    radial-gradient(circle at 74% 20%, rgba(154,163,166,.65), transparent 45%),
    radial-gradient(circle at 60% 72%, rgba(47,93,83,.75), transparent 48%),
    radial-gradient(circle at 12% 80%, rgba(184,112,62,.55), transparent 42%),
    linear-gradient(135deg, #171B1D, #262B2E 55%, #1B1F22);
  background-size:220% 220%;
  animation:pourshift 22s ease-in-out infinite;
}
@keyframes pourshift{
  0%{background-position:0% 30%;}
  50%{background-position:100% 70%;}
  100%{background-position:0% 30%;}
}
@media (prefers-reduced-motion:reduce){
  .pour{animation:none;}
}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:var(--charcoal);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px;
  max-width:var(--maxw); margin:0 auto;
}
.brand{
  display:flex; align-items:center; gap:10px;
  color:var(--white);
}
.brand svg{flex-shrink:0;}
.brand .word{
  font-family:var(--display);
  font-weight:800;
  text-transform:uppercase;
  font-size:1.28rem;
  letter-spacing:.01em;
  line-height:.95;
}
.brand .word span{color:var(--copper-light);}
.navlinks{
  display:flex; align-items:center; gap:30px;
  font-family:var(--mono);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.navlinks a{
  color:var(--pewter);
  padding:6px 0;
  border-bottom:2px solid transparent;
  transition:color .2s, border-color .2s;
}
.navlinks a:hover, .navlinks a.active{
  color:var(--white);
  border-color:var(--copper);
}
.nav-cta{
  background:var(--copper);
  color:var(--white) !important;
  padding:10px 18px !important;
  border-radius:2px;
  border-bottom:none !important;
}
.nav-cta:hover{background:var(--copper-light); color:var(--charcoal) !important;}
.burger{display:none;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.8rem;
  padding:14px 26px;
  border-radius:2px;
  border:1px solid var(--charcoal);
  cursor:pointer;
  transition:transform .15s ease, background .2s, color .2s, border-color .2s;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--copper); border-color:var(--copper); color:var(--white);}
.btn-primary:hover{background:var(--copper-light); border-color:var(--copper-light);}
.btn-ghost{background:transparent; border-color:rgba(251,250,247,.4); color:var(--white);}
.btn-ghost:hover{border-color:var(--white);}
.btn-dark{background:transparent;border-color:var(--charcoal);color:var(--charcoal);}
.btn-dark:hover{background:var(--charcoal); color:var(--white);}

/* ---------- hero ---------- */
.hero{
  position:relative;
  color:var(--white);
  overflow:hidden;
  padding:110px 0 90px;
}
.hero .topo{opacity:.14;}
.hero-inner{position:relative; z-index:2; max-width:720px;}
.hero h1{
  color:var(--white);
  font-size:clamp(2.6rem, 6vw, 4.6rem);
  font-weight:800;
}
.hero p.lead{
  font-size:1.1rem;
  color:var(--stone);
  max-width:520px;
}
.hero .actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:1.6em;}
.hero-strip{
  position:relative; z-index:2;
  display:flex; gap:40px; flex-wrap:wrap;
  margin-top:60px;
  padding-top:26px;
  border-top:1px solid rgba(255,255,255,.18);
  font-family:var(--mono); font-size:.8rem; color:var(--pewter);
  text-transform:uppercase; letter-spacing:.06em;
}
.hero-strip strong{
  display:block; color:var(--white); font-family:var(--display);
  font-size:1.5rem; text-transform:none; letter-spacing:0;
}

/* ---------- section basics ---------- */
section{padding:84px 0;}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; margin-bottom:46px; flex-wrap:wrap;
}
.section-head h2{font-size:clamp(1.9rem,3.4vw,2.7rem);}
.section-head p{max-width:420px; color:#55595c;}

/* ---------- services grid ---------- */
.services-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:2px;
  background:var(--charcoal);
  border:1px solid var(--charcoal);
}
.service-card{
  background:var(--stone);
  padding:38px 34px;
  position:relative;
  min-height:280px;
  display:flex; flex-direction:column; justify-content:flex-end;
  transition:background .25s;
}
.service-card .num{
  position:absolute; top:30px; right:34px;
  font-family:var(--mono); font-size:.78rem; color:var(--pewter);
}
.service-card h3{font-size:1.7rem; margin-bottom:.3em;}
.service-card p{font-size:.92rem; color:#4a4e51; max-width:320px;}
.service-card .tag{
  font-family:var(--mono); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--copper); margin-bottom:1em; display:inline-block;
}
.service-card:hover{background:var(--white);}
.service-card a.card-link{
  position:absolute; inset:0; z-index:3;
}
.service-card .go{
  margin-top:1.2em; font-family:var(--mono); font-size:.78rem;
  text-transform:uppercase; letter-spacing:.08em; color:var(--charcoal);
  display:flex; align-items:center; gap:.5em;
}
.service-card .go svg{transition:transform .2s;}
.service-card:hover .go svg{transform:translateX(4px);}

/* swatch backgrounds per category, used in cards + gallery */
.swatch{position:relative; overflow:hidden;}
.swatch::after{
  content:attr(data-label);
  position:absolute; bottom:10px; left:12px;
  font-family:var(--mono); font-size:.65rem; text-transform:uppercase;
  letter-spacing:.08em; color:rgba(255,255,255,.85);
  background:rgba(0,0,0,.35); padding:4px 8px; border-radius:2px;
}
.swatch-pickleball{
  background:
    linear-gradient(90deg, transparent 48%, rgba(255,255,255,.85) 48%, rgba(255,255,255,.85) 50%, transparent 50%),
    linear-gradient(#2F5D53,#264c44);
}
.swatch-metallic{
  background:
    radial-gradient(circle at 25% 30%, rgba(216,154,102,.95), transparent 42%),
    radial-gradient(circle at 75% 60%, rgba(154,163,166,.8), transparent 46%),
    radial-gradient(circle at 50% 85%, rgba(184,112,62,.6), transparent 40%),
    linear-gradient(135deg,#20242a,#2c3238);
}
.swatch-sportcourt{
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 2px, transparent 2px 46px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 2px, transparent 2px 46px),
    linear-gradient(135deg,#B8703E,#8f5730);
}
.swatch-kitchen{
  background:
    radial-gradient(circle at 30% 40%, rgba(251,250,247,.5), transparent 55%),
    linear-gradient(135deg,#c9b79a,#a08d6d);
}

/* ---------- process ---------- */
.process{background:var(--charcoal); color:var(--white); position:relative; overflow:hidden;}
.process .section-head h2, .process .section-head p{color:var(--white);}
.process .section-head p{color:var(--pewter);}
.process-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.14); position:relative; z-index:2;}
.process-step{background:var(--charcoal); padding:30px 26px 34px;}
.process-step .step-no{font-family:var(--mono); color:var(--copper); font-size:.78rem; margin-bottom:1.2em; display:block;}
.process-step h4{color:var(--white); font-size:1.25rem;}
.process-step p{color:var(--pewter); font-size:.9rem;}

/* ---------- about strip ---------- */
.about{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.about .art{
  aspect-ratio:4/3; border-radius:2px; position:relative; overflow:hidden;
}
.about h2{font-size:clamp(1.9rem,3.2vw,2.6rem);}
.stat-row{display:flex; gap:36px; margin-top:1.8em; flex-wrap:wrap;}
.stat-row div strong{display:block; font-family:var(--display); font-size:2rem; color:var(--copper);}
.stat-row div span{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:#666;}

/* ---------- gallery preview / cta ---------- */
.cta-band{
  position:relative; overflow:hidden;
  color:var(--white); text-align:center; padding:100px 0;
}
.cta-band .wrap{position:relative; z-index:2;}
.cta-band h2{color:var(--white); font-size:clamp(2rem,4vw,3.2rem); max-width:640px; margin:0 auto .3em;}
.cta-band p{color:var(--stone); max-width:480px; margin:0 auto 1.6em;}
.cta-band .actions{display:flex; justify-content:center; gap:14px; flex-wrap:wrap;}

/* ---------- footer ---------- */
footer{background:var(--charcoal); color:var(--pewter); padding:60px 0 26px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.1);}
.footer-grid h5{
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.1em;
  font-size:.75rem; color:var(--white); margin:0 0 1.1em 0;
}
.footer-grid .brand{margin-bottom:14px;}
.footer-grid p{font-size:.88rem; color:var(--pewter); max-width:280px;}
.footer-grid ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px;}
.footer-grid a{font-size:.9rem; color:var(--pewter); transition:color .2s;}
.footer-grid a:hover{color:var(--white);}
.social-row{display:flex; gap:12px; margin-top:16px;}
.social-row a{
  width:36px; height:36px; border:1px solid rgba(255,255,255,.25);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  transition:border-color .2s, background .2s;
}
.social-row a:hover{border-color:var(--copper); background:rgba(184,112,62,.15);}
.footer-bottom{
  display:flex; justify-content:space-between; padding-top:22px;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.04em;
  color:#666; flex-wrap:wrap; gap:10px;
}

/* ---------- gallery page ---------- */
.page-header{position:relative; overflow:hidden; color:var(--white); padding:70px 0 50px; background:var(--charcoal);}
.page-header .wrap{position:relative; z-index:2;}
.page-header h1{color:var(--white); font-size:clamp(2.2rem,5vw,3.4rem);}
.filters{
  display:flex; gap:10px; flex-wrap:wrap; margin:34px 0 44px;
}
.filter-btn{
  font-family:var(--mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em;
  padding:9px 16px; border:1px solid var(--charcoal); background:transparent; color:var(--charcoal);
  border-radius:20px; cursor:pointer; transition:all .2s;
}
.filter-btn.active, .filter-btn:hover{background:var(--charcoal); color:var(--white);}
.gallery-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.gallery-item{
  aspect-ratio:4/3; position:relative; border-radius:2px; overflow:hidden;
  cursor:pointer;
}
.gallery-item .info{
  position:absolute; inset:auto 0 0 0; padding:16px;
  background:linear-gradient(0deg, rgba(0,0,0,.65), transparent);
  color:var(--white);
}
.gallery-item .info .cat{
  font-family:var(--mono); font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; color:var(--copper-light);
}
.gallery-item .info .title{font-family:var(--display); font-size:1.15rem; text-transform:uppercase;}
.category-block{margin-bottom:70px;}
.category-block .head{max-width:680px; margin-bottom:30px;}
.category-block .head .eyebrow{margin-bottom:.5em;}

/* ---------- contact page ---------- */
.contact-wrap{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--charcoal);}
.contact-info{background:var(--charcoal); color:var(--white); padding:56px 48px;}
.contact-info h2{color:var(--white);}
.contact-info .row{display:flex; gap:16px; margin:26px 0; align-items:flex-start;}
.contact-info .row svg{flex-shrink:0; margin-top:3px;}
.contact-info .row div .lbl{font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--pewter); margin-bottom:2px;}
.contact-info .row div .val{font-size:1rem;}
.contact-form{background:var(--white); padding:56px 48px;}
.field{margin-bottom:22px;}
.field label{
  display:block; font-family:var(--mono); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.08em; color:#666; margin-bottom:8px;
}
.field input, .field select, .field textarea{
  width:100%; border:1px solid #c9c3b6; background:var(--stone);
  padding:13px 14px; font-family:var(--body); font-size:.95rem; color:var(--ink);
  border-radius:2px; transition:border-color .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--copper);
}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.form-note{font-size:.8rem; color:#777; margin-top:-6px; margin-bottom:22px;}
#formStatus{
  margin-top:16px; font-family:var(--mono); font-size:.82rem; display:none;
  padding:12px 14px; border-radius:2px; background:#eef4f1; color:var(--pine); border:1px solid var(--pine);
}
.map-block{height:340px; position:relative; overflow:hidden; background:var(--stone-dim);}
.map-block .topo{opacity:.35;}
.map-block .pin{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-100%);
  display:flex; flex-direction:column; align-items:center; z-index:2;
}
.map-block .pin .label{
  background:var(--charcoal); color:var(--white); font-family:var(--mono); font-size:.72rem;
  padding:6px 10px; border-radius:2px; margin-bottom:6px; white-space:nowrap;
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .services-grid{grid-template-columns:1fr;}
  .process-grid{grid-template-columns:1fr 1fr;}
  .about{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr; row-gap:34px;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .contact-wrap{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .navlinks{
    position:fixed; top:64px; left:0; right:0; bottom:0;
    background:var(--charcoal); flex-direction:column; align-items:flex-start;
    padding:30px 24px; gap:22px; transform:translateX(100%);
    transition:transform .25s ease; font-size:1rem;
  }
  .navlinks.open{transform:translateX(0);}
  .burger{
    display:block; background:none; border:none; color:var(--white);
    font-size:1.6rem; cursor:pointer; z-index:60;
  }
  .process-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
  .hero{padding:80px 0 60px;}
}