/* ==========================================================================
   RIA Advisory — index-round3-final.html revision layer
   Loaded AFTER round3-final.css (untouched). Applies ONLY the non-optional
   client feedback that lives on the main page:
     #2/#10 hero eyebrow visibility
     #4     refined, elegant "Talk to an Advisor" hover
     #5     even paragraph / stat alignment (Why RIA)
     #6     secondary buttons in RIA Blue with a hover effect
     #7     right-rail active label — no overlap, bold + high-contrast
   The Hero background, Services layout and Products grid design options live
   in section-snips/ (client picks one per section).
   RULES: clamp()/calc() need SPACES around +/- ; grid/flex text kids min-width:0
   ========================================================================== */

/* ---- Section headings: fix uneven kicker/h2-to-paragraph gap -------------
   .shead's `gap` (clamp 1.5rem-4rem) was written for the ORIGINAL two-column
   left-heading/right-paragraph layout. The later "centred section headers"
   override collapsed every .shead to a single stacked column but kept the
   same gap value, which then fires as ROW gap between the h2 and its
   paragraph — up to 64px, scaling with viewport width. Since `* { margin:0 }`
   is a global reset, that gap is the ONLY spacing there, so short one-line
   headings look disconnected from their paragraph while longer ones don't —
   this is what reads as "uneven" across sections. Fix: a small, tightly
   clamped row gap, consistent everywhere regardless of heading length. */
.r3 .shead { row-gap: clamp(.7rem, .55rem + .5vw, 1rem); }

/* ---- #2 / #10  Hero eyebrow: same kicker type (now global, see round3-final.css),
   just more breathing room since it sits alone above the hero, not in a centred .shead */
.r3-hero .kicker { margin-bottom: 1.3rem; gap: 1rem; }
.r3-hero .kicker__no { color: var(--orange); font-size: 1.05em; }
.r3-hero .kicker__line { max-width: 90px; height: 2px; background: linear-gradient(90deg, var(--sky), transparent); }

/* ---- #4  Primary CTA: refined, elegant hover + light sheen sweep ----------- */
.r3 .btn { position: relative; overflow: hidden; isolation: isolate; }
.r3 .btn--accent { background: linear-gradient(135deg, #F7941F 0%, #f5a63f 100%); color: #241503; box-shadow: 0 6px 16px -8px rgba(247,148,31,.5); }
.r3 .btn--accent::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%); transform: translateX(-120%); transition: transform .7s cubic-bezier(.22,1,.36,1); }
.r3 .btn--accent:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -12px rgba(247,148,31,.55); background: linear-gradient(135deg, #f79a2a 0%, #f7941f 100%); }
.r3 .btn--accent:hover::after { transform: translateX(120%); }
.r3 .btn--accent:active { transform: translateY(-1px); }

/* ---- #6  Secondary / ghost buttons -> RIA Blue with a refined fill-sweep --- */
.r3 .btn--ghost { background: var(--navy); color: #fff; border: 1px solid var(--navy); box-shadow: 0 6px 16px -10px rgba(29,65,121,.55); }
.r3 .btn--ghost::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--navy-deep); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.22,1,.36,1); }
.r3 .btn--ghost:hover { color: #fff; border-color: var(--navy-deep); transform: translateY(-3px); box-shadow: 0 18px 30px -14px rgba(29,65,121,.6); }
.r3 .btn--ghost:hover::after { transform: scaleX(1); }
.r3 .btn--ghost svg { color: #fff; }
.r3-hero__cta .btn--ghost { background: var(--navy); border-color: var(--navy); color: #fff; }
.r3-hero__cta .btn--ghost:hover { background: var(--navy); }

/* ---- #7  Right progress rail: no overlap; bold, high-contrast active pill --- */
.r3-rail { gap: 1rem; }
.r3-rail__dot { padding-right: 2px; }
.r3-rail__dot i { width: 9px; height: 9px; background: var(--line-2); }
.r3-rail__dot b {
  position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(6px);
  background: var(--navy); color: #fff; font-weight: 700; font-size: .72rem; letter-spacing: .1em;
  padding: .38rem .7rem; border-radius: 30px; box-shadow: 0 10px 24px -10px rgba(11,24,48,.5);
  opacity: 0; transition: opacity .28s, transform .28s;
}
.r3-rail__dot b::after { content: ""; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-left-color: var(--navy); }
.r3-rail__dot:hover b, .r3-rail__dot.is-active b { opacity: 1; transform: translateY(-50%) translateX(0); }
.r3-rail__dot.is-active i { background: var(--orange); transform: scale(1.7); box-shadow: 0 0 0 4px rgba(247,148,31,.18); }
.r3-rail__dot.is-active b { background: var(--orange); color: #241503; }
.r3-rail__dot.is-active b::after { border-left-color: var(--orange); }

/* ---- What We Do: bento grid (client-picked Option 03 from section-snips/
   services.html), swapped in for the earlier "Command Index" tab switcher,
   which is now archived there for reference. The feature tile is the only
   photo in the section — its height is capped in PX so it reads as an
   accent, not a slab that stretches the section's scroll length. */
.r3-svc-bento { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); grid-auto-rows: minmax(120px, auto); gap: clamp(.9rem, .6rem + .8vw, 1.2rem); }
.r3-svc-bento > * { min-width: 0; }
.r3-svc-tile { position: relative; overflow: hidden; border-radius: 14px; border: 1px solid var(--line); background: #fff; padding: 1.3rem; display: flex; flex-direction: column; justify-content: flex-end; transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .35s ease; }
.r3-svc-tile:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -28px rgba(11,24,48,.32); border-color: var(--sky); }
.r3-svc-tile__ico { color: var(--navy); margin-bottom: auto; }
.r3-svc-tile__ico svg { width: 24px; height: 24px; }
.r3-svc-tile h3 { font-family: var(--font-display, sans-serif); font-weight: 800; font-size: 1.02rem; margin: .9rem 0 .3rem; color: var(--ink); }
.r3-svc-tile p { color: var(--slate); font-size: .85rem; line-height: 1.5; }
.r3-svc-tile__tag { font-family: var(--font-mono, monospace); font-size: .62rem; letter-spacing: .11em; text-transform: uppercase; color: var(--orange); }
.r3-svc-tile--wide { grid-column: span 2; }
.r3-svc-tile--feature { grid-column: span 2; grid-row: span 2; color: #fff; border: 0; background: var(--navy-deep); min-height: clamp(180px, 140px + 7vw, 220px); }
.r3-svc-tile--feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.r3-svc-tile--feature::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(16,27,56,.2), rgba(16,27,56,.9)); }
.r3-svc-tile--feature > * { position: relative; z-index: 2; }
.r3-svc-tile--feature .r3-svc-tile__ico { color: #9fd0f4; }
.r3-svc-tile--feature h3 { font-size: 1.3rem; color: #fff; }
.r3-svc-tile--feature p { color: #cddcf0; }
.r3-svc-tile--feature .r3-svc-tile__tag { color: #ffd7a0; }
@media (max-width: 900px) { .r3-svc-bento { grid-template-columns: repeat(2, minmax(0,1fr)); } .r3-svc-tile--feature, .r3-svc-tile--wide { grid-column: span 2; } }
@media (max-width: 560px) { .r3-svc-bento { grid-template-columns: minmax(0,1fr); } .r3-svc-tile, .r3-svc-tile--wide, .r3-svc-tile--feature { grid-column: span 1; } .r3-svc-tile--feature { min-height: clamp(160px, 100px + 22vw, 200px); } }

/* ---- Products: image-card grid (client-picked Option 01 from section-snips/
   products.html), swapped in for the earlier "cinematic poster" grid, which
   is now archived there for reference. Image height is capped in PX (not
   left to scale with column width) so the photo stays a compact header
   strip instead of ballooning the card height and lengthening the scroll. */
#products.section { padding-block: clamp(2rem, 1.4rem + 1.8vw, 3rem); }
#products .shead { margin-bottom: clamp(1rem, .8rem + .8vw, 1.5rem); }
#products .r3-prod {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(.85rem, .6rem + .7vw, 1.2rem); margin-top: clamp(.8rem, .5rem + .8vw, 1.2rem);
}
#products .r3-prod > * { min-width: 0; }
#products .r3-prod__card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden;
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;
}
#products .r3-prod__card:hover { transform: translateY(-4px); box-shadow: 0 26px 46px -26px rgba(11,24,48,.35); border-color: var(--sky); }
#products .r3-prod__img { position: relative; height: clamp(112px, 84px + 6.5vw, 150px); overflow: hidden; flex: none; }
#products .r3-prod__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.22,1,.36,1); }
#products .r3-prod__card:hover .r3-prod__img img { transform: scale(1.06); }
#products .r3-prod__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,27,56,.04), rgba(16,27,56,.34)); }
#products .r3-prod__tag { position: absolute; right: .55rem; top: .55rem; z-index: 2; font-family: var(--font-mono, monospace); font-size: .56rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: #fff; background: rgba(11,24,48,.55); padding: .24rem .5rem; border-radius: 30px; backdrop-filter: blur(6px); }
/* The badge sits INSIDE the image — .r3-prod__img needs overflow:hidden for the
   hover zoom, so anything overhanging the bottom edge gets sliced in half. */
#products .r3-prod__ico { position: absolute; left: .55rem; bottom: .55rem; z-index: 2; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: var(--navy); border: 1px solid rgba(255,255,255,.28); box-shadow: 0 8px 16px -8px rgba(11,24,48,.5); }
#products .r3-prod__ico svg { width: 17px; height: 17px; }
#products .r3-prod__body { padding: .95rem .9rem .9rem; display: flex; flex-direction: column; flex: 1; }
#products .r3-prod__card h3 { font-family: var(--font-display, sans-serif); font-weight: 800; font-size: .96rem; color: var(--ink); margin: 0 0 .3rem; }
#products .r3-prod__card p { color: var(--slate); font-size: .8rem; line-height: 1.5; margin-bottom: .6rem; }
#products .r3-prod__stat { display: flex; align-items: baseline; gap: .35rem; padding-top: .55rem; margin-top: auto; border-top: 1px solid var(--line); }
#products .r3-prod__stat b { font-family: var(--font-display, sans-serif); font-weight: 800; font-size: .92rem; color: var(--navy); }
#products .r3-prod__stat span { color: var(--slate); font-size: .66rem; }
#products .r3-prodstat { margin-top: .7rem; }
@media (max-width: 860px) { #products .r3-prod { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { #products .r3-prod { grid-template-columns: minmax(0,1fr); } #products .r3-prod__img { height: clamp(140px, 80px + 24vw, 190px); } }

/* ---- #5  Even alignment: Why-RIA stat cells become equal-height tidy cards --
   SUPERSEDED 2026-08-04 — see .r3-orbit below. Left in place (untouched) only
   because the frozen font-comparison pages (index-round3-final-font-*.html)
   still render the old .r3-why markup and must keep working unmodified. */
.r3-why__grid { align-items: stretch; }
.r3-why__cell { display: flex; flex-direction: column; background: rgba(255,255,255,.55); border: 1px solid var(--line); border-radius: 14px; padding: 1.5rem 1.4rem 1.6rem; border-top: 1px solid var(--line); }
.r3-why__cell::before { top: -1px; left: 1.4rem; }
.r3-why__cell:hover { background: #fff; box-shadow: 0 22px 44px -30px rgba(11,24,48,.28); }
.r3-why__cell h3 { margin-top: 1rem; }
.r3-why__cell p { margin-top: auto; padding-top: .4rem; }

/* ==========================================================================
   WHY RIA — client picked section-snips OPTION 07 "Orbit / radial" (2026-08-04),
   replacing the .r3-why stat-card grid above. Same ring-and-grid signature as
   the snip (ported from section-snips/why-ria.html, wv5), but re-tuned per
   client feedback on the picked option:
     - bigger type throughout (was sized for a small preview tile in the gallery)
     - headline stays on ONE line — .r3-orbit__center is widened to the full
       wrap (was capped at 46ch, far too narrow for a single line at any
       readable size) and the title uses a vw-heavy clamp so it scales down
       smoothly on narrower windows rather than wrapping
     - whole section compacted vertically (tighter padding, smaller rings) so
       it fits one laptop viewport under the sticky header without scrolling —
       verified empirically via headless screenshots at 1280–1920px wide and
       ~700–900px tall, not derived from a single fixed breakpoint
   Ring spin keyframe is intentionally NOT listed in the reduced-motion kill
   list above (round3-final.css) — this client's Windows reports
   prefers-reduced-motion:reduce at the OS level, which already strips [data-r]
   entrance reveals; the ring animation must keep running regardless.
   ========================================================================== */
.r3-orbit { position: relative; overflow: hidden; background:
    radial-gradient(80% 65% at 50% 40%, rgba(77,159,215,.16), transparent 70%),
    linear-gradient(180deg, #fff, var(--sky-tint)); }
.r3-orbit__tex { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .05; mix-blend-mode: multiply; }
.r3-orbit__inner { position: relative; z-index: 2; padding-block: clamp(1rem, .55rem + 1.4vw, 1.5rem); }
.r3-orbit__stage { position: relative; width: 100%; margin-inline: auto;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.6rem, .3rem + 1vw, 1.4rem);
  padding-block: clamp(.2rem, 0rem + .8vw, .6rem); }
.r3-orbit__ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none; z-index: 0; }
.r3-orbit__ring--1 { width: min(56vw, 460px); aspect-ratio: 1; border: 1px dashed rgba(29,65,121,.2); animation: r3OrbitSpin 44s linear infinite; }
.r3-orbit__ring--2 { width: min(42vw, 350px); aspect-ratio: 1; border: 1px solid rgba(29,65,121,.13); animation: r3OrbitSpin 60s linear infinite reverse; }
.r3-orbit__ring--3 { width: min(30vw, 250px); aspect-ratio: 1; border: 1px solid rgba(247,148,31,.2); }
.r3-orbit__ring--1::before { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px;
  margin-left: -5px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 16px 2px rgba(247,148,31,.5); }
@keyframes r3OrbitSpin { to { transform: rotate(360deg); } }

.r3-orbit__center { position: relative; z-index: 3; grid-column: 1 / -1; width: 100%; max-width: 100%;
  margin: 0 auto clamp(.8rem, .55rem + .8vw, 1.15rem); text-align: center; }
.r3-orbit__center .kicker { justify-content: center; margin-bottom: .5rem; }
.r3-orbit__title { font-family: var(--font-display, sans-serif); font-weight: 800; letter-spacing: -.025em;
  color: var(--ink); margin: 0; line-height: 1.08;
  /* Heavy vw term so the line scales down with the viewport instead of
     wrapping — verify with a real screenshot after touching this, don't
     trust the math alone (character width varies by font/kerning). */
  font-size: clamp(1.5rem, .55rem + 2.55vw, 2.55rem);
  white-space: nowrap; }
.r3-orbit__lead { position: relative; z-index: 3; color: var(--slate);
  font-size: clamp(1rem, .92rem + .4vw, 1.1rem); line-height: 1.44;
  /* Wider than the title needs — a longer lead paragraph wraps to FEWER
     lines at wide viewports the wider this is, which is what actually saves
     height here (shrinking the font was not an option, client wants bigger
     type, not smaller). */
  max-width: 76ch; margin: clamp(.5rem, .35rem + .55vw, .75rem) auto 0; text-align: center; }

.r3-orbit__node { position: relative; z-index: 4; min-width: 0; text-align: center; padding: .3rem; }
.r3-orbit__kicker { display: block; font-family: var(--font-mono, monospace); font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.r3-orbit__num, .r3-orbit__num b, .r3-orbit__num .value { font-family: var(--font-display, sans-serif); font-weight: 800;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.2rem); line-height: 1; letter-spacing: -.02em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.r3-orbit__num { display: block; margin: .2rem 0; }
.r3-orbit__num b { font-style: normal; }
.r3-orbit__cn { display: block; font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.r3-orbit__cd { display: block; color: var(--slate); font-size: .87rem; line-height: 1.4; margin-top: .25rem; }

@media (max-width: 1280px) { .r3-orbit__title { white-space: normal; } }
@media (max-width: 900px) {
  .r3-orbit__inner { display: block; }
  .r3-orbit__stage { width: 100%; display: flex; flex-direction: column; gap: clamp(1.4rem, 1rem + 2vw, 2.2rem); }
  .r3-orbit__ring { display: none; }
  .r3-orbit__center { text-align: left; }
  .r3-orbit__center .kicker { justify-content: flex-start; }
  .r3-orbit__title { white-space: normal; text-align: left; }
  .r3-orbit__lead { text-align: left; margin-left: 0; }
  .r3-orbit__node { text-align: left; border-top: 1px solid var(--line); padding: 1.1rem 0 0; }
}

/* ==========================================================================
   SERVICES — client pick: section-snips OPTION 02 · tab switcher
   Replaces the .r3-svc-bento block. Deliberate variance from the snip:
   the media is a SMALL fixed-width thumbnail (not a 16/9 hero) so the copy —
   headline, paragraph and capability points — owns the panel.
   ========================================================================== */
.r3-svct { display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.55fr); gap: clamp(1.4rem, .9rem + 1.8vw, 2.8rem); align-items: stretch; margin-top: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); }
.r3-svct > * { min-width: 0; }

/* ---- left rail: the practice list ---------------------------------------- */
/* Tabs are deliberately compact: 7 of them have to finish level with the
   detail card, otherwise the rail runs on past it and leaves dead space. */
.r3-svct__list { display: flex; flex-direction: column; gap: .35rem; }
.r3-svct__tab { position: relative; width: 100%; font: inherit; text-align: left; display: flex; align-items: center; gap: .8rem; padding: .62rem .9rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); cursor: pointer; transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .3s ease, background .3s ease, box-shadow .3s ease; }
.r3-svct__tab:hover { transform: translateX(3px); border-color: var(--line-2); }
.r3-svct__tab.is-active { border-color: var(--navy); background: var(--navy); color: #fff; box-shadow: 0 20px 36px -24px rgba(29,65,121,.6); }
.r3-svct__n { font-family: var(--font-mono, monospace); font-size: .76rem; color: var(--orange); flex: none; }
.r3-svct__tab.is-active .r3-svct__n { color: #ffd7a0; }
.r3-svct__tt { min-width: 0; }
.r3-svct__tt b { display: block; font-family: var(--font-display, sans-serif); font-weight: 800; font-size: .95rem; line-height: 1.22; }
.r3-svct__tt span { display: block; font-family: var(--font-mono, monospace); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); margin-top: .1rem; }
.r3-svct__tab.is-active .r3-svct__tt span { color: #a9d4f5; }

/* ---- right: the detail panel ---------------------------------------------
   The panels wrapper is the card, so it stretches to the tab rail's height and
   vertically centres whichever panel is active — no dead space under the copy. */
.r3-svct__panels { display: flex; flex-direction: column; justify-content: center; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: clamp(1.3rem, .9rem + 1.4vw, 2rem); box-shadow: 0 30px 60px -46px rgba(11,24,48,.42); }
.r3-svct__panel { display: none; }
.r3-svct__panel.is-active { display: block; animation: r3SvctFade .5s cubic-bezier(.22,1,.36,1); }
@keyframes r3SvctFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.r3-svct__top { display: grid; grid-template-columns: minmax(0,1fr) clamp(140px, 110px + 6vw, 200px); gap: clamp(1rem, .7rem + 1vw, 1.7rem); align-items: start; }
.r3-svct__top > * { min-width: 0; }
.r3-svct__copy .r3-svct__tag { display: inline-block; font-family: var(--font-mono, monospace); font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin-bottom: .5rem; }
.r3-svct__copy h3 { font-family: var(--font-display, sans-serif); font-weight: 800; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); line-height: 1.16; letter-spacing: -.018em; color: var(--ink); margin-bottom: .65rem; }
.r3-svct__copy p { color: var(--slate); font-size: 1.01rem; line-height: 1.62; }

/* small, quiet thumbnail — supporting the copy, not competing with it */
.r3-svct__media { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.r3-svct__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.r3-svct__media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--orange), transparent 70%); }

/* capability points — the content the client asked to lead with */
.r3-svct__pts { list-style: none; margin: clamp(1.1rem, .8rem + .8vw, 1.6rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .8rem; }
.r3-svct__pts > li { min-width: 0; position: relative; padding: .85rem .9rem .85rem 2.1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--sky-tint); color: var(--ink); font-size: .86rem; line-height: 1.45; transition: border-color .3s ease, box-shadow .3s ease; }
.r3-svct__pts > li::before { content: ""; position: absolute; left: .85rem; top: 1.06rem; width: 13px; height: 8px; border-left: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: rotate(-45deg); }
.r3-svct__pts > li:hover { border-color: var(--sky); box-shadow: 0 16px 30px -24px rgba(11,24,48,.4); }

.r3-svct__cta { display: inline-flex; align-items: center; gap: .5rem; margin-top: clamp(1.1rem, .8rem + .8vw, 1.5rem); font-weight: 600; font-size: .92rem; color: var(--navy); }
.r3-svct__cta svg { width: 16px; height: 16px; transition: transform .3s ease; }
.r3-svct__cta:hover svg { transform: translateX(5px); }

@media (max-width: 960px) { .r3-svct__pts { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 860px) {
  .r3-svct { grid-template-columns: minmax(0,1fr); }
  .r3-svct__list { flex-direction: row; overflow-x: auto; padding-bottom: .4rem; -webkit-overflow-scrolling: touch; }
  .r3-svct__tab { flex: 0 0 auto; width: auto; max-width: 15rem; }   /* not 100% — they scroll side by side */
  .r3-svct__tab:hover { transform: none; }
}
@media (max-width: 560px) {
  .r3-svct__top { grid-template-columns: minmax(0,1fr); }
  .r3-svct__media { max-width: 190px; }
  .r3-svct__pts { grid-template-columns: minmax(0,1fr); }
}

/* ==========================================================================
   CERTIFICATIONS — flip seals lifted from index-experiment.html
   (replaces the .r3-ledger table). Icons are Font Awesome 6 glyphs.
   ========================================================================== */
/* 8 seals: an explicit column count keeps the rows balanced (8 · 4 · 2) —
   auto-wrapping left an orphan seal on its own row. */
.cert-seal2-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); justify-items: center; align-items: start; gap: clamp(1.4rem, 1rem + 1.4vw, 2.4rem) clamp(.8rem, .5rem + 1vw, 1.6rem); max-width: 760px; margin: clamp(1.6rem, 1.1rem + 2vw, 2.8rem) auto 0; padding: .6rem .2rem 1rem; }
@media (min-width: 1080px) { .cert-seal2-row { grid-template-columns: repeat(8, minmax(0,1fr)); max-width: none; } }
.cert-seal2 { width: 100%; max-width: 132px; display: flex; flex-direction: column; align-items: center; gap: .75rem; text-align: center; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.cert-seal2:hover { transform: translateY(-5px); }
.cert-seal2__flip { position: relative; flex: none; perspective: 900px; width: 88px; height: 88px; cursor: pointer; border-radius: 50%; box-shadow: 0 1px 2px rgba(11,24,48,.05), 0 18px 32px -20px rgba(11,24,48,.4); }
.cert-seal2__flip::before { content: ""; position: absolute; inset: -13px; border-radius: 50%; border: 1.5px dashed var(--line-2); pointer-events: none; }
.cert-seal2__card { position: relative; width: 100%; height: 100%; transition: transform .7s cubic-bezier(.22,1,.36,1); transform-style: preserve-3d; will-change: transform; }
.cert-seal2__flip:hover .cert-seal2__card, .cert-seal2__flip.is-flipped .cert-seal2__card { transform: rotateY(180deg); }
.cert-seal2__face { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; }
.cert-seal2__face--front { background: linear-gradient(160deg, #fff, var(--sky-tint)); border: 1px solid var(--line); }
.cert-seal2__face--front i { font-size: 28px; line-height: 1; color: var(--navy); }
.cert-seal2__badge { position: absolute; right: -1px; bottom: -1px; z-index: 1; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #f7941f, #d97a12); border: 2.5px solid var(--sky-tint); display: grid; place-items: center; box-shadow: 0 6px 14px -6px rgba(180,105,15,.6); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cert-seal2__badge i { font-size: 10px; line-height: 1; color: #fff; }
.cert-seal2__face--back { background: linear-gradient(160deg, var(--navy), var(--navy-deep)); color: #fff; transform: rotateY(180deg); padding: .4rem; }
.cert-seal2__face--back i { font-size: 17px; line-height: 1; color: #ffb459; }
.cert-seal2__face--back span { font-family: var(--font-mono, monospace); font-size: .5rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #ffd7a0; line-height: 1.35; }
.cert-seal2 b { font-family: var(--font-display, sans-serif); font-weight: 800; font-size: .78rem; line-height: 1.3; color: var(--ink); }
.cert-seal2 em { font-style: normal; font-size: .66rem; line-height: 1.35; color: var(--slate); margin-top: -.45rem; }
@media (max-width: 560px) { .cert-seal2-row { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 340px; } .cert-seal2 { max-width: 118px; } .cert-seal2__flip { width: 78px; height: 78px; } .cert-seal2__face--front i { font-size: 25px; } }