/* ============================================================
   about page

   Three spacing steps and nothing in between, so the page never
   lands on an arbitrary number:
     --ab-s  related lines   (heading -> description)
     --ab-m  heading -> content
     --ab-l  one theme -> the next
   Every column strip on the page uses the same framed geometry
   (.aframe): rules on all four sides and one cell padding.
   ============================================================ */
.about-page{
  --ab-s:var(--space-sub);
  --ab-m:var(--space-head);
  --ab-l:var(--section-default);
  --ab-cell:clamp(22px,3.2vw,46px);
  --ab-cell-l:clamp(20px,2.3vw,34px);
  --ab-cell-y:clamp(22px,2.1vw,30px);
  --ab-gap:clamp(20px,2.2vw,32px);
  /* --space-head and --space-sub used to be redefined here as var(--ab-m) and
     var(--ab-s). Once --ab-m and --ab-s were pointed at those same two tokens
     the pair referred to each other, and a cycle makes every custom property
     in it invalid — the heading and description margins computed to zero.
     The shared system already holds these values, so the page just uses it. */
}

.about-sec{padding-top:var(--ab-l)}
/* a passage that still belongs to the one above it */
.about-sec--near{padding-top:calc(var(--ab-l) * .62)}

/* a hairline between big themes. It sits inside .wrap's gutter as a block
   child, so it starts and ends on the same vertical as every heading. */
.about-rule{padding-top:calc(var(--ab-l) * .5)}
.about-rule::before{
  content:"";display:block;height:1px;background:var(--line-soft);
  margin-bottom:calc(var(--ab-l) * .5);
}

/* the section descriptions here run longer than the global 640px measure,
   which broke this one across two lines for the sake of two words */
.about-page .sec-head__t{max-width:min(100%,860px)}
.about-page .sec-sub{max-width:min(100%,760px)}

/* ---------- hero ---------- */
.about__wide{border-radius:var(--radius-lg);aspect-ratio:16/7;overflow:hidden;background:var(--ivory);
  position:relative;margin-top:clamp(26px,3vw,44px)}
.about__wide img{width:100%;height:100%;object-fit:cover}

/* ---------- story ---------- */
.about__story{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,2.6vw,56px)}
.about__story h2{grid-column:1/6;font-family:var(--display);font-weight:300;
  font-size:clamp(1.9rem,2.9vw,3rem);line-height:1.04;letter-spacing:-.018em;align-self:start;text-wrap:balance}
.about__story div{grid-column:7/13;display:grid;gap:var(--ab-s);max-width:680px}
.about__story p{color:var(--ink-70);font-size:var(--t-lead);line-height:1.68}
.about__story--tail div{grid-column:7/13}

/* ---------- pull quote ---------- */
.about__quote p{
  font-family:var(--display);font-weight:300;font-size:clamp(1.9rem,3.6vw,3.4rem);
  line-height:1.12;letter-spacing:-.022em;max-width:20ch;text-wrap:balance;
}
.about__quote em{font-style:italic}

/* ---------- the framed column strip ---------- */
.aframe{display:grid;border:1px solid var(--line-soft)}
/* the rule on the left is the column's own edge, so the text starts close to
   it; the right side keeps the wider breathing room */
.aframe > li{display:grid;align-content:start;border-right:1px solid var(--line-soft);
  padding:var(--ab-cell-y) var(--ab-cell) var(--ab-cell-y) var(--ab-cell-l)}
.aframe > li:last-child{border-right:0}

.beliefs{grid-template-columns:repeat(3,1fr)}
.beliefs li{gap:11px}
.beliefs b{font-size:var(--t-label);letter-spacing:var(--ls-label);color:var(--ink-25);
  font-weight:500;font-variant-numeric:tabular-nums}
.beliefs p{font-size:clamp(1.0625rem,.8vw + .86rem,1.25rem);font-weight:500;letter-spacing:-.008em;line-height:1.3}
.beliefs span{font-size:var(--t-meta);color:var(--ink-45);line-height:1.6}

.aproc{grid-template-columns:repeat(4,1fr)}
.aproc li{gap:11px}
.aproc b{font-size:var(--t-label);letter-spacing:var(--ls-label);color:var(--ink-25);
  font-weight:500;font-variant-numeric:tabular-nums}
.aproc p{font-size:clamp(1.0625rem,.8vw + .86rem,1.25rem);font-weight:500;letter-spacing:-.008em;line-height:1.3}
.aproc span{font-size:var(--t-meta);color:var(--ink-45);line-height:1.6}

.aproof{grid-template-columns:repeat(4,1fr)}
.aproof li{gap:10px}
.aproof b{font-family:var(--display);font-weight:300;font-size:clamp(1.6rem,2.2vw,2.25rem);line-height:1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.aproof span{font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-45)}

/* ---------- editorial mosaic ----------
   Six frames on one grid. The container owns the height and every cell
   stretches to its track, so nothing can reach past the container's width.
      a a  b  c
      a a  d  e
      f f  d  e                                                      */
.amos{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1.05fr) minmax(0,.9fr);
  grid-template-rows:minmax(0,1.25fr) minmax(0,.55fr) minmax(0,.95fr);
  gap:clamp(16px,1.6vw,24px);
  height:clamp(460px,60vw,880px);
}
.amos figure{border-radius:var(--radius-md);overflow:hidden;background:var(--ivory);margin:0;min-width:0;min-height:0}
.amos img{width:100%;height:100%;object-fit:cover}
.amos__a{grid-column:1;grid-row:1/3}
.amos__b{grid-column:2;grid-row:1}
.amos__c{grid-column:3;grid-row:1}
.amos__d{grid-column:2;grid-row:2/4}
.amos__e{grid-column:3;grid-row:2/4}
.amos__f{grid-column:1;grid-row:3}

/* ---------- team ---------- */
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--ab-gap)}
.tmember{display:grid;gap:8px;align-content:start}
.tmember__ph{aspect-ratio:4/5;overflow:hidden;background:var(--ivory);border-radius:var(--radius-md);margin:0}
.tmember__ph img{width:100%;height:100%;object-fit:cover}
.tmember__n{font-size:var(--t-body);font-weight:500;margin-top:6px}
.tmember__r{font-size:var(--t-body);font-weight:500;margin-top:6px}
.tmember__f{font-size:var(--t-meta);color:var(--ink-45);line-height:1.6}

/* ---------- what makes it in / what doesn't ---------- */
.about__split{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,80px)}
.about__col h2{font-family:var(--display);font-weight:300;font-size:var(--d4);line-height:1.1;
  letter-spacing:-.012em;margin-bottom:var(--ab-s)}
.about__col ul{display:grid;gap:0}
.about__col li{font-size:var(--t-body);color:var(--ink-70);line-height:1.55;
  padding:14px 0;border-bottom:1px solid var(--line-soft)}
.about__col li:last-child{border-bottom:0}

/* ---------- full-bleed statement ---------- */
.astate{position:relative;background:var(--dark);color:var(--on-dark);overflow:hidden;
  margin-top:var(--ab-l)}
.astate__media{position:absolute;inset:0}
.astate__media img{width:100%;height:100%;object-fit:cover;opacity:.92;object-position:58% center}
.astate__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(16,13,10,.62) 0%,rgba(16,13,10,.34) 32%,rgba(16,13,10,0) 62%);
}
.astate__in{position:relative;z-index:2;min-height:clamp(320px,34vw,460px);
  display:grid;align-content:center;padding-block:clamp(48px,6vw,88px)}
.astate__t{font-family:var(--display);font-weight:300;font-size:clamp(2.1rem,4.4vw,3.6rem);
  line-height:1.04;letter-spacing:-.024em;max-width:16ch}
.astate__t em{font-style:italic}

/* ---------- closing call ----------
   No rule above it: the statement band is the separator, and the air above
   and below the call matches. */
.about-cta{padding-block:calc(var(--section-large) / 2)}
.acta{display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,4vw,64px);flex-wrap:wrap}
.acta__t{font-family:var(--display);font-weight:300;font-size:clamp(1.75rem,2.8vw,2.75rem);
  line-height:1.06;letter-spacing:-.018em}
.acta__p{color:var(--ink-70);font-size:var(--t-body);margin-top:12px;max-width:44ch}
.acta__act{display:flex;align-items:center;gap:clamp(18px,2.2vw,32px);flex-wrap:wrap}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .tgrid{grid-template-columns:repeat(2,1fr)}
  .aproc,.aproof{grid-template-columns:repeat(2,1fr)}
  .aproc > li,.aproof > li{border-bottom:1px solid var(--line-soft)}
  .aproc > li:nth-child(2n),.aproof > li:nth-child(2n){border-right:0}
  .aproc > li:nth-last-child(-n+2),.aproof > li:nth-last-child(-n+2){border-bottom:0}
}
@media (max-width:900px){
  .about__story h2,.about__story div,.about__story--tail div{grid-column:1/13}
  .about__story div{max-width:none}
  .beliefs{grid-template-columns:1fr}
  .beliefs li{border-right:0;border-bottom:1px solid var(--line-soft)}
  .beliefs li:last-child{border-bottom:0}
  /* two columns and a free height: the frames size themselves from here down */
  .amos{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    grid-template-rows:auto auto auto;height:auto}
  .amos__a{grid-column:1;grid-row:1;aspect-ratio:4/5}
  .amos__b{grid-column:2;grid-row:1;aspect-ratio:3/4}
  .amos__c{grid-column:1;grid-row:2;aspect-ratio:1/1}
  .amos__d{grid-column:2;grid-row:2;aspect-ratio:1/1}
  .amos__f{grid-column:1;grid-row:3;aspect-ratio:4/5}
  .amos__e{grid-column:2;grid-row:3;aspect-ratio:4/5}
  .about__split{grid-template-columns:1fr}
  .acta{align-items:flex-start}
}
@media (max-width:640px){
  .tgrid{grid-template-columns:1fr 1fr}
  .aproc,.aproof{grid-template-columns:1fr}
  .aproc > li,.aproof > li{border-right:0;border-bottom:1px solid var(--line-soft)}
  .aproc > li:last-child,.aproof > li:last-child{border-bottom:0}
  .amos{grid-template-columns:1fr 1fr}
  .amos__a{grid-column:1/3;grid-row:1;aspect-ratio:5/4}
  .amos__b{grid-column:1;grid-row:2;aspect-ratio:1/1}
  .amos__c{grid-column:2;grid-row:2;aspect-ratio:1/1}
  .amos__d{grid-column:1;grid-row:3;aspect-ratio:1/1}
  .amos__e{grid-column:2;grid-row:3;aspect-ratio:1/1}
  .amos__f{grid-column:1/3;grid-row:4;aspect-ratio:16/10}
}