/* ==========================================================================
   pages.css: heroes, cards, accordions, tables, forms, blog components
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Home hero (video background)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: clamp(620px, 96vh, 1000px);
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--header-h) + 64px);
  padding-bottom: clamp(56px, 7vw, 104px);
  background: var(--carbon);
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media video,
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Layered scrim over the video. Sampling the decoded frames through this scrim
   across eight timestamps: at 1440 the weakest element is .hero__title em at
   4.78:1 (needs 3) and everything else clears its threshold. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right, rgba(10, 11, 12, 0.94) 0%, rgba(10, 11, 12, 0.78) 42%, rgba(10, 11, 12, 0.42) 72%, rgba(10, 11, 12, 0.55) 100%),
    linear-gradient(to top, rgba(10, 11, 12, 0.92) 0%, rgba(10, 11, 12, 0.15) 48%, rgba(10, 11, 12, 0.5) 100%);
}

/* Narrow viewports collapse the hero to one column, so the copy stack sits in
   the mid band where the vertical gradient is at its thinnest (0.15). Measured
   at 375: .hero .eyebrow fell to 4.43:1 against a #3c3b3b frame at t=6s, under
   4.5:1 for 12px text. The horizontal gradient does not help here because the
   text spans the full width. Weighting the vertical ramp fixes every element in
   the stack rather than recolouring one of them. */
@media (max-width: 999px) {
  .hero__scrim {
    background:
      linear-gradient(to right, rgba(10, 11, 12, 0.9) 0%, rgba(10, 11, 12, 0.82) 50%, rgba(10, 11, 12, 0.72) 100%),
      linear-gradient(to top, rgba(10, 11, 12, 0.94) 0%, rgba(10, 11, 12, 0.62) 55%, rgba(10, 11, 12, 0.72) 100%);
  }
}

/* Angular papaya edge: signature motif */
.hero__edge {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, var(--papaya) 0%, var(--papaya) 22%, transparent 22%);
  z-index: 1;
}

.hero__inner { position: relative; z-index: 2; width: 100%; }

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: end;
}
@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: 1.35fr 0.85fr; gap: var(--grid-gap); }
}

.hero__title {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--white);
  margin-top: 22px;
  max-width: 15ch;
}
.hero__title em { font-style: normal; color: var(--papaya); }

.hero__deck {
  margin-top: 30px;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  max-width: 56ch;
}

.hero__actions {
  margin-top: 42px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Credential chips beside the hero */
.hero__aside {
  display: grid;
  gap: 1px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.hero__stat {
  background: rgba(10, 11, 12, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 26px 28px;
}

.hero__stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--papaya);
}

.hero__stat-label {
  margin-top: 9px;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

/* Scroll cue */
.hero__cue {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(56px, 7vw, 104px);
  z-index: 2;
  display: none;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  writing-mode: vertical-rl;
}
@media (min-width: 1000px) { .hero__cue { display: flex; } }

.hero__cue::after {
  content: "";
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, var(--papaya), transparent);
}

/* Video mute/play control: respects autoplay policy + reduced motion */
.hero__vidbtn {
  position: absolute;
  right: var(--gutter);
  top: calc(var(--header-h) + 28px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(10, 11, 12, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.hero__vidbtn:hover { background: var(--papaya); color: var(--carbon); border-color: var(--papaya); }

/* --------------------------------------------------------------------------
   2. Inner page hero
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  background: var(--carbon);
  padding-top: calc(var(--header-h) + clamp(56px, 7vw, 104px));
  padding-bottom: clamp(64px, 8vw, 120px);
  overflow: hidden;
  isolation: isolate;
}

/* Angular geometry backdrop */
.page-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -20%;
  right: -6%;
  width: min(720px, 62vw);
  aspect-ratio: 1;
  background:
    conic-gradient(from 210deg at 50% 50%, rgba(255, 128, 0, 0.16), transparent 42%),
    radial-gradient(circle at 60% 40%, rgba(255, 128, 0, 0.1), transparent 62%);
  clip-path: polygon(28% 0, 100% 0, 100% 78%, 62% 100%, 0 62%);
  pointer-events: none;
}

.page-hero::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, var(--papaya) 0%, var(--papaya) 18%, rgba(255,255,255,0.1) 18%);
}

.page-hero__inner { position: relative; z-index: 1; }

.page-hero__title { margin-top: 20px; max-width: 18ch; color: var(--white); }
.page-hero__deck { margin-top: 26px; max-width: 62ch; font-size: var(--fs-lead); line-height: 1.65; color: rgba(255,255,255,0.76); }
.page-hero__actions { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 16px; }

.page-hero__grid { display: grid; gap: 48px; align-items: end; }
@media (min-width: 1000px) {
  .page-hero__grid { grid-template-columns: 1.4fr 0.8fr; gap: var(--grid-gap); }
}

.page-hero__eyebrow-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-bottom: 26px;
}

/* Key facts panel in inner heroes */
.factbox {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top: 3px solid var(--papaya);
  padding: 30px 30px 34px;
  background: rgba(255, 255, 255, 0.03);
}
.factbox__title {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 20px;
}
.factbox__list { display: grid; gap: 15px; }
.factbox__list li {
  display: flex;
  gap: 12px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}
.factbox__list svg { flex: none; align-self: flex-start; margin-top: 7.5px; color: var(--papaya); }

/* --------------------------------------------------------------------------
   3. Stat band
   -------------------------------------------------------------------------- */
.statband {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--hairline);
  border-block: 1px solid var(--hairline);
}
@media (min-width: 900px) { .statband { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.statband--dark { background: var(--hairline-dk); border-color: var(--hairline-dk); }

.stat {
  background: var(--white);
  padding: clamp(32px, 4vw, 56px) clamp(20px, 2.4vw, 36px);
}
.statband--dark .stat { background: var(--carbon); }
.bg-bone .statband .stat { background: var(--bone); }

.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--carbon);
}
.statband--dark .stat__num { color: var(--papaya); }

.stat__label {
  margin-top: 14px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--graphite);
  max-width: 26ch;
}
.statband--dark .stat__label { color: var(--silver); }

.stat__rule { width: 32px; height: 3px; background: var(--papaya); margin-bottom: 22px; }

/* --------------------------------------------------------------------------
   4. Cards
   -------------------------------------------------------------------------- */

/* Numbered service card */
.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(30px, 3.2vw, 44px);
  background: var(--white);
  border: 1px solid var(--hairline);
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease-out), background 0.4s var(--ease);
  height: 100%;
}
.svc-card::after {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  width: 0;
  height: 3px;
  background: var(--papaya);
  transition: width 0.5s var(--ease-out);
}
.svc-card:hover { border-color: #CFCFCA; transform: translateY(-4px); }
.svc-card:hover::after { width: calc(100% + 2px); }

.bg-bone .svc-card { background: var(--white); }

.svc-card__num { margin-bottom: 26px; }

.svc-card__icon { color: var(--papaya-graphic); margin-bottom: 24px; }

.svc-card__title { font-size: var(--fs-h3); margin-bottom: 16px; letter-spacing: -0.015em; }
.svc-card__title a { display: block; }
.svc-card__title a::after { content: ""; position: absolute; inset: 0; }

.svc-card__text { font-size: var(--fs-sm); line-height: 1.7; color: var(--graphite); }

.svc-card__list { margin-top: 24px; display: grid; gap: 10px; }
.svc-card__list li {
  display: flex;
  gap: 11px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--graphite);
}
.svc-card__list svg { flex: none; align-self: flex-start; margin-top: 7px; color: var(--papaya-graphic); }

.svc-card__foot { margin-top: auto; padding-top: 30px; }

/* Dark variant */
.svc-card--dark {
  background: var(--anthracite);
  border-color: var(--hairline-dk);
}
.svc-card--dark .svc-card__title { color: var(--white); }
.svc-card--dark .svc-card__text,
.svc-card--dark .svc-card__list li { color: var(--silver); }
.svc-card--dark:hover { border-color: rgba(255,255,255,0.3); }

/* Feature / value card: minimal, hairline only */
.feature {
  position: relative;
  padding-top: 34px;
  border-top: 1px solid var(--hairline);
}
.feature::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 40px; height: 3px;
  background: var(--papaya);
}
.on-dark .feature, .bg-carbon .feature { border-top-color: var(--hairline-dk); }

.feature__icon { color: var(--papaya-graphic); margin-bottom: 22px; }
.feature__title { font-size: var(--fs-h4); margin-bottom: 14px; }
.feature__text { font-size: var(--fs-sm); line-height: 1.7; }

/* Process step */
.step { position: relative; padding-top: 30px; border-top: 1px solid var(--hairline); }
.on-dark .step, .bg-carbon .step { border-top-color: var(--hairline-dk); }
.on-dark .step__num, .bg-carbon .step__num, .page-hero .step__num { color: var(--papaya); }
.step__num {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  /* 12px text, so 4.5:1 applies. --papaya measured 2.52:1 on white / 2.33:1 on bone. */
  color: var(--papaya-ink);
  margin-bottom: 18px;
  display: block;
}
.step__title { font-size: var(--fs-h4); margin-bottom: 13px; }
.step__text { font-size: var(--fs-sm); line-height: 1.7; }

/* Industry card */
.ind-card {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 40px);
  border: 1px solid var(--hairline);
  background: var(--white);
  height: 100%;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease-out);
}
.ind-card:hover { border-color: #CFCFCA; transform: translateY(-4px); }
.ind-card__icon { color: var(--papaya-graphic); margin-bottom: 24px; }
.ind-card__title { font-size: var(--fs-h4); margin-bottom: 14px; }
.ind-card__text { font-size: var(--fs-sm); line-height: 1.7; color: var(--graphite); }
.ind-card__list { margin-top: 22px; display: grid; gap: 9px; }
.ind-card__list li {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--graphite);
  padding-left: 17px;
  position: relative;
}
.ind-card__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 6px; height: 6px;
  background: var(--papaya);
}
.ind-card__note {
  margin-top: auto;
  padding-top: 24px;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--graphite);
  border-top: 1px solid var(--hairline);
  margin-top: 26px;
}
.ind-card__note strong { color: var(--carbon); font-weight: 600; }

/* Chip row */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex;
  align-items: center;
  padding: 11px 19px;
  border: 1px solid var(--hairline);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite);
  background: var(--white);
  transition: all 0.3s var(--ease);
}
a.chip:hover, .chip.is-active { background: var(--carbon); color: var(--white); border-color: var(--carbon); }
.on-dark .chip, .bg-carbon .chip {
  border-color: var(--hairline-dk);
  background: transparent;
  color: var(--silver);
}
.on-dark a.chip:hover, .bg-carbon a.chip:hover { background: var(--papaya); color: var(--carbon); border-color: var(--papaya); }

/* Icons carry the 3:1 non-text requirement. --papaya measured 2.52:1 on white
   and 2.33:1 on bone, so every papaya icon on a light surface failed; the
   --papaya-graphic tier measures 3.49:1 / 3.15:1. On the dark surfaces papaya
   already measures 7.8:1, so it is kept there for the brand accent.
   Purely decorative marks (.rule-bar, .hero__edge, .stat__rule, list bullet
   squares, .dot separators) are left on --papaya: they carry no information and
   darkening them would change the identity for no measurable gain. */
.on-dark .svc-card__icon, .bg-carbon .svc-card__icon,
.svc-card--dark .svc-card__icon,
.on-dark .svc-card__list svg, .bg-carbon .svc-card__list svg,
.svc-card--dark .svc-card__list svg,
.on-dark .feature__icon, .bg-carbon .feature__icon,
.on-dark .ind-card__icon, .bg-carbon .ind-card__icon,
.on-dark .checklist svg, .bg-carbon .checklist svg,
.on-dark .info-list__item svg, .bg-carbon .info-list__item svg,
.on-dark .marquee-strip__item svg, .bg-carbon .marquee-strip__item svg,
.page-hero .checklist svg, .cta-band .checklist svg { color: var(--papaya); }

.on-dark .acc__sign::before, .on-dark .acc__sign::after,
.bg-carbon .acc__sign::before, .bg-carbon .acc__sign::after { background: var(--papaya); }

/* --------------------------------------------------------------------------
   5. Checklists & lists
   -------------------------------------------------------------------------- */
.checklist { display: grid; gap: 16px; }
.checklist li {
  display: flex;
  gap: 14px;
  font-size: var(--fs-body);
  line-height: 1.65;
}
/* Icon rows: the reset sets `svg { height: auto }`, and a flex row defaults to
   align-items: stretch, so a 12x9 tick was being stretched to 12x50 and its glyph
   drawn in the middle of that box, landing near the second line of text.
   align-self: flex-start stops the stretch so height resolves from the intrinsic
   ratio; the margin-top then centres the icon on the first line of text. */
.checklist svg { flex: none; align-self: flex-start; margin-top: 9.5px; color: var(--papaya-graphic); }
.checklist strong { color: var(--carbon); font-weight: 600; }
.on-dark .checklist strong, .bg-carbon .checklist strong { color: var(--white); }

.checklist--2 { grid-template-columns: 1fr; }
@media (min-width: 760px) { .checklist--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 40px; } }

/* Numbered inclusion list */
.inclusions { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
@media (min-width: 700px) { .inclusions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.inclusion { background: var(--white); padding: clamp(26px, 3vw, 38px); }
.bg-bone .inclusion { background: var(--bone); }
.inclusion__num {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--papaya-ink);
  display: block;
  margin-bottom: 16px;
}
.inclusion__title { font-size: var(--fs-h4); margin-bottom: 12px; }
.inclusion__text { font-size: var(--fs-sm); line-height: 1.7; color: var(--graphite); }

/* --------------------------------------------------------------------------
   6. Accordion (FAQ)
   -------------------------------------------------------------------------- */
.accordion { border-top: 1px solid var(--hairline); }
.on-dark .accordion, .bg-carbon .accordion { border-top-color: var(--hairline-dk); }

.acc__item { border-bottom: 1px solid var(--hairline); }
.on-dark .acc__item, .bg-carbon .acc__item { border-bottom-color: var(--hairline-dk); }

.acc__btn {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  width: 100%;
  padding: 28px 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--carbon);
  transition: color 0.25s var(--ease);
}
.on-dark .acc__btn, .bg-carbon .acc__btn { color: var(--white); }
.acc__btn:hover { color: var(--papaya-ink); }
.on-dark .acc__btn:hover, .bg-carbon .acc__btn:hover { color: var(--papaya); }

.acc__sign {
  flex: none;
  position: relative;
  width: 18px; height: 18px;
  margin-top: 6px;
}
.acc__sign::before, .acc__sign::after {
  content: "";
  position: absolute;
  background: var(--papaya-graphic);
  transition: transform 0.4s var(--ease-out), opacity 0.3s var(--ease);
}
.acc__sign::before { top: 8px; left: 0; width: 18px; height: 2px; }
.acc__sign::after { left: 8px; top: 0; width: 2px; height: 18px; }
.acc__btn[aria-expanded="true"] .acc__sign::after { transform: rotate(90deg); opacity: 0; }

.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s var(--ease-out);
}
.acc__panel > div { overflow: hidden; }

/* The trigger is wrapped in an <h3> for heading semantics, so it is NOT an
   adjacent sibling of the panel, so `.acc__btn + .acc__panel` silently never
   matches. site.js mirrors the open state onto .acc__item instead. */
.acc__item.is-open > .acc__panel { grid-template-rows: 1fr; }

/* Without scripting the accordion cannot be operated, so reveal everything. */
@media (scripting: none) {
  .acc__panel { grid-template-rows: 1fr; }
  .acc__sign { display: none; }
}
.acc__panel-inner { padding-bottom: 30px; max-width: 76ch; }
.acc__panel-inner p + p { margin-top: 16px; }
.acc__panel-inner ul { margin-top: 16px; display: grid; gap: 10px; }
.acc__panel-inner ul li { padding-left: 18px; position: relative; font-size: var(--fs-sm); line-height: 1.65; }
.acc__panel-inner ul li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 6px; height: 6px; background: var(--papaya);
}

/* --------------------------------------------------------------------------
   7. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  background: var(--carbon);
  overflow: hidden;
  isolation: isolate;
}
.cta-band::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -8%; top: -40%;
  width: min(680px, 70vw);
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%, rgba(255,128,0,0.2), transparent 66%);
  clip-path: polygon(24% 0, 100% 0, 100% 74%, 58% 100%, 0 58%);
}
.cta-band::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 22%; height: 4px;
  background: var(--papaya);
}

.cta-band__inner {
  display: grid;
  gap: 40px;
  align-items: center;
  padding-block: clamp(64px, 8vw, 120px);
}
@media (min-width: 900px) {
  .cta-band__inner { grid-template-columns: 1.25fr 0.75fr; gap: clamp(48px, 6vw, 96px); }
}
.cta-band__title { color: var(--white); max-width: 18ch; }
.cta-band__text { margin-top: 24px; max-width: 54ch; color: rgba(255,255,255,0.75); font-size: var(--fs-lead); line-height: 1.6; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 16px; }
@media (min-width: 900px) { .cta-band__actions { justify-content: flex-end; } }

/* --------------------------------------------------------------------------
   8. Leadership / profile
   -------------------------------------------------------------------------- */
/* Partner photo.
   The source file is 400x400. The old rule forced it into a 4/5 frame at 100%
   of the column, which cropped away 20% of the pixels and then upscaled what was
   left: measured 1.84x at 1440 and 2.20x at 768. That upscale is what read as
   unpolished. Now the photo displays at its own aspect ratio (no crop) and is
   capped at its true pixel width (no upscale).
   --partner-photo-max is the ONE value to raise when a higher-resolution
   headshot replaces the file: set it to the new file's pixel width, capped at
   about 560px so the layout still balances. See REPLACE-ME.md section 7. */
.profile-media {
  position: relative;
  width: 100%;
  max-width: var(--partner-photo-max, 400px);
}
.profile-media img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center top;
  /* A permanent grayscale meant phone users, who cannot hover, never saw the
     photo in colour at all. A CPA firm headshot should just look like itself. */
  filter: saturate(1.03) contrast(1.02);
  transition: filter 0.6s var(--ease);
}
.profile-media:hover img { filter: saturate(1.06) contrast(1.03); }
.profile-media::before {
  content: "";
  position: absolute;
  left: -14px; bottom: -14px;
  width: 46%; height: 42%;
  border-left: 3px solid var(--papaya);
  border-bottom: 3px solid var(--papaya);
  pointer-events: none;
}

.profile-badge {
  position: absolute;
  right: 0; bottom: 0;
  background: var(--papaya);
  color: var(--carbon);
  padding: 18px 24px;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.5;
}

.pullquote {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.018em;
  color: var(--carbon);
  padding-left: 28px;
  border-left: 3px solid var(--papaya);
}
.on-dark .pullquote, .bg-carbon .pullquote { color: var(--white); }

.credential-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.credential {
  padding: 9px 16px;
  border: 1px solid var(--hairline);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--carbon);
}
.on-dark .credential, .bg-carbon .credential { border-color: var(--hairline-dk); color: var(--white); }

/* Timeline */
.timeline { display: grid; gap: 0; }
.timeline__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 40px;
  padding-block: 30px;
  border-top: 1px solid var(--hairline);
}
@media (min-width: 760px) {
  .timeline__item { grid-template-columns: 180px 1fr; }
}
.on-dark .timeline__item, .bg-carbon .timeline__item { border-top-color: var(--hairline-dk); }
.timeline__year {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--papaya-ink);
  padding-top: 4px;
}
.on-dark .timeline__year, .bg-carbon .timeline__year,
.on-dark .timeline__org, .bg-carbon .timeline__org { color: var(--papaya); }
.timeline__title { font-size: var(--fs-h4); margin-bottom: 10px; }
.timeline__org { font-size: var(--fs-sm); color: var(--papaya-ink); margin-bottom: 12px; font-weight: 500; }
.timeline__text { font-size: var(--fs-sm); line-height: 1.7; }

/* --------------------------------------------------------------------------
   9. Data table
   -------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--hairline);
  -webkit-overflow-scrolling: touch;
}
.data-table { min-width: 620px; font-size: var(--fs-sm); }
.data-table thead th {
  background: var(--carbon);
  color: var(--white);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  padding: 18px 22px;
  white-space: nowrap;
}
.data-table tbody td { padding: 18px 22px; border-top: 1px solid var(--hairline); vertical-align: top; line-height: 1.6; }
.data-table tbody tr:nth-child(even) { background: var(--bone); }
.data-table tbody th {
  padding: 18px 22px;
  border-top: 1px solid var(--hairline);
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--carbon);
  white-space: nowrap;
  vertical-align: top;
}
.data-table td strong { color: var(--carbon); font-weight: 600; }

/* The table was only ever styled for a white surface, but services.html drops it
   into a .bg-carbon section. There it measured: row headers --carbon on --carbon
   = 1.00:1 (invisible), and body cells --silver on the zebra --bone stripe =
   2.09:1. Everything that hard-codes a light-surface color needs a dark twin. */
.on-dark .data-table,
.bg-carbon .data-table { color: var(--silver); }

.on-dark .data-table tbody td,
.bg-carbon .data-table tbody td,
.on-dark .data-table tbody th,
.bg-carbon .data-table tbody th { border-top-color: var(--hairline-dk); }

.on-dark .data-table tbody tr:nth-child(even),
.bg-carbon .data-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.045); }

.on-dark .data-table tbody th,
.bg-carbon .data-table tbody th,
.on-dark .data-table td strong,
.bg-carbon .data-table td strong { color: var(--white); }

.on-dark .data-table thead th,
.bg-carbon .data-table thead th { background: var(--anthracite); }

.on-dark .table-wrap,
.bg-carbon .table-wrap { border-color: var(--hairline-dk); }

.on-dark .data-table a,
.bg-carbon .data-table a { color: var(--papaya); }

/* 20px tall as bare inline links; these are the table's primary actions. */
.data-table a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--papaya-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   10. Callouts
   -------------------------------------------------------------------------- */
.callout {
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--papaya);
  background: var(--bone);
  padding: clamp(26px, 3vw, 36px);
}
.callout__title {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--papaya-ink);
  margin-bottom: 18px;
}
.callout p { font-size: var(--fs-sm); line-height: 1.75; }
.callout ul { margin-top: 16px; display: grid; gap: 11px; }
.callout ul li { position: relative; padding-left: 19px; font-size: var(--fs-sm); line-height: 1.65; }
.callout ul li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 7px; height: 7px; background: var(--papaya);
}
.callout--white { background: var(--white); }

/* --------------------------------------------------------------------------
   11. Forms
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 26px; }
.form__row { display: grid; gap: 26px; }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.field { display: grid; gap: 9px; }

.field__label {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--carbon);
}
.field__label .req { color: var(--papaya-ink); }

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  padding: 15px 18px;
  background: var(--white);
  border: 1px solid var(--hairline);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--carbon);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  border-radius: 0;
  appearance: none;
}
.field__textarea { min-height: 158px; resize: vertical; }

.field__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235A5F63' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 46px;
  cursor: pointer;
}

/* These used `outline: none`, which out-specifies the global :focus-visible ring
   and left only a 1px papaya border (2.52:1 on white) plus a 0.16-alpha shadow
   (1.05:1) as the focus indicator. The ring is kept; the border and shadow stay
   as a secondary affordance. */
.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  border-color: var(--papaya);
  box-shadow: 0 0 0 3px rgba(255, 128, 0, 0.16);
}

.field__input::placeholder,
.field__textarea::placeholder { color: #9AA0A5; }

.field.has-error .field__input,
.field.has-error .field__select,
.field.has-error .field__textarea { border-color: #C0392B; }

.field__error {
  font-size: var(--fs-xs);
  color: #A8322A;
  display: none;
}
.field.has-error .field__error { display: block; }

.field--check { grid-template-columns: auto 1fr; align-items: start; gap: 13px; }
.field--check input[type="checkbox"] {
  width: 24px; height: 24px;
  margin-top: 1px;
  accent-color: var(--papaya);
  cursor: pointer;
  flex: none;
}
.field--check label { font-size: var(--fs-xs); line-height: 1.7; color: var(--graphite); cursor: pointer; }
.field--check .field__error { grid-column: 1 / -1; }
.field--check a { color: var(--papaya-ink); text-decoration: underline; text-underline-offset: 2px; }

.form__success {
  display: none;
  border: 1px solid var(--papaya);
  border-left-width: 3px;
  background: var(--papaya-wash);
  padding: 28px 30px;
}
.form__success.is-visible { display: block; }
.form__success h3 { font-size: var(--fs-h4); margin-bottom: 10px; }
.form__success p { font-size: var(--fs-sm); line-height: 1.7; }

.form__note { font-size: var(--fs-xs); line-height: 1.7; color: var(--graphite); }

/* --------------------------------------------------------------------------
   12. Newsletter block
   -------------------------------------------------------------------------- */
.newsletter {
  border: 1px solid var(--hairline-dk);
  border-top: 3px solid var(--papaya);
  padding: clamp(32px, 4vw, 52px);
  background: var(--anthracite);
}
.newsletter__form { display: grid; gap: 14px; margin-top: 26px; }
@media (min-width: 620px) { .newsletter__form { grid-template-columns: 1fr auto; } }
.newsletter__input {
  padding: 16px 18px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--hairline-dk);
  color: var(--white);
  font-size: var(--fs-sm);
  border-radius: 0;
}
.newsletter__input::placeholder { color: #7C8287; }
.newsletter__input:focus { border-color: var(--papaya); }

/* --------------------------------------------------------------------------
   13. Blog
   -------------------------------------------------------------------------- */

/* Reading progress */
.progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: var(--papaya);
  z-index: 150;
  transition: width 0.1s linear;
}

/* Featured post */
.post-featured {
  display: grid;
  gap: 0;
  border: 1px solid var(--hairline);
  background: var(--white);
}
@media (min-width: 900px) { .post-featured { grid-template-columns: 1fr 1fr; } }

.post-featured__media {
  position: relative;
  min-height: 300px;
  background: var(--carbon);
  overflow: hidden;
}
.post-featured__body { padding: clamp(32px, 4vw, 60px); display: flex; flex-direction: column; }
.post-featured__title { font-size: clamp(1.5rem, 2.6vw, 2.25rem); margin-block: 20px; letter-spacing: -0.022em; line-height: 1.12; }
.post-featured__excerpt { font-size: var(--fs-sm); line-height: 1.75; color: var(--graphite); }
.post-featured__foot { margin-top: auto; padding-top: 32px; }

/* Post card */
.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  background: var(--white);
  height: 100%;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease-out);
}
.post-card:hover { border-color: #CFCFCA; transform: translateY(-4px); }

.post-card__media { position: relative; aspect-ratio: 16 / 9; background: var(--carbon); overflow: hidden; }
.post-card__body { padding: clamp(24px, 2.6vw, 34px); display: flex; flex-direction: column; flex: 1; }
.post-card__title {
  font-size: var(--fs-h4);
  line-height: 1.28;
  margin-block: 16px 14px;
}
.post-card__title a::after { content: ""; position: absolute; inset: 0; }
.post-card__excerpt { font-size: 0.875rem; line-height: 1.7; color: var(--graphite); }
.post-card__foot {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--fs-xs);
  color: var(--graphite);
}
.post-card__foot .dot { width: 3px; height: 3px; background: var(--papaya); flex: none; }

/* Category badge */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  background: var(--papaya-wash);
  color: var(--papaya-ink);
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
}
.badge--solid { background: var(--papaya); color: var(--carbon); }
.badge--dark { background: rgba(255,255,255,0.1); color: var(--papaya); }

/* Generative post artwork (no photos) */
.post-art { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Blog toolbar */
.blog-toolbar {
  display: grid;
  gap: 24px;
  padding-block: 32px;
  border-block: 1px solid var(--hairline);
}
@media (min-width: 900px) {
  .blog-toolbar { grid-template-columns: 1fr auto; align-items: center; gap: 40px; }
}

.search-field { position: relative; max-width: 420px; width: 100%; }
.search-field svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--graphite); pointer-events: none; }
.search-field input {
  width: 100%;
  padding: 14px 44px 14px 46px;
  border: 1px solid var(--hairline);
  font-size: var(--fs-sm);
  background: var(--white);
  border-radius: 0;
}
.search-field input:focus { border-color: var(--papaya); box-shadow: 0 0 0 3px rgba(255,128,0,0.16); }
.search-clear {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px;
  display: none; align-items: center; justify-content: center;
  color: var(--graphite);
}
.search-field.has-value .search-clear { display: flex; }

.blog-count { font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--font-display); font-weight: 600; color: var(--graphite); }

.empty-state { padding: clamp(56px, 8vw, 100px) 0; text-align: center; }
.empty-state svg { color: var(--hairline); margin-inline: auto; margin-bottom: 24px; }

/* Pagination */
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.pagination button {
  min-width: 46px; height: 46px;
  padding-inline: 14px;
  border: 1px solid var(--hairline);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--graphite);
  background: var(--white);
  transition: all 0.3s var(--ease);
  display: inline-flex; align-items: center; justify-content: center;
}
.pagination button:hover:not(:disabled) { border-color: var(--carbon); color: var(--carbon); }
.pagination button[aria-current="page"] { background: var(--carbon); border-color: var(--carbon); color: var(--white); }
.pagination button:disabled { opacity: 0.35; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   14. Article
   -------------------------------------------------------------------------- */
.article-layout { display: grid; gap: var(--grid-gap); }
@media (min-width: 1060px) {
  .article-layout { grid-template-columns: 250px minmax(0, 1fr); gap: clamp(48px, 5vw, 88px); align-items: start; }
}

.toc { display: none; }
@media (min-width: 1060px) {
  .toc { display: block; position: sticky; top: calc(var(--header-h) + 32px); }
}
.toc__title {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--carbon);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 18px;
}
.toc__list { display: grid; gap: 2px; }
.toc__list a {
  display: block;
  padding: 9px 0 9px 16px;
  border-left: 2px solid var(--hairline);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--graphite);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.toc__list a:hover { color: var(--carbon); border-left-color: #C4C4C0; }
.toc__list a.is-active { color: var(--papaya-ink); border-left-color: var(--papaya); font-weight: 600; }

/* Article body typography */
.article-body { max-width: 74ch; }
.article-body > * + * { margin-top: 26px; }
.article-body h2 {
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  text-transform: none;
  letter-spacing: -0.022em;
  line-height: 1.16;
  margin-top: clamp(52px, 5vw, 76px);
  padding-top: 6px;
}
.article-body h3 {
  font-size: clamp(1.1875rem, 1.6vw, 1.375rem);
  margin-top: clamp(36px, 3.6vw, 48px);
  letter-spacing: -0.015em;
}
.article-body p { font-size: 1.0625rem; line-height: 1.8; }
.article-body strong { color: var(--carbon); font-weight: 600; }
.article-body a:not(.btn):not(.link-arrow) {
  color: var(--papaya-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.25s var(--ease);
}
.article-body a:not(.btn):not(.link-arrow):hover { color: var(--papaya-deep); }

.article-body ul, .article-body ol { display: grid; gap: 13px; padding-left: 0; }
.article-body ul li { position: relative; padding-left: 24px; line-height: 1.75; }
.article-body ul li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 7px; height: 7px; background: var(--papaya);
}
.article-body ol { counter-reset: ol; }
.article-body ol li { position: relative; padding-left: 38px; line-height: 1.75; counter-increment: ol; }
.article-body ol li::before {
  content: counter(ol, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--papaya-ink);
  line-height: 1.9;
}

.article-body blockquote {
  margin-block: clamp(36px, 4vw, 52px);
  padding-left: 30px;
  border-left: 3px solid var(--papaya);
  font-family: var(--font-display);
  font-size: clamp(1.1875rem, 1.9vw, 1.5rem);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.018em;
  color: var(--carbon);
}
.article-body blockquote cite {
  display: block;
  margin-top: 16px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--graphite);
}

.article-body figure { margin-block: clamp(32px, 4vw, 48px); }
.article-body figcaption { margin-top: 14px; font-size: var(--fs-xs); color: var(--graphite); line-height: 1.6; }

/* Article header */
.article-head { max-width: 900px; }
/* .article-head lives inside .page-hero, which paints --carbon via a plain
   `background` rather than the .bg-carbon class, so the `.bg-carbon h1` and
   `.on-dark h1` inversions never matched and this h1 inherited --ink (#0A0B0C)
   on #0A0B0C: measured 1.00:1, i.e. an invisible 64px headline on all seven
   article pages. .page-hero__title sets --white explicitly; this needs the same. */
.article-head__title {
  margin-top: 22px;
  color: var(--white);
  text-transform: none;
  letter-spacing: -0.028em;
  line-height: 1.06;
}
.article-head__deck { margin-top: 26px; font-size: var(--fs-lead); line-height: 1.6; color: rgba(255,255,255,0.78); max-width: 62ch; }

.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 40px; }
.byline__avatar {
  width: 54px; height: 54px;
  object-fit: cover;
  object-position: center 20%;
  border: 2px solid var(--papaya);
  flex: none;
}
.byline__meta { display: grid; gap: 5px; }
.byline__name {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.01em;
}
.byline__role { font-size: var(--fs-xs); color: var(--silver); }
.byline__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: var(--fs-xs); color: var(--silver); }
.byline__facts .dot { width: 3px; height: 3px; background: var(--papaya); flex: none; }

/* Key takeaways */
.takeaways {
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--papaya);
  background: var(--bone);
  padding: clamp(28px, 3.2vw, 40px);
}
.takeaways__title {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--papaya-ink);
  margin-bottom: 20px;
}
.takeaways ul { display: grid; gap: 13px; }
.takeaways ul li {
  position: relative;
  padding-left: 26px;
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.takeaways ul li::before {
  content: "";
  position: absolute; left: 0; top: 9px;
  width: 11px; height: 7px;
  border-left: 2px solid var(--papaya);
  border-bottom: 2px solid var(--papaya);
  transform: rotate(-45deg);
}

/* Share */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.share__label {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-right: 4px;
}
.share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--hairline);
  color: var(--graphite);
  transition: all 0.3s var(--ease);
}
.share__btn:hover { background: var(--papaya); border-color: var(--papaya); color: var(--carbon); }
.share__btn.is-copied { background: var(--carbon); border-color: var(--carbon); color: var(--papaya); }

/* Author bio */
.author-box {
  display: grid;
  gap: 30px;
  border: 1px solid var(--hairline);
  padding: clamp(28px, 3.4vw, 44px);
  background: var(--bone);
}
@media (min-width: 700px) { .author-box { grid-template-columns: 128px 1fr; gap: 36px; } }
.author-box__photo {
  width: 128px; height: 160px;
  object-fit: cover;
  object-position: center 18%;
  filter: grayscale(100%);
}
.author-box__name { font-size: var(--fs-h4); margin-bottom: 8px; }
.author-box__role { font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--papaya-ink); font-family: var(--font-display); font-weight: 600; margin-bottom: 18px; }
.author-box__bio { font-size: var(--fs-sm); line-height: 1.75; }

/* Prev / next */
.postnav { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
@media (min-width: 760px) { .postnav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.postnav__item {
  background: var(--white);
  padding: clamp(26px, 3vw, 38px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background 0.3s var(--ease);
}
.postnav__item:hover { background: var(--bone); }
.postnav__dir {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--papaya-ink);
}
.postnav__item--next { text-align: right; }
.postnav__item--next .postnav__dir { justify-content: flex-end; }
.postnav__title { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; line-height: 1.3; color: var(--carbon); letter-spacing: -0.012em; }
.postnav__item--empty { pointer-events: none; opacity: 0.45; }

/* Tag list */
.taglist { display: flex; flex-wrap: wrap; gap: 9px; }
.tag {
  display: inline-flex;
  padding: 8px 14px;
  border: 1px solid var(--hairline);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--graphite);
  transition: all 0.3s var(--ease);
}
a.tag:hover { border-color: var(--carbon); color: var(--carbon); }

/* --------------------------------------------------------------------------
   15. Resource card
   -------------------------------------------------------------------------- */
.res-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  background: var(--white);
  padding: clamp(28px, 3vw, 40px);
  height: 100%;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease-out);
}
.res-card:hover { border-color: #CFCFCA; transform: translateY(-4px); }
.res-card__type {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--papaya-ink);
  margin-bottom: 24px;
}
.res-card__title { font-size: var(--fs-h4); margin-bottom: 14px; }
.res-card__text { font-size: var(--fs-sm); line-height: 1.7; color: var(--graphite); }
.res-card__foot { margin-top: auto; padding-top: 28px; }
.res-card__meta { font-size: var(--fs-xs); color: var(--graphite); margin-top: 14px; }

/* --------------------------------------------------------------------------
   16. Misc
   -------------------------------------------------------------------------- */
.divider { height: 1px; background: var(--hairline); border: 0; }
.on-dark .divider, .bg-carbon .divider { background: var(--hairline-dk); }

.marquee-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vw, 72px);
  padding-block: clamp(32px, 4vw, 52px);
}
.marquee-strip__item {
  font-family: var(--font-display);
  font-size: clamp(0.8125rem, 1.1vw, 0.9375rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
  display: flex;
  align-items: center;
  gap: 12px;
}
.marquee-strip__item svg { color: var(--papaya-graphic); flex: none; }

.anchor-offset { scroll-margin-top: calc(var(--header-h) + 28px); }

.media-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--carbon);
  overflow: hidden;
}
.media-frame::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 32%; height: 4px;
  background: var(--papaya);
}

.map-placeholder {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--carbon);
  border: 1px solid var(--hairline-dk);
  overflow: hidden;
  display: grid;
  place-items: center;
}
/* The label is centred over the map artwork, and the artwork's solid papaya
   location marker sits dead center, directly under the address line. Sampling
   the artwork's real pixels under the text gave a lightest backdrop of #FF8000,
   so white 17px text measured 2.52:1 (and the muted line 4.04:1). Walking CSS
   backgrounds would have reported --carbon and passed it. An opaque panel behind
   the label removes the dependency on what the artwork happens to draw there. */
.map-placeholder__label {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 26px 28px;
  margin: 24px;
  background: rgba(10, 11, 12, 0.92);
  border: 1px solid var(--hairline-dk);
  border-top: 3px solid var(--papaya);
}

.info-list { display: grid; gap: 26px; }
.info-list__item { display: flex; gap: 18px; }
.info-list__item svg { flex: none; align-self: flex-start; margin-top: 5.9px; color: var(--papaya-graphic); }
.info-list__label {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: 7px;
}
.info-list__value { font-size: var(--fs-body); line-height: 1.6; color: var(--carbon); font-style: normal; }
.on-dark .info-list__value, .bg-carbon .info-list__value { color: var(--white); }
.info-list__value a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  transition: color 0.25s var(--ease);
}
.info-list__value a:hover { color: var(--papaya-ink); }
.on-dark .info-list__value a:hover, .bg-carbon .info-list__value a:hover { color: var(--papaya); }