/* woa-svc-brand.css — Brand & Hospitality Experiences
   Service 02 · Bar Takeovers + Consulting
   Loaded after woa-styles.css + woa-service.css. */

/* ════════════════════════════════════════════════════════════
   DISTINCT HERO — the diptych. Two twin photo panels (Takeover /
   Consulting) split by a centered title plaque. No other service
   page uses this; it signals "two services, one page" at a glance.
   ════════════════════════════════════════════════════════════ */
.bx-hero{
  position:relative;
  border-bottom:1px solid var(--line);
  background:var(--bg);
  overflow:hidden;
}
.bx-hero-split{
  display:flex;
  min-height:94vh;
}
@media (max-width:860px){
  .bx-hero-split{flex-direction:column;min-height:0}
}

/* ── twin panels ──────────────────────────────────────────── */
.bx-panel{
  position:relative;
  flex:1 1 50%;
  min-width:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0;
  overflow:hidden;
  transition:flex-grow .7s cubic-bezier(.6,.05,.2,1);
  isolation:isolate;
}
.bx-panel + .bx-panel{border-left:1px solid var(--line)}
@media (max-width:860px){
  .bx-panel{flex:none;min-height:64vh}
  .bx-panel + .bx-panel{border-left:none;border-top:1px solid var(--line)}
}

/* hover focus — the hovered panel takes more room (desktop only) */
@media (hover:hover) and (min-width:861px){
  .bx-hero-split:hover .bx-panel{flex-grow:0.82}
  .bx-hero-split .bx-panel:hover{flex-grow:1.4}
}

.bx-panel-bg{position:absolute;inset:0;z-index:0}
.bx-panel-bg img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(0.28) contrast(1.05) brightness(0.82);
  transform:scale(1.04);
  transition:transform 1.6s cubic-bezier(.2,.6,.2,1), filter .7s ease;
}
.bx-panel:hover .bx-panel-bg img{filter:grayscale(0) contrast(1.05) brightness(0.92);transform:scale(1.09)}
.bx-panel-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(11,9,7,0.30) 0%,
    rgba(11,9,7,0.10) 34%,
    rgba(11,9,7,0.62) 74%,
    rgba(11,9,7,0.96) 100%);
}
.bx-panel:nth-child(1) .bx-panel-bg::after{
  background:linear-gradient(180deg, rgba(11,9,7,0.34) 0%, rgba(11,9,7,0.12) 34%, rgba(139,36,33,0.30) 78%, rgba(11,9,7,0.96) 100%);
}

.bx-panel-body{
  position:relative;z-index:1;
  padding:48px clamp(28px,4vw,64px) clamp(40px,5vw,64px);
  display:flex;flex-direction:column;gap:14px;
  text-decoration:none;color:var(--fg);
}
@media (max-width:860px){.bx-panel-body{padding:40px 28px 36px}}

.bx-panel-num{
  font-family:var(--mono);font-size:12px;letter-spacing:0.14em;color:var(--crimson-text);
}
.bx-panel-kicker{
  font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:0.30em;text-transform:uppercase;
  color:var(--fg-mute);
}
.bx-panel-title{
  font-family:var(--display);font-weight:300;letter-spacing:-0.015em;line-height:0.96;
  font-size:clamp(40px,5.2vw,80px);
  color:var(--fg);margin:2px 0 6px;
  text-wrap:balance;
}
.bx-panel-title .it{font-style:italic;color:var(--crimson-text);font-weight:400}
.bx-panel-line{
  color:var(--fg-dim);font-size:15px;line-height:1.65;max-width:42ch;margin:0;
}
.bx-panel-go{
  margin-top:14px;
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--fg);
}
.bx-panel-go .ar{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border:1px solid var(--line-strong);border-radius:50%;
  font-family:var(--mono);transition:all .3s ease;
}
.bx-panel-body:hover .bx-panel-go .ar{background:var(--crimson);border-color:var(--crimson);transform:translateX(4px)}

/* ── centered title plaque over the seam ──────────────────── */
.bx-hero-plaque{
  position:absolute;z-index:3;
  top:clamp(96px,15vh,160px);left:50%;transform:translateX(-50%);
  width:min(560px,calc(100% - 56px));
  background:rgba(11,9,7,0.74);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  border:1px solid var(--line-strong);
  padding:30px clamp(26px,3vw,44px) 34px;
  text-align:center;
  box-shadow:0 30px 70px rgba(0,0,0,0.5);
}
.bx-hero-plaque .top{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin-bottom:18px;
}
.bx-hero-plaque .top .ln{height:1px;width:34px;background:var(--crimson)}
.bx-hero-plaque-title{
  font-family:var(--display);font-weight:300;letter-spacing:-0.02em;line-height:0.97;
  font-size:clamp(34px,4.4vw,58px);color:var(--fg);margin:0;
}
.bx-hero-plaque-title .it{font-style:italic;color:var(--crimson-text);font-weight:400}
.bx-hero-plaque-title .dia{
  display:inline-block;width:10px;height:10px;background:var(--crimson);
  transform:rotate(45deg);margin-left:10px;vertical-align:middle;
}
.bx-hero-plaque-sub{
  margin:16px auto 0;max-width:42ch;
  color:var(--fg-dim);font-size:14px;line-height:1.65;
}
@media (max-width:860px){
  .bx-hero{display:flex;flex-direction:column}
  .bx-hero-plaque{
    order:-1;
    position:static;transform:none;left:auto;top:auto;
    width:auto;border-left:none;border-right:none;border-top:none;
    border-bottom:1px solid var(--line);
    backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg);
    box-shadow:none;padding:104px 24px 36px;text-align:left;
  }
  .bx-hero-plaque .top{justify-content:flex-start}
  .bx-hero-plaque-sub{margin-left:0}
}

/* ════════════════════════════════════════════════════════════
   MANIFESTO BAND — ties the two services together
   ════════════════════════════════════════════════════════════ */
.bx-manifesto{
  padding:clamp(72px,9vw,118px) 0;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  text-align:center;
}
.bx-manifesto .display{
  font-size:clamp(28px,4.2vw,54px);line-height:1.22;letter-spacing:-0.01em;
  max-width:22ch;margin:0 auto;font-weight:300;
}
.bx-manifesto .display .it{font-style:italic;color:var(--crimson-text);font-weight:400}
.bx-manifesto .sig{
  margin-top:30px;font-family:var(--mono);font-size:11px;letter-spacing:0.20em;
  text-transform:uppercase;color:var(--fg-mute);
}

/* ════════════════════════════════════════════════════════════
   CHAPTER LEAD SPREAD — shared by both chapters (copy + photo)
   ════════════════════════════════════════════════════════════ */
.bx-lead{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,64px);
  align-items:center;padding-top:8px;
}
.bx-lead.rev .bx-lead-photo{order:-1}
@media (max-width:900px){
  .bx-lead{grid-template-columns:1fr;gap:32px}
  .bx-lead.rev .bx-lead-photo{order:0}
}
.bx-lead-copy .bx-lede{
  font-family:var(--display);font-size:clamp(22px,2.4vw,30px);font-weight:300;
  line-height:1.32;letter-spacing:-0.005em;color:var(--fg);margin:0 0 22px;max-width:30ch;
}
.bx-lead-copy .bx-lede .it{font-style:italic;color:var(--crimson-text)}
.bx-lead-copy p{color:var(--fg-dim);font-size:15px;line-height:1.74;margin:0 0 16px;max-width:50ch}
.bx-lead-copy p:last-child{margin-bottom:0}
.bx-lead-copy b{color:var(--fg);font-weight:500}

.bx-lead-photo{
  position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--surface-2);
  border:1px solid var(--line);
}
.bx-lead-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.4s ease;
}
.bx-lead-photo:hover img{transform:scale(1.04)}
.bx-lead-photo figcaption{
  position:absolute;left:18px;bottom:16px;z-index:1;
  font-family:var(--mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--fg);background:rgba(11,9,7,0.62);border:1px solid var(--line);
  padding:6px 10px;backdrop-filter:blur(3px);
}
.bx-lead-photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,9,7,0) 55%,rgba(11,9,7,0.7) 100%);
}

/* ── how-it-works points (takeover) — bordered checklist ───── */
.bx-points{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:1px solid var(--line);margin-top:clamp(40px,5vw,64px);
}
@media (max-width:820px){.bx-points{grid-template-columns:1fr}}
.bx-point{
  padding:30px 28px;border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:10px;
}
.bx-point:last-child{border-right:none}
@media (max-width:820px){
  .bx-point{border-right:none;border-bottom:1px solid var(--line)}
  .bx-point:last-child{border-bottom:none}
}
.bx-point .n{font-family:var(--mono);font-size:11px;color:var(--crimson-text);letter-spacing:0.06em}
.bx-point h3{
  font-family:var(--display);font-size:24px;font-weight:300;letter-spacing:-0.005em;margin:0;color:var(--fg);
}
.bx-point p{color:var(--fg-dim);font-size:13.5px;line-height:1.62;margin:0;max-width:34ch}

/* ════════════════════════════════════════════════════════════
   FEATURED TAKEOVER — Style Bender event spread
   layers on top of .svp-feature / .svp-grid.g-asym
   ════════════════════════════════════════════════════════════ */
/* anchor jump targets clear the fixed nav */
#takeover, #consulting{scroll-margin-top:84px}

.bx-feature{background:var(--petrol)}
.bx-feature .svp-feature-stamp{white-space:nowrap}
.bx-feature-grid{margin-bottom:32px}
.bx-feature-grid .ph{min-height:230px;aspect-ratio:auto}
.bx-feature-grid .ph img{transition:transform 1.5s ease;filter:contrast(1.04)}
.bx-feature-grid .ph:hover img{transform:scale(1.05)}
@media (max-width:820px){.bx-feature-grid .ph{min-height:0;aspect-ratio:4/5}}
.bx-feature-meta{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  padding-top:28px;border-top:1px solid var(--line);
}
@media (max-width:720px){.bx-feature-meta{grid-template-columns:repeat(2,1fr)}}
.bx-feature-meta .ix{
  font-family:var(--mono);font-size:10px;color:var(--fg-mute);letter-spacing:0.22em;text-transform:uppercase;margin-bottom:8px;
}
.bx-feature-meta b{font-family:var(--display);font-size:20px;font-weight:300;color:var(--fg);letter-spacing:-0.005em}

/* ════════════════════════════════════════════════════════════
   CONSULTING SCOPE — what we work on (uses .svp-include grid)
   plus the engagement formats trio
   ════════════════════════════════════════════════════════════ */
.bx-formats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  margin-top:clamp(40px,5vw,64px);
}
@media (max-width:820px){.bx-formats{grid-template-columns:1fr}}
.bx-format{
  border:1px solid var(--line);background:var(--surface);
  padding:32px 28px 34px;
  display:flex;flex-direction:column;gap:12px;
  transition:border-color .35s ease, transform .4s ease;
}
.bx-format:hover{border-color:var(--crimson);transform:translateY(-4px)}
.bx-format .tag{
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--amber);
}
.bx-format h3{
  font-family:var(--display);font-size:27px;font-weight:300;letter-spacing:-0.005em;margin:0;color:var(--fg);
}
.bx-format p{color:var(--fg-dim);font-size:14px;line-height:1.65;margin:0}
.bx-format .meta{
  margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
  font-size:11px;letter-spacing:0.06em;color:var(--fg-mute);
}
.bx-format .meta b{color:var(--fg);font-weight:500}

/* chapter divider tag used to separate the two services */
.bx-svc-tag{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.22em;text-transform:uppercase;color:var(--fg-mute);
}
.bx-svc-tag .d{display:inline-block;width:6px;height:6px;background:var(--crimson);transform:rotate(45deg)}

/* ── mobile pass ─────────────────────────────────────────── */
@media (max-width:720px){
  .bx-points .bx-point{padding:24px 22px}
  .bx-point h3{font-size:20px}
  .bx-format{padding:26px 22px 28px}
  .bx-format h3{font-size:22px}
}