/* Pitch site, Operating Bureau brand.
   Warm cream ground, black type, one yellow accent. No top bar: the headline
   is the first thing on the page, nothing sits above it competing. */

.backlink{display:inline-block;margin:22px 0 0 max(16px,var(--gutter));
  font-family:var(--font-label);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;opacity:.5;text-decoration:none}
.backlink:hover{opacity:.85}

/* ---- hero wordmark: a quiet identity mark, not a bar. No background, no
   border, no nav beside it, no button. If it ever grows any of those it has
   become the bar this page deliberately doesn't have, see build/design.md ---- */
.hero__mark{display:block;font-family:var(--font-label);font-size:.75rem;
  letter-spacing:.16em;text-transform:uppercase;opacity:.6;margin:0 0 clamp(20px,3vw,32px)}

/* ---- hero: headline first, video staged, their world scattered round it ---- */
.hero{padding-block:clamp(44px,6vw,84px) clamp(36px,5vw,68px);position:relative;overflow:hidden}
.hero__head{max-width:20ch;margin:0 auto;padding-bottom:.12em}
.hero__sub{margin-top:1.6rem;max-width:50ch;margin-inline:auto;font-size:1.0625rem;opacity:.78}

/* stage: the video, with their real photographs floating around it */
.hero__stage{position:relative;margin:clamp(30px,4.5vw,54px) auto 0;max-width:1120px}
.hero__video{position:relative;z-index:2;margin-inline:auto;max-width:780px;
  border-radius:var(--r-lg);overflow:hidden;background:#0d0c0a;aspect-ratio:16/9;
  box-shadow:0 30px 80px rgba(40,30,10,.20),0 2px 0 rgba(0,0,0,.04)}
.hero__video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.scatter{position:absolute;inset:0;z-index:1;pointer-events:none}
/* Entrance drifts each photograph in from outside its resting spot (--dx/--dy,
   set per item in initHeroStage() as a vector away from the video's centre)
   rather than fading up in place: it reads as photographs settling into a
   composition instead of a row of thumbnails switching on, and the slight
   overshoot in the easing curve (past 1, back to 1) is what keeps the settle
   from looking mechanical. prefers-reduced-motion still wins outright, see
   base.css's global transition:none override. */
.scatter__item{position:absolute;width:var(--w,150px);
  border-radius:var(--rad,14px);overflow:hidden;background:var(--ob-mist);
  box-shadow:0 14px 34px rgba(40,30,10,.18);
  transform:translate(var(--dx,0),var(--dy,0)) rotate(calc(var(--r,0deg) * 2.4)) scale(.7);
  opacity:0}
.scatter__item img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:var(--ar,4/5)}
.scatter__item--round{border-radius:50%}
.scatter__item--round img{aspect-ratio:1/1}
.js .scatter__item{transition:opacity 640ms var(--ease) var(--d,0ms),
  transform 900ms cubic-bezier(.24,1.16,.32,1) var(--d,0ms)}
.is-lit .scatter__item{opacity:1;transform:translate(0,0) rotate(var(--r,0deg)) scale(1)}
/* A slow, barely-there float once landed keeps the composition from going
   inert: a few seconds of drift per item, offset so they never move in sync. */
.is-lit .scatter__item{animation:scatter-float var(--float-dur,7s) ease-in-out var(--d,0ms) infinite}
@keyframes scatter-float{
  0%,100%{translate:0 0}
  50%{translate:0 -7px}
}

/* below the video */
.hero__cta{margin-top:clamp(24px,3.5vw,38px);display:flex;gap:1rem;flex-wrap:wrap;
  align-items:center;justify-content:center}
.hero__meta{font-family:var(--font-label);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;opacity:.55;width:100%}

/* mobile: the scatter would collide with everything, so it becomes a row of
   thumbs under the video instead of vanishing. The research still shows. */
.hero__strip{display:none;gap:10px;justify-content:center;flex-wrap:wrap;
  margin-top:22px}
.hero__strip img{width:62px;height:78px;object-fit:cover;border-radius:10px;
  box-shadow:0 6px 16px rgba(40,30,10,.16)}

/* Too little gutter left of the video for a photograph to read: main.js's
   placeScatter() measures the real gap and sets this, rather than relying on a
   width breakpoint that cannot know how wide the video actually rendered. The
   thumb strip takes over. */
.hero.is-cramped .scatter{display:none}
.hero.is-cramped .hero__strip{display:flex}

@media(max-width:900px){
  .scatter{display:none}
  .hero__strip{display:flex}
}

/* ---- deliverable groups ---- */
.group{padding-block:clamp(48px,6vw,88px)}
.group + .group{border-top:1px solid var(--ob-line)}
.group__label{font-family:var(--font-label);font-size:.6875rem;letter-spacing:.18em;
  text-transform:uppercase;opacity:.55;margin-bottom:.75rem}
.group__title{margin-bottom:.6rem}
.group__sub{max-width:48ch;margin:0 auto clamp(28px,3.5vw,44px);opacity:.75;font-size:.9875rem}

/* browser-chrome preview of a real page */
.frames{display:grid;gap:18px;grid-template-columns:1fr;margin-bottom:clamp(24px,3vw,36px)}
@media(min-width:760px){.frames--3{grid-template-columns:repeat(3,1fr)}
  .frames--2{grid-template-columns:repeat(2,1fr)}}
/* a lone frame is a feature shot, not a full-bleed band */
.frames--1{max-width:760px;margin-inline:auto}
.frames--1 .frame__shot{aspect-ratio:16/10}
.cards--1{max-width:420px;margin-inline:auto}
.frame{border-radius:var(--r);overflow:hidden;background:var(--ob-paper);
  box-shadow:0 1px 0 rgba(0,0,0,.08),0 14px 34px rgba(0,0,0,.10);text-align:left}
a.frame{display:block;text-decoration:none;color:inherit;cursor:pointer;
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
a.frame:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(0,0,0,.08),0 20px 44px rgba(0,0,0,.13)}
.frame__bar{display:flex;align-items:center;gap:8px;padding:9px 12px;
  background:var(--ob-mist);border-bottom:1px solid var(--ob-line)}
.frame__dots{display:flex;gap:5px;flex:0 0 auto}
.frame__dots i{width:9px;height:9px;border-radius:50%;background:rgba(0,0,0,.16);display:block}
.frame__url{flex:1;background:var(--ob-paper);border-radius:var(--r-pill);
  padding:4px 10px;font-size:.6875rem;color:rgba(0,0,0,.5);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frame__shot{aspect-ratio:4/3;overflow:hidden;background:var(--ob-mist);position:relative}
.frame__shot img{width:100%;height:100%;object-fit:cover;object-position:top center}

/* the numbered cards under each group */
.cards{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:760px){.cards--3{grid-template-columns:repeat(3,1fr)}
  .cards--2{grid-template-columns:repeat(2,1fr)}}
.card{display:block;text-decoration:none;background:var(--ob-paper);
  border-radius:var(--r);padding:22px 20px;text-align:center;
  box-shadow:0 1px 0 rgba(0,0,0,.06),0 6px 18px rgba(0,0,0,.06);
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(0,0,0,.06),0 16px 34px rgba(0,0,0,.11)}
.card__n{font-family:var(--font-label);font-size:.625rem;letter-spacing:.18em;
  text-transform:uppercase;opacity:.5;display:block;margin-bottom:.6rem}
.card__title{font-family:var(--font-display);font-size:1.1875rem;color:var(--ob-black);
  margin:0 0 .4rem}
.card__desc{font-size:.9375rem;margin:0;opacity:.78;max-width:34ch;margin-inline:auto}
.card__open{margin-top:.9rem;display:inline-block;font-family:var(--font-label);
  font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:2px solid var(--ob-accent);padding-bottom:2px}

/* ---- .dcard: frame and card fused into one clickable unit, only where a
   group's frame count matches its card count 1:1 (today, just "The funnel").
   Everywhere else the frames-row-then-cards-grid layout stays as it is;
   click behaviour is lightbox-uniform across both, see build/design.md ---- */
.dcards{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:760px){.dcards--3{grid-template-columns:repeat(3,1fr)}
  .dcards--2{grid-template-columns:repeat(2,1fr)}}
.dcard{display:block;text-decoration:none;text-align:left;background:var(--ob-paper);
  border-radius:var(--r);overflow:hidden;
  box-shadow:0 1px 0 rgba(0,0,0,.08),0 14px 34px rgba(0,0,0,.10);
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.dcard:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(0,0,0,.08),0 20px 44px rgba(0,0,0,.13)}
.dcard .frame__bar{margin:0}
.dcard .frame__shot{aspect-ratio:16/10}
.dcard__body{padding:18px 20px 22px}
.dcard__n{font-family:var(--font-label);font-size:.625rem;letter-spacing:.18em;
  text-transform:uppercase;opacity:.5;display:block;margin-bottom:.5rem}
.dcard__title{font-family:var(--font-display);font-size:1.1875rem;color:var(--ob-black);margin:0 0 .35rem}
.dcard__desc{font-size:.9375rem;margin:0;opacity:.78}

/* ---- case studies: real ones, or the authority line, never fabricated ---- */
.cases{display:grid;gap:20px;grid-template-columns:1fr;margin-top:clamp(24px,3vw,36px)}
@media(min-width:640px){.cases{grid-template-columns:repeat(2,1fr)}}
.case{text-align:left}
.case .vid,.case .swap{margin-bottom:0}
/* Two tiers. The lead carries the figure at display size, the sub carries the
   supporting record. One flat grey paragraph buried the best line on the page. */
.authority{max-width:56ch;margin-inline:auto;text-align:center}
.authority__lead{font-family:var(--font-display);
  font-size:clamp(1.375rem,1.05rem + 1.35vw,1.9375rem);line-height:1.22;
  letter-spacing:-.01em;color:var(--ob-black);margin:0 0 .85rem}
.authority__sub{font-size:1.0625rem;line-height:1.55;opacity:.72;margin:0;
  max-width:48ch;margin-inline:auto}

/* Scoped to #case-studies only (index.html's client-results grid, and
   booked.html's reused copy of the same component): the caption is a bold,
   centered heading ABOVE the video rather than base.css's default small,
   left-aligned line below it. main.js's caseHtml() already renders the
   figcaption before the media for this reason. Booked.html's separate
   "Three quick answers" FAQ figures share the .case/.vid__cap classes but
   sit outside #case-studies, so they keep the base.css default untouched. */
#case-studies .vid__cap{order:-1;margin-top:0;margin-bottom:.6rem;text-align:center;
  font-weight:700;font-size:1.0625rem;opacity:1;color:var(--ob-black)}
#case-studies .case{display:flex;flex-direction:column;text-align:center}

/* ---- preview lightbox: every deliverable opens in place, never a
   navigation away from the pitch site, see build/design.md ---- */
.lightbox{position:fixed;inset:0;z-index:80;display:flex;align-items:center;
  justify-content:center;padding:clamp(14px,4vw,48px);
  background:rgba(20,16,8,.72);backdrop-filter:blur(2px)}
.lightbox[hidden]{display:none}
.lightbox__panel{position:relative;width:100%;max-width:1100px;height:min(84vh,900px);
  background:var(--ob-paper);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.4);display:flex;flex-direction:column}
.lightbox__bar{display:flex;align-items:center;gap:12px;padding:12px 16px;
  background:var(--ob-mist);border-bottom:1px solid var(--ob-line);flex:0 0 auto}
.lightbox__url{flex:1;font-family:var(--font-label);font-size:.6875rem;
  letter-spacing:.04em;opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lightbox__hint{font-family:var(--font-label);font-size:.625rem;letter-spacing:.04em;
  opacity:.45;flex:0 0 auto;white-space:nowrap}
@media(max-width:640px){.lightbox__hint{display:none}}
.lightbox__open{font-family:var(--font-label);font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;color:var(--ob-black);opacity:.7;flex:0 0 auto}
.lightbox__open:hover{opacity:1}
.lightbox__close{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:0;
  background:rgba(0,0,0,.08);cursor:pointer;font-size:1rem;line-height:1;color:var(--ob-ink)}
.lightbox__close:hover{background:rgba(0,0,0,.16)}
.lightbox__frame{flex:1;border:0;width:100%;background:#fff}
.lightbox__nav{position:absolute;top:50%;translate:0 -50%;z-index:2;width:38px;height:38px;
  border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.92);
  box-shadow:0 4px 16px rgba(0,0,0,.24);display:flex;align-items:center;justify-content:center}
.lightbox__nav--prev{left:clamp(-8px,-2vw,10px)}
.lightbox__nav--next{right:clamp(-8px,-2vw,10px)}
.lightbox__nav svg{width:18px;height:18px;stroke:#262626;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
@media(max-width:640px){.lightbox__nav{display:none}}

/* ---- calendar ---- */
.cal{border-radius:var(--r-lg);background:var(--ob-paper);min-height:718px;
  margin:clamp(24px,3vw,36px) auto 0;overflow:hidden;max-width:960px;
  box-shadow:0 1px 0 rgba(0,0,0,.06),0 18px 50px rgba(0,0,0,.10)}

/* ---- floating book-a-call pill ---- */
.sticky-cta{position:fixed;right:clamp(14px,2.4vw,26px);bottom:clamp(14px,2.4vw,26px);
  z-index:50;opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.sticky-cta.is-on{opacity:1;transform:none;pointer-events:auto}
.sticky-cta .btn{display:inline-flex;align-items:center;gap:.5rem;
  box-shadow:0 10px 30px rgba(40,30,10,.24)}
.sticky-cta .btn::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--ob-black);opacity:.55;flex:0 0 auto}
@media(prefers-reduced-motion:reduce){.sticky-cta{transition:none}}

/* Hero still. No walkthrough video is recorded yet, so the stage shows the
   real registration page and opens it in the preview lightbox. index.html's
   inline script swaps this for the video iframe once heroEmbed is set. */
.hero__video .hero__shot{position:absolute;inset:0;display:block;border:0;border-radius:0;
  margin:0;padding:0;background:#fff;overflow:hidden;box-shadow:none}
.hero__video .hero__shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.hero__shot-tag{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  background:var(--ob-accent);color:#000;font-family:var(--font-label);font-size:.6875rem;
  letter-spacing:.14em;text-transform:uppercase;padding:.7em 1.2em;border-radius:999px;
  white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.hero__video .hero__shot:hover{transform:none;box-shadow:none}
.case.faq{background:var(--ob-paper);border:1px solid rgba(0,0,0,.08);border-radius:var(--r);padding:20px 22px;margin:0}
.case.faq p{margin:.5rem 0 0;font-size:.9375rem;line-height:1.55;color:var(--ob-ink)}
.hammer a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.hero__head{max-width:30ch}