/* ============================================
   about.css  —  assets/css/about.css
   Standalone styles for page-about.php.
   Every class is prefixed dv-ab- (no dependency on home.css).
   ============================================ */

.dv-ab-page{
  --dv-ab-ink:#12161A;
  --dv-ab-ink-soft:#1D2429;
  --dv-ab-concrete:#ECE7DC;
  --dv-ab-concrete-dark:#DAD3C2;
  --dv-ab-amber:#F2A61F;
  --dv-ab-amber-deep:#B9720A;
  --dv-ab-white:#FAF8F4;
  --dv-ab-line:rgba(250,248,244,0.16);
  --dv-ab-line-dark:rgba(18,22,26,0.14);

  --dv-ab-display:'Oswald', sans-serif;
  --dv-ab-body:'Inter', sans-serif;
  --dv-ab-mono:'JetBrains Mono', monospace;

  font-family:var(--dv-ab-body);
  color:var(--dv-ab-ink);
}

.dv-ab-page *,
.dv-ab-page *::before,
.dv-ab-page *::after{ box-sizing:border-box; }
.dv-ab-page a{ text-decoration:none; color:inherit; }
.dv-ab-page h1,
.dv-ab-page h2,
.dv-ab-page h3,
.dv-ab-page p,
.dv-ab-page ul,
.dv-ab-page figure{ margin:0; padding:0; }
.dv-ab-page ul{ list-style:none; }
.dv-ab-page img{ max-width:100%; display:block; }

/* ---------- shared type ---------- */
.dv-ab-label{
  font-family:var(--dv-ab-mono);
  font-size:12.5px;
  letter-spacing:0.06em;
  color:var(--dv-ab-amber-deep);
  margin-bottom:16px;
}
.dv-ab-label--amber{ color:var(--dv-ab-amber); }

.dv-ab-h2{
  font-family:var(--dv-ab-display);
  font-weight:600;
  text-transform:uppercase;
  font-size:clamp(1.9rem, 3vw, 2.8rem);
  line-height:1.1;
  letter-spacing:0.01em;
}
.dv-ab-h3{
  font-family:var(--dv-ab-display);
  font-weight:600;
  text-transform:uppercase;
  font-size:clamp(1.5rem, 2.2vw, 2rem);
  line-height:1.2;
  margin-bottom:22px;
}

/* ---------- shared buttons ---------- */
.dv-ab-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--dv-ab-mono);
  font-size:13px;
  font-weight:500;
  letter-spacing:0.04em;
  padding:17px 32px;
  transition:background .2s ease, color .2s ease;
}
.dv-ab-btn--amber{ background:var(--dv-ab-amber); color:var(--dv-ab-ink); }
.dv-ab-btn--amber:hover{ background:var(--dv-ab-white); }
.dv-ab-btn--ink{ background:var(--dv-ab-ink); color:var(--dv-ab-white); }
.dv-ab-btn--ink:hover{ background:var(--dv-ab-white); color:var(--dv-ab-ink); }

.dv-ab-link-light{
  font-family:var(--dv-ab-mono);
  font-size:13px;
  letter-spacing:0.04em;
  color:var(--dv-ab-white);
  padding-bottom:3px;
  border-bottom:1px solid var(--dv-ab-line);
  transition:color .2s ease, border-color .2s ease;
}
.dv-ab-link-light:hover{ color:var(--dv-ab-amber); border-color:var(--dv-ab-amber); }

.dv-ab-btn:focus-visible,
.dv-ab-link-light:focus-visible,
.dv-ab-cta-phone:focus-visible{
  outline:2px solid var(--dv-ab-amber);
  outline-offset:3px;
}

/* ---------- generic section ---------- */
.dv-ab-sec{ padding:112px 80px; }
.dv-ab-sec--white{ background:var(--dv-ab-white); }
.dv-ab-sec--concrete{ background:var(--dv-ab-concrete); }
.dv-ab-sec--dark{ background:var(--dv-ab-ink); color:var(--dv-ab-white); }

.dv-ab-head{ max-width:760px; margin-bottom:56px; }
.dv-ab-head-note{
  margin-top:18px;
  font-size:1rem;
  line-height:1.7;
  color:rgba(18,22,26,0.65);
  max-width:56ch;
}

/* ============================================
   1. HERO
   ============================================ */
.dv-ab-hero{
  position:relative;
  min-height:78vh;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  color:var(--dv-ab-white);
  background-color:var(--dv-ab-ink);
  background-image:
    linear-gradient(180deg, rgba(18,22,26,0.82) 0%, rgba(18,22,26,0.7) 55%, rgba(18,22,26,0.96) 100%),
    url('https://divyakushconstructions.com/wp-content/uploads/2026/08/dv-banner.webp');
  background-size:cover;
  background-position:center;
}

.dv-ab-hero-body{
  padding:120px 80px 72px;
  max-width:980px;
}

.dv-ab-hero-kicker{
  font-family:var(--dv-ab-mono);
  font-size:13px;
  letter-spacing:0.06em;
  color:var(--dv-ab-amber);
  margin-bottom:24px;
}

.dv-ab-hero-title{
  font-family:var(--dv-ab-display);
  font-weight:600;
  text-transform:uppercase;
  font-size:clamp(2.2rem, 5vw, 4.2rem);
  line-height:1.05;
  letter-spacing:0.01em;
}
.dv-ab-hero-title span{
  display:block;
  color:var(--dv-ab-amber);
}

.dv-ab-hero-text{
  margin-top:28px;
  max-width:54ch;
  font-size:1.08rem;
  line-height:1.7;
  color:rgba(250,248,244,0.8);
}

.dv-ab-hero-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:28px;
  margin-top:36px;
}

/* stats bar pinned to bottom of hero */
.dv-ab-hero-stats{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  border-top:1px solid var(--dv-ab-line);
  background:rgba(18,22,26,0.55);
}
.dv-ab-stat{
  padding:30px 80px 30px 40px;
  border-right:1px solid var(--dv-ab-line);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.dv-ab-stat:first-child{ padding-left:80px; }
.dv-ab-stat:last-child{ border-right:none; }
.dv-ab-stat strong{
  font-family:var(--dv-ab-display);
  font-weight:700;
  font-size:clamp(2rem, 3.4vw, 3rem);
  line-height:1;
  color:var(--dv-ab-white);
}
.dv-ab-stat span{
  font-size:0.9rem;
  color:rgba(250,248,244,0.6);
}

/* ============================================
   2. WHO WE ARE
   ============================================ */
.dv-ab-intro{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:0 80px;
  align-items:start;
}
.dv-ab-intro-head{ position:sticky; top:40px; }

.dv-ab-intro-text{
  display:flex;
  flex-direction:column;
  gap:22px;
  font-size:1.02rem;
  line-height:1.8;
  color:rgba(18,22,26,0.7);
  max-width:66ch;
}
.dv-ab-lead{
  font-family:var(--dv-ab-display);
  font-weight:500;
  font-size:1.5rem;
  line-height:1.4;
  color:var(--dv-ab-ink);
  padding-left:22px;
  border-left:3px solid var(--dv-ab-amber);
}

.dv-ab-figure{
  position:relative;
  margin-top:80px;
}
.dv-ab-figure img{
  width:100%;
  height:460px;
  object-fit:cover;
  background:var(--dv-ab-concrete-dark);
}
.dv-ab-figure figcaption{
  position:absolute;
  left:0; bottom:0;
  background:var(--dv-ab-ink);
  color:var(--dv-ab-white);
  font-family:var(--dv-ab-mono);
  font-size:12.5px;
  letter-spacing:0.03em;
  padding:16px 26px;
  border-left:4px solid var(--dv-ab-amber);
}

/* ============================================
   3. VISION & MISSION
   ============================================ */
.dv-ab-vm{
  display:grid;
  grid-template-columns:1fr 1fr;
}
.dv-ab-vm-panel{
  padding:96px 80px;
  font-size:1rem;
  line-height:1.75;
}
.dv-ab-vm-panel--vision{
  background:var(--dv-ab-ink-soft);
  color:rgba(250,248,244,0.78);
}
.dv-ab-vm-panel--vision .dv-ab-h3{ color:var(--dv-ab-white); }
.dv-ab-vm-panel--mission{
  background:var(--dv-ab-amber);
  color:rgba(18,22,26,0.82);
}
.dv-ab-vm-panel--mission .dv-ab-label{ color:var(--dv-ab-ink); }
.dv-ab-vm-panel--mission .dv-ab-h3{ color:var(--dv-ab-ink); }

.dv-ab-checks{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.dv-ab-checks li{
  position:relative;
  padding-left:30px;
  font-weight:500;
  color:var(--dv-ab-ink);
  line-height:1.5;
}
.dv-ab-checks li::before{
  content:"";
  position:absolute;
  left:2px; top:5px;
  width:6px; height:11px;
  border:solid var(--dv-ab-ink);
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

/* ============================================
   4. CORE VALUES  (ruled rows, no cards)
   ============================================ */
.dv-ab-values{ border-top:1px solid var(--dv-ab-line-dark); }

.dv-ab-value{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:0 48px;
  align-items:baseline;
  padding:34px 0 34px 0;
  border-bottom:1px solid var(--dv-ab-line-dark);
  border-left:4px solid transparent;
  transition:border-color .2s ease, padding-left .2s ease;
}
.dv-ab-value:hover{
  border-left-color:var(--dv-ab-amber);
  padding-left:24px;
}
.dv-ab-value h3{
  font-family:var(--dv-ab-display);
  font-weight:600;
  text-transform:uppercase;
  font-size:clamp(1.4rem, 2.2vw, 1.9rem);
  letter-spacing:0.01em;
}
.dv-ab-value p{
  font-size:1.02rem;
  line-height:1.7;
  color:rgba(18,22,26,0.68);
  max-width:56ch;
}

/* ============================================
   5. SECTORS  (five columns)
   ============================================ */
.dv-ab-sectors{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:32px;
}
.dv-ab-sector{
  padding-top:22px;
  border-top:3px solid var(--dv-ab-ink);
}
.dv-ab-sector--main{ border-top-color:var(--dv-ab-amber); }
.dv-ab-sector h3{
  font-family:var(--dv-ab-display);
  font-weight:600;
  text-transform:uppercase;
  font-size:1.3rem;
  letter-spacing:0.01em;
  margin-bottom:20px;
}
.dv-ab-sector ul{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.dv-ab-sector li{
  font-size:0.97rem;
  line-height:1.4;
  color:rgba(18,22,26,0.7);
  padding-bottom:12px;
  border-bottom:1px solid var(--dv-ab-line-dark);
}

/* ============================================
   6. WHAT MAKES US DIFFERENT
   ============================================ */
.dv-ab-diff{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:0 80px;
  align-items:start;
}
.dv-ab-diff-head{ position:sticky; top:40px; }
.dv-ab-diff-head .dv-ab-h2{ margin-bottom:22px; }
.dv-ab-diff-head p:last-child{
  font-size:1rem;
  line-height:1.7;
  color:rgba(250,248,244,0.65);
  max-width:40ch;
}

.dv-ab-diff-list{ border-top:1px solid var(--dv-ab-line); }
.dv-ab-diff-item{
  padding:34px 0;
  border-bottom:1px solid var(--dv-ab-line);
}
.dv-ab-diff-item h3{
  font-family:var(--dv-ab-display);
  font-weight:600;
  text-transform:uppercase;
  font-size:1.5rem;
  letter-spacing:0.01em;
  color:var(--dv-ab-amber);
  margin-bottom:10px;
}
.dv-ab-diff-item p{
  font-size:1rem;
  line-height:1.7;
  color:rgba(250,248,244,0.72);
  max-width:52ch;
}

/* ============================================
   7. COMPARISON TABLE
   ============================================ */
.dv-ab-table-wrap{ overflow-x:auto; }

.dv-ab-table{
  width:100%;
  min-width:640px;
  border-collapse:collapse;
}
.dv-ab-table th,
.dv-ab-table td{
  padding:20px 24px;
  text-align:left;
  font-size:0.98rem;
  line-height:1.4;
  border-bottom:1px solid var(--dv-ab-line-dark);
}
.dv-ab-table thead th{
  font-family:var(--dv-ab-mono);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:0.04em;
  color:rgba(18,22,26,0.6);
  border-bottom:2px solid var(--dv-ab-ink);
}
.dv-ab-table thead th.dv-ab-table-us{
  background:var(--dv-ab-ink);
  color:var(--dv-ab-amber);
  border-bottom-color:var(--dv-ab-ink);
}
.dv-ab-table tbody th{
  font-family:var(--dv-ab-display);
  font-weight:600;
  text-transform:uppercase;
  font-size:1rem;
  letter-spacing:0.01em;
}
.dv-ab-table tbody td{ color:rgba(18,22,26,0.55); }
.dv-ab-table tbody td.dv-ab-table-us{
  background:rgba(242,166,31,0.12);
  color:var(--dv-ab-ink);
  font-weight:500;
}
.dv-ab-table tbody td.dv-ab-table-us::before{
  content:"\2713";
  color:var(--dv-ab-amber-deep);
  font-weight:700;
  margin-right:10px;
}
.dv-ab-table tbody td:last-child::before{
  content:"\2715";
  color:rgba(18,22,26,0.35);
  margin-right:10px;
}

/* ============================================
   8. QUALITY & TRUST
   ============================================ */
.dv-ab-trust{
  max-width:820px;
  margin:0 auto;
  text-align:center;
}
.dv-ab-trust .dv-ab-h2{ margin-bottom:28px; }
.dv-ab-trust p + p{ margin-top:16px; }
.dv-ab-trust > p:not(.dv-ab-label){
  font-size:1.05rem;
  line-height:1.8;
  color:rgba(18,22,26,0.7);
}

.dv-ab-chips{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin-top:44px;
}
.dv-ab-chips li{
  font-family:var(--dv-ab-display);
  font-weight:500;
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:0.02em;
  padding:12px 22px;
  background:var(--dv-ab-white);
  border:1px solid var(--dv-ab-line-dark);
  border-left:4px solid var(--dv-ab-amber);
}

/* ============================================
   9. CTA
   ============================================ */
.dv-ab-cta{
  background:var(--dv-ab-amber);
  padding:100px 80px;
  color:var(--dv-ab-ink);
}
.dv-ab-cta-inner{
  max-width:860px;
}
.dv-ab-cta-title{
  font-family:var(--dv-ab-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(2.2rem, 4.6vw, 4rem);
  line-height:1.05;
  margin-bottom:22px;
}
.dv-ab-cta-inner > p{
  font-size:1.05rem;
  line-height:1.7;
  max-width:58ch;
  color:rgba(18,22,26,0.82);
}
.dv-ab-cta-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:28px;
  margin-top:36px;
}
.dv-ab-cta-phone{
  font-family:var(--dv-ab-display);
  font-weight:600;
  font-size:1.15rem;
  padding-bottom:3px;
  border-bottom:2px solid var(--dv-ab-ink);
}
.dv-ab-cta-phone:hover{ opacity:0.7; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width:1100px){
  .dv-ab-sectors{ grid-template-columns:repeat(3, 1fr); }
}

@media (max-width:900px){
  .dv-ab-sec{ padding:80px 32px; }
  .dv-ab-hero-body{ padding:96px 32px 56px; }
  .dv-ab-stat,
  .dv-ab-stat:first-child{ padding:24px 20px 24px 32px; }
  .dv-ab-intro,
  .dv-ab-diff{ grid-template-columns:1fr; gap:36px; }
  .dv-ab-intro-head,
  .dv-ab-diff-head{ position:static; }
  .dv-ab-figure img{ height:340px; }
  .dv-ab-vm{ grid-template-columns:1fr; }
  .dv-ab-vm-panel{ padding:72px 32px; }
  .dv-ab-value{ grid-template-columns:1fr; gap:10px; }
  .dv-ab-cta{ padding:80px 32px; }
}

@media (max-width:640px){
  .dv-ab-sec{ padding:64px 24px; }
  .dv-ab-hero{ min-height:auto; }
  .dv-ab-hero-body{ padding:80px 24px 48px; }
  .dv-ab-hero-stats{ grid-template-columns:1fr; }
  .dv-ab-stat,
  .dv-ab-stat:first-child{
    padding:20px 24px;
    border-right:none;
    border-bottom:1px solid var(--dv-ab-line);
    flex-direction:row;
    align-items:baseline;
    gap:14px;
  }
  .dv-ab-stat:last-child{ border-bottom:none; }
  .dv-ab-sectors{ grid-template-columns:1fr; gap:36px; }
  .dv-ab-vm-panel{ padding:56px 24px; }
  .dv-ab-cta{ padding:64px 24px; }
  .dv-ab-table th,
  .dv-ab-table td{ padding:16px 18px; }
}

@media (prefers-reduced-motion: reduce){
  .dv-ab-page *{ transition-duration:0.01ms !important; }
}