/* =====================================================================
   SECOND OPINIONS  —  page styles (so-v259.css)
   Built to match the existing Koplow Defense system: baked art-directed
   JPG sections stacked full-bleed, live SEO/a11y text clipped underneath,
   transparent hotspots over interactive regions, and the SAME reveal
   fade-up motion used site-wide (700ms cubic-bezier, translateY 18px).
   Typography/colour inherit from style.css — nothing is re-declared here.
   ===================================================================== */

body.page-so {
  background: #0a0a0a;
  margin: 0;
}

/* The stacked column of baked sections. */
.page-so .so-stack { width: 100%; }

/* ---- Baked asset section ------------------------------------------------
   position:relative anchors the % hotspots; line-height:0 removes the
   inline-image descender gap so sections abut with no seam. */
.page-so .so-asset-host {
  position: relative;
  margin: 0;
  line-height: 0;
}
.page-so .so-asset__img {
  display: block;
  width: 100%;
  height: auto;
}

/* The final CTA/footer asset is a centred composition (narrower source).
   Constrain the HOST (not just the image) so the % hotspots resolve against
   the same box as the rendered image. Body bg (#0a0a0a) matches the asset,
   so the constrained section reads as seamless full-bleed black. */
.page-so .so-asset-host--cta {
  max-width: 880px;
  margin: 0 auto;
  background: #0a0a0a;
}

/* ---- Clipped SEO / accessibility layer ----------------------------------
   The baked image carries the visible text; this mirror of the copy stays
   in the DOM for crawlers and screen readers but is visually removed.
   (Same technique as the Criminal Defense page.) */
.page-so .so-seo {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0; padding: 0; margin: -1px;
}

/* ---- Hotspots -----------------------------------------------------------
   Transparent click targets positioned as % of the section. Inline
   left/top/width/height set per hotspot. */
.page-so .so-hotspot {
  display: block;
  position: absolute;
  z-index: 3;
  border-radius: 4px;
  -webkit-tap-highlight-color: transparent;
}
.page-so .so-hotspot:focus-visible {
  outline: 2px solid #8b6e3b;
  outline-offset: 2px;
}

/* ---- Criminal Defense card component -----------------------------------
   Rebuilt as a LIVE, reusable component matching the cards baked into the
   Criminal Defense page (the "Other Ways We Can Help" / Second Opinions /
   category cards in cd-services-dt-v254.jpg): black field, near-white
   hairline rounded border, gold icon on the left, bold uppercase title with
   a lighter sentence-case subtitle, gold arrow on the right, subtle hover.
   The icon is the existing brand spur masked in brand gold — no new graphic.
   Used here for the two transition cards; reusable elsewhere. */
.page-so .so-cardrow {
  background: #0a0a0a;
  padding: clamp(48px, 7vw, 104px) 24px;
  display: flex;
  justify-content: center;
}
.page-so .cd-card {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 42px);
  width: 100%;
  max-width: 1120px;
  box-sizing: border-box;
  background: #0a0a0a;
  border: 1.5px solid rgba(245, 245, 245, 0.92);
  border-radius: 16px;
  padding: clamp(26px, 3.2vw, 40px) clamp(28px, 3.6vw, 54px);
  text-decoration: none;
  transition: border-color 350ms ease, transform 350ms ease;
}
.page-so a.cd-card:hover { border-color: #ffffff; transform: translateY(-2px); }
.page-so a.cd-card:focus-visible { outline: 2px solid #8b6e3b; outline-offset: 4px; }
.page-so .cd-card__icon {
  flex: 0 0 auto;
  width: clamp(46px, 4.4vw, 62px);
  height: clamp(46px, 4.4vw, 62px);
  background-color: #8b6e3b;
  -webkit-mask: url(../assets/spur-large.png) center / contain no-repeat;
          mask: url(../assets/spur-large.png) center / contain no-repeat;
}
.page-so .cd-card__body { flex: 1 1 auto; }
.page-so .cd-card__title {
  display: block;
  color: #ededed;
  font-size: clamp(1.02rem, 1.7vw, 1.3rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.26;
  text-transform: uppercase;
}
.page-so .cd-card__text {
  display: block;
  margin-top: 10px;
  color: rgba(237, 237, 237, 0.82);
  font-size: clamp(0.92rem, 1.3vw, 1.05rem);
  line-height: 1.5;
}
.page-so .cd-card__arrow {
  flex: 0 0 auto;
  width: clamp(26px, 2.6vw, 34px);
  height: auto;
  color: #8b6e3b;
  transition: transform 350ms ease;
}
.page-so a.cd-card:hover .cd-card__arrow { transform: translateX(6px); }

/* Compact "chapter break" variant — same component, reduced vertical weight
   so it reads as a bridge between sections (à la the Appeals & Post-Conviction
   card) rather than a standalone content section. */
.page-so .so-cardrow--bridge { padding-top: clamp(30px, 4vw, 56px); padding-bottom: clamp(30px, 4vw, 56px); }
.page-so .cd-card--bridge { padding-top: clamp(15px, 1.7vw, 22px); padding-bottom: clamp(15px, 1.7vw, 22px); }
.page-so .cd-card--bridge .cd-card__icon { width: clamp(38px, 3.4vw, 48px); height: clamp(38px, 3.4vw, 48px); }
.page-so .cd-card--bridge .cd-card__text { margin-top: 6px; }

/* ---- Reveal motion  (identical curve/timing to style.css) --------------- */
.page-so .so-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.page-so .so-reveal.is-visible [data-reveal] {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .page-so .so-reveal [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =====================================================================
   MOBILE (<=640px)  —  v272
   Swaps each section's wide desktop -dt- composition for the supplied
   art-directed mobile baked JPG. EVERYTHING ABOVE THIS BLOCK IS
   BYTE-IDENTICAL TO so-v259.css, so desktop (>640px) is untouched.
   The live .so-seo copy stays clipped (SEO/a11y); the desktop hotspots
   are hidden and a mobile hotspot set (.so-hotspot--m) is shown,
   positioned for the mobile assets. Asset 7 (so-bottom-mobile) is one
   tall composite covering Cases + Not-Every-Case + Gold band + Final
   CTA, so it lives inside #cases on mobile, and #transition-2 plus the
   #band / #footer desktop images are suppressed there.
   New classes (.so-asset__img--m, .so-hotspot--m, .so-seo--m) are
   display:none by default, so they never affect desktop rendering.
   ===================================================================== */
.page-so .so-asset__img--m { display: none; }
.page-so .so-seo--m        { display: none; }
/* .so-hotspot--m needs the SAME positioning as .so-hotspot, or its %
   geometry collapses to 0 and it is not tappable. display:none keeps it
   inert on desktop regardless, so this never affects desktop rendering. */
.page-so .so-hotspot--m {
  display: none;
  position: absolute;
  z-index: 3;
  border-radius: 4px;
  -webkit-tap-highlight-color: transparent;
}
.page-so .so-hotspot--m:focus-visible {
  outline: 2px solid #8b6e3b;
  outline-offset: 2px;
}

@media (max-width: 640px) {
  /* show the mobile baked image, hide the desktop -dt- image */
  .page-so .so-asset__img    { display: none; }
  .page-so .so-asset__img--m { display: block; width: 100%; height: auto; }

  /* mobile hotspot set on, desktop hotspot set off */
  .page-so .so-hotspot    { display: none; }
  .page-so .so-hotspot--m { display: block; }

  /* mobile-only clipped SEO (Not-Every-Case / Gold-band copy) into a11y */
  .page-so .so-seo--m { display: block; }

  /* the live cd-card bridge is not part of the mobile asset sequence */
  .page-so #transition-2 { display: none; }

  /* the gold band + final CTA are baked into the single asset-7 composite
     shown in #cases, so hide those sections' own desktop images. Their
     .so-seo copy remains (clipped) for SEO/a11y. */
  .page-so #band .so-asset__img,
  .page-so #footer .so-asset__img { display: none; }

  /* #footer is a centred max-width host on desktop; with its image hidden
     there is nothing to centre, so neutralise the constraint on mobile. */
  .page-so .so-asset-host--cta { max-width: none; margin: 0; }
}