:root{
  --orange:#ff9200;
  --navy:#0168a8;
  --white:#ffffff;
}

 

/* ══════════════════════════════
   CARD
══════════════════════════════ */
.treecard{
 /* background:#fff;
  width:100%;
  max-width:580px;
  padding:38px 30px 32px;*/
  position:relative;
  overflow:hidden;
}

/* subtle network dot bg */
.treecard::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:radial-gradient(circle,#c6d2e4 1.3px,transparent 1.3px);
  background-size:30px 30px;
  opacity:.48;
  pointer-events:none;
}

/* ══════════════════════════════
   HEADER
══════════════════════════════ */
.header{position:relative;z-index:2}
.h1{
  font-size:clamp(24px,6.8vw,40px);
  font-weight:900;
  color:var(--navy);
  text-transform:uppercase;
  letter-spacing:-.4px;
  line-height:1.08;
}
.h1 .accent{color:var(--orange)}
.h2{
  font-size:clamp(14px,4vw,22px);
  font-weight:600;
  color:var(--orange);
  margin-top:5px;
  line-height:1.3;
}

/* ══════════════════════════════
   TIMELINE
══════════════════════════════ */
.timeline{
  position:relative;
  z-index:2;
  margin-top:26px;
}

/* vertical stem */
.stem{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:0;bottom:0;
  width:8px;
  background:var(--navy);
  border-radius:4px;
  z-index:1;
}

/* small orange leaf sprout on top of stem */
.stem-bud{
  position:absolute;
  left:50%;
  top:-20px;
  transform:translateX(-50%);
  width:20px;
  height:28px;
  background:var(--orange);
  border-radius:50% 50% 38% 38% / 52% 52% 48% 48%;
  z-index:3;
  animation:bud 2.8s ease-in-out infinite;
}
@keyframes bud{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.15)}}

 
.row:nth-child(1){animation-delay:.08s}
.row:nth-child(2){animation-delay:.20s}
.row:nth-child(3){animation-delay:.33s}
.row:nth-child(4){animation-delay:.46s}
.row:nth-child(5){animation-delay:.59s}
.row:nth-child(6){animation-delay:.72s}
@keyframes rise{to{opacity:1;transform:translateY(0)}}

.half{width:50%;display:flex;align-items:center}
.hl{justify-content:flex-end}   /* left half */
.hr{justify-content:flex-start} /* right half */

/* ══════════════════════════════
   LEAF SHAPE
   The leaf in the image has:
   - large orange fill
   - a navy border/outline that creates depth
   - LEFT leaf: flat edge on the right side (connects to stem on right)
   - RIGHT leaf: flat edge on the left side (connects to stem on left)
══════════════════════════════ */
.leaf{
  width:136px;
  height:136px;
  position:relative;
  flex-shrink:0;
}

/* the colored shape */
.leaf-inner{
  width:100%;height:100%;
  background:var(--orange);
  display:flex;align-items:center;justify-content:center;
  position:relative;
  transition:transform .3s ease;
  cursor:default;
}
 

/*
  LEFT leaf faces right → the two "round" corners are top-left & bottom-right,
  but in the image the rounded side is actually the LEFT side, flat is right.
  Looking closely: left leaf = rounded on LEFT (curved) flat on RIGHT edge touching line.
  Shape: border-radius that makes it look like a leaf pointing leftward.
*/
.leaf-l .leaf-inner{
  border-radius: 8% 55% 8% 55% / 8% 55% 8% 55%;
  /* navy offset shadow simulating the outline/border seen in image */
  box-shadow: 6px 6px 0 0 var(--navy), 3px 3px 0 0 rgba(27,58,107,.25);
}

/*
  RIGHT leaf: rounded on RIGHT side, flat on LEFT touching line.
*/
.leaf-r .leaf-inner{
  border-radius: 8% 55% 8% 55% / 8% 55% 8% 55%;
  box-shadow: 6px 6px 0 0 var(--navy), 3px 3px 0 0 rgba(27,58,107,.25);
  transform: scaleX(-1);
}

/* icons */
.leaf-inner svg{
  width:76px;height:76px;
  fill:none;
  stroke:#fff;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ══════════════════════════════
   LABEL (number + text)
══════════════════════════════ */
.label{display:flex;align-items:center;gap:20px}
.label-l{
  flex-direction:row-reverse;
  text-align:right;
  padding-right:12px;
}
.label-r{
  flex-direction:row;
  text-align:left;
  padding-left:12px;
}
.num{
  font-size:clamp(28px,7vw,48px);
  font-weight:900;
  color:var(--orange);
  line-height:1;
  flex-shrink:0;
}
.txt{
  font-size:clamp(10px,2.4vw,13.5px);
  font-weight:700;
  color:var(--navy);
  line-height:1.4;
}

/* ══════════════════════════════
   FOOTER
══════════════════════════════ */
.footer{
  position:relative;z-index:2;
  margin-top:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;gap:10px;
}
.brand-mark{display:flex;align-items:baseline;gap:1px;font-weight:900;font-size:20px}
.brand-i{font-style:italic;color:var(--orange);font-size:22px}
.brand-talent{color:var(--navy)}
.brand-sep{color:#bbb;margin:0 5px;font-weight:300;font-size:18px}
.brand-biz{color:var(--navy);letter-spacing:.5px}
.brand-grow{color:var(--navy);letter-spacing:.5px}
.tagline{font-size:7.5px;color:#aaa;font-style:italic;margin-top:2px}
.contact{font-size:clamp(8px,2vw,11px);color:#555;font-weight:600;text-align:right}

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media(max-width:500px){
  .card{padding:26px 15px 22px}
  .leaf{width:108px;height:108px}
  .leaf-inner svg{width:60px;height:60px}
  .label-l{padding-right:7px}
  .label-r{padding-left:7px}
  .num{font-size:28px}
}
@media(max-width:380px){
  .leaf{width:90px;height:90px}
  .leaf-inner svg{width:50px;height:50px}
  .txt{font-size:9.5px}
  .row{min-height:120px}
}