/* ==========================================================================
   Careers — BUILD WHAT MATTERS
   --------------------------------------------------------------------------
   Rebuilt from scratch 2026-10-01 on the site's own section grammar from
   home.css (.v2 sections, .v2-eyebrow, .v2-head, .v2-lead, .v2-btn,
   .v2-link, .v2-reveal, .v2--finale). Five sections:

     01 open   navy    the claim, on the dark, under the hero's lily field
     02 work   white   what the work is, and why it is worth doing
     03 how    navy    THE STEM — the lily growing through the four ways
     04 grow   mist    what a person brings, and what they gain
     05 next   finale  the shared second bloom

   THE LILY IS THE STRUCTURE HERE. Home's lily drifts; About's arrives as a
   thought lands; this page's GROWS. Section 03 is one stem of light with a
   bud opening at each of the four ways of working and a crown of three
   petals at the end. Section 04 opens one small petal per quality.

   AUTHORED STILL. Everything below is written in its finished state — the
   stem at full height, every petal open, every station lit. That is what a
   reader with reduced motion, or without JavaScript, gets. The head adds,
   before first paint:
     .cr-motion   motion is allowed
     .cr-wide     the same, at 1024px and wider
   Rules under .cr-motion take a composition apart so it can arrive; the
   section's own .is-in (and .is-in on .cr-stem / .cr-qualities, set by
   home-scenes.js when the group itself reaches the screen) puts it back.

   Only transform, opacity, colour and stroke-dashoffset animate, each on
   its own element. Nothing is pinned, nothing hijacks the scroll, and this
   page has no JavaScript of its own at all. Exactly one thing loops -- the
   three petals rising past the hero bud -- and `.cr-open.is-live` stops even
   that the moment the hero leaves the screen.

   Loaded by /careers alone.
   ========================================================================== */

:root {
  /* the MedhaSofts palette. home.css resolves the shared button and section
     rules against these, and each page's own stylesheet supplies them. */
  --bl-midnight: #0B1630;
  --bl-deep-navy: #10264A;
  --bl-royal: #2563EB;
  --bl-electric: #4DA8FF;
  --bl-soft: #93C5FD;
  --bl-teal: #14B8A6;
  --bl-violet: #8B5CF6;
  --bl-coral: #F28B82;
  --bl-off-white: #F8FAFC;
  --bl-dark: #0F172A;
  --bl-slate: #475569;

  --cr-ease: cubic-bezier(.22, .61, .36, 1);
  --cr-slow: cubic-bezier(.16, .84, .3, 1);
  --cr-open: cubic-bezier(.34, 1.4, .64, 1);     /* a petal overshoots a little */

  /* one type scale for the page. Two sizes carry it: the voice (the claim)
     and the statement (every pulled line). Everything else is reading text
     from home.css, so the page never invents a sixth size. */
  --cr-t-voice: var(--t-hero);
  --cr-t-claim: var(--t-display);
  --cr-t-name: var(--t-h3);

  --cr-measure: 60ch;
  --cr-measure-tight: 42ch;
}

/* ================================================================ 01 open */
.cr-open { padding-block: var(--v2-pad-hero); }
/* one low, wide rise of light behind the words: the threshold, reduced to
   the one thing it was actually doing */
.cr-open__dawn {
  position: absolute;
  inset: auto -10% -30% -10%;
  z-index: -1;
  height: 78%;
  pointer-events: none;
  background:
    radial-gradient(60% 100% at 18% 100%, rgba(77, 168, 255, .28), transparent 72%),
    radial-gradient(44% 86% at 62% 100%, rgba(139, 92, 246, .20), transparent 74%);
}
.cr-open__inner { position: relative; }
.cr-open__copy { max-width: min(100%, 62ch); }
/* the claim takes the short measure, not the block: the sentence under it
   needs its own, and capping the whole column squeezed both */
.cr-open .v2-head h1 {
  max-width: 13ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--cr-t-voice);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.035em;
  color: #FFFFFF;
  text-wrap: balance;
}
.cr-open .v2-head h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--bl-soft), var(--bl-electric) 46%, var(--bl-violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cr-open .v2-lead, .cr-open .btn-row { max-width: var(--cr-measure); }
.cr-open .v2-lead { max-width: 46ch; }
/* START, not centre. The bud is 488px tall and the copy 313, so centring
   pushed the copy 88px down and left 131px of nothing between the
   breadcrumb and the eyebrow -- every other hero on the site starts its
   copy 61-113px below the crumbs. Top-aligned it lands at 74px, which is
   exactly where Huenova's sits. The bud still fills its own half. */
.cr-open__split { align-items: start; }
/* the object takes the larger half, as it does on Huenova and Integrations */
@media (min-width: 1024px) { .cr-open__split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }

/* ------------------------------------------------------------- THE BUD -- */
/* the page's motif at its first stage. The stem grows through section 3 and
   opens fully in the finale; this is where it starts. */
.cr-bud {
  position: relative;
  width: 100%;
  /* The bud is sized from its WIDTH alone, so on a short screen its base fell
     below the fold -- the drawing was never clipped by CSS, the viewport was
     cutting it. The second term caps the width so the height can never exceed
     roughly `100svh - 340px`, which is the same bargain the Home hero strikes
     with its photo window: the object gives way, not the copy.
     1.148 is the drawing's own width/height ratio (560/488). */
  max-width: min(560px, calc((100svh - 340px) * 1.148));
  margin-inline: auto;
}
.cr-bud__svg { display: block; width: 100%; height: auto; overflow: visible; }
.cr-bud__ground {
  fill: none;
  stroke: rgba(147, 197, 253, .22);
  stroke-width: 2;
  stroke-linecap: round;
}
.cr-bud__stem {
  fill: none;
  stroke: url(#crStem);
  stroke-width: 3.5;
  stroke-linecap: round;
  /* the path is ~180 units long; one dash covers it whole */
  stroke-dasharray: 240;
  stroke-dashoffset: 0;                      /* drawn by default */
}
.cr-bud__core { fill: #DBEAFE; filter: drop-shadow(0 0 14px rgba(147, 197, 253, .9)); }
.cr-bud__petal {
  transform-box: fill-box;
  transform-origin: 50% 100%;                /* the tip of the stem */
  transform: rotate(var(--a));
  color: var(--petal-electric);
  opacity: .92;
}
.cr-bud__petal:nth-child(1), .cr-bud__petal:nth-child(6) { color: var(--petal-violet); opacity: .78; }
.cr-bud__petal:nth-child(3), .cr-bud__petal:nth-child(4) { color: var(--petal-pale); }
.cr-bud__mote { color: var(--petal-soft); opacity: var(--m); }
/* the breadcrumb is a light-page component; on the dark open it takes the
   same pair every other dark hero on the site uses */
.cr-open .crumbs { margin-bottom: clamp(24px, 3vw, 44px); color: #C4D4EC; }
.cr-open .crumbs a { color: #D6E3F6; }
.cr-open .crumbs a:hover { color: #FFFFFF; }

/* ================================================================ 02 work */
.cr-work .v2-head h2, .cr-grow .v2-head h2 { max-width: 28ch; }

/* the turn in the argument: one statement, one paragraph, one petal beside
   it. It was a whole section; it is a sentence that changes the subject. */
.cr-turn {
  position: relative;
  padding-left: clamp(20px, 3vw, 40px);
  border-left: 2px solid rgba(37, 99, 235, .22);
}
.cr-turn__petal {
  position: absolute;
  left: clamp(-20px, -2.4vw, -14px);
  top: -14px;
  width: 26px;
  height: 58px;
  color: var(--petal-electric);
  opacity: .5;
  transform: rotate(14deg);
  transform-origin: 50% 100%;
}
.cr-turn__petal svg { width: 100%; height: 100%; }
.cr-turn__claim, .cr-detail__claim, .cr-people__claim {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--cr-t-claim);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.02em;
  color: var(--bl-midnight);
  max-width: var(--cr-measure-tight);
  text-wrap: balance;
}
.cr-turn__body, .cr-detail__body, .cr-people__body {
  margin: var(--space-4) 0 0;
  max-width: var(--cr-measure);
  font-size: clamp(1.02rem, .98rem + .25vw, 1.14rem);
  line-height: 1.68;
  color: var(--bl-slate);
}

/* the four areas, as one line of routes rather than a screen of its own */
.cr-areas { margin-top: clamp(40px, 5vw, 72px); }
.cr-areas__label {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(1.02rem, .95rem + .35vw, 1.22rem);
  font-weight: 600;
  letter-spacing: -.01em;
  color: #1D4ED8;
}
.cr-areas__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px clamp(20px, 3vw, 38px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cr-areas__list .v2-link { font-size: var(--text-sm); }

/* ============================================= 03 THE STEM (how we work) */
.cr-how__head { max-width: 34ch; }

.cr-stem {
  position: relative;
  margin: clamp(44px, 5.5vw, 80px) 0 0;
  /* the crown is wider than the stem it sits on, and a rotated petal reaches
     further still; this is the room its left-hand petal needs before the
     section clips it. The wide layout lays the stem across and gives it back. */
  padding-left: 34px;
  padding-bottom: clamp(92px, 9.5vw, 140px);  /* room for the crown */
}

/* the stem itself: a gradient bar scaled from its top edge. No SVG path, so
   it draws at any height with no layout read, and scaleY is the cheapest
   thing a compositor can do. */
.cr-stem__line {
  position: absolute;
  top: 6px;
  bottom: clamp(60px, 6.5vw, 96px);
  left: 49px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg,
    rgba(147, 197, 253, 0) 0%,
    var(--bl-electric) 10%,
    var(--bl-soft) 54%,
    var(--bl-violet) 94%,
    rgba(139, 92, 246, 0) 100%);
  transform-origin: 50% 0;
  box-shadow: 0 0 18px rgba(77, 168, 255, .5);
}
/* a faint track so the stem's full travel is always legible, drawn or not */
.cr-stem::before {
  content: '';
  position: absolute;
  top: 6px;
  bottom: clamp(60px, 6.5vw, 96px);
  left: 49px;
  width: 2px;
  border-radius: 2px;
  background: rgba(147, 197, 253, .14);
}

.cr-stations { margin: 0; padding: 0; list-style: none; }
.cr-station {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: start;
  column-gap: clamp(18px, 2.4vw, 30px);
  padding-bottom: clamp(34px, 4.4vw, 58px);
}
.cr-station:last-child { padding-bottom: clamp(18px, 2.4vw, 30px); }

/* the bud: the node on the stem, and the petal that opens from it */
.cr-station__bud { position: relative; display: block; height: 32px; }
.cr-station__node {
  position: absolute;
  left: 10px; top: 11px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--bl-electric);
  box-shadow: 0 0 0 4px rgba(77, 168, 255, .16), 0 0 16px rgba(77, 168, 255, .75);
}
.cr-station__petal {
  position: absolute;
  left: 13px;
  top: 16px;
  width: 22px;
  height: 50px;
  color: var(--petal-soft);
  opacity: .72;
  transform-origin: 50% 0;
  transform: rotate(38deg);
}
.cr-station:nth-child(even) .cr-station__petal {
  color: var(--petal-violet);
  transform: rotate(-32deg);
}
.cr-station__petal svg { width: 100%; height: 100%; }

.cr-station__copy { min-width: 0; padding-top: 2px; }
.cr-station__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--cr-t-name);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: #FFFFFF;
}
.cr-station__line {
  margin: 8px 0 0;
  max-width: 46ch;
  font-size: clamp(.99rem, .95rem + .2vw, 1.08rem);
  line-height: 1.6;
  color: #C9D8EE;                                 /* 8.3:1 on #0B1630 */
}

/* the crown: what grows out of the work, at the end of the stem */
.cr-crown {
  position: absolute;
  left: 50px;
  bottom: clamp(16px, 2vw, 34px);
  width: 2px;
  height: 2px;
}
.cr-crown__petal {
  position: absolute;
  left: -19px;
  bottom: 0;
  width: 38px;
  height: 86px;
  transform-origin: 50% 100%;
  transform: rotate(var(--r));
  color: var(--petal-electric);
  opacity: .8;
}
.cr-crown__petal:nth-child(2) { color: var(--petal-soft); height: 104px; left: -22px; width: 44px; }
.cr-crown__petal:nth-child(3) { color: var(--petal-violet); }
.cr-crown__petal svg { width: 100%; height: 100%; }
.cr-crown__glow {
  position: absolute;
  left: -75px; bottom: -56px;
  width: 150px; height: 150px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(147, 197, 253, .3), transparent);
}

/* the craft statement, under the crown */
.cr-detail { margin-top: clamp(16px, 2vw, 28px); }
.cr-detail__claim { color: #FFFFFF; }
.cr-detail__body { color: #C9D8EE; }

/* ================================================================ 04 grow */
.cr-people {
  padding-left: clamp(20px, 3vw, 40px);
  border-left: 2px solid rgba(37, 99, 235, .22);
}

/* the five qualities on one rule. It wraps into rows on narrow screens and
   never travels sideways: a page should not scroll horizontally to be read. */
.cr-qualities { margin-top: clamp(52px, 6.5vw, 92px); }
.cr-qualities__label {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(1.02rem, .95rem + .35vw, 1.22rem);
  font-weight: 600;
  letter-spacing: -.01em;
  color: #1D4ED8;
}
.cr-qualities__rule {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    rgba(77, 168, 255, 0), var(--bl-electric) 16%, var(--bl-violet) 86%, rgba(139, 92, 246, 0));
  transform-origin: 0 50%;
}
.cr-qualities__list {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 40px) clamp(22px, 3.4vw, 48px);
  margin: 0;
  padding: clamp(24px, 3vw, 38px) 0 0;
  list-style: none;
}
.cr-quality {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 1rem + .5vw, 1.42rem);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--bl-midnight);
}
.cr-quality__petal {
  flex: none;
  width: 14px;
  height: 32px;
  color: var(--petal-electric);
  opacity: .62;
  transform-origin: 50% 100%;
  transform: rotate(-16deg) translateY(4px);
}
.cr-quality:nth-child(even) .cr-quality__petal { color: var(--petal-violet); transform: rotate(16deg) translateY(4px); }
.cr-quality__petal svg { width: 100%; height: 100%; }

/* ================================================================ 05 next */
/* the bloom, the sky and the rising petals all come from home.css; only the
   three statements above the heading belong to this page */
.cr-creed {
  margin: 0 0 clamp(26px, 3.2vw, 44px);
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cr-creed li {
  font-family: var(--font-display);
  font-size: clamp(1.14rem, 1rem + .7vw, 1.62rem);
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: -.02em;
  color: var(--bl-soft);
}
.cr-creed li:last-child { color: #FFFFFF; }

/* ==========================================================================
   MOTION — only under .cr-motion, and only ever transform / opacity.
   Each rule takes one finished thing apart; .is-in puts it back. The page's
   own JavaScript does not exist: the section reveals come from home-scenes.js,
   which also gives .cr-stem and .cr-qualities their own .is-in when the group
   itself reaches the screen (a tall section's top edge shows long before its
   lower half does).
   ========================================================================== */

/* ------------------------------------------------------- the stem draws -- */
.cr-motion .cr-stem__line {
  transform: scaleY(0);
  transition: transform 1.5s var(--cr-slow);
}
.cr-motion .cr-stem.is-in .cr-stem__line { transform: scaleY(1); }

/* each station lights as the stem reaches it: the node first, then its petal
   opening with a little overshoot. The delays are the stem's own travel. */
.cr-motion .cr-station__node {
  transform: scale(.3);
  opacity: 0;
  transition: transform .5s var(--cr-open) calc(.34s + var(--i) * .3s),
              opacity .4s ease calc(.34s + var(--i) * .3s);
}
.cr-motion .cr-stem.is-in .cr-station__node { transform: scale(1); opacity: 1; }

.cr-motion .cr-station__petal {
  transform: rotate(38deg) scale(.04);
  opacity: 0;
  transition: transform .8s var(--cr-open) calc(.46s + var(--i) * .3s),
              opacity .6s ease calc(.46s + var(--i) * .3s);
}
.cr-motion .cr-station:nth-child(even) .cr-station__petal { transform: rotate(-32deg) scale(.04); }
.cr-motion .cr-stem.is-in .cr-station__petal { transform: rotate(38deg) scale(1); opacity: .72; }
.cr-motion .cr-stem.is-in .cr-station:nth-child(even) .cr-station__petal { transform: rotate(-32deg) scale(1); opacity: .72; }

.cr-motion .cr-station__copy {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity .7s var(--cr-ease) calc(.42s + var(--i) * .3s),
              transform .7s var(--cr-ease) calc(.42s + var(--i) * .3s);
}
.cr-motion .cr-stem.is-in .cr-station__copy { opacity: 1; transform: none; }

/* the crown opens last, after Improve */
.cr-motion .cr-crown__petal {
  transform: rotate(var(--r)) scale(.04);
  opacity: 0;
  transition: transform 1.1s var(--cr-open) calc(1.58s + var(--i) * .11s),
              opacity .8s ease calc(1.58s + var(--i) * .11s);
}
.cr-motion .cr-stem.is-in .cr-crown__petal { transform: rotate(var(--r)) scale(1); opacity: .8; }
.cr-motion .cr-crown__glow {
  opacity: 0;
  transform: scale(.5);
  transition: opacity 1.2s ease 1.8s, transform 1.4s var(--cr-slow) 1.8s;
}
.cr-motion .cr-stem.is-in .cr-crown__glow { opacity: 1; transform: none; }

/* --------------------------------------------- the qualities come in ---- */
.cr-motion .cr-qualities__rule {
  transform: scaleX(0);
  transition: transform 1.1s var(--cr-slow);
}
.cr-motion .cr-qualities.is-in .cr-qualities__rule { transform: scaleX(1); }

.cr-motion .cr-quality {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity .6s var(--cr-ease) calc(.3s + var(--i) * .1s),
              transform .6s var(--cr-ease) calc(.3s + var(--i) * .1s);
}
.cr-motion .cr-qualities.is-in .cr-quality { opacity: 1; transform: none; }

.cr-motion .cr-quality__petal { transition: transform .7s var(--cr-open) calc(.42s + var(--i) * .1s); }
.cr-motion .cr-quality__petal,
.cr-motion .cr-quality:nth-child(even) .cr-quality__petal { transform: rotate(0deg) scale(.1) translateY(4px); }
.cr-motion .cr-qualities.is-in .cr-quality__petal { transform: rotate(-16deg) translateY(4px); }
.cr-motion .cr-qualities.is-in .cr-quality:nth-child(even) .cr-quality__petal { transform: rotate(16deg) translateY(4px); }

/* the label above each rule follows its own group, not the section */
.cr-motion .cr-qualities__label, .cr-motion .cr-areas__label { transition: opacity .6s var(--cr-ease); }

/* the creed arrives line by line, above the bloom */
.cr-motion .cr-creed li {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity .7s var(--cr-ease) calc(.2s + var(--i) * .14s),
              transform .7s var(--cr-ease) calc(.2s + var(--i) * .14s);
}
.cr-motion .cr-next.is-in .cr-creed li { opacity: 1; transform: none; }

/* the rise of light behind the words */
.cr-motion .cr-open__dawn {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 1.6s ease .1s, transform 2s var(--cr-slow) .1s;
}
.cr-motion .cr-open.is-in .cr-open__dawn { opacity: 1; transform: none; }

/* --------------------------------------------------- the bud unfurls ---- */
/* the stem draws up out of the ground, the core lights, then the petals part
   from closed in the same order they are read -- outside in. Once. */
.cr-motion .cr-bud__stem {
  stroke-dashoffset: 240;
  transition: stroke-dashoffset 1.6s var(--cr-slow) .25s;
}
.cr-motion .cr-open.is-in .cr-bud__stem { stroke-dashoffset: 0; }

.cr-motion .cr-bud__core {
  opacity: 0;
  transition: opacity .7s ease 1.5s;
}
.cr-motion .cr-open.is-in .cr-bud__core { opacity: 1; }

/* a closed bud: every petal upright and small. --i opens them outside in. */
.cr-motion .cr-bud__petal {
  transform: rotate(0deg) scale(.16);
  opacity: 0;
  transition: transform 1.2s var(--cr-open) calc(1.35s + var(--i) * .09s),
              opacity .9s ease calc(1.35s + var(--i) * .09s);
}
.cr-motion .cr-open.is-in .cr-bud__petal { transform: rotate(var(--a)); opacity: .92; }
.cr-motion .cr-open.is-in .cr-bud__petal:nth-child(1),
.cr-motion .cr-open.is-in .cr-bud__petal:nth-child(6) { opacity: .78; }

.cr-motion .cr-bud__halo {
  opacity: 0;
  transition: opacity 2.2s ease .6s;
}
.cr-motion .cr-open.is-in .cr-bud__halo { opacity: 1; }

.cr-motion .cr-bud__ground {
  opacity: 0;
  transition: opacity 1.2s ease .15s;
}
.cr-motion .cr-open.is-in .cr-bud__ground { opacity: 1; }

/* The one looping thing on the page: three petals carried up past the bud.
   `.is-live` comes from home-scenes.js, so it stops the moment the hero
   leaves the screen and never runs off screen. */
@keyframes cr-mote-rise {
  0%   { transform: translate3d(0, 44px, 0) rotate(-6deg); opacity: 0; }
  18%  { opacity: var(--m); }
  82%  { opacity: var(--m); }
  100% { transform: translate3d(0, -92px, 0) rotate(8deg); opacity: 0; }
}
.cr-motion .cr-bud__mote {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: cr-mote-rise var(--d) linear infinite;
  animation-delay: var(--o);
  animation-play-state: paused;
}
.cr-motion .cr-open.is-live .cr-bud__mote { animation-play-state: running; }

/* ==========================================================================
   WIDE — 1024px and up. Placement only: nothing is added or removed. The
   stem's own wide layout is further down, under THE STEM, LAID ACROSS.
   ========================================================================== */
@media (min-width: 1024px) {
  .cr-detail__claim { max-width: 24ch; }
}

/* the hero's second button deep-links to section 3; the header is sticky, so
   the section needs clearance or its heading lands underneath it */
.cr-how { scroll-margin-top: clamp(72px, 9vw, 104px); }

/* ==========================================================================
   TOUCH AND FOCUS
   ========================================================================== */
@media (max-width: 767px) {
  /* the four area routes are the page's only inline links; keep them
     comfortably tappable without changing how they read */
  .cr-areas__list .v2-link { min-height: 44px; display: inline-flex; align-items: center; }
  .cr-areas__list { gap: 0 clamp(20px, 3vw, 38px); }
}

/* ==========================================================================
   REDUCED MOTION — nothing here needs undoing. .cr-motion is never added, so
   every rule in the MOTION block above is inert and the authored page stands
   as written: the stem at full height, every petal open, every station lit.
   The site-wide policy in style.css still lets colour and opacity settle.
   This block exists to say so, and to hold the one thing that is not a
   .cr-motion rule — the shared .v2-reveal, which home.css already handles.
   ========================================================================== */



/* ==========================================================================
   THE WORK and GROWTH: two panes of words
   Each of these sections is a statement and the turn that answers it. Stacked,
   the turn read as an afterthought at the bottom of a column; side by side it
   reads as the reply it is. The rule that already marked the turn becomes the
   seam between the panes. One column below 1024px, in reading order.
   ========================================================================== */
.cr-duo { display: grid; gap: clamp(34px, 4.4vw, 56px); }
.cr-duo__lead { min-width: 0; }
/* the grid gap sets the distance now; the stacked margin would double it */
.cr-duo__turn { min-width: 0; margin-top: 0; }

@media (min-width: 1024px) {
  .cr-duo {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(48px, 5.4vw, 92px);
    align-items: start;
  }
  /* the heading pane keeps its own measure; the answering pane fills its
     column, so the seam runs the height of the taller of the two */
  .cr-duo__lead .v2-lead { max-width: 46ch; }
  .cr-duo__turn { padding-top: 6px; }
  /* second rank, not a second heading: var(--t-display) is larger than the
     --t-h2 beside it, which no answering statement should be */
  .cr-duo__turn .cr-turn__claim,
  .cr-duo__turn .cr-people__claim {
    font-size: clamp(1.34rem, 1.06rem + 1.02vw, 1.82rem);
    line-height: 1.2;
    max-width: 24ch;
  }
  .cr-work .v2-head h2, .cr-grow .v2-head h2 { max-width: 20ch; }
}

/* ==========================================================================
   03 THE STEM, LAID ACROSS — 1024px and up
   The stem ran down the middle with the stations taking turns on either
   side. Read across instead, it becomes what the words say it is: ONE WAY OF
   WORKING, ALL THE WAY THROUGH — four stations on a single horizontal run of
   light, each bud opening upward off it, and the crown blooming at the end
   of the run rather than at the bottom of a list.

   Below 1024px it stays a column. Four stations abreast inside a 390px
   viewport would force a sideways read, and no page on this site does that.
   ========================================================================== */
@media (min-width: 1024px) {
  .cr-stem {
    max-width: none;
    /* room above the line for the buds that open off it, and enough below the
       stations for the craft statement to read as the next thought and not as
       a fifth station */
    padding: 78px 0 clamp(30px, 3.6vw, 54px);
  }

  /* the run of light: the same gradient bar, turned, and scaled from its
     left edge instead of its top. It stops short of the container's right
     edge, and that gap is where the crown opens. */
  .cr-stem__line,
  .cr-stem::before {
    /* the node's own centre: 78px of padding + 11px to the node + half of it */
    top: 93.5px;
    bottom: auto;
    left: 0;
    right: clamp(124px, 12vw, 168px);
    width: auto;
    height: 2px;
    transform-origin: 0 50%;
  }
  .cr-stem__line {
    background: linear-gradient(90deg,
      rgba(147, 197, 253, 0) 0%,
      var(--bl-electric) 8%,
      var(--bl-soft) 54%,
      var(--bl-violet) 94%,
      rgba(139, 92, 246, 0) 100%);
  }

  .cr-stations {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: clamp(24px, 2.6vw, 40px);
    /* the stations end where the line does; the run past the last of them is
       the stem carrying on into the bloom */
    padding-right: clamp(124px, 12vw, 168px);
  }
  .cr-station {
    display: block;
    padding-bottom: 0;
  }
  .cr-station:last-child { padding-bottom: 0; }

  /* the node sits ON the line at the head of its own column */
  .cr-station__bud { height: 34px; }
  .cr-station__node { left: 0; top: 11px; }

  /* the bud opens UPWARD off the line, so the words below it stay clear */
  .cr-station__petal {
    left: 0;
    top: auto;
    bottom: 17.5px;
    transform-origin: 50% 100%;
  }

  .cr-station__copy { grid-column: auto; text-align: left; padding-top: 4px; }
  .cr-station:nth-child(even) .cr-station__copy { grid-column: auto; text-align: left; }
  .cr-station__line { max-width: none; margin-left: 0; }
  .cr-station:nth-child(even) .cr-station__line { margin-left: 0; }

  /* the crown blooms at the end of the run, opening the way the stem travels */
  .cr-crown {
    left: auto;
    right: clamp(124px, 12vw, 168px);
    top: 94.5px;
    bottom: auto;
  }
  .cr-crown__petal { transform: rotate(calc(var(--r) + 90deg)); }
  .cr-crown__glow { left: -40px; bottom: -75px; }

  /* ------------------------------------------------------------ motion -- */
  /* the run draws left to right instead of top to bottom */
  .cr-motion .cr-stem__line { transform: scaleX(0); }
  .cr-motion .cr-stem.is-in .cr-stem__line { transform: scaleX(1); }

  /* every station now arrives from below, toward the line it hangs from */
  .cr-motion .cr-station:nth-child(odd) .cr-station__copy,
  .cr-motion .cr-station:nth-child(even) .cr-station__copy {
    transform: translate3d(0, 14px, 0);
  }
  .cr-motion .cr-stem.is-in .cr-station__copy { transform: none; }

  .cr-motion .cr-crown__petal { transform: rotate(calc(var(--r) + 90deg)) scale(.04); }
  .cr-motion .cr-stem.is-in .cr-crown__petal {
    transform: rotate(calc(var(--r) + 90deg)) scale(1);
  }
}