/* ============================================================
   ZURIEL AFRIQUE — home page styles
   ============================================================ */

/* shared hero */
.hero { position: relative; }
.on-img { color: #f6f1e7 !important; }

/* ---------- Trust bar ---------- */
.trustbar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.trustbar-inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-item { display: flex; align-items: center; gap: 14px; padding: 22px 10px; color: var(--ink); }
.trust-item:not(:last-child) { border-right: 1px solid var(--line); }
.trust-item svg { color: var(--accent); flex: none; }
.trust-t { display: block; font-size: 13.5px; font-weight: 500; letter-spacing: 0.02em; }
.trust-s { display: block; font-size: 12px; color: var(--ink-soft); }

/* ---------- Category strip ---------- */
.cat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cat-card { display: block; }
.cat-card-btn { display: block; width: 100%; text-align: left; position: relative; border-radius: var(--radius); overflow: hidden; }
.cat-card-btn .ph { transition: transform 1.1s var(--ease); }
.cat-card-btn:hover .ph { transform: scale(1.05); }
.cat-card-btn::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top,
    rgba(5,5,5,.72)  0%,
    rgba(5,5,5,.30) 40%,
    rgba(5,5,5,.04) 70%);
  border-radius: inherit;
  pointer-events: none;
}
.cat-card-cap { position: absolute; left: 16px; bottom: 16px; z-index: 3; display: flex; flex-direction: column; gap: 4px; color: #f6f1e7; }
.cat-card-cap .mono { font-size: 10px; letter-spacing: 0.2em; color: var(--accent-bright); }
.cat-card-cap .serif { font-size: 22px; }

/* ---------- Story ---------- */
.story-sec { background: var(--surface); }
.story-grid { display: grid; grid-template-columns: 0.85fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.story-media .ph { border-radius: var(--radius); overflow: hidden; }
.story-h { font-size: clamp(38px, 5vw, 68px); font-weight: 500; line-height: 1.02; margin: 18px 0 22px; }

/* ---------- Custom order band ---------- */
.bespoke-band { background: var(--c-deep); color: var(--c-paper); padding: clamp(60px, 8vw, 110px) 0; }
.bespoke-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.bespoke-media .ph { border-radius: var(--radius); overflow: hidden; }
.bespoke-body .eyebrow { color: var(--accent); }
.bespoke-body .lede { color: rgba(244,239,228,0.74); }
.bespoke-h { font-size: clamp(34px, 4.4vw, 60px); font-weight: 500; line-height: 1.04; margin: 18px 0 22px; color: var(--c-paper); max-width: 18ch; }
.bespoke-band .btn { --b-bg: var(--c-paper); --b-ink: var(--c-deep); }
.bespoke-band .btn:hover { background: var(--c-accent-2); border-color: var(--c-accent-2); color: var(--c-deep); }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.faq-head { position: sticky; top: 120px; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 0; text-align: left; font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 27px); color: var(--ink); transition: color .3s; }
.faq-q:hover { color: var(--accent); }
.faq-q svg { flex: none; color: var(--accent); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .5s var(--ease); }
.faq-item.open .faq-a { max-height: 240px; }
.faq-a p { padding-bottom: 26px; color: var(--ink-soft); max-width: 60ch; font-size: 15px; }

/* ════════════════════════════════════════════════════════════
   HERO — four full-bleed vertical video panels
   ════════════════════════════════════════════════════════════ */
.hcol-root {
  position: relative;
  padding: 0;
  background: var(--c-deep, #14110d);
}
.hcol-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  height: clamp(600px, calc(100vh - 84px), 900px);
}
.hcol-panel {
  position: relative; overflow: hidden;
  background: var(--c-deep, #14110d);
  min-height: 0; height: 100%;
}

/* Scrim: dark on panel 1, feathering out across panel 2 */
.hcol-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(14,11,8,.86) 0%,
    rgba(14,11,8,.78) 18%,
    rgba(14,11,8,.48) 34%,
    rgba(14,11,8,.10) 48%,
    rgba(14,11,8,0)   58%);
}

/* Headline + CTAs over panel 1, running into panel 2 */
.hcol-caption {
  position: absolute; z-index: 3;
  left: var(--gut); bottom: clamp(48px, 8vh, 88px);
  max-width: min(46%, 620px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 30px;
}
.hcol-h {
  font-size: clamp(46px, 6.4vw, 96px); line-height: 0.94;
  color: #fbf8f0; margin: 0; letter-spacing: -0.02em;
}
.hcol-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

.hcol-credit {
  position: absolute; z-index: 3; right: var(--gut); bottom: clamp(28px, 4vh, 44px);
  font-family: var(--font-mono, monospace);
  font-size: 11px; letter-spacing: 0.14em;
  color: rgba(251,248,240,.42);
}

/* ── Responsive ── */
@media (max-width: 1000px) {
  .hcol-grid { grid-template-columns: repeat(2, 1fr); height: clamp(560px, 80vh, 780px); }
  .hcol-panel[data-panel="3"],
  .hcol-panel[data-panel="4"] { display: none; }
  .hcol-scrim {
    background: linear-gradient(180deg, rgba(14,11,8,.30) 0%, rgba(14,11,8,.55) 55%, rgba(14,11,8,.88) 100%);
  }
  .hcol-caption { max-width: none; right: var(--gut); }
  .hcol-credit { display: none; }
}
@media (max-width: 620px) {
  .hcol-grid { grid-template-columns: 1fr; height: clamp(520px, 78vh, 700px); }
  .hcol-panel[data-panel="2"] { display: none; }
  .hcol-caption { left: 20px; right: 20px; bottom: 40px; gap: 24px; }
}

/* ---------- Responsive home ---------- */
@media (max-width: 1080px) {
  .cat-strip { grid-template-columns: repeat(2, 1fr); }
  .story-grid, .faq-grid, .bespoke-grid { grid-template-columns: 1fr; }
  .faq-head { position: static; }
  .trustbar-inner { grid-template-columns: repeat(2, 1fr); }
  .trust-item:nth-child(2) { border-right: none; }
}
@media (max-width: 600px) {
  .cat-strip { grid-template-columns: 1fr; }
}

/* dark band: eyebrows/kickers use the light gold for AA on espresso ink */
.bespoke-band .eyebrow,
.bespoke-band .kicker-line,
.bespoke-band .eyebrow.kicker-line { color: var(--c-accent-2); }