/* ============================================================
   MOOD OF WOOD — design tokens
   Wood + poured resin. The "pour line" (irregular wavy seam)
   is the signature motif, reused as divider, underline, border.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,300..700,0..100&family=Work+Sans:wght@400;500;600&family=Montserrat:wght@600;700;800&display=swap');

:root{
  --linen:#FAF7F1;      /* page background — soft, near-white */
  --bone:#FFFFFF;       /* card / panel background */
  --sand:#F1EADC;       /* subtle alternating section tint */
  --ink:#203d2e;        /* primary text — soft charcoal-brown, not black */
  --ink-soft:#898a68;   /* secondary text — muted taupe */
  --walnut:#cecca1;     /* wood accent — used lightly, borders/small blocks */
  --walnut-dark:#bcb88a;/* reserved for small text/logo accents only */
  --amber:#CC9A5A;      /* poured resin, warm — softened */
  --amber-deep:#A87838;
  --pine:#5C8C7C;       /* poured resin, cool — softened, used sparingly */
  --pine-light:#7BAE9D;
  --line:rgba(44,33,23,0.10);

  --display: 'Fraunces', serif;
  --wordmark: 'Montserrat', sans-serif;
  --body: 'Work Sans', sans-serif;

  --wrap: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--linen);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{
  font-family:var(--display);
  font-weight:600;
  line-height:1.08;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.4rem,5vw,4.2rem); font-optical-sizing:auto;}
h2{font-size:clamp(1.8rem,3.2vw,2.6rem);}
h3{font-size:1.25rem;}
p{margin:0 0 1em;color:var(--ink-soft);}
.eyebrow{
  font-family:var(--body);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--amber-deep);
  font-weight:600;
  display:inline-block;
  margin-bottom:.9em;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px;}
:focus-visible{outline:3px solid var(--pine-light);outline-offset:3px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
  html{scroll-behavior:auto;}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  padding:.85em 1.6em;
  border-radius:2px;
  font-family:var(--body);font-weight:600;font-size:.92rem;
  letter-spacing:.02em;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--walnut-dark);color:var(--bone);}
.btn-primary:hover{background:var(--ink);}
.btn-outline{border-color:var(--ink);color:var(--ink);}
.btn-outline:hover{background:var(--ink);color:var(--bone);}
.btn-amber{background:var(--amber);color:var(--walnut-dark);}
.btn-amber:hover{background:var(--amber-deep);color:var(--bone);}

/* ---------- nav — dark, contrasting header ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(36,26,18,.96);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;max-width:var(--wrap);margin:0 auto;
}
.logo{
  font-family:var(--wordmark);font-weight:700;font-size:1.25rem;
  letter-spacing:.02em;color:var(--bone);
  display:flex;align-items:baseline;gap:.35em;
}
.logo span{color:var(--amber);}
.nav-links{display:flex;gap:2.2rem;list-style:none;margin:0;padding:0;}
.nav-links a{
  font-size:.92rem;font-weight:500;color:rgba(250,247,241,.62);
  position:relative;padding-bottom:4px;
}
.nav-links a:hover,.nav-links a.active{color:var(--bone);}
.nav-links a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;
  background:linear-gradient(90deg,var(--amber),var(--pine-light));
  border-radius:3px;
}
.nav-cta{display:flex;align-items:center;gap:1.4rem;}
.nav-cta .btn-outline{border-color:rgba(250,247,241,.35);color:var(--bone);}
.nav-cta .btn-outline:hover{background:var(--bone);color:var(--ink);border-color:var(--bone);}
.nav-toggle{display:none;background:none;border:0;font-size:1.6rem;cursor:pointer;color:var(--bone);}

@media (max-width:840px){
  .nav-links{
    position:absolute;top:100%;left:0;right:0;
    background:#241a12;
    flex-direction:column;gap:0;
    max-height:0;overflow:hidden;
    border-bottom:1px solid rgba(255,255,255,.08);
    transition:max-height .3s ease;
  }
  .nav-links.open{max-height:320px;}
  .nav-links a{display:block;padding:16px 28px;border-top:1px solid rgba(255,255,255,.08);}
  .nav-toggle{display:block;}
  .nav-cta .btn-outline{display:none;}
}

/* ---------- pour divider (signature motif) ---------- */
.pour-divider{width:100%;height:44px;display:block;margin:0;}
.pour-divider path{fill:none;stroke-width:3;}

/* ---------- hero — light, minimal ---------- */
.hero{
  position:relative;overflow:hidden;background:var(--linen);
  padding:120px 0 96px;display:flex;align-items:center;
}
.hero-panel{
  position:absolute;top:-10%;right:-8%;width:52%;height:120%;z-index:0;
  background:
    radial-gradient(closest-side, rgba(204,154,90,.28), transparent 72%),
    radial-gradient(closest-side at 70% 70%, rgba(92,140,124,.22), transparent 70%);
  filter:blur(2px);
}
.hero-wood,.hero-resin{display:none;} /* replaced by soft .hero-panel glow */
.hero-content{
  position:relative;z-index:2;color:var(--ink);
  max-width:640px;padding:0 28px;margin:0 auto;
}
.hero-rule{width:64px;height:3px;border-radius:3px;margin-bottom:1.6rem;
  background:linear-gradient(90deg,var(--amber),var(--pine));}
.hero-content .eyebrow{color:var(--amber-deep);}
.hero-content h1{color:var(--ink);}
.hero-content p{color:var(--ink-soft);font-size:1.08rem;max-width:520px;}
.hero-cta{display:flex;gap:1rem;margin-top:1.6rem;flex-wrap:wrap;}

/* ---------- sections ---------- */
section{padding:88px 0;}
.section-head{max-width:620px;margin-bottom:3rem;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem;}
.pillar{border-top:3px solid var(--amber);padding-top:1.2rem;}
.pillar h3{margin-bottom:.4em;}
@media (max-width:780px){.pillars{grid-template-columns:1fr;}}

/* process (real sequence -> numbered) */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;counter-reset:step;}
.step{position:relative;padding-top:2.4rem;}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:var(--display);font-size:1rem;font-weight:600;color:var(--pine);
  position:absolute;top:0;left:0;
}
.step h3{font-size:1.05rem;}
@media (max-width:900px){.process{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.process{grid-template-columns:1fr;}}

/* placeholder media block — swap for real photography */
.ph{
  aspect-ratio:4/3;border-radius:2px;position:relative;overflow:hidden;
  display:flex;align-items:flex-end;
  background:linear-gradient(135deg,#D8CBAE,#B99A6C 55%,#8C6A3F);
}
.ph.resin{background:linear-gradient(135deg,#3B7A6B,#1F4D42 55%,#12241E);}
.ph.wood{background:linear-gradient(135deg,#8C6A3F,#5A3E2B 55%,#2E1F16);}
.ph span{
  font-family:var(--body);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.88);background:rgba(0,0,0,.28);
  padding:8px 12px;width:100%;
}

/* product / feature grid */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;}
.grid-2{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;}
@media (max-width:900px){.grid-3{grid-template-columns:1fr 1fr;} .grid-2{grid-template-columns:1fr;}}
@media (max-width:560px){.grid-3{grid-template-columns:1fr;}}

.card{background:var(--bone);border:1px solid var(--line);border-radius:2px;overflow:hidden;transition:transform .2s ease, box-shadow .2s ease;}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 34px rgba(35,24,16,.14);}
.card-body{padding:1.3rem 1.4rem 1.5rem;}
.card-body .tag{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--pine);font-weight:600;}
.card-body h3{margin:.4em 0 .3em;}
.card-body p{font-size:.92rem;margin-bottom:.9em;}

/* reviews / testimonials */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;}
@media (max-width:860px){.reviews{grid-template-columns:1fr;}}
.review-card{background:var(--bone);border:1px solid var(--line);border-radius:2px;padding:1.8rem 1.7rem;}
.review-stars{color:var(--amber);font-size:.9rem;letter-spacing:.15em;margin-bottom:.9em;}
.review-quote{font-family:var(--display);font-size:1.05rem;font-style:italic;color:var(--ink-soft);margin-bottom:1.1em;line-height:1.5;}
.review-name{font-size:.82rem;font-weight:600;color:var(--ink);}
.review-name span{display:block;font-weight:400;color:var(--ink-soft);font-size:.78rem;margin-top:.15em;}

/* dark cta band */
.band{background:var(--sand);color:var(--ink);text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.band h2{color:var(--ink);}
.band p{color:var(--ink-soft);max-width:520px;margin-left:auto;margin-right:auto;}

/* footer */
footer.site{background:var(--linen);border-top:1px solid var(--line);padding:56px 0 28px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.4rem;margin-bottom:2.4rem;}
.footer-grid h4{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:1em;}
.footer-grid ul{list-style:none;margin:0;padding:0;}
.footer-grid li{margin-bottom:.6em;font-size:.92rem;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:1.6rem;font-size:.82rem;color:var(--ink-soft);flex-wrap:wrap;gap:1rem;}
@media (max-width:780px){.footer-grid{grid-template-columns:1fr;}}

/* filter tabs (produse page) */
.tabs{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:2.4rem;}
.tab{
  padding:.55em 1.1em;border:1.5px solid var(--line);border-radius:20px;
  font-size:.86rem;font-weight:500;cursor:pointer;background:transparent;color:var(--ink-soft);
  transition:all .15s ease;
}
.tab.active,.tab:hover{border-color:var(--ink);color:var(--ink);}
.tab.active{background:var(--ink);color:var(--bone);border-color:var(--ink);}

/* about page timeline / values */
.values{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem 2.4rem;}
@media (max-width:700px){.values{grid-template-columns:1fr;}}

/* contact page */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.4rem;align-items:start;}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;}}
.field{margin-bottom:1.3rem;}
.field label{display:block;font-size:.82rem;font-weight:600;margin-bottom:.4em;color:var(--ink-soft);}
.field input,.field textarea{
  width:100%;padding:.85em 1em;border:1.5px solid var(--line);border-radius:2px;
  font-family:var(--body);font-size:.95rem;background:var(--bone);color:var(--ink);
}
.field textarea{min-height:130px;resize:vertical;}
.field input:focus,.field textarea:focus{border-color:var(--pine-light);outline:none;}
.info-block{margin-bottom:1.8rem;}
.info-block .eyebrow{margin-bottom:.3em;}
.info-block p{margin:0;}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1;transform:none;}