/* ═══════════════════════════════════════
   THUGIL DESIGNERS — About Page Styles
   assets/css/about.css
═══════════════════════════════════════ */

/* ── NAV ACTIVE STATE ── */
.nav-active{color:var(--text) !important}
.nav-active::after{left:0 !important;right:0 !important}

/* ═══════════════════════════════════════
   ABOUT HERO
═══════════════════════════════════════ */
.ab-hero{
  position:relative;
  min-height:calc(100vh - 106px);
  margin-top:106px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--burg-d)
}

.ab-hero-bg{
  position:absolute;
  inset:0;
  z-index:0
}

.ab-hero-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  display:block
}

.ab-hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(135deg, rgba(10,3,0,.76) 0%, rgba(26,8,0,.5) 50%, rgba(10,3,0,.7) 100%)
}

.ab-hero-content{
  position:relative;
  z-index:2;
  text-align:center;
  color:#fff;
  padding:0 5%;
  max-width:900px
}

.ab-hero-eyebrow{
  font-size:.62rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold-p);
  margin-bottom:1.5rem;
  display:block
}

.ab-hero-h1{
  font-family:'Playfair Display',serif;
  font-size:clamp(2.6rem,5vw,5rem);
  font-weight:700;
  line-height:1.1;
  color:#fff;
  margin-bottom:1.5rem
}

.ab-hero-h1 em{
  font-style:italic;
  color:rgba(255,255,255,.88)
}

.ab-hero-sub{
  font-size:clamp(.9rem,1.5vw,1.1rem);
  color:rgba(255,255,255,.62);
  line-height:1.75;
  max-width:550px;
  margin:0 auto
}

/* ═══════════════════════════════════════
   STORY
═══════════════════════════════════════ */
.ab-story{
  padding:7rem 5%;
  background:var(--bg)
}

.ab-story-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5rem;
  max-width:1300px;
  margin:0 auto;
  align-items:start
}

.ab-story-text .sec-eyebrow{margin-bottom:.6rem}
.ab-story-text .sec-title{margin-bottom:2rem}

.ab-story-text p{
  font-size:.92rem;
  color:var(--muted);
  line-height:1.95;
  margin-bottom:1.3rem
}

.ab-story-text p strong{color:var(--text);font-weight:600}
.ab-story-text p em{color:var(--burg);font-style:italic}

.ab-story-visual{
  display:flex;
  flex-direction:column;
  gap:2rem
}

.ab-story-img{
  aspect-ratio:4/5;
  overflow:hidden;
  border:1px solid var(--border-l)
}

.ab-story-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s
}

.ab-story-img:hover img{transform:scale(1.04)}

.ab-story-stat-wrap{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--border-l);
  border:1px solid var(--border-l)
}

.ab-stat{
  background:var(--bg);
  padding:1.6rem 1rem;
  text-align:center;
  transition:background .25s
}

.ab-stat:hover{background:var(--bg2)}

.ab-stat-num{
  display:block;
  font-family:'Playfair Display',serif;
  font-size:2.3rem;
  font-weight:700;
  color:var(--burg);
  line-height:1
}

.ab-stat-label{
  display:block;
  font-size:.6rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:.55rem
}

/* ═══════════════════════════════════════
   VALUES
═══════════════════════════════════════ */
.ab-values{
  padding:7rem 5%;
  background:var(--bg2)
}

.ab-values-inner{
  max-width:1300px;
  margin:0 auto
}

.ab-values-inner .sec-eyebrow{margin-bottom:.6rem}
.ab-values-inner .sec-title{margin-bottom:3.5rem}

.ab-values-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.5rem
}

.ab-val-card{
  background:var(--bg);
  padding:2.4rem 2rem;
  border:1px solid var(--border-l);
  border-radius:3px;
  transition:transform .3s,box-shadow .3s,border-color .3s
}

.ab-val-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 44px rgba(139,42,24,.1);
  border-color:var(--border)
}

.ab-val-icon{
  font-size:2rem;
  margin-bottom:1.2rem;
  display:block
}

.ab-val-card h3{
  font-family:'Playfair Display',serif;
  font-size:1.08rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:.7rem;
  line-height:1.25
}

.ab-val-card p{
  font-size:.82rem;
  color:var(--muted);
  line-height:1.85
}

/* ═══════════════════════════════════════
   WHAT WE OFFER
═══════════════════════════════════════ */
.ab-offer{
  padding:7rem 5%;
  background:var(--bg)
}

.ab-offer-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5rem;
  max-width:1300px;
  margin:0 auto;
  align-items:center
}

.ab-offer-text .sec-eyebrow{margin-bottom:.6rem}
.ab-offer-text .sec-title{margin-bottom:2.5rem}

.ab-offer-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:.7rem
}

.ab-offer-list li{
  display:flex;
  align-items:flex-start;
  gap:1rem;
  padding:1rem 1.3rem;
  background:var(--bg2);
  border:1px solid var(--border-l);
  border-radius:3px;
  transition:background .2s,border-color .2s
}

.ab-offer-list li:hover{
  background:var(--bg3);
  border-color:var(--border)
}

.ab-offer-list li>span{
  font-size:1.3rem;
  flex-shrink:0;
  margin-top:1px
}

.ab-offer-list li>div{
  font-size:.84rem;
  color:var(--muted);
  line-height:1.7
}

.ab-offer-list li strong{
  color:var(--text);
  font-weight:600
}

.ab-offer-visual{
  aspect-ratio:3/4;
  overflow:hidden;
  border:1px solid var(--border-l);
  border-radius:2px
}

.ab-offer-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s
}

.ab-offer-visual:hover img{transform:scale(1.04)}

/* ═══════════════════════════════════════
   QUOTE STRIP
═══════════════════════════════════════ */
.ab-quote-strip{
  background:var(--burg-d);
  padding:5.5rem 5%;
  text-align:center;
  position:relative;
  overflow:hidden
}

.ab-quote-strip::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 80% 80% at 50% 50%, rgba(196,144,16,.07) 0%, transparent 70%);
  pointer-events:none
}

.ab-quote-strip blockquote{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.4rem,2.5vw,2.1rem);
  font-style:italic;
  color:rgba(255,255,255,.92);
  line-height:1.55;
  max-width:780px;
  margin:0 auto 1.4rem;
  quotes:none;
  position:relative;
  z-index:1
}

.ab-quote-strip blockquote::before,
.ab-quote-strip blockquote::after{content:none}

.ab-quote-strip cite{
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-p);
  font-style:normal;
  position:relative;
  z-index:1
}

/* ═══════════════════════════════════════
   VISIT US
═══════════════════════════════════════ */
.ab-visit{
  padding:7rem 5%;
  background:var(--bg2)
}

.ab-visit-inner{
  max-width:1300px;
  margin:0 auto
}

.ab-visit-inner .sec-eyebrow{margin-bottom:.6rem}
.ab-visit-inner .sec-title{margin-bottom:3.5rem}

.ab-visit-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.5rem
}

.ab-visit-card{
  background:var(--bg);
  padding:2.4rem 2rem;
  border:1px solid var(--border-l);
  border-radius:3px;
  transition:transform .3s,box-shadow .3s
}

.ab-visit-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(44,22,8,.08)
}

.ab-visit-icon{
  font-size:1.8rem;
  margin-bottom:1rem;
  display:block
}

.ab-visit-card h4{
  font-family:'Playfair Display',serif;
  font-size:1.05rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:.7rem
}

.ab-visit-card p{
  font-size:.82rem;
  color:var(--muted);
  line-height:1.75;
  margin-bottom:.3rem
}

.ab-visit-link{
  display:inline-block;
  margin-top:.9rem;
  font-size:.67rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--burg);
  text-decoration:none;
  font-weight:600;
  transition:color .2s
}

.ab-visit-link:hover{color:var(--gold)}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media(max-width:1024px){
  .ab-story-inner{
    grid-template-columns:1fr;
    gap:3rem
  }

  .ab-story-visual{
    max-width:580px
  }

  .ab-values-grid{
    grid-template-columns:repeat(2,1fr)
  }

  .ab-offer-inner{
    grid-template-columns:1fr;
    gap:3rem
  }

  .ab-offer-visual{
    max-width:500px;
    aspect-ratio:4/3
  }

  .ab-visit-grid{
    grid-template-columns:repeat(2,1fr)
  }
}

@media(max-width:768px){
  /* Lighter overlay so woman's face shows through on mobile */
  .ab-hero-overlay{
    background:linear-gradient(to bottom, rgba(10,3,0,.35) 0%, rgba(10,3,0,.52) 55%, rgba(10,3,0,.82) 100%)
  }
}

@media(max-width:640px){
  .ab-hero{
    min-height:calc(100vh - 94px);
    margin-top:94px
  }

  .ab-hero-h1{font-size:2.1rem}

  .ab-story,
  .ab-values,
  .ab-offer,
  .ab-visit{padding:4.5rem 5%}

  .ab-story-inner{gap:2.5rem}

  .ab-story-stat-wrap{grid-template-columns:repeat(3,1fr)}

  .ab-values-grid{grid-template-columns:1fr}

  .ab-val-card,
  .ab-visit-card{padding:1.8rem 1.5rem}

  .ab-offer-visual{
    aspect-ratio:3/4;
    max-width:100%
  }

  .ab-quote-strip{padding:3.5rem 5%}

  .ab-visit-grid{grid-template-columns:1fr}
}