/* LIGHT THEME — tan/white backgrounds, dark text, warm accents */

/*  on fsop css is main, main-header*/

.fsop-contracting, .fsop-projects{
    --bg:#faf8f5;
    --bg-2:#fff6ea;
    --card:#ffffff;
    --text:#1f2328;
    --muted:#333333;
    --brand:#d9772a;
    --brand2:#8b4b1e;
}


.fsop-projects .container{max-width:1200px;margin-inline:auto;padding-inline:clamp(16px,2.2vw,28px)}

.section{padding:clamp(36px,6vw,80px) 0;border-top:1px solid rgba(217,119,42,.25);background:var(--bg)}
.section.section--alt{background:none;}
.section.intro {

border: none; 
/*background:local;*/
color: #333333; 
padding:unset;

width: clamp(16rem, 90vw, 70rem);
  margin-left: auto;
  margin-right: auto;
  padding: 1.5rem;
  
}

/* Section heads */
.section__head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:24px}
.section__head p{margin:0;color:var(--muted)}


/* Hero */
.hero2{background:none;color:var(--text); max-width: 100%; margin-bottom: 2rem;}
.hero2__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(22px,4vw,48px);align-items:center}

.hero2 h1 {
  color: var(--dark);
}

.hero2__photo{min-height:340px;border-radius:16px;background:#eee center/cover no-repeat;border:1px solid rgba(0,0,0,.1)}

.grid{display:grid;gap:clamp(16px,2vw,24px)}
.grid--3{grid-template-columns:repeat(3,1fr)}

.card{background:var(--card);border:1px solid rgba(0,0,0,.1);border-radius:16px;box-shadow:0 3px 10px rgba(0,0,0,.06);overflow:hidden}
.card__cover{max-width: 90%;min-height:140px;background:#eee center/cover no-repeat;border-radius:16px; margin-top: 10px; margin-left: auto; margin-right: auto; }

.tile{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 3px 10px rgba(0,0,0,.08);border:1px solid rgba(0,0,0,.1);background:#eee center/cover no-repeat}

.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid rgba(0,0,0,.15);background:#fff;color:var(--text);box-shadow:0 3px 6px rgba(0,0,0,.08)}



/* Filter bar (optional, safe to include even if unused) */
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1rem}
.filters .filter{
  border:1px solid rgba(0,0,0,.12);
  padding:.5rem .75rem;border-radius:999px;background:#fff;
  cursor:pointer;font-size:.9rem;line-height:1; color:#222;
}
.filters .filter.is-active{
  background:#fff7ef;border-color:rgba(217,119,42,.45);color:#6b3f1d;
}
.filters .filter:focus{outline:2px solid rgba(217,119,42,.5);outline-offset:2px}

/* Project card container */
.project-card{
  display:flex;flex-direction:column;height:100%;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;background:#fff;
  overflow:hidden;
  transition:box-shadow .2s ease, transform .12s ease;
}
.project-card:hover{box-shadow:0 6px 24px rgba(0,0,0,.08);transform:translateY(-2px)}
.project-card:focus-within{box-shadow:0 0 0 3px rgba(217,119,42,.3)}

/* Clickable area */
.project-card .project-card__link{display:block;color:inherit;text-decoration:none;height:100%}

/* Thumb image block */
.project-thumb{position:relative;aspect-ratio:16/10;overflow:hidden}
.project-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.project-thumb__label{
  position:absolute;left:10px;bottom:10px;
  background:#000a;color:#fff;padding:4px 10px;border-radius:999px;font-size:12px
}

/* Card body */
.card__body{padding:16px}
.card__body h3{margin:0 0 6px;font-size:20px;color:var(--brand2)}
.project-title{
  font-size:1.1rem;line-height:1.2;margin:0 0 .35rem;color:#1f1f1f;font-weight:650
}

/* Quick facts list under title */
.project-facts{list-style:none;margin:0 0 .5rem;padding:0;color:#444;font-size:.95rem}
.project-facts li{margin:.2rem 0}
.project-facts strong{color:#262626;font-weight:600}

/* Generic lists used inside cards (safe sitewide) */
.list{padding-left:1.1rem;margin:.25rem 0}
.list li{margin:.25rem 0}

/* Tags under facts (optional) */
.project-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:.25rem}
.tag{
  background:#fff7ef;border:1px solid rgba(217,119,42,.35);
  color:#6b3f1d;border-radius:999px;padding:4px 10px;font-size:12px;line-height:1
}


.badges{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0;padding:0;list-style:none}
.badges li{font-size:12px;color:#222;background:linear-gradient(135deg,#ffe9c6,var(--brand));border-radius:999px;padding:6px 10px;border:1px solid rgba(0,0,0,.1)}

/* Responsive tweaks */
@media (max-width: 1024px){
  .project-title{font-size:1.05rem}
}
@media (max-width: 640px){
  .project-thumb{aspect-ratio:4/3}
  .card__body{padding:14px}
}

p.lede{color:var(--muted)}

/* Tiny, self-contained styles & script for the before/after slider; move to services.css/app.js if preferred. */

.ba-slider{position:relative;max-width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid rgba(0,0,0,.1);box-shadow:0 3px 10px rgba(0,0,0,.06)}
.ba-slider__img{width:100%;height:100%;object-fit:cover;display:block}
.ba-slider__overlay{position:absolute;inset:0;overflow:hidden;border-right:2px solid #fff}
.ba-slider__control{position:absolute;left:0;right:0;bottom:10px;margin-inline:auto;width:min(480px,80%)}

/* Tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}



figure.tile img{
min-height: 140px;
max-width: 90%;
border-radius:14px;
margin: 10px auto;
z-index: 9999;
filter: brightness(99%);


}

.tile figcaption{position:absolute;left:12px;bottom:15px;z-index:3;font-weight:700;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.5); border:none;}

/* .tile:after{z-index:1;content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.05))} */


.pills{

    display: block;
    overflow:block;
    background-color: rgba(255, 255, 255, 0.25);
    padding: 1rem;
    margin: 2rem 1rem;
    border-radius: 20px;
    box-shadow: 0px 0px 10px rgba(5, 5, 5, 0.432);
    
}

.pills img{
    max-width: 275px;
    padding: 0 2rem 1rem 0;
    float:left;
}

 /* both portrait and landscape views for archived articles */
 @media screen and (max-width: 800px) {
    .pills img{
        max-width: 50%;

    }
}

.contact-phone{
  display:inline-block;
}










.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}

.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;border-color:transparent}
.meta{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.meta span{background:#fff3e8;border:1px solid rgba(217,119,42,.3);border-radius:12px;padding:10px 12px;color:var(--muted)}





/* Grids & cards */

.grid--2{grid-template-columns:repeat(2,1fr)}


.card__body p{margin:0 0 8px;color:var(--muted)}
.list{margin:12px 0 0;padding-left:18px;color:#2b2b2b}




/* CTA */
#contact .cta{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;background:#fffaf4;border:1px solid rgba(0,0,0,.1);border-radius:16px;padding:24px;box-shadow:0 3px 10px rgba(0,0,0,.06)}
.muted{color:var(--muted)}
.cta__shot{min-height:200px;border-radius:12px;background:#eee center/cover no-repeat;border:1px solid rgba(0,0,0,.1)}


/* Responsive */
@media (max-width:980px){
.hero2__grid{grid-template-columns:1fr}
.meta{grid-template-columns:1fr 1fr}
.grid--3{grid-template-columns:1fr 1fr}
.tiles{grid-template-columns:repeat(2,1fr)}
#contact .cta{grid-template-columns:1fr}
}
@media (max-width:560px){
.hero2__photo{
    min-height:auto;
}
.meta{grid-template-columns:1fr}
.grid--2, .grid--3{grid-template-columns:1fr}
.tiles{grid-template-columns:1fr}
}