/* ================================================
   BLACKQUILL HOUSE — style.css
   Editorial Design Studio · Hyderabad, Telangana
   ================================================
   THEME: Modern Luxury + Trust (dark, single-accent)
   Background #0B0B0B · Surface #181818 · Text #F2F2F2
   Secondary #A8A8A8 · Accent #00A86B · Hover #18C17D
   ================================================
   TABLE OF CONTENTS
   1.  Reset & CSS Variables
   2.  Base
   3.  Progress Bar
   4.  Navigation
   5.  Hero
   6.  Stats Bar
   7.  Layout Helpers
   8.  Buttons
   9.  Services
   10. Commission Banner
   11. Selected Works — Filter Bar
   12. Selected Works — Grid & Cards
   13. Lightbox
   14. About
   15. Contact & Form
   16. Footer
   17. Scroll Reveal & Animations
   18. Responsive
   ================================================ */

/* ── 1. RESET & CSS VARIABLES ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #0B0B0B;
  --surface:     #181818;
  --text:        #F2F2F2;
  --text-sec:    #A8A8A8;
  --accent:      #00A86B;
  --accent-hover:#18C17D;

  /* legacy token names kept so every selector below still resolves —
     each now points into the palette above instead of the old
     cream/red/gold editorial theme */
  --ink:        var(--bg);
  --ink-mid:    var(--text);
  --ink-light:  var(--text-sec);
  --ink-faint:  var(--text-sec);
  --parchment:  var(--bg);
  --parch-warm: var(--surface);
  --white:      var(--text);
  --red:        var(--accent);
  --red-dark:   var(--accent-hover);
  --gold:       var(--accent);
  --gold-light: var(--accent-hover);
  --ghost:      var(--surface);
  --rule:       rgba(242,242,242,0.1);
  --display:    'Playfair Display', Georgia, serif;
  --body:       'Inter', system-ui, sans-serif;
  --max-w:      1200px;
  --pad:        52px;
  --gap:        96px;
}

/* ── 2. BASE ── */
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a   { color: inherit; }

/* ── 3. PROGRESS BAR ── */
#prog {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 0;
  background: var(--accent);
  z-index: 2000;
  transition: width .1s linear;
}

/* ── 4. NAVIGATION ── */
nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000; height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad);
  background: rgba(11,11,11,.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(242,242,242,.1);
  transition: transform .3s ease;
}
nav.hide { transform: translateY(-100%); }

.nav-logo {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; flex-shrink: 0;
}
.nav-logo img {
  width: 38px; height: 38px;
  object-fit: cover;
}
.nav-logo-text {
  font-family: var(--display);
  font-size: 17px; font-weight: 900;
  color: var(--text); letter-spacing: .02em;
}
.nav-links { display: flex; gap: 32px; list-style: none; }
.nav-links a {
  font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(242,242,242,.55);
  text-decoration: none; transition: color .2s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--accent); }
.nav-cta {
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #0B0B0B; background: var(--accent);
  padding: 9px 22px; text-decoration: none;
  transition: background .2s; white-space: nowrap;
}
.nav-cta:hover { background: var(--accent-hover); }

/* ── 5. HERO ── */
.hero {
  min-height: 100vh; position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
  background: var(--bg);
}
.hero-bg { position: absolute; inset: 0; z-index: 1; }
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center; opacity: 100;
}
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(11,11,11,.94) 0%, rgba(11,11,11,.75) 38%, rgba(11,11,11,.4) 68%, rgba(11,11,11,.15) 100%),
    linear-gradient(to top,   rgba(11,11,11,.92)  0%, rgba(11,11,11,.4) 42%, transparent 65%);
}
.hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 4px 1fr;
  gap: 0 44px; align-items: flex-end;
  padding: 120px var(--pad) 80px;
  max-width: var(--max-w); width: 100%;
}
.hero-spine {
  background: var(--accent);
  align-self: stretch; margin: 12px 0; min-height: 200px;
  position: relative;
}
.hero-spine::before {
  content: 'BLACKQUILL HOUSE';
  position: absolute; top: 50%; left: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(-90deg);
  font-size: 8px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(0,168,107,.55); white-space: nowrap;
}
.hero-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent);
  display: flex; align-items: center; gap: 12px; margin-bottom: 24px;
  opacity: 0; animation: fadeUp .7s .2s forwards;
}
.hero-eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--accent); }
.hero-h1 {
  font-family: var(--display);
  font-size: clamp(42px,6vw,88px); font-weight: 900; line-height: 1;
  color: var(--text); margin-bottom: 22px;
  opacity: 0; animation: fadeUp .8s .35s forwards;
}
.hero-h1 em { font-style: italic; color: var(--accent); }
.hero-deck {
  font-size: 17px; font-weight: 300; line-height: 1.8;
  color: var(--text-sec); max-width: 560px; margin-bottom: 36px;
  opacity: 0; animation: fadeUp .8s .5s forwards;
}
.hero-pills {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px;
  opacity: 0; animation: fadeUp .8s .6s forwards;
}
.pill {
  font-size: 10px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; padding: 5px 14px;
  border: 1px solid rgba(242,242,242,.22); color: var(--text-sec);
  background: rgba(255,255,255,.04); backdrop-filter: blur(3px);
}
.pill.lit { border-color: var(--accent); color: var(--accent); background: rgba(0,168,107,.1); }
.hero-btns {
  display: flex; gap: 16px; align-items: center;
  opacity: 0; animation: fadeUp .8s .72s forwards;
}
.hero-scroll {
  position: absolute; bottom: 36px; right: var(--pad); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  opacity: 0; animation: fadeIn 1s 1.3s forwards;
}
.hero-scroll span {
  font-size: 9px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-sec);
}
.scroll-line {
  width: 1px; height: 44px; background: rgba(242,242,242,.2);
  position: relative; overflow: hidden;
}
.scroll-line::after {
  content: ''; position: absolute; top: -100%; left: 0;
  width: 100%; height: 100%; background: var(--accent);
  animation: scrollDrop 1.8s 1.3s infinite;
}

/* ── 6. STATS BAR ── */
.stats-bar {
  background: var(--bg); border-top: 1px solid rgba(242,242,242,.08);
  padding: 28px var(--pad);
  display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 24px;
}
.stat-item { text-align: center; }
.stat-num {
  font-family: var(--display); font-size: 36px; font-weight: 900;
  color: var(--accent); line-height: 1; display: block;
}
.stat-label {
  font-size: 10px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(242,242,242,.4);
  margin-top: 4px; display: block;
}
.stat-div { width: 1px; height: 40px; background: rgba(242,242,242,.1); }

/* ── 7. LAYOUT HELPERS ── */
.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad); }
.sec  { padding: var(--gap) 0; }

.sr { display: grid; grid-template-columns: 4px 1fr; gap: 28px; align-items: start; margin-bottom: 56px; }
.sr .sp { background: var(--accent); align-self: stretch; min-height: 52px; }
.sr .ey {
  font-size: 9px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 10px;
}
.sr h2 {
  font-family: var(--display); font-size: clamp(28px,4vw,48px);
  font-weight: 700; line-height: 1.1; color: var(--text);
}
.sr h2 em { font-style: italic; color: var(--accent); }
.sr p { font-size: 16px; color: var(--text-sec); max-width: 600px; line-height: 1.7; margin-top: 10px; }

/* ── 8. BUTTONS ── */
.btn-p {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #0B0B0B; background: var(--accent);
  padding: 13px 30px; text-decoration: none; border: none; cursor: pointer;
  transition: background .2s;
}
.btn-p:hover { background: var(--accent-hover); }
.btn-g {
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-sec);
  text-decoration: none; border-bottom: 1px solid rgba(242,242,242,.25);
  padding-bottom: 2px; transition: color .2s, border-color .2s;
}
.btn-g:hover { color: var(--accent); border-color: var(--accent); }

/* ── 9. SERVICES ── */
#services { background: var(--bg); border-top: 1px solid var(--rule); }
.svc-grid {
  display: grid; grid-template-columns: repeat(5,1fr);
  gap: 2px; background: var(--rule); max-width: var(--max-w); margin: 0 auto;
}
.svc-card {
  background: var(--surface); padding: 32px 22px;
  border-top: 3px solid transparent; transition: border-color .25s, transform .25s;
}
.svc-card:hover { border-top-color: var(--accent); transform: translateY(-3px); }
.svc-icon  { font-size: 28px; display: block; margin-bottom: 18px; }
.svc-title { font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 10px; line-height: 1.25; }
.svc-desc  { font-size: 12px; color: var(--text-sec); line-height: 1.75; margin-bottom: 14px; }
.svc-tag   { font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }

/* ── 10. COMMISSION BANNER ── */
.cbanner {
  background: var(--accent); color: #0B0B0B;
  padding: 22px var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.cbanner p {
  font-family: var(--display); font-size: clamp(16px,2.2vw,24px);
  font-style: italic; font-weight: 700; line-height: 1.25;
}
.cbanner a {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text); background: #0B0B0B; padding: 12px 26px;
  text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: background .2s;
}
.cbanner a:hover { background: var(--surface); }

/* ── 11. SELECTED WORKS — CURATED COLLECTIONS ──
   Each category is one full-width "collection" card
   with a single cover image. Clicking it expands an
   accordion panel revealing that category's projects.
   Only one collection is open at a time (see script.js
   toggleCollection / openCollection / closeCollection).
────────────────────────────────────────── */
#works { background: var(--bg); }

.works-header {
  display: flex; align-items: center;
  justify-content: flex-end; gap: 24px;
  margin-bottom: 40px; flex-wrap: wrap;
}
.works-count {
  font-size: 12px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-sec);
  white-space: nowrap; padding-bottom: 4px;
}

.collections {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ── Collection card (collapsed hero + expandable panel) ── */
.collection-card {
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  transition: box-shadow .4s ease;
}
.collection-card:hover { box-shadow: 0 16px 48px rgba(0,0,0,.45); }

.collection-hero {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  min-height: 340px;
  border: none; padding: 0; margin: 0;
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
}
.collection-hero-img-wrap {
  position: absolute; inset: 0;
}
.collection-hero-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform .5s ease;
}
.collection-hero:hover .collection-hero-img { transform: scale(1.035); }

.collection-hero-img-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,11,11,.92) 0%, rgba(11,11,11,.55) 38%, rgba(11,11,11,.1) 70%, transparent 100%);
}

.collection-hero-content {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 40px 44px;
  z-index: 2;
}
.collection-index {
  display: block;
  font-family: var(--display); font-size: 12px; font-weight: 700;
  letter-spacing: .2em; color: var(--accent); margin-bottom: 10px;
}
.collection-title {
  font-family: var(--display); font-size: clamp(26px,3.4vw,42px);
  font-weight: 700; color: var(--text); line-height: 1.1; margin-bottom: 10px;
}
.collection-desc {
  font-size: 14px; color: rgba(242,242,242,.75); line-height: 1.6;
  max-width: 520px; margin-bottom: 22px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.collection-meta {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.collection-count {
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(242,242,242,.55);
}
.collection-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
}
.collection-cta-icon {
  display: inline-flex; transition: transform .35s ease;
}
.collection-hero:hover .collection-cta-icon { transform: translateX(4px); }
.collection-card.open .collection-cta-icon { transform: rotate(90deg); }
.collection-card.open .collection-hero:hover .collection-cta-icon { transform: rotate(90deg) translateX(4px); }

/* ── Expandable panel ── */
.collection-panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .45s cubic-bezier(.4,0,.2,1), opacity .35s ease;
}
.collection-card.open .collection-panel { opacity: 1; }

.collection-panel-inner {
  padding: 44px var(--pad) 48px;
}

.collection-projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 36px;
}

.collection-collapse {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 auto;
  background: none; border: 1px solid rgba(242,242,242,.15);
  border-radius: 30px;
  padding: 11px 26px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-sec);
  cursor: pointer;
  transition: color .3s ease, border-color .3s ease, transform .3s ease;
}
.collection-collapse .collapse-icon { display: inline-flex; transform: rotate(-90deg); transition: transform .35s ease; }
.collection-collapse:hover {
  color: var(--accent); border-color: var(--accent);
}
.collection-collapse:hover .collapse-icon { transform: rotate(-90deg) translateX(3px); }

/* ── Project cards inside a collection panel ── */
.work-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .4s ease, transform .4s ease;
}
.work-item.on {
  opacity: 1;
  transform: translateY(0);
}

.work-card {
  background: var(--bg);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
  transition: box-shadow .4s ease, transform .4s ease;
}
.work-card:hover {
  box-shadow: 0 20px 48px rgba(0,0,0,.5);
  transform: translateY(-6px);
}

/* Image wrapper — fixed aspect ratio container */
.work-img-wrap {
  position: relative;
  overflow: hidden;
  background: var(--surface);
}

/* Default aspect ratio — portrait (publications, brand) */
.work-img-wrap { aspect-ratio: 3/4; }

/* Landscape for illustrations */
.work-item[data-category="illustration"] .work-img-wrap { aspect-ratio: 16/9; }

/* Landscape for digital / web */
.work-item[data-category="digital"] .work-img-wrap { aspect-ratio: 16/9; }

.work-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block;
  transition: transform .45s ease;
}
/* Illustrations — show full image, don't crop */
.work-item[data-category="illustration"] .work-img {
  object-fit: contain;
  object-position: center;
}

.work-card:hover .work-img { transform: scale(1.04); }

/* Hover overlay */
.work-overlay {
  position: absolute; inset: 0;
  background: rgba(11,11,11,.82);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .3s ease;
}
.work-card:hover .work-overlay { opacity: 1; }
.work-overlay span {
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent);
  border-bottom: 1px solid var(--accent); padding-bottom: 3px;
}

/* Card metadata */
.work-meta { padding: 20px 22px 24px; }
.work-label {
  font-size: 9px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent);
  display: block; margin-bottom: 8px;
}
.work-title {
  font-family: var(--display); font-size: 16px; font-weight: 700;
  color: var(--text); line-height: 1.35; margin-bottom: 6px;
}
.work-desc {
  font-size: 12px; color: var(--text-sec);
  line-height: 1.6; margin-top: 6px;
}

/* Link wrapper — no underline */
.work-item a {
  text-decoration: none; display: block;
}

/* ── 13. LIGHTBOX ── */
#lb {
  display: none; position: fixed; inset: 0;
  background: rgba(11,11,11,.97);
  z-index: 5000; flex-direction: column;
  align-items: center; justify-content: center;
}
#lb.open { display: flex; }
#lb-img {
  max-height: 78vh; max-width: 86vw;
  object-fit: contain; border-top: 3px solid var(--accent);
  display: block;
}
#lb-meta { margin-top: 20px; text-align: center; }
#lb-label {
  font-size: 9px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent);
  display: block; margin-bottom: 6px;
}
#lb-title {
  font-family: var(--display); font-size: 20px; font-weight: 700;
  color: var(--text); display: block; margin-bottom: 4px;
}
#lb-desc {
  font-size: 13px; color: rgba(242,242,242,.55);
  display: block; margin-top: 4px;
}
#lb-close {
  position: absolute; top: 20px; right: 28px;
  font-size: 28px; color: rgba(242,242,242,.5);
  cursor: pointer; background: none; border: none;
  line-height: 1; transition: color .2s;
}
#lb-close:hover { color: var(--accent); }
#lb-prev, #lb-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 28px; color: rgba(242,242,242,.4);
  cursor: pointer; background: none; border: none;
  padding: 16px; line-height: 1; transition: color .2s;
}
#lb-prev:hover, #lb-next:hover { color: var(--accent); }
#lb-prev { left: 20px; } #lb-next { right: 20px; }
#lb-counter {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  color: rgba(242,242,242,.35);
}

/* ── 14. ABOUT ── */
#about { background: var(--bg); color: var(--text-sec); }
.about-g { display: grid; grid-template-columns: 4px 1fr 1fr; gap: 0 52px; align-items: start; }
.about-sp { background: var(--accent); align-self: stretch; margin: 4px 0; }
.about-eyebrow { font-size: 9px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 18px; }
.about-h { font-family: var(--display); font-size: clamp(24px,3.5vw,44px); font-weight: 700; line-height: 1.1; color: var(--text); margin-bottom: 22px; }
.about-h em { font-style: italic; color: var(--accent); }
.about-p { font-size: 15px; font-weight: 300; color: rgba(242,242,242,.72); line-height: 1.8; margin-bottom: 14px; }
.pitch { background: rgba(242,242,242,.05); border: 1px solid rgba(242,242,242,.1); border-left: 3px solid var(--accent); padding: 22px 26px; margin-bottom: 14px; }
.pitch h4 { font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.pitch p  { font-size: 13px; color: rgba(242,242,242,.6); line-height: 1.7; }

/* ── 15. CONTACT & FORM ── */
#contact { background: var(--surface); border-top: 1px solid var(--rule); }
.cg { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.ci-label { font-size: 9px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 14px; }
.ci-h { font-family: var(--display); font-size: clamp(22px,3vw,36px); font-weight: 700; line-height: 1.15; color: var(--text); margin-bottom: 16px; }
.ci-p { font-size: 14px; color: var(--text-sec); line-height: 1.75; margin-bottom: 28px; }
.ci-rows { display: flex; flex-direction: column; gap: 14px; }
.ci-row { display: flex; align-items: flex-start; gap: 12px; }
.ci-ico { font-size: 16px; flex-shrink: 0; margin-top: 2px; }
.ci-txt { font-size: 13px; color: var(--text); line-height: 1.55; }
.ci-txt strong { display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-sec); margin-bottom: 2px; }
.ff { margin-bottom: 16px; }
.ff label { display: block; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-sec); margin-bottom: 7px; }
.ff input, .ff select, .ff textarea { width: 100%; background: var(--bg); border: 1px solid var(--rule); padding: 11px 15px; font-family: var(--body); font-size: 13px; color: var(--text); outline: none; appearance: none; transition: border-color .2s; }
.ff input:focus, .ff select:focus, .ff textarea:focus { border-color: var(--accent); }
.ff textarea { height: 120px; resize: vertical; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wa-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 13px; background: #25d366; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; margin-top: 12px; transition: background .2s; }
.wa-btn:hover { background: #1fb957; }
.form-note { font-size: 12px; color: var(--text-sec); margin-top: 10px; text-align: center; }

/* ── 16. FOOTER ── */
footer { background: var(--bg); color: rgba(242,242,242,.4); padding: 52px var(--pad) 28px; border-top: 1px solid var(--rule); }
.ft { max-width: var(--max-w); margin: 0 auto; }
.ftop { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 44px; margin-bottom: 44px; }
.fb-logo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; margin-bottom: 14px; }
.fb-name { font-family: var(--display); font-size: 20px; font-weight: 900; color: var(--text); margin-bottom: 3px; }
.fb-tag  { font-size: 11px; color: var(--accent); letter-spacing: .06em; margin-bottom: 12px; display: block; }
.fb-desc { font-size: 13px; line-height: 1.7; max-width: 250px; }
.fc h4   { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(242,242,242,.22); margin-bottom: 18px; }
.fc ul   { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.fc ul li a { font-size: 13px; color: rgba(242,242,242,.5); text-decoration: none; transition: color .2s; }
.fc ul li a:hover { color: var(--accent); }
.fbot { border-top: 1px solid rgba(242,242,242,.08); padding-top: 22px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; flex-wrap: wrap; gap: 10px; }
.fbot strong { color: rgba(242,242,242,.32); font-weight: 500; }

/* ── 17. SCROLL REVEAL & ANIMATIONS ── */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s ease; }
.rv.on { opacity: 1; transform: translateY(0); }

@keyframes fadeUp    { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn    { from { opacity:0; } to { opacity:1; } }
@keyframes scrollDrop { 0%{top:-100%} 100%{top:100%} }

/* ── 18. RESPONSIVE ── */
@media (max-width: 1024px) {
  :root { --pad: 36px; }
  .collection-projects-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .svc-grid   { grid-template-columns: repeat(3,1fr); }
  .ftop       { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 768px) {
  :root { --pad: 20px; --gap: 60px; }
  nav          { padding: 0 20px; }
  .nav-links   { display: none; }
  .hero-inner  { padding: 100px 20px 60px; }
  .stats-bar   { padding: 20px; }
  .stat-div    { display: none; }
  .collection-hero { aspect-ratio: 4/5; min-height: 280px; }
  .collection-hero-content { padding: 26px 22px; }
  .collection-desc { -webkit-line-clamp: 3; }
  .collection-panel-inner { padding: 32px 20px 36px; }
  .collection-projects-grid  { grid-template-columns: 1fr; gap: 20px; }
  .works-header { justify-content: flex-start; }
  .svc-grid    { grid-template-columns: 1fr 1fr; }
  .about-g     { grid-template-columns: 4px 1fr; }
  .about-right { display: none; }
  .cg          { grid-template-columns: 1fr; gap: 40px; }
  .frow        { grid-template-columns: 1fr; }
  .cbanner     { flex-direction: column; text-align: center; padding: 24px 20px; }
  footer       { padding: 40px 20px 20px; }
  .ftop        { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 480px) {
  .svc-grid  { grid-template-columns: 1fr; }
  .ftop      { grid-template-columns: 1fr; }
  .hero-scroll { display: none; }
}

/* ================================================
   PART 2 — AGENCY TRANSFORMATION
   Added sections: Trust Bar, Client Logos, Industries,
   Case Studies, Process, Awards, Testimonials,
   Why BQH, FAQ, Insights, Final CTA
   All new classes use the SAME design tokens defined
   above (--bg, --surface, --text, --text-sec, --accent).
   ================================================
   TABLE OF CONTENTS — PART 2
   19. Trust Bar
   20. Client Logos
   21. Industries Grid
   22. Case Studies
   23. Process Steps
   24. Awards
   25. Testimonials
   26. Why BQH
   27. FAQ Accordion
   28. Insights / Blog Preview
   29. Final CTA
   30. Breadcrumb
   31. Responsive — Part 2
   ================================================ */

/* ── 19. TRUST BAR ── */
.trust-bar {
  background: var(--bg);
  border-top: 1px solid rgba(242,242,242,.08);
  border-bottom: 1px solid rgba(242,242,242,.08);
  padding: 22px var(--pad);
}
.trust-row {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.trust-icon {
  font-size: 16px;
  color: var(--accent);
  flex-shrink: 0;
}
.trust-text {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(242,242,242,.75);
  white-space: nowrap;
}
.trust-text strong {
  color: var(--text);
  font-weight: 700;
}
.trust-sep {
  width: 1px;
  height: 16px;
  background: rgba(242,242,242,.15);
  flex-shrink: 0;
}

/* ── 20. CLIENT LOGOS ── */
#client-logos {
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  padding: 56px 0;
}
.cl-label {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-sec);
  margin-bottom: 36px;
}
.cl-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--rule);
  max-width: var(--max-w);
  margin: 0 auto;
}
.cl-item {
  background: var(--surface);
  padding: 32px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 110px;
}
.cl-name {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
}

/* ── 21. INDUSTRIES GRID ── */
#industries { background: var(--bg); border-top: 1px solid var(--rule); }
.ind-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--rule);
}
.ind-card {
  background: var(--surface);
  padding: 28px 26px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: background .2s ease;
}
.ind-card:hover { background: #1f1f1f; }
.ind-icon {
  font-size: 24px;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border-radius: 50%;
}
.ind-text { font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--text); }

/* ── 22. CASE STUDIES ── */
#case-studies { background: var(--bg); }
.cs-list { display: flex; flex-direction: column; gap: 2px; background: var(--rule); }

.cs-card {
  background: var(--surface);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  overflow: hidden;
}
.cs-card:nth-child(even) { direction: rtl; }
.cs-card:nth-child(even) > * { direction: ltr; }

.cs-img-wrap {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  aspect-ratio: 4/3;
}
.cs-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform .5s ease;
}
.cs-card:hover .cs-img-wrap img { transform: scale(1.04); }

.cs-body { padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; }
.cs-client {
  font-size: 9px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 14px; display: block;
}
.cs-title {
  font-family: var(--display); font-size: clamp(22px,2.6vw,30px);
  font-weight: 700; line-height: 1.2; color: var(--text); margin-bottom: 16px;
}
.cs-summary { font-size: 14px; color: var(--text-sec); line-height: 1.75; margin-bottom: 24px; }

.cs-meta-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px 24px; margin-bottom: 28px;
  padding-top: 20px; border-top: 1px solid var(--rule);
}
.cs-meta-item { }
.cs-meta-label {
  font-size: 9px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-sec); display: block; margin-bottom: 5px;
}
.cs-meta-value { font-size: 13px; color: var(--text); font-weight: 600; line-height: 1.5; }

.cs-link {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text);
  text-decoration: none; border-bottom: 1px solid var(--text);
  padding-bottom: 3px; align-self: flex-start;
  transition: color .2s ease, border-color .2s ease;
}
.cs-link:hover { color: var(--accent); border-color: var(--accent); }

/* ── 23. PROCESS STEPS ── */
#process { background: var(--bg); color: var(--text-sec); border-top: 1px solid var(--rule); }
.proc-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 2px; background: var(--rule);
}
.proc-card {
  background: var(--surface); padding: 36px 24px;
  position: relative;
}
.proc-num {
  font-family: var(--display); font-size: 40px; font-weight: 900;
  color: rgba(0,168,107,.35); line-height: 1; margin-bottom: 18px;
}
.proc-title {
  font-family: var(--display); font-size: 16px; font-weight: 700;
  color: var(--text); margin-bottom: 10px; line-height: 1.3;
}
.proc-desc { font-size: 12px; color: rgba(242,242,242,.55); line-height: 1.7; }

/* ── 24. AWARDS ── */
#awards { background: var(--bg); border-top: 1px solid var(--rule); }
.awards-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px; background: var(--rule);
}
.award-card {
  background: var(--surface); padding: 36px 28px; text-align: center;
}
.award-icon { font-size: 32px; margin-bottom: 18px; display: block; }
.award-title {
  font-family: var(--display); font-size: 17px; font-weight: 700;
  color: var(--text); margin-bottom: 8px; line-height: 1.3;
}
.award-desc { font-size: 12px; color: var(--text-sec); line-height: 1.65; }

/* ── 25. TESTIMONIALS ── */
#testimonials { background: var(--bg); }
.test-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 2px; background: var(--rule);
}
.test-card { background: var(--surface); padding: 40px 36px; }
.test-quote-mark {
  font-family: var(--display); font-size: 56px; font-weight: 900;
  color: var(--accent); line-height: 1; margin-bottom: 8px; display: block;
}
.test-quote {
  font-family: var(--display); font-size: 18px; font-style: italic;
  font-weight: 700; line-height: 1.5; color: var(--text); margin-bottom: 28px;
}
.test-person { display: flex; align-items: center; gap: 14px; }
.test-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 16px; font-weight: 700;
  flex-shrink: 0;
}
.test-name { font-size: 13px; font-weight: 700; color: var(--text); }
.test-role { font-size: 12px; color: var(--text-sec); margin-top: 2px; }

/* ── 26. WHY BQH ── */
#why-bqh { background: var(--bg); color: var(--text-sec); border-top: 1px solid var(--rule); }
.why-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 2px; background: var(--rule);
}
.why-card { background: var(--surface); padding: 32px 26px; }
.why-icon { font-size: 26px; margin-bottom: 16px; display: block; }
.why-title {
  font-family: var(--display); font-size: 16px; font-weight: 700;
  color: var(--text); margin-bottom: 10px; line-height: 1.3;
}
.why-desc { font-size: 12px; color: rgba(242,242,242,.55); line-height: 1.7; }

/* ── 27. FAQ ACCORDION ── */
#faq { background: var(--bg); border-top: 1px solid var(--rule); }
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-q {
  width: 100%; text-align: left;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 24px 4px;
  background: none; border: none; cursor: pointer;
  font-family: var(--display); font-size: 17px; font-weight: 700;
  color: var(--text); transition: color .2s ease;
}
.faq-q:hover { color: var(--accent); }
.faq-icon {
  font-size: 20px; color: var(--accent); flex-shrink: 0;
  transition: transform .3s ease; line-height: 1;
}
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height .35s ease, padding .35s ease;
  padding: 0 4px;
}
.faq-item.open .faq-a { max-height: 300px; padding: 0 4px 24px; }
.faq-a p { font-size: 14px; color: var(--text-sec); line-height: 1.8; max-width: 680px; }

/* ── 28. INSIGHTS / BLOG PREVIEW ── */
#insights { background: var(--bg); }
.insights-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px; background: var(--rule);
}
.insight-card { background: var(--surface); overflow: hidden; }
.insight-tag {
  display: inline-block; font-size: 9px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  padding: 22px 22px 0;
}
.insight-title {
  font-family: var(--display); font-size: 17px; font-weight: 700;
  color: var(--text); line-height: 1.4; padding: 10px 22px 0; margin-bottom: 12px;
}
.insight-desc {
  font-size: 13px; color: var(--text-sec); line-height: 1.7;
  padding: 0 22px; margin-bottom: 20px;
}
.insight-link {
  display: block; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text);
  text-decoration: none; padding: 0 22px 22px;
  border-top: 1px solid var(--rule); padding-top: 14px;
  transition: color .2s ease;
}
.insight-link:hover { color: var(--accent); }

/* ── 29. FINAL CTA ── */
#final-cta {
  background: var(--accent); color: #0B0B0B;
  text-align: center; padding: 88px var(--pad);
  position: relative; overflow: hidden;
}
#final-cta::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.1) 0%, transparent 60%);
}
.fcta-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.fcta-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(11,11,11,.7); margin-bottom: 20px; display: block;
}
.fcta-title {
  font-family: var(--display); font-size: clamp(28px,4vw,48px);
  font-weight: 700; line-height: 1.15; color: #0B0B0B; margin-bottom: 24px;
}
.fcta-title em { font-style: italic; color: var(--surface); }
.fcta-sub { font-size: 16px; color: rgba(11,11,11,.8); line-height: 1.7; margin-bottom: 36px; }
.fcta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.btn-white {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); background: #0B0B0B;
  padding: 14px 32px; text-decoration: none; transition: background .2s ease;
}
.btn-white:hover { background: var(--surface); }
.btn-outline-white {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #0B0B0B; background: transparent;
  border: 1px solid rgba(11,11,11,.4);
  padding: 14px 32px; text-decoration: none;
  transition: border-color .2s ease, background .2s ease;
}
.btn-outline-white:hover { border-color: #0B0B0B; background: rgba(11,11,11,.08); }

/* ── 30. BREADCRUMB ── */
.breadcrumb {
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  padding: 14px var(--pad);
}
.breadcrumb-row {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--text-sec);
}
.breadcrumb-row a { color: var(--text-sec); text-decoration: none; }
.breadcrumb-row a:hover { color: var(--accent); }
.breadcrumb-row span.sep { color: var(--text-sec); }
.breadcrumb-row span.current { color: var(--text); font-weight: 600; }

/* ── 31. RESPONSIVE — PART 2 ── */
@media (max-width: 1024px) {
  .trust-row { justify-content: center; }
  .cl-grid   { grid-template-columns: repeat(2, 1fr); }
  .ind-grid  { grid-template-columns: repeat(2, 1fr); }
  .proc-grid { grid-template-columns: repeat(3, 1fr); }
  .awards-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid  { grid-template-columns: repeat(2, 1fr); }
  .insights-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-card   { grid-template-columns: 1fr; }
  .cs-card:nth-child(even) { direction: ltr; }
}
@media (max-width: 768px) {
  .trust-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .trust-sep { display: none; }
  .cl-grid   { grid-template-columns: 1fr 1fr; }
  .ind-grid  { grid-template-columns: 1fr; }
  .proc-grid { grid-template-columns: 1fr 1fr; }
  .awards-grid { grid-template-columns: 1fr; }
  .why-grid  { grid-template-columns: 1fr; }
  .insights-grid { grid-template-columns: 1fr; }
  .test-grid { grid-template-columns: 1fr; }
  .cs-body   { padding: 32px 24px; }
  .cs-meta-grid { grid-template-columns: 1fr; }
  .fcta-btns { flex-direction: column; align-items: stretch; }
  #final-cta { padding: 64px 24px; }
}
/* ── BACK TO TOP ───────────────────────────── */

#back-to-top {
  position: fixed; right: 28px;  bottom: 28px;  width: 52px;  height: 52px;
  display: flex;  align-items: center;  justify-content: center;

  border: none; border-radius: 50%; background: var(--accent);  color: #0B0B0B;  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);  opacity: 0;  visibility: hidden;  transform: translateY(12px);

  transition:
    opacity .25s ease, transform .25s ease,    visibility .25s ease,    background .25s ease;  z-index: 9999;
}

#back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#back-to-top:hover {
  background: var(--accent-hover);
}

#back-to-top svg {
  width: 18px;
  height: 18px;
}