/* ============================================================
   TalkGlitz v3 — additions-v3.css
   Mobile-first · Performance-optimised · Office images
   Append these styles to additions.css or load after main.css
   ============================================================ */

/* ── ABOUT HERO WITH FULL BLEED IMAGE ─────────────────── */
.about-hero {
  min-height: 85svh;
  display: flex;
  align-items: flex-end;
  padding: 0 0 4rem;
  position: relative;
  overflow: hidden;
}
.about-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.about-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  /* Performance: no layout shift, proper aspect */
  display: block;
}
.about-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10,10,10,.95) 0%,
    rgba(10,10,10,.7)  40%,
    rgba(10,10,10,.35) 70%,
    rgba(10,10,10,.15) 100%
  );
}
.about-hero-inner {
  position: relative;
  z-index: 1;
  padding-top: 7rem;
}
.about-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.12);
}
.ahs { display: flex; flex-direction: column; gap: 0.2rem; }
.ahs-num {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
}
.ahs-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,.55);
}

/* ── WHO WE ARE SECTION ────────────────────────────────── */
.about-who { padding: var(--space-3xl) 0; background: var(--off-black); }
.about-who-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 1024px) {
  .about-who-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }
}
.about-who-text h2 { margin-bottom: 1.25rem; }
.about-who-text p  { margin-bottom: 1.1rem; }
.about-who-text .btn { margin-top: 0.75rem; }

/* Office image frame */
.about-img-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Subtle gold border treatment */
  box-shadow:
    0 0 0 1px rgba(201,168,76,.15),
    var(--shadow-lg);
}
.about-img-frame img {
  width: 100%;
  height: auto;
  display: block;
  /* Slight zoom on hover — engaging but subtle */
  transition: transform 0.7s var(--ease);
}
.about-img-frame:hover img { transform: scale(1.03); }

/* Badge overlaid on image */
.about-img-badge {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  background: rgba(10,10,10,.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(201,168,76,.25);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.badge-num {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
}
.badge-text {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,.6);
  max-width: 140px;
  line-height: 1.4;
}

/* ── OFFICE STRIP ──────────────────────────────────────── */
.office-strip {
  overflow: hidden;
  background: var(--black);
}
.office-strip-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  position: relative;
}
@media (min-width: 768px) {
  .office-strip-inner {
    grid-template-columns: 1fr 1fr 380px;
    min-height: 400px;
  }
}
.office-strip-img {
  overflow: hidden;
  min-height: 260px;
}
.office-strip-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease);
  /* Prevent layout shift */
  aspect-ratio: 16/9;
}
@media (min-width: 768px) {
  .office-strip-img img { aspect-ratio: unset; }
}
.office-strip-img:hover img { transform: scale(1.04); }
.office-strip-caption {
  background: var(--charcoal);
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  border-left: 1px solid rgba(201,168,76,.1);
}
.office-strip-caption p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--grey-400);
}

/* ── CONTACT PAGE IMAGE ────────────────────────────────── */
.contact-office-img {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-md);
}
.contact-office-img img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}
@media (min-width: 768px) {
  .contact-office-img img { height: 280px; }
}
.contact-office-badge {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  background: rgba(10,10,10,.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(201,168,76,.2);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--gold);
  font-family: var(--font-mono);
}

/* cinfo-sub */
.cinfo-sub {
  font-size: 0.75rem;
  color: var(--grey-600);
  display: block;
  margin-top: 0.15rem;
}

/* Contact: what happens next */
.contact-why { padding: var(--space-2xl) 0; background: var(--charcoal); }
.contact-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: var(--space-xl);
}
@media (min-width: 640px) { .contact-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ .contact-steps { grid-template-columns: repeat(4, 1fr); } }
.contact-step {
  background: var(--off-black);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: var(--radius-lg);
  padding: 2rem;
  position: relative;
  overflow: hidden;
  transition: border-color var(--dur);
}
.contact-step:hover { border-color: rgba(201,168,76,.2); }
.cs-num {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 900;
  color: rgba(201,168,76,.1);
  line-height: 1;
  margin-bottom: 1rem;
}
.contact-step h3 { font-size: 1rem; margin-bottom: 0.6rem; }
.contact-step p  { font-size: 0.875rem; }

/* ── CASE STUDY ENHANCEMENTS ───────────────────────────── */
.case-hero-result {
  display: inline-flex;
  flex-direction: column;
  gap: 0.2rem;
  background: rgba(201,168,76,.08);
  border: 1px solid rgba(201,168,76,.2);
  border-radius: var(--radius-md);
  padding: 1rem 1.5rem;
  margin-top: 1.75rem;
}
.chr-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
}
.chr-value {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--white);
  line-height: 1.2;
}

.result-callout {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: rgba(201,168,76,.06);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
}
.rc-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
}
.rc-value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
}

/* Case study sidebar office image */
.cs-office-img {
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
}
.cs-office-img img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.cs-office-caption {
  background: rgba(10,10,10,.7);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(255,255,255,.5);
  padding: 0.5rem 0.75rem;
  text-align: center;
}

/* Related services tags in sidebar */
.cs-related-services { margin-top: 0; }
.cs-related-services h4 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--grey-600);
  margin-bottom: 0.75rem;
}
.cs-svc-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* More cases section */
.more-cases { padding: var(--space-2xl) 0; background: var(--charcoal); }

/* ── PORTFOLIO PAGE ─────────────────────────────────────── */
.portfolio-page-section { padding: var(--space-2xl) 0 var(--space-3xl); background: var(--off-black); }

/* ── PAGE HERO: overlay fix for pages with real images ─── */
.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10,10,10,.9) 0%,
    rgba(10,10,10,.55) 50%,
    rgba(10,10,10,.25) 100%
  );
}
.contact-hero .page-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.contact-hero .page-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}
.contact-hero { min-height: 55svh; display: flex; align-items: flex-end; padding-bottom: 4rem; }

/* ── PERFORMANCE: image lazy loading helpers ────────────── */
img[loading="lazy"] { background: var(--charcoal); }
img[loading="eager"] { content-visibility: auto; }

/* ── SERVICES PAGE: sub-service link strip ─────────────── */
.svc-jump-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  padding: 2rem 0 0;
}
.svc-jump-nav a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grey-400);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  transition: all var(--dur);
}
.svc-jump-nav a:hover { background: var(--gold); color: var(--black); border-color: var(--gold); }

/* ── VALUES GRID: 3 columns on mid-screen ───────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .values-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .values-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 6 values: 3+3 */
.values-grid.values-grid--6 { }
@media (min-width: 1024px) {
  .values-grid.values-grid--6 { grid-template-columns: repeat(3, 1fr); }
}