/* ==========================================================================
   Farmer training, in their own words.
   One band on three pages (the home page, the Smart Agriculture page and the
   training page); the markup is written by voices/voices.py. The figure is set
   as large as the screen allows, over the client's own photograph of a session
   among chilli plants, and the testimonies sit under it in the site's serif.
   It reads the page's own tokens where a page has them: on the service pages
   (body.svc) the accent is that page's --sv on graphite; everywhere else it is
   the site's sand on deep olive, the colour of the dark bands.
   ========================================================================== */
.vc{
  --vc-acc:var(--sand,#C9A96B);
  --vc-glow:rgba(201,169,107,.2);
  --vc-g0:#0F140B;
  --vc-g1:#19220F;
  --vc-ink:var(--bone,#F5EFE5);
  --vc-ink-2:rgba(245,239,229,.82);
  --vc-ink-3:rgba(245,239,229,.62);
  --vc-line:rgba(245,239,229,.14);
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(104px,16vh,190px) var(--pad,24px) clamp(92px,13vh,160px);
  background:linear-gradient(180deg,var(--vc-g0) 0%,var(--vc-g1) 62%,var(--vc-g0) 100%);
  color:var(--vc-ink)}
body.svc .vc{
  --vc-acc:var(--sv,#C9A96B);
  --vc-glow:var(--sv-soft,rgba(201,169,107,.16));
  --vc-g0:var(--gr-0,#0D0F0B);
  --vc-g1:#151912;
  --vc-ink:var(--gr-text,#F2ECE1)}
.vc ::selection{background:var(--vc-acc);color:#0D0F0B}

/* the photograph: full bleed behind the figure, rising out of the band above it
   (every neighbour on all three pages is dark) and gone by the time the words begin */
.vc-bg{position:absolute;left:0;right:0;top:0;height:min(100%,max(620px,112vh));z-index:-1;
  overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 46%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 46%,transparent 100%)}
.vc-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;
  opacity:.42;filter:saturate(.78) contrast(1.05)}
/* the site's dotted field, in light dots, laid over the photograph: it ties the
   picture to the page and keeps a phone photograph from looking soft when it is
   stretched across a wide screen */
.vc-bg::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(rgba(245,239,229,.09) .55px,transparent .65px) 0 0/3px 3px,
    radial-gradient(58% 46% at 50% 47%,var(--vc-glow),transparent 74%),
    linear-gradient(180deg,rgba(13,16,10,.9) 0%,rgba(13,16,10,.34) 30%,rgba(13,16,10,.42) 66%,rgba(13,16,10,.9) 100%)}
.js .vc-bg img{transform:scale(1.07);transition:transform 3s var(--ease,ease)}
.js .vc.vc-on .vc-bg img{transform:none}

.vc-wrap{max-width:var(--maxw,1340px);margin:0 auto;position:relative}

/* ------------------------------ the figure ------------------------------ */
.vc-head{display:flex;flex-direction:column;align-items:center;text-align:center}
.vc .kicker{color:var(--vc-acc);justify-content:center;margin-bottom:clamp(20px,3.4vh,34px)}
.vc .kicker::after{content:"";width:26px;height:1px;background:currentColor;opacity:.6;flex:0 0 auto}
.vc-stat{display:flex;flex-direction:column;align-items:center;margin:0;color:var(--vc-ink)}
.vc-upto{font-family:var(--display);font-weight:300;font-size:clamp(1.3rem,2.3vw,2rem);
  line-height:1;letter-spacing:-.01em;color:var(--vc-acc)}
/* lit from above, settling into the accent at its foot: first light on a field */
.vc-num{display:block;font-family:var(--display);font-weight:300;
  font-size:clamp(5.6rem,21vw,17rem);line-height:.84;letter-spacing:-.05em;
  font-variant-numeric:lining-nums tabular-nums;margin:.07em 0 .05em;padding:0 .05em .04em;
  color:var(--vc-ink);
  background:linear-gradient(180deg,#FFFBF3 12%,var(--vc-ink) 50%,var(--vc-acc) 122%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 18px 48px rgba(8,10,6,.6))}
.vc-what{font-family:var(--display);font-weight:300;font-size:clamp(1.4rem,2.7vw,2.35rem);
  line-height:1.16;letter-spacing:-.016em;max-width:22ch;color:var(--vc-ink);text-wrap:balance}
.vc-rule{display:block;width:min(240px,46vw);height:1px;margin-top:clamp(28px,4.4vh,44px);
  background:linear-gradient(90deg,transparent,var(--vc-acc),transparent)}
.js .vc-rule{transform:scaleX(0);transition:transform 1.6s var(--ease,ease) .45s}
.js .vc.vc-on .vc-rule{transform:none}

/* ------------------------------ the voices ------------------------------ */
.vc-sub{display:flex;align-items:center;justify-content:center;gap:18px;
  max-width:660px;margin:clamp(76px,12vh,140px) auto clamp(30px,4.6vh,48px);
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--vc-ink-3)}
.vc-sub::before,.vc-sub::after{content:"";flex:1 1 0;height:1px;background:var(--vc-line)}

.vc-lead{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(16px,2.4vw,36px);
  max-width:62rem;margin:0 auto}
.vc-q{grid-row:1 / span 2;font-family:var(--display);font-weight:300;
  font-size:clamp(4.6rem,8.6vw,8.2rem);line-height:.78;color:var(--vc-acc)}
.vc-lead blockquote{margin:0}
.vc-lead blockquote p{font-family:var(--display);font-weight:300;
  font-size:clamp(1.38rem,2.3vw,2.15rem);line-height:1.34;letter-spacing:-.014em;
  color:var(--vc-ink);text-wrap:pretty}
.vc-lead figcaption{margin-top:clamp(20px,3.2vh,32px)}
.vc-lead figcaption::before{content:"";width:28px;height:1px;background:var(--vc-acc);align-self:center}

.vc figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.vc figcaption b{font-family:var(--body);font-weight:600;font-size:.95rem;color:var(--vc-ink)}
.vc figcaption span{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--vc-acc)}

.vc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px);
  margin-top:clamp(56px,8.4vh,100px)}
.vc-card{margin:0;display:flex;flex-direction:column;gap:22px;
  background:rgba(245,239,229,.045);border:1px solid var(--vc-line);border-radius:20px;
  padding:clamp(24px,2.4vw,32px);
  transition:border-color .4s var(--ease,ease),background .4s var(--ease,ease),transform .4s var(--ease,ease)}
.vc-card:hover{border-color:rgba(245,239,229,.28);background:rgba(245,239,229,.07);transform:translateY(-3px)}
.vc-card blockquote{margin:0;flex:1 1 auto}
.vc-card blockquote::before{content:"\201C";display:block;height:.44em;margin-bottom:6px;
  font-family:var(--display);font-weight:300;font-size:3.4rem;line-height:.84;color:var(--vc-acc)}
.vc-card blockquote p{font-family:var(--display);font-weight:400;font-size:clamp(1.04rem,1.28vw,1.15rem);
  line-height:1.56;letter-spacing:-.004em;color:var(--vc-ink-2);text-wrap:pretty}
.vc-card figcaption{padding-top:18px;border-top:1px solid var(--vc-line)}

.vc-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 28px;
  margin-top:clamp(22px,3.4vh,36px);padding:0 4px}
.vc-note{font-size:.8rem;line-height:1.6;color:var(--vc-ink-3)}
.vc-go{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-family:var(--body);
  font-weight:600;font-size:14px;color:var(--accent-hover,#F0752E);text-decoration:none}
.vc-go::after{content:"\2192";transition:transform .4s var(--ease,ease)}
.vc-go:hover::after{transform:translateX(4px)}
.vc-go:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:4px}

@media (max-width:1020px){
  .vc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vc-grid>:last-child{grid-column:1 / -1}
}
@media (max-width:640px){
  .vc-num{font-size:clamp(5.6rem,30vw,8rem)}
  .vc-grid{grid-template-columns:1fr}
  .vc-foot{flex-direction:column;align-items:flex-start;gap:6px}
  .vc-lead{grid-template-columns:1fr}
  .vc-q{grid-row:auto;font-size:4.4rem;line-height:.84;height:.46em;margin-bottom:10px}
  .vc-sub{gap:12px;letter-spacing:.2em}
  .vc-bg{height:min(100%,max(560px,96vh))}
  .vc-bg img{object-position:46% 46%}
}
@media (prefers-reduced-motion:reduce){
  .js .vc-bg img,.js .vc-rule{transform:none;transition:none}
  .vc-card,.vc-go::after{transition:none}
  .vc-card:hover{transform:none}
}
@media print{
  .vc{background:#fff!important;color:#111!important;padding:24px 0}
  .vc-bg{display:none}
  .vc-num{background:none;-webkit-text-fill-color:#111;color:#111;filter:none}
  .vc-what,.vc-lead blockquote p,.vc figcaption b{color:#111!important}
  .vc .kicker,.vc-upto,.vc-q,.vc figcaption span{color:#2D6E57!important}
  .vc-card{border-color:#ccc!important;background:none!important;break-inside:avoid}
  .vc-card blockquote p,.vc-note{color:#222!important}
  .vc-go{display:none}
}