/** Shopify CDN: Minification failed

Line 2061:2 Unexpected "}"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:404 (INDEX:0) */
.not-found {
    max-width: 40rem;
  }
  .not-found__code {
    font-size: 6rem;
    font-weight: 700;
    line-height: 1;
  }
  .not-found__heading {
    margin-top: 1rem;
  }
  .not-found__message {
    margin-top: 1rem;
  }
  .not-found__search {
    margin-top: 2rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .not-found__search input {
    flex: 1 1 12rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-foreground);
    background-color: var(--color-background);
    color: var(--color-foreground);
  }
  .not-found__search button {
    padding: 0.5rem 1.5rem;
    border: 1px solid var(--color-foreground);
    background-color: var(--color-foreground);
    color: var(--color-background);
    border-radius: var(--style-border-radius-inputs);
    cursor: pointer;
  }
/* END_SECTION:404 */

/* START_SECTION:about (INDEX:1) */
.about__sr-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* Head row: tab menu left, contact block right, first lines level. */
  .about__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem 3rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
  }
  .about__contact {
    text-align: right;
  }
  .about__contact-heading {
    margin: 0 0 0.625rem;
  }
  /* Same face as the card taglines/subheaders (Neue Haas). */
  .about__contact-email {
    font-family: var(--font-body--family);
    letter-spacing: var(--font-body--tracking);
    font-size: 1.0625rem;
    color: inherit;
    text-decoration: none;
  }
  .about__contact-email:hover,
  .about__contact-email:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
  }

  /* Toggle row (ref: 2x4): active item at full ink, the rest muted
     until hover. */
  .about__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
  }
  .about__tab {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--font-body--family);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-foreground);
    opacity: 0.6; /* >= 4.5:1 on cream (AA small text) */
    transition: opacity 0.3s ease;
  }
  .about__tab:hover,
  .about__tab:focus-visible,
  .about__tab[aria-selected='true'] {
    opacity: 1;
  }

  .about__panel {
    margin-top: 3.5rem;
  }
  /* Poem: short serif lines at display scale — lines run nearly the
     full content width. */
  .about__poem {
    font-family: var(--font-heading--family);
    letter-spacing: var(--font-heading--tracking);
    font-size: calc(clamp(2.75rem, 6vw, 5.25rem) * var(--about-text-scale, 1));
    line-height: 1.2;
  }
  .about__line {
    display: block;
  }
  .about__stanza-break {
    display: block;
    height: 1em;
  }
  .about__prose {
    font-family: var(--font-heading--family);
    letter-spacing: var(--font-heading--tracking);
    /* Same size as the Philosophy body; full content width. */
    font-size: calc(clamp(2.75rem, 6vw, 5.25rem) * var(--about-text-scale, 1));
    line-height: 1.25;
  }
  .about__prose p {
    margin: 0;
  }
  .about__prose p + p {
    margin-top: 1em;
  }
  /* Grouped lists (e.g. Our Practice): a bolded-line paragraph acts as
     the group's eyebrow heading, its list beneath in the meta-list
     idiom; groups flow into columns on wider screens. */
  .about__prose p:has(> strong:only-child) {
    /* Subheader style (same face/size as the card taglines). */
    font-family: var(--font-body--family);
    letter-spacing: var(--font-body--tracking);
    font-size: 1.0625rem;
    line-height: 1.4;
    opacity: 0.8;
    break-after: avoid;
  }
  .about__prose p:has(> strong:only-child) strong {
    font-weight: 400;
  }
  .about__prose p + p:has(> strong:only-child) {
    margin-top: 2.5rem;
  }
  .about__prose ul + p:has(> strong:only-child) {
    margin-top: 2.5rem;
  }
  /* List items read at the Philosophy body size (the serif prose base);
     groups stack centered like poem stanzas under their labels. */
  .about__prose ul {
    list-style: none;
    margin: 0.875rem 0 0;
    padding: 0;
    font: inherit;
    letter-spacing: inherit;
  }
  .about__image {
    max-width: 48rem;
    margin-top: 3rem;
  }
  .about__image img {
    width: 100%;
    height: auto;
    display: block;
  }
  /* Phones: the four tabs fit one line (smaller type, tighter gaps) and
     the "To begin a conversation" block is hidden — Contact is a tap
     away in the menu. */
  @media (max-width: 749px) {
    .about__tabs {
      flex-wrap: nowrap;
      gap: 0 1rem;
      width: 100%;
    }
    .about__tab {
      font-size: 0.625rem;
      letter-spacing: 0.06em;
      white-space: nowrap;
    }
    .about__contact {
      display: none;
    }
    /* The active tab is underlined on phones, where the tabs are small. */
    .about__tab[aria-selected='true'] {
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 0.35em;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .about__tab {
      transition: none;
    }
  }
/* END_SECTION:about */

/* START_SECTION:accolades (INDEX:2) */
.accolades {
    /* Same width as the homepage intro (editorial-text). The logos
       wrap as needed inside it. */
    max-width: 64rem;
  }
  .accolades__eyebrow {
    margin-bottom: 1.5rem;
  }
  .accolades__body {
    font-family: var(--font-heading--family);
    letter-spacing: var(--font-heading--tracking);
    font-size: clamp(2.145rem, 4.056vw, 3.12rem); /* matches editorial-text body */
    line-height: 1.35;
  }
  .accolades__body p {
    margin: 0;
  }
  .accolades__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* The zero-height break span forms its own flex line, so each
       visual row boundary spans TWO row-gaps — 1.25rem here reads as
       2.5rem between the logo rows. */
    gap: 1.25rem 4rem;
    margin-top: 3rem;
    color: var(--color-foreground);
  }
  .accolades__break {
    flex-basis: 100%;
    height: 0;
  }
  .accolade {
    display: block;
  }
  .accolade svg {
    display: block;
    height: 2.1rem; /* +50% */
    width: auto;
    fill: currentColor;
  }
  .accolade--time svg {
    height: 2.25rem;
  }
  .accolade--fortune svg {
    height: 1.875rem;
  }
  .accolade--ad svg {
    height: 1.2rem;
  }
  /* Phones: one logo per line, all hanging from the same left edge.
     Diagonal first letters (V, A) sit a touch left so they read
     aligned with the flat-sided ones. */
  @media (max-width: 749px) {
    .accolades__logos {
      flex-direction: column;
      align-items: flex-start;
      gap: 2.5rem;
      margin-top: 2.5rem;
    }
    .accolades__break {
      display: none;
    }
    .accolade--vogue svg {
      margin-left: -0.15rem;
    }
    .accolade--ad svg {
      margin-left: -0.08rem;
    }
  }
/* END_SECTION:accolades */

/* START_SECTION:archive-index (INDEX:3) */
.archive-index__eyebrow {
    margin: 0 0 2.5rem;
  }

  /* Directory listing as a strict grid — every column is always used
     (multicol balancing left trailing columns empty). Entries read
     across rows; 6 columns on wide screens, fewer as space narrows. */
  .archive-index__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  @media (min-width: 750px) {
    .archive-index__list {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media (min-width: 990px) {
    .archive-index__list {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  @media (min-width: 1200px) {
    .archive-index__list {
      grid-template-columns: repeat(6, 1fr);
    }
  }
  .archive-index__link {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding-block: 0.2rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.8125rem;
    line-height: 1.5;
  }
  .archive-index__link:hover .archive-index__title,
  .archive-index__link:focus-visible .archive-index__title {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
  .archive-index__year {
    flex-shrink: 0;
    opacity: 0.6; /* >= 4.5:1 on cream (AA small text) */
    font-variant-numeric: tabular-nums;
  }
/* END_SECTION:archive-index */

/* START_SECTION:cart (INDEX:6) */
.cart-page__head {
    display: flex;
    align-items: baseline;
    gap: 1.5rem;
    margin-bottom: 3rem;
  }
  .cart-page__title {
    font-size: clamp(2.25rem, 4.5vw, 3.5rem);
    line-height: 1.05;
    margin: 0;
  }
  .cart-page__count {
    margin: 0;
  }

  .cart-page__empty-line {
    font-family: var(--font-heading--family);
    letter-spacing: var(--font-heading--tracking);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    margin: 0 0 2rem;
  }

  .cart-page__form {
    display: grid;
    gap: 3.5rem;
    align-items: start;
  }
  @media (min-width: 990px) {
    .cart-page__form {
      grid-template-columns: minmax(0, 1.7fr) minmax(18rem, 1fr);
      gap: 3rem 5rem;
    }
    .cart-page__summary {
      position: sticky;
      top: 6rem;
    }
  }

  .cart-page__items {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid color-mix(in srgb, var(--color-foreground) 25%, transparent);
  }
  .cart-item {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr) auto auto;
    gap: 1rem 1.5rem;
    align-items: center;
    padding-block: 1.5rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 25%, transparent);
  }
  @media (max-width: 749px) {
    .cart-item {
      grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    }
    .cart-item__line-price {
      grid-column: 2 / -1;
      justify-self: end;
    }
  }
  .cart-item__thumb {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--color-foreground) 8%, transparent);
  }
  .cart-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .cart-item__info a {
    color: inherit;
    text-decoration: none;
  }
  .cart-item__info a:hover,
  .cart-item__info a:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
  }
  .cart-item__title {
    font-family: var(--font-heading--family);
    letter-spacing: var(--font-heading--tracking);
    font-size: 1.375rem;
    line-height: 1.2;
    margin: 0;
  }
  .cart-item__variant,
  .cart-item__unit {
    font-size: 0.875rem;
    opacity: 0.7;
    margin: 0.375rem 0 0;
  }
  .cart-item__remove {
    display: inline-block;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-top: 0.75rem;
  }
  .cart-item__remove:hover,
  .cart-item__remove:focus-visible {
    opacity: 1;
  }

  .cart-item__qty {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid color-mix(in srgb, var(--color-foreground) 30%, transparent);
    border-radius: 999px;
    padding: 0.125rem 0.375rem;
  }
  .cart-item__step {
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
  }
  .cart-item__qty input {
    width: 2rem;
    border: 0;
    background: none;
    color: inherit;
    text-align: center;
    font-family: var(--font-body--family);
    font-size: 0.9375rem;
    -moz-appearance: textfield;
    appearance: textfield;
  }
  .cart-item__qty input::-webkit-outer-spin-button,
  .cart-item__qty input::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
  }
  .cart-item__update {
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.7;
  }
  html.js .cart-item__update {
    display: none;
  }
  .cart-item__line-price {
    font-family: var(--font-heading--family);
    letter-spacing: var(--font-heading--tracking);
    font-size: 1.25rem;
    margin: 0;
    white-space: nowrap;
  }

  .cart-page__summary {
    padding: 2.25rem;
    border: 1px solid color-mix(in srgb, var(--color-foreground) 25%, transparent);
  }
  .cart-page__summary-heading {
    margin: 0 0 1.5rem;
  }
  .cart-page__summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-size: 1.0625rem;
  }
  .cart-page__subtotal {
    font-family: var(--font-heading--family);
    letter-spacing: var(--font-heading--tracking);
    font-size: 1.5rem;
  }
  .cart-page__taxes {
    font-size: 0.8125rem;
    opacity: 0.6;
    margin: 0.875rem 0 1.75rem;
  }
  .cart-page__pill {
    display: inline-block;
    padding: 0.625rem 1.375rem;
    border: 0.5px solid currentColor;
    border-radius: 999px;
    background: none;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--font-body--family);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
  }
  .cart-page__pill:hover,
  .cart-page__pill:focus-visible {
    background-color: color-mix(in srgb, currentColor 10%, transparent);
  }
  .cart-page__checkout {
    display: block;
    width: 100%;
    text-align: center;
  }
  .cart-page__continue {
    display: inline-block;
    margin-top: 1.25rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
    opacity: 0.7;
  }
  .cart-page__continue:hover,
  .cart-page__continue:focus-visible {
    opacity: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .cart-page__pill {
      transition: none;
    }
  }
/* END_SECTION:cart */

/* START_SECTION:collection (INDEX:7) */
.collection-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
  }
/* END_SECTION:collection */

/* START_SECTION:collections (INDEX:8) */
.collections {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--collection-card-size), 100%), 1fr));
    gap: var(--grid-gap);
  }
  .collections--compact {
    --collection-card-size: 160px;
  }
  .collections--full {
    --collection-card-size: 280px;
  }
  .collection-card {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
/* END_SECTION:collections */

/* START_SECTION:contact-form (INDEX:9) */
.contact-form {
    max-width: 40rem;
  }
  .contact-form__success {
    margin-bottom: 1rem;
  }
  .contact-form__errors {
    margin-bottom: 1rem;
  }
  .contact-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1rem;
  }
  .contact-form__field input,
  .contact-form__field textarea {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-foreground);
    background-color: var(--color-background);
    color: var(--color-foreground);
  }
  .contact-form__submit {
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--color-foreground);
    background-color: var(--color-foreground);
    color: var(--color-background);
    border-radius: var(--style-border-radius-inputs);
    cursor: pointer;
  }
/* END_SECTION:contact-form */

/* START_SECTION:contact (INDEX:10) */
/* Same scale as the homepage intro (editorial-text body). */
  .contact-page__intro {
    font-family: var(--font-heading--family);
    letter-spacing: var(--font-heading--tracking);
    font-size: clamp(2.145rem, 4.056vw, 3.12rem);
    line-height: 1.2;
    max-width: 64rem;
    margin: 0 0 clamp(3.5rem, 8vh, 5.5rem);
  }
  .contact-page__head {
    margin-bottom: 1.5rem;
  }
  /* Form then New Business: the form's bottom margin is the gap. */
  /* Subheader face, a step up from the group headings. */
  .contact-page__title {
    font-family: var(--font-body--family);
    letter-spacing: var(--font-body--tracking);
    font-size: 1.625rem;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
  }
  .contact-page a {
    color: inherit;
    text-decoration: none;
  }
  .contact-page a:hover,
  .contact-page a:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
  }

  /* Info groups (ref: Studio Dumbar): heading at full strength, the
     details slightly muted beneath. */
  .contact-page__groups {
    display: grid;
    gap: 3rem 4rem;
    margin-top: clamp(3.5rem, 8vh, 5.5rem);
  }
  @media (min-width: 750px) {
    .contact-page__groups {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      max-width: 62rem;
    }
  }
  .contact-page__group-heading {
    font-family: var(--font-body--family);
    letter-spacing: var(--font-body--tracking);
    font-size: 1.0625rem;
    font-weight: 400;
    margin: 0 0 0.75rem;
  }
  .contact-page__group p {
    margin: 0;
    opacity: 0.7;
  }
  .contact-page__group p + p {
    margin-top: 1em;
  }
  .contact-page__social {
    list-style: none;
    margin: 0.875rem 0 0;
    padding: 0;
    line-height: 1.9;
    opacity: 0.7;
  }

  /* Pill button/link — same idiom as the Work toggle. */
  .contact-page__pill {
    display: inline-block;
    padding: 0.5rem 1.125rem;
    border: 0.5px solid currentColor;
    border-radius: 999px;
    background: none;
    color: inherit;
    cursor: pointer;
    font-family: var(--font-body--family);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
  }
  .contact-page a.contact-page__pill:hover,
  .contact-page a.contact-page__pill:focus-visible,
  .contact-page__pill:hover,
  .contact-page__pill:focus-visible {
    text-decoration: none;
    background-color: color-mix(in srgb, currentColor 12%, transparent);
  }

  /* Newsletter signup row. */
  .contact-page__subscribe {
    margin-top: 1.25rem;
  }
  .contact-page__subscribe-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
  }
  .contact-page__subscribe-row input {
    flex: 1 1 12rem;
  }

  /* CTAs + contact form. */
  /* Form leads the page; the intro statement follows it. */
  .contact-page__engage {
    margin-bottom: clamp(5rem, 12vh, 8rem);
    max-width: 62rem;
  }
  .contact-page__group-cta {
    margin-top: 1.25rem;
  }
  .contact-page__fields {
    display: grid;
    gap: 2.25rem 3rem;
    margin-bottom: 2.5rem;
  }
  @media (min-width: 750px) {
    .contact-page__fields {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .contact-page__field--message {
      grid-column: 1 / -1;
    }
  }
  .contact-page__field label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 0.5rem;
  }
  .contact-page input[type='text'],
  .contact-page input[type='email'],
  .contact-page input[type='url'],
  .contact-page textarea {
    width: 100%;
    padding: 0.5rem 0;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    border-radius: 0;
    background: none;
    color: inherit;
    font-family: var(--font-body--family);
    font-size: 1.0625rem;
    transition: border-color 0.3s ease;
  }
  .contact-page input:focus-visible,
  .contact-page textarea:focus-visible {
    outline: none;
    border-bottom-color: currentColor;
  }
  .contact-page textarea {
    min-height: 12rem;
    resize: vertical;
  }
  .contact-page__form-success {
    margin: 0;
  }
  .contact-page__form-error {
    margin: 0 0 1.5rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .contact-page__pill,
    .contact-page input,
    .contact-page textarea {
      transition: none;
    }
  }
/* END_SECTION:contact */

/* START_SECTION:custom-section (INDEX:11) */
.custom-section {
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  .custom-section__background {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
  }
  .custom-section__background img {
    position: absolute;
    width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .custom-section__content {
    display: grid;
    grid-template-columns: var(--content-grid);
  }
  .custom-section__content > * {
    grid-column: 2;
  }
/* END_SECTION:custom-section */

/* START_SECTION:editorial-text (INDEX:12) */
.editorial {
    /* Wide enough that the About statement sits on 4 lines at the
       capped desktop type size (4-line band ≈ 61–89rem there). */
    max-width: 64rem;
  }
  .editorial__eyebrow {
    margin-bottom: 1.5rem;
  }
  .editorial__body {
    font-family: var(--font-heading--family);
    letter-spacing: var(--font-heading--tracking);
    font-size: clamp(2.145rem, 4.056vw, 3.12rem); /* original clamp(1.375rem, 2.6vw, 2rem) +30% then +20% */
    line-height: 1.2;
  }
  .editorial__body p {
    margin: 0;
  }
  .editorial__body p + p {
    margin-top: 1em;
  }
  .editorial__link {
    display: inline-block;
    margin-top: 2rem;
    color: var(--color-foreground);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
/* END_SECTION:editorial-text */

/* START_SECTION:featured-projects (INDEX:13) */
.featured-projects__eyebrow {
    margin-bottom: 2rem;
  }
  .featured-projects__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
  }
  .featured-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
  }
  /* The cinematic 21:9 crop gets too shallow on narrow screens —
     mobile shows square cards instead. */
  @media (max-width: 749px) {
    .featured-card__media {
      aspect-ratio: 1;
    }
  }
  .featured-card__placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
  }
  .featured-card__placeholder img {
    width: min(30vw, 9rem);
    height: auto;
    opacity: 0.3;
    transform: none !important;
  }
  /* Title with the tagline stacked directly beneath it; a hairline
     arrow sits on the title line, flush right. */
  .featured-card__meta {
    margin-top: 1.25rem;
  }
  .featured-card__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }
  .featured-card__name {
    margin: 0;
  }
  .featured-card__arrow {
    flex-shrink: 0;
    transition: transform 0.3s ease;
  }
  .featured-card__link:hover .featured-card__arrow,
  .featured-card__link:focus-visible .featured-card__arrow {
    transform: translateX(0.375rem);
  }
  @media (prefers-reduced-motion: reduce) {
    .featured-card__arrow {
      transition: none;
    }
  }
  /* Same CTA idiom as the service cards: no underline, arrow nudges
     right on hover. */
  .featured-projects__link {
    display: inline-block;
    margin-top: 3rem;
    color: var(--color-foreground);
    text-decoration: none;
  }
  .featured-projects__link-arrow {
    display: inline-block;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .featured-projects__link:hover .featured-projects__link-arrow,
  .featured-projects__link:focus-visible .featured-projects__link-arrow {
    transform: translateX(0.25rem);
  }
  @media (prefers-reduced-motion: reduce) {
    .featured-projects__link-arrow {
      transition: none;
    }
  }
/* END_SECTION:featured-projects */

/* START_SECTION:footer (INDEX:14) */
/* The footer overhangs its wrapper by 1px at the bottom so a sub-pixel
     rounding seam (a hairline of cream under the footer on phones) is
     covered in ink. The top gap stays a margin on the footer itself —
     the wrapper must stay transparent-free of margins on the homepage,
     where the fixed brand film would show through any gap. */
  .footer {
    background-color: var(--color-foreground);
    color: var(--color-background);
    display: grid;
    grid-template-columns: var(--content-grid);
    margin-top: 4rem;
    margin-bottom: -1px;
    padding-block: 3rem calc(1.5rem + 1px + env(safe-area-inset-bottom, 0px));
  }
  .footer > * {
    grid-column: 2;
  }
  .footer a {
    color: var(--color-background);
    text-decoration: none;
  }
  .footer__text a,
  .footer__legal-links a {
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }
  .footer__logo {
    display: inline-block;
    justify-self: start;
  }
  .footer__logo img {
    height: 1.5rem;
    width: auto;
    display: block;
  }
  .footer__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 2rem;
    margin-top: 2.5rem;
  }
  @media (min-width: 990px) {
    .footer__grid {
      grid-template-columns: 1.5fr 1.2fr 1.8fr 0.7fr 0.7fr;
    }
  }
  /* Phones (two columns): Explore / Discover, then Social / Contact,
     then Subscribe across the full width. */
  @media (max-width: 989px) {
    .footer__col--explore { order: 1; }
    .footer__col--discover { order: 2; }
    .footer__col--social { order: 3; }
    .footer__col--contact { order: 4; }
    .footer__col--subscribe {
      order: 5;
      grid-column: 1 / -1;
    }
  }
  .footer__heading {
    font-family: var(--font-body--family);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.65;
    margin-bottom: 0.75rem;
  }
  .footer__text {
    font-size: 0.9375rem;
    line-height: 1.5;
    max-width: 36ch;
  }
  .footer__text p {
    margin: 0;
  }
  .footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.9375rem;
  }
  .footer__subscribe-form {
    margin-top: 1rem;
  }
  .footer__subscribe-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .footer__subscribe-row input {
    flex: 1 1 12rem;
    padding: 0.5rem 0.75rem;
    background-color: transparent;
    border: 1px solid color-mix(in srgb, var(--color-background) 50%, transparent);
    color: var(--color-background);
  }
  .footer__subscribe-row input::placeholder {
    color: color-mix(in srgb, var(--color-background) 60%, transparent);
  }
  .footer__subscribe-row button {
    padding: 0.5rem 1.5rem;
    background-color: var(--color-background);
    color: var(--color-foreground);
    border: 1px solid var(--color-background);
    border-radius: var(--style-border-radius-inputs);
    cursor: pointer;
  }
  .footer__utility {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 3rem;
    padding-top: 1.25rem;
    border-top: 1px solid color-mix(in srgb, var(--color-background) 20%, transparent);
    font-size: 0.8125rem;
  }
  .footer__legal {
    margin: 0;
    opacity: 0.75;
  }
  .footer__legal-links {
    display: flex;
    gap: 1.5rem;
  }
/* END_SECTION:footer */

/* START_SECTION:header (INDEX:15) */
/* Sticky site-wide. On the homepage the video hero is ordered above
     this section (see video-hero.liquid), so the nav scrolls up with
     the page and pins here when it reaches the top — no JS involved. */
  .shopify-section:has(> header) {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: var(--color-background);
  }

  header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 2rem;
    min-height: 3.5rem;
    padding-block: 0.5rem;
  }
  header a {
    text-decoration: none;
    color: var(--color-foreground);
    display: flex;
    align-items: center;
  }
  /* On desktop the menus wrapper dissolves (display: contents) so the
     navs sit directly on the header grid — columns are explicit since
     source order is toggle, logo, navs. */
  .header__menus {
    display: contents;
  }
  .header__menu-toggle,
  .header__nav-count,
  .header__nav-expand,
  .header__slot {
    display: none;
  }
  :root {
    --color-menu: #c03025; /* mobile menu overlay */
  }
  .header__logo {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
  }
  .header__logo img {
    height: 1.725rem; /* 1.5rem + 15% */
    width: auto;
    display: block;
  }
  /* The white wordmark swaps in when the page is in the inverted (ink)
     scheme — see the inversion block in critical.css. Selectors repeat
     `.header__logo img` to outrank the sizing rule above. */
  .header__logo img.header__logo-img--light {
    display: none;
  }
  html.is-inverted .header__logo img.header__logo-img--dark {
    display: none;
  }
  html.is-inverted .header__logo img.header__logo-img--light {
    display: block;
  }
  .header__nav--primary {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }
  .header__nav--secondary {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
  .header__nav-list {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 1.00625rem; /* 0.875rem + 15% */
    text-transform: uppercase;
  }
  /* Generous hit area, painted ABOVE the dropdown's invisible hover
     bridge (which spans the bar bottom while a dropdown is open and
     would otherwise swallow clicks near the underline). Positioning
     the <a> is safe — it's a sibling of the dropdown, not an
     ancestor, so the dropdown still anchors to the sticky section. */
  .header__nav-item > a,
  .header__nav-item > .header__nav-static {
    position: relative;
    z-index: 11;
    padding: 0.75rem 0.375rem;
    margin-inline: -0.375rem;
  }
  /* Non-link parent (menu url "#"): looks like a nav link, opens its
     dropdown on hover/focus, goes nowhere on click. */
  .header__nav-static {
    display: flex;
    align-items: center;
    color: var(--color-foreground);
    cursor: default;
    outline-offset: 2px;
  }
  /* The parent item underlines while its dropdown is open. */
  .header__nav-item--parent:hover > a,
  .header__nav-item--parent:focus-within > a,
  .header__nav-item--parent:hover > .header__nav-static,
  .header__nav-item--parent:focus-within > .header__nav-static {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
  }
  /* Perron-style dropdown (ref: perronstudios.com): a horizontal row
     of the children directly beneath the nav bar. It anchors to the
     full-bleed sticky section (the nearest positioned ancestor — no
     position on the items/navs in between), so its background bar
     spans the whole page width; padding keeps the links on the
     content grid (right-aligned for the secondary nav). */
  .header__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    display: none;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin: 0;
    padding: 0.125rem var(--page-margin) 0.75rem;
    list-style: none;
    background-color: var(--color-background);
  }
  .header__nav-item--parent:hover .header__dropdown,
  .header__nav-item--parent:focus-within .header__dropdown {
    display: flex;
  }
  .header__dropdown a {
    padding-block: 0.25rem;
    white-space: nowrap;
  }
  .header__dropdown a:hover,
  .header__dropdown a:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
  }
  /* Items animate in together when the row appears (display flip
     restarts the animation each open). */
  .header__dropdown li {
    animation: header-dropdown-in 0.5s cubic-bezier(0.45, 0, 0.15, 1) both;
  }
  @keyframes header-dropdown-in {
    from {
      opacity: 0;
      transform: translateY(0.375rem);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .header__dropdown li {
      animation: none;
    }
  }
  /* Secondary-nav dropdowns keep their links on the right edge of the
     content grid (lined up with the last item, Contact). */
  .header__nav--secondary .header__dropdown {
    justify-content: flex-end;
  }
  /* Invisible strip above the row bridging the gap between the nav
     link and the dropdown (it anchors to the section bottom, below
     the link's box) so hover survives the crossing. */
  .header__dropdown::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 1.75rem;
  }
  /* Page scroll locks while the overlay is open. */
  html.menu-open {
    overflow: hidden;
  }
  /* Mobile: hamburger left, logo centered, menus in a full-screen
     overlay (assets/header-menu.js toggles html.menu-open). The bar's
     toggle + logo sit above the overlay so it can close in place. */
  @media (max-width: 749px) {
    .header__slot {
      display: flex;
      align-items: center;
      grid-column: 1;
      grid-row: 1;
      justify-self: start;
      position: relative;
      z-index: 2;
    }
    html.menu-open .header__slot {
      display: none;
    }
    /* Hamburger at rest; "✕ Close" pill while the overlay is open. */
    .header__menu-toggle {
      display: flex;
      align-items: center;
      grid-column: 3;
      grid-row: 1;
      justify-self: end;
      min-width: 2rem;
      height: 2rem;
      padding: 0;
      border: 0;
      border-radius: 0.25rem;
      background: none;
      cursor: pointer;
      color: var(--color-foreground);
      position: relative;
      z-index: 2;
      font-family: var(--font-body--family);
      font-size: 0.9375rem;
    }
    .header__menu-toggle-bars {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-end;
      gap: 0.4375rem;
      width: 2rem;
      height: 2rem;
    }
    .header__menu-toggle-bars span {
      display: block;
      width: 1.5rem;
      height: 1px;
      background-color: currentColor;
    }
    .header__menu-toggle-close {
      display: none;
      padding: 0.375rem 0.625rem;
      background-color: rgb(255 255 255 / 0.22);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      font-size: 0.75rem;
      white-space: nowrap;
    }
    html.menu-open .header__menu-toggle-bars {
      display: none;
    }
    html.menu-open .header__menu-toggle-close {
      display: inline-block;
    }
    .header__logo {
      position: relative;
      z-index: 2;
    }
    /* Full-screen overlay in the brand red; the nav lists read as one
       continuous hairline-divided list beneath a top gap. */
    .header__menus {
      position: fixed;
      inset: 0;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: 0;
      padding: 7.5rem var(--page-margin) 3rem;
      overflow-y: auto;
      background-color: var(--color-menu);
      color: var(--color-foreground);
      opacity: 0;
      visibility: hidden;
      transition:
        opacity 0.2s ease,
        visibility 0.2s;
    }
    html.menu-open .header__menus {
      opacity: 1;
      visibility: visible;
    }
    .header__nav-list {
      flex-direction: column;
      row-gap: 0;
      font-size: 1.875rem;
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }
    .header__nav-item {
      position: relative;
      border-top: 1px solid color-mix(in srgb, var(--color-foreground) 35%, transparent);
    }
    .header__nav--secondary .header__nav-item:last-child {
      border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 35%, transparent);
    }
    .header__nav-item > a,
    .header__nav-item > .header__nav-static {
      padding: 1.125rem 3rem 1.125rem 0;
      margin: 0;
      color: var(--color-foreground);
      line-height: 1.1;
    }
    .header__nav-count {
      display: inline;
      font-size: 0.5em;
      letter-spacing: 0;
      margin-left: 0.375rem;
      opacity: 0.9;
      vertical-align: super;
    }
    /* +/− on the right of a parent row. */
    .header__nav-expand {
      display: grid;
      place-items: center;
      position: absolute;
      top: 0.9rem;
      right: 0;
      width: 2.75rem;
      height: 2.75rem;
      padding: 0;
      border: 0;
      background: none;
      color: var(--color-foreground);
      cursor: pointer;
      z-index: 12;
    }
    /* The four-petal brand mark (snippets/brand-mark.liquid); it turns
       45° when the group is open. */
    .header__nav-expand .brand-mark {
      width: 1.25rem;
      height: 1.25rem;
      transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .header__nav-expand[aria-expanded='true'] .brand-mark {
      transform: rotate(45deg);
    }
    @media (prefers-reduced-motion: reduce) {
      .header__nav-expand .brand-mark {
        transition: none;
      }
    }
    /* Children: collapsed until expanded, then a two-column list. */
    .header__dropdown,
    .header__nav-item--parent:hover .header__dropdown,
    .header__nav-item--parent:focus-within .header__dropdown {
      display: none;
      position: static;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.625rem 1.5rem;
      max-width: none;
      padding: 0.5rem 0 2.25rem;
      margin: 0;
      background: none;
    }
    .header__nav-item.is-expanded .header__dropdown {
      display: grid;
      background: none;
    }
    .header__dropdown::before {
      content: none;
    }
    .header__dropdown li {
      animation: none;
    }
    .header__dropdown a {
      font-size: 1rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: color-mix(in srgb, var(--color-foreground) 85%, transparent);
      padding: 0;
    }
    /* Parent underline on hover doesn't apply on touch. */
    .header__nav-item--parent:hover > a,
    .header__nav-item--parent:hover > .header__nav-static {
      text-decoration: none;
    }
  }
/* END_SECTION:header */

/* START_SECTION:link-list (INDEX:16) */
.link-list {
  }
  .link-list__heading {
    margin-bottom: 1rem;
  }
  .link-list__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .link-list__item a {
    color: var(--color-foreground);
    font-size: 1.25rem;
    text-decoration: none;
  }
  .link-list__item a:hover,
  .link-list__item a:focus-visible {
    text-decoration: underline;
  }
/* END_SECTION:link-list */

/* START_SECTION:love-notes (INDEX:17) */
.love-notes__head {
    margin-bottom: 1.5rem;
  }
  .love-notes__title {
    font-size: clamp(2.25rem, 4.5vw, 3.5rem);
    line-height: 1.05;
    margin: 0;
  }
  /* Subheader style (same face/size as the card taglines). */
  .love-notes__group {
    font-family: var(--font-body--family);
    letter-spacing: var(--font-body--tracking);
    font-size: 1.0625rem;
    opacity: 0.8;
    margin: 0;
  }
  .love-notes__list {
    list-style: none;
    margin: 3.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(3.5rem, 8vh, 5.5rem);
  }
  .love-note__blockquote {
    margin: 0;
  }
  .love-note__quote {
    font-family: var(--font-heading--family);
    letter-spacing: var(--font-heading--tracking);
    font-size: clamp(1.375rem, 2.2vw, 1.875rem);
    line-height: 1.5;
    max-width: 48rem;
    margin: 0;
  }
  .love-note__attribution {
    font-family: var(--font-body--family);
    letter-spacing: var(--font-body--tracking);
    font-size: 1.0625rem;
    opacity: 0.8;
    margin-top: 1.25rem;
  }
/* END_SECTION:love-notes */

/* START_SECTION:one-on-one (INDEX:18) */
.session__eyebrow {
    margin: 0 0 1.5rem;
  }
  .session__title {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1.02;
    margin: 0;
  }
  /* Same scale as the Signature Services intro. */
  .session__intro {
    font-family: var(--font-heading--family);
    letter-spacing: var(--font-heading--tracking);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.2;
    max-width: 28ch;
    margin: 2rem 0 0;
  }
  .session__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-top: clamp(4rem, 9vh, 6rem);
  }
  @media (min-width: 990px) {
    .session__grid {
      grid-template-columns: minmax(0, 1.4fr) minmax(20rem, 1fr);
      gap: clamp(3rem, 6vw, 6rem);
      align-items: start;
    }
  }
  .session__body {
    font-size: 1.0625rem;
    line-height: 1.65;
    max-width: 40rem;
  }
  .session__body p {
    margin: 0 0 1.25rem;
  }
  .session__body p:last-child {
    margin-bottom: 0;
  }
  .session__details {
    list-style: none;
    margin: 2.5rem 0 0;
    padding: 0;
    max-width: 40rem;
  }
  .session__detail {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem 0;
    border-top: 0.5px solid color-mix(in srgb, currentColor 25%, transparent);
    font-size: 0.9375rem;
    line-height: 1.55;
  }
  .session__detail:last-child {
    border-bottom: 0.5px solid color-mix(in srgb, currentColor 25%, transparent);
  }
  .session__detail-text {
    opacity: 0.7;
  }
  @media (max-width: 599px) {
    .session__detail {
      grid-template-columns: 1fr;
      gap: 0.25rem;
    }
  }

  /* Booking card: hairline-bordered, sticky beside the copy. */
  .session__panel {
    border: 0.5px solid color-mix(in srgb, currentColor 35%, transparent);
    padding: 2rem;
  }
  @media (min-width: 990px) {
    .session__panel {
      position: sticky;
      top: calc(var(--header-height, 5rem) + 1.5rem);
    }
  }
  .session__rate {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0;
  }
  .session__price {
    font-family: var(--font-heading--family);
    letter-spacing: var(--font-heading--tracking);
    font-size: clamp(2.25rem, 3.5vw, 3rem);
    line-height: 1;
  }
  .session__per {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.65;
  }
  .session__hours {
    border: 0;
    margin: 2rem 0 0;
    padding: 0;
  }
  .session__legend {
    padding: 0;
    margin: 0 0 0.875rem;
  }
  .session__options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .session__hour input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .session__hour-pill {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 0.5px solid color-mix(in srgb, currentColor 35%, transparent);
    border-radius: 999px;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  }
  .session__hour:hover .session__hour-pill {
    border-color: currentColor;
  }
  .session__hour input:checked + .session__hour-pill {
    background-color: var(--color-foreground);
    border-color: var(--color-foreground);
    color: var(--color-background);
  }
  .session__hour input:focus-visible + .session__hour-pill {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }
  .session__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin: 1.75rem 0 0;
    padding-top: 1.25rem;
    border-top: 0.5px solid color-mix(in srgb, currentColor 25%, transparent);
  }
  .session__total strong {
    font-family: var(--font-heading--family);
    letter-spacing: var(--font-heading--tracking);
    font-size: 1.5rem;
    font-weight: 400;
  }
  .session-pill {
    display: inline-block;
    width: 100%;
    margin-top: 1.5rem;
    padding: 0.875rem 1.375rem;
    border: 0.5px solid currentColor;
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    text-align: center;
    font-family: var(--font-body--family);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: none;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  .session-pill:hover,
  .session-pill:focus-visible {
    background-color: var(--color-foreground);
    color: var(--color-background);
  }
  .session__note {
    font-size: 0.875rem;
    line-height: 1.6;
    opacity: 0.75;
    margin: 1.5rem 0 0;
  }
  .session__form + .session__note {
    padding-top: 1.5rem;
    border-top: 0.5px solid color-mix(in srgb, currentColor 25%, transparent);
  }
  .session__note-link {
    color: inherit;
    white-space: nowrap;
  }

  /* About band (ported from The Quickie's `about` block): full-bleed —
     photo flush to the page's left edge, text keeps the page margin on
     the right. The section wrapper clips the scrollbar overshoot. */
  .shopify-section:has(> .session) {
    overflow-x: clip;
  }
  .session-about {
    display: grid;
    gap: 2.5rem;
    width: 100vw;
    max-width: none;
    margin-top: clamp(5.5rem, 14vh, 10rem);
    margin-left: 50%;
    transform: translateX(-50%);
    padding-right: var(--page-margin);
  }
  .session-about--inverted {
    background-color: var(--color-foreground);
    color: var(--color-background);
    padding-block: clamp(3rem, 8vh, 6rem);
  }
  @media (max-width: 989px) {
    .session-about {
      padding-left: var(--page-margin);
    }
  }
  @media (min-width: 990px) {
    .session-about {
      --edge: max(var(--page-margin), (100vw - var(--page-width)) / 2);
      --photo-width: min(52rem, 100vw - 2 * var(--edge));
      grid-template-columns: calc(var(--edge) + var(--photo-width)) minmax(0, 1fr);
      gap: 3.5rem;
      align-items: center;
    }
    .session-about__text {
      padding-block: 3rem;
    }
  }
  /* The photo keeps its own aspect (no crop), with margin inside the band. */
  .session-about__media {
    margin: clamp(1.5rem, 4vw, 3.5rem);
    overflow: hidden;
    background-color: color-mix(in srgb, currentColor 6%, transparent);
  }
  @media (max-width: 989px) {
    .session-about__media {
      margin-inline: 0;
      margin-bottom: 0;
    }
  }
  .session-about__media img {
    width: 100%;
    height: auto;
    display: block;
  }
  .session-about__heading {
    font-size: clamp(1.875rem, 3.2vw, 2.75rem);
    line-height: 1.1;
    max-width: 24ch;
    margin: 0;
  }
  .session-about__body p {
    font-size: 1.0625rem;
    line-height: 1.65;
    max-width: 40rem;
    margin: 1.5rem 0 0;
  }
  .session-about__cta {
    display: inline-block;
    margin-top: 2rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .session-about__cta-arrow {
    display: inline-block;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .session-about__cta:hover .session-about__cta-arrow,
  .session-about__cta:focus-visible .session-about__cta-arrow {
    transform: translateX(0.25rem);
  }
  @media (prefers-reduced-motion: reduce) {
    .session__hour-pill,
    .session-pill,
    .session-about__cta-arrow {
      transition: none;
    }
  }
/* END_SECTION:one-on-one */

/* START_SECTION:project-hero (INDEX:22) */
/* Full-bleed 90svh panel. With JS it slides under the sticky nav
     (--header-height is measured by scroll-effects.js; the fallback is
     the header's min-height + padding). Without JS the nav stays
     opaque, so the hero simply sits below it. */
  .project-hero-open {
    position: relative;
    height: 85vh;
    height: 85svh;
    overflow: hidden;
    background-color: var(--color-foreground);
  }
  html.js .project-hero-open {
    margin-top: calc(-1 * var(--header-height, 4.5rem));
  }
  .project-hero-open__media {
    position: absolute;
    inset: 0;
    background-color: var(--color-foreground);
  }
  .project-hero-open__variant {
    position: absolute;
    inset: 0;
  }
  /* No-JS fallback when both variants are present. */
  .project-hero-open__variant[data-hero-variant='mobile'] {
    display: none;
  }
  @media (max-width: 749px) {
    .project-hero-open__media:has([data-hero-variant='mobile']) [data-hero-variant='desktop'] {
      display: none;
    }
    .project-hero-open__variant[data-hero-variant='mobile'] {
      display: block;
    }
  }
  .project-hero-open__media img,
  .project-hero-open__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    animation: project-hero-fade 1.2s ease both;
  }
  /* Parallax (assets/scroll-effects.js): the image is oversized and
     CENTERED (top = -half the overflow) so the crop at rest shows the
     asset's center — the same framing as the reduced-motion/no-JS
     plain crop — and the hidden slices above and below let it drift
     down slower than the scroll, inside the crop. JS-gated. */
  html.js .project-hero-open__media img {
    position: absolute;
    left: 0;
    top: -13%;
    height: 126%;
    will-change: transform;
  }
  @media (prefers-reduced-motion: reduce) {
    html.js .project-hero-open__media img {
      position: static;
      height: 100%;
      will-change: auto;
    }
  }
  /* Below the nav that floats over the hero, on the page margin. */
  .project-hero-open .video-listen {
    top: calc(var(--header-height, 4.5rem) + 1rem);
    right: var(--page-margin);
  }
  /* Visually hidden: the page keeps its h1 without painting it over
     the media. */
  .project-hero-open__title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  @keyframes project-hero-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .project-hero-open__media img {
      animation: none;
    }
  }
/* END_SECTION:project-hero */

/* START_SECTION:project (INDEX:23) */
.project-info {
    display: grid;
    grid-template-columns: 1.6fr minmax(14rem, 1fr);
    gap: 3rem 4.5rem;
  }
  .project-info__meta {
    order: 2;
  }
  @media (max-width: 989px) {
    .project-info {
      grid-template-columns: 1fr;
    }
  }
  .project-info__meta-list {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    margin: 0;
  }
  .project-info__meta-item dt {
    margin-bottom: 0.375rem;
  }
  .project-info__meta-item dd {
    margin: 0;
    font-size: 0.9375rem;
  }
  .project-info__scope {
    margin-top: 3rem;
  }
  .project-info__scope ul {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    columns: 2;
    column-gap: 2rem;
  }
  .project-info__scope li {
    font-size: 0.875rem;
    line-height: 1.7;
    break-inside: avoid;
  }
  .project-info__title {
    font-size: clamp(2.25rem, 4.5vw, 3.5rem);
    line-height: 1.05;
    margin: 0.75rem 0 1.5rem;
  }
  /* Mobile rhythm: more air under the breadcrumb, title hugging the
     tagline beneath it. */
  @media (max-width: 749px) {
    .project-info__breadcrumb {
      margin-bottom: 1.25rem;
    }
    .project-info__title {
      margin: 0 0 0.625rem;
    }
  }
  /* Tagline in the body face (Neue Haas Display Roman), not the serif. */
  .project-info__tagline {
    font-family: var(--font-body--family);
    letter-spacing: var(--font-body--tracking);
    font-size: clamp(1.5rem, 2.8vw, 2.125rem);
    line-height: 1.3;
    margin: 0;
  }
  .project-info__body {
    font-size: 1.0625rem;
    line-height: 1.6;
    max-width: 62ch;
    margin-top: 2rem;
  }
  .project-info__body p {
    margin: 0;
  }
  .project-info__body p + p {
    margin-top: 1em;
  }

  /* Gallery below the text: full content-width cards in the shared
     .card-media 21:9 crop, matching the site's other cards. */
  .project-gallery {
    list-style: none;
    margin: clamp(3.5rem, 8vh, 5.5rem) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  /* Assets mosaic — editor rows (see the markup comment). Tiles
     carry flex-grow = aspect × 100 with a zero basis, so each row
     fills the width with equal heights. --mosaic-gap is the "thick
     border" of page background between tiles. */
  .project-mosaic {
    --mosaic-gap: 1rem;
    container-type: inline-size;
    margin-top: clamp(3.5rem, 8vh, 5.5rem);
    display: flex;
    flex-direction: column;
    gap: var(--mosaic-gap);
  }
  .project-mosaic__row {
    display: flex;
    gap: var(--mosaic-gap);
  }
  .project-mosaic__tile {
    flex-basis: 0;
    min-width: 0;
  }
  .project-mosaic__media {
    aspect-ratio: var(--ar, 1.5);
    overflow: hidden;
    background-color: color-mix(in srgb, var(--color-foreground) 94%, var(--color-background));
  }
  /* A lone non-panoramic tile would run very tall at full width: keep
     it full width and cap the HEIGHT explicitly (an aspect-ratio box
     would transfer a max-height into a max-width and shrink instead),
     letting object-fit crop. 100cqw = the mosaic's own width. */
  .project-mosaic__row--solo .project-mosaic__media {
    aspect-ratio: auto;
    width: 100%;
    height: min(calc(100cqw / var(--ar, 1.5)), 85svh);
  }
  .project-mosaic__media img,
  .project-mosaic__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  @media (max-width: 749px) {
    .project-mosaic {
      --mosaic-gap: 0.625rem;
    }
    /* Default: a row stacks into one column, each tile full width at
       its native aspect. --keep ("m" in the layout) keeps it a row. */
    .project-mosaic__row:not(.project-mosaic__row--keep) {
      flex-direction: column;
    }
    .project-mosaic__row:not(.project-mosaic__row--keep) .project-mosaic__tile {
      flex-basis: auto;
      flex-grow: 0 !important; /* inline flex-grow is for the row layout */
    }
  }
  }

  /* .project-footer styles live in assets/critical.css (versioned
     asset) — the compiled section stylesheet can be served stale and
     left this band unstyled. */
/* END_SECTION:project */

/* START_SECTION:search (INDEX:24) */
.search-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  .search-results .prev,
  .search-results .page,
  .search-results .next {
    grid-column: 1 / -1;
  }
/* END_SECTION:search */

/* START_SECTION:service-cards (INDEX:25) */
.service-cards__eyebrow {
    margin-bottom: 2rem;
  }
  .service-cards__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  @media (min-width: 750px) {
    .service-cards__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 2rem;
    }
  }
  @media (min-width: 990px) {
    /* Two large cards side by side, filling the content width. */
    .service-cards__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 2.5rem;
    }
  }
  /* Outline-free, matching the site's card idiom: cropped image with
     the slow hover zoom, title + tagline stacked beneath. */
  .service-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
  }
  /* Override of the shared .card-media frame: square on phones and
     tablets, 16:9 once the two cards sit side by side on desktop. */
  .service-card__media {
    aspect-ratio: 1 / 1;
  }
  @media (min-width: 990px) {
    .service-card__media {
      aspect-ratio: 16 / 9;
    }
  }
  .service-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-top: 1.25rem;
  }
  .service-card__title {
    margin: 0;
  }
  .service-card__text.card-tagline {
    margin-bottom: 1.5rem;
  }
  .service-card__cta {
    margin-top: auto;
    align-self: flex-start;
    color: var(--color-foreground);
  }
  .service-card__cta-arrow {
    display: inline-block;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }
  a.service-card:hover .service-card__cta-arrow,
  a.service-card:focus-visible .service-card__cta-arrow {
    transform: translateX(0.25rem);
  }
  @media (prefers-reduced-motion: reduce) {
    .service-card__media img,
    .service-card__cta-arrow {
      transition: none;
    }
  }
/* END_SECTION:service-cards */

/* START_SECTION:services-landing (INDEX:26) */
.services-landing__head {
    margin-bottom: 1.5rem;
  }
  /* Eyebrow-size h1, same idiom as the Work and Archive pages (the
     .eyebrow utility supplies the type; only neutralize h1 defaults). */
  .services-landing__title {
    margin: 0;
  }
  /* Same scale as the homepage intro (editorial-text body). */
  .services-landing__intro {
    font-family: var(--font-heading--family);
    letter-spacing: var(--font-heading--tracking);
    font-size: clamp(2.145rem, 4.056vw, 3.12rem);
    line-height: 1.2;
    max-width: 64rem;
    margin: 0;
  }

  /* The three offerings share one row — a fuller take on the
     homepage tiles, no scrolling between them. */
  .services-landing__offers {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    margin-top: clamp(4.5rem, 10vh, 7rem);
  }
  @media (min-width: 750px) {
    .services-landing__offers {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(2rem, 4vw, 4rem);
    }
  }
  /* One row for however many offers are set (three or four). */
  @media (min-width: 1100px) {
    .services-landing__offers {
      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    }
  }
  .services-offer__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
  }
  .services-offer__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
  }
  .services-offer__media {
    aspect-ratio: 3 / 4;
  }
  .services-offer__number {
    margin: 1.5rem 0 0.75rem;
  }
  .services-offer__heading {
    font-size: 1.75rem; /* matches .card-title */
    line-height: 1.15;
    margin: 0 0 0.5rem;
  }
  .services-offer__tagline {
    margin: 0;
  }
  .services-offer__body {
    font-size: 1.0625rem;
    line-height: 1.6;
    margin: 1.25rem 0 0;
  }
  /* Same CTA idiom as the cards: no underline, arrow nudges right.
     margin-top: auto keeps the three CTAs on one baseline even when
     body lengths differ. */
  .services-offer__cta {
    display: inline-block;
    align-self: flex-start;
    margin-top: auto;
    padding-top: 1.75rem;
  }
  .services-offer__cta-arrow {
    display: inline-block;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }
  a.services-offer__link:hover .services-offer__cta-arrow,
  a.services-offer__link:focus-visible .services-offer__cta-arrow {
    transform: translateX(0.25rem);
  }

  .services-landing__closing {
    margin-top: clamp(6rem, 14vh, 9rem);
    text-align: center;
  }
  .services-landing__closing-eyebrow {
    margin: 0 0 1rem;
  }
  .services-landing__closing-text {
    font-family: var(--font-heading--family);
    letter-spacing: var(--font-heading--tracking);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.35;
    max-width: 40rem;
    margin: 0 auto;
  }
  .services-landing__closing-ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 2.25rem;
  }
  .services-landing__pill {
    display: inline-block;
    padding: 0.5rem 1.125rem;
    border: 0.5px solid currentColor;
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
  }
  .services-landing__pill:hover,
  .services-landing__pill:focus-visible {
    background-color: color-mix(in srgb, currentColor 10%, transparent);
  }
  @media (prefers-reduced-motion: reduce) {
    .services-offer__cta-arrow,
    .services-landing__pill {
      transition: none;
    }
  }
/* END_SECTION:services-landing */

/* START_SECTION:the-quickie (INDEX:27) */
/* Page rhythm: big, even air between movements (ref: Mouthwash's
     120px section gaps). */
  .quickie {
    --quickie-gap: clamp(5.5rem, 14vh, 10rem);
    display: flex;
    flex-direction: column;
    gap: var(--quickie-gap);
  }

  /* Shared idioms. */
  .quickie-heading {
    font-size: clamp(1.875rem, 3.2vw, 2.75rem);
    line-height: 1.1;
    max-width: 24ch;
    margin: 0;
  }
  .quickie-intro {
    font-size: 1.0625rem;
    line-height: 1.65;
    max-width: 40rem;
    margin: 1.5rem 0 0;
  }
  .quickie-footnote {
    font-size: 0.9375rem;
    line-height: 1.7;
    max-width: 44rem;
    opacity: 0.7;
    margin: 2rem 0 0;
  }
  .quickie-number {
    display: block;
  }
  .quickie-pill {
    display: inline-block;
    padding: 0.625rem 1.375rem;
    border: 0.5px solid currentColor;
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    font-family: var(--font-body--family);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: none;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  .quickie-pill:hover,
  .quickie-pill:focus-visible {
    background-color: var(--color-foreground);
    color: var(--color-background);
  }
  .quickie-buy {
    display: inline-block;
  }
  /* In-cart state: dimmed "Added" at rest, "Remove" on
     hover/focus (assets/quickie-page.js swaps the spans in). */
  .quickie-buy button.quickie-pill[data-in-cart] {
    opacity: 0.55;
  }
  .quickie-buy button.quickie-pill[data-in-cart]:hover,
  .quickie-buy button.quickie-pill[data-in-cart]:focus-visible {
    opacity: 1;
  }
  .quickie-buy button[data-in-cart] .quickie-buy__remove {
    display: none;
  }
  .quickie-buy button[data-in-cart]:hover .quickie-buy__added,
  .quickie-buy button[data-in-cart]:focus-visible .quickie-buy__added {
    display: none;
  }
  .quickie-buy button[data-in-cart]:hover .quickie-buy__remove,
  .quickie-buy button[data-in-cart]:focus-visible .quickie-buy__remove {
    display: inline;
  }
  .quickie-buy button[disabled] {
    opacity: 0.55;
    cursor: default;
    background: none;
    color: inherit;
  }
  .quickie-arrow-cta {
    display: inline-block;
    margin-top: 2rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .quickie-arrow-cta__arrow {
    display: inline-block;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .quickie-arrow-cta:hover .quickie-arrow-cta__arrow,
  .quickie-arrow-cta:focus-visible .quickie-arrow-cta__arrow {
    transform: translateX(0.25rem);
  }
  /* Media frames: cover-cropped, on a faint ink wash while loading. */
  .quickie-gallery__item,
  .quickie-statement__media,
  .quickie-case__media,
  .quickie-about__media {
    margin: 0;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--color-foreground) 6%, var(--color-background));
  }
  .quickie-gallery__item img,
  .quickie-gallery__item video,
  .quickie-statement__media img,
  .quickie-statement__media video,
  .quickie-case__media img,
  .quickie-case__media video,
  .quickie-about__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .quickie-media--wide {
    aspect-ratio: 21 / 9;
  }
  /* Viewport-height frame (70svh), cover-cropped. */
  .quickie-media--viewport {
    aspect-ratio: auto;
    height: 70vh;
    height: 70svh;
  }
  /* Full-bleed media inside the content column: span the viewport and
     re-center. The section wrapper clips the few px of scrollbar
     overshoot (overflow: clip keeps the sticky panel working). */
  .quickie-media--full {
    width: 100vw;
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
  }
  .shopify-section:has(> .quickie) {
    overflow-x: clip;
  }
  .quickie-statement__heading + .quickie-media--full,
  .quickie-statement__body + .quickie-media--full,
  .quickie-statement__cta + .quickie-media--full {
    margin-top: 3.5rem;
  }
  .quickie-statement > .quickie-media--full:first-child {
    margin-top: 0;
  }
  /* Media with a quote laid over it. The frame grows taller than the
     21:9 crop so a long quote has room; the video still covers it. */
  .quickie-statement__media--quoted {
    position: relative;
    aspect-ratio: 16 / 9;
    max-height: 85svh;
    min-height: 34rem;
  }
  @media (max-width: 749px) {
    /* Phones: the overlay stays ON the video. The overlay is in flow
       (its text sets the frame's height, so the whole quote always
       fits) and the video sits absolutely behind it, cover-cropped. */
    .quickie-statement__media--quoted {
      aspect-ratio: auto;
      height: auto;
      min-height: 60svh;
    }
    .quickie-statement__media--quoted img,
    .quickie-statement__media--quoted video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      aspect-ratio: auto;
      object-fit: cover;
    }
  }
  .quickie-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: clamp(2rem, 6vw, 5rem) var(--page-margin);
    color: rgb(255 255 255);
  }
  @media (max-width: 749px) {
    .quickie-overlay {
      position: relative;
      inset: auto;
      min-height: 60svh;
      padding: 3.5rem var(--page-margin);
    }
    .quickie-overlay__quote p {
      font-size: 1.1875rem;
      line-height: 1.45;
    }
  }
  .quickie-overlay__scrim {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to bottom, rgb(0 0 0 / 0.15), rgb(0 0 0 / 0.55));
  }
  @media (max-width: 749px) {
    .quickie-overlay__scrim {
      background: rgb(0 0 0 / 0.55);
    }
  }
  .quickie-overlay__quote {
    position: relative;
    margin: 0;
    max-width: 52rem;
    text-align: center;
  }
  .quickie-overlay__quote p {
    font-family: var(--font-heading--family);
    letter-spacing: var(--font-heading--tracking);
    font-size: clamp(1.25rem, 2.1vw, 1.875rem);
    line-height: 1.4;
    margin: 0;
    text-wrap: balance;
  }
  .quickie-overlay__attribution {
    display: inline-block;
    margin-top: 1.5rem;
    opacity: 1;
  }
  /* Rise-in on reveal, after the media has faded. */
  html.js .quickie-overlay__quote {
    opacity: 0;
    transform: translateY(1rem);
    transition:
      opacity 1.2s ease 0.5s,
      transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.5s;
  }
  html.js .reveal--visible .quickie-overlay__quote {
    opacity: 1;
    transform: none;
  }
  @media (prefers-reduced-motion: reduce) {
    html.js .quickie-overlay__quote {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
  @media (max-width: 749px) {
    .quickie-media--wide {
      aspect-ratio: 4 / 3;
    }
  }

  /* 1 — PDP split: thumbnail gallery left, sticky buy panel right.
     The stage is deliberately shorter than the viewport so the panel
     (title, Book, add-ons, Included) reads above the fold beside it. */
  .quickie-pdp {
    display: grid;
    gap: 2.5rem;
  }
  @media (min-width: 990px) {
    .quickie-pdp {
      grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
      gap: 4rem;
      align-items: start;
    }
  }
  @media (min-width: 1200px) {
    .quickie-pdp {
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
      gap: 5rem;
    }
  }
  .quickie-gallery__stage {
    position: relative;
    aspect-ratio: 4 / 3;
    max-height: min(68vh, 40rem);
    width: 100%;
  }
  .quickie-gallery__slide {
    position: absolute;
    inset: 0;
    margin: 0;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--color-foreground) 6%, var(--color-background));
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s;
  }
  .quickie-gallery__slide.is-active {
    opacity: 1;
    visibility: visible;
  }
  .quickie-gallery__slide img,
  .quickie-gallery__slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .quickie-gallery__caption {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    margin: 0;
    padding: 0.375rem 0.625rem;
    background-color: var(--color-background);
    color: var(--color-foreground);
    opacity: 1;
  }
  .quickie-gallery__thumbs {
    display: flex;
    gap: 0.625rem;
    margin-top: 0.875rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .quickie-gallery__thumbs::-webkit-scrollbar {
    display: none;
  }
  .quickie-gallery__thumb {
    position: relative;
    flex: 0 0 auto;
    width: 4.5rem;
    aspect-ratio: 4 / 3;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    overflow: hidden;
    opacity: 0.55;
    outline-offset: 2px;
    transition: opacity 0.3s ease;
  }
  .quickie-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .quickie-gallery__thumb:hover,
  .quickie-gallery__thumb:focus-visible,
  .quickie-gallery__thumb.is-active {
    opacity: 1;
  }
  .quickie-gallery__thumb.is-active::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--color-foreground);
    pointer-events: none;
  }
  .quickie-gallery__thumb-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 1px solid rgb(255 255 255);
    background-color: rgb(0 0 0 / 0.35);
    transform: translate(-50%, -50%);
  }
  .quickie-gallery__thumb-play::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    border-style: solid;
    border-width: 0.2rem 0 0.2rem 0.3rem;
    border-color: transparent transparent transparent rgb(255 255 255);
    transform: translate(-35%, -50%);
  }

  /* Tablets: the buy panel leads. Phones: the gallery leads, the panel
     (eyebrow, title, Book…) follows it. */
  @media (min-width: 750px) and (max-width: 989px) {
    .quickie-panel {
      order: -1;
    }
  }
  @media (min-width: 990px) {
    .quickie-panel {
      position: sticky;
      /* Below the nav AND the strip, so it never slides under the strip. */
      top: calc(var(--header-height, 4.5rem) + var(--quickie-bar-height, 3.5rem) + 1.5rem);
    }
    .quickie-panel__inner {
      max-width: 32rem;
    }
  }
  .quickie-panel__eyebrow {
    margin: 0 0 1rem;
  }
  .quickie-panel__title {
    font-size: clamp(2rem, 3vw, 2.75rem);
    line-height: 1.05;
    margin: 0;
  }
  .quickie-panel__meta {
    margin: 1.25rem 0 0;
  }
  .quickie-panel__body {
    font-size: 1rem;
    line-height: 1.55;
    margin: 1.25rem 0 0;
  }
  .quickie-panel__cta {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: 1.5rem;
  }
  .quickie-panel__price {
    font-family: var(--font-heading--family);
    letter-spacing: var(--font-heading--tracking);
    font-size: 1.375rem;
  }
  .quickie-panel__small {
    font-size: 0.8125rem;
    opacity: 0.6;
    margin: 0.75rem 0 0;
  }

  /* Add-ons grid inside the panel. */
  .quickie-panel__addons {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid color-mix(in srgb, var(--color-foreground) 20%, transparent);
  }
  .quickie-panel__addons-label {
    margin: 0 0 0.75rem;
  }
  .quickie-addons {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
  }
  @media (min-width: 600px) {
    .quickie-addons {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 1.5rem;
    }
  }
  .quickie-addon {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
  }
  .quickie-addon__icon {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
  }
  .quickie-addon__icon img,
  .quickie-addon__icon svg {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
    object-fit: contain;
  }
  .quickie-addon__text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
  }
  .quickie-addon__name {
    font-size: 0.875rem;
    line-height: 1.3;
  }
  .quickie-addon__price {
    font-size: 0.6875rem;
  }
  .quickie-addon__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .quickie-addon__actions .quickie-pill {
    padding: 0.4rem 0.75rem;
    font-size: 0.625rem;
  }
  /* (i) — opens the add-on's details dialog. */
  .quickie-addon__info {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0.5px solid currentColor;
    border-radius: 50%;
    background: none;
    color: inherit;
    font-family: var(--font-heading--family);
    font-style: italic;
    font-size: 0.8125rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease;
  }
  .quickie-addon__info:hover,
  .quickie-addon__info:focus-visible {
    opacity: 1;
    background-color: var(--color-foreground);
    color: var(--color-background);
  }
  .quickie-panel__addons-note {
    font-size: 0.8125rem;
    line-height: 1.55;
    opacity: 0.65;
    margin: 0.875rem 0 0;
  }
  /* (i) popover: anchored above the button, right-aligned to it so it
     grows leftward into the panel; fades/rises in on hover or focus,
     stays pinned after a click (is-open). */
  .quickie-addon__infowrap {
    position: relative;
    display: inline-flex;
  }
  .quickie-addon__pop {
    position: absolute;
    bottom: calc(100% + 0.875rem);
    right: -0.25rem;
    z-index: 30;
    width: min(19rem, calc(100vw - 2 * var(--page-margin)));
    padding: 1.25rem 1.25rem 1.375rem;
    background-color: var(--color-background);
    color: var(--color-foreground);
    border: 1px solid color-mix(in srgb, var(--color-foreground) 15%, transparent);
    box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 0.14);
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.375rem);
    transition:
      opacity 0.3s ease,
      transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0.35s;
  }
  /* Caret under the box, pointing at the (i). */
  .quickie-addon__pop::after {
    content: '';
    position: absolute;
    right: 0.9rem;
    bottom: -0.4rem;
    width: 0.75rem;
    height: 0.75rem;
    background-color: var(--color-background);
    border-right: 1px solid color-mix(in srgb, var(--color-foreground) 15%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 15%, transparent);
    transform: rotate(45deg);
  }
  /* Invisible bridge so the cursor can travel from the (i) into the box. */
  .quickie-addon__pop::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1rem;
    height: 1rem;
  }
  .quickie-addon__infowrap:hover .quickie-addon__pop,
  .quickie-addon__infowrap:focus-within .quickie-addon__pop,
  .quickie-addon__infowrap.is-open .quickie-addon__pop {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .quickie-addon__infowrap.is-open .quickie-addon__info,
  .quickie-addon__infowrap:hover .quickie-addon__info {
    opacity: 1;
    background-color: var(--color-foreground);
    color: var(--color-background);
  }
  .quickie-addon__pop-icon {
    display: block;
    margin-bottom: 0.875rem;
  }
  .quickie-addon__pop-icon img,
  .quickie-addon__pop-icon svg {
    width: 2rem;
    height: 2rem;
    display: block;
  }
  .quickie-addon__pop-title {
    font-family: var(--font-heading--family);
    letter-spacing: var(--font-heading--tracking);
    font-size: 1.25rem;
    line-height: 1.2;
    margin: 0 0 0.375rem;
  }
  .quickie-addon__pop-price {
    margin: 0 0 0.75rem;
  }
  .quickie-addon__pop-body {
    font-size: 0.875rem;
    line-height: 1.55;
    margin: 0 0 1rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .quickie-addon__pop {
      transition: none;
    }
  }

  /* What's included — deliverable cards. */
  .quickie-included__eyebrow {
    margin: 0 0 1.25rem;
  }
  .quickie-included__lead {
    font-family: var(--font-heading--family);
    letter-spacing: var(--font-heading--tracking);
    font-size: clamp(1.375rem, 2.2vw, 1.875rem);
    line-height: 1.3;
    max-width: 30ch;
    margin: 1.5rem 0 0;
  }
  .quickie-included__list {
    list-style: none;
    margin: 3rem 0 0;
    padding: 0;
  }
  .quickie-included__row {
    position: relative;
    border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 20%, transparent);
    transition: opacity 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .quickie-included__row:first-child {
    border-top: 1px solid color-mix(in srgb, var(--color-foreground) 20%, transparent);
  }
  /* The ink highlight: a pill slightly wider than the row, hidden at
     rest, fading/scaling in on hover. */
  .quickie-included__row::before {
    content: '';
    position: absolute;
    inset: 0 -0.75rem;
    border-radius: 0.5rem;
    background-color: var(--color-foreground);
    opacity: 0;
    transform: scaleX(1.01);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
  }
  .quickie-included__row-inner {
    position: relative;
    display: grid;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 0 1.25rem;
  }
  @media (min-width: 750px) {
    .quickie-included__row-inner {
      grid-template-columns: 2fr 3fr;
      gap: 2rem;
      padding: 1.75rem 0;
    }
  }
  @media (min-width: 990px) {
    .quickie-included__row-inner {
      padding: 2rem 0;
    }
  }
  .quickie-included__title {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    font-family: var(--font-heading--family);
    letter-spacing: var(--font-heading--tracking);
    font-size: clamp(1.375rem, 1.9vw, 1.75rem);
    line-height: 1.2;
    margin: 0;
    transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), color 0.5s ease;
  }
  .quickie-included__index {
    opacity: 0.45;
    flex-shrink: 0;
  }
  .quickie-included__desc {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: color-mix(in srgb, var(--color-foreground) 60%, transparent);
    margin: 0;
    transition: color 0.5s ease;
  }
  /* Hover (fine pointers): highlighted row goes ink/cream, others dim. */
  @media (any-pointer: fine) {
    .quickie-included__list:has(.quickie-included__row:hover) .quickie-included__row {
      opacity: 0.4;
    }
    .quickie-included__row:hover {
      opacity: 1 !important; /* outranks the sibling-dim rule above */
      color: var(--color-background);
    }
    .quickie-included__row:hover::before {
      opacity: 1;
      transform: scale(1);
    }
    .quickie-included__row:hover .quickie-included__title {
      transform: translateX(1rem);
    }
    .quickie-included__row:hover .quickie-included__desc {
      color: color-mix(in srgb, var(--color-background) 70%, transparent);
    }
  }
  .quickie-included__foot {
    display: grid;
    gap: 1.5rem;
    margin-top: 2.5rem;
  }
  @media (min-width: 990px) {
    .quickie-included__foot {
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
      gap: 4rem;
      align-items: start;
    }
  }
  .quickie-included__foot .quickie-footnote {
    margin: 0;
  }
  .quickie-included__note p {
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0 0 1rem;
  }
  /* Secondary pill: hairline, quieter than the Book pill. */
  .quickie-pill--secondary {
    border-color: color-mix(in srgb, currentColor 45%, transparent);
  }

  /* 3 — Editorial flow. */

  /* How it works — timeline. Desktop: four columns along a horizontal
     track; phones: a vertical track down the left. Once the block is
     revealed (.reveal--visible from scroll-effects.js) the track draws
     itself and the nodes/steps arrive in sequence. */
  .quickie-process__eyebrow {
    margin: 0 0 1.25rem;
  }
  .quickie-timeline {
    --node: 0.875rem;
    position: relative;
    list-style: none;
    margin: 3.5rem 0 0;
    padding: 0;
    display: grid;
    gap: 2.5rem;
  }
  .quickie-timeline__track {
    position: absolute;
    background-color: color-mix(in srgb, var(--color-foreground) 30%, transparent);
    transform-origin: left top;
  }
  .quickie-timeline__step {
    position: relative;
  }
  .quickie-timeline__node {
    position: absolute;
    width: var(--node);
    height: var(--node);
    border-radius: 50%;
    border: 1px solid var(--color-foreground);
    background-color: var(--color-background);
    transition: background-color 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .quickie-timeline__step:hover .quickie-timeline__node {
    background-color: var(--color-foreground);
    transform: scale(1.25);
  }
  .quickie-timeline__when {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 0 0.875rem;
  }
  .quickie-timeline__index {
    opacity: 0.5;
  }
  .quickie-timeline__sep {
    opacity: 0.4;
  }
  .quickie-timeline__title {
    font-size: clamp(1.375rem, 1.8vw, 1.625rem);
    line-height: 1.2;
    margin: 0 0 0.75rem;
  }
  .quickie-timeline__body {
    font-size: 0.9375rem;
    line-height: 1.6;
    opacity: 0.8;
    margin: 0;
    max-width: 30ch;
  }
  /* Phones / tablets: vertical. */
  @media (max-width: 989px) {
    .quickie-timeline {
      padding-left: 2.25rem;
    }
    .quickie-timeline__track {
      top: 0.25rem;
      bottom: 0.25rem;
      left: calc(var(--node) / 2);
      width: 1px;
    }
    .quickie-timeline__node {
      top: 0.125rem;
      left: calc(-2.25rem + 0.5px);
      transform: translateX(-50%);
    }
    .quickie-timeline__step:hover .quickie-timeline__node {
      transform: translateX(-50%) scale(1.25);
    }
  }
  /* Desktop: horizontal. */
  @media (min-width: 990px) {
    .quickie-timeline {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 3rem;
      padding-top: calc(var(--node) + 1.75rem);
    }
    .quickie-timeline__track {
      top: calc(var(--node) / 2);
      left: 0;
      right: 0;
      height: 1px;
    }
    .quickie-timeline__node {
      top: calc(-1 * (var(--node) + 1.75rem));
      left: 0;
    }
  }
  /* Draw-in choreography (JS-gated via html.js so no-JS visitors see it
     static; reduced motion below). */
  html.js .quickie-timeline__track {
    transform: scaleX(0);
    transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
  }
  @media (max-width: 989px) {
    html.js .quickie-timeline__track {
      transform: scaleY(0);
    }
  }
  html.js .quickie-timeline__node,
  html.js .quickie-timeline__content {
    opacity: 0;
    transition:
      opacity 0.8s ease calc(0.35s + var(--i) * 0.28s),
      transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) calc(0.35s + var(--i) * 0.28s);
  }
  html.js .quickie-timeline__content {
    transform: translateY(0.75rem);
  }
  html.js .quickie-process.reveal--visible .quickie-timeline__track {
    transform: none;
  }
  html.js .quickie-process.reveal--visible .quickie-timeline__node,
  html.js .quickie-process.reveal--visible .quickie-timeline__content {
    opacity: 1;
    transform: none;
  }
  @media (max-width: 989px) {
    html.js .quickie-process.reveal--visible .quickie-timeline__node {
      transform: translateX(-50%);
    }
  }
  .quickie-process__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-top: 3rem;
  }
  .quickie-process__cta-note {
    font-size: 0.9375rem;
    opacity: 0.8;
    margin: 0;
  }
  @media (prefers-reduced-motion: reduce) {
    html.js .quickie-timeline__track,
    html.js .quickie-timeline__node,
    html.js .quickie-timeline__content {
      opacity: 1;
      transform: none;
      transition: none;
    }
    .quickie-timeline__node {
      transition: none;
    }
  }

  /* "What you leave with" — four tall white tiles: a big stat top-left,
     title + body pinned to the bottom (ref: the impact cards). */
  .quickie-gains__items {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: grid;
    gap: 1rem;
  }
  @media (min-width: 600px) {
    .quickie-gains__items {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 990px) {
    .quickie-gains__items {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1.25rem;
    }
  }
  .quickie-gains__tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 3rem;
    min-height: 24rem;
    padding: 2rem 1.75rem 2rem;
    background-color: #ffffff;
    border-radius: 0.75rem;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  @media (min-width: 990px) {
    .quickie-gains__tile {
      min-height: 28rem;
    }
  }
  .quickie-gains__tile:hover {
    transform: translateY(-1px);
  }
  .quickie-gains__stat {
    display: block;
    font-family: var(--font-body--family);
    font-size: clamp(3.5rem, 5.5vw, 5.5rem);
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .quickie-gains__arrow {
    display: block;
    width: 0.9em;
    height: 0.9em;
  }
  .quickie-gains__title {
    font-family: var(--font-body--family);
    letter-spacing: var(--font-body--tracking);
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.35;
    margin: 0 0 0.625rem;
  }
  .quickie-gains__body {
    font-size: 0.9375rem;
    line-height: 1.55;
    opacity: 0.65;
    margin: 0;
  }
  /* Tiles rise in one after another on reveal. */
  html.js .quickie-gains__tile {
    opacity: 0;
    transform: translateY(1rem);
    transition:
      opacity 0.9s ease calc(0.15s + var(--i) * 0.12s),
      transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) calc(0.15s + var(--i) * 0.12s);
  }
  html.js .quickie-gains.reveal--visible .quickie-gains__tile {
    opacity: 1;
    transform: none;
  }
  html.js .quickie-gains.reveal--visible .quickie-gains__tile:hover {
    transform: translateY(-1px);
  }
  @media (prefers-reduced-motion: reduce) {
    html.js .quickie-gains__tile {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
  .quickie-gains__subheading {
    margin: 3rem 0 0;
  }
  /* Video under the tiles: inset from the column edges, 16:9. */
  .quickie-gains__video {
    margin-top: 4rem;
    padding-inline: clamp(1rem, 8vw, 7rem);
  }
  .quickie-gains__video-heading {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.15;
    max-width: 24ch;
    margin: 0;
  }
  .quickie-gains__video-subheading {
    font-size: 1.0625rem;
    line-height: 1.5;
    max-width: 52ch;
    opacity: 0.7;
    margin: 0.75rem 0 0;
  }
  .quickie-gains__video-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    margin: 0;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--color-foreground) 6%, var(--color-background));
  }
  .quickie-gains__video-heading + .quickie-gains__video-frame,
  .quickie-gains__video-subheading + .quickie-gains__video-frame {
    margin-top: 1.75rem;
  }
  .quickie-gains__video-frame img,
  .quickie-gains__video-frame video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .quickie-statement__eyebrow {
    margin: 0 0 1.5rem;
  }
  .quickie-statement__heading {
    font-size: clamp(2rem, 3.8vw, 3.25rem);
    line-height: 1.15;
    max-width: 22ch;
    margin: 0;
  }
  .quickie-statement--centered {
    text-align: center;
  }
  .quickie-statement--centered .quickie-statement__heading {
    font-size: clamp(2.5rem, 5.5vw, 4.75rem);
    line-height: 1.05;
    max-width: 20ch;
    margin-inline: auto;
  }
  .quickie-statement__body {
    font-size: 1.0625rem;
    line-height: 1.65;
    max-width: 40rem;
    margin: 2rem 0 0;
  }
  .quickie-statement--centered .quickie-statement__body {
    margin-inline: auto;
  }
  .quickie-statement__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-top: 2.25rem;
  }
  /* Inverted statement: a full-bleed ink band, content on the page
     grid (same viewport-span trick as .quickie-media--full). */
  .quickie-statement--inverted {
    width: 100vw;
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
    padding: clamp(4rem, 9vh, 6.5rem) var(--page-margin);
    background-color: var(--color-foreground);
    color: var(--color-background);
  }
  .quickie-statement--inverted > * {
    max-width: min(var(--page-width) - var(--page-margin) * 2, 100%);
    margin-inline: auto;
  }
  .quickie-statement--inverted .quickie-statement__heading,
  .quickie-statement--inverted .quickie-statement__body {
    margin-inline: auto;
  }
  .quickie-statement--inverted .quickie-pill:hover,
  .quickie-statement--inverted .quickie-pill:focus-visible {
    background-color: var(--color-background);
    color: var(--color-foreground);
  }
  .quickie-statement--inverted .eyebrow {
    opacity: 0.7;
  }
  /* Showcase: ink band, copy left, 16:9 click-through carousel right. */
  .quickie-showcase {
    width: 100vw;
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
    padding: clamp(4rem, 9vh, 6.5rem) var(--page-margin);
    background-color: var(--color-foreground);
    color: var(--color-background);
    display: grid;
    gap: 3rem;
    align-items: center;
  }
  @media (min-width: 990px) {
    .quickie-showcase {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      gap: 4rem;
    }
  }
  @media (min-width: 1200px) {
    .quickie-showcase {
      gap: 6rem;
      padding-inline: max(var(--page-margin), (100vw - var(--page-width)) / 2 + var(--page-margin));
    }
  }
  .quickie-showcase__eyebrow {
    opacity: 0.7;
    margin: 0 0 1.25rem;
  }
  .quickie-showcase__heading {
    font-size: clamp(1.875rem, 3vw, 2.75rem);
    line-height: 1.12;
    max-width: none;
    margin: 0;
  }
  .quickie-showcase__body {
    font-size: 1rem;
    line-height: 1.6;
    max-width: 34rem;
    opacity: 0.85;
    margin: 1.5rem 0 0;
  }
  .quickie-showcase__cta {
    margin-top: 2rem;
  }
  .quickie-showcase .quickie-pill:hover,
  .quickie-showcase .quickie-pill:focus-visible {
    background-color: var(--color-background);
    color: var(--color-foreground);
  }
  .quickie-showcase__carousel {
    min-width: 0;
  }
  .quickie-showcase__track {
    position: relative;
    aspect-ratio: 16 / 9;
  }
  .quickie-showcase__slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(1.5rem);
    transition:
      opacity 0.5s ease,
      transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0.6s;
  }
  .quickie-showcase__slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .quickie-showcase__slide.is-leaving-back {
    transform: translateX(-1.5rem);
  }
  .quickie-showcase__media {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgb(255 255 255 / 0.06);
  }
  .quickie-showcase__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .quickie-showcase__caption {
    position: absolute;
    left: 0;
    top: calc(100% + 0.875rem);
    margin: 0;
    opacity: 0.7;
  }
  /* Sound toggle on the active slide (same look as the site's Listen
     pill, but bound per-carousel so only one slide sounds). */
  .quickie-showcase__sound {
    position: absolute;
    right: 0.875rem;
    bottom: 0.875rem;
    padding: 0.4375rem 0.8125rem;
    border: 1px solid rgb(255 255 255 / 0.7);
    border-radius: 999px;
    background-color: rgb(0 0 0 / 0.4);
    color: rgb(255 255 255);
    font-family: var(--font-body--family);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
  }
  .quickie-showcase__sound:hover,
  .quickie-showcase__sound:focus-visible,
  .quickie-showcase__sound[aria-pressed='true'] {
    background-color: rgb(255 255 255);
    color: rgb(0 0 0);
  }
  .quickie-showcase__nav {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: 2.75rem;
  }
  .quickie-showcase__arrow {
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgb(255 255 255 / 0.5);
    border-radius: 50%;
    background: none;
    color: inherit;
    font-family: var(--font-body--family);
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  }
  .quickie-showcase__arrow:hover,
  .quickie-showcase__arrow:focus-visible {
    background-color: var(--color-background);
    color: var(--color-foreground);
    border-color: var(--color-background);
  }
  .quickie-showcase__dots {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
  }
  .quickie-showcase__dot {
    width: 0.4375rem;
    height: 0.4375rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgb(255 255 255 / 0.35);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
  }
  .quickie-showcase__dot.is-active {
    background-color: rgb(255 255 255);
    transform: scale(1.3);
  }
  .quickie-showcase__count {
    opacity: 0.7;
    white-space: nowrap;
  }
  @media (max-width: 749px) {
    .quickie-showcase__count {
      display: none;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .quickie-showcase__slide,
    .quickie-showcase__arrow,
    .quickie-showcase__dot {
      transition: none;
    }
  }

  /* Split statement: text left, a trio of vertical reels right. */
  .quickie-statement--split {
    display: grid;
    gap: 2.5rem;
    align-items: center;
  }
  @media (min-width: 990px) {
    .quickie-statement--split {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      gap: 4rem;
    }
  }
  .quickie-statement--split .quickie-statement__media {
    grid-column: 1 / -1;
  }
  .quickie-statement__trio {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: stretch;
  }
  @media (min-width: 990px) {
    .quickie-statement__trio {
      gap: 1rem;
    }
  }
  .quickie-statement__reel {
    margin: 0;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--color-foreground) 6%, var(--color-background));
  }
  .quickie-statement__reel img,
  .quickie-statement__reel video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .quickie-statement__media {
    margin-top: 3.5rem;
  }

  .quickie-quote {
    margin: 0;
    text-align: center;
  }
  .quickie-quote__text {
    font-family: var(--font-heading--family);
    letter-spacing: var(--font-heading--tracking);
    font-size: clamp(1.5rem, 2.6vw, 2.25rem);
    line-height: 1.35;
    max-width: 30ch;
    margin: 0 auto;
  }
  .quickie-quote__attribution {
    margin-top: 1.75rem;
  }
  .quickie-quotes__grid {
    display: grid;
    gap: 2.5rem;
  }
  @media (min-width: 750px) {
    .quickie-quotes__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 3rem;
    }
  }
  .quickie-quotes__item {
    margin: 0;
    padding-top: 1.5rem;
    border-top: 1px solid color-mix(in srgb, var(--color-foreground) 25%, transparent);
  }
  .quickie-quotes__item p {
    font-family: var(--font-heading--family);
    letter-spacing: var(--font-heading--tracking);
    font-size: 1.25rem;
    line-height: 1.4;
    margin: 0 0 1rem;
  }

  /* Lists: heading left, items right (two-column editorial). */
  .quickie-list {
    display: grid;
    gap: 2rem;
  }
  @media (min-width: 990px) {
    .quickie-list {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      gap: 4rem;
    }
  }
  .quickie-list__items {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 1.0625rem;
    line-height: 1.5;
  }
  .quickie-list__items li {
    padding: 0.875rem 0;
    border-top: 1px solid color-mix(in srgb, var(--color-foreground) 20%, transparent);
  }
  .quickie-list__items li:last-child {
    border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 20%, transparent);
  }
  /* Inverted list: full-bleed ink band (viewport-span trick), heading
     pinned left while the lines read down the right. */
  .quickie-list--inverted {
    width: 100vw;
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
    padding: clamp(4.5rem, 10vh, 7.5rem) var(--page-margin);
    background-color: var(--color-foreground);
    color: var(--color-background);
    align-items: start;
  }
  @media (min-width: 990px) {
    .quickie-list--inverted {
      column-gap: 6rem;
    }
    .quickie-list--inverted .quickie-list__head {
      position: sticky;
      top: calc(var(--header-height, 4.5rem) + var(--quickie-bar-height, 3.5rem) + 2rem);
    }
  }
  .quickie-list--inverted .quickie-heading {
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    max-width: 14ch;
  }
  .quickie-list--inverted .quickie-list__items li {
    position: relative;
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    align-items: baseline;
    gap: 1rem;
    padding: 1.375rem 0;
    border-top: 1px solid rgb(255 255 255 / 0.22);
    transition: opacity 0.25s cubic-bezier(0.215, 0.61, 0.355, 1), color 0.5s ease;
  }
  /* Hover highlight (same idiom as What's Included, in the brand light):
     a cream pill fills the row, text goes ink, the line nudges right and
     the other rows dim. */
  .quickie-list--inverted .quickie-list__items li::before {
    content: '';
    position: absolute;
    inset: 0 -0.75rem;
    border-radius: 0.5rem;
    background-color: var(--color-background);
    opacity: 0;
    transform: scaleX(1.01);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
  }
  .quickie-list--inverted .quickie-list__items li > * {
    position: relative;
    transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.5s ease;
  }
  @media (any-pointer: fine) {
    .quickie-list--inverted .quickie-list__items:has(li:hover) li {
      opacity: 0.4;
    }
    .quickie-list--inverted .quickie-list__items li:hover {
      opacity: 1 !important;
      color: var(--color-foreground);
    }
    .quickie-list--inverted .quickie-list__items li:hover::before {
      opacity: 1;
      transform: scale(1);
    }
    .quickie-list--inverted .quickie-list__items li:hover .quickie-list__item-text {
      transform: translateX(1rem);
    }
    .quickie-list--inverted .quickie-list__items li:hover .quickie-list__index {
      opacity: 0.6;
      transform: translateX(1rem);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .quickie-list--inverted .quickie-list__items li,
    .quickie-list--inverted .quickie-list__items li::before,
    .quickie-list--inverted .quickie-list__items li > * {
      transition: none;
    }
  }
  .quickie-list--inverted .quickie-list__items li:last-child {
    border-bottom: 1px solid rgb(255 255 255 / 0.22);
  }
  .quickie-list--inverted .quickie-list__index {
    opacity: 0.5;
  }
  .quickie-list--inverted .quickie-list__item-text {
    font-family: var(--font-heading--family);
    letter-spacing: var(--font-heading--tracking);
    font-size: clamp(1.375rem, 2.1vw, 1.875rem);
    line-height: 1.3;
    text-wrap: balance;
  }
  .quickie-list--inverted .quickie-footnote {
    opacity: 0.7;
    margin-top: 2.5rem;
  }
  .quickie-list--inverted .eyebrow {
    opacity: 0.7;
  }
  /* Lines arrive one after another once the band is revealed. */
  html.js .quickie-list--inverted .quickie-list__items li {
    opacity: 0;
    transform: translateY(0.75rem);
    transition:
      opacity 0.9s ease calc(0.2s + var(--i) * 0.14s),
      transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) calc(0.2s + var(--i) * 0.14s);
  }
  html.js .quickie-list--inverted.reveal--visible .quickie-list__items li {
    opacity: 1;
    transform: none;
  }
  @media (prefers-reduced-motion: reduce) {
    html.js .quickie-list--inverted .quickie-list__items li {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

  .quickie-case__text {
    margin-top: 3rem;
  }
  .quickie-case__eyebrow {
    margin: 0 0 1.5rem;
  }
  .quickie-case__quote {
    margin: 0;
  }
  .quickie-case__quote p {
    font-family: var(--font-heading--family);
    letter-spacing: var(--font-heading--tracking);
    font-size: clamp(1.5rem, 2.6vw, 2.25rem);
    line-height: 1.35;
    max-width: 30ch;
    margin: 0 0 1.25rem;
  }
  .quickie-case__cols {
    display: grid;
    gap: 2rem 4rem;
    margin-top: 3rem;
  }
  @media (min-width: 750px) {
    .quickie-case__cols {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .quickie-case__cols p {
    font-size: 1.0625rem;
    line-height: 1.6;
    margin: 0.5rem 0 0;
  }
  .quickie-case__cols .eyebrow {
    margin: 0;
  }

  /* Real-time reactions grid. */
  .quickie-reactions__eyebrow {
    margin: 0 0 1.25rem;
  }
  .quickie-reactions__grid {
    list-style: none;
    margin: 2.5rem 0 0;
    padding: 0;
    display: grid;
    gap: 1.5rem;
  }
  @media (min-width: 750px) {
    .quickie-reactions__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 990px) {
    .quickie-reactions__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1.5rem 1.25rem;
    }
  }
  /* Carousel: one horizontal row of cards that scrolls sideways with
     snap points; the row bleeds to the viewport edges so the last card
     peeks in from the right. */
  .quickie-reactions__grid--carousel {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    width: 100vw;
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
    padding-inline: var(--page-margin);
    scroll-padding-inline: var(--page-margin);
    cursor: grab;
  }
  .quickie-reactions__grid--carousel::-webkit-scrollbar {
    display: none;
  }
  .quickie-reactions__grid--carousel.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
  }
  .quickie-reactions__grid--carousel .quickie-reaction {
    flex: 0 0 auto;
    width: clamp(14rem, 22vw, 19rem);
    scroll-snap-align: start;
  }
  @media (max-width: 749px) {
    .quickie-reactions__grid--carousel .quickie-reaction {
      width: 68vw;
    }
  }
  .quickie-reaction {
    position: relative;
  }
  .quickie-reaction__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background-color: var(--color-foreground);
  }
  .quickie-reactions__grid--portrait .quickie-reaction__media {
    aspect-ratio: 4 / 5;
  }
  .quickie-reactions__grid--reel .quickie-reaction__media {
    aspect-ratio: 9 / 16;
  }
  .quickie-reactions__grid--square .quickie-reaction__media {
    aspect-ratio: 1;
  }
  .quickie-reaction__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* The whole card is the play/pause control. */
  .quickie-reaction__toggle {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    padding: 1.25rem;
    border: 0;
    background: none;
    color: rgb(255 255 255);
    text-align: left;
    cursor: pointer;
    font: inherit;
  }
  .quickie-reaction__scrim {
    position: absolute;
    inset: 0;
    background-color: rgb(0 0 0 / 0.45);
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  .quickie-reaction__quote {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.25rem;
    opacity: 0;
    transform: translateY(0.5rem);
    transition:
      opacity 0.45s ease,
      transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .quickie-reaction__quote-text {
    font-family: var(--font-heading--family);
    letter-spacing: var(--font-heading--tracking);
    font-size: 1.125rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .quickie-reaction__attribution {
    opacity: 0.85;
  }
  .quickie-reaction__play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    border: 1px solid rgb(255 255 255);
    background-color: rgb(0 0 0 / 0.3);
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .quickie-reaction__play::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    border-style: solid;
    border-width: 0.45rem 0 0.45rem 0.75rem;
    border-color: transparent transparent transparent rgb(255 255 255);
    transform: translate(-40%, -50%);
  }
  /* Hover / focus: dim the video and bring the quote up. */
  .quickie-reaction:hover .quickie-reaction__scrim,
  .quickie-reaction:focus-within .quickie-reaction__scrim {
    opacity: 1;
  }
  .quickie-reaction:hover .quickie-reaction__quote,
  .quickie-reaction:focus-within .quickie-reaction__quote {
    opacity: 1;
    transform: none;
  }
  .quickie-reaction:hover .quickie-reaction__play,
  .quickie-reaction:focus-within .quickie-reaction__play {
    transform: translate(-50%, -50%) scale(1.06);
  }
  /* Playing: video clean, play glyph hidden, quote hidden even on hover. */
  .quickie-reaction.is-playing .quickie-reaction__scrim,
  .quickie-reaction.is-playing .quickie-reaction__quote,
  .quickie-reaction.is-playing .quickie-reaction__play {
    opacity: 0;
    transform: none;
  }
  .quickie-reaction__toggle:focus-visible {
    outline: 2px solid rgb(255 255 255);
    outline-offset: -4px;
  }
  .quickie-reaction__caption {
    margin: 0.75rem 0 0;
  }
  @media (prefers-reduced-motion: reduce) {
    .quickie-reaction__scrim,
    .quickie-reaction__quote,
    .quickie-reaction__play {
      transition: none;
    }
  }

  /* Before / after — section head: eyebrow + big serif heading + lead
     on the left, a small right-aligned aside on the right. */
  .quickie-ba-head {
    display: grid;
    gap: 1.5rem;
    align-items: start;
  }
  @media (min-width: 750px) {
    .quickie-ba-head {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 3rem;
    }
  }
  .quickie-ba-head__eyebrow {
    margin: 0 0 1.25rem;
  }
  .quickie-ba-head__heading {
    font-size: clamp(2.5rem, 4.6vw, 4rem);
    line-height: 1.02;
    margin: 0;
  }
  .quickie-ba-head__lead {
    font-size: 1.0625rem;
    line-height: 1.55;
    max-width: 30rem;
    opacity: 0.8;
    margin: 1.25rem 0 0;
  }
  .quickie-ba-head__aside {
    margin: 0.5rem 0 0;
    text-align: right;
    line-height: 1.9;
    opacity: 0.55;
  }
  @media (max-width: 749px) {
    .quickie-ba-head__aside {
      text-align: left;
    }
  }

  /* Each case is one full-width row; on desktop the row is sticky inside
     .quickie-ba-pin, whose extra height (--ba-travel) is the scroll budget
     that scrubs the divider (assets/quickie-page.js sets --pin-height /
     --pin-top from measurements). */
  .quickie-ba-row {
    display: block;
  }
  .quickie-ba {
    width: 100%;
    min-width: 0;
  }
  /* The pin collapse (assets/quickie-page.js → releasePin) adjusts the
     scroll position itself; browser scroll anchoring would correct it a
     second time and snap the page back, so it's off on this page. */
  html:has(.quickie-ba-pin) {
    overflow-anchor: none;
  }
  /* All widths (phones included): the row pins while the divider sweeps. */
  html.js .quickie-ba-pin {
    --ba-travel: 70vh;
    height: var(--pin-height, auto);
  }
  html.js .quickie-ba-pin .quickie-ba-row {
    position: sticky;
    top: var(--pin-top, 0px);
  }
  @media (prefers-reduced-motion: reduce) {
    html.js .quickie-ba-pin {
      height: auto;
    }
    html.js .quickie-ba-pin .quickie-ba-row {
      position: static;
    }
  }
  /* Meta line: 01 — CATEGORY … CLIENT */
  .quickie-ba__meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1.25rem;
    opacity: 1;
  }
  .quickie-ba__index {
    font-family: var(--font-body--family);
    font-size: 0.9375rem;
    letter-spacing: 0;
    text-transform: none;
  }
  .quickie-ba__rule {
    width: 2rem;
    height: 1px;
    background-color: color-mix(in srgb, var(--color-foreground) 30%, transparent);
  }
  .quickie-ba__category,
  .quickie-ba__client {
    opacity: 0.7;
  }
  .quickie-ba__client {
    margin-left: auto;
  }
  /* Before / After copy: two columns aligned to the frame's edges, an
     arrow + vertical hairline between them. */
  .quickie-ba__cols {
    display: grid;
    gap: 1.5rem;
    margin-top: 1.25rem;
  }
  @media (min-width: 750px) {
    .quickie-ba__cols {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 2.5rem;
      align-items: start;
    }
  }
  .quickie-ba__col {
    padding: 0;
    border: 0;
  }
  .quickie-ba__cols .eyebrow {
    margin: 0 0 0.5rem;
    opacity: 0.7;
  }
  .quickie-ba__cols p {
    font-size: 0.875rem;
    line-height: 1.5;
    max-width: 34rem;
    margin: 0;
  }
  .quickie-ba__cols .quickie-ba__col p:last-child {
    opacity: 0.8;
  }
  /* from → to summary */
  .quickie-ba__summary {
    margin: 1.5rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--color-foreground) 18%, transparent);
    text-align: left;
    opacity: 0.55;
  }
  .quickie-ba__summary-arrow {
    display: inline-block;
    margin: 0 0.75rem;
  }
  .quickie-ba__quote + .quickie-ba__frame,
  .quickie-ba__heading + .quickie-ba__frame,
  .quickie-ba__eyebrow + .quickie-ba__frame {
    margin-top: 2.5rem;
  }
  .quickie-ba__frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background-color: color-mix(in srgb, var(--color-foreground) 6%, var(--color-background));
    user-select: none;
    -webkit-user-select: none;
  }
  .quickie-ba__frame--wide {
    aspect-ratio: 1.9 / 1;
    max-height: 60vh;
    width: 100%;
  }
  .quickie-ba__frame--square {
    aspect-ratio: 1;
  }
  @media (max-width: 749px) {
    .quickie-ba__frame,
    .quickie-ba__frame--wide {
      aspect-ratio: 4 / 3;
    }
  }
  .quickie-ba__layer {
    position: absolute;
    inset: 0;
  }
  .quickie-ba__layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* BEFORE fills the frame; AFTER is revealed from the left edge up to
     --pos (0 = all before, 100 = all after). */
  .quickie-ba__layer--after {
    clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
    will-change: clip-path;
  }
  .quickie-ba__divider {
    will-change: left;
  }
  .quickie-ba__label {
    position: absolute;
    bottom: 1rem;
    padding: 0.5rem 0.75rem;
    opacity: 1;
  }
  /* BEFORE tag pinned to the frame's bottom-left corner — on the
     frame, not the layer, so it stays put while the divider sweeps. */
  .quickie-ba__label {
    left: 1rem;
    z-index: 2;
    display: grid;
    background-color: var(--color-foreground);
    color: rgb(255 255 255);
    transition: background-color 0.4s ease, color 0.4s ease;
  }
  /* Both words stacked in one cell, each centered (the chip is sized by
     the longer word); the inactive one fades out. */
  .quickie-ba__label-text {
    grid-area: 1 / 1;
    text-align: center;
    justify-self: center;
    transition: opacity 0.4s ease;
  }
  .quickie-ba__label-text--after {
    opacity: 0;
  }
  .quickie-ba__frame[data-half='after'] .quickie-ba__label {
    background-color: var(--color-background);
    color: var(--color-foreground);
  }
  .quickie-ba__frame[data-half='after'] .quickie-ba__label-text--before {
    opacity: 0;
  }
  .quickie-ba__frame[data-half='after'] .quickie-ba__label-text--after {
    opacity: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .quickie-ba__label,
    .quickie-ba__label-text {
      transition: none;
    }
  }
  .quickie-ba__divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos, 50%);
    width: 1px;
    background-color: var(--color-background);
    transform: translateX(-50%);
    pointer-events: none;
  }
  .quickie-ba__handle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    border: 1px solid var(--color-background);
    background-color: color-mix(in srgb, var(--color-foreground) 35%, transparent);
    transform: translate(-50%, -50%);
  }
  .quickie-ba__handle::before,
  .quickie-ba__handle::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 0.3rem;
    height: 0.3rem;
    border-top: 1px solid var(--color-background);
    border-left: 1px solid var(--color-background);
  }
  .quickie-ba__handle::before {
    left: 0.5rem;
    transform: translateY(-50%) rotate(-45deg);
  }
  .quickie-ba__handle::after {
    right: 0.5rem;
    transform: translateY(-50%) rotate(135deg);
  }
  /* Invisible full-size range input drives --pos (keyboard + drag). */
  .quickie-ba__range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    -webkit-appearance: none;
    appearance: none;
    background: none;
  }
  .quickie-ba__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 3rem;
    height: 100%;
  }
  .quickie-ba__range::-moz-range-thumb {
    width: 3rem;
    height: 100%;
    border: 0;
    background: none;
  }
  .quickie-ba__frame:has(.quickie-ba__range:focus-visible) {
    outline: 2px solid var(--color-foreground);
    outline-offset: 3px;
  }
  .quickie-ba__caption {
    margin: 1rem 0 0;
  }

  /* About: full-bleed row with the photo flush to the LEFT edge of the
     viewport and butted up against the (ink) band above — the page gap
     is cancelled with a negative margin; the copy keeps the page
     margin on the right. */
  .quickie-about {
    display: grid;
    gap: 2.5rem;
    width: 100vw;
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
    padding-right: var(--page-margin);
  }
  /* Inverted: ink band, cream text; the photo still runs flush left. */
  .quickie-about--inverted {
    background-color: var(--color-foreground);
    color: var(--color-background);
    padding-block: clamp(3rem, 8vh, 6rem);
  }
  .quickie-about--inverted .quickie-arrow-cta {
    color: inherit;
  }
  /* Ink About band → the full-bleed quote video below it: touch. */
  .quickie-about--inverted + .quickie-statement:has(> .quickie-media--full:first-child) {
    margin-top: calc(-1 * var(--quickie-gap));
  }
  /* Ink "Built for" band → the closing image band: touch. */
  .quickie-list--inverted + .quickie-final--media {
    margin-top: calc(-1 * var(--quickie-gap));
  }
  @media (max-width: 989px) {
    .quickie-about {
      padding-left: var(--page-margin);
    }
  }
  @media (min-width: 990px) {
    .quickie-about {
      /* Photo column = the page's left edge + the FAQ text width
         (52rem, or the content width when narrower), so the photo's
         right edge lines up with the FAQ column below. */
      --edge: max(var(--page-margin), (100vw - var(--page-width)) / 2);
      --faq-width: min(52rem, 100vw - 2 * var(--edge));
      grid-template-columns: calc(var(--edge) + var(--faq-width)) minmax(0, 1fr);
      gap: 3.5rem;
      align-items: center;
    }
    .quickie-about__text {
      padding-block: 3rem;
    }
  }
  /* The photo keeps its own aspect ratio (no crop) with margin around
     it inside the band. */
  .quickie-about__media {
    margin: clamp(1.5rem, 4vw, 3.5rem);
  }
  @media (max-width: 989px) {
    .quickie-about__media {
      margin-inline: 0;
      margin-bottom: 0;
    }
  }
  .quickie-about__media img {
    height: auto;
    object-fit: contain;
  }
  .quickie-about__body p {
    font-size: 1.0625rem;
    line-height: 1.65;
    max-width: 40rem;
    margin: 1.5rem 0 0;
  }

  /* FAQ: heading left (sticky while the list scrolls), accordions
     right. The heading's cap-height is nudged to line up with the top
     of the first question's text. */
  .quickie-faq {
    display: grid;
    gap: 2rem;
    align-items: start;
  }
  @media (min-width: 990px) {
    .quickie-faq {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      gap: 4rem;
    }
    .quickie-faq__head {
      position: sticky;
      top: calc(var(--header-height, 4.5rem) + var(--quickie-bar-height, 3.5rem) + 2rem);
      /* first question: 1px rule + 1.125rem padding above its text;
         heading line-height 1.1 on ~2.75rem adds ~0.14rem above the cap */
      padding-top: calc(1px + 1.125rem - 0.2rem);
    }
  }
  .quickie-faq__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
  .quickie-faq__head .quickie-heading {
    line-height: 1.1;
  }
  .quickie-faq__head .quickie-arrow-cta {
    margin-top: 0;
  }
  .quickie-faq__items {
    margin-top: 0;
    max-width: none;
    border-top: 1px solid color-mix(in srgb, var(--color-foreground) 25%, transparent);
  }
  .quickie-faq__item {
    border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 25%, transparent);
  }
  .quickie-faq__item summary {
    cursor: pointer;
    list-style: none;
    padding: 1.125rem 2rem 1.125rem 0;
    font-size: 1.0625rem;
    position: relative;
  }
  .quickie-faq__item summary::-webkit-details-marker {
    display: none;
  }
  /* Open/close is height-animated by assets/quickie-page.js (bindFaq);
     the + marker turns into × on the way. */
  .quickie-faq__item summary::after {
    content: '+';
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    font-family: var(--font-body--family);
    opacity: 0.6;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .quickie-faq__item[open] summary::after {
    transform: translateY(-50%) rotate(45deg);
  }
  .quickie-faq__content {
    overflow: hidden;
  }
  .quickie-faq__item p {
    font-size: 1rem;
    line-height: 1.7;
    opacity: 0.85;
    margin: 0 0 1.375rem;
    max-width: 46rem;
  }

  .quickie-final {
    text-align: center;
  }
  /* Full-bleed media band: image/video cover-cropped behind a scrim,
     content centered in cream. Spans the viewport (same trick as
     .quickie-media--full). */
  .quickie-final--media {
    position: relative;
    width: 100vw;
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
    min-height: 80vh;
    min-height: 80svh;
    display: grid;
    place-items: center;
    padding: clamp(6rem, 14vh, 9rem) var(--page-margin);
    color: rgb(255 255 255);
    overflow: hidden;
  }
  .quickie-final__media {
    position: absolute;
    inset: 0;
    background-color: var(--color-foreground);
  }
  .quickie-final__media img,
  .quickie-final__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .quickie-final__scrim {
    position: absolute;
    inset: 0;
    background-color: rgb(0 0 0 / var(--scrim-opacity, 0.45));
  }
  .quickie-final__content {
    position: relative;
  }
  .quickie-final--media .quickie-pill:hover,
  .quickie-final--media .quickie-pill:focus-visible {
    background-color: rgb(255 255 255);
    color: var(--color-foreground);
  }

  .quickie-final__lead {
    font-family: var(--font-heading--family);
    letter-spacing: var(--font-heading--tracking);
    font-size: clamp(1.75rem, 3.2vw, 2.75rem);
    line-height: 1.25;
    max-width: 28ch;
    margin: 0 auto;
  }
  .quickie-final__line {
    font-size: 1.0625rem;
    margin: 1.5rem 0 2.25rem;
  }

  /* 4 — Sticky strip under the nav (ref: Mouthwash's "Buy Now" bar):
     name + total | add-on chips | Checkout. */
  .quickie-bar {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header-height, 4.5rem);
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    height: 3.5rem; /* fixed: the page pads by this, and it must not
                       change when the serif finishes loading */
    padding: 0 var(--page-margin);
    box-sizing: border-box;
    background-color: var(--color-background);
    border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 15%, transparent);
  }
  /* Always shown: the page starts below it (JS measures the strip into
     --quickie-bar-height; the fallback matches its rendered height). */
  .shopify-section:has(> .quickie) {
    padding-block-start: calc(var(--quickie-bar-height, 3.5rem) + 1.5rem) !important;
  }
  .quickie-bar__label {
    display: flex;
    align-items: baseline;
    gap: 0.875rem;
    margin: 0;
    flex-shrink: 0;
  }
  .quickie-bar__name {
    font-family: var(--font-heading--family);
    letter-spacing: var(--font-heading--tracking);
    font-size: 1.125rem;
    line-height: 1;
    white-space: nowrap;
  }
  .quickie-bar__total {
    font-family: var(--font-heading--family);
    letter-spacing: var(--font-heading--tracking);
    font-size: 1.0625rem;
    white-space: nowrap;
    opacity: 0.7;
  }
  .quickie-bar__addons-label {
    flex-shrink: 0;
    margin-right: -0.5rem;
    white-space: nowrap;
  }
  @media (max-width: 749px) {
    .quickie-bar__addons-label {
      display: none;
    }
  }
  .quickie-bar__addons {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .quickie-bar__addons::-webkit-scrollbar {
    display: none;
  }
  .quickie-bar__actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  .quickie-bar .quickie-pill {
    padding-block: 0.5rem;
  }
  /* Add-ons button: phones only. */
  .quickie-bar__addons-btn {
    display: none;
  }
  .quickie-bar__addons-count {
    display: inline-grid;
    place-items: center;
    min-width: 1.125rem;
    height: 1.125rem;
    margin-left: 0.375rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background-color: var(--color-foreground);
    color: var(--color-background);
    font-size: 0.625rem;
    letter-spacing: 0;
  }
  .quickie-book-nav {
    display: none;
  }
  @media (max-width: 749px) {
    /* Phones: no strip. A BOOK → pill rides in the header bar's empty
       left slot (the hamburger lives on the right) and opens the order
       sheet. The page's top padding is dropped with the strip. */
    .quickie-bar {
      position: static;
      height: auto;
      padding: 0;
      border: 0;
      background: none;
    }
    .quickie-bar__label,
    .quickie-bar__addons-label,
    .quickie-bar__addons,
    .quickie-bar__actions {
      display: none;
    }
    /* Docked into the header bar's left slot by assets/quickie-page.js
       (dockInHeader), so it rides with the sticky bar. */
    .header__slot .quickie-book-nav {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      box-sizing: border-box;
      height: 1.75rem;
      padding: 0 1rem;
      border-width: 1px;
      font-size: 0.6875rem;
      line-height: 1;
      background-color: var(--color-background);
    }
    .shopify-section:has(> .quickie) {
      padding-block-start: 1.5rem !important;
    }
  }

  /* Add-ons bottom sheet (phones). */
  .quickie-addons-sheet {
    width: 100%;
    max-width: none;
    margin: auto 0 0;
    padding: 0;
    border: 0;
    border-radius: 1rem 1rem 0 0;
    background-color: var(--color-background);
    color: var(--color-foreground);
    max-height: 85dvh;
  }
  .quickie-addons-sheet::backdrop {
    background-color: rgb(0 0 0 / 0.45);
  }
  .quickie-addons-sheet__inner {
    padding: 1.25rem var(--page-margin) calc(1.25rem + env(safe-area-inset-bottom, 0px));
  }
  .quickie-addons-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
  }
  .quickie-addons-sheet__head .eyebrow {
    margin: 0;
  }
  .quickie-addons-sheet__close {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
  }
  .quickie-addons-sheet__tier {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0 1rem;
    font-family: var(--font-heading--family);
    letter-spacing: var(--font-heading--tracking);
    font-size: 1.375rem;
  }
  .quickie-addons-sheet__sub {
    margin: 0.5rem 0 0.25rem;
  }
  .quickie-addons-sheet__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .quickie-addons-sheet__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 0;
    border-top: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
  }
  .quickie-addons-sheet__row .quickie-addon__name {
    font-size: 1rem;
  }
  /* The (i) popover inside the sheet: tighter, no bottom button, and the
     sheet must not clip it. */
  .quickie-addons-sheet {
    overflow: visible;
  }
  .quickie-addons-sheet__row .quickie-addon__pop {
    width: min(18rem, calc(100vw - 2 * var(--page-margin)));
    padding: 1rem 1rem 1.125rem;
  }
  .quickie-addons-sheet__row .quickie-addon__pop-body {
    margin-bottom: 0;
  }
  .quickie-addons-sheet__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--color-foreground) 20%, transparent);
  }
  .quickie-addons-sheet__total {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-family: var(--font-heading--family);
    letter-spacing: var(--font-heading--tracking);
    font-size: 1.125rem;
  }
  .quickie-addons-sheet__total .eyebrow {
    margin: 0;
  }

  /* +/✓/− glyph shared by icon buttons (panel) and chips (strip):
     "+" to add; in the order it rests on "✓" and shows "−" on hover. */
  .quickie-buy__glyph {
    display: inline-grid;
    place-items: center;
    width: 1.625rem;
    height: 1.625rem;
    border: 0.5px solid currentColor;
    border-radius: 50%;
    font-family: var(--font-body--family);
    font-size: 1rem;
    line-height: 1;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  .quickie-buy__glyph::before {
    content: '+';
  }
  button[data-in-cart] .quickie-buy__glyph {
    background-color: var(--color-foreground);
    color: var(--color-background);
  }
  button[data-in-cart] .quickie-buy__glyph::before {
    content: '\2713';
    font-size: 0.75rem;
  }
  button[data-in-cart]:hover .quickie-buy__glyph::before,
  button[data-in-cart]:focus-visible .quickie-buy__glyph::before {
    content: '\2212';
    font-size: 1rem;
  }
  .quickie-buy__icon,
  .quickie-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    font: inherit;
  }
  .quickie-buy__icon:hover .quickie-buy__glyph,
  .quickie-buy__icon:focus-visible .quickie-buy__glyph,
  .quickie-chip:hover .quickie-buy__glyph,
  .quickie-chip:focus-visible .quickie-buy__glyph {
    background-color: var(--color-foreground);
    color: var(--color-background);
  }
  .quickie-chip {
    padding: 0.25rem 0.75rem 0.25rem 0.25rem;
    border: 0.5px solid color-mix(in srgb, currentColor 35%, transparent);
    border-radius: 999px;
    white-space: nowrap;
    transition: border-color 0.3s ease;
  }
  .quickie-chip:hover,
  .quickie-chip:focus-visible,
  .quickie-chip[data-in-cart] {
    border-color: currentColor;
  }
  .quickie-chip__label {
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .quickie-buy button[disabled] .quickie-buy__glyph {
    opacity: 0.55;
  }

  @media (prefers-reduced-motion: reduce) {
    .quickie-pill,
    .quickie-arrow-cta__arrow,
    .quickie-faq__item summary::after,
    .quickie-gallery__slide,
    .quickie-gallery__thumb,
    .quickie-included__row,
    .quickie-included__row::before,
    .quickie-included__title,
    .quickie-included__desc {
      transition: none;
    }
  }
/* END_SECTION:the-quickie */

/* START_SECTION:video-hero (INDEX:28) */
/* The hero itself is a full-viewport SPACER that scrolls away while
     its media/scrim/logo layers are position: fixed — so the video
     holds still and the nav + page content ride up over it. The
     layers sit early in the DOM, so the sticky header (z-index 50)
     and every later section paint above them. */
  .video-hero {
    position: relative;
    height: 100svh;
    background-color: var(--color-foreground);
    cursor: pointer;
  }
  .video-hero__media {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: var(--color-foreground);
  }
  /* Listen toggle scrolls away with the spacer (the film stays fixed
     behind the page); page-margin keeps it off the viewport edge. */
  .video-hero .video-listen {
    top: 1.25rem;
    right: var(--page-margin);
  }
  .video-hero__scrim {
    position: fixed;
    inset: 0;
    background-color: rgb(0 0 0 / var(--scrim-opacity, 0.25));
  }
  .video-hero__logo {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
  }
  .video-hero__logo img {
    width: min(46vw, 12.65rem); /* min(40vw, 11rem) + 15% */
    height: auto;
  }

  /* Scroll indicator: the hand-drawn arrow GIF, still drifting down
     and easing back — the slightest possible cue that the page
     continues. */
  .video-hero__scroll {
    position: fixed;
    /* The GIF canvas is mostly transparent margin (art = center ~27% x
       22%): at 15rem wide the drawn arrow renders ~4rem wide, and the
       negative bottom puts the ART (not the canvas) ~2rem off the
       viewport bottom. */
    bottom: -2.5rem;
    left: 50%;
    animation: video-hero-scroll-drift 3.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }
  .video-hero__scroll img {
    display: block;
    width: 15rem;
    height: auto;
  }
  @keyframes video-hero-scroll-drift {
    0%,
    100% {
      transform: translate(-50%, 0);
    }
    50% {
      transform: translate(-50%, 0.5rem);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .video-hero__scroll {
      animation: none;
      transform: translate(-50%, 0);
    }
  }

  /* es devlin-style opening: on the homepage the hero is ordered above
     the header (body is a flex column), so the nav scrolls up with the
     page and pins at the top via the header's sticky positioning. */
  .template-index .shopify-section:has(> .video-hero) {
    order: -1;
  }

  /* Sections that scroll up over the fixed video need their own
     background to occlude it (they're transparent by default and
     would let the video show through). */
  .template-index .shopify-section:not(:has(> .video-hero)) {
    background-color: var(--color-background);
  }
/* END_SECTION:video-hero */

/* START_SECTION:work-categories (INDEX:29) */
.work-categories__bar {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 2rem;
    margin-bottom: 2rem;
  }
  .work-categories__eyebrow {
    margin: 0;
  }

  /* Category names as a jump nav, ✣ as the dot between them — eyebrow
     type, tucked right under the CATEGORIES row (negative top margin
     eats most of the bar's 2rem bottom margin). Muted at rest like the
     eyebrow; links wake on hover. Hidden in the Show All (mosaic) view
     along with the category cards. */
  .work-categories__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem 0.75rem;
    margin: -1.5rem 0 2.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .work-categories__nav a {
    color: inherit;
    text-decoration: none;
    opacity: 0.6; /* >= 4.5:1 on cream (AA small text) */
    transition: opacity 0.3s ease;
  }
  .work-categories__nav a:hover,
  .work-categories__nav a:focus-visible {
    opacity: 1;
  }
  .work-categories__nav-item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.75rem;
  }
  .work-categories__nav-glyph {
    display: inline-flex;
    font-size: 0.5625rem;
    opacity: 0.6; /* >= 4.5:1 on cream (AA small text) */
  }
  @media (prefers-reduced-motion: reduce) {
    .work-categories__nav a {
      transition: none;
    }
  }
  /* Phones: the Show All toggle sits alone at the top left, the eyebrow
     drops beneath it, and the category nav fits one row — smaller type,
     tighter gaps, wrapping to a second line when needed. */
  @media (max-width: 749px) {
    .work-categories__bar {
      margin-bottom: 1.5rem;
    }
    /* The toggle is moved into the header bar's left slot by
       assets/work-toggle.js (dockInHeader), so it rides with the sticky
       bar. Sized to the bar; full 1px border so no edge is lost. */
    html.js .work-toggle {
      box-sizing: border-box;
      height: 1.75rem;
      padding: 0 0.75rem;
      border-width: 1px;
      font-size: 0.6875rem;
      line-height: 1;
      opacity: 1;
    }
    /* Until it's docked it stays hidden in its home spot — no flash on
       the right before the move. */
    html.js .work-categories__bar .work-toggle {
      display: none;
    }
    .work-categories__nav {
      flex-wrap: wrap;
      gap: 0.375rem 0.5rem;
      margin: -0.75rem 0 2rem;
      font-size: 0.625rem;
      letter-spacing: 0.06em;
    }
    .work-categories__nav-item {
      gap: 0.5rem;
    }
    .work-categories__nav-glyph {
      font-size: 0.4375rem;
    }
  }
  html.is-inverted .work-categories__nav {
    display: none;
  }

  /* The toggle: label + spinning four-petal brand glyph. Muted at rest
     like the eyebrow; wakes on hover. Hidden without JS. */
  .work-toggle {
    display: none;
  }
  html.js .work-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    /* currentColor border rides the button's eyebrow opacity — muted at
       rest, full ink on hover, auto-inverts in the mosaic view. */
    border: 0.5px solid currentColor;
    padding: 0.375rem 0.875rem;
    cursor: pointer;
    color: inherit;
    transition: opacity 0.3s ease;
  }
  html.js .work-toggle:hover,
  html.js .work-toggle:focus-visible {
    opacity: 1;
  }
  .work-toggle__glyph {
    display: flex;
    font-size: 0.9375rem;
    line-height: 1;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* The hover tilt only on devices that really hover — touch screens
     keep :hover after a tap, which left the glyph slanted after Exit. */
  @media (hover: hover) {
    .work-toggle:hover .work-toggle__glyph {
      transform: rotate(45deg);
    }
  }
  .work-toggle:focus-visible .work-toggle__glyph {
    transform: rotate(45deg);
  }
  html.is-inverted .work-toggle .work-toggle__glyph {
    transform: rotate(180deg);
  }
  @media (hover: hover) {
    html.is-inverted .work-toggle:hover .work-toggle__glyph {
      transform: rotate(225deg);
    }
  }
  html.is-inverted .work-toggle:focus-visible .work-toggle__glyph {
    transform: rotate(225deg);
  }
  @media (prefers-reduced-motion: reduce) {
    .work-toggle__glyph {
      transition: none;
    }
  }

  .work-categories__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
  }
  html.is-inverted .work-categories__list {
    display: none;
  }
  .category-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
  }
  /* Phones: the 21:9 cinematic crop reads as a thin strip at narrow
     widths, so category cards square up to 1:1. The Show All mosaic
     keeps native aspects (it doesn't use .card-media). */
  @media (max-width: 749px) {
    .category-card__media {
      aspect-ratio: 1 / 1;
    }
  }
  .category-card__placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
  }
  .category-card__placeholder img {
    width: min(30vw, 9rem);
    height: auto;
    opacity: 0.3;
    transform: none !important;
  }
  .category-card__name {
    margin: 1.25rem 0 0;
  }

  /* Show All: tightly packed masonry mosaic on ink (ref: portorocha.com/all).
     Images keep their native aspect for organic column rhythm. */
  .work-mosaic {
    display: none;
  }
  html.is-inverted .work-mosaic {
    display: block;
    columns: 2;
    column-gap: 0.625rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  @media (min-width: 750px) {
    html.is-inverted .work-mosaic {
      columns: 3;
    }
  }
  @media (min-width: 1200px) {
    html.is-inverted .work-mosaic {
      columns: 4;
    }
  }
  .mosaic-tile {
    break-inside: avoid;
    margin-bottom: 1.75rem;
  }
  .mosaic-tile__link {
    display: block;
    color: inherit;
    text-decoration: none;
  }
  .mosaic-tile__media img,
  .mosaic-tile__media video {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.35s ease;
  }
  .mosaic-tile__link:hover .mosaic-tile__media img,
  .mosaic-tile__link:hover .mosaic-tile__media video,
  .mosaic-tile__link:focus-visible .mosaic-tile__media img,
  .mosaic-tile__link:focus-visible .mosaic-tile__media video {
    opacity: 0.8;
  }
  .mosaic-tile__typetile {
    aspect-ratio: 4 / 5;
    display: grid;
    place-items: center;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--color-background) 25%, transparent);
  }
  .mosaic-tile__typetile span {
    font-family: var(--font-heading--family);
    letter-spacing: var(--font-heading--tracking);
    font-size: 1.25rem;
    text-align: center;
  }
  .mosaic-tile__name {
    font-family: var(--font-body--family);
    font-size: 0.875rem;
    font-weight: 400;
    margin: 0.625rem 0 0;
  }
  .mosaic-tile__summary {
    font-size: 0.8125rem;
    line-height: 1.4;
    margin: 0.2rem 0 0;
    opacity: 0.6; /* >= 4.5:1 on cream (AA small text) */
  }
  @media (prefers-reduced-motion: reduce) {
    .mosaic-tile__media img,
    .mosaic-tile__media video {
      transition: none;
    }
  }
/* END_SECTION:work-categories */

/* START_SECTION:work-category (INDEX:30) */
/* Generous top whitespace before the eyebrow (ref: ~200px incl. the
     reference site's header) and room to breathe at the bottom. */
  .work-category__breadcrumb {
    margin-bottom: 0.9375rem;
  }
  /* The category name stays the page's h1 but renders at eyebrow size
     as part of the breadcrumb row. */
  .work-category__eyebrow {
    font: inherit;
    letter-spacing: inherit;
    margin: 0;
  }
  /* Project names as a jump nav, ✣ as the dot between them — same
     idiom as the Work landing's category nav: eyebrow type tucked
     0.5rem under the breadcrumb row, muted at rest, wake on hover. */
  .work-category__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem 0.75rem;
    margin: -0.4375rem 0 2.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .work-category__nav a {
    color: inherit;
    text-decoration: none;
    opacity: 0.6; /* >= 4.5:1 on cream (AA small text) */
    transition: opacity 0.3s ease;
  }
  .work-category__nav a:hover,
  .work-category__nav a:focus-visible {
    opacity: 1;
  }
  .work-category__nav-item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.75rem;
  }
  .work-category__nav-item:last-child .work-category__nav-glyph {
    display: none;
  }
  .work-category__nav-glyph {
    display: inline-flex;
    font-size: 0.5625rem;
    opacity: 0.6; /* >= 4.5:1 on cream (AA small text) */
  }
  /* Phones: the project nav fits one row — smaller type, tighter gaps,
     wrapping to a second line when needed (mirrors the Work landing). */
  @media (max-width: 749px) {
    .work-category__nav {
      flex-wrap: wrap;
      gap: 0.375rem 0.5rem;
      margin: -0.25rem 0 2rem;
      font-size: 0.625rem;
      letter-spacing: 0.06em;
    }
    .work-category__nav-item {
      gap: 0.5rem;
    }
    .work-category__nav-glyph {
      font-size: 0.4375rem;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .work-category__nav a {
      transition: none;
    }
  }

  .work-category__intro {
    max-width: 60ch;
    margin-bottom: 2.5rem;
  }
  .work-category__intro p {
    margin: 0;
  }
  .work-category__intro p + p {
    margin-top: 1em;
  }
  .work-category__projects {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7.5rem;
  }
  .work-category__card-link {
    display: block;
    color: inherit;
    text-decoration: none;
  }
  /* Phones: the 21:9 cinematic crop reads as a thin strip at narrow
     widths, so project cards square up to 1:1 (mirrors the Work
     landing's category cards). */
  @media (max-width: 749px) {
    .work-category__media {
      aspect-ratio: 1 / 1;
    }
  }
  .work-category__typetile {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--color-foreground) 25%, transparent);
  }
  .work-category__typetile span {
    font-family: var(--font-heading--family);
    letter-spacing: var(--font-heading--tracking);
    font-size: 1.25rem;
    text-align: center;
  }

  /* Title with the tagline stacked beneath — matching the homepage
     card idiom. */
  .work-category__card-info {
    padding-top: 1.25rem;
  }
  .work-category__card-title {
    margin: 0;
  }
  .work-category__empty {
    opacity: 0.6; /* >= 4.5:1 on cream (AA small text) */
  }
/* END_SECTION:work-category */

/* CSS from block stylesheet tags */
/* START_BLOCK:group (INDEX:31) */
.group {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    width: 100%;
  }

  .group--horizontal {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--padding);
  }

  .group--vertical {
    flex-direction: column;
    align-items: var(--alignment);
    padding: var(--padding) 0;
  }
/* END_BLOCK:group */

/* START_BLOCK:text (INDEX:32) */
.text {
    text-align: var(--text-align);
  }
  .text--title {
    font-size: 2rem;
    font-weight: 700;
  }
  .text--subtitle {
    font-size: 1.5rem;
  }
/* END_BLOCK:text */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:image (INDEX:35) */
.image {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
  }

  .image > img {
    width: 100%;
    height: auto;
  }
/* END_SNIPPET:image */