/* About (5 Sep 2026). Drawn by novamira-sandbox/about-page.php. */
.soma-ab{--ab-max:1180px;background:var(--soma-base)}
.soma-ab h1,.soma-ab h2,.soma-ab h3{text-wrap:balance}
.soma-ab p{margin:0}
.soma-ab a.soma-ab-ghost{background:transparent;color:var(--soma-white);box-shadow:inset 0 0 0 1.5px var(--soma-line-inverse)}
.soma-ab a.soma-ab-ghost:hover{background:var(--soma-white-12)}

/* hero */
.soma-ab-hero{background:var(--soma-primary);color:var(--soma-white);position:relative;overflow:hidden;padding:clamp(3rem,2rem + 4vw,6rem) var(--soma-gutter) 0}
.soma-ab-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(70% 90% at 15% 20%,rgba(13,124,104,.35) 0%,rgba(13,124,104,0) 60%),radial-gradient(50% 70% at 95% 100%,rgba(204,213,255,.18) 0%,rgba(204,213,255,0) 60%);pointer-events:none}
.soma-ab-hero__in{position:relative;max-width:var(--ab-max);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:clamp(2rem,1rem + 4vw,5rem);align-items:end}
.soma-ab-hero__words{padding-bottom:clamp(2.5rem,1.5rem + 3vw,4.5rem)}
.soma-ab-hero .soma-eyebrow{color:var(--soma-periwinkle)}
.soma-ab-hero h1{color:var(--soma-white);font-size:clamp(2.4rem,1.2rem + 4vw,4.2rem);letter-spacing:-.01em;margin:18px 0 20px}
.soma-ab p.soma-ab-quote{font-family:var(--soma-font-display);font-style:italic;font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem);line-height:1.3;color:var(--soma-periwinkle);max-width:22em;margin-bottom:18px}
.soma-ab-lead{color:var(--soma-white-70);font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.6;max-width:34em}
.soma-ab-facts{margin:30px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:680px}
.soma-ab-facts div{background:var(--soma-white-12);border-radius:var(--soma-r-md);padding:14px 16px}
.soma-ab-facts dt{font-family:var(--soma-font-display);font-weight:600;font-size:clamp(1.6rem,1.3rem + 1vw,2.25rem);line-height:1;color:var(--soma-white);font-variant-numeric:tabular-nums}
.soma-ab-facts dd{margin:6px 0 0;font-size:.8125rem;color:var(--soma-white-70)}
.soma-ab-hero__acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.soma-ab-hero__art{align-self:end;position:relative}
.soma-ab-hero__art img{position:relative;display:block;width:100%;max-width:420px;margin:0 auto;height:auto;border-radius:var(--soma-r-lg) var(--soma-r-lg) 0 0;box-shadow:0 30px 60px rgba(0,0,0,.35)}

/* sections */
.soma-ab-sec{padding:clamp(2.5rem,1.5rem + 3vw,4.5rem) var(--soma-gutter)}
.soma-ab-sec--white{background:var(--soma-white)}
.soma-ab-sec__in{max-width:var(--ab-max);margin:0 auto}
.soma-ab-sec__head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:20px;align-items:end;margin-bottom:32px}
.soma-ab-sec__head p{color:var(--soma-text);font-size:1.0625rem;line-height:1.6;max-width:34em}
.soma-ab-sec h2{font-size:clamp(1.75rem,1.3rem + 1.8vw,2.6rem);margin-top:8px;letter-spacing:-.01em}

/* story path */
.soma-ab-path{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.soma-ab-step{display:grid;grid-template-columns:120px minmax(0,1fr);gap:clamp(1rem,.5rem + 2vw,3rem);background:var(--soma-white);border-radius:var(--soma-r-lg);padding:clamp(1.5rem,1rem + 1.5vw,2.5rem);position:relative;overflow:hidden}
.soma-ab-step::before{content:'';position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--soma-secondary)}
.soma-ab-step:nth-child(2)::before{background:var(--soma-primary)}
.soma-ab-step:nth-child(3)::before{background:var(--soma-periwinkle)}
.soma-ab-step__n{font-family:var(--soma-font-display);font-weight:600;font-size:clamp(2.5rem,2rem + 2vw,4rem);line-height:1;color:var(--soma-secondary);font-variant-numeric:tabular-nums}
.soma-ab-step:nth-child(2) .soma-ab-step__n{color:var(--soma-primary)}
.soma-ab-step:nth-child(3) .soma-ab-step__n{color:#6F7CC0}
.soma-ab-step__kind{display:block;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--soma-secondary);margin-bottom:8px}
.soma-ab-step h3{font-size:clamp(1.4rem,1.2rem + 1vw,1.9rem);margin:0 0 12px}
.soma-ab-step p{color:var(--soma-text);font-size:1.0625rem;line-height:1.7;max-width:62em}

/* quote band */
.soma-ab-band{background:var(--soma-secondary);color:var(--soma-white);padding:clamp(3rem,2rem + 4vw,6rem) var(--soma-gutter)}
.soma-ab-band__in{max-width:900px;margin:0 auto;text-align:center}
.soma-ab-band blockquote{margin:0;padding:0;border:0;background:transparent}
.soma-ab-band p{font-family:var(--soma-font-display);font-size:clamp(1.5rem,1.1rem + 1.8vw,2.5rem);line-height:1.3;color:var(--soma-white)}
.soma-ab-band cite{display:block;margin-top:22px;font-style:normal;font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.75)}

/* why */
.soma-ab-why{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,1rem + 4vw,5rem);align-items:center}
.soma-ab-why__text{color:var(--soma-text);font-size:1.125rem;line-height:1.7;margin-top:16px;max-width:34em}
.soma-ab-centres{display:grid;gap:12px}
.soma-ab-centre{display:flex;flex-direction:column;gap:4px;background:var(--soma-base);border-radius:var(--soma-r-lg);padding:20px 24px;color:var(--soma-primary)}
.soma-ab-centre--dark{background:var(--soma-primary);color:var(--soma-white)}
.soma-ab-centre__kind{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--soma-secondary)}
.soma-ab-centre--dark .soma-ab-centre__kind{color:var(--soma-periwinkle)}
.soma-ab-centre strong{font-family:var(--soma-font-display);font-weight:600;font-size:1.45rem;line-height:1.15}
.soma-ab-centre > span:last-child{font-size:.9375rem;opacity:.8}

/* learn tiles */
.soma-ab-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,.75rem + 1vw,1.5rem)}
.soma-ab .soma-ab-tile{display:flex;flex-direction:column;background:var(--soma-white);border-radius:var(--soma-r-lg);overflow:hidden;color:var(--soma-primary);text-decoration:none;transition:transform var(--soma-dur-lift) var(--soma-ease),box-shadow var(--soma-dur-lift) var(--soma-ease)}
.soma-ab .soma-ab-tile:hover{transform:translateY(-4px);box-shadow:0 24px 48px var(--soma-shadow)}
.soma-ab-tile__media{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;background:var(--soma-primary);overflow:hidden}
.soma-ab-tile__media img{width:100%;height:100%;object-fit:cover;display:block}
.soma-ab-tile--portrait .soma-ab-tile__media{background:var(--soma-primary);padding:18px}
.soma-ab-tile--portrait .soma-ab-tile__media img{width:auto;height:100%;object-fit:contain;border-radius:4px;box-shadow:0 14px 30px var(--soma-shadow)}
.soma-ab-tile--sage .soma-ab-tile__media{background:var(--soma-secondary)}
.soma-ab-tile__icon{width:64px;height:64px;border-radius:50%;background:var(--soma-white-12);color:var(--soma-white);display:inline-flex;align-items:center;justify-content:center}
.soma-ab-tile__body{display:flex;flex-direction:column;gap:6px;padding:18px 20px 20px}
.soma-ab-tile__kind{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--soma-secondary)}
.soma-ab-tile__title{font-family:var(--soma-font-display);font-weight:600;font-size:1.35rem;line-height:1.15}

/* ending */
.soma-ab-end{background:var(--soma-primary);color:var(--soma-white);padding:clamp(3.5rem,2rem + 5vw,7rem) var(--soma-gutter)}
.soma-ab-end__in{max-width:var(--ab-max);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(2rem,1rem + 4vw,5rem);align-items:center}
.soma-ab-end .soma-eyebrow{color:var(--soma-periwinkle)}
.soma-ab-end h2{color:var(--soma-white);font-size:clamp(2rem,1.3rem + 3vw,3.4rem);margin:14px 0 14px}
.soma-ab-end p{color:var(--soma-white-70);max-width:36em;font-size:1.0625rem}
.soma-ab-end__acts{display:flex;flex-direction:column;gap:10px;min-width:280px}
.soma-ab-end__acts .soma-btn{justify-content:center}

@media (max-width:1100px){
  .soma-ab-hero__in{grid-template-columns:1fr}
  .soma-ab-hero__words{padding-bottom:0}
  .soma-ab-hero__art{margin-top:2rem}
  .soma-ab-hero__art img{max-width:380px}
  .soma-ab-facts{max-width:none}
  .soma-ab-sec__head{grid-template-columns:1fr}
  .soma-ab-why{grid-template-columns:1fr}
  .soma-ab-centres{grid-template-columns:repeat(3,minmax(0,1fr))}
  .soma-ab-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .soma-ab-end__in{grid-template-columns:1fr}
  .soma-ab-end__acts{flex-direction:row;flex-wrap:wrap}
}
@media (max-width:640px){
  .soma-ab-hero h1{font-size:clamp(2rem,8vw,2.6rem)}
  .soma-ab-facts{grid-template-columns:1fr 1fr;gap:8px}
  .soma-ab-facts div{padding:12px 14px}
  .soma-ab-hero__acts .soma-btn{flex:1;justify-content:center}
  .soma-ab-hero__art img{max-width:300px}
  .soma-ab-step{grid-template-columns:1fr;gap:6px}
  .soma-ab-step__n{font-size:2rem}
  .soma-ab-centres{grid-template-columns:1fr}
  .soma-ab-tiles{grid-template-columns:1fr}
  .soma-ab-end__acts{flex-direction:column}
}


/* soma: green closing band */
/* The band and the footer were the same navy, so the page's last call to action
   dissolved into the footer. Green separates them. */
.soma-ab-end{background:var(--soma-secondary)}
.soma-ab-end .soma-eyebrow{color:rgba(255,255,255,.72)}
.soma-ab-end p{color:rgba(255,255,255,.82)}
.soma-ab-end__acts .soma-btn:not(.soma-ab-ghost){background:var(--soma-white);color:var(--soma-secondary);border-color:var(--soma-white)}
/* templates.css turns every .soma-page link navy on hover, which blacks out
   links on a coloured surface. Hold white here. */
section.soma-ab-end a:hover,section.soma-ab-end a:focus-visible{color:var(--soma-white)}
section.soma-ab-end .soma-ab-end__acts a.soma-btn:not(.soma-ab-ghost):hover,
section.soma-ab-end .soma-ab-end__acts a.soma-btn:not(.soma-ab-ghost):focus-visible{color:var(--soma-secondary)}


/* soma: section heads align at the top */
/* These heads were bottom-aligned, which pushed the brief above the heading it
   belongs to -- and by a different amount on every section, depending on
   whether the heading wrapped. The two columns now start together. */
.soma-ab-sec__head{align-items:start}
.soma-ab-sec__head > :nth-child(2){padding-top:4px}


/* soma: the letter tile carries its own plate */
/* The Thread plate is a designed graphic, not a photograph, so it is fitted
   rather than cropped; its own ground is the same navy as the tile behind it. */
.soma-ab-tile--plate .soma-ab-tile__media img{object-fit:contain}


/* soma: tiles match the homepage cards */
/* Every asset behind these tiles is 16:9 (book banner, Thread plate, course art),
   so a 4:3 frame letterboxed or cropped them. At 16:9 each one simply fills. */
.soma-ab-tile__media{aspect-ratio:16/9}
.soma-ab-tile__media img{object-fit:cover}