/* ============================================================
   MACAW COFFEE — SINGLE PAGE, VERSION C-6
   Design system palette · Our Journey as per-event galleries
   + Meet the Team as a swipe carousel
   + Fazenda Três Meninas photographs and the partner logo wall, both from the deck
   Zed Studio, 9 Sept 2026
   ============================================================ */

@font-face {
  font-family: 'ElCamino';
  src: url(/assets/fonts/ElCamino.woff2) format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url(/assets/fonts/Inter-var.woff2) format('woff2-variations');
  font-weight: 100 900; font-display: swap;
}
@font-face {
  font-family: 'PlexMono';
  src: url(/assets/fonts/IBMPlexMono-Regular.woff2) format('woff2');
  font-weight: 400; font-display: swap;
}

:root {
  /* sampled directly from the Fazenda Água da Mata card */
  --oat:       #F5F0E3;
  --oat-2:     #EDE6D4;
  --paper:     #FBF8F0;
  --forest:    #3F7364;   /* the card's green block */
  --forest-d:  #336253;   /* deepened for large text-bearing sections */
  --ink:       #0E2B26;   /* the card's heading ink */
  --label:     #356053;
  --sage:      #78958A;
  --stone:     #5A6B62;
  --onforest:  #F5F0E3;
  --onforest-2:rgba(245,240,227,0.87);
  --onforest-l:#CFE0D8;

  --hair:   rgba(14,43,38,0.16);
  --hair-2: rgba(14,43,38,0.28);
  --hair-l: rgba(245,240,227,0.26);

  --logo: 'ElCamino', 'Inter', Georgia, serif;   /* the wordmark, always El Camino */
  --disp: 'ElCamino', 'Inter', Georgia, serif;   /* headings; palettes A and B override this */
  --disp-w:  400;
  --disp-lh: 1.02;
  --disp-ls: 0.012em;
  --disp-ws: normal;
  --f:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'PlexMono', ui-monospace, 'SF Mono', Menlo, monospace;

  --gut: clamp(1.4rem, 5vw, 6rem);
  --maxw: 1440px;
  --r: 3px;
  --ez: cubic-bezier(.22,.68,.24,1);

  --seal: url(/assets/img/art_seal.webp);
  --tex: url(/assets/img/art_texture.webp);
  --bark: #1E1510;   /* the texture ground, sampled from the deck */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--oat);
  color: var(--ink);
  font-family: var(--f);
  font-variation-settings: 'opsz' 16;
  font-size: clamp(1rem, 0.3vw + 0.95rem, 1.06rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

/* ---------- type ---------- */
/* El Camino is a textured display face and reads as caps at every size,
   so it carries headings only. It has no em dash or middle dot, which is
   why every rule and separator below sits in the mono. */
.d {
  font-family: var(--disp); font-weight: var(--disp-w);
  line-height: var(--disp-lh); letter-spacing: var(--disp-ls); word-spacing: var(--disp-ws);
  margin: 0; text-wrap: balance;
}
h1.d { font-size: clamp(2.5rem, 6vw, 5rem); line-height: 0.98; }
h2.d { font-size: clamp(1.9rem, 3.9vw, 3.3rem); }
h3.d { font-size: clamp(1.45rem, 2.2vw, 2.1rem); }
h4.d { font-size: clamp(1.1rem, 1.35vw, 1.35rem); letter-spacing: 0.02em; }

.label {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.17em;
  text-transform: uppercase; line-height: 1.6; margin: 0; color: var(--label);
  overflow-wrap: anywhere;
}
.lede {
  font-variation-settings: 'opsz' 28; font-weight: 400;
  font-size: clamp(1.2rem, 1.9vw, 1.72rem); line-height: 1.44;
  letter-spacing: -0.012em; text-wrap: balance;
}
.mono { font-family: var(--mono); font-size: 0.83rem; letter-spacing: 0.02em; }
.cap { font-family: var(--mono); font-size: 0.61rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--label); margin: 0.55rem 0 0; line-height: 1.6; }

/* ---------- layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); position: relative; z-index: 2; }
section { position: relative; }
#purpose, #people, #journey { scroll-margin-top: 4.6rem; }

.oat    { background: var(--oat); }
.oat2   { background: var(--oat-2); }
.paper  { background: var(--paper); }
.green  { background: var(--forest-d); color: var(--onforest); }
.green .label { color: var(--onforest-l); }
.green .cap { color: var(--onforest-l); }

.pad-xl { padding-block: clamp(4rem, 8vw, 8rem); }
.pad-lg { padding-block: clamp(3rem, 6vw, 6rem); }

.rail { display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 4rem); align-items: start; }
.rail > .rl { padding-top: 0.4rem; }
.sec-head { margin-bottom: clamp(2.2rem, 4.5vw, 4rem); }
.sec-head h2 { max-width: 26ch; }
.sec-head .intro { max-width: 56ch; margin-top: 1.4rem; color: var(--stone); }
.green .sec-head .intro { color: var(--onforest-2); }

/* ---------- photo frames ---------- */
.fr { display: block; overflow: hidden; border-radius: var(--r); line-height: 0; }
.fr img { display: block; width: 100%; transform: scale(1.001); transition: transform 1.1s var(--ez); }

/* ---------- decorative marks ---------- */
.mark-seal {
  position: absolute; pointer-events: none; z-index: 0;
  transform: rotate(var(--rot, 0deg)) translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}
.mark-seal  { -webkit-mask: var(--seal) center/contain no-repeat; mask: var(--seal) center/contain no-repeat; aspect-ratio: 1/1; }

/* ---------- logo ---------- */
/* the wordmark is set live in El Camino, matched to Macaw's own lockup:
   0.055em tracking standalone, 0.10em in the stacked lockup */
/* El Camino is caps-only but its em box still reserves descender space,
   so the ink sits high. the 0.12em nudge optically centres it and scales
   with the font size. */
.wordmark { font-family: var(--logo); font-weight: 400; font-size: clamp(1.5rem, 2.15vw, 1.95rem); letter-spacing: 0.055em; line-height: 1; display: block; transform: translateY(0.12em); }
.lockup { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; }
/* same metric slack as the nav wordmark: the descender space under the caps
   was pushing SUSTAINABLE too far down, so it is pulled back in em */
.lockup .m  { font-family: var(--logo); font-weight: 400; font-size: clamp(2.4rem, 5vw, 4rem); letter-spacing: 0.10em; margin-bottom: -0.2em; }
.lockup .s1 { font-weight: 700; font-size: clamp(0.72rem, 1.5vw, 1.18rem); letter-spacing: 0.26em; margin-top: 0.62em; transform: scaleX(0.88); }
.lockup .s2 { font-weight: 700; font-size: clamp(0.54rem, 1.1vw, 0.86rem); letter-spacing: 0.16em; margin-top: 0.5em; transform: scaleX(0.88); }

/* ============================================================
   NAV
   ============================================================ */
.nav { position: sticky; top: 0; z-index: 50; background: var(--oat); border-bottom: 1px solid var(--hair); transition: box-shadow .3s var(--ez), background .3s var(--ez); }
.nav.stuck { background: rgba(245,240,227,0.94); backdrop-filter: saturate(1.2) blur(8px); box-shadow: 0 6px 26px -20px rgba(14,43,38,0.6); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; padding-block: 0.9rem; }
.nav.stuck .wrap { padding-block: 0.6rem; }
.nav-links { display: flex; gap: clamp(1rem, 2.2vw, 2.3rem); align-items: center; }
.nav-links a { position: relative; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); padding-block: 0.4rem; transition: color .2s; white-space: nowrap; }
.nav-links a:hover { color: var(--ink); }
.nav-links a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--forest); transition: right .35s var(--ez); }
.nav-links a:hover::after, .nav-links a.active::after { right: 0; }
.nav-links a.active { color: var(--ink); }
.burger { display: none; background: none; border: 0; cursor: pointer; padding: 0.4rem; }
.burger span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0;
  transition: transform .3s var(--ez), opacity .2s var(--ez); transform-origin: center; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .burger span { transition: none; } }

.lang { display: flex; align-items: center; gap: 0.4rem; }
.lang .globe { width: 15px; height: 15px; flex: none; stroke: var(--stone); stroke-width: 1.4; fill: none; }
.lang-btn { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.15em; text-transform: uppercase; background: none; border: 0; padding: 0.28rem 0.1rem; color: var(--stone); cursor: pointer; border-bottom: 2px solid transparent; transition: color .25s, border-color .25s; }
.lang-btn:hover { color: var(--ink); }
.lang-btn[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--forest); }
.lang-sep { color: var(--stone); font-size: 0.66rem; }

.tnote { background: var(--forest); color: var(--onforest); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.04em; overflow: hidden; max-height: 0; transition: max-height .45s var(--ez); }
.tnote .wrap { padding-block: 0.6rem; }
body.is-pt .tnote { max-height: 7rem; }

/* ============================================================
   HERO
   ============================================================ */
.hero { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); background: var(--oat); overflow: hidden; }
.hero .pane { padding: clamp(2.4rem, 5.5vw, 5rem) clamp(1.4rem, 5vw, 6rem) clamp(2.4rem, 5.5vw, 4.2rem); display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(430px, 74vh, 740px); position: relative; z-index: 2; }
.hero .mark-seal { width: clamp(280px, 40vw, 560px); left: -12%; top: -14%; background: var(--forest); opacity: 0.09; --rot: -6deg; }
.hero > .pane > .label { margin-bottom: clamp(1.1rem, 2.6vw, 1.9rem); }
.hero h1 { max-width: 24ch; font-size: clamp(2.1rem, 4.6vw, 3.9rem); }
.hero .sub { font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.55; margin: clamp(1.1rem, 2.2vw, 1.7rem) 0 0; max-width: 40ch; color: var(--stone); }
.hero .meta { margin-top: clamp(1.5rem, 3vw, 2.4rem); padding-top: 1rem; border-top: 1px solid var(--hair-2); display: flex; flex-wrap: wrap; gap: 0.35rem 1.8rem; }
.hero .shot { position: relative; min-height: clamp(300px, 42vh, 740px); }
.hero .shot .ph-wrap { position: absolute; inset: 0; overflow: hidden; }
.hero .shot img.photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.hero .cred { position: absolute; right: 0.9rem; bottom: 0.8rem; z-index: 3; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(245,240,227,0.88); text-shadow: 0 1px 10px rgba(0,0,0,0.8); }
.hero .bird { position: absolute; z-index: 4; pointer-events: none; width: clamp(116px, 14vw, 200px); left: -1px; bottom: clamp(1.2rem, 3.5vw, 3rem); transform: translateX(-74%); filter: drop-shadow(0 12px 26px rgba(14,43,38,0.28)); }

/* ============================================================
   EPIGRAPH BAND
   ============================================================ */
.epi { position: relative; }
.epi img { width: 100%; height: clamp(440px, 60vw, 640px); object-fit: cover; }
.epi::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(14,43,38,0.62) 0%, rgba(14,43,38,0.28) 38%, rgba(14,43,38,0.72) 100%); }
.epi .wrap { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: center; }
.epi blockquote { margin: 0; max-width: 32ch; }
.epi blockquote .q { font-family: var(--disp); font-size: clamp(1.75rem, 3.8vw, 3.1rem); line-height: 1.08; color: var(--oat); }
.epi blockquote cite { display: block; margin-top: 1rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.15em; text-transform: uppercase; font-style: normal; color: rgba(245,240,227,0.75); }
.epi .after { margin-top: clamp(1.6rem, 3vw, 2.4rem); max-width: 44ch; color: rgba(245,240,227,0.94); font-size: clamp(1rem, 1.2vw, 1.12rem); }
.epi .cred { position: absolute; right: var(--gut); bottom: 1rem; z-index: 4; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(245,240,227,0.7); }

/* ============================================================
   MISSION
   ============================================================ */
.mission { overflow: hidden; }
.mission .lede { max-width: 30ch; }
.mission .what { max-width: 54ch; margin: 1.4rem 0 0; color: var(--stone); }
.scatter { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.8rem, 2vw, 1.6rem); margin-top: clamp(2.2rem, 4.5vw, 3.4rem); align-items: start; }
.scatter figure { margin: 0; }
.scatter img { aspect-ratio: 1/1; object-fit: cover; }
.scatter .fr { box-shadow: 0 14px 34px -20px rgba(14,43,38,0.5); }
.scatter .a { transform: rotate(-1.3deg); }
.scatter .c { transform: rotate(1.4deg); }
.scatter .b { margin-top: clamp(1rem, 3vw, 2.4rem); }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem,100%), 1fr)); gap: clamp(1.3rem, 3vw, 2.6rem); margin-top: clamp(2.2rem, 4.5vw, 3.2rem); padding-top: clamp(1.4rem, 3vw, 2rem); border-top: 1px solid var(--hair); }
.fact .n { font-family: var(--disp); font-size: clamp(2.1rem, 3.4vw, 3rem); line-height: 1; display: block; margin-bottom: 0.5rem; }
.fact p { margin: 0; color: var(--stone); font-size: 0.92rem; line-height: 1.6; }

/* ============================================================
   FULL-BLEED BAND
   ============================================================ */
.band { position: relative; line-height: 0; overflow: hidden; }
.band img { width: 100%; height: clamp(260px, 42vw, 520px); object-fit: cover; transform: translate3d(0, var(--py, 0px), 0) scale(1.12); will-change: transform; }
.band .bcap { position: absolute; left: var(--gut); bottom: 1rem; line-height: 1.6; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(245,240,227,0.9); text-shadow: 0 1px 10px rgba(0,0,0,0.85); max-width: 40ch; }

/* ============================================================
   PURPOSE — the green section
   ============================================================ */
.purpose { overflow: hidden; }
.purpose .mark-seal { width: clamp(300px, 36vw, 520px); right: -8%; bottom: -12%; background: var(--onforest); opacity: 0.08; --rot: 8deg; }
.statement { max-width: 30ch; }
.purpose .sub { margin-top: 1.2rem; max-width: 54ch; color: var(--onforest-2); }

.pillars { margin-top: clamp(2.6rem, 5vw, 4.2rem); }
.pillar { display: grid; grid-template-columns: 3.2rem minmax(0, 14rem) minmax(0, 1fr); gap: clamp(0.9rem, 3vw, 2.6rem); padding-block: clamp(1.2rem, 2.4vw, 1.8rem); border-top: 1px solid var(--hair-l); align-items: baseline; }
.pillar:last-child { border-bottom: 1px solid var(--hair-l); }
.pillar .k { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--onforest-l); padding-top: 0.35rem; }
.pillar p { margin: 0; color: var(--onforest-2); max-width: 54ch; }

.standard { margin-top: clamp(2.8rem, 5.5vw, 4.4rem); }
.std-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem,100%), 1fr)); gap: clamp(1.4rem, 3vw, 2.6rem); margin-top: 1.6rem; }
.std { border-top: 2px solid var(--onforest-l); padding-top: 0.9rem; }
.std h4 { margin: 0 0 0.5rem; }
.std p { margin: 0; color: var(--onforest-2); font-size: 0.93rem; line-height: 1.62; }

/* ============================================================
   ORIGINATION
   ============================================================ */
.orig { overflow: hidden; }

/* the farm card, translated to the page */
.card { background: var(--oat); border: 1px solid var(--hair); border-radius: var(--r); overflow: hidden; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.card-top { padding: clamp(1.4rem, 3vw, 2.4rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.4rem, 3.5vw, 3rem); align-items: end; }
.card-top .who > .label { margin-bottom: 0.6rem; }
.card-top .who h3 { margin-bottom: 1rem; }
.card-top .blurb { margin: 1rem 0 0; color: var(--stone); max-width: 48ch; }
.spec { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: clamp(1rem, 2.2vw, 1.5rem) clamp(1.4rem, 3vw, 2.4rem); background: var(--oat-2); }
.spec-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; }
.spec-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem,100%), 1fr)); gap: 0.35rem clamp(1.5rem, 4vw, 4rem); }
.spec-rows div { display: grid; grid-template-columns: 6.2rem 1fr; font-family: var(--mono); font-size: 0.82rem; }
.spec-rows dt, .spec-rows .k2 { color: var(--label); }
.cup { background: var(--forest); color: var(--onforest); padding: clamp(1.3rem, 3vw, 2.2rem) clamp(1.4rem, 3vw, 2.4rem); }
.cup .label { color: var(--onforest); opacity: 0.82; }
.cup h4 { margin: 0.5rem 0 0.9rem; max-width: 34ch; font-size: clamp(1.15rem, 1.7vw, 1.6rem); }
.cup p { margin: 0 0 0.7rem; color: var(--onforest); }
.cup p:last-child { margin-bottom: 0; }
.cup .why { font-family: var(--mono); font-size: 0.78rem; line-height: 1.75; }
.grown { padding: clamp(1.4rem, 3vw, 2.4rem); }
.grown-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1.3rem; }
.grown-rows { display: grid; gap: clamp(1rem, 2.2vw, 1.6rem); }
.grow { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 1.8rem); align-items: start; }
.grow img { aspect-ratio: 3/2; object-fit: cover; }
.grow h4 { margin: 0 0 0.4rem; }
.grow p { margin: 0; color: var(--stone); font-size: 0.93rem; line-height: 1.62; }

.farm { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(0.9rem, 2.6vw, 2.4rem); padding-block: clamp(1.4rem, 2.8vw, 2.2rem); border-top: 1px solid var(--hair); align-items: start; }
.farm:last-of-type { border-bottom: 1px solid var(--hair); }
.farm .k { font-family: var(--mono); font-size: 0.72rem; color: var(--stone); padding-top: 0.3rem; }
.farm .who { display: flex; flex-direction: column; gap: 0.4rem; }
.farm p { margin: 0; color: var(--stone); }

/* ---------- the name, on the deck's own texture ---------- */
.namestory { background: var(--bark) var(--tex) repeat; background-size: clamp(360px, 32vw, 600px); color: var(--oat); overflow: hidden; }
.namestory .label { color: #C9B79A; }
.namestory .inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(1.6rem, 4vw, 4rem); align-items: center; }
.namestory h2 { max-width: 16ch; }
.namestory p { margin: 0; color: rgba(245,240,227,0.9); max-width: 50ch; }
.namestory p + p { margin-top: 1rem; }

/* ---------- Fazenda Três Meninas, photographs from the deck ---------- */
.tm-shots { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(0.4rem, 1.1vw, 0.7rem); margin-top: clamp(1rem, 2.4vw, 1.5rem); }
.tm-shots figure { margin: 0; display: flex; flex-direction: column; }
.tm-shots img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.tm-shots figcaption { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--stone); margin-top: 0.45rem; line-height: 1.55; }

/* ---------- partner logo wall, taken from the deck ---------- */
.logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); gap: clamp(1.4rem, 3vw, 2.6rem) clamp(1.2rem, 2.6vw, 2.2rem); margin-top: clamp(1.6rem, 3vw, 2.2rem); align-items: center; }
.logos a, .logos span { display: flex; align-items: center; justify-content: center; height: clamp(46px, 5vw, 62px); }
.logos img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
@media (hover: hover) and (pointer: fine) {
  .logos img { opacity: 0.88; transition: opacity .25s var(--ez); }
  .logos img:hover { opacity: 1; }
}
@media (max-width: 1040px) { .tm-shots { grid-template-columns: repeat(3, 1fr); } .tm-shots figure:nth-child(n+4) { display: none; } }
@media (max-width: 560px) { .tm-shots { grid-template-columns: 1fr 1fr; } .tm-shots figure:nth-child(n+4) { display: flex; } .tm-shots figure:nth-child(5) { display: none; } }

/* ============================================================
   PEOPLE
   ============================================================ */
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13.5rem,100%), 1fr)); gap: clamp(1.2rem, 2.4vw, 1.8rem); }
/* auto-fit packs four ~216px columns between 1100 and 1329px, which leaves the
   fifth member alone on his own row. fixed counts either side of that instead:
   three up to 1329 (a clean 3 + 2) and five above, where they genuinely fit. */
@media (min-width: 1041px) { .team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1330px) { .team { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.person .fr { margin-bottom: 0.9rem; }
.person img { aspect-ratio: 1/1; object-fit: cover; }
.person h4 { margin: 0 0 0.3rem; }
.person .role { display: block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--label); margin-bottom: 0.65rem; }
.person p { margin: 0; color: var(--stone); font-size: 0.88rem; line-height: 1.6; }

.origin-person { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.6rem, 4vw, 4rem); align-items: center; padding-top: clamp(2.2rem, 4.5vw, 3.6rem); border-top: 1px solid var(--hair); margin-top: clamp(2.2rem, 4.5vw, 3.6rem); }
.origin-person.rev { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.origin-person img { aspect-ratio: 1/1; object-fit: cover; }
.origin-person p { color: var(--stone); margin: 0.8rem 0 0; max-width: 52ch; }
.origin-person blockquote { margin: 1.1rem 0 0; padding-left: 1.1rem; border-left: 3px solid var(--forest); color: var(--stone); font-size: 0.95rem; line-height: 1.66; max-width: 52ch; }

.room { display: grid; grid-auto-flow: dense; grid-template-columns: repeat(5, 1fr); gap: clamp(0.6rem, 1.4vw, 1.1rem); margin-top: 1.6rem; }
.room figure { margin: 0; display: flex; flex-direction: column; }
.room img { aspect-ratio: 1/1; object-fit: cover; }
.room figcaption { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--stone); margin-top: 0.45rem; line-height: 1.55; }

.collab { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem,100%), 1fr)); gap: 1.2rem 2.4rem; margin-top: 1.8rem; }
.collab .i { border-top: 2px solid var(--forest); padding-top: 0.7rem; }
.collab .i b { display: block; font-weight: 600; font-size: 0.98rem; }
.collab .i span { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--stone); }

/* ============================================================
   MOMENTS
   ============================================================ */
.strip { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; background: var(--oat); line-height: 0; }
.strip img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }

/* ============================================================
   JOURNEY
   ============================================================ */
.next { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 4vw, 3.6rem); align-items: center; background: var(--oat); border: 1px solid var(--hair); border-left: 4px solid var(--forest); padding: clamp(1.4rem, 3vw, 2.4rem); margin-bottom: clamp(2.6rem, 5vw, 4.4rem); border-radius: 0 var(--r) var(--r) 0; }
.next img { aspect-ratio: 4/3; object-fit: cover; }
.chip { display: inline-block; background: var(--forest); padding: 0.32rem 0.68rem; border-radius: 2px; }
.next .chip { color: var(--onforest); margin: 0 0 1.3rem; }
.next h3 { margin-bottom: 0.8rem; }
.next p { color: var(--stone); margin: 0; max-width: 46ch; }

.event { display: grid; grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1rem, 3vw, 3rem); padding-block: clamp(1.9rem, 4vw, 3.2rem); border-top: 1px solid var(--hair); align-items: start; }
.event .when { padding-top: 0.4rem; }
.event h4 { margin-bottom: 0.7rem; }
.event p { margin: 0 0 0.7rem; color: var(--stone); font-size: 0.96rem; }
.event p:last-of-type { margin-bottom: 0; }
.event .shots { display: grid; gap: 0.45rem; }
.event .shots.two { grid-template-columns: 1fr 1fr; }
.event .shots.three { grid-template-columns: 1fr 1fr 1fr; }
.event .shots img { aspect-ratio: 3/2; object-fit: cover; }
.event .shots.tall img { aspect-ratio: 3/4; }
.event .await { aspect-ratio: 3/2; border: 1px dashed var(--hair-2); border-radius: var(--r); display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--stone); }

/* ============================================================
   OUR JOURNEY, GALLERY VARIANT
   main photograph, thumbnail strip, then the event and its write-up
   ============================================================ */
.event-alt { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: start; }
.event-alt .ev-media { order: 1; }
.event-alt .ev-body { order: 2; }
/* min-width:0 lets the thumbnail strip scroll instead of forcing the
   grid column wider than the container, which it does once a gallery
   has more thumbnails than fit across */
.ev-media { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.ev-main { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; width: 100%; }
.ev-main .fr { width: 100%; }
.ev-main img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.ev-thumbs {
  display: flex; gap: 0.4rem; overflow-x: auto; scroll-behavior: smooth; min-width: 0;
  scrollbar-width: thin; padding-bottom: 0.2rem;
}
.ev-thumbs::-webkit-scrollbar { height: 4px; }
.ev-thumbs::-webkit-scrollbar-thumb { background: var(--hair-2); border-radius: 2px; }
.ev-th {
  flex: 0 0 auto; width: clamp(56px, 6vw, 78px); padding: 0; border: 0; cursor: pointer;
  background: none; border-radius: var(--r); overflow: hidden; line-height: 0;
  opacity: 0.5; transition: opacity .25s var(--ez), outline-color .25s var(--ez);
  outline: 2px solid transparent; outline-offset: 2px;
}
.ev-th img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.ev-th:hover { opacity: 0.85; }
.ev-th.is-on { opacity: 1; outline-color: var(--forest); }
.ev-body .when { padding-top: 0; margin-bottom: 0.5rem; }
.ev-full { display: none; }
.ev-count { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone); margin: 0.2rem 0 0; }

/* lightbox gallery controls */
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(245,240,227,0.14); color: #F5F0E3; font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: background .2s;
  /* on narrow screens the photograph fills the width and would otherwise
     sit on top of these and swallow the taps */
  z-index: 3; backdrop-filter: blur(4px);
}
.lb-nav:hover { background: rgba(245,240,227,0.3); }
.lb-prev { left: clamp(0.5rem, 2vw, 1.6rem); }
.lb-next { right: clamp(0.5rem, 2vw, 1.6rem); }
.lb-nav[hidden] { display: none; }
.lb-index { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; color: rgba(245,240,227,0.6); margin: 0; }

@media (max-width: 1040px) {
  /* .event in the main responsive block is declared later, so these need
     the extra class to win */
  .event.event-alt { grid-template-columns: 1fr; }
  .event.event-alt .ev-media { order: 1; margin-bottom: 1.1rem; }
  .event.event-alt .ev-body { order: 2; }
  .ev-th { width: clamp(52px, 15vw, 72px); }
}
@media (max-width: 560px) {
  .ev-main img { aspect-ratio: 4/3; }
}

/* ============================================================
   MEET THE TEAM, CAROUSEL VARIANT
   tablet and mobile only: one card at a time with the next
   one peeking, so the swipe is obvious. desktop is unchanged.
   ============================================================ */
.team-head { margin-bottom: 1.3rem; }
.team-dots { display: none; }

@media (max-width: 1040px) {
  .team {
    display: flex;
    grid-template-columns: none;
    gap: clamp(0.8rem, 3vw, 1.2rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* bleed to the screen edges so the peek reads as a swipe cue */
    margin-inline: calc(var(--gut) * -1);
    padding: 0 var(--gut) 0.4rem;
    /* mandatory snapping aligns the first card's edge with the scrollport edge,
       which cancels the padding. scroll-padding offsets the snap position so
       the left gutter survives. */
    scroll-padding-inline: var(--gut);
  }
  .team::-webkit-scrollbar { display: none; }
  .team .person { flex: 0 0 78%; scroll-snap-align: start; }

  /* the indicator sits on the same line as the section label, because the
     cards are tall enough to push anything below them off screen */
  .team-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
  .team-dots { display: flex; gap: 8px; margin: 0; align-items: center; }
  .team-dots button {
    width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
    background: var(--hair-2); cursor: pointer;
    transition: background .25s var(--ez), transform .25s var(--ez);
  }
  .team-dots button.is-on { background: var(--forest); transform: scale(1.45); }
  .team-dots .of { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--label); margin-left: 0.55rem; }
}
@media (max-width: 720px) {
  .team { grid-template-columns: none; }
  .team .person { flex: 0 0 82%; }
}
@media (max-width: 400px) {
  .team { grid-template-columns: none; }
  .team .person { flex: 0 0 86%; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot { background: var(--bark); color: var(--oat); position: relative; overflow: hidden; }
.foot .mark-seal { width: clamp(220px, 26vw, 400px); right: 2%; top: -14%; background: var(--oat); opacity: 0.13; --rot: -8deg; }
.foot .top { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.foot .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(8.5rem,100%), auto)); gap: 1.6rem 3rem; }
.foot .cols .label { color: #A9C0B4; }
.foot .cols p { margin: 0.35rem 0 0; font-size: 0.93rem; }
.foot a.link { border-bottom: 2px solid rgba(245,240,227,0.32); padding-bottom: 1px; }
/* the studio credit sits in the small print, so it needs its own weight */
.foot .base a { color: var(--oat); border-bottom: 1px solid rgba(245,240,227,0.38); padding-bottom: 1px; transition: border-color .25s var(--ez); }
.foot .base a:hover { border-bottom-color: var(--oat); }
.foot a.link:hover { border-bottom-color: var(--oat); }
.foot .lockup { margin-top: clamp(2.2rem, 4.5vw, 3.4rem); }
/* statutory trading disclosure. Companies Act 2006 s.82 and the 2015 Trading
   Disclosures Regulations require the registered name, number, place of
   registration and registered office on the website of a UK limited company. */
.foot .legal { margin: clamp(1.5rem, 3vw, 2.2rem) 0 0; padding-top: 1.2rem; border-top: 1px solid var(--hair-l);
  font-size: 0.78rem; line-height: 1.7; max-width: 68ch; color: rgba(245,240,227,0.76); }
.foot .legal + .base { margin-top: 1rem; padding-top: 0; border-top: 0; }
.foot .base { margin-top: clamp(1.5rem, 3vw, 2.2rem); padding-top: 1.2rem; border-top: 1px solid var(--hair-l); display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(245,240,227,0.64); }

/* ============================================================
   PLACEHOLDER HIGHLIGHT — dormant, add class="show-ph" to <body>
   ============================================================ */
.ph { position: relative; }
body.show-ph .ph { background: rgba(63,115,100,0.18); box-shadow: 0 0 0 2px rgba(63,115,100,0.18); border-radius: 2px; }
body.show-ph .ph-frame { outline: 2px dashed var(--forest); outline-offset: 4px; }

/* ============================================================
   MOTION
   ============================================================ */
.rv { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ez), transform .8s var(--ez); transition-delay: var(--d, 0ms); }
.rv.in { opacity: 1; transform: translateY(0); }
.scatter .a.rv { transform: rotate(-1.3deg) translateY(16px); }
.scatter .a.rv.in { transform: rotate(-1.3deg) translateY(0); }
.scatter .c.rv { transform: rotate(1.4deg) translateY(16px); }
.scatter .c.rv.in { transform: rotate(1.4deg) translateY(0); }
.rv .fr img { transform: scale(1.06); }
.rv.in .fr img { transform: scale(1.001); transition-delay: calc(var(--d, 0ms) + 60ms); }

@keyframes riseIn { from { opacity:0; transform: translateY(20px);} to {opacity:1; transform:none;} }
@keyframes settleBird { from { opacity:0; transform: translateX(-74%) translateY(24px) rotate(-6deg);} to {opacity:1; transform: translateX(-74%) translateY(0) rotate(0);} }
@keyframes settleBirdMob { from { opacity:0; transform: translateY(calc(-55% + 22px)) rotate(-6deg);} to {opacity:1; transform: translateY(-55%) rotate(0);} }
@keyframes slowZoom { from { transform: scale(1.1);} to {transform: scale(1);} }
@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }
.hero .shot img.photo { animation: slowZoom 2.6s var(--ez) both; }
.hero .label { animation: riseIn .9s var(--ez) .12s both; }
.hero h1     { animation: riseIn 1s var(--ez) .22s both; }
.hero .sub   { animation: riseIn 1s var(--ez) .36s both; }
.hero .meta  { animation: riseIn 1s var(--ez) .48s both; }
.hero .bird  { animation: settleBird 1.2s var(--ez) .6s both; }
.hero .cred  { animation: fadeIn 1s linear .9s both; }

@media (hover: hover) and (pointer: fine) {
  .room figure { transition: transform .4s var(--ez); }
  .room figure:hover { transform: translateY(-4px); }
  .room figure:hover .fr img, .strip .fr:hover img, .event .shots .fr:hover img, .scatter figure:hover .fr img { transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv { opacity: 1; transform: none; }
  .scatter .a { transform: rotate(-1.3deg); } .scatter .c { transform: rotate(1.4deg); }
  .rv .fr img { transform: none; }
  .band img { transform: scale(1.12); }
}

/* ============================================================
   LIGHTBOX  ·  Our Journey photographs, desktop and mobile
   ============================================================ */
#journey .fr { cursor: zoom-in; }
.lb {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(14, 43, 38, 0.9);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ez), visibility .3s var(--ez);
}
.lb.open { opacity: 1; visibility: visible; }
.lb-inner { max-width: min(100%, 1100px); max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.lb img {
  max-width: 100%; max-height: calc(100vh - 10rem);
  width: auto; height: auto; border-radius: var(--r);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.7);
  transform: scale(0.97); transition: transform .3s var(--ez);
}
.lb.open img { transform: scale(1); }
.lb-cap {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: rgba(245,240,227,0.82); text-align: center; margin: 0; max-width: 60ch; line-height: 1.7;
}
.lb-close {
  position: absolute; top: clamp(0.7rem, 2vw, 1.4rem); right: clamp(0.7rem, 2vw, 1.4rem);
  width: 42px; height: 42px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(245,240,227,0.14); color: #F5F0E3;
  font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background .2s; z-index: 3; backdrop-filter: blur(4px);
}
.lb-close:hover { background: rgba(245,240,227,0.28); }
body.lb-on { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .lb, .lb img { transition: none; } }

@media (max-width: 560px) {
  .lb-nav { width: 40px; height: 40px; background: rgba(20,30,26,0.55); }
  .lb-close { background: rgba(20,30,26,0.55); }
  .lb img { max-height: calc(100vh - 12rem); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1280px) {
  .farm { grid-template-columns: 2.8rem minmax(0,1fr) minmax(0,1fr); }
  .room { gap: clamp(0.5rem, 1.1vw, 0.9rem); }
}
@media (max-width: 1040px) {
  .hero { grid-template-columns: 1fr; }
  .hero .pane { min-height: 0; padding-block: clamp(2.2rem, 6vw, 3.4rem); }
  .hero .shot { min-height: clamp(300px, 48vh, 460px); }
  .hero .pane { padding-bottom: calc(clamp(2.2rem, 6vw, 3.4rem) + clamp(64px, 9vw, 100px)); }
  .hero .bird { left: auto; right: 5%; bottom: auto; top: 0; transform: translateY(-55%);
                width: clamp(104px, 16vw, 168px); animation-name: settleBirdMob; }
  .card-top, .next, .origin-person, .origin-person.rev { grid-template-columns: 1fr; }
  .origin-person .fr { order: 1; }
  .origin-person > div { order: 2; }
  .card-top > div:not(.who) { order: 1; }
  .card-top .who { order: 2; }
  .event { grid-template-columns: minmax(0,6rem) minmax(0,1fr); }
  .event .shots { grid-column: 1 / -1; margin-top: 0.4rem; }
  .pillar { grid-template-columns: 2.6rem minmax(0,1fr); }
  .pillar p { grid-column: 2; margin-top: 0.5rem; }
  .farm { grid-template-columns: 2.6rem minmax(0,1fr); }
  .farm p { grid-column: 2; margin-top: 0.5rem; }
  .room { grid-template-columns: repeat(3, 1fr); }
  .room figure:nth-child(10) { display: none; }
  .strip { grid-template-columns: repeat(4, 1fr); }
  .foot .top { grid-template-columns: 1fr; }
  .namestory .inner { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .rail { grid-template-columns: 1fr; gap: 0.9rem; }
  .rail > .rl { padding-top: 0; }
  .nav-links { position: fixed; inset: 0 0 auto; top: 0; flex-direction: column; align-items: flex-start; gap: 0.2rem; background: var(--oat); padding: 4.7rem var(--gut) 2.2rem; transform: translateY(-102%); transition: transform .38s var(--ez); border-bottom: 1px solid var(--hair); }
  .nav-links.open { transform: none; }
  .nav-links a { font-size: 0.9rem; letter-spacing: 0.1em; padding-block: 0.5rem; }
  .burger { display: block; position: relative; z-index: 60; order: 3; }
  /* the menu panel is opaque and starts at the top of the viewport, so the
     logo and language toggle have to sit above it to stay visible */
  .nav .wrap > a, .nav .lang { position: relative; z-index: 60; }
  .lang { order: 2; margin-left: auto; margin-right: 0.4rem; }
  .team { grid-template-columns: 1fr 1fr; }
  .room { grid-template-columns: 1fr 1fr; }
  .room figure:nth-child(10) { display: flex; }
  .event .shots.two, .event .shots.three { grid-template-columns: 1fr 1fr; }
  .event .shots.tall img { aspect-ratio: 1/1; }
  .band img { transform: none; }

  /* 3 + 4 · our mission: one column, no tilt, counters stacked */
  .scatter { grid-template-columns: 1fr; }
  .scatter .b { margin-top: 0; }
  .scatter .a, .scatter .c, .scatter .a.rv.in, .scatter .c.rv.in { transform: none; }
  .scatter .a.rv, .scatter .c.rv { transform: translateY(16px); }
  .facts { grid-template-columns: 1fr; }

  /* 5 · how it is grown: photographs run the full width of the card */
  .grow { grid-template-columns: 1fr; }
  .grow .fr { max-width: none; }
  .grow img { aspect-ratio: 16/10; }

  /* 7 · partners and collaborators: one column */
  .collab { grid-template-columns: 1fr; }

  /* 8 · our journey: the gallery leads, then the date and the write-up */
  .event { grid-template-columns: 1fr; }

  /* 10 · footer: the wordmark sits above the enquiries */
  .foot .wrap { display: flex; flex-direction: column; }
  .foot .top { display: contents; }
  .foot .top > h3 { order: 1; text-align: center; }
  .foot .lockup { order: 2; margin: clamp(1.7rem, 5vw, 2.4rem) 0; }
  .foot .cols { order: 3; }
  .foot .base { order: 4; }
}
@media (max-width: 560px) {
  .strip { grid-template-columns: 1fr 1fr; }
  .spec-rows div { grid-template-columns: 5.4rem 1fr; }
}
@media (max-width: 400px) {
  .team { grid-template-columns: 1fr; }
  .nav .wrap { gap: 0.5rem; }
  .wordmark { font-size: clamp(1.28rem, 6.2vw, 1.5rem); }
  .lang { gap: 0.28rem; }
  .lang-btn { letter-spacing: 0.08em; padding-inline: 0; }
  h1.d { font-size: clamp(2.1rem, 11vw, 2.5rem); }
}