/* ==========================================================================
   SS ADVISERS GROUP - Domain landing page
   ssadvisers.com  (root domain gateway)

   Self-contained stylesheet. This page is a standalone gateway and does NOT
   share the paralegal subdomain theme. In Phase 2 it can stay static HTML on
   the root domain, or become a single-file WordPress page template.
   Reference: client-provided/main-domain-landing-page.jpeg

   The two service marks are the client's issued badges
   (ss-advisers-badge.png / ss-paralegal-badge.png), not the shield drawn
   in the original mockup.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PALETTE - sampled from client-provided/main-domain-landing-page.jpeg

   Every value below was measured off the client's own mockup rather than
   chosen: the text fills were read by eroding each glyph 2px and taking the
   median of the surviving core pixels, so anti-aliased edges and the JPEG's
   ringing do not drag the reading toward the background.

     heading gold  #EFBD5A  (highlight #FEDE86)
     button gold   #C68223  (highlight #E4A13B)
     icon gold     #EFA32F
     red title     #BD0D04  (highlight #CF150C)
     green title   #3B9234  (highlight #50A247)
     page black    #010101

   The two title colours are used one step brighter than the measured median
   so they clear 3:1 against the card. Do not darken them further.
   -------------------------------------------------------------------------- */
:root {
  --gold-100: #FEE79B;
  --gold-200: #FEDE86;
  --gold-300: #F8D888;
  --gold-400: #EFBD5A;
  --gold-500: #DFAE45;
  --gold-600: #C68223;
  --gold-700: #9B6417;
  --gold-icon: #EFA32F;

  --red-neon: #F2201A;
  --red-glow: #D6120B;
  --red-core: #A00C06;
  --red-deep: #3A0503;

  --green-neon: #58C24A;
  --green-glow: #43A03B;
  /* Lifted from the measured #084808 card fill: the two cards must read at the
     same brightness, and green at equal hex value sits far darker than red. */
  --green-core: #127A2E;
  --green-deep: #04200E;

  --black: #010101;
  --black-2: #0A0702;

  /* Wordmark foil: the light heading golds */
  --foil: linear-gradient(100deg, #9B6417 0%, #C68223 18%, #FEE79B 42%, #EFBD5A 62%, #C68223 80%, #FEDE86 100%);
  /* Button foil: the deeper amber of the mockup's Enter Website pill */
  --foil-btn: linear-gradient(100deg, #9B6417 0%, #C68223 20%, #E4A13B 44%, #C68223 66%, #9B6417 84%, #D89838 100%);

  --font-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --font-sans: "Barlow Condensed", "Oswald", "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  /* clip, not hidden: hidden on html/body makes iOS treat the page as a
     scroll container and crop 100dvh content behind the browser chrome. */
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--black);
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
ul { padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 4px; border-radius: 3px; }

/* --------------------------------------------------------------------------
   Atmosphere
   -------------------------------------------------------------------------- */

.grain {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.34;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   HERO - first viewport, two columns at every width
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* 100svh is stable. Do not use 100dvh or visualViewport height: those
     grow when the iPhone Chrome toolbar collapses, which makes the hero
     background jump before the page actually scrolls. */
  min-height: 100svh;
  padding:
    max(0.7rem, env(safe-area-inset-top, 0px))
    clamp(0.7rem, 3.4vw, 2.5rem)
    max(1rem, calc(env(safe-area-inset-bottom, 0px) + 0.6rem));
}

/* ---------------------------------------------------------------------------
   BACKGROUND PHOTOGRAPH
   Two art-directed crops of the same scene: a neoclassical colonnade at the
   left, a bronze Lady Justice at the right, warm amber key light, falling to
   near-black at the foot.

     bg-desktop.jpg   2560x1440  landscape, both elements at the sides
     bg-mobile.jpg    1080x1920  portrait, both elements in the upper third

   Absolute to the hero, not the document: the plate lives with the first
   fold and the brief below sits on its own black panel. See BACKGROUND-BRIEF.md.
   --------------------------------------------------------------------------- */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background-color: #010101;
  background-image:
    radial-gradient(ellipse 55% 48% at 22% 62%, rgba(160, 12, 6, 0.28), transparent 68%),
    radial-gradient(ellipse 55% 48% at 78% 62%, rgba(11, 90, 34, 0.28), transparent 68%),
    url("../img/bg-desktop.jpg");
  background-repeat: no-repeat;
  background-position: center center, center center, center top;
  background-size: cover, cover, cover;
}

@media (max-width: 820px) {
  .hero::before {
    background-image:
      radial-gradient(ellipse 62% 30% at 26% 46%, rgba(160, 12, 6, 0.26), transparent 70%),
      radial-gradient(ellipse 62% 30% at 74% 70%, rgba(11, 90, 34, 0.26), transparent 70%),
      url("../img/bg-mobile.jpg");
  }
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(1, 1, 1, 0.34) 0%,
      rgba(1, 1, 1, 0.10) 26%,
      rgba(1, 1, 1, 0.10) 62%,
      rgba(1, 1, 1, 0.55) 100%);
}

.vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 88% 82% at 50% 48%, transparent 42%, rgba(0, 0, 0, 0.72) 100%);
}

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.masthead {
  text-align: center;
  max-width: 1080px;
  margin-inline: auto;
  width: 100%;
  flex: 0 0 auto;
}

.crest {
  width: clamp(6.75rem, min(16vw, 22vh), 16.5rem);
  margin: 0 auto clamp(0.35rem, 1.2vh, 1rem);
}

.welcome,
.choose {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.55rem, 1.8vw, 1.5rem);
}

.welcome {
  font-size: clamp(1.05rem, 2.4vw + 0.35rem, 1.85rem);
  letter-spacing: clamp(0.28em, 0.8vw, 0.52em);
  color: rgba(255, 255, 255, 0.92);
  margin-inline-start: clamp(0.28em, 0.8vw, 0.52em);
}

.choose {
  font-size: clamp(1.05rem, 2.3vw + 0.35rem, 1.85rem);
  letter-spacing: clamp(0.18em, 0.55vw, 0.38em);
  color: rgba(255, 255, 255, 0.94);
  margin-inline-start: clamp(0.18em, 0.55vw, 0.38em);
}

.welcome::before, .welcome::after,
.choose::before, .choose::after {
  content: "";
  height: 1px;
  width: clamp(18px, 4.5vw, 64px);
  background: linear-gradient(90deg, transparent, var(--gold-500));
  flex: none;
}
.welcome::after, .choose::after { background: linear-gradient(90deg, var(--gold-500), transparent); }
.choose::before, .choose::after { width: clamp(22px, 5.5vw, 72px); }

.groupname {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.05rem, min(8.8vw, 8vh), 6.5rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  margin-top: clamp(0.25rem, 0.9vh, 0.75rem);
  background: var(--foil);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 18px rgba(239, 189, 90, 0.3));
  animation: sheen 9s ease-in-out infinite;
}
@keyframes sheen {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin: clamp(0.35rem, 1.2vh, 1.1rem) auto clamp(0.4rem, 1.4vh, 1.25rem);
  max-width: 460px;
}
.ornament .line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-600)); }
.ornament .line + .line { background: linear-gradient(90deg, var(--gold-600), transparent); }
.ornament .dot { width: 4px; height: 4px; background: var(--gold-500); border-radius: 50%; opacity: 0.75; }
.ornament .diamond {
  width: 11px; height: 11px;
  background: var(--gold-400);
  transform: rotate(45deg);
  box-shadow: 0 0 12px rgba(239, 189, 90, 0.6);
}

/* --------------------------------------------------------------------------
   Choice cards - two columns at every breakpoint, matching the mockup
   -------------------------------------------------------------------------- */

.choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.55rem, 2.2vw, 2.25rem);
  width: 100%;
  max-width: 1080px;
  margin: clamp(0.4rem, 1.5vh, 1.5rem) auto 0;
  flex: 0 0 auto;
}

.choice {
  --c-neon: var(--red-neon);
  --c-glow: var(--red-glow);
  --c-core: var(--red-core);
  --c-deep: var(--red-deep);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(0.75rem, 1.8vh, 2.1rem) clamp(0.5rem, 1.8vw, 2rem) clamp(0.75rem, 1.6vh, 1.85rem);
  border-radius: clamp(10px, 1.6vw, 18px);
  background:
    radial-gradient(ellipse 90% 62% at 50% 12%, color-mix(in srgb, var(--c-core) 30%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.5)),
    #030303;
  border: 1px solid color-mix(in srgb, var(--c-neon) 45%, transparent);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 0 26px -4px color-mix(in srgb, var(--c-neon) 42%, transparent),
    inset 0 0 46px -12px color-mix(in srgb, var(--c-core) 55%, transparent);
  transition: transform 460ms var(--ease-out), box-shadow 460ms var(--ease-out), border-color 300ms ease;
  overflow: hidden;
  isolation: isolate;
  min-width: 0;
  min-height: min-content;
  flex-shrink: 0;
}
.choice--green {
  --c-neon: var(--green-neon);
  --c-glow: var(--green-glow);
  --c-core: var(--green-core);
  --c-deep: var(--green-deep);
}

.choice::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--c-neon) 85%, transparent),
    transparent 38%,
    transparent 62%,
    color-mix(in srgb, var(--c-neon) 65%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.75;
  transition: opacity 460ms var(--ease-out);
  pointer-events: none;
}

.choice::after {
  content: "";
  position: absolute;
  left: 12%; right: 12%; bottom: -1px;
  height: 60px;
  background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--c-neon) 30%, transparent), transparent 72%);
  filter: blur(10px);
  pointer-events: none;
  z-index: -1;
}

@media (hover: hover) and (pointer: fine) {
  .choice:hover, .choice:focus-within {
    transform: translateY(-7px);
    border-color: color-mix(in srgb, var(--c-neon) 80%, transparent);
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.6),
      0 0 46px -2px color-mix(in srgb, var(--c-neon) 60%, transparent),
      0 34px 60px -28px rgba(0, 0, 0, 0.9),
      inset 0 0 60px -10px color-mix(in srgb, var(--c-core) 70%, transparent);
  }
  .choice:hover::before, .choice:focus-within::before { opacity: 1; }
  .choice:hover .choice__logo { transform: scale(1.045) translateY(-3px); }
  .choice:hover .choice__cta { background-position: 100% 50%; box-shadow: 0 12px 34px -10px rgba(239, 189, 90, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
  .choice:hover .choice__cta svg { transform: translateX(4px); }
}

.choice__logo {
  width: clamp(4.5rem, min(64%, 18svh), 13.5rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin-bottom: clamp(0.3rem, 1.1svh, 1.1rem);
  flex: none;
  transition: transform 620ms var(--ease-out), filter 460ms ease;
}
.choice__logo img, .choice__logo svg {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  filter: drop-shadow(0 6px 26px rgba(0, 0, 0, 0.7));
}

.choice__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.12rem, 2.6vw + 0.55rem, 2.15rem);
  line-height: 1.18;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-glow);
  text-shadow: 0 0 26px color-mix(in srgb, var(--c-neon) 50%, transparent);
  padding-inline: 0.2em;
  text-wrap: balance;
}

.choice__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: min(220px, 80%);
  margin: clamp(0.3rem, 1.1vh, 0.95rem) auto;
}
.choice__divider span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(223, 174, 69, 0.6)); }
.choice__divider span + span { background: linear-gradient(90deg, rgba(223, 174, 69, 0.6), transparent); }
.choice__divider i { width: 6px; height: 6px; background: var(--gold-500); transform: rotate(45deg); }

.choice__desc {
  font-family: var(--font-sans);
  font-size: clamp(0.82rem, 1.5vw + 0.38rem, 1.25rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  max-width: 24ch;
  margin-inline: auto;
  margin-bottom: clamp(0.55rem, 1.6vh, 1.85rem);
}
.choice__desc .sep { color: var(--c-glow); }

.choice__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  margin-top: auto;
  flex-shrink: 0;
  width: min(100%, 300px);
  padding: 0.62em 0.85em;
  min-height: 2.5rem;
  border: 1px solid var(--gold-700);
  border-radius: 999px;
  background: var(--foil-btn);
  background-size: 230% 100%;
  background-position: 0% 50%;
  color: #201703;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(0.72rem, 1.35vw + 0.22rem, 1.15rem);
  letter-spacing: 0.06em;
  line-height: 1.15;
  text-wrap: balance;
  text-transform: uppercase;
  box-shadow: 0 8px 26px -10px rgba(223, 174, 69, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: background-position 700ms var(--ease-out), transform 260ms var(--ease-out), box-shadow 360ms ease;
}
.choice__cta svg { width: 0.85em; height: 0.85em; transition: transform 340ms var(--ease-out); flex: none; }
.choice__cta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

.choice__status {
  position: absolute;
  top: 14px; right: 14px;
  padding: 0.28em 0.7em;
  border: 1px solid rgba(223, 174, 69, 0.45);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-300);
  z-index: 3;
}

/* --------------------------------------------------------------------------
   Trust strip
   -------------------------------------------------------------------------- */

.trust {
  width: 100%;
  max-width: 1080px;
  margin: clamp(0.45rem, 1.4vh, 1.25rem) auto 0;
  padding-top: clamp(0.4rem, 1.2vh, 1.1rem);
  border-top: 1px solid rgba(223, 174, 69, 0.24);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.2rem, 1.2vw, 1.25rem);
  flex: 0 0 auto;
}
.trust li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 1.15vw + 0.35rem, 1.05rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(248, 232, 186, 0.88);
  border-left: 1px solid rgba(223, 174, 69, 0.2);
  padding-inline: 0.35rem;
  min-width: 0;
  text-align: left;
}
.trust li:first-child { border-left: 0; }

.trust__mark {
  display: grid;
  place-items: center;
  width: clamp(1.7rem, 3.2vw, 2.35rem);
  height: clamp(1.7rem, 3.2vw, 2.35rem);
  flex: none;
  border: 1px solid rgba(239, 189, 90, 0.55);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(239, 189, 90, 0.18), inset 0 0 10px rgba(239, 189, 90, 0.08);
  background: radial-gradient(circle at 50% 40%, rgba(239, 189, 90, 0.12), transparent 70%);
}
.trust li svg {
  width: 58%;
  height: auto;
  color: var(--gold-icon);
}

@media (max-width: 820px) {
  .trust {
    grid-template-columns: 1fr 1fr;
    flex: 1 1 auto;
    min-height: min-content;
    align-content: stretch;
    gap: 0.55rem 0.6rem;
    max-width: 100%;
    margin-top: 0.55rem;
    padding-top: 0.55rem;
  }
  .trust li,
  .trust li:first-child {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 0.55rem;
    padding: clamp(0.65rem, 1.6vh, 1.1rem) 0.5rem;
    font-size: clamp(0.88rem, 2.8vw, 1.05rem);
    letter-spacing: 0.12em;
    background:
      linear-gradient(180deg, rgba(239, 189, 90, 0.07), rgba(0, 0, 0, 0.28));
    border: 1px solid rgba(223, 174, 69, 0.45);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(254, 231, 155, 0.1), 0 8px 22px -16px rgba(0, 0, 0, 0.7);
  }
  .trust__mark {
    width: clamp(2.55rem, 11vw, 3.35rem);
    height: clamp(2.55rem, 11vw, 3.35rem);
  }
}

/* --------------------------------------------------------------------------
   GROUP BRIEF - below the fold
   -------------------------------------------------------------------------- */

.brief {
  position: relative;
  background:
    radial-gradient(ellipse 70% 28% at 50% 0%, rgba(198, 130, 35, 0.09), transparent 62%),
    linear-gradient(180deg, #080604 0%, #050403 38%, #030201 100%);
  padding: clamp(3.25rem, 8vw, 6.5rem) clamp(1.15rem, 5vw, 2.5rem) clamp(3rem, 6vw, 5.25rem);
  border-top: 1px solid rgba(223, 174, 69, 0.18);
}

.brief__inner {
  max-width: 920px;
  margin-inline: auto;
  text-align: center;
}

.brief__eyebrow {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 2.6vw, 1.1rem);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 0.9rem;
  margin-inline-start: 0.32em;
}

.brief__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 5.4vw, 2.55rem);
  line-height: 1.22;
  letter-spacing: 0.02em;
  color: #F4E6C2;
  text-wrap: balance;
}

.brief__rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: min(280px, 70%);
  margin: 1.35rem auto 1.6rem;
}
.brief__rule span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(223, 174, 69, 0.65)); }
.brief__rule span + span { background: linear-gradient(90deg, rgba(223, 174, 69, 0.65), transparent); }
.brief__rule i {
  width: 7px; height: 7px;
  background: var(--gold-400);
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(239, 189, 90, 0.45);
}

.brief__lead {
  font-size: clamp(1.125rem, 3.5vw, 1.25rem);
  line-height: 1.7;
  color: rgba(245, 243, 238, 0.9);
  max-width: 62ch;
  margin-inline: auto;
}

.platforms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
  text-align: center;
}

.platform {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.15rem) clamp(1.15rem, 2.4vw, 1.85rem) 1.75rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.28));
  border: 1px solid rgba(223, 174, 69, 0.2);
  border-radius: 4px;
  text-align: center;
}
.platform::before {
  content: "";
  position: absolute;
  left: 18%; right: 18%; top: 0;
  height: 2px;
  background: var(--gold-600);
}
.platform--legal::before {
  background: linear-gradient(90deg, transparent, var(--red-glow), transparent);
}
.platform--paralegal::before {
  background: linear-gradient(90deg, transparent, var(--green-glow), transparent);
}

.platform__kicker {
  font-family: var(--font-display);
  font-size: clamp(0.8rem, 2.4vw, 0.9rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(223, 174, 69, 0.88);
  margin-bottom: 0.5rem;
}

.platform__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.45rem, 4.4vw, 1.7rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold-200);
  margin-bottom: 0.9rem;
}
.platform--legal .platform__title { color: #E24A42; }
.platform--paralegal .platform__title { color: #6FCB62; }

.platform__copy {
  font-size: clamp(1.05rem, 3.3vw, 1.125rem);
  line-height: 1.7;
  color: rgba(245, 243, 238, 0.88);
}

.platform__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  margin-top: 1.25rem;
  padding: 0.7em 1.15em;
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 2.8vw, 1.1rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #201703;
  background: var(--foil-btn);
  background-size: 230% 100%;
  border: 1px solid var(--gold-700);
  border-radius: 999px;
  box-shadow: 0 8px 22px -12px rgba(223, 174, 69, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.platform__link:hover { color: #201703; background-position: 100% 50%; }

.notice {
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  padding: 1.5rem 1.25rem 1.6rem;
  border: 1px solid rgba(223, 174, 69, 0.22);
  background: rgba(0, 0, 0, 0.28);
  max-width: 68ch;
  margin-inline: auto;
}

.notice__label {
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 2.6vw, 1rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 0.75rem;
  margin-inline-start: 0.32em;
}

.notice__copy {
  font-size: clamp(1.02rem, 3.2vw, 1.08rem);
  line-height: 1.7;
  color: rgba(245, 243, 238, 0.84);
}

.foot {
  text-align: center;
  padding: 1.35rem 1.25rem 1.6rem;
  border-top: 1px solid rgba(223, 174, 69, 0.16);
  background: #030201;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
}
.foot a { color: rgba(255, 255, 255, 0.78); border-bottom: 1px solid rgba(223, 174, 69, 0.32); }
.foot a:hover { color: var(--gold-300); }

/* --------------------------------------------------------------------------
   Entrance choreography
   -------------------------------------------------------------------------- */

[data-in] { opacity: 0; transform: translateY(20px); animation: rise 900ms var(--ease-out) forwards; }
[data-in="1"] { animation-delay: 80ms; }
[data-in="2"] { animation-delay: 220ms; }
[data-in="3"] { animation-delay: 340ms; }
[data-in="4"] { animation-delay: 460ms; }
[data-in="5"] { animation-delay: 600ms; }
[data-in="6"] { animation-delay: 720ms; }
[data-in="7"] { animation-delay: 860ms; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   Responsive - cards stay two-up. Only the brief platforms stack.
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  .platforms { grid-template-columns: 1fr; gap: 1.1rem; }
  .choice__cta { letter-spacing: 0.04em; font-size: 0.72rem; padding-inline: 0.4em; }
  .platform__link { width: 100%; max-width: 22rem; }
}

@media (max-width: 820px) and (max-height: 820px) {
  .crest { width: clamp(5.25rem, 11svh, 10rem); margin-bottom: 0.2rem; }
  .groupname { margin-top: 0.12rem; font-size: clamp(1.7rem, 7.2vw, 5rem); }
  .ornament { margin-block: 0.22rem 0.28rem; }
  .choices { margin-top: 0.25rem; flex: 0 0 auto; }
  .choice { padding-block: 0.5rem 0.5rem; overflow: visible; }
  .choice__logo {
    width: clamp(4.2rem, min(56%, 15svh), 10rem);
    margin-bottom: 0.2rem;
  }
  .choice__desc { margin-bottom: 0.4rem; }
  .choice__cta { position: relative; z-index: 2; }
  .trust {
    flex: 0 0 auto;
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    gap: 0.4rem;
  }
  .trust li { padding-block: 0.45rem; gap: 0.3rem; }
  .trust__mark { width: 2.1rem; height: 2.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  [data-in] { opacity: 1; transform: none; }
}