/* =====================================================================
   Terra Vita Agri Holdings — v4 layout
   Alternating rhythm: plain hero → photo-ground → plain row → photo-ground
   → plain contact. Photo sections carry a parchment text box.
   Palette/type unchanged: parchment, moss, amber. No plum.
   ===================================================================== */

:root{
  --wrap:1180px;
  --ink:var(--fg-1);
  --accent:var(--moss-600);
  --accent-strong:var(--moss-700);
  --gold:var(--amber-700);
  --nav-h:66px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg-page);color:var(--ink);font-family:var(--font-sans);font-size:var(--text-md);line-height:var(--lh-normal);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-strong)}
::selection{background:var(--moss-100);color:var(--moss-700)}

/* ---- loading screen ---- */
#loader{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:var(--bg-page);transition:transform .6s var(--ease-standard),opacity .6s var(--ease-standard)}
#loader img{width:84px;height:84px;object-fit:contain;animation:loaderPulse 1.1s var(--ease-standard) infinite}
#loader.hide{transform:translateY(-100%);opacity:0}
@keyframes loaderPulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.05);opacity:1}}

.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);z-index:60;transition:width .12s linear}

/* ---- nav ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding:0 clamp(20px,4vw,44px);background:rgba(251,248,242,.93);border-bottom:1px solid transparent;transition:border-color var(--dur-base) var(--ease-standard)}
.nav.solid{border-bottom-color:var(--border-1)}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand .mark{width:36px;height:36px;flex:none}
.brand .mark img{width:100%;height:100%;object-fit:contain}
.brand .wm{display:flex;flex-direction:column;line-height:1}
.brand .wm b{font-weight:600;font-size:var(--text-md);letter-spacing:var(--track-snug);white-space:nowrap}
.brand .wm small{margin-top:5px;font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-3);white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:var(--space-7)}
.nav-links a:not(.btn){font-size:var(--text-sm);font-weight:500;color:var(--fg-2);letter-spacing:var(--track-snug)}
.nav-links a:not(.btn):hover{color:var(--ink)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 var(--space-6);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:600;letter-spacing:var(--track-snug);border:1px solid transparent;cursor:pointer;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--accent);color:var(--parchment-50)}
.btn-primary:hover{background:var(--accent-strong);color:var(--parchment-50)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--border-2)}
.btn-ghost:hover{background:var(--bg-raised);border-color:var(--fg-4)}
.nav .btn{height:38px;padding:0 var(--space-5)}

/* ---- type ---- */
.label{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:500;letter-spacing:var(--track-stamp);text-transform:uppercase;color:var(--fg-3)}
.label i{width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}
h1,h2{margin:0;font-family:var(--font-voice);font-weight:500;color:var(--ink);text-wrap:pretty}
h1{font-size:clamp(38px,4.8vw,66px);line-height:1.05;letter-spacing:-.025em}
h2{font-size:clamp(28px,3.4vw,44px);line-height:1.1;letter-spacing:-.022em}
h1 .accent,h2 .accent{font-style:italic;color:var(--accent)}
.lead{margin:0;max-width:56ch;font-size:var(--text-md);line-height:var(--lh-loose);color:var(--fg-2);text-wrap:pretty}

/* ---- layout shell ---- */
.wrap{max-width:var(--wrap);margin:0 auto}
.section{padding:clamp(72px,9vh,110px) clamp(20px,4vw,44px)}
.section+.section{border-top:1px solid var(--border-1)}
.head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4);max-width:720px}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-2)}

/* ---- hero: copy left, cabbage right ---- */
.hero{min-height:100svh;display:grid;align-items:center;padding-top:calc(var(--nav-h) + var(--space-8))}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(32px,5vw,72px);align-items:center;width:100%}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-5)}
.crop-stage{position:relative;aspect-ratio:1/1;background:linear-gradient(180deg,var(--parchment-100),var(--parchment-50));border:1px solid var(--border-1);border-radius:var(--radius-xl);overflow:hidden}
.crop-stage canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity var(--dur-slow) var(--ease-standard)}
.crop-stage canvas.ready{opacity:1}
.crop-stage::after{content:"";position:absolute;left:50%;bottom:13%;transform:translateX(-50%);width:44%;height:24px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(30,34,53,.15),rgba(30,34,53,0) 70%)}
.stage-tag{position:absolute;left:var(--space-5);bottom:var(--space-5);z-index:2;font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-3)}

/* ---- photo-ground sections ---- */
.photo-section{position:relative;isolation:isolate;padding-block:clamp(88px,13vh,150px);background-size:cover;background-repeat:no-repeat;border-top:1px solid var(--border-1)}
.photo-section::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(28,32,26,.28)}
.photo-section .wrap{display:flex}
.photo-section.right .wrap{justify-content:flex-end}
.photo-box{width:min(560px,100%);background:var(--bg-page);border:1px solid var(--border-1);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:clamp(28px,3.6vw,44px);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4)}
.photo-credit{position:absolute;right:clamp(20px,4vw,44px);bottom:var(--space-4);font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--track-label);text-transform:uppercase;color:rgba(251,248,242,.82)}

/* ---- inline photo row ---- */
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.row.flip .row-media{order:2}
.row-copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4)}
.frame{border:1px solid var(--border-1);border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-sunken);box-shadow:var(--shadow-sm)}
.frame img{width:100%;height:100%;object-fit:cover}
.frame.portrait{max-width:420px;margin-left:auto}
.frame.portrait img{aspect-ratio:4/5}
.frame.landscape img{aspect-ratio:16/10}
.caption{margin:var(--space-3) 0 0;font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-3);text-align:right;max-width:420px;margin-left:auto}

/* ---- ledger list ---- */
.caps-list{list-style:none;margin:var(--space-3) 0 0;padding:0;width:100%}
.caps-list li{display:flex;align-items:baseline;gap:var(--space-4);padding:var(--space-3) 0;border-top:1px solid var(--border-1);font-size:var(--text-sm);font-weight:500}
.caps-list li:last-child{border-bottom:1px solid var(--border-1)}
.caps-list .n{font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:500;letter-spacing:var(--track-label);color:var(--gold);flex:none}
.row-copy .caps-list{max-width:440px}

/* ---- contact ---- */
#contact{background:var(--bg-sunken)}
#contact .head{gap:var(--space-5)}
#contact .btn{height:50px;padding:0 var(--space-7);font-size:var(--text-base)}
.contact-card{margin-top:var(--space-2);background:var(--bg-raised);border:1px solid var(--border-2);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--space-5) var(--space-6);display:inline-flex;align-items:center;gap:var(--space-3)}
.contact-card svg{width:20px;height:20px;color:var(--accent);flex:none}
.contact-card b{font-family:var(--font-mono);font-size:var(--text-base);font-weight:500;word-break:break-all}

/* ---- footer ---- */
.foot{border-top:1px solid var(--border-1);padding:var(--space-8) clamp(20px,4vw,44px);display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;justify-content:space-between;max-width:var(--wrap);margin:0 auto;font-size:var(--text-xs);color:var(--fg-3)}
.foot a{color:var(--fg-2)}
.foot a:hover{color:var(--ink)}

/* ---- reveal ---- */
.reveal{opacity:0;transform:translateY(10px);transition:opacity var(--dur-slow) var(--ease-standard),transform var(--dur-slow) var(--ease-standard)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}.d4{transition-delay:.28s}

/* ---- responsive ---- */
@media (max-width:1000px){
  .nav-links a:not(.btn){display:none}
  .hero{min-height:0;padding-bottom:clamp(56px,8vh,80px)}
  .hero .wrap,.row{grid-template-columns:minmax(0,1fr)}
  .row.flip .row-media{order:0}
  .crop-stage{aspect-ratio:4/3;max-width:520px}
  .photo-section .wrap,.photo-section.right .wrap{justify-content:flex-start}
  .frame.portrait,.caption{margin-left:0}
  .caption{text-align:left}
  .row-copy .caps-list{max-width:none}
}
@media (max-width:560px){
  .brand .wm b{font-size:var(--text-base)}
  .brand{min-width:0}
  .brand .wm{min-width:0}
  .brand .wm small{white-space:normal;letter-spacing:.08em;line-height:1.3}
  .nav .btn{padding:0 var(--space-4);flex:none}
  .lead{font-size:var(--text-base)}
  .cta-row{width:100%}
  .cta-row .btn{flex:1 1 auto}
  .frame.portrait{max-width:none}
  .photo-credit{bottom:var(--space-5)}
  .contact-card{padding:var(--space-4) var(--space-5)}
  .contact-card b{font-size:var(--text-xs);word-break:normal;overflow-wrap:anywhere}
  .foot{justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #loader img{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
}