/* ==========================================================================
   DESIGN SYSTEM — COMPONENTS
   ==========================================================================

   Universal components built entirely from globals.css variables.
   Every value traces back to a variable — no hardcoded values.

   NAMING CONVENTION: BEM (Block Element Modifier)
   - Block:    .btn                    — the component itself
   - Element:  .card__title            — a child piece inside the block
   - Modifier: .btn--primary           — a variant of the block

   COMPONENTS IN THIS FILE:
   1. Buttons
   2. Cards
   3. Badges / Tags
   4. Alerts / Callouts
   5. Avatars
   6. Section Headers
   7. Dividers
   8. Tabs
   10. Accordion
   11. Page Footer
   12. Gallery
   13. Badge Brand Colors
   14. Logo Bar
   15. Process Step
   16. Result Metric (+ Icon variant)
   17. Filter Bar
   18. Testimonial
   19. Service Card
   22. (removed)
   23. Form
   24. Info List
   25. Scroll Animations
   26. Star Rating
   27. Pull Quote
   28. Project Meta

   NOTE: Layout Utilities (containers, rows, stacks, grids) moved to layouts.css.

   NOTE: Site Header & Site Footer live in layouts.css (page-level layout).

   IMPORT ORDER:
   1. globals.css   (variables)
   2. base.css      (element styles)
   3. components.css (this file)
   4. [channel adapter].css

   ========================================================================== */


/* ==========================================================================
   1. BUTTONS
   ==========================================================================
   Usage: <button class="btn btn--primary btn--md">Label</button>

   Variants:
     Style:  --primary, --secondary, --outline, --ghost
     Size:   --sm, --md (default), --lg
     State:  --disabled (or disabled attribute)
     Width:  --full (full width of parent)
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  text-decoration: none;
  border: var(--border-default) solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default),
    box-shadow var(--duration-fast) var(--ease-default);

  /* Default size (md) */
  font-size: var(--text-sm);
  padding: var(--space-sm) var(--space-lg);
  line-height: var(--leading-tight);
   
}

/* --- Style Variants --- */

.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.btn--primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.btn--secondary {
  background-color: var(--color-secondary);
  color: var(--color-neutral-800);
  border-color: var(--color-secondary);
}

.btn--secondary:hover {
  background-color: var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
  color: var(--color-white);
}

.btn--outline {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn--outline:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn--ghost {
    background-color: transparent;
  color: var(--color-secondary);
  border-color: var(--color-secondary-light);
}
.btn--ghost:hover {
        background-color: transparent;
  border-color: var(--color-secondary-dark);
  color: var(--color-secondary-dark);
}

/* --- Size Variants --- */

.btn--sm {
  font-size: var(--text-xs);
  padding: var(--space-xs) var(--space-md);
}

.btn--lg {
  font-size: var(--text-base);
  padding: var(--space-md) var(--space-xl);
}

/* --- Width Variant --- */

.btn--full {
  width: 100%;
}

/* --- Focus State --- */

.btn:focus-visible {
  outline: var(--border-default) solid var(--color-border-focus);
  outline-offset: 2px;
}

/* --- Icon Variant ---
   Adds an SVG icon inside the button. Icon inherits button color.
   Usage: <a class="btn btn--primary btn--lg btn--icon-right" href="#">
            Book a Call
            <svg>...</svg>
          </a>
*/

.btn svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  color: inherit;
}

.btn--icon-right {
  gap: var(--space-sm);
}

/* --- Disabled State --- */

.btn--disabled,
.btn:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}


/* ==========================================================================
   2. CARDS
   ==========================================================================
   Usage: <div class="card">
            <img class="card__image" src="..." alt="..." />
            <div class="card__content">
              <h3 class="card__title">Title</h3>
              <p class="card__body">Description text</p>
              <div class="card__actions">
                <a class="btn btn--primary btn--sm" href="#">Action</a>
              </div>
            </div>
          </div>

   Variants:
     Style:    --bordered, --elevated, --filled
     Layout:   --horizontal (image left, content right)
     Feature:  --featured (larger, more prominent)
   ========================================================================== */

.card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-raised);
  transition: box-shadow var(--duration-default) var(--ease-default),transform var(--duration-default) var(--ease-default);
  padding: var(--space-md);
  gap: var(--space-md);
}

/* --- Style Variants --- */

.card--bordered {
  box-shadow: none;
  border: var(--border-thin) solid var(--color-neutral-800);
  padding: 0;
  gap: 0;
}

.card--bordered .card__content {
  padding: var(--space-xl);
  gap: var(--space-lg);
}

.card--elevated {
  box-shadow: none;
}

.card--elevated:hover {
  box-shadow: none;
  transform: translateY(-2px);
}

.card--sunken {
  transform: translateY(-2px);
  background-color: var(--color-surface-sunken);
}

.card--filled {
  background-color: var(--color-surface-raised);
}

/* --- Card Elements --- */

.card__image {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.card__content {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
  margin: 0;
}

.card__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  margin: 0;
}

.card__body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  margin: 0;
}

.card__meta {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  letter-spacing: var(--tracking-wide);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.card__actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: auto;
  padding-top: var(--space-sm);
}

/* --- Layout Variants --- */

.card--horizontal {
  flex-direction: row;
  align-items: flex-start;
}

.card--horizontal .card__image {
  width: 40%;
  min-height: 100%;
}

/* --- Feature Variant --- */

.card--featured .card__title {
  font-size: var(--text-2xl);
}

.card--featured .card__content {
  padding: var(--space-xl);
}


/* ==========================================================================
   3. BADGES / TAGS
   ==========================================================================
   Usage: <span class="badge badge--primary">Label</span>

   Variants:
     Color:  --primary, --secondary, --success, --warning, --error, --info
     Style:  --outline (border only, no fill)
     Size:   --sm (compact)
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  line-height: var(--leading-tight);
  white-space: nowrap;

  /* Default: outline in soft dark */
  background-color: transparent;
  color: var(--color-neutral-800);
  border: var(--border-thin) solid var(--color-neutral-800);
}

/* --- Color Variants --- */

/* Color variants — unified to match base badge style */
.badge--primary,
.badge--secondary,
.badge--success,
.badge--warning,
.badge--error,
.badge--info {
  background-color: transparent;
  color: var(--color-neutral-800);
  border-color: var(--color-neutral-800);
}

/* --- Outline Variant --- */

.badge--outline {
  background-color: transparent;
  border: var(--border-thin) solid currentColor;
}

/* --- Filled Purple Variant --- */

.badge--purple-filled {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

/* --- Size Variants --- */

.badge--sm {
  font-size: 0.625rem;
  padding: var(--space-2xs) var(--space-sm);
}

.badge--lg {
  font-size: var(--text-sm);
  padding: var(--space-sm) var(--space-lg);
}


/* ==========================================================================
   4. ALERTS / CALLOUTS
   ==========================================================================
   Usage: <div class="alert alert--info">
            <div class="alert__title">Heads up</div>
            <div class="alert__body">This is an informational message.</div>
          </div>

   Variants:
     Type:  --info, --success, --warning, --error
   ========================================================================== */

.alert {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  border-left: var(--border-thick) solid transparent;

  /* Default: neutral */
  background-color: var(--color-surface-sunken);
  border-left-color: var(--color-neutral-400);
}

.alert__title {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

.alert__body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

/* --- Type Variants --- */

.alert--info {
  background-color: var(--color-info-light);
  border-left-color: var(--color-info);
}

.alert--info .alert__title {
  color: var(--color-info-dark);
}

.alert--success {
  background-color: var(--color-success-light);
  border-left-color: var(--color-success);
}

.alert--success .alert__title {
  color: var(--color-success-dark);
}

.alert--warning {
  background-color: var(--color-warning-light);
  border-left-color: var(--color-warning);
}

.alert--warning .alert__title {
  color: var(--color-warning-dark);
}

.alert--error {
  background-color: var(--color-error-light);
  border-left-color: var(--color-error);
}

.alert--error .alert__title {
  color: var(--color-error-dark);
}


/* ==========================================================================
   5. AVATARS
   ==========================================================================
   Usage: <div class="avatar avatar--md">
            <img class="avatar__image" src="..." alt="Name" />
          </div>

          <div class="avatar avatar--md avatar--initials">
            <span class="avatar__text">SC</span>
          </div>

   Variants:
     Size:   --sm, --md (default), --lg, --xl
     Shape:  --square (rounded square instead of circle)
   ========================================================================== */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-full);
  background-color: var(--color-primary-light);
  flex-shrink: 0;

  /* Default size (md) */
  width: 2.5rem;
  height: 2.5rem;
}

.avatar__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar__text {
  font-family: var(--font-ui);
  font-weight: var(--weight-semibold);
  color: var(--color-primary-dark);
  line-height: 1;
}

/* --- Size Variants --- */

.avatar--sm {
  width: 2rem;
  height: 2rem;
}

.avatar--sm .avatar__text {
  font-size: var(--text-xs);
}

.avatar--md .avatar__text {
  font-size: var(--text-sm);
}

.avatar--lg {
  width: 3.5rem;
  height: 3.5rem;
}

.avatar--lg .avatar__text {
  font-size: var(--text-lg);
}

.avatar--xl {
  width: 5rem;
  height: 5rem;
}

.avatar--xl .avatar__text {
  font-size: var(--text-xl);
}

/* --- Shape Variant --- */

.avatar--square {
  border-radius: var(--radius-lg);
}

/* --- Avatar Group --- */

.avatar-group {
  display: flex;
}

.avatar-group .avatar {
  border: var(--border-default) solid var(--color-surface-page);
  margin-left: -0.5rem;
}

.avatar-group .avatar:first-child {
  margin-left: 0;
}


/* ==========================================================================
   6. SECTION HEADERS
   ==========================================================================
   Usage: <div class="section-header">
            <div class="section-header__eyebrow">Category</div>
            <h2 class="section-header__title">Section Title</h2>
            <p class="section-header__description">Supporting text here.</p>
          </div>

   Variants:
     Alignment: --center
   ========================================================================== */

.section-header {
  margin-bottom: var(--space-2xl);
  max-width: var(--measure-wide);
}

.section-header__eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.section-header__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-sm) 0;
}

.section-header__description {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: var(--measure-default);
  margin: 0;
}

/* --- Center Variant --- */

.section-header--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.section-header--center .section-header__description {
  margin-left: auto;
  margin-right: auto;
}


/* ==========================================================================
   7. DIVIDERS
   ==========================================================================
   Usage: <div class="divider"></div>
          <div class="divider divider--with-text"><span>or</span></div>

   Variants:
     Style:  --thick, --dashed
     Layout: --with-text (text label in the middle)
     Space:  --compact, --spacious
   ========================================================================== */

.divider {
  border: none;
  border-top: var(--border-thin) solid var(--color-border-default);
  margin: var(--space-xl) 0;
}

/* --- Style Variants --- */

.divider--thick {
  border-top-width: var(--border-default);
}

.divider--dashed {
  border-top-style: dashed;
}

/* --- Spacing Variants --- */

.divider--compact {
  margin: var(--space-md) 0;
}

.divider--spacious {
  margin: var(--space-3xl) 0;
}

/* --- Text Divider --- */

.divider--with-text {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  border: none;
}

.divider--with-text::before,
.divider--with-text::after {
  content: '';
  flex: 1;
  border-top: var(--border-thin) solid var(--color-border-default);
}

.divider--with-text span {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  white-space: nowrap;
}


/* ==========================================================================
   8. TABS
   ==========================================================================
   Usage: <div class="tabs">
            <nav class="tabs__nav">
              <button class="tabs__tab tabs__tab--active" data-tab="one">Tab One</button>
              <button class="tabs__tab" data-tab="two">Tab Two</button>
            </nav>
            <div class="tabs__panel tabs__panel--active" data-panel="one">Content</div>
            <div class="tabs__panel" data-panel="two">Content</div>
          </div>

   Activation: Add/remove --active modifier via JS.
   Variants:
     Style:  --underline (default), --pill, --bordered
   ========================================================================== */

.tabs {
  width: fit-content;
}

.tabs__nav {
  display: flex;
  gap: var(--space-xs);
  border-bottom: var(--border-thin) solid var(--color-border-default);
  margin-bottom: var(--space-xl);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tabs__tab {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-tertiary);
  background: none;
  border: none;
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: var(--border-default) solid transparent;
  margin-bottom: calc(var(--border-thin) * -1);
  transition: color var(--duration-fast) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default);
}

.tabs__tab:hover {
  color: var(--color-text-primary);
}

.tabs__tab--active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

/* --- Panels --- */

.tabs__panel {
  display: none;
}

.tabs__panel--active {
  display: block;
}

/* --- Pill Variant --- */

.tabs--pill .tabs__nav {
  border-bottom: none;
  background-color: var(--color-surface-sunken);
  border-radius: var(--radius-lg);
  padding: var(--space-2xs);
  gap: var(--space-2xs);
}

.tabs--pill .tabs__tab {
  border-bottom: none;
  border-radius: var(--radius-md);
  margin-bottom: 0;
  padding: var(--space-xs) var(--space-md);
}

.tabs--pill .tabs__tab--active {
  background-color: var(--color-surface-raised);
  color: var(--color-text-primary);
  box-shadow: none;
}

/* --- Bordered Variant --- */

.tabs--bordered .tabs__nav {
  border-bottom: none;
  gap: calc(var(--border-thin) * -1);
}

.tabs--bordered .tabs__tab {
  border: var(--border-thin) solid var(--color-border-default);
  border-bottom: var(--border-thin) solid var(--color-border-default);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  margin-bottom: calc(var(--border-thin) * -1);
  background-color: var(--color-surface-sunken);
}

.tabs--bordered .tabs__tab--active {
  background-color: var(--color-surface-page);
  border-bottom-color: var(--color-surface-page);
  color: var(--color-text-primary);
}


/* ==========================================================================
   10. FIXED TOGGLE
   ========================================================================== */

.fixed-toggle {
  position: fixed;
  top: var(--space-md);
  right: var(--space-md);
  z-index: var(--z-sticky);
  box-shadow: none;
}


/* ==========================================================================
   10. ACCORDION
   ==========================================================================
   Collapsible content sections built on native <details>/<summary>.
   Zero JavaScript — uses browser-native disclosure widget.

   Usage: <div class="accordion">
            <details class="accordion__item">
              <summary class="accordion__header">Section Title</summary>
              <div class="accordion__content">
                <p>Content goes here.</p>
              </div>
            </details>
          </div>

   Variants:
     --bordered  (visible borders between items)
     --flush     (no outer border, minimal style)
   ========================================================================== */

.accordion {
  display: flex;
  flex-direction: column;
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.accordion__item {
  border-bottom: var(--border-thin) solid var(--color-border-default);
}

.accordion__item:last-child {
  border-bottom: none;
}

.accordion__header {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  padding: var(--space-md) var(--space-lg);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  transition: background-color var(--duration-fast) var(--ease-default);
}

.accordion__header::-webkit-details-marker { display: none; }

.accordion__header::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-text-tertiary);
  border-bottom: 2px solid var(--color-text-tertiary);
  transform: rotate(-45deg);
  transition: transform var(--duration-fast) var(--ease-default);
  flex-shrink: 0;
}

.accordion__item[open] .accordion__header::after {
  transform: rotate(45deg);
}

.accordion__header:hover {
  background-color: var(--color-surface-sunken);
}

.accordion__content {
  padding: 0 var(--space-lg) var(--space-lg);
}

.accordion__content p {
  margin: 0;
}

/* --- Flush Variant (no outer border) --- */

.accordion--flush {
  border: none;
  border-radius: 0;
}

.accordion--flush .accordion__item {
  border-bottom: var(--border-thin) solid var(--color-border-default);
}

.accordion--flush .accordion__header {
  padding-left: 0;
  padding-right: 0;
}

.accordion--flush .accordion__content {
  padding-left: 0;
  padding-right: 0;
}


/* ==========================================================================
   11. PAGE FOOTER
   ========================================================================== */

.page-footer {
  margin-top: var(--space-4xl);
  padding: var(--space-2xl) var(--space-lg);
  border-top: var(--border-thin) solid var(--color-border-default);
  text-align: center;
}

.page-footer__text {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  max-width: none;
  margin: 0;
}

.page-footer__text+.page-footer__text {
  margin-top: var(--space-2xs);
}


/* ==========================================================================
   12. GALLERY
   ==========================================================================
   Image grid for showcasing visual content. Responsive columns with
   consistent gap and border-radius on items.

   Usage: <div class="gallery gallery--3col">
            <div class="gallery__item">
              <img src="..." alt="..." />
            </div>
          </div>

   Variants:
     Columns: --2col (default), --3col, --4col
   ========================================================================== */

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.gallery--3col {
  grid-template-columns: repeat(3, 1fr);
}

.gallery--4col {
  grid-template-columns: repeat(4, 1fr);
}

.gallery__item {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Caption --- */

.gallery__caption {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  padding: var(--space-sm) 0;
}

/* --- Portrait Variant (tall images, 2:3 ratio) --- */

.gallery--portrait .gallery__item {
  aspect-ratio: 2 / 3;
}

/* --- Responsive --- */

@media (max-width: 768px) {
  .gallery--3col,
  .gallery--4col {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .gallery,
  .gallery--3col,
  .gallery--4col {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   13. BADGE — BRAND COLOR VARIANTS
   ==========================================================================
   Named brand colors for tags and category labels.
   ========================================================================== */

/* Brand color variants — unified to match base badge style */
.badge--mint,
.badge--peach,
.badge--purple,
.badge--blue,
.badge--pink,
.badge--ghost {
  background-color: transparent;
  color: var(--color-neutral-800);
  border: var(--border-thin) solid var(--color-neutral-800);
}


/* ==========================================================================
   14. LOGO BAR
   ==========================================================================
   Horizontal row of client/partner logos for social proof.

   Usage: <div class="logo-bar">
            <img class="logo-bar__item" src="..." alt="Client" />
            <img class="logo-bar__item" src="..." alt="Client" />
          </div>

   Variants:
     --compact (tighter spacing, smaller logos)
   ========================================================================== */

.logo-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xl);
  padding: var(--space-2xl) 0;
}

.logo-bar__item {
  height: 4rem;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: var(--opacity-disabled);
  transition: filter var(--duration-default) var(--ease-default),
              opacity var(--duration-default) var(--ease-default);
}

.logo-bar__item:hover {
  filter: grayscale(0%);
  opacity: var(--opacity-full);
}

.logo-bar--compact {
  gap: var(--space-xl);
}

.logo-bar--compact .logo-bar__item {
  height: 1.5rem;
}

/* Bordered variant — full-width band with structural border */
.logo-bar--bordered {
  border-top: var(--border-thin) solid var(--color-neutral-800);
  border-bottom: var(--border-thin) solid var(--color-neutral-800);
  background-color: var(--color-surface-page);
}

/* --- Scrolling Variant (infinite marquee) ---
   Wrap logos in .logo-bar__track. Duplicate the logo set for seamless loop.
   Fade edges use mask-image — works on any background color.

   Usage: <div class="logo-bar logo-bar--scrolling">
            <div class="logo-bar__track">
              <img class="logo-bar__item" src="..." alt="..." />
              ...logos...
              <!-- duplicate set for seamless loop -->
              <img class="logo-bar__item" src="..." alt="..." />
              ...logos (same set again)...
            </div>
          </div>
*/

.logo-bar--scrolling {
  overflow: hidden;
  position: relative;
  flex-wrap: nowrap;
  justify-content: flex-start;
  padding: var(--space-2xl) 0;
}

.logo-bar__track {
  display: flex;
  align-items: center;
  gap: var(--space-3xl);
  width: max-content;
  animation: logo-scroll 30s linear infinite;
}

@keyframes logo-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-25%); }
}



/* ==========================================================================
   15. PROCESS STEP
   ==========================================================================
   Numbered step block for methodology/process sections.

   Usage: <div class="process-step">
            <div class="process-step__number">01</div>
            <h3 class="process-step__title">Discovery</h3>
            <p class="process-step__description">We start by understanding...</p>
          </div>

   Works in a .grid--3 for a 3-step row.
   ========================================================================== */

.process-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.process-step__number {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: var(--leading-none);
  color: var(--color-primary-light);
  letter-spacing: var(--tracking-tight);
}

.process-step__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
  margin: 0;
}

.process-step__description {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin: 0;
  max-width: var(--measure-narrow);
}

/* --- Icon Variant (SVG icon replaces number) --- */

.process-step--icon .process-step__number {
  font-size: 0;
  line-height: 0;
}

.process-step--icon .process-step__number svg,
.process-step__number svg {
  width: 4rem;
  height: 4rem;
  color: var(--color-primary-light);
}

/* --- Card Variant --- */

.process-step--card {
  background-color: var(--color-surface-raised);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}

/* --- Large Card Variant (taller cards, bigger icons) --- */

.process-step--lg {
  padding: var(--space-3xl) var(--space-xl);
  min-height: 24rem;
}

.process-step--lg .process-step__number svg {
  width: 8rem;
  height: 8rem;
}

/* --- Flush Grid (edge-to-edge cards, no gaps) --- */

.grid--flush {
  gap: 0;
}

.grid--flush > .process-step--card {
  border-radius: 0;
}

/* --- Color Variants (pastel backgrounds with matched icon tints) --- */

.process-step--purple { background-color: var(--color-primary-light); }
.process-step--mint   { background-color: var(--color-secondary-light); }
.process-step--peach  { background-color: var(--color-tertiary-light); }
.process-step--blue   { background-color: var(--color-accent-1-light); }

.process-step--purple .process-step__number svg { color: var(--color-primary-dark); }
.process-step--mint   .process-step__number svg { color: var(--color-secondary-dark); }
.process-step--peach  .process-step__number svg { color: var(--color-tertiary-dark); }
.process-step--blue   .process-step__number svg { color: var(--color-accent-1-dark); }

/* Force dark text on pastel cards (overrides dark-mode section context) */
.process-step--purple .process-step__title,
.process-step--mint   .process-step__title,
.process-step--peach  .process-step__title,
.process-step--blue   .process-step__title {
  color: var(--color-neutral-900);
}

.process-step--purple .process-step__description,
.process-step--mint   .process-step__description,
.process-step--peach  .process-step__description,
.process-step--blue   .process-step__description {
  color: var(--color-neutral-700);
}


/* ==========================================================================
   16. RESULT METRIC
   ==========================================================================
   Large stat display for case study results.

   Usage: <div class="metric">
            <div class="metric__value">4–8</div>
            <div class="metric__label">Weeks to deliver</div>
          </div>

   Works in a .row or .grid--3 for stat rows.
   ========================================================================== */

.metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.metric__value {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: var(--leading-none);
  color: var(--color-primary-dark);
}

.metric__label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-tertiary);
  letter-spacing: var(--tracking-wide);
}

/* -- Icon Metric variant -------------------------------------------------- */

.metric--icon {
  align-items: center;
  text-align: center;
  gap: var(--space-md);
}

.metric--icon .metric__icon {
  width: 3rem;
  height: 3rem;
  color: var(--color-primary-dark);
}

.metric--icon .metric__label {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-wide);
}

.metric__sublabel {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

/* --- Large Variant (dramatic oversized stats) --- */

.metric--lg .metric__value { font-size: var(--text-5xl); }
.metric--lg .metric__label { font-size: var(--text-base); }

/* --- Centered Variant (centered text for grid layouts) --- */

.metric--center {
  align-items: center;
  text-align: center;
}


/* ==========================================================================
   17. FILTER BAR
   ==========================================================================
   Horizontal row of filter toggles for galleries and listings.

   Usage: <div class="filter-bar">
            <button class="filter-bar__btn filter-bar__btn--active">All</button>
            <button class="filter-bar__btn">Branding</button>
            <button class="filter-bar__btn">Web</button>
          </div>

   Activation: Toggle --active via JS.
   ========================================================================== */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding: var(--space-md) 0;
}

.filter-bar__btn {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-secondary);
  background: none;
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: var(--radius-full);
  padding: var(--space-xs) var(--space-md);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-default),
              background-color var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default);
}

.filter-bar__btn:hover {
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}

.filter-bar__btn--active {
  color: var(--color-white);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}


/* ==========================================================================
   18. TESTIMONIAL
   ==========================================================================
   Client quote block for social proof sections.

   Usage: <div class="testimonial">
            <blockquote class="testimonial__quote">
              "Working with Simon transformed our brand..."
            </blockquote>
            <div class="testimonial__author">Sarah Chen</div>
            <div class="testimonial__role">CEO, ChickP Foods</div>
          </div>

   Variants:
     --card (adds card styling — bg, padding, radius)
     --featured (larger bolder quote for prominent placements)
   ========================================================================== */

.testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  border: var(--border-thin) solid var(--color-neutral-800);
  padding: var(--space-xl);
  background-color: var(--color-white);
}

.testimonial__quote {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
  border: none;
  padding: 0;
  margin: 0;
  font-style: normal;
}

.testimonial__quote::before {
  content: '\201C';
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 0.5;
  color: var(--color-primary-light);
  display: block;
  margin-bottom: var(--space-xs);
}

/* Author + role wrapper — tight vertical stack, divider above */
.testimonial__attribution {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-top: var(--space-md);
  border-top: var(--border-thin) solid var(--color-border-default);
}

.testimonial__author {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text-primary);
  margin: 0;
}

.testimonial__role {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

/* --- Card Variant --- */

.testimonial--card {
  background-color: var(--color-surface-raised);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: none;
}

/* --- Featured Variant (large bold quote) --- */

.testimonial--featured {
  text-align: left;
  align-items: flex-start;
}

.testimonial--featured .testimonial__quote {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}


/* ==========================================================================
   18b. DELIVERABLES
   ==========================================================================
   Compact deliverables grid for project cards. Lists what was produced.
   Designed to sit in split__footer below split__tags.

   Usage: <div class="deliverables">
            <span class="deliverables__item">Identity System</span>
            <span class="deliverables__item">Stage Design</span>
            <span class="deliverables__item">Signage</span>
          </div>
   ========================================================================== */

.deliverables {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.deliverables__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: 10rem;
  padding: 0 var(--space-xl);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-neutral-900);
  text-align: center;
  border-right: var(--border-thin) solid var(--color-neutral-800);
  background-color: var(--color-surface-page);
  transition: background-color var(--duration-default) var(--ease-default),
              gap var(--duration-default) var(--ease-default);
  overflow: hidden;
}

.deliverables__item:nth-child(3n) {
  border-right: none;
}

.deliverables__item:hover {
  background-color: var(--color-tertiary-light);
  gap: var(--space-md);
}

.deliverables__item svg {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  color: var(--color-neutral-600);
  transition: width var(--duration-default) var(--ease-default),
              height var(--duration-default) var(--ease-default),
              color var(--duration-default) var(--ease-default);
}

.deliverables__item:hover svg {
  width: 28px;
  height: 28px;
  color: var(--color-neutral-900);
}

/* Text label — hidden by default, revealed on hover */
.deliverables__label {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--duration-default) var(--ease-default),
              opacity var(--duration-default) var(--ease-default);
}

.deliverables__item:hover .deliverables__label {
  max-height: 3em;
  opacity: 1;
  color: var(--color-neutral-900);
}

/* --- 5-column variant (case study meta band) --- */

.deliverables--5col {
  grid-template-columns: repeat(5, 1fr);
}

.deliverables--5col .deliverables__item:nth-child(3n) {
  border-right: var(--border-thin) solid var(--color-neutral-800);
}

.deliverables--5col .deliverables__item:nth-child(5n) {
  border-right: none;
}

/* --- Static variant (no hover reveal, content always visible) --- */

.deliverables--static .deliverables__item {
  height: 22vh;
  min-height: 14rem;
  padding: 0 var(--space-xl);
  gap: var(--space-md);
}

.deliverables--static .deliverables__item svg {
  width: 40px;
  height: 40px;
}

.deliverables--static .deliverables__label {
  max-height: none;
  opacity: 1;
  font-size: var(--text-base);
}

.deliverables--static .deliverables__item:hover {
  background-color: var(--color-surface-sunken);
  gap: var(--space-md);
}

.deliverables--static .deliverables__item:hover svg {
  width: 40px;
  height: 40px;
  color: var(--color-neutral-600);
}

/* Sublabel — hidden (values are self-evident) */
.deliverables__sublabel {
  display: none;
}

/* --- Link deliverables (anchor tags) --- */
a.deliverables__item {
  text-decoration: none;
}

/* --- 2-col variant (case study prev/next nav) --- */
.deliverables--2col {
  grid-template-columns: repeat(2, 1fr);
  border-top: var(--border-thin) solid var(--color-neutral-800);
  border-bottom: var(--border-thin) solid var(--color-neutral-800);
}

/* Collapse double border when following case-grid (which has border-bottom) */
.case-grid + .deliverables--2col {
  border-top: none;
}

.deliverables--2col .deliverables__item:nth-child(3n) {
  border-right: var(--border-thin) solid var(--color-neutral-800);
}

.deliverables--2col .deliverables__item:nth-child(2n) {
  border-right: none;
}

/* Next project tile — mint hover */
.deliverables__item--next:hover {
  background-color: var(--color-secondary-light);
}

/* --- 2-row variant (border between rows) --- */
.deliverables--2row .deliverables__item:nth-child(-n+3) {
  border-bottom: var(--border-thin) solid var(--color-neutral-800);
}

/* --- Primary variant (CTA tile) --- */
.deliverables__item--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.deliverables__item--primary:hover {
  background-color: var(--color-primary-dark);
}

.deliverables__item--primary svg {
  color: var(--color-white);
}

.deliverables__item--primary:hover svg {
  color: var(--color-white);
}

.deliverables__item--primary:hover .deliverables__label {
  color: var(--color-white);
}


/* ==========================================================================
   19. SERVICE CARD
   ==========================================================================
   Service tier display with deliverables list.

   Usage: <div class="service-card">
            <h3 class="service-card__title">Build from Scratch</h3>
            <p class="service-card__description">For brands starting fresh.</p>
            <ul class="service-card__list">
              <li>Brand identity</li>
              <li>Design tokens</li>
              <li>Component library</li>
            </ul>
            <div class="service-card__timeline">4–8 weeks</div>
            <a class="btn btn--primary" href="#">Get Started</a>
          </div>
   ========================================================================== */

.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background-color: var(--color-surface-raised);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: none;
}

.service-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.service-card__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
  margin: 0;
}

.service-card__description {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin: 0;
}

.service-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: 0;
  margin: 0;
}

.service-card__list li {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  padding-left: var(--space-lg);
  position: relative;
  list-style: none;
}

.service-card__list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

.service-card__timeline {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-tertiary);
  letter-spacing: var(--tracking-wide);
  padding-top: var(--space-sm);
  border-top: var(--border-thin) solid var(--color-border-default);
}


/* (Site header and site footer moved to layouts.css — they're page-level
   layout elements, not reusable components.) */



/* ==========================================================================
   23. FORM
   ==========================================================================
   Structured form layout built from tokens. Wrap in a card for elevated
   appearance, or use standalone.

   Usage: <form class="form">
            <div class="form__row">
              <div class="form__field">
                <label class="form__label" for="name">Name</label>
                <div class="form__input-wrap">
                  <svg class="form__icon">...</svg>
                  <input class="form__input" type="text" id="name" />
                </div>
              </div>
            </div>
            <div class="form__field">
              <label class="form__label" for="msg">Message</label>
              <textarea class="form__textarea" id="msg"></textarea>
            </div>
            <button class="btn btn--primary btn--lg" type="submit">Send</button>
          </form>
   ========================================================================== */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.form__label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

.form__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.form__icon {
  position: absolute;
  left: var(--space-md);
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
  color: var(--color-text-tertiary);
}

.form__icon line,
.form__icon polyline,
.form__icon path,
.form__icon circle,
.form__icon rect {
  stroke: currentColor;
}

.form__icon path[fill]:not([fill="none"]),
.form__icon circle[fill]:not([fill="none"]) {
  fill: currentColor;
}

.form__input-wrap .form__input {
  padding-left: calc(var(--space-md) + 1.25rem + var(--space-sm));
}

.form__input,
.form__textarea,
.form__select {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  background-color: var(--color-surface-raised);
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  width: 100%;
  transition: border-color var(--duration-fast) var(--ease-default);
}

.form__input:focus,
.form__textarea:focus,
.form__select:focus {
  outline: none;
  border-color: var(--color-border-focus);
}

.form__textarea {
  min-height: 10rem;
  resize: vertical;
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

@media (max-width: 768px) {
  .form__row {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   24. INFO LIST
   ==========================================================================
   Vertical list of labeled info items with optional icons.
   Used for contact sidebars, feature lists, etc.

   Usage: <div class="info-list">
            <div class="info-list__item">
              <svg class="info-list__icon">...</svg>
              <div>
                <div class="info-list__label">Email</div>
                <div class="info-list__value">
                  <a href="mailto:...">simon@simoncreates.me</a>
                </div>
              </div>
            </div>
          </div>
   ========================================================================== */

.info-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.info-list__item {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.info-list__icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  color: var(--color-primary);
  margin-top: var(--space-2xs);
}

.info-list__icon line,
.info-list__icon polyline,
.info-list__icon path,
.info-list__icon circle,
.info-list__icon rect {
  stroke: currentColor;
}

.info-list__icon path[fill]:not([fill="none"]),
.info-list__icon circle[fill]:not([fill="none"]) {
  fill: currentColor;
}

.info-list__label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-2xs);
}

.info-list__value {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

.info-list__value a {
  color: var(--color-text-link);
}

.info-list__value .text-small {
  color: var(--color-text-tertiary);
  margin-top: var(--space-2xs);
}


/* ==========================================================================
   25. SCROLL ANIMATIONS
   ==========================================================================
   Entrance animations triggered by IntersectionObserver.
   Add .animate-up or .animate-left to any element. JS adds .in-view
   when the element enters the viewport. Fires once per element.

   Usage: <div class="animate-up">...</div>
          <div class="animate-left">...</div>
   ========================================================================== */

.animate-up,
.animate-left,
.animate-bottom-left,
.animate-bottom-right {
  opacity: 0;
  transition: opacity var(--duration-dramatic) var(--ease-out),
              transform var(--duration-dramatic) var(--ease-out);
}

.animate-up {
  transform: translateY(2rem);
}

.animate-left {
  transform: translateX(-2rem);
}

/* Diagonal entrances — bottom-left for testimonials, bottom-right for media */
.animate-bottom-left {
  transform: translate(-1.5rem, 2rem);
}

.animate-bottom-right {
  transform: translate(1.5rem, 2rem);
}

.animate-up.in-view,
.animate-left.in-view,
.animate-bottom-left.in-view,
.animate-bottom-right.in-view {
  opacity: 1;
  transform: translate(0) scale(1.005);
}

/* Blur-in — scroll-driven blur, opacity, and scale on split images.
   Initial state set here; JS scroll handler controls the transition. */
.animate-blur {
  opacity: 0;
  filter: blur(20px);
  transform: scale(1.1);
  will-change: opacity, filter, transform;
  transition: opacity var(--duration-dramatic) var(--ease-out),
              filter var(--duration-dramatic) var(--ease-out),
              transform var(--duration-dramatic) var(--ease-out);
}

.animate-blur.in-view {
  opacity: 1;
  filter: blur(0);
  transform: scale(1.005);
}

/* Stagger children when needed — add delay classes */
.animate-delay-1 { transition-delay: 150ms; }
.animate-delay-2 { transition-delay: 300ms; }
.animate-delay-3 { transition-delay: 450ms; }

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .animate-up,
  .animate-left,
  .animate-bottom-left,
  .animate-bottom-right,
  .animate-blur {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}


/* ==========================================================================
   26. STAR RATING
   ==========================================================================
   Aggregate star rating for social proof. Displays a score with filled
   star icons and optional review count text.

   Usage: <div class="star-rating">
            <span class="star-rating__score">4.9</span>
            <div class="star-rating__stars">
              <svg class="star-rating__star">...</svg>
              <svg class="star-rating__star">...</svg>
              <svg class="star-rating__star">...</svg>
              <svg class="star-rating__star">...</svg>
              <svg class="star-rating__star star-rating__star--half">...</svg>
            </div>
            <span class="star-rating__count">Based on 47 reviews</span>
          </div>
   ========================================================================== */

.star-rating {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.star-rating__score {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
  font-weight: var(--weight-bold);
}

.star-rating__stars {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.star-rating__star {
  width: 1.25rem;
  height: 1.25rem;
  fill: var(--color-primary-light);
  flex-shrink: 0;
}

.star-rating__star--empty {
  fill: var(--color-neutral-100);
}

.star-rating__star--half {
  fill: url(#star-half-gradient);
}

.star-rating__count {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

/* --- Size Variant: Large --- */

.star-rating--lg .star-rating__score {
  font-size: var(--text-2xl);
}

.star-rating--lg .star-rating__star {
  width: 1.5rem;
  height: 1.5rem;
}

.star-rating--lg .star-rating__count {
  font-size: var(--text-base);
}

/* --- Stacked layout variant --- */

.star-rating--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
}


/* ==========================================================================
   27. PULL QUOTE
   ==========================================================================
   Large editorial quote for case study narratives. Different from
   testimonial — no author attribution, used mid-narrative for emphasis.

   Usage: <blockquote class="pull-quote">
            <p>The site now reflects the quality of the products.</p>
          </blockquote>

   Variants:
     --bordered (left border accent instead of quotation mark)
   ========================================================================== */

.pull-quote {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
  border: none;
  padding: var(--space-xl) 0;
  margin: var(--space-xl) 0;
  position: relative;
}

.pull-quote::before {
  content: '\201C';
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: 0.5;
  color: var(--color-primary-light);
  display: block;
  margin-bottom: var(--space-md);
}

.pull-quote p {
  margin: 0;
  max-width: var(--measure-default);
}

/* --- Bordered Variant --- */

.pull-quote--bordered {
  border-left: var(--border-thick) solid var(--color-primary);
  padding-left: var(--space-xl);
}

.pull-quote--bordered::before {
  display: none;
}

@media (min-width: 769px) {
  .pull-quote {
    font-size: var(--text-2xl);
  }
}


/* ==========================================================================
   28. PROJECT META
   ==========================================================================
   Sidebar-style metadata list for case study pages.
   Displays key project info: client, year, deliverables, industry.

   Usage: <div class="project-meta">
            <div class="project-meta__item">
              <div class="project-meta__label">Client</div>
              <div class="project-meta__value">Sensibo</div>
            </div>
          </div>
   ========================================================================== */

.project-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-xl);
  background-color: var(--color-surface-sunken);
  border-radius: var(--radius-lg);
}

.project-meta__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.project-meta__label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.project-meta__value {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  line-height: var(--leading-normal);
}

/* ==========================================================================
   29. EDITORIAL PROSE
   ==========================================================================
   Large editorial body text for case study narratives. Big, confident
   paragraphs that command the page — size creates authority.

   Usage: <div class="prose--editorial">
            <p>Big editorial paragraph here.</p>
            <p>Another punchy paragraph.</p>
          </div>
   ========================================================================== */

.prose--editorial p {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
  margin: 0;
}

.prose--editorial p + p {
  margin-top: var(--space-xl);
}

/* Centered variant — full-width container with centered readable text */
.prose--editorial-center {
  text-align: center;
  max-width: var(--measure-wide);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .prose--editorial p {
    font-size: var(--text-lg);
  }
}