/* Fair Valley Produce - Midnight Cinema x Story Scroll x shopify two-track borrow */
@font-face{font-family:'Archivo Variable';font-style:normal;font-display:swap;font-weight:100 900;src:url('/assets/fonts/archivo-latin-wght-normal.woff2') format('woff2-variations')}
@font-face{font-family:'Inter Variable';font-style:normal;font-display:swap;font-weight:100 900;src:url('/assets/fonts/inter-latin-wght-normal.woff2') format('woff2-variations')}

:root{
  --night:#060907; --night-2:#10140F; --on-dark:#F4F3EE; --on-dark-mute:#A9B2A9;
  --cream:#F7F6F0; --card:#FFFFFF; --ink:#12160F; --ink-mute:#4C544C;
  --forest:#1A674B; --forest-deep:#124A36; --sage:#7AB584; --sage-tint:#E3EFE2;
  --hair-d:#212B22; --hair-l:#E2E5DB;
  --disp:'Archivo Variable',Helvetica,Arial,sans-serif;
  --body:'Inter Variable',Helvetica,Arial,sans-serif;
  --wrap:1160px; --pad:24px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html.js-anim{overflow-x:clip}
body{font-family:var(--body);font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
body.night{background:var(--night);color:var(--on-dark)}
body.day{background:var(--cream);color:var(--ink)}
img{display:block;max-width:100%;height:auto}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.measure{max-width:680px}
a{color:inherit}
.skip{position:absolute;left:-999px;top:0;background:var(--sage);color:var(--ink);padding:10px 18px;z-index:200;border-radius:999px}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--sage);outline-offset:3px}
body.day :focus-visible{outline-color:var(--forest)}

/* type */
h1,h2,h3{font-family:var(--disp);font-weight:330;line-height:1.04;letter-spacing:.5px}
h1{font-size:clamp(42px,7vw,92px)}
h2{font-size:clamp(32px,4.6vw,56px);margin-bottom:26px}
h3{font-size:clamp(21px,2.4vw,26px);font-weight:480;letter-spacing:.3px;line-height:1.25}
.lead{font-size:19px;line-height:1.56;font-weight:430}
.mute{color:var(--on-dark-mute)}
body.day .mute{color:var(--ink-mute)}
p+p{margin-top:16px}

/* pill button vocabulary (the only button shape, both tracks) */
.btn{display:inline-block;font-family:var(--body);font-size:16px;font-weight:520;text-decoration:none;
  border-radius:999px;padding:13px 28px;transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;border:1.5px solid transparent;cursor:pointer}
.btn:active{transform:scale(.97)}
.btn-sage{background:var(--sage);color:#0B1D12;border-color:var(--sage)}
.btn-sage:hover,.btn-sage:focus-visible{background:#8FC697;border-color:#8FC697}
.btn-ghost-d{background:transparent;color:var(--on-dark);border-color:rgba(244,243,238,.65)}
.btn-ghost-d:hover,.btn-ghost-d:focus-visible{border-color:var(--sage);color:var(--sage)}
.btn-forest{background:var(--forest);color:#fff;border-color:var(--forest)}
.btn-forest:hover,.btn-forest:focus-visible{background:var(--forest-deep);border-color:var(--forest-deep)}
.btn-ghost-l{background:transparent;color:var(--ink);border-color:rgba(18,22,15,.4)}
.btn-ghost-l:hover,.btn-ghost-l:focus-visible{border-color:var(--forest);color:var(--forest)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* header (dark masthead on both tracks, shrinks) */
header.site{position:sticky;top:0;z-index:100;background:rgba(6,9,7,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--hair-d)}
header.site .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:var(--wrap);margin:0 auto;padding:22px var(--pad);transition:padding .3s ease}
header.site .logo img{height:40px;width:auto;transition:height .3s ease}
header.site.shrunk .bar{padding:10px var(--pad)}
header.site.shrunk .logo img{height:30px}
nav.main{display:flex;align-items:center;gap:28px}
nav.main a{color:var(--on-dark);text-decoration:none;font-size:15.5px;font-weight:460;position:relative}
nav.main a:not(.btn)::after{content:'';position:absolute;left:0;bottom:-6px;width:0;height:1.5px;background:var(--sage);transition:width .25s ease}
nav.main a:not(.btn):hover::after,nav.main a:not(.btn).here::after{width:100%}
nav.main a.here{color:var(--sage)}
nav.main .btn{padding:9px 20px;font-size:15px}
.menu-btn{display:none;background:none;border:1px solid rgba(244,243,238,.5);color:var(--on-dark);border-radius:999px;padding:8px 16px;font-size:15px;font-family:var(--body)}
.m-nav{display:none}

/* hero (home) */
.vhero{position:relative;min-height:88vh;display:flex;align-items:flex-end;overflow:hidden}
.vhero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.vhero .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(4,6,5,.86) 0%,rgba(4,6,5,.42) 48%,rgba(4,6,5,.16) 100%)}
.vhero .inner{position:relative;z-index:2;width:100%;padding-bottom:9vh}
.vhero h1{max-width:16ch}
.vhero .lead{max-width:52ch;margin:22px 0 30px}
.js-anim .vhero [data-hero]{opacity:0;transform:translateY(46px)}

/* page head (inner pages) */
.page-head{position:relative;min-height:44vh;display:flex;align-items:flex-end;overflow:hidden}
.page-head .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-head .scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(4,6,5,.8),rgba(4,6,5,.22))}
.page-head .inner{position:relative;width:100%;padding:56px 0 46px}
body.day .page-head-plain{padding:86px 0 10px}

/* night chapters */
section{padding:96px 0}
section.tight{padding:72px 0}
.chapter-rule{border:0;border-top:1px solid var(--hair-d);margin:0}
body.day .chapter-rule{border-top-color:var(--hair-l)}
.interlude{padding:0;line-height:0}
.interlude img{width:100%;height:62vh;object-fit:cover}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.split .ph-img img{border-radius:4px}
.rows{border-top:1px solid var(--hair-d)}
.rows .row{display:grid;grid-template-columns:220px 1fr auto;gap:24px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--hair-d);text-decoration:none;transition:background .25s ease}
.rows .row:hover{background:rgba(122,181,132,.05)}
.rows .row .r-name{font-family:var(--disp);font-weight:400;font-size:26px;letter-spacing:.4px}
.rows .row .r-desc{color:var(--on-dark-mute);font-size:16px}
.rows .row .r-go{color:var(--sage);font-size:20px}

/* fixed-background land chapter (effect #2a, pure CSS) */
.band-deep{background:var(--forest)}
.band-deep .mute{color:rgba(255,255,255,.78)}
.band-deep .btn-ghost-d{border-color:rgba(255,255,255,.7)}
.band-deep .btn-ghost-d:hover,.band-deep .btn-ghost-d:focus-visible{border-color:#fff;color:#fff}
.band-deep .pillars span{color:#DFEEDF}
.page-head-dark{padding:110px 0 26px}
.pillars{display:flex;gap:34px;flex-wrap:wrap;margin-top:22px}
.pillars span{font-family:var(--disp);font-weight:430;font-size:19px;letter-spacing:1.2px;text-transform:uppercase;color:var(--sage)}

/* team list (about) */
.team{border-top:1px solid var(--hair-d)}
.team .t-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:24px 0;border-bottom:1px solid var(--hair-d);align-items:baseline}
.team .t-name{font-family:var(--disp);font-weight:420;font-size:24px}
.team .t-role{color:var(--on-dark-mute)}
.team .t-contact{display:flex;gap:18px;flex-wrap:wrap;font-size:15.5px}
.team .t-contact a{color:var(--sage);text-decoration:none;border-bottom:1px solid rgba(122,181,132,.35)}
.team .t-contact a:hover{border-bottom-color:var(--sage)}

/* photo placeholder panels (site-styled, labelled) */
.ph-panel{border:1.5px dashed rgba(122,181,132,.5);border-radius:4px;display:flex;align-items:center;justify-content:center;text-align:center;padding:30px;min-height:320px;color:var(--on-dark-mute);font-size:15.5px;line-height:1.5;background:rgba(122,181,132,.04)}
body.day .ph-panel{border-color:rgba(26,103,75,.45);color:var(--ink-mute);background:rgba(26,103,75,.05)}

/* day track */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{background:var(--card);border:1px solid var(--hair-l);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.card .c-img{background:#fff;padding:26px;display:flex;align-items:center;justify-content:center;min-height:250px}
.card .c-img img{max-height:220px;width:auto;max-width:100%}
.card .c-body{padding:6px 28px 30px}
.card h3{margin-bottom:10px}
.card ul{margin:0 0 0 18px}
.card li{margin-top:8px;color:var(--ink-mute)}
.band-sage{background:var(--sage-tint)}
.band-forest{background:var(--forest);color:#fff}
.band-forest .mute{color:rgba(255,255,255,.75)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.duo img{border-radius:12px;border:1px solid var(--hair-l);width:100%}

/* contact */
.contact-btns{display:flex;gap:14px;flex-wrap:wrap;margin:26px 0 8px}
form .f-row{margin-bottom:18px}
form label{display:block;font-weight:550;font-size:15px;margin-bottom:7px}
form input,form textarea{width:100%;font-family:var(--body);font-size:16px;padding:12px 14px;border:1px solid #C9CEC2;border-radius:8px;background:#fff;color:var(--ink)}
form input:focus,form textarea:focus{outline:2px solid var(--forest);outline-offset:1px;border-color:var(--forest)}
form textarea{min-height:150px;resize:vertical}
.hp{position:absolute;left:-9999px}
.map-embed{border:0;width:100%;height:420px;border-radius:12px}

/* footer */
footer.site{background:#040604;color:var(--on-dark);padding:64px 0 34px;border-top:1px solid var(--hair-d)}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px;margin-bottom:44px}
footer.site img{height:44px;width:auto;margin-bottom:18px}
footer.site a{color:var(--on-dark-mute);text-decoration:none}
footer.site a:hover{color:var(--sage)}
footer.site .f-head{font-family:var(--disp);font-weight:440;letter-spacing:1px;font-size:15px;text-transform:uppercase;margin-bottom:14px;color:var(--on-dark)}
footer.site ul{list-style:none}
footer.site li{margin-bottom:9px}
footer.site .legal{border-top:1px solid var(--hair-d);padding-top:22px;font-size:14px;color:var(--on-dark-mute);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
footer.site .legal a{border-bottom:1px solid transparent}
footer.site .legal a:hover{border-bottom-color:var(--sage)}

/* mobile call bar */
.callbar{display:none}

/* reveal initial states (canonical system; gated on .js-anim) */
.js-anim main section:not(.vhero):not(.no-reveal) :is(h1,h2,h3,p,.btn-row,.ph-img,.ph-panel,.reveal-unit):not(.rows *):not(.team *):not(.cards *):not(.pillars *):not(.duo *):not(.reveal-block *){opacity:0;transform:translateY(42px)}
.js-anim main section:not(.no-reveal) :is(.rows,.team,.cards,.duo)>*{opacity:0;transform:translateY(30px)}
.js-anim main .reveal-block{opacity:0;transform:translateY(42px)}
.js-anim main .from-left :is(h2,h3,p,.ph-img,.ph-panel){transform:translateX(-42px)}

/* responsive */
@media (max-width:960px){
  .split{grid-template-columns:1fr;gap:34px}
  .cards{grid-template-columns:1fr}
  .duo{grid-template-columns:1fr}
  footer.site .cols{grid-template-columns:1fr;gap:30px}
  .rows .row{grid-template-columns:1fr;gap:6px}
  .rows .row .r-go{display:none}
  .team .t-row{grid-template-columns:1fr}
}
@media (max-width:860px){
  nav.main{display:none}
  .menu-btn{display:block}
  .m-nav{display:none;position:fixed;inset:0;z-index:150;background:rgba(5,8,6,.97);padding:90px 34px}
  .m-nav.open{display:block}
  .m-nav a{display:block;color:var(--on-dark);text-decoration:none;font-family:var(--disp);font-weight:360;font-size:34px;padding:13px 0;border-bottom:1px solid var(--hair-d)}
  .m-nav .close{position:absolute;top:22px;right:24px;background:none;border:1px solid rgba(244,243,238,.5);color:var(--on-dark);border-radius:999px;padding:8px 18px;font-size:15px}
  body{padding-bottom:64px}
  .callbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:120;background:#0A0F0B;border-top:1px solid var(--hair-d)}
  .callbar a{flex:1;text-align:center;color:var(--on-dark);text-decoration:none;font-size:14.5px;font-weight:520;padding:15px 4px}
  .callbar a+a{border-left:1px solid var(--hair-d)}
  .vhero{min-height:76vh}
  .interlude img{height:44vh}
  section{padding:64px 0}
}