/* About page: hero, vision plates, story, what makes us different, beyond, values, partners, cta. */

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- Hero ---------- */
.about-hero { position: relative; min-height: 76svh; display: grid; align-items: end; color: #fff; isolation: isolate; }
.about-hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #14251c; }
.about-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.about-hero-scrim { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(6,18,12,.9) 0%, rgba(6,18,12,.5) 38%, rgba(6,18,12,.12) 66%, rgba(6,18,12,0) 86%);
}
.about-hero-inner { padding: calc(var(--header-h) + 6vh) 0 clamp(36px, 6vh, 64px); display: grid; gap: 22px; }
.about-hero .eyebrow { color: var(--sprout); }
.about-hero h1 { font-size: var(--t-88); max-width: 15ch; text-shadow: 0 2px 30px rgba(6,18,12,.4); }
.about-hero h1 em { color: var(--sprout); }
.about-hero .lede { color: rgba(255,255,255,.94); max-width: 34em; text-shadow: 0 1px 18px rgba(6,18,12,.55); }
.about-hero .hero-actions { margin-top: 6px; display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 640px) { .about-hero h1 { font-size: clamp(38px, 11vw, 56px); } }

/* ---------- The approved plate ----------
   The same white card the patch spreads use: 1.5px forest hairline, 9px of white around the
   photograph, a hard offset shadow, and an uppercase caption row under it with a label at the left
   and a value at the right. It lives in css/pages/patches.css for the patches pages; this page
   loads its own stylesheet only, so the card is restated here. Keep the two in step. */
.plate { display: block; background: #fff; border: 1.5px solid var(--forest); padding: 9px; box-shadow: 8px 8px 0 rgba(18, 56, 42, .1); color: var(--ink); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.plate-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.plate-media img { width: 100%; height: 100%; object-fit: cover; }
.plate-caption { display: flex; justify-content: space-between; gap: 14px; font: 500 11px / 1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--stone); padding: 10px 2px 2px; }
.plate-caption b { color: var(--forest); font-weight: 500; }

/* ---------- Vision: three specimen plates, stepped down the column ---------- */
.vision { padding: calc(var(--sect) * .7) 0; }
.vision-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(32px, 5vw, 80px); align-items: start; }
.vision-prose h2 { font-size: var(--t-64); color: var(--forest); margin: 18px 0 22px; max-width: 14ch; }
/* the prose holds its place while the three plates pass it, so neither column runs empty */
@media (min-width: 901px) { .vision-prose { position: sticky; top: calc(var(--header-h) + clamp(24px, 4vw, 56px)); } }
.vision-plates { list-style: none; display: grid; gap: clamp(30px, 4vw, 44px); }
.vision-item { display: grid; gap: 12px; }
/* Tilt and step: the three cards are not a stack of identical rectangles. */
.vision-plate { transform: rotate(-1deg); }
.vision-plate:hover { transform: rotate(-1deg) translateY(-3px); box-shadow: 11px 11px 0 rgba(18, 56, 42, .14); }
.vision-item:nth-child(2) { margin-left: clamp(0px, 4vw, 46px); margin-right: clamp(0px, 1vw, 12px); }
.vision-item:nth-child(2) .vision-plate { transform: rotate(1deg); }
.vision-item:nth-child(2) .vision-plate:hover { transform: rotate(1deg) translateY(-3px); box-shadow: 11px 11px 0 rgba(18, 56, 42, .14); }
.vision-item:nth-child(3) { margin-right: clamp(0px, 3vw, 34px); }
.vision-item:nth-child(2) .plate-media { aspect-ratio: 16 / 9; }
.vision-item:nth-child(3) .plate-media { aspect-ratio: 5 / 4; }
.vision-line { font-size: 15px; line-height: 1.5; color: var(--stone); max-width: 38ch; padding-left: 2px; }
@media (max-width: 900px) { .vision-grid { grid-template-columns: 1fr; } }

/* ---------- Story / origin ---------- */
.story { padding: calc(var(--sect) * .7) 0; }
.story-grid { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.story-h { font-size: var(--t-64); color: var(--forest); margin-bottom: 22px; max-width: 14ch; }
.story-prose .eyebrow { margin-bottom: 18px; }
.story-photo { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-20); overflow: hidden; isolation: isolate; margin: 0; }
.story-photo img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.story-photo-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(6,18,12,.92) 0%, rgba(6,18,12,.55) 32%, rgba(6,18,12,0) 62%); }
.story-quote { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 28px 28px 26px; margin: 0; }
.story-quote p { font-size: var(--t-28); color: #fff; line-height: 1.22; font-style: italic; text-shadow: 0 1px 18px rgba(6,18,12,.5); }
.story-quote cite { display: block; margin-top: 14px; font-style: normal; color: rgba(255,255,255,.72); font-size: var(--t-14); letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 900px) { .story-grid { grid-template-columns: 1fr; gap: 40px; } .story-photo { aspect-ratio: 4 / 3; } }

/* ---------- What makes us different ----------
   Four hairline columns with pictograms in rings became four display lines and one photograph.
   The line you are on is the picture you see, and the sprout dot in the margin travels to it. */
.different { padding: calc(var(--sect) * .7) 0; background: var(--mist); }
.different .lede { margin-top: 16px; }
.diff-spread { margin-top: clamp(36px, 5vw, 60px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.diff-titles-col { position: relative; }
.diff-titles { list-style: none; display: grid; gap: clamp(10px, 1.4vw, 18px); }
.diff-title { display: block; width: 100%; text-align: left; padding: 2px 0 2px clamp(26px, 2.6vw, 38px); font-family: var(--display); font-weight: 500; font-size: var(--t-36); line-height: 1.06; color: var(--forest); opacity: .42; transition: opacity .5s var(--ease), color .5s var(--ease); }
.diff-title:hover { opacity: .72; }
.diff-title.is-on { opacity: 1; font-style: italic; color: var(--moss); }
.diff-title:focus-visible { outline: 2px solid var(--leaf); outline-offset: 3px; }
.diff-dot { position: absolute; left: 0; top: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--sprout); box-shadow: 0 0 0 1.5px var(--moss); transition: transform .55s var(--ease); }
.diff-stage { justify-self: stretch; transform: rotate(.7deg); }
.diff-stage:hover { box-shadow: 11px 11px 0 rgba(18, 56, 42, .14); }
.diff-media { position: relative; }
.diff-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s var(--ease); }
.diff-photo.is-on { opacity: 1; }
.diff-caption-line { text-transform: none; letter-spacing: .02em; line-height: 1.45; text-align: right; max-width: 46ch; }
@media (max-width: 860px) {
  .diff-spread { grid-template-columns: 1fr; gap: 28px; }
  .diff-stage { order: -1; transform: rotate(-.6deg); }
  .diff-title { font-size: var(--t-28); }
}
@media (max-width: 520px) {
  .plate-caption { flex-direction: column; gap: 4px; }
  .diff-caption-line { text-align: left; }
}

/* ---------- Gibraltar is only the beginning ---------- */
.beyond { padding: calc(var(--sect) * .8) 0; background: linear-gradient(160deg, var(--void), var(--forest)); color: #fff; }
.beyond-grid { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.beyond-copy h2 { max-width: 14ch; }
.beyond-copy h2 em { color: var(--sprout); }
.beyond-copy .lede { color: rgba(255,255,255,.78); margin: 20px 0 32px; }
.beyond-diagram { width: 100%; }
.beyond-diagram svg { width: 100%; height: auto; overflow: visible; }
.bd-arc { fill: none; stroke: rgba(255,255,255,.28); stroke-width: 1.5; }
.bd-flow { fill: none; stroke: var(--sprout); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 7 12; animation: bdflow 2.4s linear infinite; opacity: .85; }
.bd-node { fill: var(--sprout); }
.bd-label { font: 500 11px / 1 var(--sans); letter-spacing: .12em; fill: rgba(255,255,255,.82); text-anchor: middle; }
.bd-label-end { fill: var(--sprout); }
@keyframes bdflow { to { stroke-dashoffset: -38; } }
@media (max-width: 900px) { .beyond-grid { grid-template-columns: 1fr; text-align: left; } }
@media (max-width: 640px) {
  .beyond-diagram { height: 420px; display: flex; align-items: center; justify-content: center; }
  .beyond-diagram svg { width: 340px; transform: rotate(90deg); }
  .bd-label { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .bd-flow { animation: none; } }

/* ---------- Our values ----------
   One dark band, four words running across it, the photograph behind them at a whisper. The word
   you are on turns italic sprout and says its sentence on the line underneath. */
.values { position: relative; padding: calc(var(--sect) * .8) 0; isolation: isolate; overflow: hidden; background: var(--forest); color: #fff; }
.values-bg { position: absolute; inset: 0; z-index: -1; }
.values-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(18,56,42,.72), rgba(18,56,42,.28) 62%, rgba(18,56,42,.05)); }
.values-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .18; }
.values .eyebrow { color: var(--sprout); }
.values-line { margin-top: clamp(18px, 2.4vw, 30px); font-size: var(--t-64); line-height: 1.04; color: #fff; }
.values-word { font: inherit; color: inherit; padding: 0; opacity: .82; transition: opacity .4s var(--ease), color .4s var(--ease); }
.values-word + .values-word { margin-left: .28em; }
.values-word:hover { opacity: 1; }
.values-word.is-on { color: var(--sprout); font-style: italic; opacity: 1; }
.values-word:focus-visible { outline: 2px solid var(--sprout); outline-offset: 4px; }
.values-note { margin-top: clamp(22px, 2.6vw, 32px); padding-top: 18px; border-top: 1px solid rgba(255,255,255,.2); max-width: 52ch; font-size: var(--t-18); color: rgba(255,255,255,.8); min-height: 3em; }
@media (max-width: 560px) { .values-line { font-size: clamp(34px, 9.5vw, 54px); } }

/* ---------- Built through collaboration (partners) ---------- */
.growing { padding: 0 0 calc(var(--sect) * .7); }
.growing-line { margin-bottom: 32px; color: var(--stone); }
.growing-more { margin-top: 18px; font-style: italic; color: var(--stone); font-size: var(--t-16); }