/* ==========================================================================
   Page: About Us
   Layout signature — a split forest/cream hero (type on the dark half, a
   bracketed portrait breaking across the seam), a numbered vertical spine for
   the story, an asymmetric pillar stack, and a milestone rail on glass.
   Deliberately shares no section rhythm with the home page.
   ========================================================================== */

.blob[data-pos="s1"]{--s:320px;left:-8%;top:10%;}
.blob[data-pos="s2"]{--s:280px;right:-7%;top:58%;--d:3s;}
.blob[data-pos="s3"]{--s:300px;left:-9%;top:20%;--d:1.5s;}

/* ---- HERO ---------------------------------------------------------------
   Two halves rather than a full-bleed photo: type on forest at left, the
   portrait breaking out of the cream half at right.
   ------------------------------------------------------------------------ */
.about-hero{position:relative;background:var(--cream);}
.about-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;align-items:stretch;}
.about-hero-txt{
  background:var(--forest);
  display:flex;align-items:center;
  padding:200px 0 130px;
  position:relative;
}
/* A slim hivis edge marks the seam between the two halves. */
.about-hero-txt::after{
  content:"";position:absolute;top:0;bottom:0;right:0;width:4px;background:var(--hivis);
}
.about-hero-wrap{max-width:calc(var(--wrap) * .62);margin-left:auto;margin-right:0;}
.about-hero h1{color:#fff;font-size:clamp(2.4rem,4.6vw,3.9rem);}
.about-hero h1 em{font-style:normal;color:var(--hivis);}
.about-hero-lede{margin-top:24px;max-width:42ch;}
.about-hero-act{margin-top:34px;}

.about-hero-media{position:relative;display:flex;align-items:center;padding:0 var(--gutter);}
.about-hero-ph{
  width:100%;height:78%;border-radius:var(--r);
  margin-left:-90px;box-shadow:var(--sh-deep);
}

/* ---- 01 · STORY SPINE ---------------------------------------------------
   A continuous rule down the left with numbered nodes on it. Nothing on this
   page repeats the home page's card grid.
   ------------------------------------------------------------------------ */
.about-story{padding:var(--sec) 0;}
.about-story-head{margin-bottom:56px;max-width:24ch;}

.spine{position:relative;max-width:760px;margin-left:auto;padding-left:76px;}
.spine::before{
  content:"";position:absolute;left:21px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(var(--hivis-2),var(--teal),var(--coral));
  opacity:.45;
}
.spine-item{position:relative;padding-bottom:46px;}
.spine-item:last-child{padding-bottom:0;}
.spine-n{
  position:absolute;left:-76px;top:0;
  width:44px;height:44px;border-radius:50%;
  background:var(--cream);border:2px solid var(--hivis-2);
  display:flex;align-items:center;justify-content:center;
  font-size:.76rem;font-weight:600;color:var(--forest-3);
}
.spine-body h3{font-size:1.3rem;margin-bottom:10px;}
.spine-body p{color:var(--muted);max-width:60ch;}

/* ---- 02 · ASYMMETRIC PILLAR STACK ---------------------------------------
   The first pillar spans the full width and carries an extra paragraph; the
   remaining three sit in a row beneath it.
   ------------------------------------------------------------------------ */
.about-pillars{padding:var(--sec) 0;}
.about-pillars-head{margin-bottom:48px;max-width:56ch;}
.about-pillars-head .lede{margin-top:14px;}

.pillar-stack{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.pillar--lead{grid-column:1 / -1;}
.pillar--lead .card-body{display:grid;grid-template-columns:auto 1fr 1fr;gap:0 36px;align-items:start;padding:34px 32px;}
.pillar--lead .pillar-top{grid-row:1 / span 4;flex-direction:column;align-items:flex-start;gap:14px;}
.pillar--lead h3{grid-column:2;font-size:1.35rem;}
.pillar--lead .pillar-sum{grid-column:2;}
.pillar--lead .pillar-detail{grid-column:3;grid-row:2 / span 2;font-size:.95rem;color:var(--forest-3);font-weight:500;}
.pillar--lead .btn--text{grid-column:2;}

.pillar .card-body{padding:28px 26px 26px;}
.pillar-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;}
.pillar-top .card-ic{margin-bottom:16px;}
.pillar-n{font-size:.72rem;color:var(--muted-2);}
.pillar h3{margin-bottom:9px;}
.pillar-sum{font-size:.9rem;color:var(--muted);margin-bottom:16px;}

/* ---- 03 · MILESTONE RAIL ------------------------------------------------
   On a dark photo band, so glass panels are legitimate here. The year sits
   outside the panel on the rail itself.
   ------------------------------------------------------------------------ */
.about-mile{position:relative;background:var(--forest);padding:var(--sec) 0 150px;}
.about-mile-media{position:absolute;inset:0;z-index:0;}
.about-mile-media .ph{width:100%;height:100%;}
.about-mile-media::after{content:"";position:absolute;inset:0;background:rgba(14,31,23,.9);}
.about-mile .wrap{position:relative;z-index:var(--z-content);}
.about-mile-head{margin-bottom:48px;color:#fff;}
.about-mile-head h2{color:#fff;}

.rail{position:relative;padding-left:120px;}
.rail::before{
  content:"";position:absolute;left:78px;top:10px;bottom:10px;width:1px;
  background:rgba(255,255,255,.22);
}
.rail-item{
  position:relative;margin-bottom:16px;
  border-radius:var(--r-sm);padding:22px 26px;color:#fff;
}
.rail-item::before{
  content:"";position:absolute;left:-46px;top:28px;
  width:11px;height:11px;border-radius:50%;
  background:var(--hivis);border:2px solid var(--forest);
}
.rail-year{
  position:absolute;left:-120px;top:22px;
  font-size:.82rem;font-weight:600;color:var(--hivis);
}
.rail-body h3{font-size:1.05rem;margin-bottom:6px;color:#fff;}
.rail-body p{font-size:.88rem;color:var(--on-dark);}

/* ---- 04 · CREW STRIP ----------------------------------------------------
   A horizontal strip with the caption always visible beneath the portrait —
   deliberately not the home page's hover-reveal overlay treatment.
   ------------------------------------------------------------------------ */
.about-crew{padding:var(--sec) 0;}
.crew-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative;z-index:var(--z-content);}
.crew-cell{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:transform var(--dur),box-shadow var(--dur);}
.crew-cell:hover{transform:translateY(-6px);box-shadow:var(--sh-soft);}
.crew-cell-ph{aspect-ratio:4/5;border:none;border-bottom:1px dashed rgba(18,16,12,.16);}
.crew-cell-b{padding:20px 20px 24px;}
.crew-cell-b h3{font-size:1.02rem;margin-bottom:4px;}
.crew-bio{font-size:.85rem;color:var(--muted);margin-top:10px;}

/* ---- 05 · PARTNERS ------------------------------------------------------
   A list, not the home page's marquee carousel.
   ------------------------------------------------------------------------ */
.about-partners{padding:var(--sec) 0;}
.about-partners-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start;}
.about-partners-lede{margin:16px 0 28px;}
.partner-list{display:grid;gap:14px;}
.partner-row{
  display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:16px 22px 16px 16px;
  transition:transform var(--dur),box-shadow var(--dur);
}
.partner-row:hover{transform:translateX(5px);box-shadow:var(--sh-soft);}
.partner-logo{height:74px;border-radius:var(--r-xs);}
.partner-row h3{font-size:1rem;margin-bottom:2px;}

/* ---- CTA ---------------------------------------------------------------- */
.about-cta{padding:0 0 var(--sec);}
.about-cta-card{position:relative;border-radius:var(--r);overflow:hidden;background:var(--forest);padding:64px 46px;}
.about-cta-media{position:absolute;inset:0;z-index:0;}
.about-cta-media .ph{width:100%;height:100%;}
.about-cta-media::after{content:"";position:absolute;inset:0;background:rgba(14,31,23,.88);}
.about-cta-in{position:relative;z-index:var(--z-content);max-width:44ch;color:#fff;}
.about-cta-in h2{color:#fff;font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:12px;}
.about-cta-in p{color:var(--on-dark);margin-bottom:26px;}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .about-hero-grid{grid-template-columns:1fr;}
  .about-hero-txt{padding:150px 0 90px;}
  .about-hero-txt::after{display:none;}
  .about-hero-wrap{max-width:var(--wrap);margin:0 auto;}
  .about-hero-media{padding:0 var(--gutter) 60px;background:var(--cream);}
  .about-hero-ph{margin-left:0;height:420px;margin-top:-70px;}
  .pillar-stack{grid-template-columns:1fr 1fr;}
  .pillar--lead .card-body{grid-template-columns:auto 1fr;}
  .pillar--lead .pillar-detail{grid-column:2;grid-row:auto;margin-bottom:16px;}
  .crew-strip{grid-template-columns:1fr 1fr;}
  .about-partners-grid{grid-template-columns:1fr;gap:40px;}
}

@media (max-width:860px){
  .about-hero h1{font-size:clamp(2rem,8vw,2.8rem);}
  .spine{padding-left:56px;margin-left:0;}
  .spine::before{left:15px;}
  .spine-n{left:-56px;width:34px;height:34px;font-size:.68rem;}
  .pillar-stack{grid-template-columns:1fr;}
  .pillar--lead .card-body{grid-template-columns:1fr;gap:0;}
  .pillar--lead .pillar-top{grid-row:auto;flex-direction:row;align-items:center;}
  .pillar--lead h3,.pillar--lead .pillar-sum,.pillar--lead .pillar-detail,.pillar--lead .btn--text{grid-column:1;}
  .rail{padding-left:34px;}
  .rail::before{left:5px;}
  .rail-item::before{left:-34px;top:24px;}
  .rail-year{position:static;display:block;margin-bottom:6px;}
  .crew-strip{grid-template-columns:1fr;}
  .partner-row{grid-template-columns:110px 1fr;gap:16px;}
  .about-cta-card{padding:44px 24px;}
}