/* =========================================================
   BAJWA TILING — custom stylesheet (light theme)
   Palette grounded in real tiling materials:
   ink = fired charcoal grout (logo/brand), clay = burnt terracotta bisque,
   stone = raw porcelain, slate = tile trim/spacer green-grey
   ========================================================= */

:root{
  --ink:        #181516;   /* brand colour — logo mark, headings, footer text */
  --ink-soft:   #2b2725;
  --clay:       #B5602E;   /* primary accent — CTAs, links, tile motif        */
  --clay-dark:  #93491F;
  --clay-tint:  #F6E9E0;   /* soft clay wash for light-theme bands            */
  --slate:      #33463F;   /* secondary accent — badges, icons                */
  --stone:      #FAF8F4;   /* page background — warm off-white                */
  --stone-dark: #EFE9DD;   /* section alternation / borders                    */
  --grout:      #6E6862;   /* muted warm grey — body copy                      */
  --white:      #FFFFFF;

  --font-display: "Fraunces", "Georgia", serif;
  --font-body:    "Work Sans", -apple-system, Segoe UI, sans-serif;
  --font-mono:    "JetBrains Mono", "Courier New", monospace;

  --radius: 12px;      /* modern soft radius for cards/buttons/inputs */
  --radius-sm: 8px;

  --shadow-sm: 0 4px 14px -6px rgba(24,37,48,.14);
  --shadow-md: 0 14px 30px -12px rgba(24,37,48,.20);
  --shadow-lg: 0 26px 50px -18px rgba(24,37,48,.28);
}

/* ---------- base ---------- */
html{ scroll-behavior:smooth; }
body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--stone);
  font-size: 1.06rem;
  line-height: 1.7;
}
h1,h2,h3,h4,.display-font{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
h2.section-title{
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  margin-bottom: 1rem;
}
p{ color: var(--grout); }
a{ color: var(--clay); text-decoration:none; }
a:hover{ color: var(--clay-dark); }

.eyebrow{
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .74rem;
  color: var(--clay);
  font-weight: 600;
}

.text-clay{ color: var(--clay) !important; }
.text-slate{ color: var(--slate) !important; }
.bg-stone-dark{ background-color: var(--stone-dark) !important; }
.bg-clay-tint{ background-color: var(--clay-tint) !important; }

::selection{ background: var(--clay); color:#fff; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- buttons ---------- */
.btn{ border-radius: var(--radius-sm); font-weight:600; padding:.75rem 1.7rem; }
.btn-lg{ padding:.95rem 2.1rem; }
.btn-clay{
  background: var(--clay); border:1px solid var(--clay); color:#fff;
  box-shadow: 0 10px 22px -10px rgba(181,96,46,.55);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-clay:hover{ background: var(--clay-dark); border-color: var(--clay-dark); color:#fff; transform: translateY(-2px); box-shadow: 0 14px 26px -10px rgba(147,73,31,.55); }
.btn-outline-light-thin{
  background:transparent; border:1px solid rgba(255,255,255,.55); color:#fff;
}
.btn-outline-light-thin:hover{ background:#fff; color:var(--ink); }
.btn-outline-ink{
  background:transparent; border:1px solid var(--ink); color:var(--ink);
}
.btn-outline-ink:hover{ background:var(--ink); color:#fff; }

/* ---------- logo ---------- */
/* .brand-mark{
  width:44px; height:44px;
  background: var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display);
  font-weight:700; font-size:1.3rem; color:#fff;
  position:relative;
  flex-shrink:0;
  border-radius: 6px;
  box-shadow: var(--shadow-sm);
}
.brand-mark::after{
  /* a single grout tick, like a tile spacer, bottom-right corner 
  content:"";
  position:absolute; right:4px; bottom:4px;
  width:5px; height:5px; background: var(--clay);
} */
 
.logo{
  max-width: 75px;  
}

.brand-word{
  font-family: var(--font-display);
  font-weight:600; font-size:1.3rem; letter-spacing:.01em;
  color: var(--ink);
  line-height:1.1;
}

.brand-word span{ color: var(--clay); }
.navbar-brand{ display:flex; align-items:center; gap:.75rem; }

@media (max-width: 767.98px){
  .navbar-brand{ margin-right:0; gap:.20rem; }
}

/* ---------- navbar (light) ---------- */
.navbar{
  background: rgba(244,247,250,.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  /* padding-top:1.15rem; padding-bottom:1.15rem; */
  padding-top:0.15rem; padding-bottom:0.15rem;
  border-bottom: 1px solid var(--stone-dark);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease;
}
.navbar .nav-link{
  color: var(--ink-soft);
  font-weight:500;
  margin:0 .5rem;
  padding:.5rem .6rem !important;
}
.navbar .nav-link:hover{ color: var(--clay); }
.navbar .nav-link.active{ color: var(--clay-dark); border-bottom:2px solid var(--clay); }
.nav-phone{
  font-family: var(--font-mono);
  font-size:.92rem;
  color: var(--ink) !important;
  border:1px solid var(--grout);
  border-radius: var(--radius-sm);
  padding:.55rem 1.05rem !important;
  transition: all .15s ease;
}
.nav-phone:hover{ background:var(--clay); border-color:var(--clay); color:#fff !important; }

/* ---------- grout-line divider (signature element) ---------- */
.grout-divider{
  width:100%; height:16px;
  position:relative;
  opacity:.6;
}
.grout-divider::before{
  content:"";
  position:absolute; left:0; right:0; top:50%; height:1px;
  background: var(--stone-dark);
  transform:translateY(-50%);
}
.grout-divider span{
  position:absolute; top:50%; transform:translateY(-50%);
  width:4px; height:4px; background:var(--clay);
}

/* ---------- hero ---------- */
.hero{ position:relative; color:#fff; }
.hero .carousel-item{
  height: 90vh;
  min-height:600px;
  background-size:cover;
  background-position:center;
}
.hero .carousel-item::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(24,21,22,.32) 0%, rgba(24,21,22,.38) 42%, rgba(24,21,22,.88) 100%);
}
.hero-caption{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding-bottom:5.5rem; }
.hero-caption .eyebrow{ color:#EAA97D; }
.hero-title{
  font-size: clamp(2.4rem, 5vw, 4.1rem);
  color:#fff; margin-bottom:1.2rem; max-width:820px;
  line-height:1.08;
}
.hero-sub{ color: rgba(255,255,255,.86); max-width:560px; font-size:1.12rem; margin-bottom:2rem; }
.hero .carousel-indicators{ margin-bottom:1.5rem; }
.hero .carousel-indicators [data-bs-target]{ width:34px; height:3px; background:rgba(255,255,255,.4); border:0; border-radius:2px; }
.hero .carousel-indicators .active{ background: var(--clay); }
.hero .carousel-control-prev, .hero .carousel-control-next{ width:6%; opacity:.55; }

/* small page hero (inner pages) */
.page-hero{
  background-color: var(--ink);
  background-size:cover; background-position:center;
  position:relative; color:#fff;
  padding: 8.5rem 0 5rem;
}
.page-hero::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(24,21,22,.5), rgba(24,21,22,.82));
}
.page-hero .container{ position:relative; z-index:2; }
.page-hero h1{ color:#fff; font-size:clamp(2.3rem,4vw,3.2rem); margin-bottom:1rem; }
.page-hero p{ color:rgba(255,255,255,.82); max-width:560px; font-size:1.08rem; }
.breadcrumb-trail{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.breadcrumb-trail a{ color:rgba(255,255,255,.6); }
.breadcrumb-trail a:hover{ color:#fff; }

/* ---------- section rhythm (spacious) ---------- */
.section{ padding: 7.5rem 0; }
.section-sm{ padding: 4.5rem 0; }
@media (max-width: 767.98px){
  .section{ padding: 4.5rem 0; }
  .section-sm{ padding: 3rem 0; }
}

/* ---------- stat strip (light) ---------- */
.stat-strip{ background: var(--white); border-top:1px solid var(--stone-dark); border-bottom:1px solid var(--stone-dark); }
.stat-num{ font-family: var(--font-mono); font-size:2.6rem; font-weight:700; color:var(--clay); line-height:1; }
.stat-label{ font-size:.88rem; color:var(--grout); text-transform:uppercase; letter-spacing:.06em; margin-top:.6rem; }

/* ---------- service cards ---------- */
.svc-card{
  background:#fff; border:1px solid var(--stone-dark);
  border-radius: var(--radius);
  border-top:3px solid var(--clay);
  padding:2.6rem 2.2rem; height:100%;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.svc-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.svc-icon{
  width:56px; height:56px; background: var(--clay-tint);
  border-radius: var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  color: var(--clay); font-size:1.5rem; margin-bottom:1.3rem;
}
.svc-card h3{ font-size:1.28rem; margin-bottom:.7rem; }
.svc-card p{ font-size:.97rem; margin-bottom:0; }

.svc-photo-card{
  position:relative; min-height:360px; color:#fff;
  background-size:cover; background-position:center;
  display:flex; align-items:flex-end; padding:2.1rem;
  overflow:hidden; border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  transition: transform .2s ease, box-shadow .2s ease;
}
.svc-photo-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.svc-photo-card::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(24,21,22,0) 32%, rgba(24,21,22,.9) 100%);
}
.svc-photo-card .svc-photo-body{ position:relative; z-index:2; }
.svc-photo-card h3{ color:#fff; margin-bottom:.4rem; }
.svc-photo-card p{ color:rgba(255,255,255,.85); font-size:.95rem; margin-bottom:0; }

/* ---------- about ---------- */
.about-photo-wrap{ position:relative; }
.about-photo-wrap img{ width:100%; height:100%; object-fit:cover; border-radius: var(--radius); box-shadow: var(--shadow-lg); aspect-ratio: 4/5; }
.about-tag{
  position:absolute; bottom:-1.6rem; right:-1.4rem;
  background: var(--clay); color:#fff;
  border-radius: var(--radius-sm);
  padding:1.3rem 1.7rem; max-width:240px;
  font-family:var(--font-mono); font-size:.85rem; line-height:1.5;
  box-shadow: var(--shadow-md);
}
@media (max-width: 767.98px){
  .about-tag{ position:static; margin-top:1.25rem; max-width:none; }
}
.check-list{ list-style:none; padding:0; margin:0; }
.check-list li{ display:flex; gap:.8rem; margin-bottom:.9rem; color:var(--ink); font-weight:500; }
.check-list i{ color: var(--clay); margin-top:.2rem; }

/* ---------- testimonials ---------- */
.testimonial-card{
  background:#fff; padding:2.6rem; height:100%;
  border:1px solid var(--stone-dark); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.testimonial-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.testimonial-quote{ font-size:2.8rem; color: var(--clay); line-height:1; font-family:var(--font-display); }
.testimonial-card p.body-text{ color:var(--ink-soft); font-size:1rem; }
.avatar-initials{
  width:48px; height:48px; border-radius:50%;
  background: var(--slate); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:700; font-size:.95rem;
  flex-shrink:0;
}
.stars i{ color: var(--clay); font-size:.85rem; }

/* ---------- gallery (tile grid — signature) ---------- */
.tile-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;                       /* the "grout line" between photos */
  background: var(--stone-dark);
  box-shadow: var(--shadow-md);
}
.tile-grid figure{
  margin:0; position:relative; overflow:hidden; cursor:pointer;
  aspect-ratio: 1 / 1;
  background: var(--ink);
}
.tile-grid figure img{ width:100%; height:100%; object-fit:cover; transition: transform .45s ease; }
.tile-grid figure:hover img{ transform: scale(1.07); }
.tile-grid figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding: .9rem 1rem .8rem; color:#fff;
  background: linear-gradient(180deg, transparent, rgba(24,21,22,.92));
  font-size:.85rem; transform: translateY(6px); opacity:0; transition: all .25s ease;
}
.tile-grid figure:hover figcaption{ opacity:1; transform:translateY(0); }
.tile-grid figcaption .cat{ display:block; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:#EAA97D; margin-bottom:.15rem; }
@media (max-width: 767.98px){ .tile-grid{ grid-template-columns: repeat(2, 1fr); } }

.filter-tabs .btn{ background:transparent; border:1px solid var(--grout); color:var(--ink); border-radius: var(--radius-sm); font-size:.9rem; padding:.5rem 1.2rem; margin:.3rem; }
.filter-tabs .btn.active{ background: var(--ink); border-color:var(--ink); color:#fff; }

/* lightbox modal */
.lightbox-modal .modal-content{ background: var(--ink); border:0; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.lightbox-modal .btn-close{ filter: invert(1); }
.lightbox-modal figcaption{ color:rgba(255,255,255,.75); font-size:.85rem; padding-top:.9rem; font-family:var(--font-mono); }

/* ---------- process ---------- */
.process-step .step-label{ font-family: var(--font-mono); font-size:.78rem; letter-spacing:.1em; color: var(--clay); text-transform:uppercase; display:block; margin-bottom:.5rem; }
.process-step h3{ font-size:1.18rem; margin-bottom:.6rem; }
.process-step p{ font-size:.95rem; }

/* ---------- forms ---------- */
.form-control, .form-select{
  border-radius: var(--radius-sm);
  border:1px solid var(--stone-dark);
  padding:.8rem 1rem;
  background:#fff;
  box-shadow: var(--shadow-sm);
}
.form-control:focus, .form-select:focus{ border-color: var(--clay); box-shadow: 0 0 0 .2rem rgba(181,96,46,.15); }
label{ font-weight:600; font-size:.9rem; margin-bottom:.4rem; color: var(--ink); }
.form-note{ font-size:.84rem; color:var(--grout); }

.contact-info-card{ background: var(--white); border:1px solid var(--stone-dark); border-radius: var(--radius); padding:2.8rem; box-shadow: var(--shadow-md); }
.contact-info-card a{ color:var(--ink); }
.contact-info-card a:hover{ color: var(--clay); }
.contact-info-row{ display:flex; gap:1.1rem; align-items:flex-start; margin-bottom:1.8rem; }
.contact-info-row i{ color: var(--clay); font-size:1.2rem; margin-top:.15rem; }
.contact-info-row .label{ font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--grout); font-family:var(--font-mono); margin-bottom:.25rem;}

.map-frame{ filter: grayscale(.25) contrast(1.02); border:0; width:100%; height:100%; min-height:320px; border-radius: var(--radius); box-shadow: var(--shadow-md); }

/* ---------- FAQ / accordion ---------- */
.accordion-button{ font-weight:600; background:#fff; border-radius: var(--radius-sm) !important; }
.accordion-button:not(.collapsed){ background: var(--clay-tint); color: var(--clay-dark); box-shadow:none; }
.accordion-button:focus{ box-shadow:none; border-color:var(--stone-dark); }
.accordion-button::after{ margin-left:1rem; }
.accordion-body{ padding: 1.5rem 1.75rem; }
.accordion-item{ border:1px solid var(--stone-dark); border-radius: var(--radius) !important; margin-bottom:.85rem; overflow:hidden; box-shadow: var(--shadow-sm); }

/* ---------- CTA band (light) ---------- */
.cta-band{
  background: var(--clay-tint);
  border-top:1px solid var(--stone-dark); border-bottom:1px solid var(--stone-dark);
  padding:5.5rem 0;
  position:relative; overflow:hidden;
}
.cta-band h2{ color:var(--ink); }
.cta-band p{ color:var(--grout); }

/* ---------- footer (light) ---------- */
footer.site-footer{ background: var(--stone-dark); color:var(--grout); padding-top:5rem; }
footer.site-footer h5{ color:var(--ink); font-family:var(--font-body); font-size:.95rem; text-transform:uppercase; letter-spacing:.07em; margin-bottom:1.3rem; }
footer.site-footer a{ color:var(--grout); }
footer.site-footer a:hover{ color: var(--clay); }
footer.site-footer .brand-word{ color:var(--ink); }
.footer-bottom{ border-top:1px solid rgba(24,21,22,.1); margin-top:3rem; padding:1.6rem 0; font-size:.82rem; }
.social-icon{
  width:38px; height:38px; border:1px solid rgba(24,21,22,.18); border-radius: var(--radius-sm);
  display:flex; align-items:center; justify-content:center; color:var(--ink);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s ease, transform .15s ease;
}
.social-icon:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
.social-icon:hover{ background: var(--clay); border-color: var(--clay); color:#fff; }

/* ---------- scroll reveal ---------- */
.reveal{ opacity:0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------- misc ---------- */
.badge-clay{ background: var(--clay); color:#fff; font-weight:600; padding:.45rem .9rem; border-radius: var(--radius-sm); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; }
hr.thin{ border-top:1px solid var(--stone-dark); opacity:1; }

/* ---------- helper classes moved from inline styles ---------- */
/* grout-divider tick positions */
.tick-1{ left:15%; }
.tick-2{ left:38%; }
.tick-3{ left:62%; }
.tick-4{ left:85%; }
.tick-mid{ left:50%; }

/* sticky sub-nav offset (services quick-jump) */
.subnav-sticky{ top:84px; z-index:1015; }

/* constrained paragraph width under centred CTA headings */
.narrow-lead{ max-width:560px; }

/* service detail images on the services page */
.svc-detail-img{ aspect-ratio:4/3; object-fit:cover; border-radius: var(--radius); }

/* smaller section title, used for the contact form heading */
.section-title-sm{ font-size:1.9rem; }

/* divider inside a card, kept visible regardless of card background */
.hr-fade{ border-color: var(--stone-dark); }

/* hero slide backgrounds (index.html) */
.hero-slide-1{ background-image:url('https://images.unsplash.com/photo-1584622650111-993a426fbf0a?auto=format&fit=crop&w=1800&q=75'); }
.hero-slide-2{ background-image:url('https://images.unsplash.com/photo-1644056368311-c8054df845d0?auto=format&fit=crop&w=1800&q=75'); }
.hero-slide-3{ background-image:url('https://images.unsplash.com/photo-1719205281285-5c0bb9a2c803?auto=format&fit=crop&w=1800&q=75'); }

/* inner page hero banners */
.page-hero-about{ background-image:url('https://images.unsplash.com/photo-1580398562556-d33329a0f29b?auto=format&fit=crop&w=1800&q=70'); }
.page-hero-contact{ background-image:url('https://images.unsplash.com/photo-1611066415956-91ab6f1f57cc?auto=format&fit=crop&w=1800&q=70'); }
.page-hero-gallery{ background-image:url('https://images.unsplash.com/photo-1678921902437-dc7803a337b0?auto=format&fit=crop&w=1800&q=70'); }
.page-hero-services{ background-image:url('https://images.unsplash.com/photo-1610552836390-9516d4ab88c2?auto=format&fit=crop&w=1800&q=70'); }

/* homepage service photo-cards */
.svc-photo-wall{ background-image:url('https://images.unsplash.com/photo-1611066415956-91ab6f1f57cc?auto=format&fit=crop&w=900&q=70'); }
.svc-photo-floor{ background-image:url('https://images.unsplash.com/photo-1610552836390-9516d4ab88c2?auto=format&fit=crop&w=900&q=70'); }
.svc-photo-mosaic{ background-image:url('https://images.unsplash.com/photo-1719205281285-5c0bb9a2c803?auto=format&fit=crop&w=900&q=70'); }

/* generic spacious overrides for bootstrap gutters on key grids */
.g-4, .g-5{ --bs-gutter-x: 2.25rem; --bs-gutter-y: 2.25rem; }