/* ============================================================
   Tanner Construction — refinement layer (July 2026)
   Adds a subtle brass accent, softer non-blocky cards, image
   motion and a portfolio grid. Additive only — no layout rewrite.
   ============================================================ */
:root{
  --tc-accent:#b6935c;
  --tc-accent-2:#c9a86e;
  --tc-accent-dark:#9a7a48;
  --tc-ink:#2c2c2c;
  --tc-shadow:0 22px 45px -22px rgba(18,18,18,.45);
  --tc-shadow-sm:0 12px 26px -16px rgba(18,18,18,.4);
  --tc-ease:cubic-bezier(.2,.7,.2,1);
  /* the theme font "Oswald" failed to load (broken @import); use the site's loaded sans consistently */
  --title-font:"Plus Jakarta Sans",sans-serif;
}
html{scroll-behavior:smooth}
::selection{background:var(--tc-accent);color:#fff}

/* soft custom scrollbar */
@media (pointer:fine){
  ::-webkit-scrollbar{width:11px}
  ::-webkit-scrollbar-track{background:#f2f0ec}
  ::-webkit-scrollbar-thumb{background:#c7c1b6;border-radius:20px;border:3px solid #f2f0ec}
  ::-webkit-scrollbar-thumb:hover{background:var(--tc-accent)}
}

/* ---------------- Brand lockup in the header ---------------- */
/* the theme's .logo-new carries a white "chip" background; keep that look on
   the logo mark only, not stretched behind the wordmark */
.logo.logo-new.brand-lockup,.brand-lockup{
  display:inline-flex !important;align-items:center;gap:14px;text-decoration:none;
  background:transparent !important;padding:0 !important;box-shadow:none !important;border-radius:0 !important;
}
.brand-lockup img{
  width:auto !important;height:88px !important;max-width:104px !important;flex:0 0 auto;
  background:transparent !important;border-radius:0 !important;padding:0 !important;box-shadow:none !important;
  filter:brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
.brand-text{display:flex;flex-direction:column;line-height:1;white-space:nowrap}
.brand-name{
  font-family:var(--title-font,"Poppins",sans-serif);
  font-size:21px;font-weight:700;letter-spacing:.01em;color:#fff;text-transform:uppercase;
}
.brand-tag{
  font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--tc-accent-2);margin-top:6px;font-weight:500;
}
/* tablet: slightly smaller lockup */
@media (max-width:991px){
  .brand-lockup img{height:64px !important;max-width:76px !important}
  .brand-name{font-size:18px}
}
/* phone: compact lockup that can never run under the menu button */
@media (max-width:575px){
  .brand-lockup{gap:9px;max-width:calc(100vw - 130px)}
  .brand-lockup img{height:48px !important;max-width:58px !important;filter:brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0,0,0,.3))}
  .brand-name{font-size:14px;letter-spacing:.02em}
  .brand-tag{display:none}
}

/* ---------------- Navigation: refined hover underline --------------- */
.navigation>li>a{overflow:visible}
.navigation>li:not(.dropdown)>a::after,
.navigation>li.dropdown>a::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:1.5px;
  background:var(--tc-accent-2);transform:scaleX(0);transform-origin:left;
  transition:transform .38s var(--tc-ease);
}
.navigation>li>a:hover::after,.navigation>li.active>a::after{transform:scaleX(1)}
.header-btn a{transition:all .35s var(--tc-ease) !important}
.header-btn a:hover{background:var(--tc-accent) !important;border-color:var(--tc-accent) !important;color:#fff !important}

/* ---------------- Hero headings: a touch more elegance -------------- */
.home-parallax h1,.slider-wrapper h1{
  letter-spacing:.015em;text-shadow:0 2px 30px rgba(0,0,0,.35);
}
.home-parallax .home-slide h1{font-weight:600}
/* thin accent rule under inner-page hero titles */
.home-parallax .home-slide h1::after{
  content:"";display:block;width:74px;height:2px;background:var(--tc-accent-2);
  margin:22px auto 0;border-radius:2px;
}

/* ---------------- Section kicker (sub-title) with hairline --------- */
.sec-title .sub-title,span.sub-title{position:relative}
.sec-title.text-center .sub-title::before,
.sec-title.text-center .sub-title::after{
  content:"";position:absolute;top:50%;width:30px;height:1px;background:var(--tc-accent);opacity:.7;
}
.sec-title.text-center .sub-title::before{right:calc(100% + 14px)}
.sec-title.text-center .sub-title::after{left:calc(100% + 14px)}

/* ---------------- De-block: soften cards & images ----------------- */
/* gallery / portfolio / news image frames */
.img-holder{border-radius:16px}
.img-holder img{transition:transform .9s var(--tc-ease),filter .9s var(--tc-ease);will-change:transform}
.single-service-item:hover .img-holder img{transform:scale(1.07)}

/* homepage service cards */
.services-block-seven .inner-box{
  border-radius:18px;overflow:hidden;transition:transform .5s var(--tc-ease),box-shadow .5s var(--tc-ease);
}
.services-block-seven .inner-box:hover{transform:translateY(-8px);box-shadow:var(--tc-shadow)}
.services-block-seven .image-box,.services-block-seven .image{border-radius:0}
.services-block-seven .image img{transition:transform .9s var(--tc-ease)}
.services-block-seven .inner-box:hover .image img{transform:scale(1.08)}

/* inline service / area image panels (the parallax picture blocks) */
.element.parallax.m-parallax-bg{
  border-radius:18px;box-shadow:var(--tc-shadow);overflow:hidden;
}
figure.image img,figure.image-2 img,.image-box img{border-radius:14px}

/* charcoal content boxes — remove the hard inset outline, round + lift */
.inner-box2{
  border-radius:16px;outline:none !important;
  border:1px solid rgba(182,147,92,.28);
  box-shadow:0 18px 38px -26px rgba(0,0,0,.6);
  transition:transform .5s var(--tc-ease),box-shadow .5s var(--tc-ease),border-color .5s var(--tc-ease);
  background:linear-gradient(158deg,#3c3c3c 0%,#323232 100%);
}
.inner-box2:hover{transform:translateY(-6px);border-color:rgba(201,168,110,.55);box-shadow:0 30px 55px -28px rgba(0,0,0,.7)}

/* forms / booking box */
.booking-box .addresscontact,.sliderform,.contact-container{border-radius:16px}
.form-control{border-radius:10px !important}
.contact-container{transition:transform .5s var(--tc-ease),box-shadow .5s var(--tc-ease)}
.contact-container:hover{transform:translateY(-6px);box-shadow:var(--tc-shadow-sm)}

/* area boxes (areas-covered page) */
.area-box{transition:all .45s var(--tc-ease) !important}
.area-box:hover{transform:translateY(-6px);box-shadow:var(--tc-shadow-sm)}
.area-box:hover i{color:var(--tc-accent) !important}

/* ---------------- Buttons: quieter, more premium ------------------ */
.theme-btn.btn-style-one,.btn-style-one{border-radius:6px;letter-spacing:.06em}
.theme-btn .btn-title{letter-spacing:.06em}
.btn-1{transition:all .4s var(--tc-ease);letter-spacing:.05em}
.btn-1:hover{background:var(--tc-accent) !important;border-color:var(--tc-accent) !important}

/* accent for the small "read more" arrows & links already coloured */
.color-1,a.color-1{color:var(--tc-accent-2) !important}

/* ---------------- FAQ accordion: soften ---------------------------- */
.accordion-item{border-radius:12px !important;overflow:hidden;margin-bottom:12px;border:1px solid rgba(255,255,255,.08)}
.accordion-button:not(.collapsed){color:var(--tc-accent-2)}
.accordion-button:focus{box-shadow:none}

/* ================================================================
   OUR WORK — portfolio grid
   ================================================================ */
.portfolio-intro-line{width:80px;height:2px;background:var(--tc-accent);border-radius:2px;margin:18px auto 0}
.portfolio-grid{
  display:flex;flex-wrap:wrap;justify-content:center;gap:30px;margin-top:8px;
}
.portfolio-grid .portfolio-card{flex:0 1 calc(33.333% - 20px);width:calc(33.333% - 20px);max-width:calc(33.333% - 20px)}
@media (max-width:991px){
  .portfolio-grid{gap:22px}
  .portfolio-grid .portfolio-card{flex-basis:calc(50% - 11px);width:calc(50% - 11px);max-width:calc(50% - 11px)}
}
@media (max-width:575px){.portfolio-grid .portfolio-card{flex-basis:100%;width:100%;max-width:100%}}

.portfolio-card{
  position:relative;display:block;border-radius:18px;overflow:hidden;text-decoration:none;
  box-shadow:var(--tc-shadow-sm);background:#222;
  transition:transform .55s var(--tc-ease),box-shadow .55s var(--tc-ease);
  aspect-ratio:4/3;
}
.portfolio-card:hover{transform:translateY(-10px);box-shadow:var(--tc-shadow)}
.portfolio-card .pc-media{position:absolute;inset:0}
.portfolio-card .pc-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--tc-ease)}
.portfolio-card:hover .pc-media img{transform:scale(1.09)}
.portfolio-card .pc-veil{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(15,15,15,.86) 0%,rgba(15,15,15,.35) 42%,rgba(15,15,15,0) 72%);
  transition:background .55s var(--tc-ease);
}
.portfolio-card:hover .pc-veil{background:linear-gradient(to top,rgba(15,15,15,.9) 0%,rgba(15,15,15,.45) 55%,rgba(15,15,15,.12) 100%)}
.portfolio-card .pc-body{position:absolute;left:0;right:0;bottom:0;padding:26px 24px;color:#fff;z-index:2}
.portfolio-card .pc-loc{
  display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--tc-accent-2);margin-bottom:9px;
}
.portfolio-card .pc-loc i{font-size:12px}
.portfolio-card .pc-title{
  font-size:21px;font-weight:600;color:#fff;margin:0;line-height:1.2;
}
.portfolio-card .pc-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;font-weight:600;
  letter-spacing:.04em;color:#fff;
  max-height:0;opacity:0;transform:translateY(6px);overflow:hidden;
  transition:all .5s var(--tc-ease);
}
.portfolio-card .pc-link i{transition:transform .4s var(--tc-ease)}
.portfolio-card:hover .pc-link{max-height:40px;opacity:1;transform:translateY(0)}
.portfolio-card:hover .pc-link i{transform:translateX(5px)}
.portfolio-card .pc-corner{
  position:absolute;top:16px;right:16px;width:42px;height:42px;border-radius:50%;z-index:2;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:rgba(255,255,255,.14);backdrop-filter:blur(3px);border:1px solid rgba(255,255,255,.25);
  opacity:0;transform:scale(.6);transition:all .5s var(--tc-ease);
}
.portfolio-card:hover .pc-corner{opacity:1;transform:scale(1)}

/* small credibility strip */
.tc-badges{display:flex;flex-wrap:wrap;gap:14px 40px;justify-content:center;margin:6px 0 4px}
.tc-badges .tc-badge{display:inline-flex;align-items:center;gap:11px;color:#fff;font-size:15px;font-weight:500}
.tc-badges .tc-badge i{color:var(--tc-accent-2);font-size:22px}

/* gentle reveal helper for elements we tag */
[data-tc-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--tc-ease),transform .9s var(--tc-ease)}
[data-tc-reveal].tc-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important}
  .img-holder img,.portfolio-card .pc-media img,.services-block-seven .image img{transition:none}
  [data-tc-reveal]{opacity:1;transform:none;transition:none}
}

/* ============================================================
   REFINEMENT LAYER v2 — banners, case-study carousel,
   floating buttons, footer polish & finishing touches
   ============================================================ */

/* ---------------- Banner text, laid up nicely ---------------- */
.home-parallax .home-slide h1{
  font-weight:600;line-height:1.12;letter-spacing:.012em;
  font-size:clamp(2rem,4.4vw,3.8rem);
}
.home-parallax .home-slide .col-lg-12{padding-block:14px}
/* homepage hero slider text */
.slider-wrapper .slide-text{left:50%!important;right:auto;top:58%!important;width:min(92%,900px)!important;max-width:none;transform:translate(-50%,-50%)!important;padding:10px 20px!important;text-align:center!important;margin:0!important}
.slider-wrapper .slide-text > p:first-of-type{
  letter-spacing:.3em;text-transform:uppercase;font-size:13px;font-weight:500;
  color:var(--tc-accent-2);margin-bottom:14px;
}
.slider-wrapper .slide-text h1,.slider-wrapper .slide-text h2{
  font-weight:600;letter-spacing:.012em;line-height:1.12;margin-bottom:18px;
}
.slider-wrapper .slide-text .sliderbtn-wrap{margin-top:26px}
.slider-wrapper .slide-text .btn-1{padding:14px 36px;border-radius:6px;text-transform:uppercase;font-weight:600;letter-spacing:.06em}
.sec-title h2,.sec-title .title{letter-spacing:.005em}

/* ---------------- Case study carousel ---------------- */
.case-study-carousel{position:relative;padding:0 4px}
.case-study-carousel .item{padding:8px}
.case-study-carousel .single-service-item{margin:0}
.case-study-carousel .img-holder{aspect-ratio:4/3;border-radius:16px;box-shadow:var(--tc-shadow-sm);position:relative}
.case-study-carousel .img-holder img{width:100%;height:100%;object-fit:cover}
.case-study-carousel .overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(18,18,18,0);transition:background .5s var(--tc-ease)}
.case-study-carousel .single-service-item:hover .overlay{background:rgba(18,18,18,.42)}
.case-study-carousel .overlay .box,.case-study-carousel .overlay .content{width:auto;height:auto}
.case-study-carousel .overlay .content a{
  width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.55);color:#fff;font-size:21px;
  opacity:0;transform:scale(.65);transition:all .5s var(--tc-ease);backdrop-filter:blur(2px)}
.case-study-carousel .single-service-item:hover .overlay .content a{opacity:1;transform:scale(1)}
.case-study-carousel .owl-nav{margin:0}
.case-study-carousel .owl-nav button.owl-prev,
.case-study-carousel .owl-nav button.owl-next{
  position:absolute;top:50%;transform:translateY(-50%);
  width:52px;height:52px;border-radius:50%!important;background:#fff!important;color:var(--tc-ink)!important;
  box-shadow:var(--tc-shadow-sm);display:flex;align-items:center;justify-content:center;font-size:19px;
  transition:all .35s var(--tc-ease);z-index:5}
.case-study-carousel .owl-nav button.owl-prev{left:-8px}
.case-study-carousel .owl-nav button.owl-next{right:-8px}
.case-study-carousel .owl-nav button:hover{background:var(--tc-accent)!important;color:#fff!important}
.case-study-carousel .owl-dots{text-align:center;margin-top:26px}
.case-study-carousel .owl-dots .owl-dot span{width:9px!important;height:9px!important;background:#cfc8bd!important;transition:all .3s var(--tc-ease);margin:5px!important}
.case-study-carousel .owl-dots .owl-dot.active span{background:var(--tc-accent)!important;width:26px!important;border-radius:6px!important}

/* ---------------- Floating action buttons ---------------- */
.tc-fab{position:fixed;right:22px;bottom:24px;z-index:1050;display:flex;flex-direction:column;gap:14px;align-items:center}
.tc-fab-btn{position:relative;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff!important;font-size:24px;border:none;cursor:pointer;text-decoration:none;
  box-shadow:0 10px 26px -6px rgba(0,0,0,.5);
  transition:transform .35s var(--tc-ease),box-shadow .35s var(--tc-ease),background .35s var(--tc-ease)}
.tc-fab-btn:hover{transform:translateY(-4px) scale(1.06)}
.tc-fab-wa{background:var(--tc-accent)}
.tc-fab-wa:hover{background:var(--tc-accent-dark)}
.tc-fab-call{background:var(--tc-ink);border:1.5px solid rgba(255,255,255,.4)}
.tc-fab-call:hover{background:var(--tc-accent)}
.tc-fab-top{background:var(--tc-ink);opacity:0;visibility:hidden;transform:translateY(14px)}
.tc-fab-top.show{opacity:1;visibility:visible;transform:none}
.tc-fab-top:hover{background:var(--tc-accent)}
.tc-fab-wa::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--tc-accent);z-index:-1;animation:tcPulse 2.6s ease-out infinite}
@keyframes tcPulse{0%{transform:scale(1);opacity:.55}70%{transform:scale(1.75);opacity:0}100%{opacity:0}}
@media (max-width:575px){.tc-fab{right:16px;bottom:16px;gap:12px}.tc-fab-btn{width:50px;height:50px;font-size:21px}}

/* ---------------- Footer polish ---------------- */
.main-footer .user-links a,.main-footer .user-links2 a{transition:color .3s var(--tc-ease),padding-left .3s var(--tc-ease)}
.main-footer .user-links a:hover{color:var(--tc-accent-2)!important;padding-left:5px}
.main-footer .social-icon-two a{transition:transform .35s var(--tc-ease)!important}
.main-footer .social-icon-two a:hover{transform:translateY(-4px)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.09)}

/* ---------------- Finishing touches ---------------- */
.testimonials .item p{font-style:italic;line-height:1.7}
.read-more:hover{color:var(--tc-accent-2)!important}
section{scroll-margin-top:90px}

@media (prefers-reduced-motion:reduce){
  .tc-fab-wa::after{animation:none}
  .case-study-carousel .img-holder img{transition:none}
}


/* ---------------- iOS / touch fixes ---------------- */
/* iOS Safari renders background-attachment:fixed zoomed and janky - use scroll on touch */
@media (hover:none), (pointer:coarse){
  [style*="background-attachment:fixed"],
  [style*="background-attachment: fixed"],
  .call-to-action-six .bg,
  .testimonials .bg-img,
  .form-section{background-attachment:scroll !important}
}
/* ---------------- Visible keyboard focus ---------------- */
.accordion-button:focus-visible,
.navigation a:focus-visible,
.theme-btn:focus-visible,
.tc-fab-btn:focus-visible,
.mobile-menu:focus-visible,
.portfolio-card:focus-visible{outline:2px solid var(--tc-accent-2) !important;outline-offset:3px}


/* ---------------- Homepage hero: slow zoom-out (Ken Burns) + no controls ---------------- */
.slider-wrapper .carousel-item{position:relative;overflow:hidden}
/* the desktop JS paints the slide as an inline background on .carousel-item; a
   pseudo-element inherits it so we can scale the image without moving the text */
.slider-wrapper .carousel-item::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:inherit;background-size:cover;background-position:center center;background-repeat:no-repeat;
  transform:scale(1.15);
}
.slider-wrapper .carousel-item .bs-slider-overlay{z-index:1}
.slider-wrapper .carousel-item .slide-text{z-index:2}
.slider-wrapper .carousel-item.active::before,
.slider-wrapper .carousel-item.active .slide-image{animation:tcZoomOut 7s ease-out forwards}
@keyframes tcZoomOut{from{transform:scale(1.15)}to{transform:scale(1)}}
/* remove the hero arrows and dots */
.slider-wrapper .carousel-indicators,
.slider-wrapper .carousel-control-prev,
.slider-wrapper .carousel-control-next{display:none !important}
@media (prefers-reduced-motion:reduce){
  .slider-wrapper .carousel-item::before{transform:none;animation:none}
  .slider-wrapper .carousel-item.active .slide-image{animation:none}
}


/* keyboard-accessible desktop Services dropdown */
@media (min-width:992px){
  .navigation > li.dropdown:focus-within > .dropdown-menu{opacity:1 !important;visibility:visible !important;top:100% !important;pointer-events:auto}
}


/* ---------------- Testimonials: readable headings on the dark panel ---------------- */
.testimonials .head-box h2{color:var(--tc-accent-2) !important}
.testimonials .head-box .line{background:var(--tc-accent) !important}
.testimonials .cont h4{color:#fff !important}
.testimonials .quote img{filter:brightness(0) invert(1);opacity:.85}

/* ---------------- Footer social icons: on-brand gold, refined ---------------- */
.main-footer .social-icon-two li{list-style:none}
.main-footer .social-icon-two a{
  width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:transparent !important;border:1.5px solid var(--tc-accent-2);color:var(--tc-accent-2) !important;
  font-size:16px;transition:all .35s var(--tc-ease) !important;
}
.main-footer .social-icon-two a:hover{
  background:var(--tc-accent) !important;border-color:var(--tc-accent) !important;color:#fff !important;transform:translateY(-4px);
}

/* ---------------- About badge: keep it inside its image column below wide-desktop ----------------
   The theme pins the "Tanner Construction Ltd" experience badge with left:-73px so it hangs past
   the photos. That only clears the text on very wide screens; on tablet / narrow-desktop the image
   column shrinks and the badge slides over the About paragraph. Anchor it within its own column and
   cap its width so it can never overlap the copy (or run off-screen on phones). */
@media (max-width:1699px){
  .about-section-ten .image-column .inner-column .experience-box .inner-box{
    left:12px !important;
    right:auto !important;
    max-width:calc(100% - 12px) !important;
  }
}
@media (max-width:575px){
  .about-section-ten .image-column .inner-column .experience-box .inner-box{
    left:0 !important;
    bottom:-18px !important;
    padding:16px 20px !important;
    max-width:100% !important;
  }
}