/* ==========================================================================
   STAR — standalone landing page
   --------------------------------------------------------------------------
   Loaded ONLY on /star/ (see jp_star_landing_page() in functions.php).
   Self-contained: no main.css, no Beaver Builder, no plugin CSS. Every
   selector is namespaced `star-` so nothing leaks in either direction.

   Built from Figma "Star page" → frame "STAR V4" (node 87:164), a 1920px
   artboard. Every dimension below is the Figma value converted to rem at
   16px = 1rem, and the root font-size scales with the viewport — so the
   whole page stays proportionally identical to the comp at any width.
     design px ÷ 16 = rem        e.g. 86px headline → 5.375rem
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts — Söhne + Söhne Breit, self-hosted from /star/fonts
   --------------------------------------------------------------------------
   woff2 built from the .otf trials in /star/assets. Inter and Abhaya Libre
   are gone: the V3 comp sets every last string in Söhne.

   TRIAL FONTS — each file carries 68 glyphs: A–Z, a–z, 0–9, space, comma,
   hyphen, period, Ö/ö. Nothing else. The page copy uses `&` (three times),
   `/` (the two role lines) and `@` (the footer address), none of which have
   a glyph here, so those characters alone fall back to the next family in
   the stack. That is why every stack below keeps a grotesque next in line —
   the substitution stays quiet rather than landing on a serif. Dropping in
   the licensed retail cuts fixes it with no CSS change.

   Styles the comps name, and the cut each one loads:
     Söhne Leicht (300) ......... ✓ sohne-leicht
     Söhne Buch (400) ........... ✓ sohne-buch
     Söhne Kräftig (500) ........ ✓ sohne-kraftig
     Söhne Breit Buch Kursiv .... ✓ sohne-breit-buch-kursiv
     Söhne Breit Halbfett Kursiv  ✓ sohne-breit-halbfett-kursiv
     Söhne Breit Dreiviertelfett  ✓ sohne-breit-dreiviertelfett
   The page is Söhne throughout, by decision. Where a comp names Inter (card
   copy, copyright, the phone comp's names and discipline copy), the string
   takes the matching Söhne weight: Light → Leicht, Medium → Kräftig.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Star Sohne';
  src: url('fonts/sohne-leicht.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Star Sohne';
  src: url('fonts/sohne-buch.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Star Sohne';
  src: url('fonts/sohne-kraftig.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Star Sohne Breit';
  src: url('fonts/sohne-breit-buch-kursiv.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Star Sohne Breit';
  src: url('fonts/sohne-breit-dreiviertelfett.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Star Sohne Breit';
  src: url('fonts/sohne-breit-halbfett-kursiv.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  --star-sans: 'Star Sohne', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* The wide cut — headings, eyebrows and names only. */
  --star-breit: 'Star Sohne Breit', 'Helvetica Neue', Helvetica, Arial,
    sans-serif;

  --star-black: #000;
  --star-white: #fff;
  --star-mauve: #c0b0bb; /* rules, hero sub-head, CTA label */
  --star-navy: #2f476f; /* "who we partner with" band */

  --star-frame-inset: 3.6875rem; /* = the body padding — see .star-page */
  --star-logo-break: 25px; /* how far the mark sits outside the frame rule */
  --star-logo-h: 6.5rem; /* the masthead mark — the nav rule keys off its half */
  --star-logo-pad: 20px; /* white knockout around the mark, clearing the rules */
  /* Walks the mark out of the frame's padding, past its rule, and --star-logo-
     break further, so both rules cross the glyph at the top-left corner. */
  --star-logo-pull: calc(
    -1 * var(--star-frame-inset) - 1px - var(--star-logo-break)
  );

  --star-shell: 120rem; /* 1920 */
  --star-pad: 6.25rem; /* 100  */
  --star-pad-right: 8.3125rem; /* 133 — footer content stops at x=1787  */
  --star-pad-intel: 5.6875rem; /* 91 — intelligence tiles stop at 1829 */
}

/* 16px at the 1920 artboard, scaling down with the viewport. */
html {
  font-size: clamp(9.5px, 0.8333vw, 16px);
}

/* --------------------------------------------------------------------------
   3. Reset (scoped to this page)
   -------------------------------------------------------------------------- */
.star-page *,
.star-page *::before,
.star-page *::after {
  box-sizing: border-box;
}

.star-page {
  margin: 0;
  padding: 0;
  background: var(--star-white);
  color: var(--star-black);
  font-family: var(--star-sans);
  /* Söhne's only roman cut is Buch — 300 asked for a light the family does
     not have and got Buch anyway. Say what we mean. */
  font-weight: 400;
  font-size: 1.25rem; /* 20 — the comp moved body copy off 19.6 */
  line-height: 1.875rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* :where() keeps the reset at zero specificity so the single-class spacing
   rules below always win. */
:where(.star-page) :where(h1, h2, h3, p, ul, li, figure) {
  margin: 0;
  padding: 0;
}

:where(.star-page) :where(ul) {
  list-style: none;
}

:where(.star-page) :where(img, svg) {
  display: block;
  max-width: 100%;
}

:where(.star-page) :where(a) {
  color: inherit;
  text-decoration: none;
}

.star-page a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.star-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   4. Shared type + layout
   -------------------------------------------------------------------------- */
.star-shell {
  width: 100%;
  max-width: var(--star-shell);
  margin-inline: auto;
  padding-inline: var(--star-pad);
}

/* The page's rule. On its own element rather than <body> so the masthead can
   hang outside it cleanly. Proportions are the comp's: the rule sits 4.1% of
   the page width in from the edge, content a further 3.1% inside it. In rem,
   so those proportions hold at any width. Mobile overrides below. */
.star-frame {
  margin: 4.9375rem; /* 79 at the 1920 artboard */
  padding: 3.6875rem; /* 59 — keep in step with --star-frame-inset */
  border: 1px solid var(--star-black);
}

/* Sections whose content stops short of the 100px right gutter. */
.star-shell--inset {
  padding-right: var(--star-pad-right);
}

.star-shell--intel {
  padding-right: var(--star-pad-intel);
}

/* The V3 comp splits the one 22px `.star-label` into three jobs. The markup
   already tells them apart, so they are scoped off it rather than by adding
   classes to every call site:

     name     h3 — discipline + person ... 22px Breit Dreiviertelfett
     eyebrow  h2 + the hero CTA .......... 30px Breit Halbfett Kursiv
     meta     nav + "a janou pakter" ..... 20px Söhne Buch

   Order matters below: `.star-label--lg` ties with `.star-label` on
   specificity, so it has to sit in the later rule to take effect. */

/* name — the base, because every h3 carrying .star-label wants it */
.star-label {
  font-family: var(--star-breit);
  font-weight: 700; /* Dreiviertelfett */
  font-size: 1.375rem; /* 22 */
  line-height: 1.35;
  text-transform: uppercase;
}

/* eyebrow. --lg was the 24px "who we partner with" variant; V3 sets every
   eyebrow at 30, so the class is now just an alias kept for the markup. */
h2.star-label,
.star-label--lg,
.star-cta.star-label {
  font-family: var(--star-breit);
  font-weight: 600; /* Halbfett */
  font-style: italic; /* Kursiv */
  font-size: 1.875rem; /* 30 */
  line-height: 1.35;
  text-transform: uppercase;
}

/* meta — off the wide cut, back at body size */
.star-masthead__nav.star-label,
.star-who__head p.star-label,
.star-footer__company.star-label {
  font-family: var(--star-sans);
  font-weight: 400;
  font-size: 1.25rem; /* 20 */
  line-height: 1.875rem;
  text-transform: uppercase;
}

/* 20px / 30px Söhne Buch — all body copy */
.star-body {
  font-size: 1.25rem; /* 20 */
  font-weight: 400;
  line-height: 1.875rem; /* 30 */
  letter-spacing: 0.0125rem; /* 0.2 */
}

/* 45px / 50px Söhne Leicht — section display headings. */
.star-display {
  font-family: var(--star-sans);
  font-weight: 300; /* Leicht */
  font-size: 2.8125rem; /* 45 */
  line-height: 3.125rem; /* 50 */
}

/* --------------------------------------------------------------------------
   5. Hero  (Figma: header, 1920 × 1074)
   -------------------------------------------------------------------------- */
.star-hero {
  position: relative;
  min-height: 67.125rem;
  padding-block: 14.8125rem 7.125rem;
  background: var(--star-black);
  color: var(--star-white);
  isolation: isolate;
}

.star-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* Crop transform lifted straight from the Figma frame. */
.star-hero__media img {
  position: absolute;
  left: 0.02%;
  top: -2.53%;
  width: 100%;
  height: 111.18%;
  max-width: none;
  object-fit: cover;
}

/* Sits above the hero on the white page, not over the image. `relative`
   anchors the mobile menu panel; the z-index lets that panel cover the hero. */
/* Sits above the hero on the white page, not over the image. `relative`
   anchors the mobile menu panel; the z-index lets that panel cover the hero. */
.star-masthead {
  position: relative;
  z-index: 2;
  display: flex;
  /* Top-aligned, so the nav can be dropped to the mark's midline below. */
  align-items: flex-start;
  justify-content: space-between;
  gap: 4.25rem; /* 68 — the comp's gap between mark and rule */
  /* No top padding: the mark is pulled above the frame and defines the top. */
  /* padding-block: 0 2rem; */
  /* The masthead drops the shell gutter so the mark and the nav rule can
     both reach the frame. Everything below keeps the 100px gutter. The
     shell's auto margins are left alone, so this still centres above 1920. */
  padding-inline: 0;
}

/* The mark sits in the frame's top-left corner, breaking out of the body's
   padding on BOTH axes: up to the rule vertically, and past it horizontally
   by --star-logo-break so the rule crosses the glyph. */
.star-masthead .star-logo {
  /* The mark knocks the frame out behind itself, so neither rule runs through
     the glyph. content-box keeps the padding OUTSIDE the mark's own box, so
     the knockout grows without the artwork changing size, and the matching
     negative margins hold the glyph exactly where it was. */
  box-sizing: content-box;
  padding: var(--star-logo-pad);
  background: var(--star-white);
  margin-top: calc(var(--star-logo-pull) - var(--star-logo-pad) - 16px);
  margin-left: calc(var(--star-logo-pull) - var(--star-logo-pad));
}

.star-masthead__nav {
  flex: 1;
  /* Pulled across the frame's padding so the band reaches the rule itself —
     a flex item grows by its own negative margin. */
  margin-right: calc(-1 * var(--star-frame-inset));
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 4rem;
  /* Follows the mark up, then back down by half its height, so the band's
     upper rule lands on the logo's midline. */
  margin-top: calc(var(--star-logo-pull) + var(--star-logo-h) / 2);
}

/* The rules are drawn by a spacer that stops where the label begins, so
   nothing runs above or below the label itself. */
/* .star-masthead__nav::before {
  content: '';
  flex: 1;
  height: 4.6875rem; 
  margin-right: 2.125rem;
  border-top: 1px solid var(--star-black);
  border-bottom: 1px solid var(--star-black);
} */


.star-logo {
  display: block;
  width: 6.8125rem;
  height: var(--star-logo-h);
  flex: none;
}

.star-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.star-hero h1 {
  font-family: var(--star-breit);
  font-weight: 600; /* Halbfett */
  font-style: italic; /* Kursiv */
  font-size: 5.375rem; /* 86 */
  line-height: 1.0581; /* 91/86 — unitless so the smaller steps below
                          inherit the ratio rather than the 91px */
  text-transform: uppercase;
}

.star-hero__sub {
  margin-top: 1.875rem;
  font-family: var(--star-sans);
  font-weight: 400;
  font-size: 4rem; /* 64 */
  line-height: 1; /* 64 */
  text-transform: uppercase;
  color: var(--star-mauve);
}

.star-hero__rule {
  width: 5rem;
  height: 0.25rem;
  margin-top: 2.8125rem;
  background: var(--star-white);
}

.star-hero__text {
  margin-top: 4.9375rem;
  max-width: 34.25rem;
}

.star-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 553 — the comp's own rule width. "START A CONVERSATION" sets 27.69rem
     on the wide italic and the arrow takes 3.94, so 22.25 (sized for the old
     22px Inter) wrapped it at every width. This clears it with room over. */
  width: 34.5625rem;
  margin-top: 2.125rem;
  padding-bottom: 1.25rem;
  border-bottom: 0.1875rem solid var(--star-white);
  color: var(--star-mauve);
}

.star-cta img {
  width: 3.9375rem;
  height: auto;
  flex: none;
  transition: transform 0.25s ease;
}

.star-cta:hover img {
  transform: translateX(0.5rem);
}

/* --------------------------------------------------------------------------
   6. What we do
   -------------------------------------------------------------------------- */
.star-what {
  padding-block: 7.5rem;
}

/* Track widths are the comp's own column measures: 623 / 374 / 376 / 347 */
.star-what__grid {
  display: grid;
  grid-template-columns: 623fr 374fr 376fr 347fr;
}

.star-what__head {
  padding-top: 2.8125rem;
}

.star-what__lede {
  margin-top: 3.375rem;
  max-width: 29.75rem;
}

.star-discipline {
  position: relative;
  min-height: 17.1035rem;
  /* 1.625 = the 1.375 padding plus the 0.25 the border-left used to occupy,
     so the copy sits exactly where it did before the rule became a
     pseudo-element. */
  padding-left: 1.625rem;
}

/* The vertical rule. A real element rather than a border so it can be drawn. */
.star-discipline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 0.25rem;
  height: 100%;
  background: var(--star-mauve);
}

.star-discipline__text {
  margin-top: 1.5rem;
  max-width: 20.0625rem;
}

/* --------------------------------------------------------------------------
   7. Who we partner with  (1920 × 668 colour band)
   --------------------------------------------------------------------------
   The photo with the comp's navy scrim over it (node 274:95): solid navy
   from just short of halfway, fading out past the left edge.
   -------------------------------------------------------------------------- */
.star-partners {
  display: flex;
  align-items: center;
  min-height: 41.75rem;
  color: var(--star-white);
  background:
    linear-gradient(to left, var(--star-navy) 47.049%, rgba(90, 136, 213, 0) 119.34%),
    var(--star-navy) url('assets/who-we-partner-with-bg.png') center / cover no-repeat;
}

/* Node 274:4: four columns on a 393px pitch, two rows on a 110px pitch,
   the first column at x=305 — 205px in from the eyebrow. */
.star-partners__list {
  margin-top: 7.6875rem; /* 123 — eyebrow baseline to first row */
  padding-left: 12.8125rem; /* 205 */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 24.5625rem)); /* 393 */
  /* 80px on top of the 30px .star-body line box = the 110px row pitch. */
  row-gap: 5rem;
  text-transform: uppercase;
}

/* "Strategy Talent and Representation" (node 277:365). The comp spaces the
   words with runs of spaces; a margin between them (--star-tag-gap) gives
   the same ~104px rhythm. "And" drops to 20px on the shared baseline.

   Always one line. When the line won't fit, the script at the foot of
   template.php adds .is-marquee and a second copy of the phrase, and the
   pair scrolls on a loop instead (see the marquee rules below). */
.star-partners__tagline {
  --star-tag-gap: 6.5rem; /* ~104 */
  display: flex;
  white-space: nowrap;
  margin-top: 9.6875rem; /* 155 — second row to tagline */
  font-family: var(--star-breit);
  font-weight: 600; /* Halbfett */
  font-style: italic; /* Kursiv */
  font-size: 1.875rem; /* 30 */
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--star-mauve);
}

/* The comp's 676px indent (x=776), as a spacer that gives way first: the frame
   narrows the shell below the artboard's measure, and a fixed padding
   pushed the line out of it. */
.star-partners__tagline::before {
  content: '';
  flex: 0 1 42.25rem; /* 676 */
  min-width: 0;
}

.star-partners__track {
  display: flex;
  flex: none;
}

.star-partners__phrase {
  display: flex;
  align-items: baseline;
  flex: none;
}

.star-partners__phrase span + span {
  margin-left: var(--star-tag-gap);
}

/* Marquee. The tagline bleeds to the band's edges and clips; the track
   holds two copies of the phrase, each trailed by the same break, so sliding it
   left by exactly half lands the second copy where the first began. The
   script sets the duration from the phrase's width to keep the pace. */
.star-partners__tagline.is-marquee {
  margin-inline: calc(-1 * var(--star-pad));
  overflow: hidden;
}

.star-partners__tagline.is-marquee::before {
  content: none;
}

/* A wider break between loops than between words, so the end of one pass
   reads as an end rather than running on into the next. */
.star-partners__tagline.is-marquee .star-partners__phrase {
  padding-right: max(calc(var(--star-tag-gap) * 3), 4.5rem);
}

.star-partners__tagline.is-marquee .star-partners__track {
  animation: star-marquee var(--star-marquee-duration, 30s) linear infinite;
}

@keyframes star-marquee {
  to {
    transform: translateX(-50%);
  }
}

.star-partners__and {
  font-size: 1.25rem; /* 20 */
}

/* --------------------------------------------------------------------------
   8. Star Intelligence  (Figma node 347:294)
   Copy column 101–674, then three 369px square tiles 702–1829 with ~10px
   between them, each with its headline set over the photo.
   -------------------------------------------------------------------------- */
.star-intel {
  padding-block: 7.5rem;
}

.star-intel__grid {
  display: grid;
  /* The copy keeps the comp's 573 measure; the frame eats into the
     artboard's width, so the tiles take what is left. */
  grid-template-columns: 35.8125rem minmax(0, 1fr);
  column-gap: 1.75rem; /* 28 */
  align-items: center;
}

.star-intel__title {
  margin-top: 2.5rem;
  max-width: 35.8125rem; /* 573 */
  line-height: 4rem; /* 64 */
}

.star-intel__text {
  margin-top: 2rem;
  max-width: 35.8125rem;
  letter-spacing: 0.0125rem;
}

.star-intel__tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 0.65rem; /* ~10 */
}

/* The phone layout's single photo — hidden until section 12. */
.star-intel__photo {
  display: none;
}

.star-intel__tile {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--star-black);
  container-type: inline-size;
}

.star-intel__tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 22px at the comp's 369 tile, shrinking with narrower tiles so the
   longest headline still holds one line. */
.star-intel__tag {
  position: relative;
  padding-inline: 0.75rem;
  font-size: min(1.375rem, 5.4cqi);
  white-space: nowrap;
  color: var(--star-white);
  text-align: center;
}

/* --------------------------------------------------------------------------
   9. Who we are  (V4: full-width rail, two people side by side, 1920 × 779)
   Content sits in its own 115 / 87 gutters rather than the page's 100.
   -------------------------------------------------------------------------- */
.star-who {
  min-height: 48.6875rem;
  padding-block: 7.5rem 9.125rem;
  background: var(--star-black);
  color: var(--star-white);
}

.star-who .star-shell {
  padding-left: 7.1875rem;
  padding-right: 5.4375rem;
}

.star-who__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2.5rem;
}

.star-who__title {
  margin-top: 2.9375rem;
  max-width: 50.125rem;
}

.star-people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 7.125rem;
  row-gap: 4rem;
  margin-top: 3.3125rem; /* 53 — title box bottom 3307 to photo top 3360 */
}

.star-person {
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr);
  grid-template-areas:
    'photo body'
    'photo bio';
  /* the photo spans both rows — pin the slack to row 2 so the bio keeps its
     own offset instead of having the extra height split across both rows */
  grid-template-rows: auto 1fr;
  column-gap: 1.75rem;
  align-items: start;
  align-content: start;
}

.star-person__photo {
  grid-area: photo;
}
.star-person__body {
  grid-area: body;
}
.star-person__bio {
  grid-area: bio;
}

.star-person__photo {
  width: 15.5rem;
  height: 15.24rem;
  overflow: hidden;
  border: 0.125rem solid var(--star-mauve);
}

.star-person__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Söhne Breit Buch Kursiv, as the comp asks. */
.star-person__role {
  margin-top: 1rem;
  font-family: var(--star-breit);
  font-size: 1.225rem; /* 19.6 */
  font-weight: 400; /* Buch */
  font-style: italic; /* Kursiv */
  line-height: 1.875rem;
  letter-spacing: 0.0125rem;
  color: var(--star-mauve);
}

.star-person__bio {
  margin-top: 1.125rem;
  font-weight: 300; /* Leicht */
}

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */
/* V4's taller black band leaves only a 35px gap before the footer frame. */
.star-footer {
  padding-top: 0.8125rem;
  padding-bottom: 4.875rem;
}

.star-footer__main {
  display: grid;
  /* The comp's column measures, with 24 moved from the social track to the
     company one: at 385/301 the divider closed to 17px off the end of "A
     JANOU PAKTER COMPANY". This puts it at the comp's ~36. The icons are
     right-aligned to the track's far edge, which has not moved, so they
     stay put. */
  grid-template-columns: 694fr 307fr 409fr 277fr;
  align-items: center;
  padding-top: 0.9375rem;
  padding-bottom: 7.6875rem;
}

.star-footer__label {
  font-weight: 300; /* Leicht */
}

.star-footer__email {
  display: inline-block;
  /* The comp sets the two lines 39 apart centre to centre; the line box is
     already 30 of that, so 9 is the gap between them. */
  margin-top: 0.5625rem; /* 9 */
  font-size: 1.25rem; /* 20 */
  font-weight: 400; /* as above — no bold cut to reach for */
  line-height: 1.875rem;
  letter-spacing: 0.0125rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.star-footer__email:hover {
  border-bottom-color: var(--star-black);
}

/* 4 × 107px mauve dividers between the footer's middle groups */
.star-footer__col {
  position: relative;
}

.star-footer__col--divided::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.25rem;
  height: 6.6875rem;
  /* Centred with a margin rather than translateY(-50%) so `transform` is
     free to carry the draw-down. */
  margin-top: -3.34375rem;
  background: var(--star-mauve);
}

.star-footer__company {
  padding-left: 2.6875rem;
}

.star-social {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.875rem;
}

.star-social a {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.0625rem;
  height: 2.125rem;
  border: 0.125rem solid var(--star-black);
  border-radius: 0.625rem;
  transition: opacity 0.2s ease;
}

/* The Instagram glyph is its own outlined mark in the comp — no box. */
.star-social a.star-social--bare {
  width: 2.375rem;
  height: 2.0625rem;
  border: 0;
  border-radius: 0;
}

.star-social a:hover {
  opacity: 0.6;
}

.star-social img {
  width: auto;
  height: 1.8125rem;
}

/* The LinkedIn glyph is the only boxed mark left, so it is matched by what
   it is rather than where it sits — it led to a mis-sized icon when Substack
   came out of the row ahead of it. */
.star-social a:not(.star-social--bare) img {
  width: 1.125rem;
  height: 1.1875rem;
}

.star-social--bare img {
  height: 2.0625rem;
}

.star-footer__legal {
  position: relative;
  display: flex;
  font-weight: 300; /* Leicht — copyright, Privacy */
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  /* 2.75 = the 2.5 padding plus the 0.25 the border-top used to occupy. */
  padding-top: 2.75rem;
}

.star-footer__legal::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0.25rem;
  background: var(--star-mauve);
}

.star-footer__copy,
.star-footer__links {
  display: flex;
  align-items: center;
}

.star-footer__copy {
  gap: 0.6875rem;
}

.star-footer__links {
  gap: 1.4375rem;
}

.star-footer__links a {
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.star-footer__links a:hover {
  border-bottom-color: var(--star-black);
}

/* --------------------------------------------------------------------------
   11. Tablet  (768 – 1100)
   The 1920 comp's proportions stop working once the root size nears its
   floor, so columns stack and the root size is held at a readable value.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  html {
    font-size: clamp(11px, 1.15vw, 13px);
  }

  .star-what__grid,
  .star-intel__grid {
    grid-template-columns: 1fr;
    row-gap: 3.5rem;
  }

  .star-what__head {
    padding-top: 0;
  }

  /* Single column from here down — let the lede take the width it needs. */
  .star-what__lede {
    max-width: none;
  }

  .star-disciplines {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 2.5rem;
  }

  /* Below the rem floor the two-up people row gets cramped — stack it. */
  .star-people {
    grid-template-columns: 1fr;
    row-gap: 3rem;
  }

  .star-shell--inset,
  .star-shell--intel {
    padding-right: var(--star-pad);
  }

  .star-hero,
  .star-partners,
  .star-who {
    min-height: 0;
  }

  .star-hero {
    padding-block: 12rem 6rem;
  }

  /* Keep the bright star in view, in the open sky above the headline.
     It sits at 62% / 36.9% of the photo. The hero is narrower than the
     photo's 3:2 from here down, so `cover` scales to height and crops the
     sides: an object-position of 62% then pins the star at 62% across.
     Vertically, the image box runs 145% of the hero, lifted 41.5%, which
     lands the star at -41.5 + 36.9 × 1.45 ≈ 12% down — clear of the
     headline — while still covering the hero's bottom edge (103.5%). */
  .star-hero__media img {
    left: 0;
    top: -41.5%;
    width: 100%;
    height: 145%;
    object-position: 62% 36.9%;
  }

  /* "REPRESENTATION" sets ~10.7em wide on the wide italic, and the root
     sits on its 11px floor through most of this range while the viewport
     keeps narrowing — a fixed size ran it out of the hero below ~950px.
     So size it to the measure: the viewport less the frame margin, frame
     padding and shell padding each side (29.75rem) and the 2px frame
     border, over 11em for a little air. Capped at 76, which it reaches
     near 1100. */
  .star-hero h1 {
    font-size: min(4.75rem, calc((100vw - 29.75rem - 2px) / 11));
  }

  .star-partners {
    padding-block: 6rem;
  }

  /* Four 393px columns plus the indent don't fit the tablet frame — drop
     the indent and fall back to three columns sized to their copy. */
  .star-partners__list {
    margin-top: 3rem;
    padding-left: 0;
    grid-template-columns: repeat(3, max-content);
    column-gap: 4.375rem;
    row-gap: 2.5rem;
  }

  .star-partners__tagline {
    --star-tag-gap: 3rem;
    margin-top: 5rem;
  }

  .star-partners__tagline::before {
    content: none;
  }
}

/* --------------------------------------------------------------------------
   12. Mobile  (≤ 768)
   Figma "Star page" → frame "iPhone 16 - 1" (node 92:3), a 393px artboard.
   Same convention as the desktop build: design px ÷ 16 = rem, with the root
   size tracking 393 so the phone comp scales the way the desktop one does.
   Measures are set as a share of the container rather than the comp's exact
   pixel widths, so copy is free to run wider as the viewport approaches 768.
   Thumbnails scale with them so the two stay in proportion.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  html {
    font-size: clamp(13px, 4.0712vw, 16px); /* 16px at the 393 frame */
  }

  :root {
    --star-pad: 1.5rem; /* 24 */
    --star-pad-right: 1.5rem;
    --star-pad-intel: 1.5rem;
    --star-logo-break: 6px; /* the mark is only ~26px here — break out less */
    --star-frame-inset: 0.75rem; /* = the frame padding below */
  }

  /* Same proportions as desktop — 4.1% of the width to the rule and 3.1%
     inside it — but rem stops shrinking at this breakpoint, so the desktop
     79/59 would eat a third of a 393px screen. These are those percentages
     computed at 393 instead. */
  .star-frame {
    margin: 1rem; /* 16 — 4.1% of 393 */
    padding: 0.75rem; /* 12 — 3.1%; keep in step with --star-frame-inset */
  }

  /* -- mobile type scale ------------------------------------------------ */
  .star-page,
  .star-body {
    font-size: 0.875rem; /* 14 */
    line-height: 1.25rem; /* 20 */
  }

  /* The phone comp sets eyebrows and names alike at 16. Selectors mirror
     the desktop ones so specificity resolves the same way — without that,
     the 0,2,0 desktop rules would outrank a bare `.star-label` here. */
  .star-label {
    font-size: 1rem; /* 16 */
    line-height: 1.35;
  }

  h2.star-label,
  .star-label--lg {
    font-size: 1rem; /* 16 */
    line-height: 1.35;
  }

  .star-masthead__nav.star-label {
    font-size: 14px;
    line-height: 1.35;
  }

  .star-cta.star-label,
  .star-who__head p.star-label,
  .star-footer__company.star-label {
    font-size: 0.875rem; /* the phone comp keeps the CTA at body size */
    line-height: 1.25rem;
  }

  .star-display {
    font-size: 1.5rem; /* 24 */
    line-height: 1.875rem; /* 30 */
  }

  /* -- hero  (393 × 705) ------------------------------------------------ */
  .star-hero {
    /* The 705px artboard left 268px of empty band below the CTA at 393px,
       where the copy only needs ~437px. Hold a floor just clear of it. */
    min-height: 30rem;
    /* The copy had grown to within 5px of the floor, leaving the CTA sitting
       on the section's edge — hold some air under it. */
    padding-block: 8.5625rem 2.5rem;
  }

  /* The phone comp drops the star lower than the tablet rule does — ~27%
     down, just above the headline: -26.5 + 36.9 × 1.45 ≈ 27. The image
     still covers to 118.5%. */
  .star-hero__media img {
    top: -26.5%;
  }


  .star-masthead {
    align-items: center;
    justify-content: flex-end; /* the mark is out of flow — the line sits right */
    padding-block: 1.5rem;
  }

  /* The mark straddles the corner here too. It is pinned rather than pulled
     with margins: a negative margin shrinks its flex outer box, which would
     drag the company line up with it. Out of flow, that line keeps its own
     vertical placement and the offsets stay desktop's expression. */
  .star-masthead .star-logo {
    position: absolute;
    top: calc(var(--star-logo-pull) - var(--star-logo-pad));
    left: calc(var(--star-logo-pull) - var(--star-logo-pad));
    margin: 0;
  }

  .star-logo {
    /* width: 1.6396rem;
    height: 1.5692rem; */
    width: 55px;
    height: auto;
  }

  /* 27 / 32 per the phone comp. "REPRESENTATION" sets ~290px on the wide
     cut against the frame's 287px measure, so it hangs ~3px into the
     gutter — it never wraps, and the root scales with the viewport, so
     that holds at every phone width. */
  .star-hero h1 {
    font-size: 1.6875rem; /* 27 */
    line-height: 2rem; /* 32 */
  }

  .star-hero__sub {
    margin-top: 0.59375rem;
    font-size: 1.25rem; /* 20 */
    line-height: 1.5rem;
  }

  .star-hero__rule {
    width: 1.1875rem;
    height: 0.125rem; /* 2 — every rule in the phone comp is 2px */
    margin-top: 0.25rem;
  }

  /* The phone comp drops the hero and discipline copy to Leicht. */
  .star-hero__text,
  .star-discipline__text {
    font-weight: 300;
  }

  .star-hero__text {
    margin-top: 1.5rem;
    max-width: min(79%, 30rem);
    letter-spacing: 0.003rem; /* the comp tracks the hero copy at ~0 */
  }

  .star-cta {
    /* The label needs ~243 of the shell's 287px content box at this size;
       63.5% gave it 182. Percentages here resolve against that 287, not the
       335 the padding box reports. */
    width: min(92%, 22rem);
    margin-top: 0.625rem;
    padding-bottom: 0.3125rem;
    border-bottom-width: 0.125rem; /* 2 */
    /* font-size: see .star-cta.star-label above. */
  }

  .star-cta img {
    width: 2.25rem;
  }

  /* -- masthead --------------------------------------------------------- */
  /* No burger and no panel: the company line just sits at the top right,
     the way it does on desktop. These reset the desktop rule's pull to the
     frame, which only makes sense next to the full-width nav band. */
  .star-masthead__nav {
    flex: none;
    margin: 0;
    padding-right: 0;
  }

  /* -- what we do ------------------------------------------------------- */
  .star-what {
    padding-block: 3rem;
  }

  .star-what__grid {
    row-gap: 0;
  }

  .star-what__lede {
    margin-top: 1rem;
  }

  .star-disciplines {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  /* The vertical rules become a 223px rule under each item but the last. */
  .star-discipline {
    min-height: 0;
    padding-top: 2rem;
    padding-left: 0;
  }

  /* Stacked here, so the vertical rule gives way to the ::after rule below. */
  .star-discipline::before {
    display: none;
  }

  .star-discipline + .star-discipline {
    padding-top: 2.5rem;
  }

  .star-discipline:not(:last-child)::after {
    content: '';
    display: block;
    width: min(64.6%, 22rem); /* 223 at the 393 frame */
    height: 0.125rem; /* 2 */
    margin-top: 0.4375rem;
    background: var(--star-mauve);
  }

  .star-discipline .star-body {
    line-height: 1.875rem; /* 30 — the comp keeps the desktop leading here */
  }

  .star-discipline__text {
    margin-top: 0.4rem;
    max-width: none;
  }

  /* -- who we partner with ---------------------------------------------- */
  .star-partners {
    display: block;
    /* Height comes from the content and this padding alone — a min-height
       would add back the space the padding was trimmed to remove. */
    min-height: 0;
    padding-block: 3rem;
    /* The phone comp angles the scrim (node 306:10). */
    background-image:
      linear-gradient(234.03deg, var(--star-navy) 22.582%, rgba(90, 136, 213, 0) 75.249%),
      url('assets/who-we-partner-with-bg.png');
  }

  .star-partners__list {
    margin-top: 2.3125rem;
    max-width: min(93%, 34rem);
    /* Three columns don't fit a 393px artboard — stack back to one. */
    grid-template-columns: 1fr;
    row-gap: 1.2rem; /* 36px item pitch */
    position: relative;
    /* Items at x=74 in the comp, 50 in from the content edge. */
    padding-left: 3.125rem;
  }

  /* The mauve bracket down the list's left side (node 307:45): a 2px
     rule at x=28 with 34px ticks at the first and last items' centres.
     0.6em is half the 1.2 line box. Drawn as three background segments —
     top tick, side, bottom tick — each sized by its own custom property,
     so section 13 can draw them one after another. */
  .star-partners__list::before {
    content: '';
    position: absolute;
    left: 0.25rem;
    top: calc(0.6em - 1px);
    bottom: calc(0.6em - 1px);
    width: 2.125rem; /* 34 */
    background:
      linear-gradient(var(--star-mauve), var(--star-mauve)) right top /
        var(--star-bracket-top, 100%) 0.125rem no-repeat,
      linear-gradient(var(--star-mauve), var(--star-mauve)) left top /
        0.125rem var(--star-bracket-side, 100%) no-repeat,
      linear-gradient(var(--star-mauve), var(--star-mauve)) left bottom /
        var(--star-bracket-bottom, 100%) 0.125rem no-repeat;
  }

  .star-partners__list li {
    line-height: 1.2;
  }

  /* The phone comp's order (node 92:3): Global Enterprises, Executives,
     Creative Leaders, Founder lead Companies, Investors, Emerging Brands,
     Cultural Institutions. Keyed to the desktop source order. */
  .star-partners__list li:nth-child(2) { order: 4; } /* Founder lead */
  .star-partners__list li:nth-child(3) { order: 3; } /* Creative */
  .star-partners__list li:nth-child(4) { order: 2; } /* Executives */
  .star-partners__list li:nth-child(5) { order: 7; } /* Cultural */
  .star-partners__list li:nth-child(6) { order: 6; } /* Emerging */
  .star-partners__list li:nth-child(7) { order: 5; } /* Investors */

  /* 16 / 12 per the phone comp, where the line runs off the edge. */
  .star-partners__tagline {
    --star-tag-gap: 1.375rem; /* 22 — the comp's five spaces */
    margin-top: 3rem;
    font-size: 1rem; /* 16 */
  }

  .star-partners__and {
    font-size: 0.75rem; /* 12 */
  }

  /* -- star intelligence  (node 347:275) ------------------------------- */
  /* Order is eyebrow, title, photo, then the paragraph: the head's
     children join the grid so the tiles can slot in between. */
  .star-intel {
    padding-block: 3rem;
  }

  .star-intel__grid {
    row-gap: 0;
  }

  .star-intel__head {
    display: contents;
  }

  .star-intel__title {
    margin-top: 0.775rem;
    max-width: min(84%, 34rem);
    line-height: 1.875rem;
  }

  .star-intel__text {
    order: 1;
    margin-top: 1.25rem;
    line-height: 1.875rem; /* 30 — the phone comp keeps it airy */
  }

  /* One photo running off the left edge of the frame, the three headlines
     stacked on bars over its right side and out to the frame's far edge.
     Clipped so the bars can slide in from outside it. */
  .star-intel__tiles {
    position: relative;
    display: block;
    margin-top: 1.125rem;
    margin-inline: calc(-1 * (var(--star-frame-inset) + var(--star-pad)));
    overflow: hidden;
  }

  .star-intel__photo {
    display: block;
    width: 74.5%; /* 293 of 393 */
    height: auto;
    aspect-ratio: 293 / 205; /* taller than the comp's 151 — more stairwell */
    object-fit: cover;
    object-position: 50% 60%;
  }

  .star-intel__tile {
    position: absolute;
    /* The stack (3 × 27 bars on a 33 pitch = 93) centred on the photo. */
    top: calc(50% - 2.90625rem + var(--star-bar, 0) * 2.0625rem);
    left: 19%; /* started at 29% (114 of 393) — pulled left so the longest
                  headline clears the frame edge on narrow phones */
    right: 0;
    display: block;
    place-items: normal; /* newer engines honour justify-items on blocks */
    aspect-ratio: auto;
    container-type: normal;
    background: linear-gradient(90deg, var(--star-navy), rgba(90, 136, 213, 0.48));
  }

  .star-intel__tile:nth-of-type(2) {
    --star-bar: 1;
  }

  .star-intel__tile:nth-of-type(3) {
    --star-bar: 2;
  }

  .star-intel__tile img {
    display: none;
  }

  .star-intel__tag {
    padding-inline: 0.4375rem;
    font-size: min(1rem, 4.4vw); /* 16, easing down a hair below ~364px */
    line-height: 1.6875rem; /* 27 — the bar height */
    text-align: left;
    white-space: nowrap;
  }

  /* -- who we are  (393 × 753) ------------------------------------------ */
  .star-who {
    min-height: 0;
    padding-block: 3rem;
  }

  .star-who .star-shell {
    padding-left: var(--star-pad);
    padding-right: var(--star-pad);
  }

  /* The phone comp drops the "a janou pakter company" tag. */
  .star-who__head p {
    display: none;
  }

  .star-who__title {
    margin-top: 0.4625rem;
    max-width: min(97%, 40rem);
  }

  .star-people {
    margin-top: 3.0625rem;
    row-gap: 1.25rem;
  }

  .star-person {
    grid-template-columns: clamp(8.125rem, 33%, 14rem) minmax(0, 1fr);
    grid-template-areas:
      'photo body'
      'bio bio';
    column-gap: 1.25rem;
  }

  .star-person__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  .star-person__body {
    padding-top: 1.95rem;
  }

  .star-person__role {
    margin-top: 0.875rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .star-person__bio {
    margin-top: 0.625rem;
  }

  /* -- footer ----------------------------------------------------------- */
  .star-footer {
    padding-block: 1.25rem 2rem;
  }

  .star-footer__main {
    grid-template-columns: 8.5rem minmax(0, 1fr);
    grid-template-areas:
      'logo company'
      'social contact';
    align-items: start;
    row-gap: 1.25rem;
    padding-top: 0;
    padding-bottom: 2.75rem;
  }

  .star-footer__logo {
    grid-area: logo;
  }

  .star-footer__col--company {
    grid-area: company;
    padding-top: 0.375rem;
  }

  .star-footer__col--contact {
    grid-area: contact;
  }

  .star-footer__col--social {
    grid-area: social;
    padding-top: 1.5rem;
  }

  .star-footer__col--divided::before {
    display: none;
  }

  .star-footer .star-logo {
    width: 1.625rem;
    height: 1.5625rem;
  }

  .star-footer__company {
    padding-left: 0;
    /* font-size: see .star-footer__company.star-label above. */
  }

  .star-footer__label,
  .star-footer__email {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .star-footer__email {
    margin-top: 0.625rem;
  }

  .star-social {
    justify-content: flex-start;
    gap: 0.54rem;
  }

  .star-social a {
    width: 1.2739rem;
    height: 1.3125rem;
    border-width: 0.075rem;
    border-radius: 0.375rem;
  }

  .star-social a.star-social--bare {
    width: 1.4669rem;
    height: 1.2739rem;
  }

  .star-social img {
    height: 1.12rem;
  }

  .star-social a:not(.star-social--bare) img {
    width: 0.6948rem;
    height: 0.7335rem;
  }

  .star-social--bare img {
    height: 1.2739rem;
  }

  .star-footer__legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding-top: 1.625rem; /* 1.5 + the 0.125 rule */
    font-size: 0.8125rem;
  }

  .star-footer__legal::before {
    height: 0.125rem; /* 2 */
  }
}

/* Narrow phones: nudge the hero star right and down. The image is ~3×
   the hero's width here, so each 1% off 62% moves the star ~2% of the
   hero across — 59.5% shifts it roughly 17px at 393. Each 1% of `top`
   moves it 1% of the hero's height: -24.5% lands it ~29% down. */
@media (max-width: 450px) {
  .star-hero__media img {
    top: -24.5%;
    object-position: 59.5% 36.9%;
  }
}

/* --------------------------------------------------------------------------
   13. Motion
   --------------------------------------------------------------------------
   Two mechanisms, split by whether the element is above the fold.

   The hero animates on load with plain keyframes and no JS involvement, so
   nothing defers the page's largest paint (see the note on the block below).

   Everything further down is revealed on scroll and IS gated on `.star-js`,
   which the inline script in <head> puts on <html>. With JS off that class
   never lands, nothing is hidden, and those sections render exactly as they
   did before these animations existed. An IntersectionObserver adds
   `.star-in` once, on first entry; stagger within a group comes from
   --star-reveal-delay, set per element by the script at the foot of
   template.php.
   -------------------------------------------------------------------------- */
:root {
  --star-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* -- hero: runs on load, deliberately NOT gated on .star-js -------------
   The hero holds the largest paint on the page, so its reveal must not sit
   behind script execution. These are plain keyframes with fill-mode `both`:
   they begin at first paint, so the headline is opaque within a frame and
   the LCP timestamp is unaffected. The hidden start state lives only in the
   keyframe, which is why `animation: none` under reduced motion below is
   enough to render the hero fully visible.
   -------------------------------------------------------------------------- */
@keyframes star-rise {
  from {
    opacity: 0;
    transform: translateY(1.75rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes star-draw-x {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.star-hero__body > * {
  animation: star-rise 0.8s var(--star-ease) both;
}

/* Same 90ms cascade the observed sections use. */
.star-hero__body > *:nth-child(2) {
  animation-delay: 90ms;
}

.star-hero__body > *:nth-child(3) {
  animation-delay: 180ms;
}

.star-hero__body > *:nth-child(4) {
  animation-delay: 270ms;
}

.star-hero__body > *:nth-child(5) {
  animation-delay: 360ms;
}

/* The hero's rule is a rule — draw it, like the others, rather than fade it. */
.star-hero__body > .star-hero__rule {
  transform-origin: left;
  animation: star-draw-x 0.9s var(--star-ease) 180ms both;
}

/* -- copy and columns: fade in, rising ---------------------------------- */
.star-js .star-reveal {
  opacity: 0;
  transform: translateY(1.75rem);
  transition:
    opacity 0.8s var(--star-ease),
    transform 0.8s var(--star-ease);
  transition-delay: var(--star-reveal-delay, 0ms);
}

.star-js .star-reveal.star-in {
  opacity: 1;
  transform: none;
}

/* -- rules: drawn rather than faded ------------------------------------- */
/* Vertical — "what we do" and the footer dividers draw downward. The delay
   is inherited from the host element, so each rule draws with its own copy. */
.star-js .star-discipline::before,
.star-js .star-footer__col--divided::before {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.9s var(--star-ease);
  transition-delay: var(--star-reveal-delay, 0ms);
}

.star-js .star-discipline.star-in::before,
.star-js .star-footer__col--divided.star-in::before {
  transform: scaleY(1);
}

/* The phone layout's partner bracket (section 12) draws as one stroke:
   the top tick leftward from its tip, down the side, then the bottom tick
   out to the right. Registered so the three lengths can transition; each
   segment is timed to roughly its share of the stroke, with the ease saved
   for the final tick. Without @property the lengths can't interpolate, so
   the bracket simply appears whole when the list reveals. */
@property --star-bracket-top {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 100%;
}

@property --star-bracket-side {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 100%;
}

@property --star-bracket-bottom {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 100%;
}

.star-js .star-partners__list::before {
  --star-bracket-top: 0%;
  --star-bracket-side: 0%;
  --star-bracket-bottom: 0%;
  transition:
    --star-bracket-top 0.25s linear,
    --star-bracket-side 0.9s linear 0.25s,
    --star-bracket-bottom 0.45s var(--star-ease) 1.15s;
}

.star-js .star-partners__list.star-in::before {
  --star-bracket-top: 100%;
  --star-bracket-side: 100%;
  --star-bracket-bottom: 100%;
}

/* Horizontal — the footer's legal rule draws left to right. Below 768 the
   discipline rules turn horizontal too (section 12), so they follow suit. */
.star-js .star-footer__legal::before,
.star-js .star-discipline:not(:last-child)::after {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--star-ease);
}

.star-js .star-footer__legal.star-in::before,
.star-js .star-discipline.star-in:not(:last-child)::after {
  transform: scaleX(1);
}

/* -- intelligence headlines: slide in one after another (phone only) ---- */
@media (max-width: 768px) {
  .star-js .star-intel__tile {
    opacity: 0;
    transform: translateX(100%);
    transition:
      opacity 0.6s var(--star-ease),
      transform 0.9s var(--star-ease);
    transition-delay: calc(0.4s + var(--star-bar, 0) * 0.25s);
  }

  .star-js .star-intel__tiles.star-in .star-intel__tile {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .star-page * {
    transition: none !important;
    animation: none !important;
  }

  /* Transitions are off, so a reveal's start state would otherwise become its
     permanent state and the copy would never appear. Hold everything at its
     finished position instead. */
  .star-js .star-reveal,
  .star-js .star-intel__tile {
    opacity: 1;
    transform: none;
  }

  .star-js .star-partners__list::before {
    --star-bracket-top: 100%;
    --star-bracket-side: 100%;
    --star-bracket-bottom: 100%;
  }

  .star-js .star-discipline::before,
  .star-js .star-footer__col--divided::before,
  .star-js .star-footer__legal::before,
  .star-js .star-discipline:not(:last-child)::after {
    transform: none;
  }
}