/* ============================================================
   TDS Contractors — Homepage Styles
   Used by: index.html
   Requires: shared.css
   ----------------------------------------------------------
   Contents:
   1. Hero — home variant (framed image + signature badge)
   2. Proof stat strip
   3. Services grid
   4. Process steps
   5. Story split (Jorge portrait + blockquote)
   6. Portfolio grid
   7. Why us (3-col)
   8. Reviews
   9. Service area panel
   10. FAQ tabs + callout
   11. Home responsive overrides
   ============================================================ */

/* 1. Hero — home variant ------------------------------------ */
.hero-grid{
  display:grid;grid-template-columns:1.618fr 1fr;gap:var(--space-2xl);align-items:stretch;
  padding:clamp(var(--space-xl), 6vw, var(--space-3xl)) 0;
  max-width:100vw;
}
.hero-grid > div {
  min-width: 0;
  max-width: 100vw;
}
.hero h1{margin-top:var(--space-sm)}
.hero .lead{font-size:var(--text-2xl);margin-top:var(--space-md)}
.hero-ctas{margin-top:var(--space-lg)}

.hero-trust{
  margin-top:var(--space-2xl);display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  border-top:1px solid rgba(245,239,230,.14);padding-top:var(--space-md);max-width:620px;
}
.hero-trust .ht-item{padding:0 var(--space-md);border-left:1px solid rgba(245,239,230,.14)}
.hero-trust .ht-item:first-child{padding-left:0;border-left:0}
.hero-trust .ht-k{
  font-size:var(--text-2xs);letter-spacing:0.18em;text-transform:uppercase;
  color:var(--copper-hot);font-weight:600;
}
.hero-trust .ht-v{margin-top:var(--space-xs);color:#fff;font-size:var(--text-base-sm);letter-spacing:0.02em;font-weight:500;white-space:nowrap}

.hero-frame{
  position:relative;height:100%;
  border:1px solid rgba(245,239,230,.18);padding:0;
}
.hero-frame .hero-img{
  width:100%;height:100%;
  background:
    repeating-linear-gradient(135deg,rgba(245,239,230,.04) 0 14px,transparent 14px 28px),
    linear-gradient(160deg,#1f3a5f 0%,#0B2545 60%,#061A33 100%);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--space-md);color:#D9CFC0;position:relative;
}
.hero-frame .hero-img .tag{
  position:absolute;top:var(--space-md);left:var(--space-md);
  font-family:var(--sans);font-size:var(--text-2xs);letter-spacing:0.2em;
  text-transform:uppercase;color:#8FA0B8;
}
.hero-frame .hero-img .tag::before{content:"◉ ";color:var(--copper);letter-spacing:0}
.hero-frame .hero-img .cap{
  font-family:var(--serif);font-size:var(--text-3xl);line-height:1.25;
  color:#fff;font-weight:500;
}
.hero-frame .hero-img .cap em{color:#F5EFE6;font-style:italic;font-weight:500}
.hero-frame .hero-img .sub{
  font-family:var(--sans);font-size:var(--text-sm);color:#8FA0B8;letter-spacing:0.04em;
  margin-top:var(--space-xs);padding-top:var(--space-xs);border-top:1px solid rgba(245,239,230,.1);
  display:flex;justify-content:space-between;
}

.hero-sig{
  position:absolute;right:calc(-1 * var(--space-sm));top:calc(-1 * var(--space-sm));
  background:var(--copper);color:#fff;padding:var(--space-sm) var(--space-sm);
  display:flex;align-items:center;gap:var(--space-xs);
  animation:tds-sig-reveal .72s cubic-bezier(.2,.8,.2,1) .25s both;
}
/* Gentle one-time reveal on first view — settles the badge into place.
   Global prefers-reduced-motion rule in shared.css disables this. */
@keyframes tds-sig-reveal{
  from{opacity:0;transform:translate(10px,-10px)}
  to{opacity:1;transform:translate(0,0)}
}
.hero-sig .hs-num{font-family:var(--serif);font-size:var(--text-5xl);line-height:1;font-weight:600}
.hero-sig small{
  display:block;font-family:var(--sans);font-size:var(--text-3xs);letter-spacing:0.14em;
  text-transform:uppercase;line-height:1.3;opacity:.92;
}

/* 2. Proof stat strip --------------------------------------- */
.proof{background:var(--sand);border-bottom:1px solid var(--sand-deep)}
.proof .wrap{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md);
  padding:var(--space-lg) var(--space-lg);align-items:start;
}
.proof .stat{text-align:left;position:relative;padding-left:var(--space-sm)}
.proof .stat::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;
  width:2px;background:var(--copper);
}
.proof .num{
  font-family:var(--serif);font-size:46px;line-height:1;
  color:var(--navy);font-weight:600;
}
.proof .num .star{color:var(--copper);font-size:28px;margin-left:var(--space-2xs)}
.proof .lbl{font-size:var(--text-sm);color:var(--charcoal);margin-top:var(--space-xs);line-height:1.4;letter-spacing:0.02em}
.proof + section{padding-top:clamp(var(--space-xl), 4.5vw, var(--space-2xl))}
/* 3. Services grid ------------------------------------------ */
.svc-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:0;
  border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.svc{
  grid-column:span 2;padding:var(--space-lg) var(--space-lg) var(--space-lg);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--white);position:relative;transition:background .2s;
  display:flex;flex-direction:column;min-height:300px;overflow:hidden;
}
.svc::before{
  content:"";position:absolute;left:0;top:0;bottom:0;
  width:3px;background:var(--copper);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .18s cubic-bezier(.2,.8,.2,1);
  z-index:2;
}
.svc:hover{background:var(--sand)}
.svc:hover::before{transform:scaleX(1)}
.svc.feature::before{background:var(--copper-hot);transform:scaleX(1)}
.svc .no{
  font-family:var(--sans);font-size:var(--text-2xs);letter-spacing:0.18em;
  color:var(--copper);font-weight:600;
  display:flex;align-items:center;justify-content:space-between;
}
.svc .no .dur{color:var(--gray);letter-spacing:0.08em;white-space:nowrap}
.svc h3{margin-top:var(--space-sm);font-size:var(--text-4xl);line-height:1.15}
.svc p{margin-top:var(--space-sm);color:var(--gray);font-size:var(--text-base);line-height:1.6}
.svc .more{
  margin-top:auto;padding-top:var(--space-md);font-size:var(--text-base-sm);font-weight:600;letter-spacing:0.02em;
  color:var(--navy);display:inline-flex;align-items:center;gap:var(--space-xs);
}
.svc .more:hover{color:var(--copper)}
.svc .more .arr{transition:transform .2s}
.svc:hover .more .arr{transform:translateX(4px);color:var(--copper)}
.svc.feature{
  grid-column:span 3;background:var(--navy);color:#E6EAF2;
  border-right:1px solid var(--navy);border-bottom:1px solid var(--navy);
}
.svc.feature h3{color:#fff;font-size:32px}
.svc.feature p{color:#B8C2D4}
.svc.feature .no{color:var(--copper-hot)}
.svc.feature .more{color:#fff}
.svc.wide{grid-column:span 3}

/* 4. Process steps ------------------------------------------ */
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.step{padding:0 var(--space-md);position:relative;display:flex;flex-direction:column}
.step .num{
  width:56px;height:56px;border-radius:50%;background:#fff;
  border:1.5px solid var(--navy);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:var(--text-3xl);color:var(--navy);font-weight:600;
  position:relative;z-index:1;
}
.step h3{font-family:var(--serif);color:var(--navy);font-size:var(--text-3xl);margin-top:var(--space-md);font-weight:600;line-height:1.22}
.step p{margin-top:var(--space-sm);color:var(--gray);font-size:var(--text-base);line-height:1.6}
.step .meta{
  margin-top:auto;padding-top:var(--space-sm);border-top:1px solid var(--line);
  font-size:var(--text-xs);letter-spacing:0.14em;text-transform:uppercase;
  color:var(--copper);font-weight:600;
}
/* Small gap above meta so copy doesn't butt against the dashed border. */
.step p + .meta,.step h3 + .meta{margin-top:auto;padding-top:var(--space-sm)}

/* 5. Story split -------------------------------------------- */
.split{display:grid;grid-template-columns:1.618fr 1fr;gap:var(--space-xl);align-items:center}
.portrait{
  aspect-ratio:4/5;
  background:
    repeating-linear-gradient(45deg,rgba(180,88,39,.06) 0 14px,transparent 14px 28px),
    linear-gradient(160deg,var(--sand-deep) 0%,var(--sand) 100%);
  border:1px solid var(--line);position:relative;
  display:flex;align-items:flex-start;padding:var(--space-lg);
}
.portrait .plabel{
  font-family:var(--sans);font-size:var(--text-2xs);letter-spacing:0.14em;text-transform:uppercase;
  color:var(--gray);max-width:260px;line-height:1.5;
}
.portrait::before{
  content:"";position:absolute;top:18px;right:18px;width:48px;height:48px;
  border-top:2px solid var(--copper);border-right:2px solid var(--copper);
}
.portrait .plaque{
  position:absolute;bottom:calc(-1 * var(--space-md));left:var(--space-lg);
  background:var(--navy);color:#fff;padding:var(--space-sm) var(--space-md);
  font-family:var(--serif);font-weight:600;font-size:var(--text-2xl);line-height:1.25;max-width:260px;
}
.portrait .plaque small{
  display:block;font-family:var(--sans);font-weight:500;font-size:var(--text-2xs);
  letter-spacing:0.16em;text-transform:uppercase;
  color:var(--copper-hot);margin-bottom:var(--space-2xs);line-height:1.4;
}
.story h2{text-wrap:pretty}
.story blockquote{
  margin:var(--space-lg) 0 0;padding:var(--space-md) 0;
  border-top:2px solid var(--copper);border-bottom:1px solid var(--line);
  font-family:var(--serif);font-size:var(--text-3xl);line-height:1.5;
  color:var(--navy);font-weight:500;
}
.story blockquote cite{
  display:block;margin-top:var(--space-sm);
  font-family:var(--sans);font-style:normal;font-size:var(--text-xs);letter-spacing:0.16em;
  text-transform:uppercase;color:var(--gray);font-weight:600;
}
.story .signature{font-family:var(--serif);font-style:italic;font-size:28px;color:var(--navy);margin-top:var(--space-md)}

/* 6. Portfolio grid ----------------------------------------- */
.port-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--space-md)}
.port-grid .proj{
  position:relative;overflow:hidden;border:1px solid var(--line);background:var(--sand);
  display:flex;flex-direction:column;
}
.port-grid .proj .img{
  aspect-ratio:4/3;
  background:
    repeating-linear-gradient(135deg,rgba(11,37,69,.05) 0 14px,transparent 14px 28px),
    linear-gradient(160deg,var(--sand-deep) 0%,#D4C9B5 100%);
  position:relative;
}
.port-grid .proj .img::after{
  content:attr(data-tag);
  position:absolute;top:var(--space-sm);left:var(--space-sm);background:rgba(11,37,69,.9);color:#fff;
  font-family:var(--sans);font-size:var(--text-2xs);letter-spacing:0.16em;text-transform:uppercase;
  padding:var(--space-2xs) var(--space-xs);font-weight:600;
}
.port-grid .proj .img img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.port-grid .proj .meta{padding:var(--space-md) var(--space-md) var(--space-md);background:#fff;border-top:1px solid var(--line);flex:1 1 auto}
.port-grid .proj h3{font-family:var(--serif);font-size:var(--text-2xl);color:var(--navy);font-weight:600;line-height:1.25;letter-spacing:-0.005em}
.port-grid .proj .row{
  display:flex;align-items:baseline;gap:var(--space-sm);
  margin-top:var(--space-sm);padding-top:var(--space-sm);
  border-top:1px dashed var(--line);font-size:var(--text-sm);color:var(--gray);
}
.port-grid .proj .row::before{
  content:"";flex:1;border-bottom:1px dotted var(--line);
  margin:0;order:1;position:relative;top:-3px;
}
.port-grid .proj .row > span:first-child{order:0}
.port-grid .proj .row > span:last-child{order:2;white-space:nowrap;flex-shrink:0}
.port-grid .proj .row b{color:var(--navy);font-weight:600}
.port-grid .proj.lg{grid-column:span 6}
.port-grid .proj.md{grid-column:span 6}
.port-grid .proj.thr{grid-column:span 4}
.port-grid .proj .meta h3{min-height:48px}

/* 7. Why us ------------------------------------------------- */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md);margin-top:var(--space-xl)}
.why{padding-top:var(--space-md);border-top:2px solid var(--copper);position:relative}
.why .why-kicker{font-family:var(--sans);font-size:var(--text-sm);font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--navy)}
.why h3{font-family:var(--serif);font-size:var(--text-4xl);margin-top:var(--space-sm);line-height:1.2;color:var(--navy);text-wrap:pretty}
.why p{margin-top:var(--space-sm);color:var(--gray);line-height:1.65}
/* Dark-section overrides: Why Us sits on the navy #why panel on the homepage.
   Note: copper-hot (#D26A33) on navy renders at 4.29:1 — under AA 4.5:1 for small
   body text. Use a lighter warm sand for the kicker to meet AA. */
section.dark .why .why-kicker{color:#FDEAD9}
section.dark .why h3{color:#fff}
section.dark .why p{color:#B8C2D4}


/* 9. Service area panel ------------------------------------- */
.area-grid{
  display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--space-2xl);row-gap:0;
  font-family:var(--sans);font-size:var(--text-md);color:var(--navy);margin-top:var(--space-xs);
}
.area-grid > a,
.area-grid > div{
  padding:var(--space-sm) 0;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-sm);
  color:var(--navy);text-decoration:none;transition:color .15s,border-color .15s;
}
.area-grid > a:hover{color:var(--copper);border-bottom-color:var(--copper)}
.area-grid .zip{color:var(--gray);font-size:var(--text-xs);letter-spacing:0.1em;font-variant-numeric:tabular-nums;white-space:nowrap}
.area-grid > a:hover .zip{color:var(--copper)}
.area-foot{margin-top:var(--space-lg);font-family:var(--sans);font-size:var(--text-base);color:var(--navy)}
.area-foot a{
  color:var(--copper);font-weight:600;text-decoration:none;
  border-bottom:1px solid var(--copper);padding-bottom:2px;
}

/* Optional embedded dark panel (rarely used on home) */
.area-panel{
  background:var(--navy-deep);color:#fff;padding:var(--space-lg) var(--space-md);
  border:1px solid rgba(245,239,230,.08);
}
.ap-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-md);
  padding-bottom:var(--space-md);border-bottom:1px solid rgba(245,239,230,.12);
}
.ap-kicker{font-family:var(--sans);font-size:var(--text-2xs);letter-spacing:0.18em;text-transform:uppercase;color:var(--copper-hot);font-weight:600}
.ap-title{font-family:var(--serif);font-size:24px;font-weight:600;margin-top:var(--space-xs);color:#fff}
.ap-total{display:flex;align-items:center;gap:var(--space-xs);color:#fff}
.ap-total span{font-family:var(--serif);font-size:44px;font-weight:600;line-height:1;color:var(--copper-hot)}
.ap-total small{font-family:var(--sans);font-size:var(--text-3xs);letter-spacing:0.16em;text-transform:uppercase;color:#8FA0B8;line-height:1.3}
.ap-bars{list-style:none;margin:var(--space-sm) 0 0;padding:0}
.ap-bars li{
  display:grid;grid-template-columns:150px 1fr 36px;gap:var(--space-sm);align-items:center;
  padding:var(--space-xs) 0;border-bottom:1px solid rgba(245,239,230,.06);
}
.ap-bars .ap-city{font-family:var(--sans);font-size:var(--text-base-sm);color:#E6EAF2;letter-spacing:0.02em}
.ap-bars .ap-bar{height:4px;background:rgba(245,239,230,.08);position:relative}
.ap-bars .ap-bar span{position:absolute;left:0;top:0;bottom:0;background:var(--copper)}
.ap-bars .ap-n{font-family:var(--serif);font-size:var(--text-xl);color:#fff;text-align:right;font-weight:600}
.ap-foot{margin-top:var(--space-md);color:#8FA0B8;font-size:var(--text-sm);line-height:1.55;letter-spacing:0.02em}
.area-list{columns:2;column-gap:var(--space-2xl);font-family:var(--sans);font-size:var(--text-base);color:var(--navy);margin-top:var(--space-lg)}
.area-list div{
  padding:var(--space-xs) 0;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;break-inside:avoid;
}
.area-list div .zip{color:var(--gray);font-size:var(--text-xs);letter-spacing:0.08em}

/* 10. FAQ tabs + callout ------------------------------------ */
.faq-tabs{display:flex;flex-wrap:wrap;gap:var(--space-xs);justify-content:center;margin-bottom:var(--space-xl)}
.faq-tab{
  background:transparent;border:1px solid var(--line);color:var(--navy);
  font-family:var(--sans);font-size:var(--text-sm);font-weight:500;letter-spacing:0.04em;
  padding:var(--space-sm) var(--space-sm);cursor:pointer;border-radius:2px;transition:all .15s;
  white-space:nowrap;line-height:1;min-height:var(--space-xl);
  display:inline-flex;align-items:center;gap:var(--space-xs);
}
.faq-tab:hover{border-color:var(--copper);color:var(--copper)}
.faq-tab.active{background:var(--navy);border-color:var(--navy);color:#fff}
.faq-tab-count{display:none}

/* 11. Home responsive --------------------------------------- */
@media (max-width:1100px){
  .hero-grid{grid-template-columns:1fr;gap:var(--space-xl)}
  .proof .wrap{grid-template-columns:repeat(2,1fr)}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .svc,.svc.feature,.svc.wide{grid-column:span 1}
  .process-grid{grid-template-columns:repeat(2,1fr);row-gap:var(--space-xl)}
  .process-grid::before{display:none}
  .split{grid-template-columns:1fr;gap:var(--space-lg);align-items:start}
  .area-grid{grid-template-columns:repeat(2,1fr);column-gap:var(--space-xl)}
  .port-grid{grid-template-columns:repeat(6,1fr)}
  .port-grid .proj.lg,
  .port-grid .proj.md,
  .port-grid .proj.thr{grid-column:span 6}
  .hero-trust{max-width:100%}
  .why-grid{grid-template-columns:1fr;gap:var(--space-lg)}
  .rev-grid{grid-template-columns:1fr;gap:var(--space-sm)}
}
@media (max-width:720px){
  .proof .wrap{grid-template-columns:repeat(2,1fr);padding:var(--space-md) var(--space-sm);gap:var(--space-sm)}
  .proof .stat::before{display:none}
  .proof .num{font-size:38px}
  .proof .lbl{font-size:var(--text-xs)}
  .hero-grid{padding:var(--space-xl) var(--space-md) var(--space-2xl);gap:var(--space-xl)}

  .hero-trust{margin-top:var(--space-lg);grid-template-columns:1fr;gap:var(--space-sm);padding-top:var(--space-md)}
  .hero-trust .ht-item{padding:var(--space-xs) 0;border-bottom:1px solid rgba(245,239,230,.1);border-left:none}
  .hero-trust .ht-item:last-child{border-bottom:0}
  .hero-frame{max-width:100%}
  .hero-sig{right:0;top:-14px;padding:var(--space-xs) var(--space-sm)}
  .hero-sig .hs-num{font-size:24px}
  .hero-sig small{font-size:9px}
  .hero-frame .hero-img{padding:var(--space-sm)}
  .hero-frame .hero-img .cap{font-size:var(--text-md)}
  .hero-frame .hero-img .sub{font-size:var(--text-2xs);flex-direction:column;gap:var(--space-2xs)}

  .svc-grid{border:none;display:flex;flex-direction:column;gap:var(--space-md)}
  .svc{padding:var(--space-lg) var(--space-md);min-height:auto;border:1px solid var(--line);border-radius:4px;box-shadow:0 4px 12px rgba(11,37,69,0.03)}
  .svc.feature{border-color:var(--navy-deep)}
  .svc h3{font-size:var(--text-3xl)}
  .svc.feature h3{font-size:var(--text-4xl)}

  .process-grid{grid-template-columns:1fr;row-gap:var(--space-xl)}
  .step{text-align:left;padding:0 var(--space-xs)}

  .split{gap:var(--space-lg)}
  .portrait{aspect-ratio:4/4}
  .portrait .plaque{right:auto;left:0;bottom:calc(-1 * var(--space-lg))}

  .why-grid{gap:var(--space-md)}

  .card{padding:var(--space-md);min-height:auto}
  .card p{font-size:var(--text-md)}


  .area-grid{font-size:var(--text-base-sm);grid-template-columns:1fr}
  .area-grid > div{padding:var(--space-sm) 0}
  .area-list{columns:1;margin-top:var(--space-md);font-size:var(--text-base)}

  .faq-tabs{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    justify-content:flex-start;
    padding:0 0 var(--space-xs);
    margin-bottom:var(--space-md);
    gap:var(--space-xs);
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    width:100%;
    max-width:100%;
  }
  .faq-tabs::-webkit-scrollbar{display:none}
  .faq-tab{
    flex:0 0 auto;
    padding:var(--space-xs) var(--space-sm);
    font-size:var(--text-xs);
    min-height:var(--space-xl);
  }
  .faq-tab-count{font-size:var(--text-3xs);padding:2px var(--space-2xs)}

  .port-grid .proj .meta{padding:var(--space-sm) var(--space-sm) var(--space-sm)}
  .port-grid .proj h3{font-size:var(--text-xl)}

  .ap-bars li{grid-template-columns:110px 1fr 32px;gap:var(--space-xs)}
  .ap-title{font-size:var(--text-2xl)}
}
@media (max-width:420px){
  .hero-grid{padding:var(--space-lg) var(--space-sm) var(--space-md)}
  .hero-frame .hero-img .cap{font-size:var(--text-base)}
  .hero-sig{top:calc(-1 * var(--space-xs));right:calc(-1 * var(--space-xs))}
  .proof .num{font-size:34px}
  .svc h3{font-size:var(--text-2xl)}
}

/* ============================================================
   Homepage Polished Components & Animations
   ============================================================ */

/* Hero background image support */
.hero-img {
  position: relative;
  overflow: hidden;
}
.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hero-frame:hover .hero-bg-img {
  transform: scale(1.03);
}
.hero-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 26, 51, 0.82) 0%, rgba(6, 26, 51, 0.2) 60%, rgba(6, 26, 51, 0) 100%);
  z-index: 1;
  pointer-events: none;
}
.hero-img .cap {
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* 2. Transformation Slider ------------------------------------ */
.transformation-section {
  background: var(--white);
}
.ba-slider-container {
  max-width: 1000px;
  margin:0 auto;
  padding:0 var(--space-sm);
}
.ba-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(11, 37, 69, 0.12);
  border: 1px solid var(--line);
}
.ba-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
  display: block;
}
.ba-before {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.ba-after {
  position: absolute;
  inset: 0;
  z-index: 2;
  clip-path: inset(0 0 0 50%); /* initial split */
}
.ba-label-tag {
  position: absolute;
  top: 24px;
  background: rgba(11, 37, 69, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  padding:var(--space-xs) var(--space-sm);
  border-radius: 2px;
  z-index: 3;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.tag-before {
  left: 24px;
  border-left: 2px solid var(--copper-hot);
}
.tag-after {
  right: 24px;
  border-right: 2px solid var(--copper-hot);
}
.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--white);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  z-index: 4;
  cursor: ew-resize;
  transform: translateX(-50%);
  pointer-events: none;
}
.ba-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  background: var(--navy);
  border: 2px solid var(--white);
  color: var(--white);
  border-radius: 50%;
  z-index: 5;
  cursor: ew-resize;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(6, 26, 51, 0.3);
  transition: background-color 0.2s, transform 0.2s;
  pointer-events: none;
}
.ba-slider:hover .ba-knob {
  background: var(--copper);
  transform: translate(-50%, -50%) scale(1.08);
}

/* Cost & Timeline Estimator Section */
.estimator-section {
  border-top: 1px solid var(--sand-deep);
  border-bottom: 1px solid var(--sand-deep);
}
.estimator-container {
  max-width: 1100px;
  margin:0 auto;
}
.estimator-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap:var(--space-lg);
  align-items: stretch;
}
.est-card {
  background: var(--white);
  border: 1px solid var(--sand-deep);
  padding:var(--space-xl);
  display: flex;
  flex-direction: column;
}
.est-controls h3 {
  font-size: clamp(22px, 2.2vw, 28px);
  color: var(--navy);
  margin-bottom:var(--space-md);
}
.est-group {
  margin-bottom:var(--space-lg);
}
.est-group:last-of-type {
  margin-bottom:0;
}
.est-group > label {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-deep);
  font-weight: 600;
  margin-bottom:var(--space-xs);
}
.est-select-wrapper {
  position: relative;
  width: 100%;
}
.est-select-wrapper select {
  width: 100%;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--sand-deep);
  border-bottom: 2px solid var(--copper);
  padding:var(--space-sm) var(--space-xl) var(--space-sm) var(--space-sm);
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gray-deep) 50%),
                    linear-gradient(135deg, var(--gray-deep) 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
  border-radius: 0;
}
.est-select-wrapper select:focus {
  outline: none;
  border-bottom-color: var(--copper-hot);
}
.tier-cards {
  display: flex;
  flex-direction: column;
  gap:var(--space-xs);
}
.tier-card {
  background: #fff;
  border: 1px solid var(--sand-deep);
  padding:var(--space-sm) var(--space-md);
  text-align: left;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  border-radius: 0;
}
.tier-card:hover {
  border-color: var(--copper);
  background: rgba(238, 234, 224, 0.2);
}
.tier-card.active {
  border-color: var(--copper);
  background: rgba(238, 234, 224, 0.45);
  box-shadow: inset 3.5px 0 0 var(--copper);
}
.tier-badge {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--copper-deep);
  font-weight: 600;
  margin-bottom:var(--space-2xs);
}
.tier-card h4 {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--navy);
  font-weight: 600;
  margin:0 0 var(--space-2xs);
}
.tier-card p {
  font-size: 13.5px;
  color: var(--gray-deep);
  line-height: 1.45;
  margin:0;
}

/* Estimator Display Output */
.est-display {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
  color: #fff;
}
.est-display h3, .est-display h4 {
  color: #fff;
}
.est-kicker {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper-hot);
  font-weight: 600;
  margin-bottom:var(--space-md);
}
.est-price-range {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom:var(--space-md);
  margin-bottom:var(--space-md);
}
.est-label {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sky-300);
}
.est-price {
  font-family: var(--serif);
  font-size: clamp(40px, 5vw, 56px);
  color: var(--white);
  font-weight: 600;
  margin-top:var(--space-xs);
  letter-spacing: -0.02em;
  line-height: 1.05;
  /* Copper underline anchors the price as the headline output of the estimator */
  display: inline-block;
  padding-bottom: var(--space-2xs);
  border-bottom: 2px solid var(--copper-hot);
}
.est-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:var(--space-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom:var(--space-md);
  margin-bottom:var(--space-md);
}
.est-metric {
  display: flex;
  flex-direction: column;
}
.em-title {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sky-300);
}
.em-val {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--white);
  margin-top:var(--space-2xs);
  white-space:nowrap;
}
.em-note {
  font-size: 12px;
  color: var(--sky-400);
  margin-top:var(--space-2xs);
}
.est-allowances h4 {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sky-300);
  margin-bottom:var(--space-sm);
}
.est-allowances ul {
  list-style: none;
  padding:0;
  margin:0;
  display: flex;
  flex-direction: column;
  gap:var(--space-xs);
}
.est-allowances li {
  font-size: 14px;
  color: var(--sky-100);
  position: relative;
  padding-left:var(--space-sm);
  line-height: 1.45;
}
.est-allowances li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--copper-hot);
  font-weight: bold;
}
.est-cta {
  margin-top:var(--space-lg);
  width: 100%;
  justify-content: space-between;
  padding:var(--space-sm) var(--space-md);
  background: var(--copper);
  border-radius: 2px;
  font-size: 15px;
}
.est-cta:hover {
  background: var(--copper-deep);
}

/* Micro-animations and transitions */
.port-grid .proj {
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.port-grid .proj:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(11, 37, 69, 0.08);
}
.port-grid .proj .img img {
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.port-grid .proj:hover .img img {
  transform: scale(1.04);
}

/* Scroll Fade-In System */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.72s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.72s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}
.port-grid .proj:nth-child(2) { transition-delay: 0.1s; }
.port-grid .proj:nth-child(3) { transition-delay: 0.15s; }
.port-grid .proj:nth-child(4) { transition-delay: 0.2s; }
.port-grid .proj:nth-child(5) { transition-delay: 0.25s; }

/* Responsive adjustments for new sections */
@media (max-width: 960px) {
  .estimator-grid {
    grid-template-columns: 1fr;
    gap:var(--space-md);
  }
  .est-card {
    padding:var(--space-lg) var(--space-md);
  }
}
@media (max-width: 480px) {
  .ba-slider {
    aspect-ratio: 4/3;
  }
  .ba-label-tag {
    top: 16px;
    padding:var(--space-2xs) var(--space-xs);
    font-size: 10px;
  }
  .tag-before { left: 16px; }
  .tag-after { right: 16px; }
  
  .proof .wrap {
    grid-template-columns: 1fr;
    gap:var(--space-md);
    padding:var(--space-md) var(--space-sm);
  }
  .est-card {
    padding:var(--space-md) var(--space-sm);
  }
  .est-price {
    font-size: clamp(32px, 8vw, 44px);
  }
  .svc {
    padding:var(--space-md) var(--space-sm);
  }
}