/* 4A Tessera Alpha — Coming Soon · responsive build from 4a_site.ai (design width 1920px) */
@font-face{font-family:"Cera";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/Cera-Regular.woff) format("woff")}
@font-face{font-family:"Cera";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/Cera-Medium.woff) format("woff")}
@font-face{font-family:"Cera";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/Cera-Bold.woff) format("woff")}
@font-face{font-family:"Cera";font-weight:900;font-style:normal;font-display:swap;src:url(fonts/Cera-Black.woff) format("woff")}
@font-face{font-family:"Cera GR";font-weight:900;font-style:normal;font-display:swap;src:url(fonts/CeraGR-Black.woff) format("woff")}

:root{
  --bg:#e3e7d0; --green:#4e6e32; --ink:#231f20;
  /* 1 design pixel (artboard is 1920 wide), capped at the artboard width */
  --u:calc(min(100vw,1920px)/1920);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Cera",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:400;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:2px}

.page{position:relative;max-width:1920px;margin:0 auto;overflow-y:clip}
.page>section,.page>footer{position:relative}
.decor{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero>:not(.decor),.varieties>:not(.decor),.contact>:not(.decor){position:relative;z-index:1}
.d{position:absolute;max-width:none;height:auto;
  left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));width:calc(var(--w)*var(--u))}
.leaf{position:absolute;max-width:none;height:auto;opacity:.2;
  left:calc(565*var(--u));top:calc(141*var(--u));width:calc(887*var(--u))}

/* ---------- HERO ---------- */
.hero{text-align:center;padding:calc(154.5*var(--u)) 0 0;min-height:calc(1266.5*var(--u))}
.logo{margin:0 auto;width:max(92px,calc(145.4*var(--u)));height:auto}
.hero h1{margin:calc(45*var(--u)) 0 0;font-weight:700;font-size:clamp(46px,calc(87*var(--u)),87px);line-height:1.241;color:var(--green)}
.sub{margin:calc(16.3*var(--u)) 0 0;font-size:clamp(22px,calc(36*var(--u)),36px);line-height:1.2;color:var(--green)}
.sub span{display:block}
.packs{position:relative;width:calc(820*var(--u));aspect-ratio:820/429;margin:calc(70.8*var(--u)) auto 0;left:calc(10*var(--u))}
.packs img{position:absolute;max-width:none;height:auto}
.p-florina{left:20.13%;top:.06%;width:59.96%}
.p-jg{left:34.33%;top:8.87%;width:63.6%}
.p-almond{left:2.53%;top:13.69%;width:63.6%}
.intro{margin:0 auto;white-space:nowrap;font-weight:500;font-size:clamp(16px,calc(25*var(--u)),25px);line-height:1.2;text-wrap:balance}
.intro strong{font-family:"Cera GR","Cera",sans-serif;font-weight:900;color:var(--green)}

/* ---------- VARIETIES (desktop zig-zag) ---------- */
.varieties{padding:calc(78.8*var(--u)) calc(100*var(--u)) 0 calc(78.6*var(--u));min-height:calc(2293*var(--u))}
.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:calc(767.8*var(--u)) 1fr;grid-auto-rows:minmax(calc(234*var(--u)),auto)}
.item:nth-child(1){grid-row:1/span 2}
.item:nth-child(2){grid-row:2/span 2}
.item:nth-child(3){grid-row:3/span 2}
.item:nth-child(4){grid-row:4/span 2}
.item:nth-child(5){grid-row:5/span 2}
.item:nth-child(6){grid-row:6/span 2}
.item:nth-child(7){grid-row:7/span 2}
.item:nth-child(8){grid-row:8/span 2}
.item:nth-child(odd){grid-column:1}
.item:nth-child(even){grid-column:2;margin-top:calc(62*var(--u));gap:calc(45.6*var(--u))}
.item:nth-child(1){--adj:0.04;--pad:3.0;--gap:8}
.item:nth-child(2){--adj:0.2;--pad:3.1}
.item:nth-child(3){--adj:9.44;--pad:4.4}
.item:nth-child(4){--adj:8.55;--pad:63.8}
.item:nth-child(5){--adj:-0.16;--pad:4.7}
.item:nth-child(6){--adj:11.12;--pad:13.1}
.item:nth-child(7){--adj:-9.77;--pad:17.9}
.item:nth-child(8){--adj:2.56;--pad:47.8}
.item{position:relative;top:calc(var(--adj,0)*var(--u));display:flex;align-items:flex-start;gap:calc(32.4*var(--u));min-width:0}
.fig{flex:none;margin:0;width:calc(461*var(--u));aspect-ratio:1029/911;position:relative;overflow:hidden}
.fig img{position:absolute;left:0;top:-19.32%;width:155.49%;max-width:none;height:auto}
.txt{flex:none;width:calc(352*var(--u));padding-top:calc((50.7 + var(--pad,0))*var(--u))}
.txt h3{margin:0;font-weight:900;font-size:clamp(17px,calc(24*var(--u)),24px);line-height:1.2;color:var(--green)}
.txt p{margin:calc((18 + var(--gap,0))*var(--u)) 0 0;white-space:nowrap;font-size:clamp(14px,calc(20*var(--u)),20px);line-height:1.2}

/* ---------- CONTACT ---------- */
.contact{min-height:calc(453.7*var(--u));padding:calc(270*var(--u)) 20px calc(58*var(--u));text-align:center}
.contact address{font-style:normal;font-weight:500;font-size:clamp(14px,calc(18*var(--u)),18px);line-height:1.74}
.contact address span{display:block}

/* ---------- DECOR (artboard positions) ---------- */
.d-40{--x:41.14;--y:862.35;--w:339.86}
.d-40{--lx:-34;--ty:64;--wv:52}
.d-41{--x:-126.89;--y:780.22;--w:432.71}
.d-41{--lx:-40;--ty:61;--wv:56}
.d-42{--x:-90.83;--y:874.48;--w:432.72}
.d-42{--lx:-36;--ty:66;--wv:56}
.d-46{--x:203.94;--y:315.95;--w:59.61}
.d-46{--lx:8;--ty:21;--wv:5.5}
.d-47{--x:1557.51;--y:471.98;--w:62.37}
.d-47{--lx:84;--ty:56;--wv:7}
.d-50{--x:-179.53;--y:-103.77;--w:471.42}
.d-50{--lx:-20;--ty:-4;--wv:58}
.d-52{--x:1651.61;--y:287.59;--w:62.22}
.d-52{--lx:90;--ty:17;--wv:6}
.d-53{--x:240.99;--y:574.26;--w:81.47}
.d-53{--lx:5;--ty:52;--wv:9}
.d-56{--x:1620.00;--y:882.73;--w:394.45}
.d-56{--lx:80;--ty:82;--wv:38}
.d-58{--x:1670.77;--y:-122.44;--w:497.29}
.d-58{--lx:79;--ty:-3;--wv:30}
.d-60{--x:-75.50;--y:-53.89;--w:209.43}
.d-60{--lx:-9;--ty:-1.5;--wv:34}
.d-48{--x:1767.93;--y:1276.37;--w:62.36}
.d-48{--lx:3;--ty:57;--wv:8}
.d-49{--x:579.37;--y:2185.77;--w:89.82}
.d-49{--lx:6;--ty:101;--wv:10}
.d-51{--x:1757.67;--y:700.09;--w:323.49}
.d-51{--lx:76;--ty:36;--wv:34}
.d-55{--x:1212.01;--y:122.11;--w:81.47}
.d-55{--lx:86;--ty:-0.5;--wv:9}
.d-59{--x:-121.59;--y:808.33;--w:497.29}
.d-59{--lx:-24;--ty:16;--wv:52}
.d-43{--x:1411.66;--y:130.86;--w:458.50}
.d-43{--lx:66;--ty:80;--wv:40}
.d-44{--x:1524.03;--y:116.28;--w:584.15}
.d-44{--lx:68;--ty:76;--wv:46}
.d-45{--x:1455.36;--y:-4.71;--w:584.15}
.d-45{--lx:60;--ty:72;--wv:46}
.d-54{--x:1310.37;--y:116.06;--w:81.47}
.d-54{--lx:72;--ty:5;--wv:10}
.d-57{--x:-222.70;--y:45.31;--w:683.03}
.d-57{--lx:-42;--ty:50;--wv:64}

/* ---------- TABLET + MOBILE: re-flowed single column ---------- */
@media (max-width:1279px){
  .item{top:0;--pad:0;--gap:0}
  .wide{display:none}
  .txt p,.intro{white-space:normal}
  :root{--fig:clamp(280px,38vw,400px)}
  .d{left:calc(var(--lx)*1%);top:calc(var(--ty)*1%);width:calc(var(--wv)*1vw)}
  .leaf{left:50%;transform:translateX(-50%);top:3%;width:min(170vw,1100px)}

  .hero{padding:clamp(56px,9vw,96px) 20px clamp(36px,6vw,64px);min-height:0}
  .logo{width:clamp(96px,17vw,140px)}
  .hero h1{margin-top:clamp(22px,4vw,40px);font-size:clamp(34px,11.5vw,88px)}
  .sub{margin-top:clamp(8px,1.6vw,16px);font-size:clamp(17px,4.6vw,34px);text-wrap:balance}
  .packs{width:min(150vw,980px);margin:clamp(6px,2vw,24px) 0 0;left:50%;transform:translateX(-50%)}
  .intro{max-width:min(36em,100%);margin-top:clamp(-10px,-1vw,0px);font-size:clamp(16px,2.6vw,22px)}

  .varieties{padding:0 20px clamp(48px,8vw,96px);min-height:0}
  .grid{display:flex;flex-direction:column;gap:clamp(36px,6vw,64px);max-width:860px;margin:0 auto}
  .item,.item:nth-child(even){grid-column:auto;grid-row:auto;margin-top:0;gap:clamp(8px,2vw,24px);width:min(100%,720px)}
  .item:nth-child(odd){margin-right:auto}
  .item:nth-child(even){margin-left:auto}
  .fig{width:var(--fig)}
  .txt{flex:1 1 0;width:auto;min-width:0;padding-top:calc(var(--fig)*.115)}
  .txt h3{font-size:clamp(19px,2.7vw,24px)}
  .txt p{margin-top:clamp(12px,1.8vw,20px);font-size:clamp(16px,2.2vw,20px);line-height:1.25}

  .contact{min-height:0;padding:clamp(120px,24vw,220px) 20px clamp(90px,14vw,130px)}
  .contact address{font-size:clamp(15px,2.4vw,18px)}
}
@media (max-width:639px){
  :root{--fig:min(96vw,420px)}
  .grid{gap:44px}
  .item,.item:nth-child(even){flex-direction:column;align-items:flex-start;gap:0;width:100%;margin-left:0;margin-right:0}
  .fig{margin-left:calc(50% - var(--fig)*.776)}
  .txt{flex:none;width:100%;padding:2px 8px 0;text-align:center}
  .txt h3{font-size:21px}
  .txt p{font-size:17px;max-width:30em;margin-left:auto;margin-right:auto}
  .intro{padding:0 4px;font-size:17px}
}