/* ============================================
   TMT THEME — ABOUT PAGE STYLES
   File: assets/css/about.css
   Loads ONLY on page-about.php template

   SECTIONS IN THIS FILE:
   ─────────────────────────────────────────────
   1. ab- About Hero
   [Future sections append below]

   NAMESPACE: ab- (About Hero)
   Zero collision with: ph-, pg-, fp-, ts-, fc-,
   bh-, fa-, ag-, bn-

   CONCEPT: "The Statement"
   Typography IS the hero. Two-weight headline
   creates visual tension like a printed manifesto.
   A large ghost index number sits behind the
   content as an editorial depth marker.
   A vertical accent line anchors the left edge
   of the content column on desktop.

   CSS TECHNIQUES:
   • CSS Grid — asymmetric editorial split
   • Ghost index number via ::after counter
   • Vertical accent rule via ::before
   • Layered radial-gradient atmosphere
   • text-wrap: balance on all text blocks
   • fluid typography via clamp()
   • @keyframes stagger reveals
   • animation-fill-mode: both throughout
   • GPU: transform + opacity only
   • No JavaScript. No layout shift.
   ============================================ */


/* ============================================
   SECTION SHELL
   ============================================ */

.ab-section {
  position: relative;
  min-height: 100svh;
  background-color: var(--color-bg-main);
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-top: 5rem;          /* clears fixed nav */
  padding-bottom: 0;
}


/* ============================================
   BACKGROUND — four depth layers
   ============================================ */

/* Layer 1 — Top-right ambient source */
.ab-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 60% 50% at 92% 8%,
      rgba(69, 123, 157, 0.12) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 45% 40% at 8% 85%,
      rgba(168, 218, 220, 0.05) 0%,
      transparent 55%
    );
  pointer-events: none;
  z-index: 0;
  animation: abAtmoBreathe 11s ease-in-out infinite alternate;
  will-change: opacity;
}

@keyframes abAtmoBreathe {
  from { opacity: 0.65; }
  to   { opacity: 1; }
}

/* Layer 2 — Fine dot grid — right-side only */
.ab-section::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background-image: radial-gradient(
    circle,
    rgba(168, 218, 220, 0.028) 1px,
    transparent 1px
  );
  background-size: 36px 36px;
  pointer-events: none;
  z-index: 0;
}


/* ============================================
   CONTAINER
   ============================================ */

.ab-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
  padding-block: clamp(3.5rem, 7vw, 6rem);
}


/* ============================================
   EDITORIAL GRID
   Desktop: [side-label | content | —visual—]
   3-column asymmetric layout
   ============================================ */

.ab-grid {
  display: grid;
  grid-template-columns: 3rem 1fr clamp(220px, 28vw, 340px);
  grid-template-areas: 'side content visual';
  gap: 0 clamp(2rem, 4vw, 4rem);
  align-items: center;
  position: relative;
}


/* ============================================
   SIDE COLUMN — vertical index label
   ============================================ */

.ab-side {
  grid-area: side;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  align-self: stretch;
  padding-block: 0.5rem;

  opacity: 0;
  animation: abFadeIn 0.6s ease 0.1s both;
}

/* Page index number — vertical */
.ab-side__num {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.2em;
  color: var(--color-accent);
  opacity: 0.55;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  margin-bottom: 1rem;
  line-height: 1;
}

/* Vertical rule — full height of side col */
.ab-side__rule {
  display: block;
  width: 1px;
  flex: 1;
  background: linear-gradient(
    180deg,
    rgba(168, 218, 220, 0.35),
    rgba(168, 218, 220, 0.08) 70%,
    transparent
  );
}


/* ============================================
   CONTENT COLUMN — the primary statement
   ============================================ */

.ab-content {
  grid-area: content;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  position: relative;
}

/* Ghost index number — editorial depth marker */
.ab-content::after {
  content: '01';
  position: absolute;
  right: -1rem;
  bottom: -1.5rem;
  font-family: var(--font-heading);
  font-size: clamp(6rem, 15vw, 14rem);
  font-weight: var(--weight-bold);
  letter-spacing: -0.06em;
  line-height: 1;
  color: rgba(168, 218, 220, 0.04);
  pointer-events: none;
  z-index: 0;
  user-select: none;
  /* Prevent layout influence */
  white-space: nowrap;
}


/* ── Eyebrow ── */

.ab-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  position: relative;
  z-index: 1;

  opacity: 0;
  animation: abFadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

.ab-eyebrow__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--color-accent);
  flex-shrink: 0;
  animation: abDotPulse 2.8s ease-in-out infinite;
}

@keyframes abDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.65); }
}

.ab-eyebrow__text {
  font-size: 0.65rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
}


/* ── Headline — manifesto split ── */

.ab-heading {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 5.5vw, 4.25rem);
  line-height: 1.06;
  letter-spacing: -0.04em;
  color: var(--color-text-primary);
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem);
  max-width: 14em;
  text-wrap: balance;
  position: relative;
  z-index: 1;

  opacity: 0;
  animation: abFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}

/* First line — lighter weight for contrast */
.ab-heading__light {
  display: block;
  font-weight: var(--weight-regular);
  color: var(--color-text-secondary);
}

/* Second line — bold, full colour */
.ab-heading__bold {
  display: block;
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
}

/* Accent word inside bold line */
.ab-heading__accent {
  color: var(--color-accent);
  font-style: normal;
  position: relative;
  display: inline-block;
}

/* Underline draws in on load */
.ab-heading__accent::after {
  content: '';
  position: absolute;
  bottom: -0.06em;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    var(--color-accent),
    rgba(168, 218, 220, 0.2)
  );
  transform: scaleX(0);
  transform-origin: left center;
  animation: abLineGrow 0.65s cubic-bezier(0.22, 1, 0.36, 1) 1.1s both;
}

@keyframes abLineGrow {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}


/* ── Supporting text ── */

.ab-subtext {
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.8;
  color: var(--color-text-muted);
  max-width: 48ch;
  margin: 0 0 clamp(2.5rem, 5vw, 3.75rem);
  text-wrap: balance;
  position: relative;
  z-index: 1;

  opacity: 0;
  animation: abFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}


/* ── Philosophy pills — three micro-values ── */

.ab-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem;
  position: relative;
  z-index: 1;

  opacity: 0;
  animation: abFadeUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
}

.ab-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-full);
  font-size: 0.65rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: rgba(168, 218, 220, 0.03);
  transition:
    border-color 0.35s ease,
    color 0.35s ease,
    background-color 0.35s ease;
}

.ab-pill:hover {
  border-color: rgba(168, 218, 220, 0.32);
  color: var(--color-accent);
  background: rgba(168, 218, 220, 0.06);
}

.ab-pill__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--color-accent);
  opacity: 0.6;
  flex-shrink: 0;
}


/* ============================================
   VISUAL COLUMN — atmospheric image/texture
   ============================================ */

.ab-visual {
  grid-area: visual;
  position: relative;
  align-self: center;

  opacity: 0;
  animation: abFadeSlide 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}

@keyframes abFadeSlide {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Image container — fixed aspect, no CLS */
.ab-visual__img-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--card-radius-lg);
  aspect-ratio: 3 / 4;
  background-color: var(--color-bg-secondary);

  /* Subtle border */
  border: 1px solid var(--color-border);
}

.ab-visual__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;

  filter: brightness(0.72) saturate(0.75);
  transition: filter 0.6s ease;
  will-change: filter;
}

.ab-visual:hover .ab-visual__img-wrap img {
  filter: brightness(0.82) saturate(0.88);
}

/* Gradient overlay on image */
.ab-visual__img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(11, 19, 43, 0.5) 0%,
    rgba(11, 19, 43, 0.15) 50%,
    transparent 100%
  );
  pointer-events: none;
}

/* Floating tag on image */
.ab-visual__tag {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.35rem 0.75rem;
  background: rgba(11, 19, 43, 0.75);
  border: 1px solid rgba(168, 218, 220, 0.18);
  border-radius: var(--border-radius-full);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  font-size: 0.58rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  z-index: 1;
}

/* Stat card floating top-right of image */
.ab-visual__stat {
  position: absolute;
  top: -1rem;
  right: -1rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  z-index: 2;
  min-width: 120px;

  /* Subtle shadow */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.ab-visual__stat-value {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: var(--weight-bold);
  letter-spacing: -0.04em;
  color: var(--color-accent);
  line-height: 1;
}

.ab-visual__stat-label {
  font-size: 0.58rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}


/* ============================================
   BOTTOM PROOF STRIP
   Sits at the section bottom — full width.
   Separated by a hairline from the content.
   ============================================ */

.ab-proof {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  flex-wrap: wrap;
  width: 100%;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--color-border);
  padding-inline: calc(3rem + clamp(2rem, 4vw, 4rem));
  /* Offset to align with content column */

  opacity: 0;
  animation: abFadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.75s both;
}

.ab-proof__item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0 clamp(1.5rem, 3vw, 2.5rem);
}

.ab-proof__item:first-child {
  padding-left: 0;
}

.ab-proof__value {
  font-family: var(--font-heading);
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  font-weight: var(--weight-bold);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--color-text-primary);
}

.ab-proof__sup {
  color: var(--color-accent);
  font-size: 0.5em;
  vertical-align: super;
  letter-spacing: 0;
}

.ab-proof__label {
  font-size: 0.6rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.ab-proof__sep {
  width: 1px;
  height: clamp(1.75rem, 3vw, 2.25rem);
  background-color: var(--color-border);
  flex-shrink: 0;
}


/* ============================================
   SHARED KEYFRAMES
   ============================================ */

@keyframes abFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes abFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ============================================
   RESPONSIVE — TABLET (≤ 1024px)
   Drop visual column — 2-col layout
   ============================================ */

@media (max-width: 1024px) {
  .ab-grid {
    grid-template-columns: 3rem 1fr;
    grid-template-areas:
      'side content'
      '.    visual';
  }

  .ab-visual {
    grid-area: visual;
    margin-top: clamp(2rem, 4vw, 3rem);
  }

  .ab-visual__img-wrap {
    aspect-ratio: 16 / 7;
  }

  .ab-visual__stat {
    top: auto;
    bottom: 1.25rem;
    right: 1.25rem;
  }

  .ab-content::after {
    font-size: clamp(5rem, 12vw, 10rem);
    right: 0;
    bottom: -1rem;
  }

  .ab-proof {
    padding-inline: calc(3rem + clamp(2rem, 4vw, 4rem));
  }
}


/* ============================================
   RESPONSIVE — MOBILE (≤ 768px)
   Single column, side col hidden
   ============================================ */

@media (max-width: 768px) {
  .ab-section {
    min-height: auto;
    padding-top: 4.5rem;
    align-items: flex-start;
  }

  .ab-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      'content'
      'visual';
    gap: clamp(2rem, 5vw, 3rem) 0;
  }

  .ab-side { display: none; }

  .ab-content::after {
    font-size: clamp(4rem, 20vw, 8rem);
    right: -0.5rem;
    bottom: -0.5rem;
    opacity: 0.03;
  }

  .ab-heading {
    letter-spacing: -0.03em;
    max-width: none;
  }

  .ab-subtext { max-width: none; }

  .ab-visual__img-wrap {
    aspect-ratio: 4 / 3;
  }

  .ab-visual__stat {
    top: auto;
    bottom: 1rem;
    right: 1rem;
  }

  .ab-proof {
    padding-inline: 0;
    justify-content: flex-start;
    gap: 0;
  }

  .ab-proof__item {
    flex: 0 0 50%;
    padding: 0.875rem 1rem;
    position: relative;
  }

  .ab-proof__item:nth-child(odd) {
    border-right: 1px solid var(--color-border);
    padding-left: 0;
  }

  .ab-proof__item:nth-child(3),
  .ab-proof__item:nth-child(4) {
    border-top: 1px solid var(--color-border);
  }

  .ab-proof__sep { display: none; }
}


/* ============================================
   RESPONSIVE — SMALL MOBILE (≤ 480px)
   ============================================ */

@media (max-width: 480px) {
  .ab-pills { gap: 0.5rem; }

  .ab-pill {
    padding: 0.35rem 0.75rem;
    font-size: 0.6rem;
  }
}


/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .ab-section::before { animation: none !important; }

  .ab-eyebrow__dot { animation: none !important; }

  .ab-side,
  .ab-eyebrow,
  .ab-heading,
  .ab-subtext,
  .ab-pills,
  .ab-visual,
  .ab-proof {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .ab-heading__accent::after {
    transform: scaleX(1) !important;
    opacity: 1 !important;
    animation: none !important;
  }

  .ab-visual__img-wrap img,
  .ab-pill {
    transition: none !important;
  }
}

/* ============================================
   TMT THEME — ABOUT PHILOSOPHY SECTION
   Namespace: ap- (About Philosophy)
   Append to: assets/css/about.css
   (after all ab- styles)

   CONCEPT: "The Argument"
   ─────────────────────────────────────────────
   Reads like a well-structured editorial essay.
   A ghost "?" sits at low opacity behind the
   left column — visual metaphor for "why?".
   Four philosophy blocks use a numbered ledger
   with ruled rows — no cards, no borders, no
   decoration. The argument IS the design.

   LAYOUT:
   Desktop: [label+headline LEFT] [4-block grid RIGHT]
   Asymmetric — 42/58 split.

   CSS TECHNIQUES:
   • CSS Grid — asymmetric 2-column editorial
   • CSS counter on .ap-block for auto-numbering
   • Ghost "?" via .ap-left::after pseudo
   • ::before ruled top line per block
   • transform: scaleX draw-in on ::before rule
   • text-wrap: balance throughout
   • @keyframes stagger via --i custom property
   • filter + opacity on block hover (GPU only)
   • No JS. No layout shift.
   ============================================ */


/* ============================================
   SECTION SHELL
   ============================================ */

.ap-section {
  position: relative;
  background-color: var(--color-bg-secondary); /* #1C2541 — alternates from ab- */
  padding-block: clamp(5rem, 9vw, 8rem);
  overflow: hidden;
}

/* Top separator from ab- */
.ap-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-border) 15%,
    rgba(168, 218, 220, 0.18) 50%,
    var(--color-border) 85%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* Ambient background glow — right side */
.ap-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 55% 50% at 100% 50%,
      rgba(69, 123, 157, 0.07) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 30% 40% at 0% 20%,
      rgba(168, 218, 220, 0.04) 0%,
      transparent 55%
    );
  pointer-events: none;
  z-index: 0;
}


/* ============================================
   CONTAINER
   ============================================ */

.ap-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}


/* ============================================
   OUTER GRID — asymmetric 42/58 editorial split
   Left: sticky label + headline
   Right: four philosophy blocks
   ============================================ */

.ap-grid {
  display: grid;
  grid-template-columns: 42fr 58fr;
  gap: 0 clamp(3rem, 6vw, 6rem);
  align-items: start;
}


/* ============================================
   LEFT COLUMN — anchored label + headline
   Sticky on desktop so it stays in view while
   scrolling the right column (CSS sticky, no JS)
   ============================================ */

.ap-left {
  position: sticky;
  top: 7rem;   /* clears fixed nav */
  padding-right: clamp(1rem, 3vw, 2rem);
  position: relative;  /* for ghost element */

  opacity: 0;
  animation: apFadeUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

/* Ghost "?" — editorial depth marker */
.ap-left::after {
  content: '?';
  position: absolute;
  bottom: -3rem;
  left: -1.5rem;
  font-family: var(--font-heading);
  font-size: clamp(10rem, 22vw, 18rem);
  font-weight: var(--weight-bold);
  letter-spacing: -0.06em;
  line-height: 1;
  color: rgba(168, 218, 220, 0.04);
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

/* Label */
.ap-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.ap-label__rule {
  display: block;
  width: 1.75rem;
  height: 1px;
  background: linear-gradient(90deg, var(--color-accent), transparent);
  flex-shrink: 0;
}

.ap-label__text {
  font-size: 0.65rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Headline — H2 */
.ap-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: var(--weight-bold);
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: var(--color-text-primary);
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  max-width: 14em;
  text-wrap: balance;
  position: relative;
  z-index: 1;
}

.ap-heading__accent {
  color: var(--color-accent);
  font-style: normal;
}

/* Supporting intro text below headline */
.ap-intro {
  font-size: clamp(0.9375rem, 1.4vw, 1rem);
  line-height: 1.8;
  color: var(--color-text-muted);
  max-width: 38ch;
  margin: 0;
  text-wrap: balance;
  position: relative;
  z-index: 1;
}


/* ============================================
   RIGHT COLUMN — four philosophy blocks
   CSS counter auto-numbers each block.
   ============================================ */

.ap-blocks {
  counter-reset: ap-block;
  display: flex;
  flex-direction: column;
  gap: 0;
}


/* ============================================
   PHILOSOPHY BLOCK
   Ruled-row ledger entry — no card, no border.
   ::before is the top rule that draws in on load.
   ============================================ */

.ap-block {
  counter-increment: ap-block;
  position: relative;
  padding-block: clamp(2rem, 4vw, 2.75rem);

  /* Stagger scroll-in reveal */
  opacity: 0;
  animation: apBlockReveal 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 0.1s + 0.2s);

  transition: background-color 0.4s ease;
}

/* Hover: very subtle background lift */
.ap-block:hover {
  background-color: rgba(168, 218, 220, 0.02);
}

/* Top rule — draws in from left on load */
.ap-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(168, 218, 220, 0.25) 0%,
    rgba(168, 218, 220, 0.08) 60%,
    transparent 100%
  );
  transform: scaleX(0);
  transform-origin: left;
  animation: apRuleGrow 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 0.1s + 0.15s);
}

@keyframes apRuleGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Block inner layout: [counter | content] */
.ap-block__inner {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0 1.25rem;
  align-items: start;
}

/* Auto-generated counter */
.ap-block__num {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  color: var(--color-accent);
  opacity: 0.5;
  padding-top: 0.1rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Content: category chip + statement + explanation */
.ap-block__body {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

/* Category chip */
.ap-block__cat {
  font-size: 0.6rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  opacity: 0.75;
}

/* Main statement — H3 */
.ap-block__title {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 1.8vw, 1.1875rem);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--color-text-primary);
  margin: 0;
  text-wrap: balance;
  transition: color 0.35s ease;
}

.ap-block:hover .ap-block__title {
  color: var(--color-accent);
}

/* Explanation sentence */
.ap-block__text {
  font-size: clamp(0.875rem, 1.3vw, 0.9375rem);
  line-height: 1.75;
  color: var(--color-text-muted);
  margin: 0;
  max-width: 52ch;
  text-wrap: balance;
}


/* ============================================
   CLOSING ACCENT ROW
   Full-width final rule + philosophy quote
   Sits below the grid, before next section
   ============================================ */

.ap-close {
  margin-top: clamp(3.5rem, 7vw, 6rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;

  opacity: 0;
  animation: apFadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.75s both;
}

/* Quote — left side */
.ap-close__quote {
  font-family: var(--font-heading);
  font-size: clamp(0.9375rem, 1.6vw, 1.125rem);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  color: var(--color-text-secondary);
  max-width: 52ch;
  line-height: 1.5;
  text-wrap: balance;
}

.ap-close__quote em {
  color: var(--color-accent);
  font-style: normal;
}

/* Right side — attribution */
.ap-close__attr {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  align-items: flex-end;
  flex-shrink: 0;
}

.ap-close__attr-name {
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: 0.02em;
}

.ap-close__attr-role {
  font-size: 0.6rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}


/* ============================================
   SHARED KEYFRAMES
   ============================================ */

@keyframes apFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes apBlockReveal {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}


/* ============================================
   RESPONSIVE — TABLET (≤ 1024px)
   ============================================ */

@media (max-width: 1024px) {
  .ap-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0 clamp(2rem, 4vw, 3.5rem);
  }

  .ap-left::after {
    font-size: clamp(8rem, 16vw, 14rem);
    left: -1rem;
  }
}


/* ============================================
   RESPONSIVE — MOBILE (≤ 768px)
   Single column — left col first, blocks below
   ============================================ */

@media (max-width: 768px) {
  .ap-section {
    padding-block: clamp(3.5rem, 7vw, 5.5rem);
  }

  .ap-grid {
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 5vw, 3.5rem) 0;
  }

  /* Unstick on mobile */
  .ap-left {
    position: relative;
    top: auto;
    padding-right: 0;
  }

  .ap-left::after {
    font-size: clamp(6rem, 22vw, 10rem);
    bottom: -2rem;
    left: auto;
    right: -0.5rem;
    opacity: 0.03;
  }

  .ap-intro { max-width: none; }

  .ap-block {
    padding-block: clamp(1.5rem, 3vw, 2rem);
  }

  .ap-block__text { max-width: none; }

  .ap-close {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .ap-close__attr { align-items: flex-start; }
}


/* ============================================
   RESPONSIVE — SMALL MOBILE (≤ 480px)
   ============================================ */

@media (max-width: 480px) {
  .ap-block__inner {
    grid-template-columns: 2rem 1fr;
    gap: 0 1rem;
  }
}


/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .ap-left,
  .ap-block,
  .ap-close {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .ap-block::before {
    transform: scaleX(1) !important;
    animation: none !important;
  }

  .ap-block__title,
  .ap-block {
    transition: none !important;
  }
}

/* ============================================
   TMT THEME — ABOUT EXPERTISE SECTION
   Namespace: ae- (About Expertise)
   Append to: assets/css/about.css
   (after all ap- styles)

   CONCEPT: "The Blueprint"
   ─────────────────────────────────────────────
   Six pillars in a non-uniform editorial mosaic.
   Row 1: two large feature blocks (50/50)
   Row 2: four compact blocks in a 2×2 grid
           offset by padding-top stagger creating
           diagonal visual tension.

   Each block:
   • Ghost number at 5% opacity (depth marker)
   • Category chip (accent label)
   • H3 title (editorial scale)
   • Short description
   • L-bracket corner draw-in on hover (pure CSS)

   CSS TECHNIQUES:
   • CSS Grid — named areas + auto-placement
   • L-bracket hover via ::before + ::after pair
   • Ghost number via .ae-block::before counter
   • transform: scaleY / scaleX on bracket arms
   • @keyframes stagger via --i custom property
   • filter + opacity transitions (GPU only)
   • text-wrap: balance throughout
   • No JS. No layout shift.
   ============================================ */


/* ============================================
   SECTION SHELL
   ============================================ */

.ae-section {
  position: relative;
  background-color: var(--color-bg-main);
  padding-block: clamp(5rem, 9vw, 8rem);
  overflow: hidden;
}

/* Top separator */
.ae-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--container-px, 1.5rem);
  right: var(--container-px, 1.5rem);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-border) 20%,
    var(--color-border) 80%,
    transparent
  );
  pointer-events: none;
  z-index: 0;
}

/* Ambient right glow */
.ae-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 50% 60% at 100% 30%,
      rgba(69, 123, 157, 0.07) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 40% 40% at 0% 70%,
      rgba(168, 218, 220, 0.04) 0%,
      transparent 55%
    );
  pointer-events: none;
  z-index: 0;
}


/* ============================================
   CONTAINER
   ============================================ */

.ae-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}


/* ============================================
   SECTION HEADER ROW
   Label left — counter right
   ============================================ */

.ae-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(3rem, 5vw, 4.5rem);
  padding-bottom: clamp(1.5rem, 2.5vw, 2rem);
  border-bottom: 1px solid var(--color-border);

  opacity: 0;
  animation: aeFadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}

.ae-header__left {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ae-header__label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ae-header__rule {
  display: block;
  width: 1.75rem;
  height: 1px;
  background: linear-gradient(90deg, var(--color-accent), transparent);
  flex-shrink: 0;
}

.ae-header__eyebrow {
  font-size: 0.65rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.ae-header__title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: var(--weight-bold);
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--color-text-primary);
  text-wrap: balance;
  max-width: 22em;
}

/* Pillar count badge */
.ae-header__count {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: var(--weight-bold);
  letter-spacing: -0.06em;
  line-height: 1;
  color: rgba(168, 218, 220, 0.08);
  flex-shrink: 0;
  user-select: none;
}


/* ============================================
   MOSAIC GRID
   Row 1: two feature blocks — equal width
   Row 2: four compact blocks — 2×2 with
           col-2 and col-4 offset via padding-top
   ============================================ */

.ae-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1px; /* hairline gap between all blocks — the grid lines ARE the gap */
  background-color: var(--color-border); /* gap colour */
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius-lg);
  overflow: hidden;
}

/* Feature row — first two blocks */
.ae-block--feature {
  grid-row: 1;
}

/* Compact row — next four blocks */
.ae-block--compact {
  grid-row: 2;
}

/* Compact blocks need 4-column sub-grid on row 2 */
.ae-mosaic {
  grid-template-columns: 1fr 1fr; /* 2 cols */
}

/* Feature blocks take 1 col each on row 1 */
.ae-block--feature:nth-child(1) { grid-column: 1; grid-row: 1; }
.ae-block--feature:nth-child(2) { grid-column: 2; grid-row: 1; }

/* For compact row we need 4 cols, so override */
.ae-mosaic {
  grid-template-columns: repeat(4, 1fr);
}

/* Re-seat feature blocks to span 2 of the 4 cols */
.ae-block--feature:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
.ae-block--feature:nth-child(2) { grid-column: 3 / 5; grid-row: 1; }

/* Compact blocks: one col each on row 2 */
.ae-block--compact:nth-child(3) { grid-column: 1; grid-row: 2; }
.ae-block--compact:nth-child(4) { grid-column: 2; grid-row: 2; }
.ae-block--compact:nth-child(5) { grid-column: 3; grid-row: 2; }
.ae-block--compact:nth-child(6) { grid-column: 4; grid-row: 2; }

/* Visual stagger — every other compact block drops slightly */
.ae-block--compact:nth-child(even) {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}


/* ============================================
   EXPERTISE BLOCK — shared base styles
   ============================================ */

.ae-block {
  position: relative;
  background-color: var(--color-bg-main);
  padding: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;

  /* Stagger scroll-in */
  opacity: 0;
  animation: aeBlockReveal 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 0.08s + 0.15s);

  transition:
    background-color 0.45s ease;
}

.ae-block:hover {
  background-color: var(--color-bg-secondary);
}

/* Ghost number — pure CSS depth marker */
.ae-block__ghost {
  position: absolute;
  bottom: -0.5rem;
  right: 0.5rem;
  font-family: var(--font-heading);
  font-size: clamp(5rem, 8vw, 8rem);
  font-weight: var(--weight-bold);
  letter-spacing: -0.06em;
  line-height: 1;
  color: rgba(168, 218, 220, 0.045);
  pointer-events: none;
  user-select: none;
  z-index: 0;

  /* Feature block gets larger ghost */
  transition: opacity 0.4s ease;
}

.ae-block--feature .ae-block__ghost {
  font-size: clamp(7rem, 14vw, 13rem);
}

.ae-block:hover .ae-block__ghost {
  opacity: 0.6; /* still barely visible — stays atmospheric */
}


/* ──────────────────────────────────────────
   L-BRACKET CORNER EFFECT (pure CSS)
   Two thin lines form an L at bottom-left.
   On hover: vertical arm grows down from top,
   horizontal arm grows right from left.
   Both start invisible and draw in.
   ────────────────────────────────────────── */

/* Vertical arm */
.ae-block::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 2.5rem;
  background: var(--color-accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 2;
}

/* Horizontal arm */
.ae-block::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 2.5rem;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.04s;
  z-index: 2;
}

.ae-block:hover::before { transform: scaleY(1); }
.ae-block:hover::after  { transform: scaleX(1); }


/* ── Block content ── */

.ae-block__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  height: 100%;
}

/* Number + category row */
.ae-block__top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}

.ae-block__num {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.18em;
  color: var(--color-accent);
  opacity: 0.5;
}

.ae-block__cat {
  font-size: 0.6rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* H3 title */
.ae-block__title {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
  margin: 0;
  text-wrap: balance;
  transition: color 0.35s ease;
}

.ae-block--feature .ae-block__title {
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
}

.ae-block--compact .ae-block__title {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
}

.ae-block:hover .ae-block__title {
  color: var(--color-accent);
}

/* Description */
.ae-block__text {
  font-size: clamp(0.8125rem, 1.2vw, 0.875rem);
  line-height: 1.75;
  color: var(--color-text-muted);
  margin: 0;
  text-wrap: balance;
}

.ae-block--feature .ae-block__text {
  max-width: 44ch;
  font-size: clamp(0.875rem, 1.3vw, 0.9375rem);
}

.ae-block--compact .ae-block__text {
  max-width: 30ch;
}

/* Optional metric accent at bottom of feature blocks */
.ae-block__metric {
  margin-top: auto;
  padding-top: clamp(1.25rem, 2.5vw, 2rem);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.ae-block__metric-value {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: var(--weight-bold);
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--color-accent);
}

.ae-block__metric-label {
  font-size: 0.6rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}


/* ============================================
   SHARED KEYFRAMES
   ============================================ */

@keyframes aeFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes aeBlockReveal {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ============================================
   RESPONSIVE — TABLET (≤ 1024px)
   Feature row stays 2-col
   Compact row: 2×2 grid (2 cols, 2 rows)
   ============================================ */

@media (max-width: 1024px) {
  /* Re-seat compact blocks into 2-col grid */
  .ae-mosaic {
    grid-template-columns: repeat(2, 1fr);
  }

  .ae-block--feature:nth-child(1) { grid-column: 1; grid-row: 1; }
  .ae-block--feature:nth-child(2) { grid-column: 2; grid-row: 1; }

  .ae-block--compact:nth-child(3) { grid-column: 1; grid-row: 2; }
  .ae-block--compact:nth-child(4) { grid-column: 2; grid-row: 2; }
  .ae-block--compact:nth-child(5) { grid-column: 1; grid-row: 3; }
  .ae-block--compact:nth-child(6) { grid-column: 2; grid-row: 3; }

  /* Remove stagger padding on tablet */
  .ae-block--compact:nth-child(even) {
    padding-top: clamp(2rem, 4vw, 3rem);
  }

  .ae-block--compact .ae-block__text {
    max-width: none;
  }
}


/* ============================================
   RESPONSIVE — MOBILE (≤ 768px)
   Single column stack
   ============================================ */

@media (max-width: 768px) {
  .ae-section {
    padding-block: clamp(3.5rem, 7vw, 5.5rem);
  }

  .ae-mosaic {
    grid-template-columns: 1fr;
    border-radius: var(--card-radius);
  }

  .ae-block--feature:nth-child(1),
  .ae-block--feature:nth-child(2),
  .ae-block--compact:nth-child(3),
  .ae-block--compact:nth-child(4),
  .ae-block--compact:nth-child(5),
  .ae-block--compact:nth-child(6) {
    grid-column: 1;
    grid-row: auto;
  }

  /* Remove stagger on mobile */
  .ae-block--compact:nth-child(even) {
    padding-top: clamp(2rem, 4vw, 3rem);
  }

  /* No hover effects on touch */
  .ae-block:hover {
    background-color: var(--color-bg-main);
  }

  .ae-block:hover::before,
  .ae-block:hover::after {
    transform: scaleY(0) !important;
  }

  .ae-block:hover::after {
    transform: scaleX(0) !important;
  }

  .ae-block__ghost {
    font-size: clamp(5rem, 15vw, 7rem);
  }

  .ae-header {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .ae-header__count { display: none; }
}


/* ============================================
   RESPONSIVE — SMALL MOBILE (≤ 480px)
   ============================================ */

@media (max-width: 480px) {
  .ae-block {
    padding: clamp(1.5rem, 4vw, 2rem);
  }

  .ae-block--feature .ae-block__text {
    max-width: none;
  }
}


/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .ae-header,
  .ae-block {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .ae-block::before,
  .ae-block::after,
  .ae-block__title,
  .ae-block,
  .ae-block__ghost {
    transition: none !important;
  }

  /* Always show bracket in reduced motion */
  .ae-block::before { transform: scaleY(0.4); opacity: 0.3; }
  .ae-block::after  { transform: scaleX(0.4); opacity: 0.3; }
}

/* ============================================
   PROCESS / WORKFLOW — Section 4
   File: assets/css/about.css
   Replace ALL previous pw- rules with this block.
   Namespace: pw- | Pure CSS | Zero JS
   ============================================ */


/* ============================================
   KEYFRAMES
   ============================================ */

@keyframes pwFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes pwLineGrow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@keyframes pwOrbFloat {
  0%   { opacity: 0; transform: translateY(0);     }
  20%  { opacity: 1;                               }
  80%  { opacity: 1;                               }
  100% { opacity: 0; transform: translateY(-24px); }
}

@keyframes pwBarShift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}


/* ============================================
   SECTION SHELL
   ============================================ */

.pw-section {
  background-color: var(--color-bg-secondary);
  padding-block: var(--space-section-lg);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Grid texture overlay */
.pw-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(168, 218, 220, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 218, 220, 0.022) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
  z-index: 0;
}

/* Bottom fade into next section */
.pw-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 180px;
  background: linear-gradient(to bottom, transparent, var(--color-bg-secondary));
  pointer-events: none;
  z-index: 0;
}


/* ============================================
   AMBIENT ORBS
   ============================================ */

.pw-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.pw-ambient__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  animation: pwOrbFloat 12s ease-in-out infinite;
}

.pw-ambient__orb--1 {
  width: 500px;
  height: 500px;
  top: -80px;
  left: -120px;
  background: radial-gradient(circle, rgba(69, 123, 157, 0.18) 0%, transparent 70%);
}

.pw-ambient__orb--2 {
  width: 420px;
  height: 420px;
  bottom: 60px;
  right: -100px;
  background: radial-gradient(circle, rgba(168, 218, 220, 0.10) 0%, transparent 70%);
  animation-delay: 6s;
  animation-duration: 14s;
}


/* ============================================
   CONTAINER
   ============================================ */

.pw-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
  position: relative;
  z-index: 1;
}


/* ============================================
   SECTION HEADER
   ============================================ */

.pw-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem 5rem;
  align-items: end;
  margin-bottom: clamp(4rem, 7vw, 6rem);
  /* Always visible — scroll reveal applied via @supports below */
  opacity: 1;
  transform: none;
}

.pw-header__label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}

.pw-header__rule {
  display: block;
  width: 1.5rem;
  height: 2px;
  background-color: var(--color-accent);
  border-radius: 2px;
  flex-shrink: 0;
}

.pw-header__eyebrow {
  font-size: 0.68rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.pw-header__title {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-xl), 4vw, var(--text-2xl));
  font-weight: var(--weight-bold);
  line-height: 1.18;
  letter-spacing: -0.035em;
  color: var(--color-text-primary);
  margin: 0;
  text-wrap: balance;
}

.pw-header__title em {
  font-style: normal;
  color: var(--color-accent);
}

.pw-header__sub {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  /* Override WordPress p max-width: 65ch from main.css */
  max-width: 48ch;
  margin: 0;
  padding-bottom: 0.25rem;
}


/* ============================================
   COMPOSITION WRAPPER
   ============================================ */

.pw-composition {
  display: flex;
  flex-direction: column;
  gap: 0;
}


/* ============================================
   PROCESS STEP — BASE
   ============================================ */

.pw-step {
  position: relative;
  padding-block: clamp(2.5rem, 4vw, 3.5rem);
  /* Always visible — scroll reveal via @supports below */
  opacity: 1;
  transform: none;
}

/* Horizontal divider above each step */
.pw-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--color-border), transparent 80%);
  pointer-events: none;
  z-index: 0;
}


/* ============================================
   LEFT STEP LAYOUT
   3 columns: [ghost 6rem] [gap 2rem] [card 1fr]
   Ghost: col 1, row 1
   Card:  col 3, rows 1-2
   Connector: col 1, row 2
   ============================================ */

.pw-step--left {
  display: grid;
  grid-template-columns: 6rem 4rem 1fr;
  grid-template-rows: auto auto;
}

/* Ghost number — col 1, row 1 */
.pw-step--left .pw-step__ghost {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
}

/* Card — col 3, rows 1–2 */
.pw-step--left .pw-step__card {
  grid-column: 3;
  grid-row: 1 / 3;
}

/* Connector — col 1, row 2 */
.pw-step--left .pw-step__connector {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  justify-content: center;
  align-items: stretch;
  padding-block: 0.5rem;
  min-height: 2.5rem;
}


/* ============================================
   RIGHT STEP LAYOUT
   3 columns: [indent 1fr] [card 1.6fr] [ghost 6rem]
   Indent:    col 1 (invisible spacer span)
   Card:      col 2, rows 1-2
   Ghost:     col 3, row 1
   Connector: col 3, row 2
   ============================================ */

.pw-step--right {
  display: grid;
  grid-template-columns: clamp(3rem, 8vw, 7rem) 1fr 6rem;
  grid-template-rows: auto auto;
  gap: 0 2rem;
}

/* Invisible indent spacer — col 1, row 1 */
.pw-step--right .pw-step__indent {
  grid-column: 1;
  grid-row: 1;
  display: block;
}

/* Card — col 2, rows 1–2 */
.pw-step--right .pw-step__card {
  grid-column: 2;
  grid-row: 1 / 3;
}

/* Ghost number — col 3, row 1 */
.pw-step--right .pw-step__ghost {
  grid-column: 3;
  grid-row: 1;
  text-align: right;
  align-self: start;
}

/* Connector — col 3, row 2 */
.pw-step--right .pw-step__connector {
  grid-column: 3;
  grid-row: 2;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  padding-block: 0.5rem;
  min-height: 2.5rem;
}


/* ============================================
   GHOST NUMBER — shared styles
   ============================================ */

.pw-step__ghost {
  font-family: var(--font-heading);
  font-size: clamp(4rem, 8vw, 6.5rem);
  font-weight: var(--weight-bold);
  letter-spacing: -0.06em;
  line-height: 0.85;
  color: rgba(168, 218, 220, 0.055);
  pointer-events: none;
  user-select: none;
  padding-top: 0.15em;
  transition: color 0.45s ease;
}

.pw-step:hover .pw-step__ghost {
  color: rgba(168, 218, 220, 0.12);
}


/* ============================================
   CONNECTOR TRACK
   ============================================ */

.pw-step__connector-track {
  display: block;
  width: 1px;
  flex: 1;
  background: linear-gradient(
    to bottom,
    rgba(168, 218, 220, 0.25),
    rgba(168, 218, 220, 0.03)
  );
  border-radius: 1px;
  transform-origin: top center;
  /* Default: visible (no JS dependency) */
  transform: scaleY(1);
}


/* ============================================
   STEP CARD
   ============================================ */

.pw-step__card {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: relative;
  overflow: hidden;
  transition:
    border-color 0.35s ease,
    box-shadow   0.35s ease,
    transform    0.35s ease;
  outline: none;
}

/* ── Animated top shimmer bar — first child span ── */
.pw-step__card-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--color-accent-teal),
    var(--color-accent),
    var(--color-accent-teal)
  );
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity 0.35s ease;
  animation: pwBarShift 4s ease infinite;
  animation-play-state: paused;
  z-index: 2;
  /* Sit above card padding — needs to escape card's overflow:hidden clip */
  border-radius: var(--card-radius-lg) var(--card-radius-lg) 0 0;
  display: block;
  /* Pull up to card top edge */
  margin-top: calc(-1 * clamp(1.75rem, 3vw, 2.5rem));
  margin-left: calc(-1 * clamp(1.75rem, 3vw, 2.5rem));
  margin-right: calc(-1 * clamp(1.75rem, 3vw, 2.5rem));
  margin-bottom: 0;
  width: calc(100% + (2 * clamp(1.75rem, 3vw, 2.5rem)));
  /* Push content back down so gap isn't eaten */
  flex-shrink: 0;
  height: 2px;
}

.pw-step:hover .pw-step__card-bar {
  opacity: 1;
  animation-play-state: running;
}

/* ── L-bracket corner — top-right (mirrored from ae-block bottom-left) ── */

/* Vertical arm */
.pw-step__card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 2.5rem;
  background: var(--color-accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 3;
}

/* Horizontal arm */
.pw-step__card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 2.5rem;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.04s;
  z-index: 3;
}

.pw-step:hover .pw-step__card::before { transform: scaleY(1); }
.pw-step:hover .pw-step__card::after  { transform: scaleX(1); }

/* Card hover elevation */
.pw-step:hover .pw-step__card {
  border-color: rgba(168, 218, 220, 0.28);
  box-shadow:
    0 0 0 1px rgba(168, 218, 220, 0.06),
    0 20px 56px rgba(0, 0, 0, 0.38),
    0 0 64px rgba(168, 218, 220, 0.04);
  transform: translateY(-3px);
}

.pw-step__card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}


/* ============================================
   CARD META ROW
   ============================================ */

.pw-step__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.pw-step__index {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.18em;
  color: var(--color-accent);
  opacity: 0.5;
}

.pw-step__phase {
  font-size: 0.6rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.pw-step__tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.6rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background-color: rgba(47, 62, 92, 0.55);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-full);
  padding: 0.22rem 0.6rem;
  margin-left: auto;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.pw-step:hover .pw-step__tag {
  color: var(--color-accent);
  border-color: rgba(168, 218, 220, 0.22);
}


/* ============================================
   CARD TITLE
   ============================================ */

.pw-step__title {
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: var(--weight-semibold);
  line-height: 1.22;
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
  margin: 0;
  text-wrap: balance;
  transition: color 0.3s ease;
}

.pw-step:hover .pw-step__title {
  color: var(--color-accent);
}


/* ============================================
   CARD BODY TEXT
   Override WordPress p { max-width: 65ch } from main.css
   ============================================ */

.pw-step__body {
  font-size: 0.9375rem;
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  /* Hard override — WP injects max-width: 65ch on all p */
  max-width: none !important;
  margin: 0;
}


/* ============================================
   DELIVERABLES LIST
   Full WordPress reset — prevents default bullets
   ============================================ */

.pw-step__deliverables {
  /* WordPress ul reset */
  list-style:      none !important;
  list-style-type: none !important;
  margin:          0    !important;
  padding:         0    !important;
  padding-top:     var(--space-5) !important;

  display:         flex;
  flex-direction:  column;
  gap:             0.55rem;
  border-top:      1px solid var(--color-border);
}

/* Kill ::marker pseudo (modern browsers) and ::before (theme compat) */
.pw-step__deliverables li::marker,
.pw-step__deliverables li::before {
  content: none    !important;
  display: none    !important;
}

.pw-step__deliverable {
  display:      flex        !important;
  align-items:  center;
  gap:          0.65rem;
  font-size:    0.8125rem;
  font-weight:  var(--weight-medium);
  color:        var(--color-text-secondary);
  letter-spacing: 0.01em;
  /* Override any WP indent */
  padding-left:  0 !important;
  margin-left:   0 !important;
  transition:    color 0.25s ease;
}

.pw-step:hover .pw-step__deliverable {
  color: var(--color-text-primary);
}

/* Custom accent dot */
.pw-step__deliverable-dot {
  display:    inline-block;
  width:      5px;
  height:     5px;
  min-width:  5px;
  border-radius: 50%;
  background-color: var(--color-accent);
  flex-shrink: 0;
  opacity: 0.45;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.pw-step:hover .pw-step__deliverable-dot {
  opacity: 1;
  transform: scale(1.4);
}


/* ============================================
   TERMINAL METRIC — Step 04 only
   ============================================ */

.pw-step__metric {
  display:     flex;
  align-items: baseline;
  gap:         0.5rem;
  margin-top:  auto;
  padding-top: var(--space-5);
  border-top:  1px solid var(--color-border);
}

.pw-step__metric-value {
  font-family:    var(--font-heading);
  font-size:      clamp(2rem, 4vw, 2.75rem);
  font-weight:    var(--weight-bold);
  letter-spacing: -0.05em;
  line-height:    1;
  color:          var(--color-accent);
}

.pw-step__metric-suffix {
  font-size:      0.55em;
  vertical-align: super;
  color:          var(--color-accent);
}

.pw-step__metric-label {
  font-size:      0.68rem;
  font-weight:    var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--color-text-muted);
}


/* ============================================
   SCROLL-DRIVEN REVEAL — @supports guard
   Base state: always visible (opacity: 1, transform: none)
   Enhanced state: fade-up only when animation-timeline
   is natively supported (Chrome 115+, Edge 115+)
   Safari/Firefox see content immediately — no blank sections.
   ============================================ */

@supports (animation-timeline: view()) {

  .pw-header {
    opacity: 0;
    transform: translateY(24px);
    animation: pwFadeUp 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }

  .pw-step {
    opacity: 0;
    transform: translateY(28px);
    animation: pwFadeUp 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }

  /* Staggered delays per step */
  .pw-step:nth-child(1) { animation-delay: 0s;    }
  .pw-step:nth-child(2) { animation-delay: 0.07s; }
  .pw-step:nth-child(3) { animation-delay: 0.14s; }
  .pw-step:nth-child(4) { animation-delay: 0.21s; }

  /* Connector draw — only animate in supported browsers */
  .pw-step__connector-track {
    transform: scaleY(0);
    animation: pwLineGrow 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation-timeline: view();
    animation-range: entry 20% entry 70%;
  }

}


/* ============================================
   RESPONSIVE — TABLET (≤ 1024px)
   Right steps: collapse indent, keep ghost right
   ============================================ */

@media (max-width: 1024px) {

  .pw-header {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .pw-header__sub { max-width: 60ch; }

  /* Tighten left-step ghost column */
  .pw-step--left {
    grid-template-columns: 4.5rem 1.5rem 1fr;
  }

  /* Right step: shrink indent */
  .pw-step--right {
    grid-template-columns: clamp(2rem, 5vw, 4rem) 1fr 4.5rem;
    gap: 0 1.5rem;
  }

}


/* ============================================
   RESPONSIVE — MOBILE (≤ 768px)
   Single-column stack, no ghost, no connector
   ============================================ */

@media (max-width: 768px) {

  .pw-section {
    padding-block: var(--space-section-sm);
  }

  /* Both left and right collapse to single column */
  .pw-step--left,
  .pw-step--right {
    display: block;
    padding-block: 2rem;
  }

  /* Hide ghost numbers and connectors on mobile */
  .pw-step__ghost,
  .pw-step__connector,
  .pw-step__indent {
    display: none;
  }

  /* Card takes full width */
  .pw-step__card {
    width: 100%;
  }

  .pw-header {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .pw-header__title {
    font-size: clamp(var(--text-lg), 6vw, var(--text-xl));
  }

  /* Disable elevation hover on touch devices */
  .pw-step:hover .pw-step__card {
    transform: none;
    box-shadow: none;
    border-color: var(--color-border);
  }

  .pw-step:hover .pw-step__card::before,
  .pw-step:hover .pw-step__card::after {
    transform: scale(0);
  }

  .pw-step:hover .pw-step__card-bar {
    opacity: 0;
    animation-play-state: paused;
  }

}


/* ============================================
   RESPONSIVE — SMALL MOBILE (≤ 480px)
   ============================================ */

@media (max-width: 480px) {

  .pw-step__card {
    padding: 1.5rem 1.25rem;
  }

  .pw-step__card-bar {
    margin-top: -1.5rem;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    width: calc(100% + 2.5rem);
  }

}


/* ============================================
   REDUCED MOTION — collapse all animation
   ============================================ */

@media (prefers-reduced-motion: reduce) {

  .pw-header,
  .pw-step,
  .pw-step__connector-track {
    animation:  none      !important;
    opacity:    1         !important;
    transform:  none      !important;
  }

  .pw-ambient__orb {
    animation:  none      !important;
    opacity:    0         !important;
  }

  .pw-step__card,
  .pw-step__title,
  .pw-step__tag,
  .pw-step__ghost,
  .pw-step__deliverable,
  .pw-step__deliverable-dot,
  .pw-step__card-bar,
  .pw-step__card::before,
  .pw-step__card::after {
    transition: none      !important;
    animation:  none      !important;
  }

  /* Show connector statically */
  .pw-step__connector-track {
    transform: scaleY(1)  !important;
  }

}