/* =========================================================
   STONES — LAYOUT PRIMITIVES
   Depends on /styles/base.css tokens (fonts, colors, --gold)
   ========================================================= */

/* Global container helper */
.container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* -------------------------------
   Section variants (spacing + text)
   ------------------------------- */
.light-section{
  padding: 150px 0 120px;
  background: #fff;
  color: var(--text-900);
}
.light-section h1,
.light-section .core-h1{ color:#292929; }   /* Manrope via base.css */
.light-section p,
.light-section .core-p{ color:#565656; }    /* Poppins via base.css */

.dark-section{
  background: linear-gradient(135deg, #15222a 0%, #0B191B 100%);
  color:#fff;
  padding:150px 0 120px;
  position:relative;
  z-index:0;
}
.dark-section::before,
.dark-section::after{
  z-index:0 !important;
  pointer-events:none;
}
.dark-section h1,
.dark-section .core-h1{ color:#fff; }
.dark-section p,
.dark-section .core-p{ color:#cfcfcf; }

/* Big number tint per variant */
.light-section{ --big-num-color:#ededed; }
.dark-section { --big-num-color:#23343A; }

/* -------------------------------
   Split layout (About / Process etc.)
   ------------------------------- */
.section-container{
  display:flex; align-items:center; justify-content:center;
  max-width:1200px; margin:0 auto; gap:64px; flex-wrap:wrap;
  padding:0 20px; position:relative;
}
.section-left,
.section-right{
  flex:1 1 400px; min-width:320px; display:flex; position:relative;
}
.section-left{ justify-content:flex-start; }
.section-right{
  flex:1 1 480px; min-width:340px; flex-direction:column; justify-content:center;
}

/* Shared images */
.section-img,
.dark-section-img{
  width:100%; max-width:420px; border-radius:18px;
  box-shadow:0 8px 32px rgba(44,44,44,.10);
  object-fit:cover;
}

/* -------------------------------
   Dark section column wrappers
   ------------------------------- */
.dark-section-container{
  display:flex; align-items:center; justify-content:center;
  max-width:1200px; margin:0 auto; gap:64px; flex-wrap:wrap; padding:0 20px;
}
.dark-section-left{
  flex:1 1 400px; min-width:320px; display:flex; justify-content:flex-start; position:relative;
}
.dark-section-right{
  flex:1 1 480px; min-width:340px; position:relative;
}
.dark-section-content{ position:relative; z-index:1; }
.dark-section-subtitle{
  letter-spacing:.2em; color:var(--gold);
  font:700 1rem/1 'Manrope', system-ui, sans-serif;
  margin:0 0 18px 60px;
}
.dark-section-title{
  font:800 clamp(2rem,5.6vw,3rem)/1.1 'Manrope', system-ui, sans-serif;
  color:#fff; margin:0 0 24px;
}
.dark-section-desc{
  font:500 1.05rem/1.7 'Poppins', system-ui, sans-serif;
  color:#cfcfcf; max-width:520px;
}
.dark-section .img-label{ color:#afafaf; }

/* Vertical label (optional) */
.left-info{
  position:absolute; left:5px; top:50%; transform:translateY(-50%);
  writing-mode:vertical-rl;
  font:600 14px/1 'Manrope', system-ui, sans-serif;
  color:#fff; letter-spacing:2px; z-index:3; text-align:center;
}
.left-info a i{ color:#fff; transition:color .3s; }
.left-info a:hover i{ color:var(--gold); }

/* Generic image caption */
.img-label{
  font:600 1.05rem/1.3 'Manrope', system-ui, sans-serif;
  color:#676767; text-align:center; margin:0 0 15px;
}

/* -------------------------------
   Centered sections (Services / Gallery / etc.)
   ------------------------------- */
.centered-section{ position:relative; color:#fff; }
.centered-section h1{
  font:800 clamp(2.2rem,6.5vw,3.8rem)/1.08 'Manrope', system-ui, sans-serif;
  color:#fff; margin:0 0 50px; text-align:center;
}
.centered-section.light-section h1{ color:#292929; }

/* gold label row above centered headings (pairs with base.css gold rules) */
.centered-section .gold-row{
  display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:18px;
}
.centered-section .gold-line,
.centered-section .gold-line-right-side{
  height:2px; width:40px; background:var(--gold);
}
.centered-section .top-gold{
  color:var(--gold); font-weight:700; font-size:1.05rem; letter-spacing:.1em;
}

/* Inner grid */
.centered-section .centered-section-grid{
  width:min(1200px, 100% - 40px);
  margin:20px auto 0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:28px;
}
.centered-section .centered-section-row{ display:contents; }
.centered-section .centered-section-row > div{
  width:100%; display:flex; flex-direction:column; align-items:center;
}
.centered-section img{
  width:100%; height:250px; aspect-ratio:4/3; object-fit:cover;
  border-radius:10px; box-shadow:0 8px 32px rgba(44,44,44,.10); margin-bottom:18px;
}
.centered-section .img-label{ font:600 1rem/1.3 'Manrope', system-ui, sans-serif; color:#777; margin-top:8px; text-align:center; }

/* -------------------------------
   Big section number (01/02/…)
   ------------------------------- */
.big-number,
.dark-big-number,
.centered-big-number{
  position:absolute; left:-10px; top:-72px;
  font:900 clamp(3rem,9vw,9rem)/1 'Manrope', system-ui, sans-serif;
  letter-spacing:-4px; color:var(--big-num-color, #ededed);
  z-index:-1; user-select:none; pointer-events:none;
}
.big-number--center,
.centered-section .centered-big-number{
  left:50%; transform:translateX(-50%); top:68px;
}

/* Ensure content paints above number */
.section-container,
.dark-section-container,
.centered-section{ position:relative; z-index:0; }
.dark-section .dark-section-content,
.centered-section .centered-section-grid{ position:relative; z-index:1; }

/* -------------------------------
   Responsive tweaks
   ------------------------------- */

/* 2-up grid on tablets */
@media (max-width: 900px){
  .centered-section .centered-section-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:20px;
  }
  .centered-section img{ height:220px; }
}

/* Keep 2 columns down to 560px; then 1 col on very small */
@media (max-width: 560px){
  .centered-section .centered-section-grid{ grid-template-columns:repeat(2,1fr); }
  .centered-section img{ height:210px; }
}
@media (max-width: 360px){
  .centered-section .centered-section-grid{ grid-template-columns:1fr; }
}

/* Services tiles with fixed aspect ratio (nice crops) */
.centered-section .service-img-hover{
  position:relative; width:100%; aspect-ratio:16/10; border-radius:22px; overflow:hidden;
}
.centered-section .service-img-hover img{
  width:100%; height:100%; object-fit:cover; display:block;
}
@media (max-width: 900px){
  .centered-section .service-img-hover{ aspect-ratio:4/3; }
  .centered-section img{ height:auto; } /* override any fixed heights */
}


/* ========== ABOUT-1 SECTION ========== */

.about-1 {
  background: #fff;
  color: #232323;
  padding: 120px 0;
}

.about-1 .about-text p {
  font-size: 1.1rem;
  line-height: 1.65;
  margin-bottom: 20px;
  max-width: 540px;
}

.about-1 .section-right {
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-1 .about-img {
  width: 100%;
  max-width: 460px;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
  object-fit: cover;
}

/* Responsive: stack on smaller screens */
@media (max-width: 900px) {
  .about-1 {
    padding: 80px 0;
  }
  .about-1 .section-container {
    flex-direction: column;
    gap: 32px;
  }
  .about-1 .about-text p {
    max-width: 100%;
  }
  .about-1 .about-img {
    max-width: 100%;
  }
}