/* =========================================================
   RISE UP — "The Meaning Behind Our Mark"
   Tokens taken from the live site's computed styles:
   h2  Oswald 600 · 35px / 42px · #282726
   h3  Oswald 500 · 18px / 21.6px · #2E6F40
   p   Roboto 400 · 17px / 28.9px · rgba(30,30,30,.74)
   card  1px #E1E1E1 · radius 12px · padding 30px
   ========================================================= */
.riseup-identity{
  --cream:#FFFAF7;
  --cream-2:#F5EEE8;
  --ink:#282726;
  --ink-soft:rgba(30,30,30,.74);
  --line:#E1E1E1;

  --green:#2E6F40;
  --teal:#184341;
  --blue:#1E4FA3;
  --amber:#E8862A;
  --red:#D4472B;

  --c1:#1E4FA3;
  --c2:#E8862A;
  --c3:#2E6F40;

  --r:12px;
  --ease:cubic-bezier(.22,.9,.28,1);
}

.riseup-identity *{box-sizing:border-box;margin:0;padding:0}
.riseup-identity{
  background:var(--cream);
  color:var(--ink);
  font-family:'Roboto',system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

/* ---------------- SHELL ---------------- */
.riseup-identity{position:relative;padding:60px 0 64px;overflow:hidden}
.riseup-identity::before,.riseup-identity::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;
  filter:blur(100px);opacity:.45;
}
.riseup-identity::before{width:560px;height:560px;top:-200px;left:-160px;
  background:radial-gradient(circle,rgba(46,111,64,.20),transparent 70%)}
.riseup-identity::after{width:620px;height:620px;bottom:-260px;right:-200px;
  background:radial-gradient(circle,rgba(30,79,163,.14),transparent 70%)}
.riseup-identity .wrap{max-width:1300px;margin:0 auto;position:relative;z-index:1}
/* keep content off the screen edge once the viewport is narrower than the container */
@media(max-width:1340px){.riseup-identity .wrap{padding-left:24px;padding-right:24px}}

/* ---------------- HEADER ---------------- */
/* Single column: eyebrow (.d1), heading (.d2) and lede (.d3) stack in source
   order and all sit flush to the left edge of the container. */
.riseup-identity .head{
  display:grid;grid-template-columns:1fr;
  gap:0;align-items:start;
  text-align:left;margin-bottom:6px;
}
.riseup-identity .eyebrow{
  grid-column:1/-1;
  display:inline-flex;align-items:center;gap:9px;width:max-content;
  padding:5px 25px;border-radius:12px;
  background:rgba(46,111,64,.08);
  border:1px solid rgba(46,111,64,.20);
  color:var(--green);
  font-family:'Oswald';font-weight:500;font-size:15px;line-height:20px;
  letter-spacing:.01em;text-transform:none;
  margin-bottom:14px;
}

.riseup-identity h2{
  font-family:'Oswald';font-weight:600;
  font-size:35px;line-height:42px;letter-spacing:0;
  color:var(--ink);margin-top:0;
}
.riseup-identity h2 em{font-style:normal;color:var(--ink);white-space:nowrap}
/* .d3 — sits below the .d2 heading, left aligned. */
.riseup-identity .lede{
  color:var(--ink-soft);font-size:17px;line-height:28.9px;
  max-width:62ch;
  grid-column:1/-1;
  justify-self:start;text-align:left;margin-top:14px;
}

/* ---------------- LOGO STAGE ---------------- */
.riseup-identity .stage{
  position:relative;
  display:grid;place-items:center;
  padding:56px 0 0;
}
.riseup-identity .stage-line{
  position:absolute;top:0;left:50%;width:1px;height:44px;
  background:linear-gradient(var(--line),transparent);
}
.riseup-identity .logo-frame{
  position:relative;width:min(340px,72vw);aspect-ratio:1;
  display:grid;place-items:center;
  transition:transform .6s var(--ease);
}
.riseup-identity .ring{position:absolute;border-radius:50%;pointer-events:none}
.riseup-identity .ring.r1{inset:0;border:1px dashed rgba(40,39,38,.18);animation:riseup-spin 70s linear infinite}
.riseup-identity .ring.r2{inset:11%;border:1px solid rgba(40,39,38,.07)}
.riseup-identity .ring.r3{
  inset:6%;border:2px solid transparent;
  background:conic-gradient(from -90deg,var(--c3),var(--c1),var(--c2),var(--c3)) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .6s var(--ease);
}
.riseup-identity .logo-frame.lit .ring.r3{opacity:.85}
.riseup-identity .logo-frame[data-focus] .ring.r2{border-color:var(--fc,rgba(40,39,38,.07))}
.riseup-identity .logo-frame[data-focus="hands"]{--fc:var(--c1)}
.riseup-identity .logo-frame[data-focus="kidney"]{--fc:var(--c2)}
.riseup-identity .logo-frame[data-focus="colours"]{--fc:var(--c3)}
.riseup-identity .ring.r2{transition:border-color .5s var(--ease)}
@keyframes riseup-spin{to{transform:rotate(360deg)}}

.riseup-identity .disc{
  position:absolute;inset:14%;border-radius:50%;
  background:#fff;
  box-shadow:0 30px 60px -38px rgba(40,39,38,.25);
}
.riseup-identity .logo-frame img{
  position:relative;z-index:3;
  width:64%;height:auto;display:block;
  transition:transform .7s var(--ease);
}
.riseup-identity .logo-frame:hover img{transform:scale(1.03)}
.riseup-identity .logo-fallback{
  position:absolute;z-index:3;inset:26%;border-radius:50%;
  display:none;place-items:center;text-align:center;
  border:2px solid var(--green);color:var(--green);
  font-family:'Oswald';font-weight:600;font-size:22px;line-height:1.1;
  letter-spacing:.06em;
}

/* numbered pins */
.riseup-identity .pin{
  position:absolute;z-index:5;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:#fff;border:1px solid var(--line);color:var(--ink-soft);
  box-shadow:0 8px 18px -8px rgba(40,39,38,.4);
  font-family:'Oswald';font-weight:600;font-size:13px;
  transition:transform .4s var(--ease),background .35s,color .35s,border-color .35s;
}
.riseup-identity .pin span{pointer-events:none}
.riseup-identity .pin.p1{left:-4px;top:50%;transform:translateY(-50%)}
.riseup-identity .pin.p2{left:50%;top:-4px;transform:translateX(-50%)}
.riseup-identity .pin.p3{right:-4px;top:66%;transform:translateY(-50%)}
.riseup-identity .pin.p1.on,.riseup-identity .pin.p1:hover{transform:translateY(-50%) scale(1.2)}
.riseup-identity .pin.p2.on,.riseup-identity .pin.p2:hover{transform:translateX(-50%) scale(1.2)}
.riseup-identity .pin.p3.on,.riseup-identity .pin.p3:hover{transform:translateY(-50%) scale(1.2)}
.riseup-identity .pin.on,.riseup-identity .pin:hover{color:#fff}
.riseup-identity .pin[data-key="hands"].on,.riseup-identity .pin[data-key="hands"]:hover{background:var(--c1);border-color:var(--c1)}
.riseup-identity .pin[data-key="kidney"].on,.riseup-identity .pin[data-key="kidney"]:hover{background:var(--c2);border-color:var(--c2)}
.riseup-identity .pin[data-key="colours"].on,.riseup-identity .pin[data-key="colours"]:hover{background:var(--c3);border-color:var(--c3)}

/* ---------------- CONNECTORS ---------------- */
.riseup-identity .connect{
  width:100%;height:70px;display:block;margin-top:26px;
  overflow:visible;
}
.riseup-identity .connect path{
  fill:none;stroke:var(--line);stroke-width:1;
  transition:stroke-dashoffset 1.1s var(--ease),stroke .4s;
}
.riseup-identity.js-on .connect path{stroke-dasharray:400;stroke-dashoffset:400}
.riseup-identity.js-on.in-view .connect path{stroke-dashoffset:0}
.riseup-identity.js-on.in-view .connect path:nth-child(2){transition-delay:.12s}
.riseup-identity.js-on.in-view .connect path:nth-child(3){transition-delay:.24s}
.riseup-identity .connect path.hot{stroke-width:1.6}
.riseup-identity .connect path[data-key="hands"].hot{stroke:var(--c1)}
.riseup-identity .connect path[data-key="kidney"].hot{stroke:var(--c2)}
.riseup-identity .connect path[data-key="colours"].hot{stroke:var(--c3)}

/* ---------------- 3 COLUMNS ---------------- */
.riseup-identity .grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.riseup-identity .card{
  position:relative;
  border:1px solid var(--line);border-radius:var(--r);
  background:transparent;
  padding:30px;
  display:flex;flex-direction:column;gap:14px;
  cursor:default;
  transition:border-color .45s,transform .45s var(--ease),box-shadow .45s var(--ease);
}
.riseup-identity .card::after{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  border-radius:var(--r) var(--r) 0 0;background:var(--c);
  transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease);
}
.riseup-identity .card.on{
  border-color:var(--c);
  transform:translateY(-6px);
}
.riseup-identity .card.on::after{transform:scaleX(1)}

.riseup-identity .card-num{
  display:flex;align-items:center;gap:10px;
  font-family:'Oswald';font-weight:600;font-size:13px;letter-spacing:.14em;
  color:var(--c);text-transform:uppercase;
}
.riseup-identity .card-num b{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  border:1px solid currentColor;font-size:12px;font-weight:600;
  transition:background .4s,color .4s;
}
.riseup-identity .card.on .card-num b{background:var(--c);color:#fff;border-color:var(--c)}

.riseup-identity .card h3{
  font-family:'Oswald';font-weight:500;
  font-size:18px;line-height:21.6px;
  color:var(--c3);
}
.riseup-identity .card h3 b{display:block;font-weight:600;font-size:24px;line-height:28px;color:var(--c);margin-bottom:4px}
.riseup-identity .card p{color:var(--ink-soft);font-size:17px;line-height:28.9px}

/* ---------------- REVEAL ---------------- */
.riseup-identity .rv{transition:opacity .75s var(--ease),transform .75s var(--ease)}
.riseup-identity.js-on .rv{opacity:0;transform:translateY(22px)}
.riseup-identity.js-on.in-view .rv{opacity:1;transform:none}
.riseup-identity.js-on.in-view .d1{transition-delay:.05s}
.riseup-identity.js-on.in-view .d2{transition-delay:.13s}
.riseup-identity.js-on.in-view .d3{transition-delay:.21s}
.riseup-identity.js-on.in-view .d4{transition-delay:.29s}
.riseup-identity.js-on.in-view .d5{transition-delay:.37s}

/* ---------------- RESPONSIVE ---------------- */
@media(max-width:1024px){
  .riseup-identity .grid{gap:18px}
  .riseup-identity .card{padding:26px}
}
@media(max-width:900px){
  .riseup-identity .lede{margin-top:10px}
  .riseup-identity .grid{grid-template-columns:1fr;gap:14px}
  .riseup-identity .connect{display:none}
  .riseup-identity .stage{padding-top:34px;margin-bottom:30px}
  .riseup-identity .card{transform:none!important}
  .riseup-identity .card.on{transform:none!important}
}
@media(max-width:640px){
  .riseup-identity{padding:48px 0 54px}
  .riseup-identity::before{width:340px;height:340px;top:-120px;left:-120px}
  .riseup-identity::after{width:360px;height:360px;bottom:-140px;right:-140px}
  .riseup-identity h2{font-size:30px;line-height:36px}
  .riseup-identity h2 em{white-space:normal}
  .riseup-identity .eyebrow{font-size:14px;padding:5px 20px;margin-bottom:12px}
  .riseup-identity .lede{font-size:16px;line-height:27px}
  .riseup-identity .stage{padding-top:26px;margin-bottom:24px}
  .riseup-identity .stage-line{height:26px}
  .riseup-identity .logo-frame{width:min(250px,66vw)}
  .riseup-identity .logo-frame img{width:68%}
  .riseup-identity .pin{width:28px;height:28px;font-size:12px}
  .riseup-identity .pin.p1{left:-6px}
  .riseup-identity .pin.p3{right:-6px}
  .riseup-identity .card{padding:22px 20px;gap:11px}
  .riseup-identity .card h3 b{font-size:20px;line-height:25px}
  .riseup-identity .card p{font-size:16px;line-height:27px}
  .riseup-identity .card-num{font-size:12px;letter-spacing:.1em}
  .riseup-identity .card-num b{width:24px;height:24px;font-size:11px}
}
@media(hover:none){
  .riseup-identity .card.on{border-color:var(--line)}
  .riseup-identity .card.on::after{transform:scaleX(1)}
  .riseup-identity .card::after{transform:scaleX(1)}
}
@media(prefers-reduced-motion:reduce){
  .riseup-identity *{animation:none!important;transition-duration:.01ms!important}
  .riseup-identity.js-on .rv{opacity:1!important;transform:none!important}
  .riseup-identity.js-on .connect path{stroke-dashoffset:0}
}