/* About page (about.html): editorial layout in the store's monochrome system.
   Sections fade in once (about.js adds .is-visible); the manifesto line fills
   word by word while it crosses the viewport. */

/* Hero keeps pages.css styles; a quieter bottom border because the ticker follows. */
.about-page .about-hero{border-bottom:0}

.about-ticker{border-top:1px solid #000;background:#000;color:#fff}
.about-ticker span{font-size:12px;letter-spacing:.12em}

/* At-a-glance index */
.about-index{border-bottom:1px solid #000}
.about-index dl{display:grid;grid-template-columns:repeat(4,1fr);margin:0}
.about-index dl>div{display:flex;min-height:150px;flex-direction:column;justify-content:space-between;gap:28px;border-right:1px solid #000;padding:26px var(--pad) 28px}
.about-index dl>div:last-child{border-right:0}
.about-index dt{font-family:var(--sync);font-size:8px;font-weight:400;letter-spacing:.14em;color:rgba(0,0,0,.55)}
.about-index dd{margin:0;font-size:clamp(14px,1.35vw,20px);font-weight:900;letter-spacing:.04em;line-height:1.15}

/* Manifesto line: tall section, the text fills as the visitor scrolls */
.about-statement{position:relative;border-bottom:1px solid #000;padding:clamp(110px,14vw,230px) var(--pad)}
.about-statement .eyebrow{display:block;margin-bottom:clamp(30px,4vw,60px)}
.about-statement-text{max-width:1300px;margin:0;font-family:Arial,Helvetica,sans-serif;font-size:clamp(34px,5.4vw,92px);font-weight:900;letter-spacing:-.055em;line-height:.95;text-wrap:balance}
.about-statement-text .reveal-word{transition:background .12s linear}

/* Position: image and copy side by side */
.about-position{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #000}
.about-position-media{position:relative;min-height:min(92svh,1040px);margin:0;overflow:hidden;border-right:1px solid #000;background:#ededed}
.about-position-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%;filter:grayscale(1) contrast(1.05);transition:transform 1.2s var(--ease),filter .6s}
.about-position-media:hover img{transform:scale(1.025);filter:grayscale(.4) contrast(1.05)}
.about-position-media figcaption{position:absolute;right:22px;bottom:20px;left:22px;color:#fff;font-family:var(--sync);font-size:8px;letter-spacing:.1em;text-shadow:0 1px 7px #000}
.about-position-copy{display:flex;flex-direction:column;justify-content:flex-end;gap:26px;padding:clamp(70px,8vw,140px) var(--pad)}
.about-position-copy h2{margin:10px 0 18px;font-family:var(--sync);font-size:clamp(46px,5.6vw,98px);font-weight:400;letter-spacing:-.065em;line-height:.88}
.about-position-copy p{max-width:540px;margin:0;font-size:clamp(14px,1.2vw,18px);line-height:1.55}

/* Section heads for principles and process */
.about-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:6vw;padding:clamp(90px,10vw,170px) var(--pad) clamp(40px,5vw,70px)}
.about-section-head h2{margin:0;font-family:var(--sync);font-size:clamp(46px,6.4vw,112px);font-weight:400;letter-spacing:-.065em;line-height:.88;text-align:right}

/* Principles: four tiles that invert on hover */
.about-principles{border-bottom:1px solid #000}
.about-principles-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #000}
.about-principles-grid article{display:flex;min-height:clamp(260px,27vw,380px);flex-direction:column;border-right:1px solid #000;padding:28px clamp(20px,2.4vw,34px) 32px;background:#fff;transition:background .35s var(--ease),color .35s var(--ease)}
.about-principles-grid article:last-child{border-right:0}
.about-principles-grid article:hover{background:#000;color:#fff}
.about-principles-grid h3{margin:auto 0 14px;font-family:var(--sync);font-size:clamp(20px,1.9vw,30px);font-weight:400;letter-spacing:-.02em}
.about-principles-grid p{max-width:300px;min-height:calc(1.55em * 3);margin:0;color:inherit;font-size:13px;line-height:1.55;opacity:.7}
.about-num{font-family:var(--sync);font-size:9px;letter-spacing:.12em}

/* Process: numbered steps on one line with a running rule */
.about-process{border-bottom:1px solid #000}
.about-process-steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0;padding:0 var(--pad) clamp(90px,10vw,160px);list-style:none}
.about-process-steps:before{position:absolute;top:5px;right:var(--pad);left:var(--pad);height:1px;background:#000;content:""}
.about-process-steps li{position:relative;padding:34px clamp(14px,2vw,32px) 0 0}
.about-process-steps li:before{position:absolute;top:0;left:0;width:11px;height:11px;border:1px solid #000;border-radius:50%;background:#fff;content:""}
.about-process-steps li:first-child:before{background:#000}
.about-process-steps h3{margin:22px 0 12px;font-size:clamp(13px,1.1vw,16px);font-weight:900;letter-spacing:.1em}
.about-process-steps p{max-width:300px;margin:0;color:rgba(0,0,0,.65);font-size:13px;line-height:1.55}

/* Closing call to action */
.about-cta{display:grid;grid-template-columns:1.1fr .9fr;align-items:end;gap:8vw;background:#000;color:#fff;padding:clamp(100px,12vw,200px) var(--pad)}
.about-cta h2{margin:0;font-family:var(--sync);font-size:clamp(56px,8.6vw,150px);font-weight:400;letter-spacing:-.065em;line-height:.86}
.about-cta-copy p{max-width:460px;margin:0;font-size:clamp(14px,1.25vw,19px);line-height:1.5;color:rgba(255,255,255,.8)}
.about-cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:28px;margin-top:34px}
.about-cta-button{border-color:#fff;background:#fff;color:#000}
.about-cta-button:hover{background:#000;color:#fff}
.about-cta-link{border-bottom-color:#fff;color:#fff}

/* One-time fade-in (only when the script is running; without JS everything shows). */
.about-js [data-about-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.about-js [data-about-reveal].is-visible{opacity:1;transform:none}
.about-js .about-principles-grid article:nth-child(2),.about-js .about-process-steps li:nth-child(2){transition-delay:.08s}
.about-js .about-principles-grid article:nth-child(3),.about-js .about-process-steps li:nth-child(3){transition-delay:.16s}
.about-js .about-principles-grid article:nth-child(4),.about-js .about-process-steps li:nth-child(4){transition-delay:.24s}

/* In the panel editor every element must be visible and clickable at once. */
.cms-preview-mode [data-about-reveal]{opacity:1!important;transform:none!important}

@media(max-width:1000px){
  .about-index dl{grid-template-columns:repeat(2,1fr)}
  .about-index dl>div:nth-child(2){border-right:0}
  .about-index dl>div:nth-child(-n+2){border-bottom:1px solid #000}
  .about-position{grid-template-columns:1fr}
  .about-position-media{min-height:110vw;border-right:0;border-bottom:1px solid #000}
  .about-principles-grid{grid-template-columns:repeat(2,1fr)}
  .about-principles-grid article:nth-child(2){border-right:0}
  .about-principles-grid article:nth-child(-n+2){border-bottom:1px solid #000}
  .about-process-steps{grid-template-columns:repeat(2,1fr);row-gap:44px}
  .about-process-steps:before{display:none}
  .about-cta{grid-template-columns:1fr}
}
@media(max-width:640px){
  .about-index dl>div{min-height:120px;padding:22px 18px}
  .about-statement{padding:90px 18px}
  .about-statement-text{font-size:9.6vw;line-height:1}
  .about-position-copy{padding:60px 18px}
  .about-section-head{flex-direction:column;align-items:flex-start;padding:80px 18px 34px}
  .about-section-head h2{text-align:left;font-size:13vw}
  .about-principles-grid{grid-template-columns:1fr}
  .about-principles-grid article{min-height:220px;border-right:0;border-bottom:1px solid #000}
  .about-principles-grid article:last-child{border-bottom:0}
  .about-process-steps{grid-template-columns:1fr;padding:0 18px 80px}
  .about-cta{padding:90px 18px}
  .about-cta h2{font-size:15vw}
}
@media(prefers-reduced-motion:reduce){
  .about-js [data-about-reveal]{opacity:1;transform:none;transition:none}
  .about-position-media img{transition:none}
}