/* ===========================================================================
   CORE — v2.0  (closer TB-Associates clone). Loaded LAST, so these rules win.
   ========================================================================= */

/* ---- 1) Header: taller at the top, shrinks on scroll; logo further left --- */
.site-header{transition:box-shadow .25s ease}
.site-header.scrolled{box-shadow:0 6px 20px rgba(20,33,61,.10)}
.header-inner{min-height:104px;transition:min-height .25s ease;padding-left:12px}
.site-header.scrolled .header-inner{min-height:74px}
.brand img{height:54px;width:auto;max-width:260px;transition:height .25s ease}
.site-header.scrolled .brand img{height:42px}

/* ---- 1b) Animated red underline on nav hover (grows left -> right) -------- */
.main-nav > ul > li > a{position:relative}
.main-nav > ul > li > a::after{
  content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;
  background:var(--red);transform:scaleX(0);transform-origin:left center;
  transition:transform .35s ease;border-radius:2px;
}
.main-nav > ul > li > a:hover::after,
.main-nav > ul > li.active > a::after{transform:scaleX(1)}

/* ---- 1c) Rectangular Login / Admin / Logout buttons (TB style) ----------- */
.nav-cta .btn{border-radius:3px;padding:13px 30px;font-weight:600;letter-spacing:.01em}
.site-header.scrolled .nav-cta .btn{padding:11px 26px}

/* ---- 1d) Cross-fading slideshow engine ----------------------------------- */
.slideshow{position:relative;overflow:hidden}
.slideshow .slide{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.2s ease;will-change:opacity}
.slideshow .slide.active{opacity:1}

/* Hero now uses a rotating background slideshow */
.hero .hero-slideshow{position:absolute;inset:0;z-index:1}
.hero::after{z-index:2}
.hero .hero-inner{z-index:3}
.hero .hero-scroll{z-index:3}

/* Commitment / intro rotating photo */
.commit-photo{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  min-height:460px;height:100%}
.commit-photo .slide{border-radius:var(--radius)}

/* ---- 2) Parallax band + Goals (Quality / Sustainability / Design Tech) ---- */
.parallax-band{position:relative;padding:130px 0;text-align:center;color:#fff;
  background-size:cover;background-position:center;background-attachment:fixed}
.parallax-band::after{content:"";position:absolute;inset:0;background:rgba(13,22,43,.64)}
.parallax-band .container{position:relative;z-index:2}
.parallax-band .quote{font-family:var(--ff-head);font-style:italic;font-weight:500;
  font-size:clamp(1.3rem,2.6vw,2rem);color:#fff;margin:0}
.goals-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:42px;max-width:1020px;margin:0 auto}
.goal{text-align:center;padding:6px}
.goal .ico{width:98px;height:98px;border-radius:50%;background:var(--red);color:#fff;display:grid;
  place-items:center;font-size:2.5rem;margin:0 auto 22px;box-shadow:0 12px 28px rgba(200,16,46,.30)}
.goal h3{font-size:1.45rem;margin-bottom:.5em}
.goal p{color:var(--text);font-size:.98rem}
@media (max-width:860px){.goals-grid{grid-template-columns:1fr;gap:34px}.parallax-band{background-attachment:scroll}}

/* ---- 3) Our Clients grid ------------------------------------------------- */
.clients-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.client{background:#fff;border:1px solid var(--line);border-radius:var(--radius);min-height:140px;
  display:grid;place-items:center;padding:24px;text-align:center;transition:.22s}
.client:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.client img{max-height:78px;max-width:100%;width:auto;object-fit:contain;filter:grayscale(1);opacity:.78;transition:.25s}
.client:hover img{filter:none;opacity:1}
.client .cname{font-family:var(--ff-head);font-weight:600;color:var(--navy);font-size:1.02rem;line-height:1.3}
@media (max-width:860px){.clients-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.clients-grid{grid-template-columns:1fr}}

/* ---- 4) Service page: intro + its projects ------------------------------- */
.service-intro{max-width:860px;margin:0 auto 10px;text-align:center}
.service-intro .divider{margin-left:auto;margin-right:auto}

/* ---- responsive header ---- */
@media (max-width:760px){
  .header-inner{min-height:72px}
  .site-header.scrolled .header-inner{min-height:66px}
  .brand img,.site-header.scrolled .brand img{height:38px}
  .main-nav > ul > li > a::after{display:none}
}