/** Shopify CDN: Minification failed

Line 4685:3 Unexpected "="

**/
/*================ Custom CSS ================*/

/* ----------------------------------------------------------------------------
   Red-on-dark token (operator 2026-06-02).
   RULE: the brand red is #d43747 on LIGHT backgrounds, but on BLACK/dark
   backgrounds it fails WCAG contrast and looks muddy. Anywhere a red element
   sits on a dark/ink background, use this brighter red (~4.9:1 on #171717,
   ~5:1 on #0a0a0a) so every red-on-dark spot matches: subscription tier-card
   credit text, the homepage "90-Day Pilot" underline, the LinkedIn
   "recommended" label, etc. Light-background reds keep #d43747 (--bp-svc-red).
   Tune all dark reds from this one knob. */
:root{
  --bp-red-on-dark:#e8505f;
  /* ============================================================================
     CANONICAL BRAND TOKENS — single source of truth (CSS refactor, Phase 1).
     Defined ONCE here; pages + blog consume these instead of re-declaring
     per-page copies. Safe/additive: every bare var(--ink / --ink-2 / --mute /
     --hair / --paper) today lives inside the booth (.bk-hero/.bk-sect) scope,
     which overrides these locally — so adding them changes nothing visually.
     Booth keeps its own deliberately distinct palette. The legacy --bp-<page>-*
     tokens get aliased onto these in the next step.
     ============================================================================ */
  --ink:#0b0b0b;     /* near-black primary text */
  --ink-2:#2a2a2a;   /* secondary text */
  --mute:#666;       /* muted grey */
  --hair:#e0e0e0;    /* hairline / border */
  --paper:#fafafa;   /* off-white surface / section banding */
  --white:#ffffff;   /* pure-white card surface */
}

/* Cart indicator dot - force black fill */
.cart-indicator {
  fill: #000000 !important;
}

/* Book Your Portrait nav button — black pill by default, inverts to
   white-with-black-outline on hover. Desktop + mobile. */
.book-portrait-button .navtext {
  padding: 5px 12px !important;
  border: 1px solid #000 !important;
  border-radius: 30px !important;
  color: #fff !important;
  background-color: #000 !important;
  transition: background 0.2s ease-in-out, color 0.2s ease-in-out !important;
}

/* Suppress the theme's underline slide animation on this button */
.book-portrait-button .navtext::before,
.book-portrait-button .navtext::after {
  display: none !important;
}

/* Hover: white bg, black outline, black text — invert of default */
.no-touch .book-portrait-button .navtext:hover,
.book-portrait-button:hover .navtext {
  padding: 5px 12px !important;
  border: 1px solid #000 !important;
  border-radius: 30px !important;
  color: #000 !important;
  background-color: #fff !important;
}

/* ====== Product Page ====== */

/* Form wrapper max-width.

   This cap + `margin: 0 auto` is what actually centres the
   gallery/variants block on desktop. At 700px the details column
   was wide enough to push the right edge close to the wrapper edge
   and the whole layout read as left-biased; 620px gives the column
   enough breathing room on each side to visually centre.

   If you ever change this, keep in mind it's the primary centring
   mechanism — not the grid-template-columns rule further down. */
@media only screen and (min-width: 768px) {
  .product-single__details .form__wrapper {
    max-width: 620px !important;
    margin: 0 auto !important;
  }
}

/* Variant button size */
.radio__fieldset .radio__label {
  font-size: calc(0.9rem * var(--adjust-button));
}

/* Variant button shadow */
.radio__fieldset .radio__label {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Variant button selected + hover — fill black like V5 */
.radio__fieldset .radio__label:hover,
.radio__fieldset .radio__label:active,
.radio__fieldset .radio__label:focus,
.radio__fieldset .radio__input:checked ~ .radio__label {
  color: var(--bg);
  background-color: var(--text);
  border-color: var(--text);
}

/* Unavailable/sold-out buttons — reduce opacity */
.radio__button.sold-out .radio__label,
.radio__button.unavailable .radio__label {
  opacity: 0.4;
}

/* Variant option + quantity label font size */
.radio__legend__label {
  font-size: calc(1.3rem * var(--adjust-label));
}

/* Quantity — hide +/- buttons, hide browser number spinners */
.selector-wrapper--qty .quantity__btn {
  display: none;
}
.selector-wrapper--qty .quantity__input::-webkit-outer-spin-button,
.selector-wrapper--qty .quantity__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.selector-wrapper--qty .quantity__input {
  -moz-appearance: textfield;
  text-align: center !important;
  padding: 0 !important;
  background-color: var(--bg) !important;
  box-shadow: none !important;
  border-color: var(--border) !important;
  height: 40px !important;
  width: 85px !important;
  min-width: unset !important;
  max-width: 85px !important;
}

/* Cart bar quantity — remove +/- buttons, arrows, center number, match grey boxes */
.cart-bar__quantity .quantity__btn {
  display: none;
}
.cart-bar__quantity .quantity__input::-webkit-outer-spin-button,
.cart-bar__quantity .quantity__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cart-bar__quantity .quantity__input {
  -moz-appearance: textfield;
  text-align: center !important;
  padding: 0 !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
  border: 1px solid #000000 !important;
  border-radius: 999px !important;
  outline: none !important;
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
  height: 44px !important;
  font-family: Poppins, -apple-system, sans-serif !important;
  font-size: calc(0.9rem * var(--adjust-button, 1)) !important;
}

/* Sticky cart-bar — pill height 44px to match the ATC button and
   people-field pill. The theme's `.select-popout__toggle` uses
   var(--form-top) padding which renders ~48px on this theme; force
   44px inside the cart-bar only so other pages keep their defaults. */
.cart-bar .select-popout__toggle {
  height: 44px !important;
  min-height: 44px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* Cart bar — labels at bottom: select first in HTML, label second → column order puts label at bottom */
.cart-bar__select__wrapper {
  display: flex;
  flex-direction: column;
}
.cart-bar__option-label {
  margin-bottom: 0;
  margin-top: 4px;
}

/* Cart bar quantity wrapper — label at bottom (label first in HTML + column-reverse) */
.cart-bar__quantity-wrapper {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}
.cart-bar__quantity-label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-alpha-50);
  margin-top: 4px;
  white-space: nowrap;
}

/* Cart bar — align all items to top so ATC button top is level with selects */
.cart-bar__form {
  align-items: flex-start !important;
}

/* Cart bar — raise ATC button to match height of option boxes (adds space below = same total height as select+label) */
.cart-bar__submit {
  padding-bottom: 19px;
}

/* Mobile — hide People quantity wrapper when Choose Options is shown */
@media only screen and (max-width: 767px) {
  .has-multiple-options .cart-bar__quantity-wrapper {
    display: none;
  }
}

/* ============================================================
   Cart drawer item card — v2 layout (2026-04 redesign)
   Compact 4-row card: photo+prices | pills | swatch+qty | remove.
   Replaces the theme's stacked image-column + content-column layout
   for cart items rendered from snippets/cart-line-items.liquid.
   ============================================================ */

/* Kill the theme's flex column layout; v2 is row-based.
   Horizontal padding keeps content from sitting flush to the drawer
   edges (matches the wireframe's 16px 20px card padding). `!important`
   on padding because theme's `.cart__items .cart__item { padding: 15px 0 }`
   has equal specificity and can win on load order. */
.cart__item.cart-item-v2 {
  display: block !important;
  padding: 16px 20px !important;
  align-items: initial !important;
  flex-flow: initial !important;
}

/* ============================================================
   Cart drawer footer — V2 redesign (2026-04)
   Summary row (people count + savings + total) above the terms +
   checkout button. See wireframe: Checkout-Button-Wireframes.html
   (Option A + Option D).
   ============================================================ */

/* Summary row — always visible. No top border (the cart foot already
   has a visible divider above it). */
.cart__summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.cart__summary-people {
  font-size: 12px;
  color: #888;
}
.cart__summary-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cart__summary-savings {
  font-size: 12px;
  color: red;  /* same red as the line-item discount for consistency */
}
.cart__summary-total {
  font-size: 16px;
  font-weight: 600;
  color: #000;
}

/* V2 checkout button — pill, title case, centred label.
   Price is always shown in the summary row above the button, so the
   inline price inside the button is permanently hidden. */
.cart__checkout.cart__checkout--v2 {
  display: flex !important;
  align-items: center;
  justify-content: center !important;
  gap: 10px;
  width: 100%;
  background: #1a1a1a !important;
  color: #fff !important;
  border: none !important;
  border-radius: 99px !important;
  padding: 14px 20px !important;
  text-transform: none !important;    /* override theme's uppercase */
  letter-spacing: 0.3px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  cursor: pointer;
}
.cart__checkout.cart__checkout--v2 .cart__checkout__label {
  flex: 0 1 auto;
}
/* Hide the inline price inside the checkout button — summary row
   above the button is the single source of truth for price display. */
.cart__checkout.cart__checkout--v2 .cart__total__money,
.cart__checkout.cart__checkout--v2 .cart__subtotal {
  display: none !important;
}

/* Tighter spacing between terms and button in V2 */
.cart__foot-inner .cart__buttons-wrapper {
  padding-top: 4px;
}

/* ====== Cart drawer — terms checkbox + label, +1px bump ======
   Theme default: checkbox 13x13, label font calc(0.815rem). +1px. */
.cart-drawer .cart__acceptance__input,
.cart__acceptance__input {
  width: 14px !important;
  height: 14px !important;
}
.cart-drawer .cart__acceptance__label,
.cart__acceptance__label {
  font-size: calc(0.88rem * var(--adjust-body)) !important;
}

/* ====== Booking page — "Number of people" label: don't shrink on mobile ======
   Theme rule at theme.css L15940 shrinks `.select__fieldset .select__label`
   from 1.3rem → 0.95rem at ≤767px. That's fine for short labels but
   "Number of people" looks disproportionately small next to the large
   input field on phones. Override only the quantity wrapper so other
   variant labels (Location, Backdrop, etc.) keep their mobile sizing. */
@media only screen and (max-width: 767px) {
  .select__fieldset[data-quantity-wrapper] .select__label,
  #Quantity-Form-product-template .select__label {
    font-size: calc(1.15rem * var(--adjust-label));
  }
}

/* ====== V2 cart card — mobile adjustments ======
   - Thumb from 100px → 60px to save horizontal space in the drawer
   - Per-person row: prevent wrap so "/person" stays on the same line
     as the price (was falling to a second line on narrow viewports) */
@media only screen and (max-width: 767px) {
  .cart-item-v2__photo {
    width: 60px;
    height: 60px;
  }
  /* Chained selector (.foo.bar) to match theme's
     `.body--rounded-corners .cart__item__image { border-radius: var(--radius) }`
     specificity (0,2,0). Our rule loads later in custom.css so it
     wins on equal-specificity tie. Without the chain, theme's 28px
     radius was overriding mine silently. */
  .cart__item__image.cart-item-v2__photo {
    border-radius: 20px;
  }
  .cart-item-v2__per-person {
    flex-wrap: nowrap;
    gap: 4px;
  }
  /* SELECT BACKDROP COLOUR — tighter horizontal padding on mobile */
  .cart-item-v2__select-btn.backdrop-select-button {
    padding: 7px 10px !important;
  }
}

/* ====== Cart Discount Styling ====== */

/* Unit price — smaller, muted */
.cart__item__single-price {
  font-size: calc(0.78rem * var(--adjust-body));
  color: var(--text-alpha-50);
  margin: 2px 0 0;
}

/* Line price — flex column, right-aligned, order: struck → discount → final */
.cart__item__price {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 1px;
}

/* Discount badge (cart-level code discount) */
.cart__discount {
  background-color: var(--text);
  color: var(--bg);
  padding: 3px 8px;
  font-size: calc(0.72rem * var(--adjust-body));
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Cart-level discount list */
.cart__discounts {
  margin-top: 8px;
}

/* Subtotal after discount — highlight row */
.cart__subtotal {
  font-weight: var(--FONT-WEIGHT-BODY-BOLD);
}

/* ====== Banner Image — full-image text background overlay ====== */
/* Handled via section-banner-image.liquid: sets background on .banner-image__text-container */
/* Ensure text inside remains readable and centered */
.banner-image__text-container:has(.text-background) .banner-image__text-wrapper {
  background: transparent;
}

/* ====== Cart checkout button layout ====== */
/* Remove the theme's `::before` bullet separator before the price span */
.cart-drawer .cart__total__money::before {
  content: none !important;
}

/* Centre + wrap the checkout button so a multi-line label/price fits */
.cart__checkout {
  justify-content: center !important;
  flex-wrap: wrap !important;
  text-align: center !important;
}

/* ====== Page Gallery (HTML5 lightbox) ====== */
.page-gallery__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  max-width: 1200px;
  margin: 0 auto;
}
.page-gallery__item {
  flex: 0 0 calc(33.333% - 2.667px);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1;
  display: block;
  background: none;
  border: none;
  padding: 0;
  border-radius: 28px;
}
.page-gallery__item--video { cursor: default; }
.page-gallery__item--video video,
.page-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 767px) {
  .page-gallery__item { flex: 0 0 calc(50% - 2px); }
}
.page-gallery-dialog {
  padding: 0;
  background: rgba(255,255,255,0.97);
  border: none;
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
}
.page-gallery-dialog[open] { display: flex; }
.page-gallery-dialog::backdrop { background: rgba(255,255,255,0.97); }
.page-gallery-dialog__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.page-gallery-dialog__img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  display: block;
}
.page-gallery-dialog__close,
.page-gallery-dialog__prev,
.page-gallery-dialog__next {
  position: fixed;
  background: transparent;
  border: none;
  padding: 0;
  color: #000;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  outline: none;
}
.page-gallery-dialog__close { top: 20px; right: 20px; }
.page-gallery-dialog__prev  { top: 50%; left: 20px; transform: translateY(-50%); }
.page-gallery-dialog__next  { top: 50%; right: 20px; transform: translateY(-50%); }
/* Smooth fade for image swap */
.page-gallery-dialog__img {
  transition: opacity 0.15s ease;
}
/* Mobile (≤767px): move the prev/next arrows BELOW the photo in a row pinned to the two
   edges (prev 20px from the left, next under the close X at 20px right) — not overlaying the
   photo, not pinned to the screen bottom. Stack __inner as a column (photo, then the controls
   row from custom.js), take the arrows out of position:fixed into that in-flow row, and trim
   the image a touch to make room. Hide the arrows while the photo loads (the photo area is
   collapsed then, so the row would otherwise sit over the centered loading spinner). The close
   button (fixed, top-right) and the entire desktop side-arrow layout are unchanged.
   PORTRAIT ONLY — in landscape the viewport is too short for a 75vh photo plus a row
   beneath it (the arrows land below the fold and force a scroll), so landscape keeps the
   desktop side arrows: the base position:fixed rules resume the moment this block drops. */
@media (max-width: 767px) and (orientation: portrait) {
  .page-gallery-dialog__inner { flex-direction: column; gap: 16px; }
  .page-gallery-dialog__img { max-height: 75vh; }
  .page-gallery-dialog__controls { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 20px; gap: 0; }
  .page-gallery-dialog__prev,
  .page-gallery-dialog__next { position: static; top: auto; left: auto; right: auto; transform: none; }
  /* visibility (not display) so the column doesn't jump when the arrows appear */
  .page-gallery-dialog[data-loading="true"] .page-gallery-dialog__controls { visibility: hidden; }
}

/* ====== HOME PAGE — Rounded Corners ====== */

/* Raise standard --radius from 8px to 28px for all rounded-corner elements */
.body--rounded-corners {
  --radius: 28px;
  --radius-large: 28px;
}

/* Marquee — remove the top-corner curve the theme applies to whichever section follows
   a card-scrolling-effect slideshow. Theme rule sets border-radius on + .shopify-section;
   we target the marquee by its own class which is always present. */
.body--rounded-corners .main-content > .shopify-section:has(.card-scrolling-effect) + .shopify-section--marquee,
.shopify-section--marquee {
  border-radius: 0 !important;
}

/* "Expert Business Portraits" section — full-section curved appearance with #ecebe7 background */
[id$="__section_image_with_text_Uq6CM9"] .image-with-text__items {
  border-radius: 28px;
  overflow: hidden;
}

/* Toronto banner image — 28px rounded corners */
[id$="__section_banner_image_fi8kz7"] .banner-image {
  border-radius: 28px;
  overflow: hidden;
}

/* "Browse Portfolio" banner image — 28px rounded corners */
[id$="__section_banner_image_hVx3AJ"] .banner-image {
  border-radius: 28px;
  overflow: hidden;
}

/* ====== ABOUT PAGE — Guest Speaking section curved corners ====== */
[id$="__section_custom_html_pPA9JY"] .about-speaking {
  border-radius: 28px;
  overflow: hidden;
}

/* ====== Play button — larger thin icon, remove theme's outer circle ====== */
.icon-play {
  width: 80px !important;
  height: 80px !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ====== SERVICES PAGE — bottom banner curved corners ====== */
[id$="__section_banner_image_ChfTUm"] .banner-image {
  border-radius: 28px;
  overflow: hidden;
}

/* Enterprise photo grid background */
[id$="__photo_grid_lightbox_74Ajkz"] .photo-grid__grid {
  background-color: #f7f7f7;
  padding: 5px;
}

/* "Ready to Get Started?" bottom banner — 28px curved corners */
[id$="__section_banner_image_pKKWHD"] .banner-image {
  border-radius: 28px;
  overflow: hidden;
}

/* ====== FAQ PAGE ====== */

/* "Have Additional Questions?" bottom banner — 28px curved corners */
[id$="__section_banner_image_TJNCRU"] .banner-image {
  border-radius: 28px;
  overflow: hidden;
}

/* ====== Shared bottom banner (corporate-headshots / corporate-event-gallery) ====== */
[id$="__section_banner_image_TbPDMf"] .banner-image {
  border-radius: 28px;
  overflow: hidden;
}

/* ====== BOOK YOUR PORTRAIT PAGE ====== */

/* Quantity input — grey border, 40px height, 85px wide, square (not pill) */
.selector-wrapper--qty .quantity__input {
  border-color: #c2c2c2 !important;
  height: 40px !important;
  width: 85px !important;
  min-width: unset !important;
  max-width: 85px !important;
  border-radius: 0 !important;
}
.selector-wrapper--qty .quantity__button {
  border-color: #c2c2c2 !important;
  height: 40px !important;
  border-radius: 0 !important;
}

/* Tighten the space Shopify reserves for the Shop Pay Installments
   widget (empty on our store since Installments aren't enabled). Theme
   sets margin-bottom: var(--grid-gutter) = 20px; trimming to 9px lifts
   the Add-to-Cart button so it sits higher on the product page. */
@media only screen and (min-width: 768px) {
  .shop-pay-terms {
    margin-bottom: 9px !important;
  }
}

/* Product page gallery — cap WIDTH at 570px on desktop. */
@media only screen and (min-width: 768px) {
  .product-gallery {
    max-width: 570px;
  }

  /* Tighten the grid so the two columns hug their caps instead of
     expanding to fill half of the wrapper each.

     Theme default is `repeat(2, minmax(0, 1fr))` overridden by
     --standard to `calc(50% - gutter/2) calc(50% - gutter/2)`
     (template-product.css L140 & L167). Those 50% columns are
     ~690px wide on a 1440 site-width, so even though the gallery
     caps at 570px and form-wrapper caps at 620px, each column had
     ~70-120px of dead space inside it — and all of it collected
     between the gallery and the variants as a visible gap.

     Fixing the tracks to the exact caps (570px + 620px = 1190px
     content, + 60px gutter = 1250px) leaves 70px of free space in
     the 1320px-wide wrapper content area. `justify-content: center`
     distributes that 70px equally, so ~35px sits on each side of
     the two-column block. The columns themselves sit flush against
     the gutter, eliminating the photo-to-variants gap.

     Chained with --carousel for (0,2,0) specificity — template-
     product.css loads after custom.css, so a plain --standard
     selector ties and loses on load order. */
  .product-single__wrapper--carousel.product-single__wrapper--standard,
  .product-single__wrapper--standard.product-single__wrapper--carousel {
    grid-template-columns: 570px 620px;
    justify-content: center;
  }
}

/* Add to cart button — blue, shadow, 200 x 45px
   To remove: delete the rules below up to the next comment */
.product-single__details .product__submit__add {
  background-color: #0b57d0 !important;
  border-color: #0b57d0 !important;
  box-shadow: none !important;
  height: 45px !important;
  min-height: 45px !important;
}
/* Hover — keep same blue, no shadow, no colour darkening */
.product-single__details .product__submit__add:hover {
  background-color: #0b57d0 !important;
  border-color: #0b57d0 !important;
  box-shadow: none !important;
}
@media only screen and (min-width: 768px) {
  .product-single__details .product__submit__add {
    width: 200px !important;
  }
}

/* Remove pre-discount price shown on ATC button */
.product__submit__add .product__price--regular {
  display: none !important;
}

/* ============================================================================
   Product page — Group Discount preview
   Wired up by custom.js → applyProductPagePreview when the people field has
   qty ≥ 2 and a tier matches. Original price gets struck and greyed; the
   discounted price renders inline next to it in the brand ink color.

   The discounted span shares `.product__price--regular` (and the optional
   `--bold` modifier) so the font, weight, and size match the original
   price exactly — only color + line-through change between the two states.
   ============================================================================ */
.product__price [data-product-price].product__price--struck {
  text-decoration: line-through !important;
  color: #888 !important;
  margin-right: 12px;
  /* Don't override font-weight/size — let .product__price--regular keep them */
}

.product__price [data-product-discounted-price] {
  color: #0b0b0b !important;
  /* Font properties are inherited from the .product__price--regular class
     applied on the same element (see snippets/product.liquid) */
}

.product__price [data-product-discounted-price][hidden] {
  display: none !important;
}

/* "Experience the Difference" image section — 28px curves */
[id$="__section_image_with_text_LVg4pX"] .image-with-text__items {
  border-radius: 28px;
  overflow: hidden;
}

/* Sticky add to cart — center product title / price block */
.cart-bar__info {
  align-items: center !important;
  text-align: center !important;
}

/* Sticky add to cart — center the option selector dropdowns (location, backdrop, etc.) */
.cart-bar__options {
  justify-content: center !important;
}
.cart-bar__options .cart-bar__select__wrapper {
  text-align: center !important;
}
.cart-bar__options .select-popout__toggle {
  justify-content: center !important;
}

/* Sticky add to cart — blue ATC button */
.cart-bar .product__submit__add {
  background-color: #0b57d0 !important;
  border-color: #0b57d0 !important;
}

/* ====== DRAWER CART ====== */

/* Price summary — right-aligned, 14px, stacked vertically: original → discount → total */
.cart__price-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 14px;
  text-align: right;
  padding: 8px 0 4px;
}
.cart__price-original {
  opacity: 0.5;
  text-decoration: line-through;
}
.cart__price-discount {
  color: #c00;
}
.cart__price-total {
  font-weight: 600;
}

/* "Taxes calculated at checkout" — centred */
.cart__text {
  text-align: center !important;
}

/* Hide the theme's "Items" label injected into the cart footer */
.cart__foot-inner > span {
  display: none !important;
}

/* (Removed) `[data-cart-price-holder] { display: none }` — this
   wrapper was hidden back when the cart was per-item-totals-only,
   but the V2 summary row ("X people | Saving $Y | $Total") was
   later built INSIDE this wrapper. With the hide rule active the
   summary row never showed (was masked by AIOD's injected styles
   until AIOD was uninstalled). The legacy elements inside —
   .cart__discounts, .cart__price-summary, .cart__total — are
   each already hidden by their own inline `style="display:none"`
   or `hidden` attribute, so removing this rule does not reveal
   any unwanted legacy markup. */

/* ====== WHAT TO EXPECT PAGE ====== */

/* #fafafa sections — 28px corner curves */
.wte-jump-nav,
.wte-backdrops,
.wte-preparation,
.wte-lighting,
.wte-preview,
.wte-delivery,
.wte-retouching,
.wte-addons {
  border-radius: 28px;
  overflow: hidden;
}

/* Jump to Section buttons — pill, 44px tall (was 46px).
   Covers both .wte-jump-nav (What-to-Expect + Corporate Headshots
   gallery) and .faq-jump-nav (FAQ page). Inner JSON styles use
   padding: 10px 16px which gives 46px; 9px top/bottom trims to 44px. */
.wte-jump-nav a,
.faq-jump-nav a {
  border-radius: 30px !important;
  padding: 9px 16px !important;
}

/* Flexible Location Options — two cards, 28px */
.wte-locations .wte-col-card {
  border-radius: 28px;
}

/* 100+ Backdrop Choices — four cards, 28px */
.wte-backdrops .wte-col-card {
  border-radius: 28px;
}

/* Explore Our Backdrop Colours button — match the theme's medium
   button dimensions (padding 12px 20px, font-size 1rem). Pill shape
   stays as it was. */
.wte-backdrops .wte-inline-btn {
  border-radius: 30px !important;
  padding: 12px 20px !important;
  font-size: 1rem !important;
}

/* Hero images (outdoor, lighting, preview, retouching) — 28px curves */
.wte-outdoor .wte-container > img,
.wte-lighting .wte-container > img,
.wte-preview .wte-container > img,
.wte-retouching .wte-container > img {
  border-radius: 28px;
  display: block;
  width: 100%;
  margin: 30px 0;
}

/* Group Discounts — pill badges */
.wte-group .wte-discount-badge {
  border-radius: 30px !important;
}

/* Bottom CTA buttons — pill */
.wte-cta-btn {
  border-radius: 30px !important;
}

/* ====== LINKEDIN HEADSHOTS PAGE ====== */

/* Photo grid — already covered by the enterprise rule above:
   [id$="__photo_grid_lightbox_74Ajkz"] shares the same section ID */

/* "Why 800+ Companies Choose Us" feature cards — 28px curves */
[id$="__section_custom_html_FEaHt4"] .feature-card-item {
  border-radius: 28px !important;
}

/* "What's Included" — remove dot background, use #fafafa */
[id$="__section_custom_html_LLk4CC"] .headshot-package-section {
  background: #fafafa !important;
  background-image: none !important;
  box-shadow: none !important;
}
[id$="__section_custom_html_LLk4CC"] .headshot-package-section::before {
  display: none !important;
}

/* "What's Included" feature cards — 28px curves */
[id$="__section_custom_html_LLk4CC"] .headshot-feature-card {
  border-radius: 28px !important;
}

/* Service area location badges — pill */
[id$="__section_custom_html_kqpKBV"] .areas-list span {
  border-radius: 30px !important;
}

/* ====== HOME PAGE — Photo grid: hide items 9–12 on mobile ====== */
@media (max-width: 767px) {
  .photo-grid__grid .photo-grid__item:nth-child(n+9) {
    display: none !important;
  }
}

/* ====== WHAT TO EXPECT PAGE ====== */

/* Jump to Section row — remove container curves (buttons stay pill via .wte-jump-nav a) */
.wte-jump-nav {
  border-radius: 0 !important;
}

/* 100+ Backdrop Choices — 6 images: curve each image */
.wte-backdrops img {
  border-radius: 28px;
  overflow: hidden;
}

/* Ready to Book — hover handled by the general btn--solid / btn--solid-border rules */

/* ====== FAQ — inline video curved corners ====== */
.main-page__content video,
.page-width video {
  border-radius: 28px;
  overflow: hidden;
  display: block;
}

/* ====== ADWORDS LANDING PAGES ====== */

/* Feature cards — 28px curves (fix: selector was .feature-card-item, correct class is .feature-card) */
[id$="__section_custom_html_FEaHt4"] .feature-card {
  border-radius: 28px !important;
}

/* Image-with-text buttons — side by side instead of stacked */
[id$="__section_image_with_text_hXN8Pb"] .image-with-text__buttons {
  display: inline-flex !important;
  width: auto !important;
  margin-right: 10px !important;
}

/* ====== CONSISTENT BUTTON HOVER — invert on hover for all non-ATC buttons ======
   Excludes: .product__submit__add (blue ATC button)
   Excludes: .radio__label (variant selectors — they use their own checked/hover states)

   NOTE on .btn--solid: theme sets border-width: 0 on these, so border-color alone
   cannot draw an outline. We use box-shadow: inset instead — it works regardless of
   border-width and never shifts layout.
================================================================ */

/* --- Solid black → outline on hover --- */
.btn--solid.btn--black:not(.product__submit__add) {
  --btn-bg-hover: transparent;
}
.btn--solid.btn--black:not(.product__submit__add):hover {
  background: #fff !important;
  color: #000 !important;
  box-shadow: inset 0 0 0 1px #000 !important;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}

/* --- Solid-border black → inverts on hover (white bg, black text) --- */
.btn--black.btn--solid-border:not(.product__submit__add),
.btn--solid-border.btn--black:not(.product__submit__add) {
  --btn-bg-hover: transparent;
}
.btn--black.btn--solid-border:not(.product__submit__add):hover,
.btn--solid-border.btn--black:not(.product__submit__add):hover {
  background: #fff !important;
  color: #000 !important;
  border-color: #000 !important;
  box-shadow: inset 0 0 0 1px #000 !important;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}

/* --- Solid white → outline on hover --- */
.btn--solid.btn--white:not(.product__submit__add) {
  --btn-bg-hover: transparent;
}
.btn--solid.btn--white:not(.product__submit__add):hover {
  background: transparent !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px #fff !important;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}

/* --- Solid-border white → inverts on hover (black bg, white text, white outline) --- */
.btn--white.btn--solid-border:not(.product__submit__add),
.btn--solid-border.btn--white:not(.product__submit__add) {
  --btn-bg-hover: transparent;
}
.btn--white.btn--solid-border:not(.product__submit__add):hover,
.btn--solid-border.btn--white:not(.product__submit__add):hover {
  background: #000 !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px #fff !important;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}

/* --- Solid primary → outline on hover --- */
.btn--solid.btn--primary:not(.product__submit__add) {
  --btn-bg-hover: transparent;
}
.btn--solid.btn--primary:not(.product__submit__add):hover {
  background: transparent !important;
  color: var(--PRIMARY-BUTTONS-COLOR-BG) !important;
  box-shadow: inset 0 0 0 1px var(--PRIMARY-BUTTONS-COLOR-BG) !important;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}

/* --- Outline primary → filled on hover --- */
.btn--primary.btn--solid-border:not(.product__submit__add),
.btn--solid-border.btn--primary:not(.product__submit__add) {
  --btn-bg-hover: transparent;
}
.btn--primary.btn--solid-border:not(.product__submit__add):hover,
.btn--solid-border.btn--primary:not(.product__submit__add):hover {
  background: var(--PRIMARY-BUTTONS-COLOR-BG) !important;
  color: var(--PRIMARY-BUTTONS-COLOR-TEXT) !important;
  box-shadow: inset 0 0 0 1px var(--PRIMARY-BUTTONS-COLOR-BORDER) !important;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}

/* ====== STICKY BAR — tablet (769–1025px) compact layout ====== */
@media only screen and (min-width: 769px) and (max-width: 1025px) {
  .cart-bar__media img {
    width: 50px;
    height: 50px;
  }
  .cart-bar__info {
    max-width: 120px;
  }
  .cart-bar__product__title {
    font-size: calc(0.85rem * var(--adjust-body));
    line-height: 1.2;
  }
  .cart-bar__product__price {
    font-size: calc(0.8rem * var(--adjust-body));
  }
  .cart-bar .select-popout__toggle {
    padding: 8px 10px;
    font-size: 0.8rem;
  }
  .cart-bar__quantity .quantity__input {
    width: 50px !important;
    max-width: 50px !important;
    height: 40px !important;
  }
  .cart-bar__form {
    gap: 8px;
  }
  .cart-bar__options {
    gap: 8px;
  }
}

/* ====== MOBILE MENU — pill button for "Book Your Portrait" ======
   Solid black pill with white text — matches the desktop nav pill's
   default state. No hover/active colour swap on mobile: touch devices
   don't have a stable hover state and the theme's red :active flash
   was ugly. Title case. */
.mobile-navlink.mobile-navlink--highlight {
  display: inline-block !important;
  width: auto !important;
  padding: 5px 16px !important;
  border: 1px solid #000 !important;
  border-radius: 30px !important;
  background-color: #000 !important;
  color: #fff !important;
  --text: #fff;
  text-transform: none !important;
}
/* Keep the same black/white treatment on press + visited so the pill
   never flashes red or white mid-tap. */
.mobile-navlink.mobile-navlink--highlight:hover,
.mobile-navlink.mobile-navlink--highlight:focus,
.mobile-navlink.mobile-navlink--highlight:active,
.mobile-navlink.mobile-navlink--highlight:visited {
  background-color: #000 !important;
  color: #fff !important;
  --text: #fff;
}

/* ====== VIEW PACKAGES — sticky button perfectly centred on mobile ====== */
/* The parent .cart-bar__form has margin-left:auto + padding-right:10px which
   creates asymmetric spacing. Override on mobile so the button is truly centred. */
@media only screen and (max-width: 767px) {
  .cart-bar__form {
    margin-left: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    justify-content: center !important;
  }
  .cart-bar__mobile-options-btn {
    display: flex;
    justify-content: center;
    padding: 0;
  }
  .cart-bar__mobile-options-btn button {
    width: 100%;
    max-width: 100%;
    text-align: center;
  }
}

/* ====== BUTTON HOVER — outline (btn--outline) variants ======
   These were missing from the solid-border rules above.
   btn--outline has visible border-width so we can use border-color directly.
   ============================================================ */

/* --- Outline black (btn--outline) → filled black on hover --- */
.btn--outline.btn--black:not(.product__submit__add):hover {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}

/* --- Outline white (btn--outline) → filled on hover + white border visible --- */
.btn--outline.btn--white:not(.product__submit__add):hover {
  background: #fff !important;
  color: #000 !important;
  border-color: #fff !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}

/* ====== BUTTON HOVER — kill theme's ::before/::after pseudo-element overlay ======
   The theme layers a semi-transparent overlay via ::before/::after (opacity: 0.3,
   background: --btn-bg-hover) on hover. This conflicts with our full-colour hover
   inversions. Hide them entirely so only our explicit background/color applies.
   ============================================================ */
.btn--solid:not(.product__submit__add)::before,
.btn--solid:not(.product__submit__add)::after,
.btn--solid-border:not(.product__submit__add)::before,
.btn--solid-border:not(.product__submit__add)::after,
.btn--outline:not(.product__submit__add)::before,
.btn--outline:not(.product__submit__add)::after {
  display: none !important;
}

/* ====== MOBILE — centre CTA buttons on small screens ======
   On < 480px the theme switches .main-buttons to flex-flow: column
   but leaves align-items: normal (= left-aligned). Buttons inside
   image-with-text, section-text, and similar sections appear off-centre.
   ============================================================ */
@media only screen and (max-width: 479px) {
  .main-buttons {
    align-items: center !important;
  }
  .main-buttons__item {
    justify-content: center !important;
  }
}

/* ====== MOBILE — centre contact-form Send button ====== */
@media only screen and (max-width: 479px) {
  .form__item--submit {
    display: flex;
    justify-content: center;
  }
}

/* ONLY the middle wrapper grows / gets wider */
.cart-bar__options .cart-bar__select__wrapper:nth-child(2) .select-popout__list--visible{
  min-width: max(240px, 100%);
}


.group-discount-message {
  color:#ff4848; /* change this to whatever you want */
  font-size: 13px !important;
  display: flex !important;
  align-items: center;
  gap: 6px;
}
.group-discount-message .spinner-icon {
  width: 25px;
  height: 25px;
  flex-shrink: 0;
  animation: spin 1s linear infinite;
}
.backdrop-optimistic-saving {
  display: flex !important;
  align-items: center;
  gap: 5px;
  font-size: 13px;
}
.backdrop-optimistic-saving .spinner-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ============================================================
   Enterprise — "How It Works" image-with-text + numbered steps
   ============================================================ */
.how-it-works {
  overflow: hidden;
  background: var(--bg);
}
.how-it-works__inner {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .how-it-works__inner {
    flex-wrap: nowrap;
    flex-direction: row-reverse; /* image right, text left */
  }
}

/* --- Image side --- */
.how-it-works__image {
  position: relative;
  width: 100%;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .how-it-works__image {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
.how-it-works__image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.body--rounded-corners .how-it-works__image,
.body--rounded-corners .how-it-works__image img {
  border-radius: var(--radius);
  overflow: hidden;
}

/* Seven-fifty height to match LinkedIn section */
@media only screen and (min-width: 768px) {
  .how-it-works__image img {
    height: 550px;
    object-fit: cover;
  }
}

/* --- Text / content side --- */
.how-it-works__content {
  width: 100%;
  padding: var(--gutter-mobile);
}
@media only screen and (min-width: 768px) {
  .how-it-works__content {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 calc(var(--gutter) * 1.5) 0 0;
  }
}
@media only screen and (max-width: 767px) {
  .how-it-works__content {
    padding: 24px var(--gutter-mobile) 0;
  }
}

.how-it-works__heading {
  font-family: var(--FONT-STACK-HEADING);
  font-weight: var(--FONT-WEIGHT-HEADING);
  font-style: var(--FONT-STYLE-HEADING);
  font-size: var(--font-2);
  line-height: 1.15;
  margin: 0 0 10px;
  color: var(--text);
}
@media only screen and (max-width: 767px) {
  .how-it-works__heading {
    font-size: var(--font-3);
  }
}

.how-it-works__intro {
  font-size: calc(1.1rem * var(--adjust-body));
  line-height: 1.6;
  margin: 0 0 28px;
  color: var(--text);
}

/* --- Timeline steps --- */
.how-it-works__steps {
  list-style: none;
  margin: 0;
  padding: 0 0 0 28px;
  position: relative;
}
.how-it-works__steps::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e0e0e0;
}

.how-it-works__step {
  position: relative;
  padding-bottom: 22px;
}
.how-it-works__step:last-child {
  padding-bottom: 0;
}
.how-it-works__step::before {
  content: '';
  position: absolute;
  left: -25px;
  top: 5px;
  width: 12px;
  height: 12px;
  background: #000;
  border-radius: 50%;
}

.how-it-works__step-number {
  display: none;
}

.how-it-works__step-text {
  flex: 1;
  min-width: 0;
}

.how-it-works__step-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #000;
  margin: 0 0 6px;
  line-height: 1.4;
}

.how-it-works__step-desc {
  font-size: 1rem;
  color: #666;
  line-height: 1.6;
  margin: 0;
}


[id*="section_image_with_text_EHkT3F"] .image-with-text__text ul {
  list-style: none;
  padding-left: 0;
}
[id*="section_image_with_text_EHkT3F"] .image-with-text__text ul li {
  padding-left: 28px;
  position: relative;
  margin-bottom: 6px;
}
[id*="section_image_with_text_EHkT3F"] .image-with-text__text ul li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  font-weight: 700;
  color: #000;
}
[id*="section_columns_C6etVa"] .column-item__heading {
  text-transform: none;
}
[id*="section_multicolumn_gqEhrY"] .column-item__text.subheading-text {
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--FONT-STACK-BODY);
  font-weight: var(--FONT-WEIGHT-BODY);
  font-size: 1rem;
}
.body--rounded-corners .parent > .header__dropdown {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}



/* ====== "Portrait Features & Options" heading — tighten margin ======
   Overrides the theme's default `calc(var(--gutter) / 1.5)` for this
   specific icons-row section only. */
@media only screen and (min-width: 768px) {
  [id$="__section_icons_row_xcNNra"] .icons-row__headings {
    margin-bottom: 20px;
  }
}

/* ====== Gallery nav icons — hover swap + close rotate ======
   Used by: photo-grid-lightbox, main-page-backdrops, and the
   custom-HTML page galleries (corporate-headshots, corporate-event-gallery).
   Any button containing these icons gets the swap.
   Wrapped in `@media (hover: hover)` so the swap only fires on pointer
   devices — on touch devices :hover sticks after a tap until another
   element is touched, which made the arrows look "stuck" on the hover
   state when advancing slides on mobile. */
.gallery-icon--rest, .gallery-icon--hover, .gallery-icon--close {
  vertical-align: middle;
  transition: transform 0.2s ease;
  /* Force 45px across all usages (headshot / artwork / event gallery
     pages + photo-grid-lightbox on homepage, LinkedIn, enterprise pages).
     The SVGs have width/height="40" as HTML attrs; this overrides.
     `!important` because some legacy theme CSS sets different sizes. */
  width: 45px !important;
  height: 45px !important;
}
/* Gallery dialog BUTTONS (the parent containers the SVGs sit in) —
   match the 45px icon size so nothing clips or misaligns. Covers:
     - photo-grid-lightbox.liquid  → .photo-grid__dialog-*
     - main-page-backdrops.liquid  → .backdrops-dialog__*
     - page-gallery templates      → .page-gallery-dialog__*  (headshots / artwork / event) */
.photo-grid__dialog-close,
.photo-grid__dialog-prev,
.photo-grid__dialog-next,
.backdrops-dialog__close,
.backdrops-dialog__prev,
.backdrops-dialog__next,
.page-gallery-dialog__close,
.page-gallery-dialog__prev,
.page-gallery-dialog__next {
  width: 45px !important;
  height: 45px !important;
}
.gallery-icon--hover { display: none; }
/* Hover swap only on REAL hover-capable devices. We combine
   `(hover: hover)` + `(pointer: fine)` — both must be true — so that
   iPads with trackpads, Windows touchscreens, stylus devices etc. that
   report `hover: hover` on a tap don't stick in the hover state after
   advancing a slide. `!important` on the swap rules makes them win
   even if some other CSS reinterprets specificity. */
@media (hover: hover) and (pointer: fine) {
  button:hover > .gallery-icon--rest { display: none !important; }
  button:hover > .gallery-icon--hover { display: inline-block !important; }
  button:hover > .gallery-icon--close { transform: rotate(90deg); }
}
/* Belt & suspenders: force rest icon visible + hover icon hidden on any
   touch-capable device. Overrides sticky-hover behaviour that some
   mobile browsers apply after a tap. */
@media (hover: none), (pointer: coarse) {
  .gallery-icon--rest { display: inline-block !important; }
  .gallery-icon--hover { display: none !important; }
}

/* ====== Site-wide close icon — rotate 90° on hover ======
   Applies to any button/link containing the shared `icon-close` SVG
   (cart drawer close, backdrop modal close, quick-view close, etc.)

   Two non-obvious details:

   1. `will-change: transform` + `translateZ(0)` force GPU compositing
      from the start. Without this, the icon is CPU-rendered at rest and
      switches to GPU mid-animation; the two paths anti-alias slightly
      differently, making a stroke-based icon look "a touch bolder"
      after a hover-rotate finishes.

   2. `pointer-events: none` prevents the SVG itself from receiving mouse
      events — only the button handles hover. At 45° mid-rotation a square
      icon's visual extent grows to √2× (a 59px icon becomes 83px on the
      diagonal), which can stick out past the button's bounding box. If
      the SVG accepted pointer events, the cursor could be over the
      rotated SVG but outside the button's hit zone → button:hover flips
      off → rotation reverses → cursor is back in button → flips on →
      JITTER. Making the SVG invisible to the cursor eliminates that
      feedback loop. */
.icon-close {
  transition: transform 0.2s ease;
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  pointer-events: none;
}
@media (hover: hover) {
  button:hover > .icon-close,
  a:hover > .icon-close,
  button:hover .icon-close,
  a:hover .icon-close {
    transform: rotate(90deg) translateZ(0);
  }
}
/* Same pointer-events fix for gallery close icons (lightbox close X in
   the headshot / artwork / event galleries + photo-grid-lightbox). */
.gallery-icon--close,
.gallery-icon--rest,
.gallery-icon--hover {
  pointer-events: none;
}

/* ====== Mobile nav expand/collapse — circled down/up arrow ======
   Replaces the default +/- icons ONLY on the mobile nav parent links
   (e.g. "Portfolio"). Other +/- on the site (FAQ, cart qty, filter
   accordions, footer links) keep their theme defaults. Icons come from
   snippets/nav-mobile-arrows.liquid — two SVGs stacked in the button,
   opacity-swapped on `.is-expanded`. */
.mobile-nav__trigger .nav-mobile-arrow {
  width: 38px;
  height: 38px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
}
/* Default state: down arrow visible, up arrow hidden */
.mobile-nav__trigger .nav-mobile-arrow--up { opacity: 0; }
/* Expanded state: swap */
.mobile-nav__trigger.is-expanded .nav-mobile-arrow--down { opacity: 0; }
.mobile-nav__trigger.is-expanded .nav-mobile-arrow--up { opacity: 1; }

/* ====== Mobile menu close — 40px visible ======
   Keep the theme's native 54×54 tap target (above the 44×44 mobile
   minimum) and reduce padding so the stroke-based icon-close renders
   at 40px — matches the rest of the site's close-icon scale. */
.drawer--nav .drawer__close-button {
  width: 54px !important;
  height: 54px !important;
  padding: 7px !important; /* 54 − 2×7 = 40px visible */
}
.drawer--nav .drawer__close-button .icon-close {
  width: 100%;
  height: 100%;
}

/* ====== TESTIMONIALS — equal-height cards (pure CSS) ====== */
/* Flickity adds .flickity-enabled BEFORE measuring cells, so
   height:100% collapses them (circular dependency). Instead we
   use min-height:100% — Flickity measures natural height first,
   then after setting viewport height the min-height kicks in.
   Cells become flex containers so inner stretches via flex:1. */

testimonials-slider.flickity-enabled [data-item] {
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
.testimonial__item__inner {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}
.testimonial__item__content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}
.testimonial__user {
  margin-top: auto !important;
  padding-top: 16px;
}
/* Image cards have no .testimonial__user wrapper — push name to bottom */
.testimonial__item__image .testimonial__item__content .testimonial__user__name {
  margin-top: auto !important;
  padding-top: 16px;
  font-size: calc(0.8rem * var(--adjust-body)) !important;
}
/* Image card inner has padding:0 (photo edge-to-edge) but text cards
   have padding:var(--inner) all around. Add bottom padding to image
   cards so names align horizontally across both card types. */
.testimonial__item__image .testimonial__item__inner {
  padding-bottom: var(--inner) !important;
}

/* Subheading (location) under person name — darker grey */
.testimonial__subheading {
  color: #6b6b6b !important;
}

/* ========================================================================
   BPHOME — Home Page Refinements v3
   --------------------------------------------------------------
   Layout-only styles for section-custom-html blocks on the home
   page. Typography is intentionally NOT set here — every element
   inherits from the theme's configured fonts so these blocks read
   as part of the rest of the site, not as a foreign design.

   Only structural rules: layout, max-widths, spacing, dividers,
   colors that match the existing palette (--bp-line / --bp-mute
   are derived from the theme's neutral grays).
   ======================================================================== */

.bp-services-intro {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

.bp-services-intro__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 48px;
  border-bottom: 1px solid #e5e5e2;
  padding-bottom: 32px;
}

.bp-services-intro__head h2 {
  margin: 0;
  max-width: 680px;
  --adjust-heading: calc(var(--FONT-ADJUST-HEADING) * 1.1);
  /* font-family / size / weight inherit from theme h2 */
}

.bp-services-intro__lede {
  max-width: 360px;
  margin: 0;
  color: #666;
  font-size: 1rem;
  line-height: 1.6;
}

.bp-services-intro__lede a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bp-services-intro__body {
  max-width: 1080px;
}

.bp-services-intro__body p {
  margin: 0 0 14px;
  line-height: 1.7;
  color: #333;
}

.bp-services-intro__body p:last-child {
  margin: 0;
}

.bp-services-intro__body a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}



/* ========================================================================
   Text columns with images — "BP Card" variant
   --------------------------------------------------------------
   ALL rules here are scoped to `.column-item--bp-card`. That class
   is added to a column-item ONLY when at least one of the new
   schema fields is filled (subheading, price label/value, pill).
   Standard "Text columns with images" usages elsewhere on the site
   inherit zero styling from this block.
   ======================================================================== */

/* ----- Equal-height layout -----------------------------------------------
   Grid stretches each .column-item to the tallest in the row, but the
   inner content collapses to its natural height. We rebuild the chain
   as nested flex columns so the content fills the full card height.
   That lets `.column-item__divider { margin-top: auto }` push the
   divider + footer (price + pill) to the bottom of the card.

   Note: the image wrapper's child uses `padding-top: var(--aspect-ratio)`
   for its aspect ratio (theme.css ~line 8037). In a flex-column parent
   that percentage-padding child can collapse to 0 height in some
   browsers — so we explicitly tell flex not to size the wrapper:
   `flex: 0 0 auto` (don't grow, don't shrink, respect natural height). */
.column-item--bp-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 28px;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

/* Hover state — matches the .wte-col-card pattern used elsewhere on the
   site (subtle shadow lift, no vertical translate). */
.column-item--bp-card:hover {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.column-item--bp-card .column-item__inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.column-item--bp-card .column-item__image-wrapper {
  flex: 0 0 auto;
  width: 100%;
}
.column-item--bp-card .column-item__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 25px;       /* internal padding so content doesn't touch the border */
}

.column-item--bp-card .column-item__subheading {
  font-size: 1rem;
  letter-spacing: 0;
  color: #666;
  font-weight: 500;
  line-height: 1.4;
  margin: -6px 0 14px;
}

/* Divider — uses padding-top + border-bottom so the visible line sits at
   the bottom of the hr element with an 18px guaranteed gap above it.
   margin-top: auto pushes it down to the bottom of the flex column. */
.column-item--bp-card .column-item__divider {
  border: none;
  border-bottom: 1px solid #e5e5e2;
  height: 0;
  margin: auto 0 0;
  padding-top: 18px;
  width: 100%;
}

.column-item--bp-card .column-item__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
}

.column-item--bp-card .column-item__price {
  display: flex;
  flex-direction: column;
  line-height: 1;
  min-width: 0;
}

.column-item--bp-card .column-item__price-label {
  font-size: 12px;
  letter-spacing: 0;
  font-weight: 500;
  color: #666;
  margin-bottom: 10px;
}

.column-item--bp-card .column-item__price-value {
  font-size: 20px;            /* default — overridden per-block by inline style from price_value_size slider */
  font-weight: 500;
  color: #111;
  letter-spacing: -0.005em;
}

/* Pill button — rounded full, three color variants.
   Hover convention matches the site's existing black-button pattern
   (see .book-portrait-button earlier in this file): black → white with
   black outline on hover. No translateY — the rest of the site doesn't
   use vertical-shift hovers, so neither does this. */
.column-item--bp-card .column-item__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 15px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid transparent;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

/* Black: solid black → white background, black outline, black text */
.column-item--bp-card .column-item__pill.pill--black {
  background: #111;
  color: #fff;
  border-color: #111;
}
.column-item--bp-card .column-item__pill.pill--black:hover {
  background: #fff;
  color: #111;
  border-color: #111;
}

/* White: white background w/ black outline → invert to black */
.column-item--bp-card .column-item__pill.pill--white {
  background: #fff;
  color: #111;
  border-color: #111;
}
.column-item--bp-card .column-item__pill.pill--white:hover {
  background: #111;
  color: #fff;
  border-color: #111;
}

/* Ghost: transparent w/ black outline → fill black on hover */
.column-item--bp-card .column-item__pill.pill--ghost {
  background: transparent;
  color: #111;
  border-color: #111;
}
.column-item--bp-card .column-item__pill.pill--ghost:hover {
  background: #111;
  color: #fff;
  border-color: #111;
}

/* Mobile (<=480px): stack footer vertically — price above pill,
   both centered. Operator preferred this over the desktop's
   row+space-between layout because of inconsistent visual centering
   between short ("From $226.98") and long ("Quote on configuration")
   price text on narrow viewports. Desktop layout above is unchanged. */


/* ========================================================================
   Hero buttons — side-by-side
   --------------------------------------------------------------
   The home hero is a section-image-with-text with two button blocks
   (Book a Team Headshot Day + Request a Quote). The theme renders
   each button in its own block-level wrapper, which stacks them.

   We use a partial-match attribute selector ([id*=...]) because
   Shopify prefixes the rendered DOM id with the template id
   (e.g. ImageWithText--template--26316586156075__section_image_with_text_7FKgfj).
   The substring stays the same regardless of the template id, so
   this selector survives most theme/template rebuilds.

   `inline-flex` is used (not inline-block) because .main-buttons is
   already display:flex from the theme — inline-flex preserves the
   inner flex behaviour while making the outer element flow inline.
   ======================================================================== */
[id*="section_image_with_text_7FKgfj"] .image-with-text__buttons {
  display: inline-flex;
  vertical-align: top;
  margin-right: 12px;
}

@media (max-width: 600px) {
  [id*="section_image_with_text_7FKgfj"] .image-with-text__buttons {
    display: flex;
    margin-right: 0;
  }
}

/* Individual booking section (bottom CTAs side-by-side, same as hero) */
[id*="section_image_with_text_Qtkgb6"] .image-with-text__buttons {
  display: inline-flex;
  vertical-align: top;
  margin-right: 12px;
}
@media (max-width: 600px) {
  [id*="section_image_with_text_Qtkgb6"] .image-with-text__buttons {
    display: flex;
    margin-right: 0;
  }
}

/* Portfolio header section (Corporate Headshots Portfolio + Corporate Event Portfolio side-by-side) */
[id*="section_image_with_text_rJHTJe"] .image-with-text__buttons {
  display: inline-flex;
  vertical-align: top;
  margin-right: 12px;
}
@media (max-width: 600px) {
  [id*="section_image_with_text_rJHTJe"] .image-with-text__buttons {
    display: flex;
    margin-right: 0;
  }
}

/* ========================================================================
   Portfolio — header (section 1)
   ======================================================================== */
.bp-portfolio-head {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}

.bp-portfolio-head__copy {
  flex: 1;
  min-width: 0;
}

.bp-portfolio-head__eyebrow {
  font-size: 12px;
  color: #666;
  font-weight: 500;
  letter-spacing: 0;
  margin-bottom: 14px;
}

.bp-portfolio-head__copy h2 {
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
  max-width: 720px;
  color: #111;
}

.bp-portfolio-head__copy p {
  font-size: 1rem;
  line-height: 1.65;
  color: #333;
  margin: 0;
  max-width: 680px;
}

.bp-portfolio-head__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #111;
  font-weight: 500;
  text-decoration: none;
  flex-shrink: 0;
  transition: gap 160ms ease;
}
.bp-portfolio-head__link:hover { gap: 16px; }
.bp-portfolio-head__link span {
  border-bottom: 1px solid #111;
  padding-bottom: 4px;
}
.bp-portfolio-head__link svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  fill: currentColor;
}

@media (max-width: 768px) {
  .bp-portfolio-head {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
  .bp-portfolio-head__actions {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* ========================================================================
   Portfolio — grid override (section 2)
   --------------------------------------------------------------
   The photo-grid-lightbox section emits an inline #PhotoGrid--<id>
   style with `grid-template-columns: repeat(6, 1fr)` (12 images = 2
   rows). For the home portfolio we want 8 images on one line desktop
   and 6 on one line mobile (with the last 2 hidden on mobile).

   Inline ID selectors (1,1,0) outrank attribute selectors (0,2,0),
   so !important is needed to override the per-section inline style.
   Scoped via [id*="bphome_portfolio"] so other photo-grid-lightbox
   sections elsewhere on the site keep their default layout.
   ======================================================================== */
[id*="bphome_portfolio"] .photo-grid__grid {
  grid-template-columns: repeat(8, 1fr) !important;
}

@media (max-width: 767px) {
  /* Mobile keeps the theme's default 2-col grid (2 cols × 3 rows for 6 images) */
  [id*="bphome_portfolio"] .photo-grid__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Still hide the 7th and 8th images so it's exactly 2 × 3 */
  [id*="bphome_portfolio"] .photo-grid__item:nth-child(n+7) {
    display: none !important;
  }
}

/* ========================================================================
   Portfolio — footer caption (section 3)
   ======================================================================== */
.bp-portfolio-foot {
  text-align: center;
  font-size: 0.9rem;
  color: #555;
  padding: 0 20px;
  margin: 0 auto;
  max-width: 880px;
  line-height: 1.6;
}
.bp-portfolio-foot strong {
  color: #111;
  font-weight: 500;
}

/* ========================================================================
   Client roster — 5 rounded boxes side by side (custom_html replacement
   for the icons-row roster)
   ======================================================================== */
/* Editorial-list layout (replaces the previous 5-card roster grid).
   Five rows, three columns: vertical label / italic claim / names list.
   Stacks to a single column under 900px. */
.bp-roster {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

.bp-roster__row {
  display: grid;
  grid-template-columns: 200px 1fr 1.2fr;
  gap: 48px;
  align-items: baseline;
  padding: 32px 0;
  border-top: 1px solid #e5e5e2;
}

.bp-roster__row:last-child {
  border-bottom: 1px solid #e5e5e2;
}

.bp-roster__vert {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #666;
  font-weight: 600;
  line-height: 1.4;
}

.bp-roster__claim {
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: #111;
  line-height: 1.25;
}

.bp-roster__claim em {
  /* Theme highlight font (Playfair Italic) for the count phrase. */
  font-family: var(--FONT-STACK-HIGHLIGHT);
  font-style: italic;
  font-weight: 400;
  color: #111;
  margin-right: 6px;
}

.bp-roster__names {
  font-size: 1rem;
  line-height: 1.6;
  color: #666;
  letter-spacing: 0.01em;
}


/* PSI a11y (operator 2026-06-02): inline body links to the Backdrops page
   were distinguishable by colour only. Underline the bare (un-classed)
   content links so they pass "links rely on colour"; button-styled links
   (which carry a class) are excluded so CTAs are untouched. */
a[href="/pages/backdrops"]:not([class]){
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ========================================================================
   90-Day Pilot — red underline beneath the alternate-font heading.

   Theme renders the <em>...</em> in this heading as a wrapped structure:
     <p id="Text--heading_mRaEpe" class="text-highlight-wrapper--alternate-font">
       <span class="text-highlight__break">
         <text-highlight class="text-highlight" data-highlight-type="alternate-font">
           <span class="text-highlight__string">90-Day Pilot</span>
         </text-highlight>
       </span>
     </p>
   The block's id (`Text--heading_mRaEpe`) is stable across templates because
   it derives from the JSON block key, so we use it to scope this rule to ONLY
   this heading (without leaking to the Thesis or other alternate-font uses).
   The `opacity: 1 !important` overrides theme.css's default opacity:0 on the
   string (which depends on a JS animation that may not fire when
   animations_enabled is false).
   ======================================================================== */
#Text--heading_mRaEpe .text-highlight__string {
  opacity: 1 !important;
  text-decoration: underline;
  /* red-on-dark: this heading sits on a black pilot card (operator 2026-06-02) */
  text-decoration-color: var(--bp-red-on-dark);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}

/* ========================================================================
   Photo grid (bphome_portfolio): swap visual positions 3 and 4 on mobile.
   Mobile layout is a 2-column grid; without intervention items render in
   DOM order p1..p8. The user wants p4 in the 3rd visual slot and p3 in
   the 4th. CSS Grid `order` controls visual sequence — but items with
   default order (0) leapfrog explicitly-ordered items, so all 8 items
   need explicit values to keep p1/p2/p5/p6/p7/p8 in place.
   Note: lightbox next/prev navigation still uses DOM order (data-photo-
   grid-item indexes), so navigating from the swapped item won't follow
   the visual sequence — minor UX wart, lightbox click-to-open is fine.
   ======================================================================== */
@media (max-width: 600px) {
  [data-section-id$="bphome_portfolio"] .photo-grid__item:nth-child(1) { order: 1; }
  [data-section-id$="bphome_portfolio"] .photo-grid__item:nth-child(2) { order: 2; }
  [data-section-id$="bphome_portfolio"] .photo-grid__item:nth-child(3) { order: 4; }
  [data-section-id$="bphome_portfolio"] .photo-grid__item:nth-child(4) { order: 3; }
  [data-section-id$="bphome_portfolio"] .photo-grid__item:nth-child(5) { order: 5; }
  [data-section-id$="bphome_portfolio"] .photo-grid__item:nth-child(6) { order: 6; }
  [data-section-id$="bphome_portfolio"] .photo-grid__item:nth-child(7) { order: 7; }
  [data-section-id$="bphome_portfolio"] .photo-grid__item:nth-child(8) { order: 8; }
}

/* ========================================================================
   Operator-requested mobile/visual tweaks (round 2026-04-29)
   ======================================================================== */

/* Hero stat line: center on mobile only.
   Block ID is stable from the JSON template (subheading_NiNBND). */
@media (max-width: 600px) {
  #ImageWithText--subheading_NiNBND { text-align: center !important; }
}

/* Service-grid card price block centering moved to the base
   .column-item__footer / .column-item__price rules earlier in this
   file (footer is now flex-direction: column on all viewports so
   price stacks above pill, both centered). */

/* Loading overlay: kill the black-to-white flash on page load.
   The overlay is purely cosmetic (masks FOUC during initial paint).
   Removing it eliminates the flash entirely. If reinstated later,
   change `display: none` to `background: #ffffff !important` to
   keep the overlay but make it white instead of black. */
.loading-overlay { display: none !important; }

/* ============================================================================
   ABOUT PAGE
   ----------------------------------------------------------------------------
   Custom HTML section styling for /pages/about. Loaded sitewide via custom.css
   but selectors are scoped under .bp-about so they only match the About page.

   Class namespace: bp-about-* (sub-namespace within the project bp- prefix).
   Reuses the homepage .bp-jump-nav class verbatim so any future site-wide
   tweak applies here automatically.

   Adopts site palette:
     ink #0b0b0b · mute #666 · hairline #e0e0e0 · surface #fafafa
     warm-cream #fff7f2 NOT used here per operator (greys-only)

   HANDOFF doc compliance:
     - !important on critical layout properties (cache-busting against stale
       inline styles or external rule injection).
     - Mobile-first; every multi-column grid collapses to single column at 768px.
     - Typography weights capped at 500 (theme only loads up to 500).
   ============================================================================ */

/* ---- Tokens (scoped to .bp-about wrapper) ---- */
.bp-about{
  --bp-about-ink:var(--ink);
  --bp-about-ink-2:var(--ink-2);
  --bp-about-mute:var(--mute);
  --bp-about-line:var(--hair);
  --bp-about-surface:var(--paper);
}
.bp-about *{box-sizing:border-box !important;}

/* Anchored H2s + section anchors — scroll-margin-top so jump-nav clicks don't
   bury the destination heading under the theme's sticky site header.
   `#koby-sirkovich` is the alias stub for the head-photographer section,
   used by external bylines/links and the schema Person @id. */
.bp-about h2[id], .bp-about [id^="how-we-"], .bp-about [id^="brand-"],
.bp-about [id^="head-"], .bp-about [id^="client"],
.bp-about [id^="speak"], .bp-about [id^="award"],
#koby-sirkovich {
  scroll-margin-top:100px !important;
}

/* SITEWIDE jump-nav anchor offset (operator 2026-06): any <section id="…"> that a
   "Jump to section" link targets must clear the sticky site header, otherwise the
   destination heading lands hidden behind the menu. Pages with their own, more
   specific anchor rules (about, exec, on-location, faq) keep those; this is the
   base for every other jump-nav section (event, services, booth, pricing, etc.).
   scroll-margin-top does not stack and has no layout effect — purely scroll landing. */
section[id] { scroll-margin-top: 90px; }

/* Empty anchor element next to anchored H2s — invisible, zero-height. */
.bp-anchor{
  display:block !important;
  height:0 !important;
  visibility:hidden !important;
}
/* Em tags in custom-HTML headings: Palo Alto's `alternate-font` Liquid
   transform (which wraps em → <text-highlight class="text-highlight" ...>)
   only runs inside native theme sections. Custom-HTML keeps raw <em>, so we
   reach for the same theme CSS variables (--FONT-STACK-HIGHLIGHT etc.) to
   apply Playfair Display italic ourselves. */
.bp-about-sect-h em,
.bp-about-finalcta__h em{
  font-family:var(--FONT-STACK-HIGHLIGHT, "Playfair Display", serif) !important;
  font-style:var(--FONT-STYLE-HIGHLIGHT, italic) !important;
  font-weight:var(--FONT-WEIGHT-HIGHLIGHT, 400) !important;
}

/* ---- bp-jump-nav (mirrors homepage bphome_author rules verbatim so any
        future site-wide tweak applies here automatically) ---- */
.bp-jump-nav{background:#fafafa;padding:25px 20px;border-top:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0;}
.bp-jump-nav-inner{max-width:1280px;margin:0 auto;text-align:center;}
.bp-jump-nav-title{font-size:0.85rem;font-weight:500;margin-bottom:15px;color:#666;letter-spacing:0.5px;}
.bp-jump-nav-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;}
.bp-jump-nav a{display:inline-block;padding:10px 16px;background:transparent;border:1px solid #666;color:#000;text-decoration:none;font-size:0.95rem;font-weight:500;border-radius:30px;transition:background 0.2s ease,color 0.2s ease;}
.bp-jump-nav a:hover{background:#000;color:#fff;}
@media (min-width:768px){
  .bp-jump-nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;}
  .bp-jump-nav-title{margin-bottom:0;white-space:nowrap;flex-shrink:0;}
  .bp-jump-nav-buttons{justify-content:flex-end;}
}
#who-we-are{scroll-margin-top:90px;}

/* Operator update 2026-05-04: strip the inner `.about-awards { background:#fff;
   padding:10px 10px }` rule that the LIVE awards <style> block ships with.
   That wrapper was creating a small white frame around the cards on top of
   our #fafafa section bg (visible artifact). Set it transparent so the
   section's #fafafa shows through directly to the white cards inside. */
.bp-about-awards-section .about-awards{
  background:transparent !important;
  padding:0 !important;
}

/* Award rows live inside white card columns → hover bg #fafafa to match the
   site-wide hover pattern (rest of grid logos use the same flip). */
.about-awards .award-item{
  border-radius:0 !important;
  padding:0 !important;
  margin:0 !important;
  transition:opacity 160ms ease !important;
}
.about-awards .award-item:hover{
  opacity:1 !important;
}
/* Operator 2026-06-03 (design): smaller award text to match .ab-award. */
.about-awards .award-name{ font-size:14px !important; line-height:1.3 !important; }
.about-awards .award-detail{ font-size:12.5px !important; line-height:1.5 !important; }

/* Column = white card with NO padding + overflow:hidden so the dark title
   bar sits flush at the top, clipped to the rounded corners (design
   .ab-awcol). The award list carries the inner padding instead. */
.about-awards .awards-column{
  background:#ffffff !important;
  border-radius:24px !important;
  padding:0 !important;
  overflow:hidden !important;
  border:1px solid var(--bp-about-line) !important;
  text-align:left !important;
}
.about-awards .awards-list{
  padding:18px 24px 22px !important;
}

/* Operator 2026-06-03 (design): award-column title as a dark header bar —
   category name in white (Poppins uppercase) on the left, count in red
   italic (Playfair) on the right. Red on the dark bar uses the red-on-dark
   token. Logos below are unchanged. */
.about-awards .awards-column h3{
  font-family:Poppins,sans-serif !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:0.14em !important;
  text-transform:uppercase !important;
  color:#fff !important;
  background:var(--bp-about-ink) !important;
  display:flex !important;
  align-items:baseline !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin:0 !important;
  padding:16px 24px !important;
  border-radius:0 !important;
  border-bottom:none !important;
  text-align:left !important;
}

/* ---- Final CTA — dark band with radial-gradient overlay ---- */
.bp-about-finalcta{
  padding:100px 60px !important;
  background:#070707 !important;
  color:#ffffff !important;
  text-align:center !important;
  position:relative !important;
  overflow:hidden !important;
}
.bp-about-finalcta::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:none !important;
}
.bp-about-finalcta > *{position:relative !important;}
/* UNIFIED bottom-CTA spec (operator 2026-06): title size = contact (clamp), title all
   white incl. em, body = exec (1rem/1.7/rgba .72/640px), width = services narrow (760px),
   bg #070707, extra links = event (__tertiary). Every page's bottom CTA uses this. */
.bp-about-finalcta__h{
  font-family:Poppins,sans-serif !important;
  font-size:clamp(28px, 3.6vw, 44px) !important;
  font-weight:500 !important;
  line-height:1.15 !important;
  letter-spacing:-0.02em !important;
  margin:0 auto 18px !important;
  max-width:760px !important;
  color:#ffffff !important;
}
.bp-about-finalcta__h em{
  font-style:italic !important;
  color:#ffffff !important;
  font-weight:400 !important;
}
.bp-about-finalcta__lead{
  font-family:Poppins,sans-serif !important;
  font-size:1rem !important;
  line-height:1.7 !important;
  color:rgba(255,255,255,0.72) !important;
  max-width:640px !important;
  margin:0 auto 28px !important;
}
.bp-about-finalcta__actions{
  display:flex !important;
  gap:14px !important;
  justify-content:center !important;
  align-items:center !important;
  flex-wrap:wrap !important;
}
.bp-about-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-family:Poppins,sans-serif !important;
  padding:18px 32px !important;
  font-weight:500 !important;
  font-size:13px !important;
  letter-spacing:0.12em !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
  border-radius:999px !important;
  transition:background 120ms ease,color 120ms ease,box-shadow 120ms ease !important;
}
.bp-about-btn--white{background:#ffffff !important;color:#0b0b0b !important;}
.bp-about-btn--white:hover{box-shadow:0 6px 18px -6px rgba(0,0,0,0.4) !important;}
.bp-about-btn--ghost{
  background:transparent !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,0.4) !important;
}
.bp-about-btn--ghost:hover{border-color:#ffffff !important;}
.bp-about-finalcta__tertiary{
  display:block !important;
  margin:8px auto 0 !important;
  font-family:Poppins,sans-serif !important;
  font-size:13px !important;
  color:rgba(255,255,255,0.65) !important;
  text-decoration:underline !important;
  text-underline-offset:4px !important;
  letter-spacing:0.04em !important;
}
.bp-about-finalcta__tertiary:hover{color:#ffffff !important;}
/* operator 2026-06: stack multiple tertiary links (first one gets the larger gap from the buttons). */
.bp-about-finalcta__actions + .bp-about-finalcta__tertiary{ margin-top:22px !important; }
/* CTA body links (e.g. home About / Press) were inheriting the global black link colour -> invisible on the
   #070707 band. Make them the same colour as the body copy, underlined so they read as links. */
.bp-about-finalcta__lead a{ color:inherit !important; text-decoration:underline !important; text-underline-offset:2px !important; }
.bp-about-finalcta__lead a:hover{ color:#ffffff !important; }


/* ---- About hero CTAs side-by-side on desktop. Mirrors the homepage
       pattern (see [id*="section_image_with_text_7FKgfj"] above): the
       attribute-contains selector matches both the Shopify wrapper id
       (`shopify-section-...`) AND the theme's own `ImageWithText--...`
       wrapper, so the rule survives whichever DOM Shopify renders.
       `inline-flex` preserves the .main-buttons inner flex layout while
       making the outer element flow inline with its sibling button block.
       ---- */
[id*="section_image_with_text_rCbEdX"] .image-with-text__buttons {
  display: inline-flex;
  vertical-align: top;
  margin-right: 12px;
}
@media (max-width: 600px) {
  [id*="section_image_with_text_rCbEdX"] .image-with-text__buttons {
    display: flex;
    margin-right: 0;
  }
}

/* ---- Section banding: alternating #fafafa for native sections.
       Operator request 2026-05-03: replace border-top lines with
       background-color alternation for visual rhythm.

       Pattern (top → bottom):
         Hero (native section_image_with_text_rCbEdX): #ffffff (theme default)
         Thesis (native section_text_aQdi4y):           #fafafa
         Jump nav (custom-html):                        #fafafa (existing)
         Section 1 native (section_text_xP6FKT):        #ffffff (theme default)
         Section 1 closing + roster (custom):           #ffffff
         Section 2 pillars (custom):                    #fafafa (set above)
         Section 3 photographer (custom):               #ffffff
         Section 4 clients (custom):                    #fafafa (set above)
         Section 5 speaking (custom):                   #ffffff
         Section 6 awards (custom):                     #fafafa (set above)
         FAQ (native section-accordions):               #ffffff (theme default)
         Pricing (native abt_pricing):                  #fafafa
         Final CTA (custom):                            #0b0b0b (dark, set above) ---- */
#shopify-section-section_text_aQdi4y{background:#fafafa !important;}
#shopify-section-abt_pricing{background:#fafafa !important;}

/* ============================================================================
   END ABOUT PAGE
   ============================================================================ */


/* ============================================================================
   SERVICES PAGE  (page handle: corporate-photography-services-toronto)
   Namespace: bp-services-*
   Source design: /Design System/Services Page v1.html
   Build conventions: monochrome greys (no cream); section banding via #fafafa
   alternation; rounded corners; pill buttons; Playfair italic accent on <em>
   and .accent. All operator-visible copy must be em-dash-free.
   ============================================================================ */

/* ---- design tokens ---- */
.bp-services{
  --bp-svc-ink:var(--ink);
  --bp-svc-ink-2:var(--ink-2);
  --bp-svc-mute:var(--mute);
  --bp-svc-hair:var(--hair);
  --bp-svc-paper:var(--white);
  --bp-svc-neutral:var(--paper);
  --bp-svc-red:#d43747;
  --bp-svc-red-soft:rgba(212,55,71,0.08);
  --bp-svc-r-md:20px;
  --bp-svc-r-lg:28px;
  --bp-svc-r-pill:999px;
}

/* Playfair italic accent for <em> and .accent inside services-page custom-html */
.bp-services em,
.bp-services .accent{
  font-family: var(--FONT-STACK-HIGHLIGHT, "Playfair Display", Georgia, serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

/* image placeholder (black box with caption — temporary until operator pulls images) */
.bp-services-imgph{
  position:relative;
  background:#0a0a0a;
  color:rgba(255,255,255,0.7);
  border-radius:var(--bp-svc-r-md);
  overflow:hidden;
  display:flex;align-items:flex-end;justify-content:flex-start;
  width:100%;
  font-family:Poppins,sans-serif;
}
.bp-services-imgph .cap{
  font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  padding:14px 16px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
  width:100%;
  font-weight:500;
}

/* ---- HERO with sidebar ---- */
.bp-services-hero{
  background:#fff;
  padding:20px 60px;
}
.bp-services-hero__inner{max-width:1280px;margin:0 auto;}
.bp-services-hero__crumb{
  font-size:12px;color:var(--bp-svc-mute);
  margin-bottom:24px;letter-spacing:0.02em;
}
.bp-services-hero__crumb .sep{margin:0 8px;color:#bbb;}
.bp-services-hero__crumb .here{color:var(--bp-svc-ink);font-weight:500;}
.bp-services-hero__grid{
  display:grid;
  grid-template-columns: 1.55fr 1fr;
  gap:64px;
  align-items:start;
}
.bp-services-hero__title{
  font-family:Poppins,sans-serif;
  font-weight:500;
  font-size:64px;line-height:1.1;letter-spacing:-0.02em;
  margin:0 0 24px;color:var(--bp-svc-ink);
}
.bp-services-hero__lede{
  font-family:Poppins,sans-serif;
  font-size:1rem;line-height:1.65;color:var(--bp-svc-ink-2);
  margin:0 0 32px;max-width:640px;
}
.bp-services-hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px;}
.bp-services-hero__cta .bp-svc-btn{margin:0;}
.bp-services-hero__micro{
  font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--bp-svc-mute);font-weight:600;
}

/* hero sidebar — replaces the standalone "numbered overview" section */
.bp-services-jumpnav{
  background:var(--bp-svc-neutral);
  border-radius:var(--bp-svc-r-lg);
  padding:24px 28px;
  position:sticky;top:24px;
}
.bp-services-jumpnav__h{
  display:flex;align-items:baseline;justify-content:space-between;
  padding-bottom:14px;border-bottom:1px solid var(--bp-svc-hair);
  margin-bottom:8px;
}
.bp-services-jumpnav__h .label{
  font-size:11px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--bp-svc-mute);font-weight:600;
}
.bp-services-jumpnav__h .accent{font-size:14px;color:var(--bp-svc-ink);}
.bp-services-jumpnav ol{list-style:none;padding:0;margin:0;counter-reset:bp-svc-jump;}
.bp-services-jumpnav li{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--bp-svc-hair);
  counter-increment:bp-svc-jump;
}
.bp-services-jumpnav li:last-child{border-bottom:none;}
.bp-services-jumpnav li::before{
  content:counter(bp-svc-jump,decimal-leading-zero);
  font-family: var(--FONT-STACK-HIGHLIGHT, "Playfair Display", Georgia, serif);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0;
  color: var(--bp-svc-ink);
  flex-shrink: 0;
  padding-top: 2px;
  line-height: 1.2;
}
.bp-services-jumpnav .ttl{
  flex:1;display:flex;flex-direction:column;gap:2px;
  font-size:14px;color:var(--bp-svc-ink);font-weight:500;line-height:1.3;
}
.bp-services-jumpnav .ttl small{
  font-size:11.5px;color:var(--bp-svc-mute);font-weight:400;letter-spacing:0;
}
.bp-services-jumpnav a.anchor{
  font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--bp-svc-ink);text-decoration:none;font-weight:600;
  padding:4px 10px;border:1px solid var(--bp-svc-hair);border-radius:var(--bp-svc-r-pill);
  align-self:center;flex-shrink:0;transition:background 160ms,color 160ms;
}
.bp-services-jumpnav a.anchor:hover{background:var(--bp-svc-ink);color:#fff;border-color:var(--bp-svc-ink);}

/* shared button styles */
.bp-svc-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 22px;border-radius:var(--bp-svc-r-pill);
  font-family:Poppins,sans-serif;font-size:13.5px;font-weight:600;letter-spacing:0.01em;
  text-decoration:none;cursor:pointer;
  transition:background 160ms ease,color 160ms ease,border-color 160ms ease;
  border:1px solid transparent;
}
.bp-svc-btn--black{background:var(--bp-svc-ink);color:#fff;}
.bp-svc-btn--black:hover{background:#222;color:#fff;}
.bp-svc-btn--ghost{background:transparent;color:var(--bp-svc-ink);border-color:var(--bp-svc-ink);}
.bp-svc-btn--ghost:hover{background:var(--bp-svc-ink);color:#fff;}
.bp-svc-btn .arr{transition:transform 160ms ease;}
.bp-svc-btn:hover .arr{transform:translateX(3px);}

/* ---- THESIS ---- */
.bp-services-thesis{
  background:var(--bp-svc-neutral);
  padding:20px 60px;
}
.bp-services-thesis__inner{
  max-width:980px;margin:0 auto;
  text-align:left;
}

.bp-services-thesis blockquote{
  font-family:Poppins,sans-serif;font-weight:500;
  /* operator 2026-06: match the pricing-page thesis (.bp-pricing-da) — calm prose,
     not a 32px statement, so it reads the same on mobile and desktop. */
  font-size:20px;line-height:1.6;letter-spacing:-0.01em;
  color:var(--bp-svc-ink);margin:0;
}

/* ---- generic SECTION wrapper used by photo/video/team/modes/pricing/industries ---- */
.bp-services-sect{
  padding:20px 60px;background:#fff;
}
.bp-services-sect.bp-services-sect--alt{background:var(--bp-svc-neutral);}
.bp-services-sect__inner{max-width:1280px;margin:0 auto;}
.bp-services-sect__kicker{
  font-size:11px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--bp-svc-red);font-weight:600;margin-bottom:18px;
}
.bp-services-sect__h{
  font-family:Poppins,sans-serif;font-weight:500;
  font-size:44px;line-height:1.1;letter-spacing:-0.02em;
  color:var(--bp-svc-ink);margin:0 0 22px;
}
.bp-services-sect__intro{
  font-size:1rem;line-height:1.7;color:var(--bp-svc-ink-2);
  max-width:920px;margin:0 0 28px;
}
.bp-services-sect__intro a{color:var(--bp-svc-ink);text-decoration:underline;text-underline-offset:3px;}

/* ---- PHOTO + VIDEO CATALOG cards (shared .bp-services-svc-grid) ---- */
.bp-services-svc-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:24px;
}
.bp-services-svc-grid--video{grid-template-columns:repeat(3,1fr);gap:20px;}

.bp-services-svc-card{
  background:#fff;border:1px solid var(--bp-svc-hair);
  border-radius:var(--bp-svc-r-md);padding:0 0 28px;
  display:flex;flex-direction:column;overflow:hidden;
  transition:border-color 160ms ease, box-shadow 160ms ease;
}
.bp-services-sect--alt .bp-services-svc-card{background:#fff;}
.bp-services-svc-card:hover{border-color:#bbb;box-shadow:0 12px 40px -20px rgba(0,0,0,0.18);}

/* video-grid override — no card chrome (operator request: image only, no white card around the text) */
/* Video cards sit on WHITE (design .sv-vid) so the dark heading + bullets read
   on the dark section. Image full-bleed at top; body padded. */
.bp-services-svc-grid--video .bp-services-svc-card{
  background:#fff !important;
  border:1px solid var(--bp-svc-hair) !important;
  border-radius:var(--bp-svc-r-md) !important;
  box-shadow:none !important;
  padding:0 0 6px !important;
  overflow:hidden !important;
}
.bp-services-svc-grid--video .bp-services-svc-card:hover{
  border-color:#bbb !important;
}
.bp-services-svc-grid--video .bp-services-svc-card__media{
  border-radius:0;
  overflow:hidden;
  margin-bottom:18px;
}
.bp-services-svc-grid--video .bp-services-svc-card__h-row,
.bp-services-svc-grid--video .bp-services-svc-card__sub,
.bp-services-svc-grid--video .bp-services-svc-card__bullets{
  padding-left:24px;
  padding-right:24px;
}
/* First two video thumbnails are lighter -> dark labels on a light gradient
   (operator); the third keeps the white-on-dark treatment. */
.bp-services-svc-grid--video .bp-services-svc-card:nth-child(1) .bp-services-svc-card__tag,
.bp-services-svc-grid--video .bp-services-svc-card:nth-child(2) .bp-services-svc-card__tag{
  background:linear-gradient(to top, rgba(255,255,255,0.96), rgba(255,255,255,0)) !important;
}
.bp-services-svc-grid--video .bp-services-svc-card:nth-child(1) .bp-services-svc-card__tag .lab,
.bp-services-svc-grid--video .bp-services-svc-card:nth-child(2) .bp-services-svc-card__tag .lab{ color:#333 !important; }
.bp-services-svc-grid--video .bp-services-svc-card:nth-child(1) .bp-services-svc-card__tag .lab b,
.bp-services-svc-grid--video .bp-services-svc-card:nth-child(2) .bp-services-svc-card__tag .lab b{ color:#000 !important; }
.bp-services-svc-grid--video .bp-services-svc-card:nth-child(1) .bp-services-svc-card__tag .badge,
.bp-services-svc-grid--video .bp-services-svc-card:nth-child(2) .bp-services-svc-card__tag .badge{ color:#000 !important; border-color:rgba(0,0,0,0.4) !important; }
.bp-services-svc-grid--video .bp-services-svc-card__cta{ margin-left:24px; margin-right:24px; }
.bp-services-svc-card__media{
  position:relative;
  aspect-ratio:1.5/1;
  background:#fff;
  margin-bottom:22px;
  overflow:hidden;
}
/* photo fills its media container with proper aspect-cropping (NOT the .play
   SVG — that's targeted via `.play img` further down). > img matches direct
   children only so it scopes correctly. */
.bp-services-svc-card__media > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.bp-services-svc-card__media .cap{
  width:100%;padding:14px 18px;font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(255,255,255,0.7);font-weight:500;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);
}
.bp-services-svc-card__media .play{
  /* bare SVG centered on the thumbnail (no backdrop). z-index:2 puts it above
     the photo, which is also position:absolute. */
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:65px;height:65px;
  pointer-events:none;
  z-index:2;
  transition:transform 200ms ease;
}
.bp-services-svc-card__media .play img{
  width:100%;height:100%;display:block;
}

.bp-services-svc-card__h-row{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:0 24px;margin-bottom:8px;
}
.bp-services-svc-card__h-row h3{
  font-family:Poppins,sans-serif;font-weight:500;
  font-size:24px;line-height:1.15;letter-spacing:-0.015em;
  color:var(--bp-svc-ink);margin:0;
}
.bp-services-svc-card__h-row .price{
  font-size:11px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--bp-svc-ink);font-weight:600;
  background:var(--bp-svc-neutral);padding:6px 12px;border-radius:var(--bp-svc-r-pill);
  white-space:nowrap;flex-shrink:0;align-self:flex-start;
}
.bp-services-svc-card__sub{
  padding:0 24px;font-size:1rem;color:var(--bp-svc-mute);
  margin:0 0 18px;letter-spacing:0.02em;
}
.bp-services-svc-card__bullets{
  list-style:none;padding:0 24px;margin:0 0 22px;
}
.bp-services-svc-card__bullets li{
  font-size:1rem;line-height:1.6;color:var(--bp-svc-ink-2);
  padding:8px 0;border-top:1px solid var(--bp-svc-hair);
}
.bp-services-svc-card__bullets li:first-child{border-top:none;}
.bp-services-svc-card__bullets a{color:var(--bp-svc-ink);text-decoration:underline;text-underline-offset:2px;}
/* card CTA — uses native theme btn classes (btn btn--solid btn--black btn--medium)
   for size + hover behavior (matches homepage / about CTAs). This rule handles
   ONLY flex positioning so the button sits at bottom-left of the card and is
   shrink-to-fit instead of stretching across the card width. */
.bp-services-svc-card__cta{
  margin:auto 24px 24px 24px;
  align-self:flex-start;
  width:auto;
}

/* ---- TEAM HEADSHOT DAY (4-step time-pill grid) ---- */
.bp-services-team{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;
}
.bp-services-team__media{
  aspect-ratio:1/1.05;
}

/* 9-cell team day grid (replaces single media; matches the blog hero pattern
   from /pages/how-often-refresh-team-headshots) */
.bp-services-team__media-card{
  background:var(--bp-svc-neutral);
  border-radius:var(--bp-svc-r-md);
  padding:16px;
  align-self:start;
}
.bp-services-team__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
}
.bp-services-team__cell{
  width:100%;
  aspect-ratio:1 / 1;
  border-radius:20px;
  position:relative;
  /* override the larger .bp-services-imgph caption sizing for these tiny cells */
}
.bp-services-team__cell .cap{
  font-size:9px;
  letter-spacing:0.10em;
  padding:6px 8px;
}
/* When real <img> tags replace the placeholder divs, swap each
   <div class="bp-services-team__cell bp-services-imgph"><span class="cap">...</span></div>
   for: <img src="..." alt="..." width="600" height="600"> */
.bp-services-team__grid img{
  width:100%;
  height:auto;
  aspect-ratio:1 / 1;
  object-fit:cover;
  border-radius:20px;
  display:block;
  align-self:start;  /* prevent CSS Grid from stretching to row height */
}
.bp-services-team__grid{align-items:start;}  /* belt + suspenders */

.bp-services-team__steps{display:flex;flex-direction:column;gap:8px;}
.bp-services-team__step{
  display:grid;grid-template-columns:120px 1fr;gap:24px;
  padding:22px 0;border-top:1px solid var(--bp-svc-hair);
  align-items:start;
}
.bp-services-team__step:last-child{border-bottom:1px solid var(--bp-svc-hair);}
.bp-services-team__time{
  font-family:Poppins,sans-serif;font-weight:600;
  font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--bp-svc-ink);
  background:var(--bp-svc-neutral);
  border:1px solid var(--bp-svc-hair);
  padding:6px 12px;border-radius:var(--bp-svc-r-pill);
  white-space:nowrap;justify-self:start;
}
/* Operator 2026-06-02 (PSI a11y): step headings on the services page were
   h4 directly under the section h2 (skipped h3). The services template now
   uses h3; selector covers h3 + h4 so styling is identical on every page
   that uses this component (exec/team still use h4). */
.bp-services-team__step h3,
.bp-services-team__step h4{
  font-family:Poppins,sans-serif;font-weight:600;
  font-size:17px;line-height:1.25;letter-spacing:-0.005em;
  color:var(--bp-svc-ink);margin:0 0 6px;
}
.bp-services-team__step p{
  font-size:1rem;line-height:1.65;color:var(--bp-svc-ink-2);margin:0;
}
.bp-services-team__foot{
  margin-top:36px;font-size:14px;line-height:1.65;color:var(--bp-svc-ink-2);max-width:920px;
}
.bp-services-team__foot a{color:var(--bp-svc-ink);text-decoration:underline;text-underline-offset:3px;}

/* ---- DELIVERY MODES (3-panel layout, aligned rows via grid) ---- */
/* The whole 3-panel block uses one parent grid so each row aligns across all 3 panels.
   Rows: media | header | sub | row1..row6 (Lighting / Backdrops / Setup / Best for / Travel / Pricing) */
.bp-services-modes{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  /* 9 rows: media, head, sub, then 6 criteria rows. Subgrid in each panel
     inherits these tracks so the row dividers line up across all 3 columns
     even when content lengths vary. */
  grid-template-rows: auto auto auto repeat(6, auto);
  column-gap: 20px;
  row-gap: 0;
  margin-bottom:36px;
}

.bp-services-modes__media{
  position:relative;
  aspect-ratio:1.4/1;
  background:#fff;
  margin-bottom:18px;
  border-radius:var(--bp-svc-r-md);
  overflow:hidden;
}
.bp-services-modes__media > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.bp-services-modes__head{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:8px;
}
.bp-services-modes__head h3{
  font-family:Poppins,sans-serif;font-weight:500;
  font-size:22px;line-height:1.15;letter-spacing:-0.015em;
  color:var(--bp-svc-ink);margin:0;
}
.bp-services-modes__sub{
  font-size:1rem;line-height:1.55;color:var(--bp-svc-mute);
  padding-bottom:14px;border-bottom:2px solid var(--bp-svc-ink);
  margin-bottom:0;
}
.bp-services-modes__row{
  display:grid;grid-template-columns:1fr;gap:4px;
  padding:14px 0;border-bottom:1px solid var(--bp-svc-hair);
  align-content:start;
}
.bp-services-modes__row .k{
  font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--bp-svc-mute);font-weight:600;
}
.bp-services-modes__row .v{
  font-size:14px;line-height:1.5;color:var(--bp-svc-ink-2);
}
/* (per-panel grid-row positioning removed — each panel is now a self-contained flex card) */

.bp-services-modes-foot{
  font-size:14px;line-height:1.65;color:var(--bp-svc-ink-2);
  max-width:920px;margin:0;
}

/* ---- PRICING PILLS ---- */
.bp-services-pricing{display:flex;flex-direction:column;gap:14px;margin-bottom:30px;}
.bp-services-pricing__row{
  display:grid;grid-template-columns:240px 1fr auto;gap:32px;
  align-items:center;
  background:#fff;border:1px solid var(--bp-svc-hair);
  border-radius:80px;
  padding:26px 36px;
}
.bp-services-sect--alt .bp-services-pricing__row{background:#fff;}
.bp-services-pricing__name{display:flex;align-items:baseline;gap:14px;}
.bp-services-pricing__name .accent{
  font-size:32px;color:var(--bp-svc-red);font-weight:400;
}
.bp-services-pricing__name .h{
  font-family:Poppins,sans-serif;font-weight:500;font-size:22px;letter-spacing:-0.015em;
  color:var(--bp-svc-ink);
}
.bp-services-pricing__desc{
  font-size:1rem;line-height:1.65;color:var(--bp-svc-ink-2);
}
.bp-services-pricing__desc strong{font-weight:600;color:var(--bp-svc-ink);}
.bp-services-pricing__cta{
  font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--bp-svc-ink);text-decoration:none;font-weight:600;
  white-space:nowrap;display:inline-flex;align-items:center;gap:8px;
}
.bp-services-pricing__cta .arr{transition:transform 160ms ease;}
.bp-services-pricing__cta:hover .arr{transform:translateX(4px);}
.bp-services-pricing-foot{
  font-size:13.5px;line-height:1.65;color:var(--bp-svc-mute);
  max-width:920px;margin:30px 0 0;
}
.bp-services-pricing-foot a{color:var(--bp-svc-ink);text-decoration:underline;text-underline-offset:3px;}

/* ---- responsive ---- */



/* ---- per-section background banding (alternate #fafafa / #fff) ---- */
/* The Shopify section IDs are set via section keys in page.corporate-photography-services-toronto.json:
     services_hero            -> #fff
     services_trust           -> #fff
     services_thesis          -> #fafafa
     services_photo_catalog   -> #fff
     services_video_catalog   -> #fafafa
     services_team_day        -> #fff
     services_modes           -> #fafafa
     services_pricing         -> #fff
     services_industries      -> #fafafa
   Native FAQ + closing CTA carry their own bg.
*/



/* ---- closing CTA eyebrow ::before pseudo-element removed in round 4.
        The headline now carries "Need a service customized to your team?"
        directly (with "your team" in Playfair italic via <em>), so no
        injection needed. ---- */

/* ---- thesis section is now native section-text (was custom-html). Keep the
        #fafafa banding and re-apply Playfair italic to <em> since the native
        wrapper no longer carries the .bp-services namespace class. ---- */
#shopify-section-services_thesis{background:#fafafa !important;}
#shopify-section-services_thesis em{
  font-family: var(--FONT-STACK-HIGHLIGHT, "Playfair Display", Georgia, serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}
/* clickable media indicator on cards with data-video */
.bp-services-svc-card__media[data-video]{cursor:pointer;}
.bp-services-svc-card__media[data-video]:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.bp-services-svc-card__media[data-video]:hover .play{
  transform:translate(-50%,-50%);
}

/* ============================================================================
   END SERVICES PAGE
   ============================================================================ */


/* ============================================================================
   BP LIGHTBOX GRID
   --------------------------------------------------------------
   Reusable click-to-enlarge image grid. Drop the markup pattern
   below into any section-custom-html block:

     <div class="bp-lightbox-grid" data-bp-lightbox>
       <button type="button" data-full="LARGE.jpg">
         <img src="THUMB.jpg" alt="...">
       </button>
       ... × N ...
     </div>
     <script src="..."> ... include the bp-lightbox JS once ... </script>

   The JS is initialized via window.__bpLightboxInited so the dialog
   is appended to <body> just once even if multiple custom-html blocks
   include the script. Click delegation reads the closest .bp-lightbox-grid
   and builds the prev/next sequence from its buttons.
   ============================================================================ */

.bp-lightbox-grid > button {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: block;
  width: 100%;
  height: 100%;
  font: inherit;
  color: inherit;
  border-radius: inherit;
  overflow: hidden;
  position: relative;
}
.bp-lightbox-grid > button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bp-lightbox-grid > button:focus-visible {
  outline: 2px solid #111;
  outline-offset: 2px;
}

/* Standalone 3×3 layout for use outside the existing services-team grid */
.bp-lightbox-grid--3x3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: 100%;
}
.bp-lightbox-grid--3x3 > button {
  aspect-ratio: 1;
  height: auto; /* override the shared .bp-lightbox-grid>button height:100% so aspect-ratio keeps cells 1:1 regardless of image srcset/ratio */
  border-radius: 20px;
}

/* About hero — staggered / "misaligned" cluster (operator 2026-06-03, design
   restructure). Offsets the three columns vertically for the misaligned-cards
   look the new design uses; images keep their 1:1 ratio. Scoped to the About
   hero so the gallery's 3x3 is unaffected. Flattened on mobile (tight grid). */
.bp-about-hero .bp-lightbox-grid--3x3 { align-items: start; }
.bp-about-hero .bp-lightbox-grid--3x3 > button:nth-child(3n+1) { transform: translateY(20px); }
.bp-about-hero .bp-lightbox-grid--3x3 > button:nth-child(3n+2) { transform: translateY(-14px); }
.bp-about-hero .bp-lightbox-grid--3x3 > button:nth-child(3n)   { transform: translateY(10px); }


/* Lightbox dialog (injected once into <body> by JS) */
.bp-lightbox-dialog {
  padding: 0;
  background: rgba(255, 255, 255, 0.97);
  border: none;
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
}
.bp-lightbox-dialog::backdrop { background: rgba(255, 255, 255, 0.97); }
.bp-lightbox-dialog .bp-lightbox-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.bp-lightbox-img {
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  display: block;
  transition: opacity 0.18s ease;
}
.bp-lightbox-close,
.bp-lightbox-prev,
.bp-lightbox-next {
  position: fixed;
  background: transparent;
  border: none;
  color: #000;
  cursor: pointer;
  font-family: inherit;
  font-size: 36px;
  line-height: 1;
  padding: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 160ms ease;
}
/* No hover background — icons rotate / swap visuals on hover instead. */
.bp-lightbox-close { top: 18px; right: 18px; }
.bp-lightbox-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.bp-lightbox-next { right: 18px; top: 50%; transform: translateY(-50%); }

/* ≤767px: arrows leave the fixed side rails for a centered in-flow row
   directly below the photo (matches .page-gallery-dialog + photo-grid).
   The .bp-lightbox-controls row is wrapped in JS (wrapBpLightboxControls
   in custom.js). visibility:hidden — not display:none — while loading so
   they don't overlap the spinner and the column doesn't jump when they
   reappear. Close button (fixed, top-right) is unchanged. PORTRAIT ONLY — landscape is
   too short for a 75vh photo + a row beneath it (arrows below the fold → scroll), so it
   keeps the desktop side arrows (base position:fixed resumes when this block drops). */
@media (max-width: 767px) and (orientation: portrait) {
  .bp-lightbox-dialog .bp-lightbox-inner { flex-direction: column; gap: 16px; }
  .bp-lightbox-dialog .bp-lightbox-img { max-height: 75vh; }
  .bp-lightbox-dialog .bp-lightbox-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 20px;
    gap: 0;
  }
  .bp-lightbox-dialog .bp-lightbox-prev,
  .bp-lightbox-dialog .bp-lightbox-next {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
  }
  .bp-lightbox-dialog[data-loading="true"] .bp-lightbox-controls { visibility: hidden; }
}

/* On the services team grid, button reset + pointer cursor (no zoom hover) */
.bp-services-team__grid[data-bp-lightbox] > button {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

/* Hero contact-sheet grid (about page) — no container fill; thumbs carry a 1px outline */
.bp-about-hero .bp-lightbox-grid--3x3 {
  background: transparent;
  padding: 0;
}
.bp-about-hero .bp-lightbox-grid--3x3 > button { border: 1px solid #e6e6e6; }



/* ----- bp-lightbox dialog: gallery-style nav + loading spinner ----- */
/* Match the home page photo-grid-lightbox: 45px buttons, rest/hover SVG
   swap on arrows, close X rotates 90° on hover. */
.bp-lightbox-dialog .bp-lightbox-close,
.bp-lightbox-dialog .bp-lightbox-prev,
.bp-lightbox-dialog .bp-lightbox-next {
  font-size: 0;
  width: 45px;
  height: 45px;
}
.bp-lightbox-dialog .gallery-icon {
  width: 45px !important;
  height: 45px !important;
  vertical-align: middle;
  transition: transform 0.2s ease;
  pointer-events: none;
}
/* Inline-block wrappers (we use spans inside the JS-injected buttons
   to host the rest/hover SVGs). Hide hover variant by default. */
.bp-lightbox-dialog .gallery-icon--hover { display: none; }



/* Loading state — black spinning circle + "Loading..." text shown
   while the full-size image fetches. Hidden once the image is decoded.
   Shared by every lightbox dialog on the site (bp-lightbox, photo-grid,
   page-gallery, backdrops).

   Instant show / instant hide: spinner appears the moment data-loading
   is set true and vanishes the moment it flips false. No fade.

   For fast image loads (under ~50 ms, e.g. cached images or small
   sources on the portfolio galleries), the spinner flashes too briefly
   to register — which is the correct UX outcome: the user gets the
   loaded image with no perceived delay. For slow loads (the original
   services team-day case with retina source images), the spinner
   stays visible for the whole fetch and disappears the moment the
   image is decoded. No lingering overlay. */
.bp-lightbox-loading,
.page-gallery-dialog__loading,
.photo-grid__dialog-loading,
.backdrops-dialog__loading {
  position: absolute;
  display: none;
  pointer-events: none;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #000;
  font-family: Poppins, sans-serif;
  font-weight: 500;
  letter-spacing: 0.02em;
  z-index: 5;
}
.bp-lightbox-dialog[data-loading="true"] .bp-lightbox-loading,
.page-gallery-dialog[data-loading="true"] .page-gallery-dialog__loading,
.backdrops-dialog[data-loading="true"] .backdrops-dialog__loading,
dialog[id^="BackdropsDialog"][data-loading="true"] .backdrops-dialog__loading,
dialog[id^="PageGalleryDialog"][data-loading="true"] .page-gallery-dialog__loading,
dialog.page-gallery-dialog[data-loading="true"] .page-gallery-dialog__loading,
dialog[id^="PhotoGridDialog"][data-loading="true"] .photo-grid__dialog-loading {
  display: flex;
}
.bp-lightbox-loading .spinner-icon,
.page-gallery-dialog__loading .spinner-icon,
.photo-grid__dialog-loading .spinner-icon,
.backdrops-dialog__loading .spinner-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  animation: spin 1s linear infinite;
}

/* Hide the image element while a new src is being fetched.
   Couples image visibility to the same `data-loading` signal the
   spinner uses, so the moment the spinner disappears the image
   appears — no overlap, no "loading text over visible image", no
   "previous image flashes briefly while new one is loading".

   Without this rule, browser default behaviour kept the prior image
   visible (or showed a broken-image placeholder) while the new one
   loaded, so users saw:
     - Click thumbnail (first open): spinner over the empty dialog
       background, image fades in.   ✓ correct
     - Click NEXT/PREV: spinner overlay appears OVER the previous
       still-visible image until the new one loads.   ✗ glitch
     - Close dialog + click another thumbnail: the prior image
       flashes for one frame, then spinner shows over it until new
       image loads.   ✗ glitch

   With this rule, on every src change the image is hidden via
   `opacity: 0` for the duration of `data-loading="true"`, and
   becomes visible the instant `data-loading` flips back to "false"
   (which the global observer in custom.js does on the `load` event).

   `transition` is a hair fast (0.12s) so cached images that decode
   in one frame still look smooth, and slow loads have a quick
   fade-in rather than appearing abruptly. */
.bp-lightbox-img,
.page-gallery-dialog__img,
.photo-grid__dialog-img,
.backdrops-dialog__img {
  /* Fade-in transition for when the JS clears inline opacity:0 after
     a new image loads. Image visibility is now controlled by INLINE
     style on the img element (set by section JS + the unified
     loading-state controller in custom.js), not by CSS attribute
     selectors. Inline `style.opacity` has higher specificity than
     any CSS rule and applies synchronously — fixed the timing race
     that previously left the previous image visible while the
     spinner overlay was already rendered. */
  transition: opacity 0.12s ease;
}


/* ============================================================================
   FAQ PAGE  (page handle: faq)
   Built 2026-05-08. Namespace: bp-faq-*. Palette: monochrome greys + ink only
   (no cream, no red — site is monochrome per operator brief).
   ============================================================================ */

/* ---- Section banding: alternating #fafafa via Shopify section IDs ---- */
[id$="__bp_intro"]           { background:#ffffff; }
[id$="__bp_thesis"]          { background:#fafafa; }
/* (orphan rules for bp_hero / bp_statbar / bp_jumpnav removed — those elements
   are now sub-blocks inside bp_intro, not standalone sections.) */

/* Lede sections (custom-html) — outer wrapper background. */
[id$="__bp_lede_pricing"]      { background:#ffffff; }
[id$="__bp_lede_subscription"] { background:#fafafa; }
[id$="__bp_lede_teamday"]      { background:#ffffff; }
[id$="__bp_lede_sessions"]     { background:#fafafa; }
[id$="__bp_lede_deliverables"] { background:#ffffff; }
[id$="__bp_lede_industries"]   { background:#fafafa; }
[id$="__bp_lede_events"]       { background:#ffffff; }
[id$="__bp_lede_individual"]   { background:#fafafa; }
[id$="__bp_lede_edge"]         { background:#ffffff; }

/* Mid-CTA sections (custom-html) — outer wrapper background. */
[id$="__bp_midcta_quote"]      { background:#ffffff; }

/* Accordion sections — theme's .accordions-section inner element has its own
   `background: var(--bg)` rule (from section-accordions.css) that paints over
   the outer wrapper. Target the inner instead so the band color actually
   shows behind the questions. */
[id$="__bp_acc_pricing"]      .accordions-section { background:#ffffff; }
[id$="__bp_acc_subscription"] .accordions-section { background:#fafafa; }
[id$="__bp_acc_teamday"]      .accordions-section { background:#ffffff; }
[id$="__bp_acc_sessions"]     .accordions-section { background:#fafafa; }
[id$="__bp_acc_deliverables"] .accordions-section { background:#ffffff; }
[id$="__bp_acc_industries"]   .accordions-section { background:#fafafa; }
[id$="__bp_acc_events"]       .accordions-section { background:#ffffff; }
[id$="__bp_acc_individual"]   .accordions-section { background:#fafafa; }
[id$="__bp_acc_edge"]         .accordions-section { background:#ffffff; }
[id^="shopify-section-"][id*="__bp_acc_"] .section__header { display:none; }
[id^="shopify-section-"][id*="__bp_acc_"] .accordion__header { display:none; }

/* ---- THESIS — now native section-text; class rules removed.
   Section banding lives on [id$="__bp_thesis"] above. */

/* ---- JUMP NAV (chips, NOT sticky) ----
   Lives inside the hero (above the CTA buttons) per design pattern.
   Visible at all viewports (catrail on desktop is supplementary, not a replacement).
*/
.bp-faq-jumpnav {
  display:flex; flex-direction:column; gap:12px;
  margin:0 0 28px;
}
.bp-faq-jumpnav--hero {
  /* In the hero, chips come AFTER the CTA buttons — add top spacing. */
  margin-top:32px;
}
.bp-faq-jumpnav__title {
  font-size:10px; letter-spacing:0.22em; text-transform:uppercase;
  color:#666; font-weight:600;
}
.bp-faq-jumpnav__chips {
  display:flex; flex-wrap:wrap; gap:6px;
}
.bp-faq-jumpnav__chip {
  display:inline-flex; align-items:baseline; gap:6px;
  padding:8px 14px;
  background:#ffffff; border:1px solid #e0e0e0;
  border-radius:999px;
  font-size:13px; font-weight:500; color:#0b0b0b;
  text-decoration:none; letter-spacing:-0.005em;
  transition:all 140ms ease;
}
.bp-faq-jumpnav__chip .n {
  font-family: var(--FONT-STACK-HIGHLIGHT, "Playfair Display", Georgia, serif);
  font-style:italic; font-size:11px; color:#666;
  line-height:1;
}
.bp-faq-jumpnav__chip .c {
  font-size:10px; letter-spacing:0.08em; color:#666; font-weight:600;
  padding-left:2px;
  display:none;  /* per-section question counts hidden — operator decision 2026-05-08 */
}
.bp-faq-jumpnav__chip:hover { background:#0b0b0b; color:#ffffff; border-color:#0b0b0b; }
.bp-faq-jumpnav__chip:hover .n,
.bp-faq-jumpnav__chip:hover .c { color:#ffffff; }

/* ---- ACCORDION OVERRIDES (FAQ page only) — match native FAQ feel
   Q-numbering chrome (Q1.01 etc.) was removed per operator decision 2026-05-08
   — questions render as plain titles like the rest of the site's FAQ blocks. */
[id^="shopify-section-"][id*="__bp_acc_"] .accordion__title-text {
  font-size:16px; font-weight:500; letter-spacing:-0.005em;
  line-height:1.4;
}
[id^="shopify-section-"][id*="__bp_acc_"] .accordion__text p { font-size:1rem; line-height:1.7; color:#333; }

/* Zero the theme's default 20px UL left margin (theme.css ~line 482) so the
   question titles align flush-left with the lede H2 + paragraph above. */
[id^="shopify-section-"][id*="__bp_acc_"] .accordion__list { margin:0; }

/* FAQ mobile rules were RELOCATED to page-faq.css. They live in that file now
   because it loads AFTER custom.css; kept here, its base rules (e.g. the statbar's
   4-column grid) overrode these mobile rules and the statbar stayed 4-up on phones,
   forcing a horizontal scroll. See the "MOBILE (relocated)" block in page-faq.css. */

/* operator 2026-06: sitewide guard against horizontal scroll on mobile.
   overflow-x:clip (NOT hidden) keeps any over-wide element from spawning a
   horizontal scrollbar, while still allowing position:sticky + vertical scroll to
   behave normally. This is a backstop only — the real per-component mobile collapses
   (services roster, pricing calculator, etc.) are still fixed so content wraps
   instead of being clipped. */
html, body{ overflow-x:clip; }

/* ============================================================================
   END FAQ PAGE
   ============================================================================ */


/* ============================================================================
   FOOTER  (sitewide; rendered via sections/group-footer.json section-custom-html)
   Built 2026-05-12 per /handoffs-to-claude-code/footer-spec-week-04-faq.md
   Namespace: bp-footer-*. Palette: ink #070707 + monochrome whites.

   Structure:
     - Top row: brand block (left) + 2-column nav (right)
     - Bottom row: policy strip (left) + © line (right), stacked on mobile

   The HTML lives in the custom-html section's `custom_code` field so the
   operator can edit links in the Shopify theme editor without a code deploy.
   ============================================================================ */
.bp-footer{
  background:#070707;
  color:#fff;
  padding:40px 20px;
}
.bp-footer a{
  color:inherit;
  text-decoration:none;
  transition:color 0.2s ease, opacity 0.2s ease;
}
.bp-footer__inner{
  max-width:1200px;
  margin:0 auto;
}

/* Top row: brand left, two-column nav right */
.bp-footer__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:40px;
}

/* Brand block */
.bp-footer__brand{
  display:flex;
  flex-direction:column;
  gap:15px;
  max-width:420px;
}
.bp-footer__logo img{
  max-width:200px;
  height:auto;
  display:block;
}
.bp-footer__tagline{
  font-size:14px;
  line-height:1.8;
  opacity:0.7;
  margin:5px 0;
}
/* Designer's footer red detail — small red-on-dark bar above the phone/email
   (matches the design's .wf__redline: 28x3, --bp-red-on-dark #e8505f, r2). The
   footer brand is a flex column (gap:15px), which spaces the bar automatically. */
.bp-footer__redline{
  width:28px;
  height:3px;
  background:var(--bp-red-on-dark);
  border-radius:2px;
}
.bp-footer__contact{
  font-size:14px;
  line-height:1.8;
}
.bp-footer__contact a{color:#fff;}
.bp-footer__contact a:hover{opacity:0.7;}

/* 2-column nav (right side) */
.bp-footer__nav{
  display:flex;
  gap:60px;
  align-items:flex-start;
}
.bp-footer__group{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:140px;
}
.bp-footer__group-header{
  font-size:14px;
  font-weight:600;
  color:#fff;
  margin:0 0 8px 0;
  letter-spacing:0;
  text-transform:none;
  line-height:1.2;
}

/* Link lists — reset theme's stock ul/li bullets + padding */
.bp-footer__links,
.bp-footer__policy-strip{
  list-style:none !important;
  margin:0;
  padding:0;
}
.bp-footer__links{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.bp-footer__links li,
.bp-footer__policy-strip li{
  list-style:none !important;
  padding-left:0 !important;
  margin-left:0 !important;
}
.bp-footer__links li::before,
.bp-footer__links li::marker,
.bp-footer__policy-strip li::before,
.bp-footer__policy-strip li::marker{
  content:none !important;
  display:none !important;
}
.bp-footer__links a{
  font-size:14px;
  color:rgba(255,255,255,0.65);
}
.bp-footer__links a:hover{
  color:#fff;
  opacity:1;
}

/* Bottom bar: policy strip + © */
.bp-footer__bottom{
  margin-top:36px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,0.1);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}
.bp-footer__policy-strip{
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  font-size:12px;
}
.bp-footer__policy-strip a{color:rgba(255,255,255,0.5);}
.bp-footer__policy-strip a:hover{color:rgba(255,255,255,0.9);}
.bp-footer__policy-strip li:not(:last-child)::after{
  content:"\2022";
  margin-left:14px;
  color:rgba(255,255,255,0.25);
}
.bp-footer__copyright{
  font-size:12px;
  color:rgba(255,255,255,0.5);
}

/* Mobile — stack everything */
@media (max-width:768px){
  .bp-footer{padding:30px 20px;}
  .bp-footer__top{flex-direction:column; gap:30px;}
  .bp-footer__brand{width:100%; max-width:none;}
  .bp-footer__nav{width:100%; flex-direction:column; gap:24px;}
  .bp-footer__bottom{flex-direction:column; align-items:flex-start; gap:14px;}
  .bp-footer__policy-strip{gap:6px 12px;}
}

/* Narrow widths */
@container bp (max-width: 900px){
  .bp-policy .bp-head{
    padding: 56px 36px 48px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .bp-policy .bp-head > .bp-h1,
  .bp-policy .bp-head > .bp-lede,
  .bp-policy .bp-head > .bp-head-cta,
  .bp-policy .bp-head > .bp-meta,
  .bp-policy .bp-head > .bp-eyebrow,
  .bp-policy .bp-head > .bp-crumb{
    grid-column: 1;
    grid-row: auto;
  }
  .bp-policy .bp-head > .bp-meta{ margin: 24px 0 0; max-width: 100%; }
  .bp-policy .bp-h1{ font-size: 58px; }
  .bp-policy .bp-tldr{ padding: 56px 36px; }
  .bp-policy .bp-tldr-head{ grid-template-columns: 1fr; gap: 18px; }
  .bp-policy .bp-h2{ font-size: 32px; }
  .bp-policy .bp-tldr ol{ grid-template-columns: repeat(2, 1fr); }
  .bp-policy .bp-doc-shell{ padding: 56px 36px 72px; }
  .bp-policy .bp-toc ol{ columns: 1; }
  .bp-policy .bp-contact{ grid-template-columns: 1fr; padding: 56px 36px 64px; gap: 32px; }
  .bp-policy .bp-contact h2{ font-size: 32px; }
}
@container bp (max-width: 560px){
  .bp-policy .bp-head{ padding: 36px 22px 32px; }
  .bp-policy .bp-h1{ font-size: 40px; margin-bottom: 18px; }
  .bp-policy .bp-lede{ font-size: 15px; margin-bottom: 24px; }
  .bp-policy .bp-head-cta{ flex-direction: column; align-items: stretch; gap: 10px; }
  .bp-policy .bp-tldr{ padding: 40px 22px; }
  .bp-policy .bp-h2{ font-size: 24px; }
  .bp-policy .bp-tldr ol{ grid-template-columns: 1fr; gap: 10px; }
  .bp-policy .bp-tldr li{ padding: 20px 20px 18px; border-radius: 16px; }
  .bp-policy .bp-tldr li h3{ font-size: 18px; }
  .bp-policy .bp-tldr li p{ font-size: 13px; }
  .bp-policy .bp-doc-shell{ padding: 36px 22px 56px; }
  .bp-policy .bp-toc-h{ font-size: 10.5px; }
  .bp-policy .bp-toc a{ grid-template-columns: 28px 1fr; font-size: 13px; }
  .bp-policy .bp-part-h{ grid-template-columns: 44px 1fr; gap: 12px; font-size: 22px; padding-top: 12px; }
  .bp-policy .bp-part-h .bp-part-n{ font-size: 13px; padding-top: 4px; }
  .bp-policy .bp-sect-h{ grid-template-columns: 44px 1fr; gap: 12px; font-size: 20px; }
  .bp-policy .bp-sect-h .bp-sect-n{ font-size: 26px; }
  .bp-policy .bp-sub-h{ grid-template-columns: 44px 1fr; gap: 12px; }
  .bp-policy .bp-sect p, .bp-policy .bp-sect ul, .bp-policy .bp-sect ol{ padding-left: 56px; font-size: 13.5px; }
  .bp-policy .bp-sect ul, .bp-policy .bp-sect ol{ padding-left: 76px; }
  .bp-policy .bp-callout{ margin-left: 56px; padding: 14px 18px; font-size: 13px; }
  .bp-policy .bp-contact{ padding: 40px 22px 48px; }
  .bp-policy .bp-contact h2{ font-size: 26px; }
  .bp-policy .bp-contact dl > div{ grid-template-columns: 1fr; gap: 2px; padding: 14px 18px; }
}

@supports not (container-type: inline-size){
  
}
[id$="__bp_contact_thesis"]   { background:#fafafa; padding:5px; }
[id$="__bp_contact_tracks"]   { background:#ffffff; }
[id$="__bp_contact_nap"]      { background:#fafafa; }
[id$="__bp_contact_map"]      { background:#ffffff; }
[id$="__bp_contact_form"]     { background:#fafafa; }
[id$="__bp_contact_faq"]      .accordions-section { background:#ffffff; }
@keyframes bp-contactpg-pulse-open {
  0%   { box-shadow: 0 0 0 0 rgba(47,122,74,0.5); }
  70%  { box-shadow: 0 0 0 10px rgba(47,122,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,122,74,0); }
}

/* ---- THESIS ---- (v1.5: switched from custom-html to native section-text
   so the operator can edit the thesis prose via the Shopify theme editor.
   Styling now scoped to the section ID so it applies regardless of how
   the native section structures its inner HTML.) */
[id$="__bp_contact_thesis"] .text-section,
[id$="__bp_contact_thesis"] .rte,
[id$="__bp_contact_thesis"] .text-block,
[id$="__bp_contact_thesis"] .rte > p {
  max-width:880px; margin-left:auto; margin-right:auto;
}
[id$="__bp_contact_thesis"] p {
  font-family:'Poppins', sans-serif;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height:1.55;
  color:#0b0b0b;
  text-align:center;
  font-weight:400;
  max-width:880px; margin-left:auto; margin-right:auto;
}
[id$="__bp_contact_thesis"] em {
  font-family: var(--FONT-STACK-HIGHLIGHT, "Playfair Display", Georgia, serif) !important;
  font-style: var(--FONT-STYLE-HIGHLIGHT, italic) !important;
  font-weight: var(--FONT-WEIGHT-HIGHLIGHT, 400) !important;
  color:#0b0b0b;
}

/* ---- Section-accordions tuning on Contact page ---- */
[id^="shopify-section-"][id*="__bp_contact_faq"] .accordions-section { padding:64px 32px 72px; }
[id^="shopify-section-"][id*="__bp_contact_faq"] .section__header {
  max-width:1080px; margin:0 auto 24px;
  text-align:left;
}
/* FAQ H2: same Poppins-base + em-italic pattern as section H2s */
[id^="shopify-section-"][id*="__bp_contact_faq"] .section__header h2 {
  font-family: 'Poppins', system-ui, sans-serif !important;
  font-weight:500 !important;
  font-style:normal !important;
  font-size: clamp(26px, 3vw, 38px) !important;
  line-height:1.18;
  letter-spacing:-0.015em;
  color:#0b0b0b;
  margin:0;
}
[id^="shopify-section-"][id*="__bp_contact_faq"] .section__header h2 em {
  font-family: var(--FONT-STACK-HIGHLIGHT, "Playfair Display", Georgia, serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

/* ---- Sitewide FAQ section-title size — match Contact (operator 2026-06) ----
   Contact's FAQ heading carried a page-specific clamp(26→38px); every other
   page fell through to the theme default calc(2.1rem * heading-size) ≈ 30px,
   so Contact looked bigger. This applies Contact's size to ALL FAQ section
   titles. `.accordion__header .section__heading` matches only the section
   heading above each accordion (never the questions), and only inside
   accordion sections — so no other section H2s are touched. This overrides
   the per-page heading_size setting, which is now cosmetic for FAQ titles. */
.accordion__header .section__heading {
  font-size: clamp(26px, 3vw, 38px) !important;
}
/* Alt-font on FAQ section-title <em> sitewide. The accordion title is raw
   {{ heading }} with no highlight mechanism, so an <em> would default to
   Poppins-italic. This maps it to Playfair italic — matching the page-scoped
   Contact rule above, now generalized to every FAQ heading (writer marks,
   faq-SECTION-titles-MARKED.md). Per-word <em> per §11 avoids space-collapse. */
.accordion__header .section__heading em {
  font-family: var(--FONT-STACK-HIGHLIGHT, "Playfair Display", Georgia, serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

/* ============================================================================
   END CONTACT PAGE
   ============================================================================ */


/* ============================================================================
   PRICING PAGE  (page handle: corporate-headshot-pricing-toronto)
   Namespace: bp-pricing-*
   Source design: /Design System/pages/Pricing Page v1.html  (translated)
   Plus 3 dev-handoffs in /Website Optimization/pages-in-progress/page-06-pricing/:
     - Statbar Editorial - Dev Handoff.html
     - Group Discount - Dev Handoff.html
     - Comparison Table - Dev Handoff.html
   Build conventions: monochrome greys (no cream, no design-red); section banding
   via #fafafa alternation; rounded corners; pill buttons; Playfair italic accent
   on <em>. Customer-visible copy is em-dash-free and "up to"-free.
   ============================================================================ */

.bp-pricing{
  --bp-pr-ink:var(--ink);
  --bp-pr-ink-2:var(--ink-2);
  --bp-pr-mute:var(--mute);
  --bp-pr-mute-2:#999;
  --bp-pr-hair:var(--hair);
  --bp-pr-hair-2:#ececec;
  --bp-pr-paper:var(--white);
  --bp-pr-neutral:var(--paper);
  --bp-pr-neutral-2:#f0f0f0;
  --bp-pr-r-md:18px;
  --bp-pr-r-lg:24px;
  --bp-pr-r-pill:999px;
  color:var(--bp-pr-ink);
}

/* Playfair italic for <em> inside pricing custom-html.
   Operator note: applied per-word so spaces stay in the regular font
   and do not pick up italic spacing metrics. */
.bp-pricing em{
  font-family: var(--FONT-STACK-HIGHLIGHT, "Playfair Display", Georgia, serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

/* Hero ledger card (RHS at-a-glance summary, monochrome) */
.bp-pricing-ledger{
  background:var(--bp-pr-neutral);
  border-radius:var(--bp-pr-r-lg);
  padding:22px 28px 24px;
  border:1px solid var(--bp-pr-hair);
}
.bp-pricing-ledger__top{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:14px; border-bottom:1px solid var(--bp-pr-hair);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--bp-pr-mute); font-weight:500;
}
.bp-pricing-ledger__top-r{
  color:var(--bp-pr-mute-2); letter-spacing:0.08em;
}
.bp-pricing-ledger__row{
  display:grid; grid-template-columns: 28px 1fr auto;
  gap:14px; align-items:center;
  padding:16px 0;
  border-bottom:1px dashed var(--bp-pr-hair);
}
.bp-pricing-ledger__row:last-child{ border-bottom:none; padding-bottom:4px; }
.bp-pricing-ledger__n{
  font-family: var(--FONT-STACK-HIGHLIGHT, "Playfair Display", serif);
  font-style:italic;
  font-size:14px; color:var(--bp-pr-mute);
  line-height:1;
}
.bp-pricing-ledger__l{ min-width:0; }
.bp-pricing-ledger__l .k{
  display:block;
  font-size:13px; font-weight:600;
  color:var(--bp-pr-ink); line-height:1.2;
}
.bp-pricing-ledger__l .s{
  display:block;
  font-size:11.5px; color:var(--bp-pr-mute);
  margin-top:3px; line-height:1.4;
}
.bp-pricing-ledger__p{
  font-family: var(--FONT-STACK-HEADING, "Playfair Display", Georgia, serif);
  font-size:22px; font-weight:400; letter-spacing:-0.012em;
  color:var(--bp-pr-ink); line-height:1;
  white-space:nowrap;
  text-align:right;
}
.bp-pricing-ledger__p .pre{
  font-family: var(--FONT-STACK-BODY, Poppins, sans-serif);
  font-size:10px; font-weight:500;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--bp-pr-mute-2); display:block;
  margin-bottom:4px;
}
.bp-pricing-ledger__p .dec{
  font-size:14px; color:var(--bp-pr-ink-2);
}
.bp-pricing-ledger__p .unit{
  font-family: var(--FONT-STACK-BODY, Poppins, sans-serif);
  font-size:11px; color:var(--bp-pr-mute-2);
  letter-spacing:0.04em; font-weight:500;
}
.bp-pricing-ledger__p--text{
  font-family: var(--FONT-STACK-BODY, Poppins, sans-serif);
  font-size:14px; font-weight:500;
  color:var(--bp-pr-mute);
  letter-spacing:0.02em;
}

/* ---- OVERVIEW (numbered structural overview) ---- */
.bp-jumpnav-cards{
  background:#fff;
  padding:48px 32px;            /* was 48px 60px — reduce side padding so the grid runs closer to the edges */
  border-bottom:1px solid var(--bp-pr-hair);
  /* Token scoping fix (operator 2026-05-31): when this shell was scoped
     to .bp-pricing, the --bp-pr-* tokens resolved via that parent. Now
     it's a shared shell, so the same tokens must live on the shell
     itself — otherwise the column hairlines (--bp-pr-hair-2) render in
     the inherited currentColor (dark text colour) instead of the light
     grey, which read as "no dividers" on every non-Pricing page. */
  --bp-pr-ink:var(--ink);
  --bp-pr-mute:var(--mute);
  --bp-pr-hair:var(--hair);
  --bp-pr-hair-2:#ececec;
  --bp-pr-neutral:var(--paper);
}
.bp-jumpnav-cards__inner{
  max-width:1600px; margin:0 auto;  /* was 1280px — operator 2026-05-31: span the whole page so 6 cards fit in one row */
}
.bp-jumpnav-cards__grid{
  display:grid;
  /* auto-fit minmax(180px,1fr) lets the grid:
       - fit 6 cards in one row on wide desktops (Homepage/About/Exec/MS/LI)
       - fit 4 cards expanded for Pricing (no empty tracks — auto-fit collapses them)
       - wrap FAQ's 9 cards to multiple rows
     Replaces the old fixed repeat(4,1fr). */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border-top:1px solid var(--bp-pr-hair);
}
/* FAQ has 9 cards and wraps — centre the wrapped last row so the partial
   row doesn't sit flush-left (operator 2026-05-31). Use flex layout for
   this variant since CSS Grid can't centre a partial last row with 1fr
   tracks. Trade-off: the per-item border-right separator pattern no
   longer applies cleanly on row breaks, so the variant uses no separators
   and relies on the card padding for visual rhythm. */
.bp-jumpnav-cards--center .bp-jumpnav-cards__grid{
  display:flex; flex-wrap:wrap; justify-content:center;
}
/* Operator 2026-06-01 (try 2): pack all 9 onto a single row. Trim the
   wrapper's side padding from 32px to 12px and tighten each card's
   internal horizontal padding from 28px to 12px so the 9 cards have
   the most possible content area. */
.bp-jumpnav-cards--center{
  padding-left:12px;
  padding-right:12px;
  /* Full-bleed break-out (operator 2026-06-01): on the FAQ page this
     nav sits inside .bp-faq-hero__inner which caps content at 1080px,
     so 9 cards were getting ~93px of content area each. The negative
     side-margin trick pulls the nav out to full viewport width even
     though its parent column is narrow. At a 1440 viewport this
     widens each card's content area from ~93px to ~133px. */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}
.bp-jumpnav-cards--center .bp-jumpnav-cards__item{
  /* 100%/9 ≈ 11.11% — pins the row to exactly 9 cards across at every
     viewport ≥ tablet width. flex-grow:0 / shrink:0 so they don't
     re-wrap mid-row at odd sizes. */
  flex: 0 0 calc(100% / 9);
  max-width:none;
  /* Restore the column divider that the original .bp-jumpnav-cards__item
     rule provides. Operator 2026-06-01: dividers were dropped when the
     --center variant could wrap (border-right looked broken on
     mid-row breaks). Now that the variant is locked to 9-on-one-row,
     the per-item right hairline is clean again. */
  border-right:1px solid var(--bp-pr-hair-2);
  padding-right:12px;
}
/* Last card in the row has no divider on the trailing side. */
.bp-jumpnav-cards--center .bp-jumpnav-cards__item:last-child{
  border-right:none;
}
/* Lighter inter-card gutter than the 5+4 layout used. */
.bp-jumpnav-cards--center .bp-jumpnav-cards__item + .bp-jumpnav-cards__item{
  padding-left:12px;
}
/* Mobile (≤760px): the parent --center grid is flex (not grid), so the
   global mobile `.bp-jumpnav-cards__grid { grid-template-columns:1fr }`
   rule doesn't apply. Stack manually for narrow viewports. */
@media (max-width:760px){
  .bp-jumpnav-cards--center{
    padding-left:32px;
    padding-right:32px;
  }
  .bp-jumpnav-cards--center .bp-jumpnav-cards__item{
    flex-basis:100%;
    padding:18px 0;
    border-bottom:1px solid var(--bp-pr-hair-2);
  }
  .bp-jumpnav-cards--center .bp-jumpnav-cards__item + .bp-jumpnav-cards__item{
    padding-left:0;
  }
  .bp-jumpnav-cards--center .bp-jumpnav-cards__item:last-child{
    border-bottom:none;
  }
}
.bp-jumpnav-cards__item{
  padding:24px 28px 22px 0;
  border-right:1px solid var(--bp-pr-hair-2);
  /* Vertical flex so the .jump link can be pushed to the bottom of
     every card (operator 2026-06-01: align jump links across the row,
     the way they sit in the preferred layout). The grid already
     stretches all items in a row to the height of the tallest, so
     this gives every "Jump to section →" the same baseline. */
  display:flex; flex-direction:column;
}
/* Breathing room: items 2-4 get left padding so the divider line from
   the previous item's border-right isn't kissing the number/title text.
   Operator-reported 2026-05-22: lines were sitting right against text. */
.bp-jumpnav-cards__item + .bp-jumpnav-cards__item{ padding-left:28px; }
.bp-jumpnav-cards__item:last-child{ border-right:none; padding-right:0; }
.bp-jumpnav-cards__item .n{
  font-family: var(--FONT-STACK-HIGHLIGHT, "Playfair Display", serif);
  font-style:italic;
  font-size:14px; color:var(--bp-pr-mute);
  margin-bottom:10px;
}
.bp-jumpnav-cards__item .t{
  font-family: var(--FONT-STACK-HEADING, "Playfair Display", Georgia, serif);
  font-size:20px; line-height:1.22; font-weight:400;
  letter-spacing:-0.012em;
  margin-bottom:12px;
  color:var(--bp-pr-ink);
}
/* <em> inside the card title must render in Playfair italic, not
   browser-default-italic-Poppins. The site's FONT-STACK-HEADING resolves
   to Poppins, so without an explicit override the em inherits Poppins
   and the operator sees plain italic instead of the alt font
   (operator 2026-05-31). Same pattern used on the team-headshots H2
   overrides earlier in this file. */
.bp-jumpnav-cards__item .t em{
  font-family: var(--FONT-STACK-HIGHLIGHT, "Playfair Display", Georgia, serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}
.bp-jumpnav-cards__item .jump{
  font-size:11.5px; letter-spacing:0.04em;
  color:var(--bp-pr-ink); text-decoration:none; font-weight:500;
  display:inline-flex; align-items:center; gap:6px;
  transition: gap 160ms ease;
  margin-top:auto;   /* push to the bottom of the card (operator 2026-06-01) */
  align-self:flex-start;  /* keep the jump link narrow, not stretched */
}
.bp-jumpnav-cards__item .jump:hover{ gap:10px; color:var(--bp-pr-mute); }

/* Group-discount table (operator's real 10-bracket table, replaces the
   designer's invented 5-bar histogram). Two-column compound layout: 5 rows
   each showing two bracket entries side by side. */
.bp-pricing-disctable{
  background:#fff;
  border:1px solid var(--bp-pr-hair);
  border-radius:var(--bp-pr-r-md);
  padding:28px 32px 22px;
  margin:24px 0;
}
.bp-pricing-disctable__top{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  padding-bottom:16px;
  border-bottom:1px solid var(--bp-pr-hair);
  margin-bottom:8px;
}
.bp-pricing-disctable__eyebrow{
  font-size:10.5px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--bp-pr-ink); font-weight:600;
}
.bp-pricing-disctable__meta{
  font-size:12px; color:var(--bp-pr-mute);
}
.bp-pricing-disctable__grid{
  display:grid; grid-template-columns: 1fr 1fr;
  column-gap:48px;
}
.bp-pricing-disctable__row{
  display:grid; grid-template-columns: 1fr auto;
  gap:14px; align-items:baseline;
  padding:11px 0;
  border-bottom:1px dashed var(--bp-pr-hair);
}
.bp-pricing-disctable__row:nth-last-child(-n+2){ border-bottom:none; }
.bp-pricing-disctable__row--accent .bp-pricing-disctable__pct em{
  color:var(--bp-pr-ink) !important;
  font-weight:600;
}
.bp-pricing-disctable__people{
  font-size:13px; color:var(--bp-pr-ink-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing:0.02em;
}
.bp-pricing-disctable__pct{
  font-family: var(--FONT-STACK-HEADING, "Playfair Display", Georgia, serif);
  font-size:22px; font-weight:400; letter-spacing:-0.012em;
  color:var(--bp-pr-ink); line-height:1;
  text-align:right;
}
.bp-pricing-disctable__pct em{
  font-style:italic !important;
  color:var(--bp-pr-ink) !important;
}
.bp-pricing-disctable__foot{
  font-size:12px; color:var(--bp-pr-mute);
  line-height:1.55;
  margin-top:14px; padding-top:14px;
  border-top:1px solid var(--bp-pr-hair);
}

/* Express format callout — placed below the worked-math cards.
   Operator-supplied entry rate ($52.48/person, 50-person minimum). */
.bp-pricing-express{
  background:var(--bp-pr-ink);
  color:#fff;
  border-radius:var(--bp-pr-r-lg);
  padding:32px 36px;
  margin-top:24px;
  display:grid; grid-template-columns: 1.4fr 1fr;
  gap:32px; align-items:center;
}
.bp-pricing-express__head{ min-width:0; }
.bp-pricing-express__eyebrow{
  display:block;
  font-size:10.5px; letter-spacing:0.22em; text-transform:uppercase;
  color:rgba(255,255,255,0.7); font-weight:600;
  margin-bottom:10px;
}
.bp-pricing-express__h{
  font-family: var(--FONT-STACK-HEADING, "Playfair Display", Georgia, serif);
  font-size:28px; font-weight:400; letter-spacing:-0.016em; line-height:1.15;
  color:#fff;
  margin:0;
}
.bp-pricing-express__h em{
  font-style:italic !important;
  color:#fff !important;
}
.bp-pricing-express__body{
  font-size:1rem; line-height:1.65;
  color:rgba(255,255,255,0.78);
  margin:0; grid-column: 1 / 2;
}
.bp-pricing-express__cta{
  justify-self:end;
}
.bp-pricing-express .btn--solid.btn--black{
  background:#ffffff !important;
  color:var(--bp-pr-ink) !important;
  border:1px solid #ffffff !important;
}
.bp-pricing-express .btn--solid.btn--black:hover{
  background:transparent !important;
  color:#ffffff !important;
  border-color:#ffffff !important;
}

/* ============================================================================
   PRICING PAGE — MOBILE BREAKPOINTS
   ============================================================================ */



@media (max-width: 1024px) {
  .bp-pricing-hero__grid,
  .bp-pricing-indiv__body,
  .bp-pricing-pilot__body,
  .bp-pricing-gdisc__main,
  .bp-pricing-calc__grid{
    grid-template-columns: 1fr; gap:36px;
  }
  .bp-pricing-tiers{
    grid-template-columns: 1fr; gap:16px;
  }
  .bp-pricing-tier--featured{ order: -1; }
  .bp-pricing-modes{
    grid-template-columns: 1fr; gap:18px;
  }
  /* Pill captions shrink at narrower viewports so the longest descriptor
     ("In-studio · controlled private-studio space") still fits inside
     the centered pill without overflowing the image edges. */
  .bp-pricing-mode__imgph .cap{
    font-size:9px; letter-spacing:0.10em;
    padding:5px 12px;
  }
  .bp-pricing-sla-grid{
    grid-template-columns: 1fr; gap:18px;
  }
  .bp-jumpnav-cards__grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .bp-jumpnav-cards__item{
    padding:20px 20px 18px 0;
  }
  /* Tablet 2-col: items in column 2 (2n) get left padding so the
     border-right from column 1 doesn't sit against their text. */
  .bp-jumpnav-cards__item:nth-child(2n){
    border-right:none; padding-right:0; padding-left:20px;
  }
  .bp-pricing-mechanic{
    grid-template-columns: 1fr; gap:20px;
    padding:24px 24px;
  }
  .bp-pricing-mech-step{
    border-left:none; padding-left:0;
    border-top:1px solid var(--bp-pr-hair); padding-top:16px;
  }
  .bp-pricing-math-grid{
    grid-template-columns: 1fr; gap:16px;
  }
  /* Discount table: keep 2-column layout on tablets; drop to 1-col on phones below. */
  .bp-pricing-disctable{ padding:24px 24px 18px; }
  /* Express callout collapses to single-column stack. */
  .bp-pricing-express{
    grid-template-columns: 1fr; gap:18px;
    padding:24px 24px;
  }
  .bp-pricing-express__cta{ justify-self:start; }
  /* Named clients (Section 7): collapse 12-col to 6-col so paired cards
     keep their rough size relationships (xl/l side by side; m/s/m/m two-per-row). */
  .bp-pricing-clients{ padding:56px 40px; }
  .bp-pricing-clients__card--xl,
  .bp-pricing-clients__card--l,
  .bp-pricing-clients__card--m,
  .bp-pricing-clients__card--s{ grid-column: span 6; }
  .bp-pricing-clients__card--w,
  .bp-pricing-clients__card--w8{ grid-column: span 12; }
  .bp-pricing-includes{
    grid-template-columns: 1fr; gap:16px;
    padding:24px 24px;
  }
  .bp-pricing-cta-strip__inner{
    grid-template-columns: 1fr; gap:20px;
  }
  .bp-pricing-cta-strip__actions{ justify-self:start; }
  .bp-pricing-calc__cards{
    grid-template-columns: 1fr; gap:14px;
  }

  /* comparison table: stack to single-column row-per-row */
  .bp-pricing-ctable__head,
  .bp-pricing-ctable__row,
  .bp-pricing-ctable__cta{
    grid-template-columns: 1fr;
  }
  .bp-pricing-ctable__head-cell,
  .bp-pricing-ctable__row .cell,
  .bp-pricing-ctable__cta .cell{
    border-right:none;
    border-bottom:1px solid var(--bp-pr-hair-2);
    padding:12px 24px;
  }
  .bp-pricing-ctable__head-cell:last-child,
  .bp-pricing-ctable__row .cell:last-child,
  .bp-pricing-ctable__cta .cell:last-child{ border-bottom:none; }
  .bp-pricing-ctable__row .cell.cell--label{
    font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
    padding:14px 24px 6px;
    color:var(--bp-pr-mute);
    background:var(--bp-pr-neutral);
    font-weight:600;
  }
  .bp-pricing-ctable__head-cell{ padding:22px 24px 18px; }
}

@media (max-width: 768px) {
  .bp-pricing-hero{ padding:32px 20px 40px; }
  .bp-pricing-hero__title{ font-size:44px; }
  .bp-pricing-hero__lede{ font-size:15.5px; }
  .bp-pricing-statbar{ padding:28px 20px; }
  .bp-pricing-statbar__inner{ grid-template-columns: 1fr 1fr; row-gap:24px; }
  .bp-pricing-statbar__cell{ padding:0 16px; border-right:1px solid var(--bp-pr-hair); }
  .bp-pricing-statbar__cell:nth-child(2n){ border-right:none; padding-right:0; }
  .bp-pricing-statbar__cell:nth-child(2n+1){ padding-left:0; }
  .bp-pricing-statbar__n{ font-size:34px; }
  .bp-jumpnav-cards{ padding:36px 20px; }
  .bp-pricing-sect,
  .bp-pricing-pilot,
  .bp-pricing-compare,
  .bp-pricing-calc{ padding:50px 20px; }
  .bp-pricing-sect__h{ font-size:30px; }
  .bp-pricing-price-anchor{ padding:32px 28px; }
  .bp-pricing-price-anchor__number{ font-size:84px; }
  .bp-pricing-tier{ padding:28px 26px 24px; }
  .bp-pricing-tier__price{ font-size:30px; }
  .bp-pricing-tier__price .cur{ font-size:20px; }
  .bp-pricing-cta-strip{ padding:36px 20px; }
  .bp-pricing-cta-strip__h{ font-size:24px; }
  .bp-pricing-includes__list{ grid-template-columns: 1fr; gap:8px; }
  /* Group-discount histogram at phone widths.
     Operator instruction: hide the 5%-step brackets on mobile so only the
     20 / 30 / 40 / 50 / 60% bars (the 10%-step decades) render. That keeps
     the chart a single row of 5 bars at narrow widths instead of a wrapped
     2-row mess, and the bracket labels stay legible.
     Hidden: nth-child(2) 25%, (4) 35%, (6) 45%, (8) 55%, (10) 65% accent.
     Note the 65% accent bar is hidden too — the climax is desktop-only. */
  .bp-pricing-gdisc{ padding:28px 24px; }
  .bp-pricing-gdisc__main{ grid-template-columns:1fr; gap:28px; }
  .bp-pricing-gdisc__bar:nth-child(2n){ display:none; }
  .bp-pricing-gdisc__bars{
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: auto;
    height:180px;
    row-gap:0;
    margin-bottom:26px;
  }
  /* Single row again on mobile, so the baseline hairline comes back. */
  .bp-pricing-gdisc__bars::after{ display:block; }
  .bp-pricing-gdisc__bar-pct{ font-size:14px; top:-24px; }
  .bp-pricing-gdisc__h{ font-size:24px; }
  /* Express callout at phone widths. */
  .bp-pricing-express__h{ font-size:22px; }
  .bp-pricing-express .btn{ width:100%; justify-content:center; }
}

@media (max-width: 480px) {
  .bp-pricing-hero__cta .btn,
  .bp-pricing-pilot__cta .btn,
  .bp-pricing-cta-strip__actions .btn,
  .bp-pricing-calc__actions .btn{
    width:100%; justify-content:center;
  }
  .bp-jumpnav-cards__grid{ grid-template-columns: 1fr; }
  .bp-jumpnav-cards__item{
    border-right:none; border-bottom:1px solid var(--bp-pr-hair-2);
    padding:18px 0;
  }
  /* Override desktop adjacent-sibling padding + tablet 2n padding so all
     items align flush-left at ≤480px (was: item 1 at 0, item 2 at
     20px, item 3 at 28px, item 4 at 20px due to cascading overrides). */
  .bp-jumpnav-cards__item + .bp-jumpnav-cards__item,
  .bp-jumpnav-cards__item:nth-child(2n){
    padding-left:0;
  }
  .bp-jumpnav-cards__item:last-child{ border-bottom:none; }
  /* Named clients at narrow phones — every card stacks full-width and the
     marquee/feature tiers drop a step so they don't blow out the row. */
  .bp-pricing-clients{ padding:48px 24px; }
  .bp-pricing-clients__card--xl,
  .bp-pricing-clients__card--l,
  .bp-pricing-clients__card--m,
  .bp-pricing-clients__card--s,
  .bp-pricing-clients__card--w,
  .bp-pricing-clients__card--w8{ grid-column: span 12; }
  .bp-pricing-clients__name--marquee{ font-size:20px; }
  .bp-pricing-clients__name--feature{ font-size:16px; }
  .bp-pricing-statbar__inner{ grid-template-columns: 1fr; }
  .bp-pricing-statbar__cell{ border-right:none; padding:0; padding-bottom:18px; border-bottom:1px solid var(--bp-pr-hair); }
  .bp-pricing-statbar__cell:last-child{ border-bottom:none; padding-bottom:0; }
}

/* ============================================================================
   END PRICING PAGE
   ============================================================================ */

/* ============================================================================
   Cart drawer — "Applying group discount…" loader
   ============================================================================
   While Shopify's /cart/change AJAX is in flight (~200–500ms), the cart
   drawer carries `.is-loading` on the <cart-element>. During that window
   the customer's quantity change has been submitted but the cart hasn't
   re-rendered yet, so the existing per-person price is stale.

   We inject a red spinner + "Applying group discount…" message into
   each cart line's per-person row via custom.js (showCartLoadingState).
   The MutationObserver in custom.js watches for `.is-loading` toggling
   and adds/removes the loader element. No 10-second hang — the loader
   disappears the moment Shopify completes the AJAX and the cart re-renders.

   Styles below are the spinner's rotation animation + the inline-flex
   layout of icon + text.
   ============================================================================ */
/* The loader has two distinct injection sites chosen by JS in
   custom.js → appendLoader() based on viewport:

   Desktop (>767px): injected INSIDE `.cart-item-v2__per-person`,
   which is a `flex-wrap: wrap` flex container holding the prices.
   `flex-basis: 100%` here forces the loader onto its own line
   directly below the per-person prices — no margin-top tuning
   needed; the flex layout places it exactly where it belongs.
   Block layout with `padding-left: 26px` (icon + gap) and an
   absolutely-positioned spinner gives the hanging-indent column
   so "Applying group / discount…" wraps with the second line
   aligned under "Applying", not under the icon. The two-line
   wrap is induced naturally by the narrow main column width on
   most desktop cart drawers (~200px) — no `max-width` needed.

   Mobile (≤767px): injected as a sibling of `.cart-item-v2__row1`.
   The per-person column is too narrow (~100px) on phones so the
   loader can't live inside it without overlapping the totals
   column. The @media block below overrides almost every property
   to a centred flex layout that spans the full card width. */
.group-discount-loader {
  display: block;
  position: relative;
  flex-basis: 100%;          /* break onto own line inside per-person */
  padding-left: 26px;
  margin-top: 2px;
  font-size: 12px;
  color: #ff4848;
  line-height: 1.4;
}
.group-discount-loader .bp-loader-spinner {
  position: absolute;
  left: 0;
  top: 1px;                  /* nudge to align with the first text line */
  flex-shrink: 0;
  animation: bp-discount-loader-spin 0.8s linear infinite;
}
/* Mobile: switch from the desktop in-per-person layout to a
   centred flex that lives as a sibling of row 1. Resets every
   desktop property so the centred flex starts from a clean slate. */
@media only screen and (max-width: 767px) {
  .group-discount-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    position: static;
    flex-basis: auto;
    padding-left: 0;
    margin-top: -8px;
    margin-bottom: 4px;
  }
  .group-discount-loader .bp-loader-spinner {
    position: static;
  }
}
@keyframes bp-discount-loader-spin {
  to { transform: rotate(360deg); }
}
/* ============================================================================
   END Cart drawer loading state
   ============================================================================ */

/* ============================================================================
   Cart drawer — show a visible scrollbar
   ============================================================================
   The theme's `cart-drawer.css` deliberately hides the scrollbar on
   `.cart-drawer__body`:
       scrollbar-width: none;
       -ms-overflow-style: none;
       ::-webkit-scrollbar { display: none; }
   Scrolling still WORKS (overflow-y: auto is set), but customers with
   3+ cart items can't tell there's more content below — the third
   item just appears "cut off" because there's no scrollbar to hint
   at the overflow. Operator reported this on real-device testing.

   Override with a thin, subtle scrollbar that's visible but doesn't
   dominate the drawer chrome. Firefox uses `scrollbar-width: thin`
   + `scrollbar-color`; WebKit/Blink uses the `::-webkit-scrollbar*`
   pseudo-elements. Both rules together cover every modern browser.

   Thumb colour: 30%-opacity black so it reads against both light
   (white drawer) and dark backgrounds, and stays subtle when the
   customer isn't actively scrolling. */
.cart-drawer .cart-drawer__body {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}
.cart-drawer .cart-drawer__body::-webkit-scrollbar {
  display: block;
  width: 8px;
}
.cart-drawer .cart-drawer__body::-webkit-scrollbar-track {
  background: transparent;
}
.cart-drawer .cart-drawer__body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}
.cart-drawer .cart-drawer__body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5);
}
/* ============================================================================
   END Cart drawer scrollbar
   ============================================================================ */

/* ============================================================================
   STICKY CART-BAR — hide while cart drawer or backdrop modal is open
   ============================================================================
   When the customer clicks the sticky cart-bar's "Add to Cart" (or the
   one inside the main product form), the theme opens the cart drawer
   and adds `js-drawer-open-cart` to <body>. Without this rule, the
   cart-bar stays pinned to the bottom of the viewport while the drawer
   is open, overlapping the drawer's footer and showing a redundant
   "Add to Cart" button for the product that's already in the cart.

   The backdrop-colour modal (`assets/backdrop-selector.js` lines 466
   & 493) toggles `backdrop-modal-open` on <body> when the customer
   picks a colour. Opening that modal also seems to flip the cart
   drawer's `js-drawer-open-cart` class off (the drawer stays visible
   underneath but the class lifecycle gets disrupted mid-interaction).
   Without explicitly listing `backdrop-modal-open` here, the cart-bar
   pops back up between "open backdrop picker" and "pick a colour" —
   the operator reported this exact flicker on Firefox.

   Both selectors slide the cart-bar back down (off-screen) for as
   long as either body class is present. When the customer closes
   the drawer / picks a colour the class is removed, this rule stops
   applying, and the existing `.cart-bar.is-visible` rule in
   `cart-bar.css` resumes — the IntersectionObserver in
   `cart-bar.js → initObserver()` keeps `.is-visible` on the class
   list if the customer is still scrolled past the main form, so the
   cart-bar slides back up automatically. No JS required.

   Transition timings (0.25s) intentionally a hair faster than the
   in-rule 0.3s / 0.5s on cart-bar.css so the cart-bar is fully gone
   by the time the drawer's slide-in animation completes — no overlap
   blink. */
body.js-drawer-open-cart .cart-bar.is-visible,
body.backdrop-modal-open .cart-bar.is-visible {
  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}
/* ============================================================================
   END STICKY CART-BAR
   ============================================================================ */

/* ============================================================================
   COOKIE CONSENT NOTICE   (snippet: cookie-notice.liquid, JS: cookie-consent.js)
   Fixed bottom-right card on desktop, full-width pinned to bottom on mobile.
   Radio buttons + Save preferences submit. X close uses gallery-nav-icons
   (icon: 'close') with the same 90° rotate-on-hover already wired site-wide.
   ============================================================================ */
.bp-cookie-notice {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 400px;
  max-width: calc(100vw - 48px);
  z-index: 9999;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.06);
  padding: 24px 24px 20px;
  font-family: var(--FONT-STACK-BODY, -apple-system, BlinkMacSystemFont, sans-serif);
  color: #0b0b0b;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms;
}
.bp-cookie-notice.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s;
}

/* Close X — uses gallery-nav-icons; inherits the 90deg hover-rotate from site-wide CSS */
.bp-cookie-notice__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #0b0b0b;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bp-cookie-notice__close .gallery-icon--close {
  width: 24px;
  height: 24px;
  transition: transform 200ms ease;
}
.bp-cookie-notice__close:hover .gallery-icon--close {
  transform: rotate(90deg);
}
.bp-cookie-notice__close:focus-visible {
  outline: 2px solid #0b0b0b;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Heading + body */
.bp-cookie-notice__title {
  font-family: var(--FONT-STACK-BODY, -apple-system, sans-serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0 28px 10px 0;
  color: #0b0b0b;
  line-height: 1.3;
}
.bp-cookie-notice__body {
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  margin: 0 0 18px;
}

/* Two CTA buttons — primary (black filled) left, secondary (outlined) right.
   Uses native theme classes (.btn .btn--solid/outline .btn--black .btn--medium)
   for site-wide button consistency; invert-on-hover inherits from theme.
   Layout-only rules here. */
.bp-cookie-notice__actions {
  margin: 0 0 16px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  flex-wrap: nowrap;
}

/* Buttons stay at their natural medium-padding width (theme's 12px/20px)
   so the inner left/right space matches the homepage / hero CTA pairs.
   `nowrap` above keeps them on one row inside the 400px card.

   The theme's base .btn has `min-width:120px` at >=480px and `min-width:180px`
   at >=1440px. The homepage CTAs ("Book a Team Headshot Day", "Request a
   Quote") have long labels that already exceed 180px so the min-width
   never visibly engages. "Accept all" / "Essential only" are short, so
   the min-width pads their interior with empty space and makes the
   horizontal gap around the text read wider than the homepage CTAs.
   Killing min-width here lets them sit at true natural width. */
.bp-cookie-notice__actions .btn {
  min-width: 0;
}

/* Mobile: stack the buttons vertically per writer's spec section 2. */
@media (max-width: 480px) {
  .bp-cookie-notice__actions {
    flex-direction: column;
  }
  .bp-cookie-notice__actions .btn {
    width: 100%;
  }
}

/* "Read about cookies" link */
.bp-cookie-notice__link {
  display: inline-block;
  font-size: 12.5px;
  color: #666;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(0,0,0,0.25);
  transition: color 160ms ease;
}
.bp-cookie-notice__link:hover {
  color: #0b0b0b;
  text-decoration-color: #0b0b0b;
}

/* Mobile — pin to bottom edge with 16px margins, buttons stack */
@media (max-width: 480px) {
  .bp-cookie-notice {
    right: 16px;
    bottom: 16px;
    left: 16px;
    width: auto;
    max-width: none;
    padding: 20px 20px 18px;
  }
  .bp-cookie-notice__title {
    font-size: 14.5px;
    margin-right: 32px;
  }
  .bp-cookie-notice__body {
    font-size: 13px;
  }
}
/* ============================================================================
   END COOKIE CONSENT NOTICE
   ============================================================================ */

/* ============================================================================
   SITEWIDE H1 HERO STANDARDIZATION (operator request 2026-05-23)
   ----------------------------------------------------------------------------
   All 6 page heroes use Contact's H1 sizing (clamp 28-60px) and the sitewide
   heading-font pattern (Poppins 500 base + Playfair Display Italic <em>).
   Top padding capped at 10px so the H1 sits close to the menu, matching the
   homepage rhythm. Targets: Contact, Master Service, FAQ, About, Pricing,
   and the Homepage hero (native section_image_with_text_7FKgfj).
   See master handoff §11 (heading font pattern) and §21 (operator
   preferences) for the pattern this implements.
   ============================================================================ */

.bp-contactpg-hero__title,
.bp-services-hero__title,
.bp-faq-hero__title,
.bp-about-hero__copy h1,
.bp-pricing-hero__title,
.bk-hero__title,
.bkp-h1,
.bp-team-hero__title,
[id*="section_image_with_text_7FKgfj"] h1,
[id*="section_image_with_text_7FKgfj"] .h1 {
  font-family: 'Poppins', system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-style: normal !important;
  font-size: clamp(28px, 5.5vw, 60px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
  color: #0b0b0b !important;
  margin: 0 0 24px !important;
  overflow-wrap: anywhere;
}

.bp-contactpg-hero__title em,
.bp-services-hero__title em,
.bp-faq-hero__title em,
.bp-about-hero__copy h1 em,
.bp-pricing-hero__title em,
.bk-hero__title em,
.bkp-h1 em,
.bp-team-hero__title em,
[id*="section_image_with_text_7FKgfj"] h1 em,
[id*="section_image_with_text_7FKgfj"] .h1 em {
  font-family: var(--FONT-STACK-HIGHLIGHT, "Playfair Display", Georgia, serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: #0b0b0b !important;
}

/* Hero top padding capped at 10px from menu (desktop + mobile) */
.bp-services-hero,
.bp-faq-hero,
.bp-about-hero,
.bp-contactpg-hero,
.bp-pricing-hero,
.bk-hero,
.bp-team-hero,
.bp-evg-hero {
  padding-top: 10px !important;
}
/* Sitewide hero-title vertical alignment (operator 2026-06): pin every hero's
   content column to the TOP so the H1 lands at the same position on every page
   (matching the FAQ page). Without this, heroes with a tall right-column (device
   mockup) vertically-centre and drop the title lower than pages with a short one. */
.bp-services-hero__grid,
.bp-faq-hero__grid,
.bp-about-hero,
.bp-pricing-hero__grid,
.bp-team-hero__grid,
.bp-evg-hero__grid,
.bp-li .bp-services-hero__grid,
.bp-onloc .bp-services-hero__grid,
.bp-event .bp-services-hero__grid,
.bp-execp .bp-services-hero__grid {
  align-items: start !important;
}
/* Sitewide hero-title line-height (operator 2026-06): several heroes omit line-height
   and inherit the ~1.2 browser default, which drops the title's visible top below the
   1.08 heroes (services/exec/on-location/contact). Pin every hero title to 1.08 so the
   text tops land at the same height across pages. */
.bp-services-hero__title, .bp-evg-h1, .bp-faq-hero__title, .bp-about-hero__copy h1,
.bp-pricing-hero__title, .bp-contactpg-hero__title, .bp-team-hero__title, .bk-hero__title, .bkp-h1 {
  line-height: 1.08 !important;
}
/* ============================================================================
   END SITEWIDE H1 HERO STANDARDIZATION
   ============================================================================ */


/* ============================================================================
   ACTIVE-PAGE INDICATOR ON TOP-LEVEL NAV
   ============================================================================

   When a top-level nav item matches the current page (Shopify sets the
   wrapping div to `.menu-item--active`), draw a permanent underline
   under that item — reusing the theme's existing .navtext::before
   pseudo-element so it visually matches the hover animation exactly.

   Hover interaction:
     - Mouse outside the nav  → active underline visible
     - Mouse hovers ANY other item in the nav → active underline
       retracts (scaleX 1 → 0). The hovered item plays its normal
       hover-draw animation.
     - Mouse hovers the active item itself → existing hover rule wins,
       underline stays/redraws via the standard animation.
     - Mouse leaves the nav → active underline draws back in.

   Specificity note: the rule that retracts the underline uses
   `.menu__items:hover .menu-item--active:not(:hover)` so it ONLY
   fires when a non-active item is being hovered, leaving the
   theme's `.navlink--toplevel > .navtext:hover::before` rule to
   handle the case where the active item itself is hovered.

   Book Your Portrait / Book a Session is excluded because that
   item is styled as a black pill (.book-portrait-button), not the
   underlined-text treatment — an underline under a pill would
   look wrong.
   ============================================================================ */

.menu-item--active > .navlink--toplevel:not(.book-portrait-button) > .navtext::before {
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.menu__items:hover .menu-item--active:not(:hover) > .navlink--toplevel:not(.book-portrait-button) > .navtext::before {
  transform: scaleX(0);
  transform-origin: right;
}
@keyframes bp-blog-index-featured-pin-dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* ============================================================================
   END BLOG INDEX
   ============================================================================ */
   ============================================================================ */

/* ============================================================================
   TEAM HEADSHOTS PAGE   (page handle: team-headshots-toronto)
   Greys-only translation of the v2 Claude Design mockup
   (Design System/pages/Team Headshots Toronto v2.html). Design-red + salmon
   retired per §6/§21; .kicker eyebrows dropped per §21; header/footer chrome
   dropped per §23. Thesis = native section-text; FAQ = native section-accordions
   (auto FAQPage). All component classes page-scoped bp-team-*; each section also
   carries .bp-team so `.bp-team em` applies the Playfair-italic highlight. CTAs
   use the theme .btn classes (not redefined here). The §3 discount section and
   the final CTA are intentionally dark (#0a0a0a/#0b0b0b) — monochrome, per §20.
   ============================================================================ */

.bp-team em{ font-family:var(--FONT-STACK-HIGHLIGHT,"Playfair Display",serif) !important; font-style:var(--FONT-STYLE-HIGHLIGHT,italic) !important; font-weight:var(--FONT-WEIGHT-HIGHLIGHT,400) !important; }

/* numbered overview */
.bp-team-ov__grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:22px; margin-top:6px; }
.bp-team-ov__item{ padding-top:18px; border-top:2px solid #0a0a0a; display:block; text-decoration:none; color:inherit; transition:opacity .15s ease; }
.bp-team-ov__item:hover{ opacity:0.6; }
.bp-team-ov__num{ font-family:var(--FONT-STACK-HIGHLIGHT,"Playfair Display",serif); font-style:italic; font-size:34px; color:#0a0a0a; line-height:1; display:block; margin-bottom:14px; }
.bp-team-ov__item p{ font-size:1rem; line-height:1.5; font-weight:500; letter-spacing:-0.005em; margin:0; }



/* ============================================================================
   END TEAM HEADSHOTS PAGE
   ============================================================================ */

/* ============================================================================
   LINKEDIN HEADSHOTS PAGE — V2   (page handle: linkedin-headshots)
   Namespace: bp-li-*  (parallel to bp-execp / bp-team). Built on the shared
   bp-services-* shell + bp-about-finalcta, scoped via the .bp-li co-class so the
   shared shell and the Services page are never disturbed.
   Source design: /Design System/pages/linkedin-headshots.html
   Copy locked: page-09 copy-draft.md. Monochrome + bp-svc-red accent (the
   services-page red exception, handoff §6). No cream. Em-dash-free.
   ============================================================================ */

/* tokens + em accent for the standalone .bp-li sections that don't carry .bp-services */
.bp-li{
  --bp-svc-ink:var(--ink); --bp-svc-ink-2:var(--ink-2); --bp-svc-mute:var(--mute);
  --bp-svc-hair:var(--hair); --bp-svc-paper:var(--white); --bp-svc-neutral:var(--paper);
  --bp-svc-red:#d43747; --bp-svc-red-soft:rgba(212,55,71,0.08);
  --bp-svc-r-md:20px; --bp-svc-r-lg:28px; --bp-svc-r-pill:999px;
}
.bp-li em{
  font-family: var(--FONT-STACK-HIGHLIGHT, "Playfair Display", Georgia, serif) !important;
  font-style: italic !important; font-weight: 400 !important;
}

/* ---------- HERO (overrides of the shared bp-services-hero) ---------- */
.bp-li.bp-services-hero{ padding:52px 60px 28px; }
.bp-li .bp-services-hero__crumb a{ color:var(--bp-svc-mute); text-decoration:none; }
.bp-li .bp-services-hero__crumb a:hover{ color:var(--bp-svc-ink); }
.bp-li .bp-services-hero__grid{ grid-template-columns:1.06fr 1fr; gap:56px; align-items:center; }
.bp-li .bp-services-hero__sub{ font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--bp-svc-red); font-weight:600; margin:0 0 16px; }
.bp-li .bp-services-hero__title{ font-size:60px; line-height:1.08; letter-spacing:-0.022em; margin:0 0 22px; max-width:820px; }
.bp-li .bp-services-hero__lede{ font-size:1rem; line-height:1.65; margin:0 0 30px; max-width:700px; }
.bp-li .bp-services-hero__lede strong{ font-weight:600; color:var(--bp-svc-ink); }
.bp-li .bp-services-hero__lede a{ color:var(--bp-svc-ink); text-decoration:underline; text-underline-offset:3px; }
.bp-li .bp-services-hero__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:30px; }
.bp-li .bp-services-hero__micro{ display:flex; flex-wrap:wrap; gap:0; padding-top:26px; border-top:1px solid var(--bp-svc-hair); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--bp-svc-mute); font-weight:600; }
.bp-li .bp-services-hero__micro span + span::before{ content:"\00B7"; margin:0 12px; color:#bbb; }
@keyframes bpliPulse{ 0%{box-shadow:0 0 0 0 rgba(212,55,71,0.5);} 70%{box-shadow:0 0 0 7px rgba(212,55,71,0);} 100%{box-shadow:0 0 0 0 rgba(212,55,71,0);} }

/* ---------- THESIS label (reuses shared bp-services-thesis) ---------- */
.bp-li .bp-services-thesis__label{ font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--bp-svc-red); font-weight:600; margin-bottom:18px; }
.bp-li .bp-services-thesis blockquote{ font-style:normal; } /* override Palo Alto default blockquote italic; em still italic via .bp-li em */
.bp-li .bp-services-thesis blockquote em{ color:var(--bp-svc-ink); }

/* ---------- generic section padding (matches exec/team spokes) ---------- */
.bp-li.bp-services-sect{ padding:88px 60px; }
.bp-li .bp-services-sect__intro a{ color:var(--bp-svc-ink); text-decoration:underline; text-underline-offset:3px; }
@keyframes bp-li-bd-dot-pulse{
  0%   { box-shadow: 0 4px 12px -4px rgba(0,0,0,0.55), 0 0 0 0 rgba(255,255,255,0.7); }
  70%  { box-shadow: 0 4px 12px -4px rgba(0,0,0,0.55), 0 0 0 10px rgba(255,255,255,0); }
  100% { box-shadow: 0 4px 12px -4px rgba(0,0,0,0.55), 0 0 0 0 rgba(255,255,255,0); }
}

/* ---------- RESPONSIVE ---------- */




/* ============================================================================
   END LINKEDIN HEADSHOTS PAGE — V2
   ============================================================================ */


/* ============================================================================
   ON-LOCATION HEADSHOTS PAGE   (page handle: on-location-headshots-toronto)
   page-10, Layer-2 service spoke. Namespace bp-onloc-*, parallel to
   bp-li / bp-team / bp-execp. Built on the shared bp-services-* shell +
   bp-about-finalcta, scoped via the .bp-onloc co-class so the shared shell
   and the Services page are never disturbed.
   Source design: /Design system (Updated)/pages/on-location-headshots-toronto.*
   Copy locked: page-10 copy-draft.md / schema.json. Monochrome + bp-svc-red
   accent (services-page red exception, handoff §6). No cream. No #ff9da6
   (pink translated to white/grey on dark surfaces). Em-dash-free. Hero plate
   layout = the design's "Stacked" (tw-hero-c) variant, baked in as default.
   ============================================================================ */

/* tokens + em accent for the standalone .bp-onloc sections */
.bp-onloc{
  --bp-svc-ink:var(--ink); --bp-svc-ink-2:var(--ink-2); --bp-svc-mute:var(--mute);
  --bp-svc-hair:var(--hair); --bp-svc-paper:var(--white); --bp-svc-neutral:var(--paper);
  --bp-svc-red:#d43747; --bp-svc-red-soft:rgba(212,55,71,0.08);
  --bp-svc-r-md:20px; --bp-svc-r-lg:28px; --bp-svc-r-pill:999px;
  --bp-plan-paper:#fafafa; --bp-plan-line:#d8d8d8; --bp-plan-ink:rgba(20,20,20,0.6);
}
.bp-onloc em{
  font-family: var(--FONT-STACK-HIGHLIGHT, "Playfair Display", Georgia, serif) !important;
  font-style: italic !important; font-weight: 400 !important;
}
.bp-onloc[id]{ scroll-margin-top:90px; }
/* Operator 2026-06-01: kill horizontal page scroll on the On-Location page
   (it showed as a white gutter on the dark closing CTA and let the page drag
   sideways). Scoped to THIS page only via its unique body id — not sitewide.
   A per-section .bp-onloc rule wasn't enough because the jump-nav and the FAQ
   accordions on this page are not .bp-onloc sections, so their overflow still
   reached the viewport. Clipping at the page body catches every section.
   `clip` (not `hidden`) is used so it never becomes a scroll container —
   position:sticky and any inner carousel keep working; only the page itself
   can't be dragged sideways. The thesis word-wrap fix below removes the
   actual overflow source; this guarantees no other element can reintroduce it. */
body#on-location-headshots-toronto-businessportraits-ca{ overflow-x:clip; }

/* ---------- HERO (scoped overrides of the shared bp-services-hero) ---------- */
.bp-onloc.bp-services-hero{ background:#fff; padding:48px 60px 28px; }
.bp-onloc .bp-services-hero__inner{ max-width:1280px; margin:0 auto; }
.bp-onloc .bp-services-hero__crumb{ font-size:12px; color:var(--bp-svc-mute); margin-bottom:24px; letter-spacing:0.02em; }
.bp-onloc .bp-services-hero__crumb a{ color:var(--bp-svc-mute); text-decoration:none; }
.bp-onloc .bp-services-hero__crumb a:hover{ color:var(--bp-svc-ink); }
.bp-onloc .bp-services-hero__crumb .sep{ margin:0 8px; color:#bbb; }
.bp-onloc .bp-services-hero__crumb .here{ color:var(--bp-svc-ink); font-weight:500; }
.bp-onloc .bp-services-hero__grid{ display:grid; grid-template-columns:1.04fr 1fr; gap:56px; align-items:center; }
.bp-onloc .bp-services-hero__left{ display:flex; flex-direction:column; }
.bp-onloc .bp-services-hero__title{ font-family:Poppins,sans-serif; font-weight:500; font-size:60px; line-height:1.08; letter-spacing:-0.022em; margin:0 0 24px; color:var(--bp-svc-ink); max-width:760px; }
.bp-onloc .bp-services-hero__lede{ font-family:Poppins,sans-serif; font-size:1rem; line-height:1.66; color:var(--bp-svc-ink-2); margin:0 0 32px; max-width:600px; }
.bp-onloc .bp-services-hero__lede strong{ font-weight:600; color:var(--bp-svc-ink); }
.bp-onloc .bp-services-hero__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:30px; }
.bp-onloc .bp-services-hero__micro{ display:flex; flex-wrap:wrap; gap:0; padding-top:26px; border-top:1px solid var(--bp-svc-hair); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--bp-svc-mute); font-weight:600; }
.bp-onloc .bp-services-hero__micro span + span::before{ content:"\00B7"; margin:0 12px; color:#bbb; }

/* --- Hero PLATE (decorative): dashed office footprint, deliverable portrait,
   footprint spec card + setup/teardown clock. Stacked layout baked in. --- */
.bp-onloc-plate{
  /* min-height bumped 660 -> 700 (operator 2026-06-01) to give the
     deliverable image room to grow without colliding with the footprint/
     clock cards anchored near the base. */
  position:relative; justify-self:stretch; align-self:stretch; min-height:700px;
  border-radius:var(--bp-svc-r-lg); overflow:hidden;
  background:var(--bp-plan-paper); border:1px solid var(--bp-svc-hair);
}
.bp-onloc-plate::before{ content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(20,18,16,0.05) 1px, transparent 1px),linear-gradient(90deg, rgba(20,18,16,0.05) 1px, transparent 1px);
  background-size:30px 30px; }
.bp-onloc-plate__field{ position:absolute; left:28px; right:28px; top:28px; bottom:28px; border:1.5px dashed rgba(20,18,16,0.38); }
.bp-onloc-plate__tag{ position:absolute; left:50%; right:auto; top:30px; bottom:auto; transform:translateX(-50%); text-align:center; max-width:80%; z-index:6; }
.bp-onloc-plate__tag .k{ display:flex; align-items:center; justify-content:center; gap:9px; font-family:Poppins,sans-serif; font-size:10px; letter-spacing:0.18em; text-transform:uppercase; font-weight:600; color:var(--bp-svc-ink); }
.bp-onloc-plate__tag .k::before{ content:""; flex-shrink:0; width:18px; height:1px; background:var(--bp-svc-red); }
.bp-onloc-plate__tag .s{ display:block; margin-top:8px; padding-left:0; font-family:Poppins,sans-serif; font-size:11px; letter-spacing:0.01em; color:var(--bp-svc-mute); }
/* Operator 2026-06-01: a subtext line was removed from the plate tag, leaving
   a gap between "The studio comes to you" and the deliverable image. Move the
   image up (top 90 -> 64) to close that gap and widen it a touch (336 -> 360 /
   60% -> 62%) so it fills more of the right column. Numbers are bounded so the
   image bottom still clears the footprint/clock cards anchored at the plate
   base (~20px clearance) — do not enlarge further without also growing the
   plate min-height, or the cards will overlap. */
/* Operator 2026-06-01 (round 2): grow the deliverable image to fill the gap
   below the "The studio comes to you" tag. Up from top:64/62%/360 to
   top:54/66%/400. Bounded against the cards wrapper below (now flex, auto
   height, anchored bottom:40) so it still clears them. Source image is 336px,
   so 400 is a ~19% upscale — fine for a decorative plate; a higher-res hero
   upload would sharpen it if ever wanted. */
.bp-onloc-plate__deliver{ position:absolute; left:50%; right:auto; top:54px; bottom:auto; transform:translateX(-50%); width:66%; max-width:400px; z-index:4; background:#fff; border-radius:16px; padding:9px 9px 0; box-shadow:0 34px 70px -30px rgba(0,0,0,0.45); }
.bp-onloc-plate__shot{ position:relative; overflow:hidden; border-radius:11px; aspect-ratio:1 / 1; background:#ddd; }
.bp-onloc-plate__shot img{ width:100%; height:100%; object-fit:cover; object-position:50% 18%; display:block; }
.bp-onloc-plate__delivcap{ display:flex; align-items:center; justify-content:center; gap:9px; padding:11px 6px 13px; font-family:Poppins,sans-serif; font-size:9px; letter-spacing:0.1em; text-transform:uppercase; color:var(--bp-svc-mute); font-weight:600; }
.bp-onloc-plate__delivcap .key{ flex-shrink:0; padding:3px 9px; border:1px solid var(--bp-svc-hair); border-radius:999px; color:var(--bp-svc-ink); letter-spacing:0.12em; }
.bp-onloc-plate__dim{ position:absolute; left:28px; right:auto; top:auto; bottom:28px; width:calc(50% - 40px); max-width:242px; height:164px; background:#fff; border:1px solid rgba(0,0,0,0.07); border-radius:14px; padding:15px 17px; box-shadow:0 22px 50px -26px rgba(0,0,0,0.4); }
.bp-onloc-plate__dim h5{ margin:0 0 11px; font-family:Poppins,sans-serif; font-size:9px; letter-spacing:0.16em; text-transform:uppercase; font-weight:600; color:var(--bp-svc-mute); }
.bp-onloc-dimrow{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:7px 0; border-top:1px solid var(--bp-svc-hair); }
.bp-onloc-dimrow:first-of-type{ border-top:none; }
.bp-onloc-dimrow .k{ font-family:Poppins,sans-serif; font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--bp-svc-mute); font-weight:600; }
.bp-onloc-dimrow .v{ font-family:Poppins,sans-serif; font-weight:600; font-size:14px; color:var(--bp-svc-ink); }
.bp-onloc-dimrow--min .v{ color:var(--bp-svc-ink); }
.bp-onloc-plate__clock{ position:absolute; left:auto; right:28px; top:auto; bottom:28px; width:calc(50% - 40px); max-width:242px; height:164px; background:rgba(255,255,255,0.96); border:1px solid rgba(0,0,0,0.06); border-radius:14px; box-shadow:0 22px 50px -18px rgba(0,0,0,0.4); display:flex; flex-direction:column; align-items:stretch; justify-content:space-between; gap:0; text-align:left; padding:20px 18px; z-index:6; }
.bp-onloc-plate__clock > div:not(.div){ display:flex; align-items:baseline; justify-content:flex-start; gap:9px; white-space:nowrap; }
.bp-onloc-plate__clock .big{ font-family:Poppins,sans-serif; font-weight:500; font-size:40px; line-height:1; letter-spacing:-0.02em; color:var(--bp-svc-ink); white-space:nowrap; flex-shrink:0; }
.bp-onloc-plate__clock .big em{ font-family:var(--FONT-STACK-HIGHLIGHT); font-style:italic; font-size:19px; color:var(--bp-svc-red); }
.bp-onloc-plate__clock .lab{ margin-top:0; font-family:Poppins,sans-serif; font-size:11.5px; letter-spacing:0; text-transform:none; color:var(--bp-svc-mute); font-weight:600; }
.bp-onloc-plate__clock .div{ width:100%; height:1px; align-self:stretch; background:var(--bp-svc-hair); }

/* Operator 2026-06-01 (round 2): the footprint + clock cards are now wrapped
   in .bp-onloc-plate__cards, a flex row. This fixes three things in one go,
   fluidly at every width (mobile + desktop):
     - EVEN SPACING: the wrapper spans the dashed field (left/right:28 = the
       field inset) with 16px inner padding + a 16px gap, so each card sits
       16px off the dotted lines and 16px from each other. No more cards
       flush against the dashed border.
     - AUTO HEIGHT: align-items:stretch + the children dropping their fixed
       164px height means both cards grow to the taller one's content and
       match. The footprint card's "1 outlet" row can no longer be clipped.
     - CENTRED PAIR: flex:1 on each card keeps them balanced left/right.
   bottom:40 floats the row just above the field's bottom edge (also off the
   dotted line). */
.bp-onloc-plate__cards{
  position:absolute; left:28px; right:28px; bottom:40px;
  display:flex; gap:16px; padding:0 16px;
  align-items:stretch; z-index:6;
}
.bp-onloc-plate__cards .bp-onloc-plate__dim,
.bp-onloc-plate__cards .bp-onloc-plate__clock{
  position:static; left:auto; right:auto; top:auto; bottom:auto;
  width:auto; max-width:none; height:auto;
  flex:1 1 0; min-width:0;
}

/* ---------- THESIS (scoped) ---------- */
.bp-onloc.bp-services-thesis{ background:var(--bp-svc-neutral); padding:24px 60px; }
.bp-onloc .bp-services-thesis__inner{ max-width:980px; margin:0 auto; text-align:left; }
.bp-onloc .bp-services-thesis__label{ font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--bp-svc-red); font-weight:600; margin-bottom:18px; }
/* Operator 2026-06-01: was rendering as all-italic on the live site
   (master handoff §15 anti-pattern #17). The selectors below were
   `.bp-onloc .bp-services-thesis blockquote` (descendant, with space),
   but on this page both classes live on the SAME <section> element
   — so the descendant combinator never matches and the base
   theme's `blockquote { font-style: italic }` cascade wins. Compound
   selector (no space) matches the section properly. */
.bp-onloc.bp-services-thesis blockquote{ font-family:Poppins,sans-serif; font-style:normal; font-weight:500; font-size:20px; line-height:1.6; letter-spacing:-0.01em; color:var(--bp-svc-ink); margin:0; overflow-wrap:break-word; }
.bp-onloc.bp-services-thesis blockquote em{ color:var(--bp-svc-ink); }

/* ---------- NUMBERED OVERVIEW ---------- */
.bp-onloc-overview{ background:#fff; padding:64px 60px; border-bottom:1px solid var(--bp-svc-hair); }
.bp-onloc-overview__inner{ max-width:1280px; margin:0 auto; }
.bp-onloc-overview__head{ display:flex; align-items:baseline; gap:18px; margin-bottom:34px; flex-wrap:wrap; }
.bp-onloc-overview__kicker{ font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--bp-svc-red); font-weight:600; }
.bp-onloc-overview__lead{ font-size:1rem; color:var(--bp-svc-mute); }
.bp-onloc-overview__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:ov; }
.bp-onloc-overview__item{ padding-top:18px; border-top:2px solid var(--bp-svc-ink); counter-increment:ov; display:flex; flex-direction:column; gap:12px; }
.bp-onloc-overview__item::before{ content:counter(ov, decimal-leading-zero); font-family:var(--FONT-STACK-HIGHLIGHT); font-style:italic; font-weight:400; font-size:30px; color:var(--bp-svc-ink-2); line-height:1; }
.bp-onloc-overview__item p{ margin:0; font-size:1rem; line-height:1.5; color:var(--bp-svc-ink); font-weight:500; letter-spacing:-0.005em; }

/* ---------- SECTION SHELL (scoped overrides) ---------- */
.bp-onloc.bp-services-sect{ padding:88px 60px; background:#fff; }
.bp-onloc.bp-services-sect.bp-services-sect--alt{ background:var(--bp-svc-neutral); }
.bp-onloc .bp-services-sect__inner{ max-width:1280px; margin:0 auto; }
.bp-onloc .bp-services-sect__kicker{ font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--bp-svc-red); font-weight:600; margin-bottom:18px; display:flex; align-items:center; gap:12px; }
.bp-onloc .bp-services-sect__kicker .num{ font-family:var(--FONT-STACK-HIGHLIGHT); font-style:italic; font-weight:400; font-size:18px; color:var(--bp-svc-red); letter-spacing:0; }
.bp-onloc .bp-services-sect__h{ font-family:Poppins,sans-serif; font-weight:500; font-size:44px; line-height:1.1; letter-spacing:-0.02em; color:var(--bp-svc-ink); margin:0 0 22px; max-width:980px; }
.bp-onloc .bp-services-sect__intro{ font-size:1rem; line-height:1.7; color:var(--bp-svc-ink-2); max-width:760px; margin:0 0 28px; }
.bp-onloc .bp-services-sect__intro a{ color:var(--bp-svc-ink); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(0,0,0,0.25); }
.bp-onloc .bp-services-sect__intro a:hover{ text-decoration-color:var(--bp-svc-ink); }
.bp-onloc .bp-services-sect__intro strong{ font-weight:600; color:var(--bp-svc-ink); }
.bp-onloc .bp-services-sect__intro p + p{ margin-top:14px; }
.bp-onloc .bp-services-sect__intro .direct-answer{ font-size:18px; line-height:1.66; color:var(--bp-svc-ink); margin-bottom:18px; }

/* ---------- §2 setup/teardown timeline + kit ---------- */
.bp-onloc-timeline{ margin:6px 0 30px; border:1px solid var(--bp-svc-hair); border-radius:var(--bp-svc-r-md); padding:24px 26px 26px; background:#fff; }
.bp-onloc-timeline__lab{ font-family:Poppins,sans-serif; font-size:10px; letter-spacing:0.2em; text-transform:uppercase; font-weight:600; color:var(--bp-svc-mute); margin-bottom:20px; }
.bp-onloc-timeline__track{ position:relative; height:3px; background:var(--bp-svc-hair); border-radius:2px; margin:0 6px 14px; }
.bp-onloc-timeline__fill{ position:absolute; left:0; top:0; bottom:0; width:24%; background:var(--bp-svc-red); border-radius:2px; }
.bp-onloc-timeline__fill--end{ left:auto; right:0; width:16%; background:var(--bp-svc-ink); }
.bp-onloc-timeline__pts{ display:flex; justify-content:space-between; gap:12px; }
.bp-onloc-timeline__pt{ flex:1; text-align:center; }
.bp-onloc-timeline__pt:first-child{ text-align:left; } .bp-onloc-timeline__pt:last-child{ text-align:right; }
.bp-onloc-timeline__big{ font-family:Poppins,sans-serif; font-weight:500; font-size:26px; line-height:1; letter-spacing:-0.02em; color:var(--bp-svc-ink); }
.bp-onloc-timeline__big em{ font-family:var(--FONT-STACK-HIGHLIGHT); font-style:italic; font-size:15px; color:var(--bp-svc-red); }
.bp-onloc-timeline__pt--mute .bp-onloc-timeline__big{ color:var(--bp-svc-mute); font-weight:400; font-size:18px; }
.bp-onloc-timeline__cap{ font-family:Poppins,sans-serif; font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--bp-svc-mute); font-weight:600; margin-top:6px; }

/* ---------- RESPONSIVE ---------- */



/* Hero PLATE footprint/clock cards — on narrow phones the dim-card rows were
   too tight: "MINIMUM" + "8.5 x 5 ft" on one space-between line meant the
   "ft" kissed the card's right edge. Stack each row (label over value,
   left-aligned) so the values get full breathing room. Matches the clock
   card, which already stacks its label under its value. Operator 2026-06-01. */


/* ============================================================================
   END ON-LOCATION HEADSHOTS PAGE
   ============================================================================ */


/* ============================================================================
   HOMEPAGE — photo row band (operator 2026-06-01)
   ----------------------------------------------------------------------------
   The "Selected work" photo grid (section key bphome_portfolio, a
   photo-grid-lightbox instance) should sit in a soft #fafafa band with a
   little vertical breathing room. The section's own inline <style> sets
   `#PhotoGrid--{id} { padding:0; background:transparent }`, which renders
   AFTER custom.css in the DOM, so we need !important to win. The attribute
   selector matches the instance by its template-section-key suffix so it
   survives a theme duplication / id change, and won't touch the gallery
   pages' own photo grids.
   ============================================================================ */
[id^="PhotoGrid--"][id$="__bphome_portfolio"]{
  background:#fafafa !important;
  padding:20px 0 !important;
}

/* ---- Console box ---- */
.bp-faqop-console{
  background:#fff;
  border:1px solid #e8e8e8;
  border-radius:28px;
  box-shadow:0 30px 70px -38px rgba(0,0,0,0.34);
  overflow:hidden;
}
.bp-faqop-console__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px;
  padding:16px 24px;
  border-bottom:1px solid #0a0a0a;
}
.bp-faqop-console__lead{
  font-size:11px; letter-spacing:0.22em;
  text-transform:uppercase; font-weight:600;
  color:#0a0a0a; white-space:nowrap;
}
.bp-faqop-console__sub{
  font-family:var(--FONT-STACK-HIGHLIGHT, "Playfair Display", Georgia, serif);
  font-style:italic; font-size:15px; color:#666; white-space:nowrap;
}
.bp-faqop-console__body{ padding:24px 24px 22px; }

/* ---- "Asked" row ---- */
.bp-faqop-ask{
  display:grid; grid-template-columns:34px 1fr;
  gap:14px; align-items:start;
}
.bp-faqop-ask__q{
  width:34px; height:34px; border-radius:9px;
  background:#0a0a0a; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:15px;
}
.bp-faqop-ask__tag{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:10px; letter-spacing:0.16em;
  text-transform:uppercase; color:#666; margin:0 0 5px;
}
.bp-faqop-ask__txt{
  font-weight:500; font-size:18.5px; line-height:1.3;
  letter-spacing:-0.01em; color:#0a0a0a; margin:0;
}
.bp-faqop-ask__txt em{
  font-family:var(--FONT-STACK-HIGHLIGHT, "Playfair Display", Georgia, serif);
  font-style:italic; font-weight:400;
  color:#0a0a0a;
}
.bp-faqop-ask__cursor{
  display:inline-block; width:2px; height:0.95em;
  background:#0a0a0a; margin-left:3px;
  transform:translateY(2px);
  animation:bp-faqop-blink 1.1s steps(1) infinite;
}
@keyframes bp-faqop-blink{ 50%{ opacity:0; } }

/* ---- Stem between Ask row and facets ---- */
.bp-faqop-stem{
  width:1px; height:26px; background:#e8e8e8;
  margin:16px 0 16px 16px; position:relative;
}
.bp-faqop-stem::after{
  content:""; position:absolute;
  left:50%; bottom:0;
  width:6px; height:6px; border-radius:50%;
  background:#666;
  transform:translate(-50%,50%);
}

/* ---- Facets ---- */
.bp-faqop-facets{ display:flex; flex-direction:column; gap:8px; }
.bp-faqop-facet{
  display:grid; grid-template-columns:26px 1fr auto;
  gap:13px; align-items:center;
  padding:13px 15px;
  border:1px solid #e8e8e8; border-radius:12px;
  background:#fafafa;
  /* Handoff §5 update 2026-06-01: facets are now in-page jump anchors
     (#pricing-lede / #team-day-lede / #deliverables-lede). They render as
     <a> so the default browser underline + link colour need clearing. */
  text-decoration:none; color:inherit;
  transition:border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.bp-faqop-facet:hover{
  border-color:#0a0a0a;
  box-shadow:0 8px 22px -16px rgba(0,0,0,0.45);
  transform:translateY(-1px);
}
.bp-faqop-facet__chk{
  width:22px; height:22px; border-radius:50%;
  background:#0a0a0a;
  display:flex; align-items:center; justify-content:center;
}
.bp-faqop-facet__chk svg{ width:11px; height:9px; }
.bp-faqop-facet__name{
  font-weight:600; font-size:14.5px;
  color:#0a0a0a; letter-spacing:-0.005em;
}
.bp-faqop-facet__name small{
  display:block; font-weight:400; font-size:11.5px;
  color:#666; letter-spacing:0; margin-top:1px;
}
.bp-faqop-facet__state{
  font-family:var(--FONT-STACK-HIGHLIGHT, "Playfair Display", Georgia, serif);
  font-style:italic; font-size:13.5px; color:#0a0a0a;
}

/* ---- Personas footer ---- */
.bp-faqop-personas{
  display:flex; align-items:center; gap:10px;
  margin-top:20px; padding-top:18px;
  border-top:1px solid #e8e8e8;
}
.bp-faqop-personas__l{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:10px; letter-spacing:0.14em;
  text-transform:uppercase; color:#666;
}
.bp-faqop-personas__row{
  display:flex; gap:7px; margin-left:auto;
}
.bp-faqop-personas__row span{
  font-size:11.5px; font-weight:500;
  color:#2a2a2a;
  padding:5px 11px;
  border:1px solid #e8e8e8; border-radius:999px;
}



/* ============================================================================
   END FAQ HERO CONSOLE
   ============================================================================ */


/* ============================================================================
   SERVICES HERO — "INK ANCHORS" SERVICE BUBBLE TILES (right-column device)
   ----------------------------------------------------------------------------
   Operator 2026-06-01: per faq-services-hero-restructure-handoff.md, the
   existing Services hero already has a 2-col grid (1.55fr / 1fr) with the
   right column empty. Drop the 6 service bubble tiles into the right column.

   Color tokens swapped per handoff §2: design's #f3f2ee → master palette
   #fafafa; design's #e8e8e6 → master palette #e8e8e8. No em dashes. Tile
   3 reads "Board and investor relations" — the design's "IR" is banned.
   ============================================================================ */

.bp-svcop-tiles{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}
.bp-svcop-tile{
  border-radius:22px;
  padding:18px 22px;
  min-height:120px;
  display:flex; flex-direction:column;
  justify-content:space-between;
  text-decoration:none;
  transition:transform 160ms ease, box-shadow 160ms ease;
}
.bp-svcop-tile:hover{ transform:translateY(-3px); }
.bp-svcop-tile__cat{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:9.5px; letter-spacing:0.14em;
  text-transform:uppercase; opacity:0.62;
}
.bp-svcop-tile__nm{
  font-family:var(--FONT-STACK-HIGHLIGHT, "Playfair Display", Georgia, serif);
  font-style:italic; font-size:21px; line-height:1.08;
  margin-top:14px;
}
.bp-svcop-tile__nm b{
  font-family:var(--FONT-STACK-BODY, Poppins, sans-serif);
  font-style:normal; font-weight:500;
  display:block; font-size:15px;
  letter-spacing:0.005em; margin-bottom:3px;
}
.bp-svcop-tile--ink{ background:#0a0a0a; color:#fff; }
.bp-svcop-tile--ink:hover{ box-shadow:0 18px 40px -22px rgba(0,0,0,0.5); }
.bp-svcop-tile--paper{
  background:#fff; color:#0a0a0a;
  border:1px solid #e8e8e8;
}
.bp-svcop-tile--paper:hover{ box-shadow:0 18px 40px -26px rgba(0,0,0,0.32); }
.bp-svcop-tile--soft{
  background:#fafafa; color:#0a0a0a;
}
.bp-svcop-tile--soft:hover{ box-shadow:0 18px 40px -26px rgba(0,0,0,0.22); }
.bp-svcop-tile--wide{ grid-column:span 2; min-height:96px; }
.bp-svcop-tile--wide .bp-svcop-tile__nm{ margin-top:10px; }

/* ============================================================================
   END SERVICES HERO TILES
   ============================================================================ */


/* ============================================================================
   HEADSHOT GALLERY   (page handle: professional-business-portraits-gallery)
   Page-scoped namespace. Reuses shared shell (.bp-services-hero/-sect/-thesis,
   .bp-about-finalcta, .bp-jumpnav-cards) + the existing .page-gallery lightbox.
   Only the gallery's own device cards / attrs strip / FAQ live here.
   ============================================================================ */
.bp-gallery{
  --bp-svc-ink:var(--ink); --bp-svc-ink-2:var(--ink-2); --bp-svc-mute:var(--mute);
  --bp-svc-hair:var(--hair); --bp-svc-paper:var(--white); --bp-svc-neutral:var(--paper);
  --bp-svc-red:#d43747; --bp-svc-red-soft:rgba(212,55,71,0.08);
  --bp-svc-r-md:20px; --bp-svc-r-lg:28px; --bp-svc-r-pill:999px;
}
.bp-gallery em{
  font-family:var(--FONT-STACK-HIGHLIGHT, "Playfair Display", serif) !important;
  font-style:var(--FONT-STYLE-HIGHLIGHT, italic) !important;
  font-weight:var(--FONT-WEIGHT-HIGHLIGHT, 400) !important;
}
.bp-gallery-trustline{ max-width:1280px; margin:22px auto 0; font-size:1rem; line-height:1.6; color:var(--bp-svc-mute); }
.bp-gallery-trustline strong{ font-weight:600; color:var(--bp-svc-ink); }
/* keep headshot thumbnails at their ~400px source size (3-up), never upscaled */
.bp-gallery .page-gallery__item{ max-width:400px; }
/* magnifying-glass zoom affordance on hover (clickable image tiles only) */
.bp-gallery .page-gallery__item:not(.page-gallery__item--video)::after{
  content:""; position:absolute; top:14px; right:14px; z-index:3;
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,0.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  opacity:0; transform:scale(0.85); pointer-events:none;
  box-shadow:0 6px 16px -6px rgba(0,0,0,0.4);
  transition:opacity 180ms ease, transform 180ms ease;
}
.bp-gallery .page-gallery__item:not(.page-gallery__item--video):hover::after{ opacity:1; transform:scale(1); }

.bp-gallery-zoom .bp-lightbox-loading{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); }
.bp-gallery-zoom[data-loading="true"] .bp-lightbox-loading{ display:flex; }

/* provisional curation note under each grid */
.bp-gallery-grid__note{ margin-top:18px; font-size:12px; letter-spacing:0.02em; color:var(--bp-svc-mute); }
.bp-gallery-grid__note em{ font-family:var(--FONT-STACK-HIGHLIGHT); font-style:italic; color:var(--bp-svc-ink); }

/* FAQ accordion (rotating "+") */
.bp-gallery-faq{ max-width:1080px; margin:0 auto; }
.bp-gallery-faq__item{ border-top:1px solid var(--bp-svc-hair); padding:24px 0; cursor:pointer; }
.bp-gallery-faq__item:last-child{ border-bottom:1px solid var(--bp-svc-hair); }
.bp-gallery-faq__q-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:32px; }
.bp-gallery-faq__q{ font-family:Poppins,sans-serif; font-weight:500; font-size:17px; line-height:1.4; color:var(--bp-svc-ink); margin:0; transition:color 120ms ease; }
.bp-gallery-faq__item:hover .bp-gallery-faq__q{ color:var(--bp-svc-mute); }
.bp-gallery-faq__icon{ flex-shrink:0; width:20px; height:20px; color:var(--bp-svc-mute); transition:transform 200ms ease; }
.bp-gallery-faq__item--open .bp-gallery-faq__icon{ transform:rotate(45deg); }
.bp-gallery-faq__a{ display:none; padding-top:14px; font-size:1rem; line-height:1.75; color:var(--bp-svc-ink-2); max-width:880px; }
.bp-gallery-faq__a a{ color:var(--bp-svc-ink); text-decoration:underline; text-underline-offset:3px; }
.bp-gallery-faq__item--open .bp-gallery-faq__a{ display:block; }
/* ============================================================================
   END HEADSHOT GALLERY
   ============================================================================ */


/* ============================================================================
   CORPORATE EVENT PHOTOGRAPHY PAGE   (page handle: corporate-event-photography-toronto)
   ----------------------------------------------------------------------------
   Layer-2 service spoke. .bp-event sits parallel to .bp-onloc / .bp-team /
   .bp-execp. Reuses the shared service shell (.bp-services-hero,
   .bp-services-sect, .bp-services-thesis, .bp-jump-nav, .btn,
   .bp-about-finalcta) already defined above; only the NEW .bp-event-*
   component vocabulary is declared here.
   Notes vs the Claude Design mockup:
     - Primary CTA renders as btn--solid btn--black (shipped button system);
       the mockup's red btn--accent is dropped (a red button background would be
       a NEW design-red surface, not one of the 5 approved §6 exceptions).
     - --bp-ev-pink (#ff9da6) is dropped sitewide; it is on the §6 banned
       list; replaced with neutral light grey on the dark priceband panel.
     - Final CTA uses the shared dark .bp-about-finalcta (no red radial glow
       override, no eyebrow).
     - #d43747 accent on kickers/numerals/dots/map follows the established
       --bp-svc-red service-page token (authorized by the page-12 handoff
       Visual-consistency note + design-token-keeper). Flagged for operator.
   ============================================================================ */
.bp-event{
  --bp-svc-ink:var(--ink); --bp-svc-ink-2:var(--ink-2); --bp-svc-mute:var(--mute);
  --bp-svc-hair:var(--hair); --bp-svc-paper:var(--white); --bp-svc-neutral:var(--paper);
  --bp-svc-red:#d43747; --bp-svc-red-soft:rgba(212,55,71,0.08);
  --bp-svc-r-md:20px; --bp-svc-r-lg:28px; --bp-svc-r-pill:999px;
  --bp-ev-stage:#101012;
}
.bp-event em{
  font-family: var(--FONT-STACK-HIGHLIGHT, "Playfair Display", Georgia, serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}
/* Thesis: override Palo Alto's default <blockquote> italic so base text is
   regular Poppins; only the <em> accent renders Playfair italic (matches
   on-location / linkedin). */
.bp-event.bp-services-thesis blockquote{ font-style:normal; }
.bp-event.bp-services-thesis blockquote em{ color:var(--bp-svc-ink); }

/* --- Hero shell helpers (breadcrumb + micro separator, scoped) --- */
.bp-event .bp-services-hero__crumb{ font-size:12px; color:var(--bp-svc-mute); margin-bottom:24px; letter-spacing:0.02em; }
.bp-event .bp-services-hero__crumb a{ color:var(--bp-svc-mute); text-decoration:none; }
.bp-event .bp-services-hero__crumb a:hover{ color:var(--bp-svc-ink); }
.bp-event .bp-services-hero__crumb .sep{ margin:0 8px; color:#bbb; }
.bp-event .bp-services-hero__crumb .here{ color:var(--bp-svc-ink); font-weight:500; }
.bp-event .bp-services-hero__micro span + span::before{ content:"\00B7"; margin:0 12px; color:#bbb; }

/* --- Section kicker (red uppercase + Playfair numeral), scoped --- */
.bp-event .bp-services-sect__kicker{ font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--bp-svc-red); font-weight:600; margin-bottom:18px; display:flex; align-items:center; gap:12px; }
.bp-event .bp-services-sect__kicker .num{ font-family:var(--FONT-STACK-HIGHLIGHT); font-style:italic; font-weight:400; font-size:18px; color:var(--bp-svc-red); letter-spacing:0; }
@keyframes bp-ev-pulse{ 0%{ box-shadow:0 0 0 0 rgba(212,55,71,0.45);} 70%{ box-shadow:0 0 0 7px rgba(212,55,71,0);} 100%{ box-shadow:0 0 0 0 rgba(212,55,71,0);} }
.bp-services-sect--alt .bp-event-img{ background:var(--bp-svc-neutral); }

/* --- Numbered overview band --- */
.bp-event-overview{ background:#fff; padding:64px 60px; border-bottom:1px solid var(--bp-svc-hair); }
.bp-event-overview__inner{ max-width:1280px; margin:0 auto; }
.bp-event-overview__head{ display:flex; align-items:baseline; gap:18px; margin-bottom:34px; flex-wrap:wrap; }
.bp-event-overview__kicker{ font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--bp-svc-red); font-weight:600; }
.bp-event-overview__lead{ font-size:1rem; color:var(--bp-svc-mute); }
.bp-event-overview__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:ov; }
.bp-event-overview__item{ padding-top:18px; border-top:2px solid var(--bp-svc-ink); counter-increment:ov; display:flex; flex-direction:column; gap:12px; }
.bp-event-overview__item::before{ content: counter(ov, decimal-leading-zero); font-family: var(--FONT-STACK-HIGHLIGHT); font-style:italic; font-weight:400; font-size:30px; color:var(--bp-svc-red); line-height:1; }
.bp-event-overview__item p{ margin:0; font-size:1rem; line-height:1.5; color:var(--bp-svc-ink); font-weight:500; letter-spacing:-0.005em; }

/* --- Responsive (scoped to .bp-event; shared shell collapses via global rules) --- */



.bp-booth em{ font-family:"Playfair Display", Georgia, serif !important; font-style:italic !important; font-weight:400 !important; }
@keyframes bk-pulse{ 0%{ box-shadow:0 0 0 0 rgba(217,51,63,0.45);} 70%{ box-shadow:0 0 0 7px rgba(217,51,63,0);} 100%{ box-shadow:0 0 0 0 rgba(217,51,63,0);} }


/* ============================================================================
   CORPORATE HEADSHOT PRICING — design pass (operator 2026-06-03)
   Batch 1: rate sheet + individual section. Text unchanged.
   ============================================================================ */

/* Rate-sheet line numbers 01/02/03 -> black (the $226.98 price stays red). */
.bp-pricing-ledger__n{ color:var(--bp-pr-ink) !important; }

/* ============================================================================
   CORPORATE PHOTOGRAPHY SERVICES — design pass (operator 2026-06-03)
   ============================================================================ */

/* "What video services..." section -> dark background with the white service
   cards standing out (design .sv-sect--dark). Scoped to #video-services so the
   shared .bp-services-sect--alt neutral elsewhere is untouched. Cards stay
   white via the existing .bp-services-sect--alt .bp-services-svc-card rule. */
#video-services{ background:var(--bp-svc-ink) !important; }
#video-services .bp-services-sect__h{ color:#fff !important; }
#video-services .bp-services-sect__h em{ color:#ffffff !important; }
#video-services .bp-services-sect__intro{ color:rgba(255,255,255,0.74) !important; }
#video-services .bp-services-sect__intro strong{ color:#fff !important; }

/* Video thumbnail labels (design .bp-frame__meta): category + type, plus a
   source badge, dropped over the bottom of each video thumbnail. */
.bp-services-svc-card__media{ position:relative; }
.bp-services-svc-card__tag{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:flex-end; justify-content:space-between; gap:10px;
  padding:14px 14px 12px;
  background:linear-gradient(to top, rgba(0,0,0,0.62), rgba(0,0,0,0));
  pointer-events:none;
}
.bp-services-svc-card__tag .lab{ font-family:Poppins,sans-serif; font-size:11px; color:rgba(255,255,255,0.82); line-height:1.3; }
.bp-services-svc-card__tag .lab b{ display:block; font-weight:600; font-size:13px; color:#fff; }
.bp-services-svc-card__tag .badge{ font-family:Poppins,sans-serif; font-size:9px; letter-spacing:0.12em; text-transform:uppercase; font-weight:700; color:#fff; border:1px solid rgba(255,255,255,0.5); border-radius:999px; padding:4px 9px; white-space:nowrap; }

/* Session-mode images carry a bottom-left caption (mode + lighting), design
   .bp-frame__meta style. */
.bp-services-modes__media{ position:relative; }
.bp-services-modes__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:14px 16px 13px;
  background:linear-gradient(to top, rgba(0,0,0,0.60), rgba(0,0,0,0));
  font-family:Poppins,sans-serif; font-size:11.5px; color:rgba(255,255,255,0.82); line-height:1.3;
  pointer-events:none;
}
.bp-services-modes__cap b{ display:block; font-weight:600; font-size:14px; color:#fff; }

/* Hero collage (design .sv-hero__collage): a 2x2 set of 1:1 frames with a
   staggered "misalignment". Frames are black placeholders until the operator
   supplies the 4 images; each carries a bottom-left category label. */
.bp-services-hero__collage{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.bp-services-hero__frame{
  position:relative; aspect-ratio:1 / 1;
  border-radius:var(--bp-svc-r-md); overflow:hidden;
  background:#fff; border:1px solid #e6e6e6;
  text-decoration:none; color:inherit; display:block;
}
/* Hero collage frames are now links to the matching service card below */
.bp-services-svc-card[id]{ scroll-margin-top:90px; }
.bp-services-hero__frame:nth-child(2){ margin-top:28px; }
.bp-services-hero__frame:nth-child(3){ margin-top:-28px; }
.bp-services-hero__frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.bp-services-hero__frame-meta{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:12px 14px;
  background:linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
  font-family:Poppins,sans-serif; font-size:11px; color:rgba(255,255,255,0.82); line-height:1.3;
}
.bp-services-hero__frame-meta b{ display:block; font-weight:600; font-size:13px; color:#fff; }


/* ============================================================================
   FAQ PAGE — design pass (operator 2026-06-03)
   The "A buyer question / answered plainly" console: keep a single red accent
   on the first facet circle (the rest stay dark), and render the "answered"
   labels as dark grey (they were near-black). "Q" already matches the live
   style (Poppins, not alt-font), so it is unchanged.
   ============================================================================ */
.bp-faqop-facets .bp-faqop-facet:first-child .bp-faqop-facet__chk{ background:var(--bp-svc-red) !important; }
.bp-faqop-facet__state{ color:#5f5f5f !important; }


/* Clients roster -> design .hm-roster: 2px ink top rule + tighter rows
   (200px / 220px / 1fr, 17px padding). Already no-red. */
.bp-roster{ border-top:2px solid #0a0a0a !important; }
.bp-roster__row{
  grid-template-columns:200px 220px 1fr !important; gap:24px !important; padding:17px 0 !important;
}
.bp-roster__row:first-child{ border-top:none !important; }
/* operator 2026-06: the !important 3-col rule above outranked the base 900px
   stack, so the roster stayed in 3 cramped columns on phones. Re-stack here. */


/* Pricing rate-sheet line numbers 01/02/03 -> pure black ($226.98 stays red). */
.bp-pricing-ledger__n{ color:#000 !important; }


/* On-location "Setup -> session -> teardown" timeline: give it the design's
   soft-grey header bar with a divider (design .ol-timeline__head) — it was a
   plain inline label. Card was already white; consistent with the team timeline. */
.bp-onloc-timeline{ padding:0 !important; overflow:hidden !important; }
.bp-onloc-timeline__lab{
  background:#fafafa !important; padding:14px 22px !important;
  border-bottom:1px solid var(--bp-svc-hair) !important; margin-bottom:0 !important;
}
.bp-onloc-timeline__track{ padding:26px 26px 28px !important; }
.bp-execp-compare__card--exec .bp-services-svc-card__h-row{
  background:var(--bp-svc-ink) !important;
  padding:16px 24px !important; margin:0 !important;
  align-items:center !important;
}
.bp-execp-compare__card--exec .bp-services-svc-card__h-row h3{ color:#fff !important; }
.bp-execp-compare__card--exec .bp-services-svc-card__h-row h3 em{ color:#fff !important; }
.bp-execp-compare__card--exec .bp-services-svc-card__sub{ color:var(--bp-svc-ink-2) !important; padding-top:16px !important; }
.bp-execp-compare__card--exec .bp-services-svc-card__bullets li{ color:var(--bp-svc-ink-2) !important; }
.bp-execp-compare__card--exec .bp-services-svc-card__bullets li .k{ color:var(--bp-svc-mute) !important; }
.bp-execp-compare__card--exec .bp-services-svc-card__bullets strong{ color:var(--bp-svc-ink) !important; }

/* S-c: thin grey line across the card under the video title. */
.bp-services-svc-grid--video .bp-services-svc-card__h-row{ border-bottom:1px solid var(--bp-svc-hair) !important; padding-bottom:14px !important; margin-bottom:16px !important; }

/* S-e: mode-card images full-bleed (no white space top/sides) — escape the
   panel's 24px padding; panel clips to rounded corners. Labels already sit
   above values (1-col rows); panels already use subgrid so rows align. */

.bp-services-modes__media{ margin:-24px -24px 18px -24px !important; border-radius:0 !important; }

/* S-d: "How is a team headshot day run?" -> design .sv-run: white card with a
   full-width 9-image strip on top + the 4 steps in a row below (was a 2-col
   split). No red (time badges already neutral). */
.bp-services-team{ display:block !important; border:1px solid var(--bp-svc-hair) !important; border-radius:var(--bp-svc-r-lg) !important; overflow:hidden !important; background:#fff !important; }
.bp-services-team__media-card{ padding:0 !important; border:none !important; border-radius:0 !important; background:none !important; margin:0 !important; }
.bp-services-team__grid{ grid-template-columns:repeat(9,1fr) !important; gap:2px !important; margin:0 !important; }
.bp-services-team__steps{ display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:0 !important; border-top:1px solid var(--bp-svc-hair) !important; margin:0 !important; }
.bp-services-team__step{ display:block !important; padding:24px 22px !important; border-right:1px solid var(--bp-svc-hair) !important; border-top:none !important; }
.bp-services-team__step:last-child{ border-right:none !important; }
.bp-services-team__time{ margin-bottom:10px !important; }


/* Exec comparison (E-a/E-c): image flush above the dark head; white-body
   padding; no hover; less gap below the last bullet ("Brief"). */
.bp-execp-compare__card--exec .bp-services-svc-card__media{ margin-bottom:0 !important; }
.bp-execp-compare__card--exec .bp-services-svc-card__sub,
.bp-execp-compare__card--exec .bp-services-svc-card__bullets{ padding-left:24px !important; padding-right:24px !important; }
.bp-execp-compare .bp-services-svc-card:hover{ box-shadow:none !important; }
.bp-execp-compare .bp-services-svc-card:not(.bp-execp-compare__card--exec):hover{ border-color:var(--bp-svc-hair) !important; }
.bp-execp-compare .bp-services-svc-card{ padding-bottom:14px !important; }
.bp-execp-compare .bp-services-svc-card__bullets{ margin-bottom:0 !important; }

/* E-e: "Match to the existing leadership set" process -> design .ex-proc:
   4-col row, 2px ink top rule, tags dark grey (no red). */
.bp-execp .bp-services-team__steps{ display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:0 !important; border-top:2px solid var(--bp-svc-ink) !important; }
.bp-execp .bp-services-team__step{ display:block !important; border-right:1px solid var(--bp-svc-hair) !important; border-bottom:none !important; padding:24px 22px 22px 0 !important; }
.bp-execp .bp-services-team__step:last-child{ border-right:none !important; padding-right:0 !important; }
.bp-execp .bp-services-team__step:not(:first-child){ padding-left:22px !important; }
.bp-execp .bp-services-team__time{ background:none !important; border:none !important; padding:0 !important; color:var(--bp-svc-mute) !important; text-transform:uppercase !important; letter-spacing:0.12em !important; margin-bottom:10px !important; }


/* FAQ: Q badge explicitly regular (Poppins), no alt font (operator). */
.bp-faqop-ask__q{ font-family:'Poppins', sans-serif !important; font-style:normal !important; }
/* Home roster (operator): flip colors — category black, count grey — and shrink
   the count to match the design. */
.bp-roster__vert{ color:#000 !important; }
.bp-roster__claim{ color:#666 !important; font-size:15px !important; }
.bp-roster__claim em{ color:#666 !important; }

/* Home "serve corporate buyers" cards (operator): match the design path cards.
   The bp-card shell (white card, black pills, footer) is already design-correct;
   this removes the theme's red link colour, keeps titles/labels ink, and cleans
   the spec list (no bullets, hairline rows like the design). Images set to 1:1
   via the block aspect-ratio setting. Scoped to this section only. */
#shopify-section-section_columns_g6Qi8J .column-item__heading{ color:#111 !important; }
#shopify-section-section_columns_g6Qi8J .column-item__text a{ color:#111 !important; text-decoration:underline !important; }
#shopify-section-section_columns_g6Qi8J .column-item__text a:hover{ color:#000 !important; }
#shopify-section-section_columns_g6Qi8J .column-item__text strong{ color:#111 !important; font-weight:600 !important; }
#shopify-section-section_columns_g6Qi8J .column-item__text ul{ list-style:none !important; margin:0 0 4px !important; padding:0 !important; }
#shopify-section-section_columns_g6Qi8J .column-item__text li{ font-size:1rem !important; line-height:1.45 !important; color:#444 !important; padding:8px 0 !important; border-bottom:1px solid #ececec !important; }
#shopify-section-section_columns_g6Qi8J .column-item__text li:last-child{ border-bottom:none !important; }
.bp-li-tips__body > .bp-services-sect__h{ margin-top:0; margin-bottom:16px; }

/* On-location hero spec card (operator: "use the design's file, put the image
   in the black space, increase image height to 1:1"). Ported from the design
   .ol-speccard; the formerly-black media frame now holds the 1:1 hero image
   with the tag, time chips, and deliverable caption overlaid. */
.bp-onloc .ol-speccard{ border:1px solid var(--bp-svc-hair); border-radius:var(--bp-svc-r-lg,22px); overflow:hidden; background:#fff; box-shadow:0 30px 60px -36px rgba(0,0,0,0.3); }
.bp-onloc .ol-speccard__media{ position:relative; }
.bp-onloc .ol-speccard__shot{ position:relative; aspect-ratio:1 / 1; background:transparent; overflow:hidden; }
.bp-onloc .ol-speccard__shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.bp-onloc .ol-speccard__tag{ position:absolute; left:16px; top:14px; z-index:3; font-family:Poppins,sans-serif; font-size:9px; letter-spacing:0.16em; text-transform:uppercase; font-weight:600; color:#fff; }
.bp-onloc .ol-speccard__time{ position:absolute; right:14px; top:14px; z-index:3; display:flex; gap:8px; }
.bp-onloc .ol-timechip{ background:rgba(255,255,255,0.96); border-radius:12px; padding:8px 12px; text-align:center; box-shadow:0 16px 36px -18px rgba(0,0,0,0.5); }
.bp-onloc .ol-timechip .n{ font-family:var(--FONT-STACK-HIGHLIGHT,"Playfair Display",serif); font-style:italic; font-size:19px; color:var(--bp-svc-red); line-height:1; }
.bp-onloc .ol-timechip .u{ font-family:Poppins,sans-serif; font-size:8px; letter-spacing:0.1em; text-transform:uppercase; color:var(--bp-svc-mute); font-weight:600; margin-top:3px; }
.bp-onloc .ol-speccard__meta{ position:absolute; left:0; right:0; bottom:0; z-index:3; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding:16px; background:linear-gradient(to top, rgba(0,0,0,0.74), rgba(0,0,0,0)); }
.bp-onloc .ol-speccard__meta .lab{ font-family:Poppins,sans-serif; font-size:12px; line-height:1.3; color:#fff; }
.bp-onloc .ol-speccard__meta .lab b{ display:block; font-size:9px; letter-spacing:0.14em; text-transform:uppercase; font-weight:600; color:rgba(255,255,255,0.72); margin-bottom:3px; }
.bp-onloc .ol-speccard__meta .badge{ flex-shrink:0; font-family:Poppins,sans-serif; font-size:9px; letter-spacing:0.12em; text-transform:uppercase; font-weight:600; color:#fff; border:1px solid rgba(255,255,255,0.5); border-radius:999px; padding:4px 10px; }
.bp-onloc .ol-speccard__rows{ padding:6px 0; }
.bp-onloc .ol-specrow{ display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center; padding:13px 22px; border-top:1px solid var(--bp-svc-hair); }
.bp-onloc .ol-specrow:first-child{ border-top:none; }
.bp-onloc .ol-specrow__k{ font-family:Poppins,sans-serif; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--bp-svc-mute); font-weight:600; }
.bp-onloc .ol-specrow__v{ font-family:Poppins,sans-serif; font-size:13.5px; font-weight:600; color:var(--bp-svc-ink); }
.bp-onloc .ol-specrow__v em{ font-family:var(--FONT-STACK-HIGHLIGHT,"Playfair Display",serif); font-style:italic; color:var(--bp-svc-red); font-weight:400; }

/* === Operator batch (multi-page) === */

/* P7: body-font consistency — every custom-section paragraph uses the home/theme
   body font (Poppins). Standalone .direct-answer paragraphs were falling back to
   the theme default paragraph metrics. */
.bp-services p, .bp-pricing p, .bp-execp p, .bp-team p, .bp-onloc p,
.bp-event p, .bp-gallery p, .bp-li p, .bp-about p, .bp-faqop p,
.bp-pricing .direct-answer, .bp-services .direct-answer, .bp-team .direct-answer,
.bp-onloc .direct-answer, .bp-execp .direct-answer{ font-family:'Poppins', sans-serif; }

/* P9: mechanic card — fafafa heading bar edge-to-edge (drop the card's side
   padding), no grey line left of the first step, and the middle dividers run
   full height below the fafafa bar (stretch + zero gap). Desktop only. */


/* === Home refinements (operator) === */
/* H1: serve-buyers cards — less space above the title, less below the list,
   list text 1px smaller. */
#shopify-section-section_columns_g6Qi8J .column-item--bp-card .column-item__content{ padding:18px 24px 20px !important; }
#shopify-section-section_columns_g6Qi8J .column-item__heading{ margin-top:0 !important; margin-bottom:6px !important; }
#shopify-section-section_columns_g6Qi8J .column-item__text li{ font-size:1rem !important; padding:7px 0 !important; }
#shopify-section-section_columns_g6Qi8J .column-item--bp-card .column-item__divider{ padding-top:14px !important; }
/* H3: roster — black line + chart fill the wrapper to match the paragraph above. */
.bp-roster{ max-width:none !important; }

/* === On-location refinements (operator) === */
/* O1: hero text starts at the top (was vertically centered against the tall card). */
.bp-onloc .bp-services-hero__grid{ align-items:start !important; }
/* O2: hero footprint "8.5 x 5 ft" black + regular (was red serif-italic). */
.bp-onloc .ol-specrow__v em{ color:#0b0b0b !important; font-family:'Poppins',sans-serif !important; font-style:normal !important; }
/* O3: Setup/Session/Teardown as the design .ol-timeline (heading + dots track,
   no node cards/pills). Ported, scoped to .bp-onloc. */
.bp-onloc .ol-timeline{ border:1px solid var(--bp-svc-hair); border-radius:var(--bp-svc-r-md,18px); overflow:hidden; background:#fff; margin-top:34px; }
.bp-onloc .ol-timeline__head{ padding:15px 22px; background:#fafafa; border-bottom:1px solid var(--bp-svc-hair); font-family:Poppins,sans-serif; font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--bp-svc-mute); font-weight:600; }
.bp-onloc .ol-timeline__track{ position:relative; display:grid; grid-template-columns:1fr 1.4fr 1fr; }
.bp-onloc .ol-timeline__track::before{ content:""; position:absolute; left:14%; right:14%; top:52px; height:2px; background:var(--bp-svc-hair); }
.bp-onloc .ol-tstop{ position:relative; z-index:1; padding:26px 22px; border-right:1px solid var(--bp-svc-hair); text-align:center; }
.bp-onloc .ol-tstop:last-child{ border-right:none; }
.bp-onloc .ol-tstop__dot{ width:14px; height:14px; border-radius:50%; background:#fff; border:2px solid var(--bp-svc-ink); margin:0 auto 16px; }
.bp-onloc .ol-tstop--mid .ol-tstop__dot{ background:var(--bp-svc-red); border-color:var(--bp-svc-red); }
.bp-onloc .ol-tstop__big{ font-family:var(--FONT-STACK-HIGHLIGHT,"Playfair Display",serif); font-style:italic; font-size:24px; color:var(--bp-svc-ink); line-height:1; margin-bottom:6px; }
.bp-onloc .ol-tstop--mid .ol-tstop__big{ color:var(--bp-svc-red); }
.bp-onloc .ol-tstop__t{ font-family:Poppins,sans-serif; font-weight:600; font-size:13.5px; color:var(--bp-svc-ink); margin:0; }


/* === Services refinements (operator) === */
/* S1: video cards get a 1px black outline (was hairline grey). */
.bp-services-svc-grid--video .bp-services-svc-card{ border:1px solid #000 !important; }
.bp-services-svc-grid--video .bp-services-svc-card:hover{ border-color:#000 !important; }
/* S2: "How is a team headshot day run?" — "30 min" as the design serif-italic
   number (no pill, no red); image row gets an fafafa background + top/bottom pad. */
.bp-services-team__time{ background:none !important; border:none !important; padding:0 !important; border-radius:0 !important; font-family:var(--FONT-STACK-HIGHLIGHT,"Playfair Display",serif) !important; font-style:italic !important; font-weight:400 !important; font-size:26px !important; letter-spacing:0 !important; text-transform:none !important; color:var(--bp-svc-ink) !important; }
.bp-services-team__grid{ background:var(--bp-svc-neutral) !important; padding:18px 0 !important; }
/* S3: "Where does BusinessPortraits.ca photograph?" mode cards — label on the
   left (desktop) / on top (mobile), and tighten the title-to-text gap. */
.bp-services-modes__head{ padding-bottom:4px !important; }
.bp-services-modes__row{ grid-template-columns:96px 1fr !important; gap:12px !important; align-items:start !important; }
.bp-services-modes__row .k{ padding-top:2px; }


/* === Exec refinements (operator) === */
/* E1: "What is an executive portrait?" compare cards — right card's sub copy
   sits inside the dark head box; both card titles align (same head padding). */
.bp-execp-compare .bp-services-svc-card:not(.bp-execp-compare__card--exec) .bp-services-svc-card__h-row{ padding:16px 24px 8px !important; align-items:center !important; }
.bp-execp-compare__card--exec .bp-services-svc-card__h-row{ padding:16px 24px 8px !important; }
.bp-execp-compare__card--exec .bp-services-svc-card__sub{ background:var(--bp-svc-ink) !important; color:rgba(255,255,255,0.82) !important; margin:0 !important; padding:0 24px 16px !important; }

/* === FAQ hero console — replaced with the design .fq-console card (operator) ===
   Notes baked in: only the first bar circle is red; "Answered" is dark grey
   (design had red); the Q glyph is regular Poppins (design had serif italic). */
.fq-console{ border:1px solid #e8e8e8; border-radius:18px; overflow:hidden; background:#fff; box-shadow:0 30px 60px -38px rgba(0,0,0,0.3); }
.fq-console__bar{ display:flex; align-items:center; gap:8px; padding:14px 20px; background:#fafafa; border-bottom:1px solid #e8e8e8; }
.fq-console__bar .dot{ width:9px; height:9px; border-radius:50%; background:#d8d8d4; }
.fq-console__bar .dot:first-child{ background:#d43747; }
.fq-console__bar .lab{ margin-left:8px; font-family:'Poppins',sans-serif; font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:#666; }
.fq-console__body{ padding:22px; }
.fq-console__q{ display:flex; gap:12px; align-items:flex-start; margin-bottom:18px; }
.fq-console__q .qm{ width:26px; height:26px; border-radius:7px; background:#0a0a0a; color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Poppins',sans-serif; font-style:normal; font-weight:600; font-size:14px; flex-shrink:0; }
.fq-console__q .qt b{ display:block; font-family:'Poppins',sans-serif; font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:#666; font-weight:600; margin-bottom:4px; }
.fq-console__q .qt span{ font-family:'Poppins',sans-serif; font-weight:600; font-size:14.5px; color:#0a0a0a; line-height:1.4; }
.fq-console__row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px solid #e8e8e8; text-decoration:none; }
.fq-console__row:hover .rk b{ color:#d43747; }
.fq-console__row .rk b{ display:block; font-family:'Poppins',sans-serif; font-size:12.5px; font-weight:600; color:#0a0a0a; transition:color 160ms ease; }
.fq-console__row .rk span{ font-size:11px; color:#666; }
.fq-console__row .rv{ font-family:'Poppins',sans-serif; font-size:9px; letter-spacing:0.1em; text-transform:uppercase; font-weight:600; color:#5f5f5f; }
.fq-console__for{ display:flex; align-items:center; gap:8px; padding:14px 22px; background:#0a0a0a; color:#fff; }
.fq-console__for .l{ font-family:'Poppins',sans-serif; font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.55); font-weight:600; }
.fq-console__for .c{ font-family:'Poppins',sans-serif; font-size:11px; font-weight:600; color:#fff; border:1px solid rgba(255,255,255,0.2); border-radius:999px; padding:4px 10px; }
/* ON-LOC: hero "8.5 x 5 ft" black + bold (match the font beside it). */
.bp-onloc .ol-specrow__v em{ color:#0b0b0b !important; font-family:'Poppins',sans-serif !important; font-style:normal !important; font-weight:600 !important; }
/* ON-LOC: hero left text sticky on desktop (scrolls with the photo). */

/* SERVICES S2: team-day image row padding per operator. */
.bp-services-team__grid{ padding:10px 10px !important; }
/* HOME serve cards: tighter top/bottom, no list bullets. */
#shopify-section-section_columns_g6Qi8J .column-item--bp-card .column-item__content{ padding:14px 24px 14px !important; }
#shopify-section-section_columns_g6Qi8J .column-item--bp-card .column-item__divider{ padding-top:10px !important; }
#shopify-section-section_columns_g6Qi8J .column-item__text ul,
#shopify-section-section_columns_g6Qi8J .column-item__text li{ list-style:none !important; }
#shopify-section-section_columns_g6Qi8J .column-item__text ul{ padding-left:0 !important; margin-left:0 !important; }
/* HOME subscription: reduce space above/below the three cards. */
#shopify-section-bphome_subscription{ margin-top:-12px !important; margin-bottom:-12px !important; }
/* HOME roster: a bit narrower (was filling the wrapper). */
.bp-roster{ max-width:1040px !important; }

/* E1 follow-up: exec card bullets get top spacing off the dark box; the standard
   card's sub gets matching padding so the two cards' bullet lists line up. */
.bp-execp-compare__card--exec .bp-services-svc-card__bullets{ padding-top:18px !important; }
.bp-execp-compare .bp-services-svc-card:not(.bp-execp-compare__card--exec) .bp-services-svc-card__sub{ padding:0 24px 16px !important; margin:0 !important; }
.bp-execp-compare .bp-services-svc-card:not(.bp-execp-compare__card--exec) .bp-services-svc-card__bullets{ padding-top:18px !important; }
/* S3: tighten the mode-card row spacing (was 14px). */
.bp-services-modes__row{ padding:9px 0 !important; }
/* H2: drop the old negative-margin hack (subscription now uses 5px section padding). */
#shopify-section-bphome_subscription{ margin-top:0 !important; margin-bottom:0 !important; }
/* H3: narrow the "Who has photographed" + "featured in" text blocks to the
   roster width (~1040), centered, so they're not wider than the chart between. */
#shopify-section-section_text_nnbQEb [class*="text__"], #shopify-section-section_text_nnbQEb .rte,
#shopify-section-section_text_rWMNVV [class*="text__"], #shopify-section-section_text_rWMNVV .rte{ max-width:1040px; margin-left:auto !important; margin-right:auto !important; }
/* H1: serve cards — kill the title's top margin and tighten the content top. */
#shopify-section-section_columns_g6Qi8J .column-item__heading{ margin-top:0 !important; }
#shopify-section-section_columns_g6Qi8J .column-item--bp-card .column-item__content{ padding-top:12px !important; }

/* === Operator batch 5 — CORRECT selectors (JSON-template wrapper is
   #shopify-section-template--26600966783019__<id>, so earlier
   #shopify-section-<id> rules never matched). === */

/* HOME serve cards — target the bp-card mode directly (home only). */
.template-index .column-item--bp-card .column-item__image-wrapper{ margin-bottom:0 !important; }
.template-index .column-item--bp-card .column-item__content{ padding:14px 24px 14px !important; }
.template-index .column-item--bp-card .column-item__heading{ margin-top:0 !important; margin-bottom:6px !important; color:#111 !important; }
.template-index .column-item--bp-card .column-item__text ul{ list-style:none !important; margin:0 !important; padding:0 !important; }
.template-index .column-item--bp-card .column-item__text li{ list-style:none !important; font-size:1rem !important; line-height:1.45 !important; color:#444 !important; padding:6px 0 !important; border-bottom:1px solid #ececec !important; }
.template-index .column-item--bp-card .column-item__text li::marker{ content:"" !important; font-size:0 !important; }
.template-index .column-item--bp-card .column-item__text li:last-child{ border-bottom:none !important; }
.template-index .column-item--bp-card .column-item__text a{ color:#111 !important; text-decoration:underline !important; }
.template-index .column-item--bp-card .column-item__text strong{ color:#111 !important; }
.template-index .column-item--bp-card .column-item__divider{ padding-top:12px !important; }

/* HOME roster intro/awards text -> narrow to ~1040 (the chart width), centered.
   ID-agnostic selectors: the numeric template-- prefix changes whenever the
   section is re-saved, so match the stable __handle suffix instead. */
[id*="__section_text_nnbQEb"] [class*="text__"],
[id*="__section_text_nnbQEb"] .rte,
[id*="__section_text_rWMNVV"] [class*="text__"],
[id*="__section_text_rWMNVV"] .rte{ max-width:1040px !important; margin-left:auto !important; margin-right:auto !important; }

/* SERVICES modes — drop the subgrid (it was clipping "PRICING MODEL") and tighten. */
.bp-services-modes{ grid-template-rows:none !important; align-items:start !important; }

.bp-services-modes__media{ margin-bottom:12px !important; }
.bp-services-modes__sub{ padding-bottom:10px !important; }

/* === Operator batch 5b === */
/* Exec process: undo the leak from the Services "30 min" rule (.bp-services-team__time
   is global) — restore the small uppercase "Pre-session" label on exec. */
.bp-execp .bp-services-team__time{ font-family:'Poppins',sans-serif !important; font-style:normal !important; font-size:11px !important; }
/* HOME serve cards: one grey line below the "Best for" subheading on all 3. */
.template-index .column-item--bp-card .column-item__subheading{ border-bottom:1px solid #ececec !important; padding-bottom:12px !important; margin-bottom:12px !important; }
.bp-execp-compare .bp-services-svc-card__media{ aspect-ratio:1 / 1 !important; margin:0 !important; }
.bp-execp-compare .bp-services-svc-card__h-row{ padding-top:16px !important; margin-top:0 !important; }
/* Services modes: subgrid back on (equal height + aligned rows) but with NO panel
   padding (that was clipping "PRICING MODEL"); pad the inner elements instead. */
.bp-services-modes{ grid-template-rows: auto auto auto repeat(6, auto) !important; align-items:stretch !important; }

.bp-services-modes__media{ margin:0 !important; border-radius:0 !important; }
.bp-services-modes__head{ padding:18px 22px 4px !important; }
.bp-services-modes__sub{ padding:0 22px 8px !important; }
.bp-services-modes__row{ padding-left:22px !important; padding-right:22px !important; }
.bp-services-modes__row:last-child{ padding-bottom:22px !important; }

/* === Operator batch 7 === */
/* Exec compare: make both cards' h-row + sub paddings identical so the sub copy
   ("Short single-look..." vs "Standalone, multi-look...") lines up. */
.bp-execp-compare .bp-services-svc-card__h-row{ padding:16px 24px 8px !important; }
.bp-execp-compare .bp-services-svc-card__sub{ padding:0 24px 16px !important; margin:0 !important; }
/* Subscription: force 5px section padding via CSS too (in case a theme-editor
   value or cache is overriding the 5px setting). Home template id. */
[id*="__bphome_subscription"]{ --PT:5px !important; --PB:5px !important; padding-top:5px !important; padding-bottom:5px !important; }

/* === Operator batch 8 === */
/* Subscription: the 56px is an inline <div style="padding:56px 20px"> wrapping
   the tier grid (markup), not the section padding. Override it via CSS (markup
   isn't syncing from git, but CSS is). */
[id*="__bphome_subscription"] div[style*="56px"]{ padding:5px 20px !important; } /* guard: tames the old inline 56px if old markup ever returns; markup itself now ships 5px */
/* HOME serve cards: the grey line under "Best for" should span edge-to-edge
   (negative side margins to reach the card edges, text stays indented). */
.template-index .column-item--bp-card .column-item__subheading{ margin-left:-24px !important; margin-right:-24px !important; padding-left:24px !important; padding-right:24px !important; }

/* === Operator: exec compare h-row equal height (so subs align even if the
   "An executive portrait" title wraps under the Premium-tier pill). === */
.bp-execp-compare .bp-services-svc-card__h-row{ min-height:56px !important; align-items:center !important; }

/* === Exec compare sub alignment — DEFINITIVE (id selector beats the conflicting
   class rules). Force both cards' title bars + subs to identical boxes so
   "Short single-look..." lines up with "Standalone, multi-look...". === */
[id*="__execp_section1_what"] .bp-services-svc-card__h-row{ min-height:58px !important; align-items:center !important; padding:14px 24px !important; margin:0 !important; }
[id*="__execp_section1_what"] .bp-services-svc-card__sub{ padding:0 24px 16px !important; margin:0 !important; }

/* === FIX: exec compare3 table broke because my global .bp-services-modes
   (services "Where photograph") changes bled into this shared-class section.
   Restore the exec compare3 layout: flex panels, single-column rows (label on
   top), media margin, head padding. Scoped to .bp-execp + !important. === */
.bp-execp .bp-services-modes{ grid-template-rows:none !important; align-items:stretch !important; }

.bp-execp .bp-services-modes__media{ margin-bottom:18px !important; border-radius:calc(var(--bp-svc-r-md) - 8px) !important; }
.bp-execp .bp-services-modes__head{ padding:0 0 8px !important; }
.bp-execp .bp-services-modes__sub{ padding:0 0 14px !important; }
.bp-execp .bp-services-modes__row{ grid-template-columns:1fr !important; gap:4px !important; padding:14px 0 !important; }

/* === Exec compare3 table — subgrid so the 7 data rows line up across the 3
   columns (Executive / Team / LinkedIn). Self-contained, overrides the earlier
   flex restore + the shared global .bp-services-modes rules. 10 tracks:
   media, head, sub, + 7 rows. === */
.bp-execp .bp-services-modes{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; grid-template-rows: auto auto auto repeat(7, auto) !important; column-gap:16px !important; row-gap:0 !important; align-items:stretch !important; }

.bp-execp .bp-services-modes__media{ margin:0 !important; border-radius:0 !important; }
.bp-execp .bp-services-modes__head{ padding:18px 22px 2px !important; }
.bp-execp .bp-services-modes__sub{ padding:0 22px 14px !important; border-bottom:1px solid var(--bp-svc-hair) !important; }
.bp-execp .bp-services-modes__row{ display:grid !important; grid-template-columns:1fr !important; gap:4px !important; padding:12px 22px !important; border-bottom:1px solid var(--bp-svc-hair) !important; }
.bp-execp .bp-services-modes__row:last-child{ border-bottom:none !important; padding-bottom:20px !important; }

/* === MOBILE SWEEP === */
/* The two subgrid tables (Services "Where photograph" modes + Exec compare3)
   were forced to stay multi-column on phones because my desktop !important grid
   rules overrode the theme's 1fr mobile rules. On phones: drop the subgrid and
   stack the panels full-width so nothing overlaps. */
@media (max-width:768px){
  .bp-services-modes,
  .bp-execp .bp-services-modes{ grid-template-columns:1fr !important; grid-template-rows:none !important; column-gap:0 !important; row-gap:16px !important; }

  /* exec compare3 rows: comfortable padding when stacked */
  .bp-execp .bp-services-modes__row{ padding:12px 22px !important; }
}

/* operator 2026-06: hide the alt / broken-image text that flashes while an image
   is still loading. color:transparent keeps the alt attribute in the DOM (screen
   readers + SEO unaffected) and only affects the fallback text — a fully loaded
   image paints over it, so this is safe to apply to every image. Applied globally
   (was a per-component list) because the flash showed on every page's hero image.
   Logos are exempted: if a logo fails to load, its alt ("BusinessPortraits.ca")
   should still be readable. */
img{ color:transparent; }
.logo img, .logo__image, .drawer__logo img, .bp-footer__logo img, .footer-block__logo-image, .footer-block__logo-full-image{ color:inherit; }

/* operator 2026-06: card spec/list text at 15px (1px tighter than the 1rem body).
   Home pricing cards, service mode/spec cards. !important + id-specificity to beat
   the existing column-item rules. */
#shopify-section-section_columns_g6Qi8J .column-item__text li,
.template-index .column-item--bp-card .column-item__text li,
.column-item--bp-card .column-item__subheading,
.bp-services-modes__row .k, .bp-services-modes__row .v, .bp-services-modes__sub,
.bp-services-svc-card__sub, .bp-services-svc-card__bullets li{ font-size:15px !important; }

/* operator 2026-06: .bp-services-hero__grid is a SHARED hero layout (services,
   event, executive, linkedin, on-location, AND gallery). Its mobile collapse got
   relocated into page-services.css, which doesn't load on the gallery page — so the
   gallery hero stayed 2-column and the thumbnail grid was crushed into a tiny right
   column on phones. Restore the collapse sitewide (the base lives in custom.css too,
   so this is not load-order-stranded). Text first, thumbnails stack underneath. */
@media (max-width:768px){
  .bp-services-hero__grid{ grid-template-columns:1fr; gap:32px; }
}

/* operator 2026-06: .bp-services-thesis (big italic statement) and .bp-about-finalcta
   are SHARED components. Their mobile type/padding rules were relocated into
   page-services.css / page-about.css, so pages that REUSE them (linkedin, event) kept
   the desktop sizing on mobile — the LinkedIn thesis stayed 32px with 60px side
   padding, and the event final-CTA heading stayed 44px. Restore sitewide so every
   page that uses these gets a phone-sized version (more specific page rules still win
   where they set their own values). */
@media (max-width:768px){
  .bp-services-thesis{ padding:22px 20px; }
  .bp-services-thesis blockquote{ font-size:17px; }
  .bp-about-finalcta__h{ font-size:30px !important; }
  /* unified CTA now used on every page -> give the band a phone-sized padding sitewide
     (base is 100px 60px; only about reduced it before). */
  .bp-about-finalcta{ padding:64px 20px !important; }
}

/* operator 2026-06: large 60px section side padding had no mobile reduction on pages
   that use the BARE shared classes (gallery reuses .bp-services-hero/.bp-services-sect;
   services reduces them itself but gallery did not). Reduce sitewide on phones. */
@media (max-width:768px){
  .bp-services-hero, .bp-services-sect, .bp-execp.bp-jump-nav{
    padding-left:20px !important; padding-right:20px !important;
  }
}

/* operator 2026-06: home pricing cards (section_columns_g6Qi8J).
   Flip heading/subheading sizes (the "Best for..." descriptor becomes larger than the
   "Individual / Executive" label), and give the subheading a min-height so the spec
   bullet lists start at the same line across all three cards (they were misaligned
   because the descriptors wrap to different line counts). */
#shopify-section-section_columns_g6Qi8J .column-item__heading{ font-size:19px !important; }
#shopify-section-section_columns_g6Qi8J .column-item__subheading,
.template-index .column-item--bp-card .column-item__subheading{ font-size:14px !important; min-height:3em; }

/* operator 2026-06: the home cards live in section_custom_html_tqnCTn (NOT g6Qi8J),
   so the earlier id-scoped heading rule never matched. Use the class selector. */
.template-index .column-item--bp-card .column-item__heading{ font-size:19px !important; }
/* Align the four spec rows across all three cards: each card's lines wrap to
   different counts, so give each row a min-height = its tallest version. This keeps
   Length / Format / Proofs / High-res — and therefore the price footer below —
   on the same lines across the row. (Tuned to current copy.) */
.template-index .column-item--bp-card .column-item__text li:nth-child(1),
.template-index .column-item--bp-card .column-item__text li:nth-child(2){ min-height:3.7em; }
.template-index .column-item--bp-card .column-item__text li:nth-child(3){ min-height:2.2em; }
.template-index .column-item--bp-card .column-item__text li:nth-child(4){ min-height:6.7em; }
/* Pin the price footer to the card bottom (cards stretch to equal height already). */
.template-index .column-item--bp-card .column-item__content{ display:flex !important; flex-direction:column !important; flex:1 1 auto !important; }
.template-index .column-item--bp-card .column-item__footer{ margin-top:auto !important; }


/* operator 2026-06: mode-card row labels (LIGHTING/BACKDROPS/...) were bumped to 15px and looked too big; back to a label size. */
.bp-services-modes__row .k{ font-size:11px !important; }

/* operator 2026-06: services "Which lighting" mode-card spec rows had drifted from the
   live theme (value 15px vs 14px, label 11px vs 10.5px, row vertical padding 9px vs
   14px), so the grey dividers + spacing didn't match. Restore the live spacing. */
.bp-services-modes__row .v{ font-size:14px !important; }
.bp-services-modes__row .k{ font-size:10.5px !important; }
.bp-services-modes__row{ padding-top:14px !important; padding-bottom:14px !important; }