/* assets/css/pages/about.css */

/* ===== stats band (auto-fit responsive) ===== */
.about-stats__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin:0}
.about-stat{padding:2rem;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md);text-align:center}
.about-stat--accent{border-color:var(--color-rust)}
.about-stat dt{font-family:var(--font-mono);font-size:var(--fs-800);font-weight:600;color:var(--color-ivory);line-height:1}
.about-stat--accent dt{color:var(--color-rust-glow)}
.about-stat dd{margin:.6rem 0 0;font-size:var(--fs-300);letter-spacing:.06em;color:var(--color-ivory-soft);text-transform:uppercase}

/* ===== story: one room -> many growth grid ===== */
.about-story__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:3rem;align-items:center}
.about-story__body h2{font-size:var(--fs-700);margin:.5rem 0 1rem}
.about-story__body p{color:var(--color-ivory-soft);font-size:var(--fs-400);line-height:1.65;margin-bottom:1rem;max-width:56ch}
.grow__board{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;transform-style:preserve-3d;transition:transform .3s var(--ease-out-expo)}
.grow__t{aspect-ratio:1;border:1px solid var(--color-line);border-radius:4px;background:transparent;opacity:.3;transform:scale(.82);transition:opacity .5s var(--ease-out-expo),transform .5s var(--ease-out-expo),background-color .5s,border-color .5s;transition-delay:var(--d)}
.grow.is-visible .grow__t{opacity:1;transform:none;background:rgba(206,191,170,.06);border-color:rgba(206,191,170,.25)}
.grow__t--origin{border-color:var(--color-rust)!important;background:rgba(192,74,32,.6)!important;opacity:1!important;box-shadow:0 0 14px rgba(192,74,32,.4)}
.grow__t:hover{background:rgba(192,74,32,.45);border-color:var(--color-rust);transform:scale(1.1)}
.grow__meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:1.1rem;font-size:var(--fs-200);letter-spacing:.08em;text-transform:uppercase;color:var(--color-ivory-soft)}
.grow__origin-label{color:var(--color-rust-glow)}
.grow__now b{font-family:var(--font-mono);font-size:var(--fs-500);color:var(--color-ivory);font-weight:600}

/* ===== how we think: typographic creed ===== */
.creed{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2.5rem}
.creed__item{position:relative}
.creed__tick{display:block;width:46px;height:3px;background:var(--color-rust);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease-out-expo)}
[data-reveal-stagger].is-visible .creed__tick{transform:scaleX(1)}
.creed__n{display:block;font-family:var(--font-mono);font-size:3rem;line-height:1;margin-top:1rem;color:transparent;-webkit-text-stroke:1px rgba(206,191,170,.3);transition:color .4s,-webkit-text-stroke-color .4s}
.creed__item:hover .creed__n{color:var(--color-rust-glow);-webkit-text-stroke-color:transparent}
.creed__t{font-size:var(--fs-600);margin:1rem 0 .55rem}
.creed__d{color:var(--color-ivory-soft);font-size:var(--fs-300);line-height:1.6;max-width:40ch}

/* ===== the studio + founders ===== */
.studio{max-width:980px;margin-inline:auto}
.studio__svg{display:block;width:100%;max-width:920px;height:auto;margin:0 auto .5rem}
.studio__sign text{font-weight:500}
.studio__glow{fill:rgba(192,74,32,.13);opacity:0;transition:opacity .5s var(--ease-out-expo)}
.studio__cabin.is-active .studio__glow{opacity:1}
.studio__wall{transition:stroke .4s}
.studio__cabin.is-active .studio__wall{stroke:var(--color-rust)}
.studio__desk{fill:rgba(42,38,34,.85);stroke:rgba(206,191,170,.3);stroke-width:1.2px;transition:stroke .4s}
.studio__cabin.is-active .studio__desk{stroke:rgba(227,106,58,.7)}
.studio__screen{fill:rgba(20,20,20,.9);stroke:rgba(206,191,170,.35);stroke-width:1px;transition:fill .4s,stroke .4s}
.studio__cabin.is-active .studio__screen{fill:rgba(227,106,58,.55);stroke:var(--color-rust-glow)}
.studio__chair{fill:none;stroke:rgba(206,191,170,.38);stroke-width:1.2px;transition:stroke .4s}
.studio__cabin.is-active .studio__chair{stroke:var(--color-rust-glow)}
.studio__lamp circle{fill:rgba(206,191,170,.12);stroke:rgba(206,191,170,.32);stroke-width:1px;transition:fill .4s,stroke .4s}
.studio__cabin.is-active .studio__lamp circle{fill:rgba(227,106,58,.5);stroke:var(--color-rust-glow)}
.studio__label{fill:rgba(206,191,170,.55);font-family:var(--font-mono);font-size:14px;letter-spacing:.02em;transition:fill .4s}
.studio__cabin.is-active .studio__label{fill:var(--color-rust-glow)}
.studio__plant{transform-box:fill-box;transform-origin:bottom center;animation:pSway 4.5s ease-in-out infinite}
@keyframes pSway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}

.fcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-top:1.5rem}
.fcard{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;text-align:left;align-items:start;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md);padding:1.6rem;cursor:pointer;transition:border-color .35s,transform .35s var(--ease-out-expo)}
.fcard.is-active{border-color:var(--color-rust)}
.fcard:hover{transform:translateY(-3px)}
.fcard__avatar{width:54px;height:54px;display:flex;align-items:center;justify-content:center;border:1px solid var(--color-line);border-radius:50%;color:var(--color-ivory-soft);transition:color .35s,border-color .35s,background-color .35s}
.fcard.is-active .fcard__avatar{color:var(--color-rust-glow);border-color:var(--color-rust);background:rgba(192,74,32,.1)}
.fcard__avatar svg{width:28px;height:28px}
.fcard__body{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.fcard__role{font-size:var(--fs-200);letter-spacing:.14em;text-transform:uppercase;color:var(--color-rust-glow)}
.fcard__name{font-family:var(--font-display);font-size:var(--fs-600);color:var(--color-ivory);line-height:1.1}
.fcard__bio{margin-top:.3rem;color:var(--color-ivory-soft);font-size:var(--fs-300);line-height:1.55}
.fcard__phone{margin-top:.4rem;font-family:var(--font-mono);font-size:var(--fs-300);color:var(--color-ivory-soft)}

/* ===== transition ===== */
.about-transition{padding-block:clamp(3rem,8vh,6rem);text-align:center;background:var(--color-bg-deep);border-block:1px solid var(--color-line)}
.about-transition__line{font-family:var(--font-display);font-size:var(--fs-600);color:var(--color-ivory);margin-bottom:1.2rem}

/* ===== responsive ===== */
@media (max-width:900px){
  .about-story__grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .grow__board{gap:6px}
  .creed__n{font-size:2.4rem}
  .fcard{padding:1.3rem;gap:1rem}
}
@media (prefers-reduced-motion:reduce){
  .studio__plant{animation:none!important}
  .grow__t{transition:none!important;transition-delay:0s!important}
  .creed__tick{transition:none!important;transform:none!important}
}