/* ═══════════════════════════════════════════════════════════════
   AKSHAYAGUNA™  ·  style.css v4  ·  Production / Million-Dollar
   Crème de la Crème — Mobile-First  ·  Apple × Häfele × Luxury
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Jost:wght@100;200;300;400;500&family=DM+Mono:ital,wght@0,300;0,400;1,300&display=swap');

/* ─── Design Tokens ─── */
:root {
  /* Colour palette */
  --bg:        #080a08;
  --bg2:       #0d100d;
  --bg3:       #111411;
  --bg4:       #161b16;
  --green:     #3a6b30;
  --green-lt:  #5a9b4a;
  --white:     #f0ede8;
  --dim:       rgba(240,237,232,.52);
  --dim2:      rgba(240,237,232,.26);
  --dim3:      rgba(240,237,232,.10);
  --border:    rgba(240,237,232,.08);
  --border-h:  rgba(240,237,232,.22);

  /* Radius tokens */
  --r:         12px;
  --r-sm:      8px;
  --r-lg:      18px;

  /* Type */
  --serif:     'Cormorant Garamond', Georgia, serif;
  --sans:      'Jost', sans-serif;
  --mono:      'DM Mono', monospace;

  /* Easing */
  --spring:    cubic-bezier(.16,1,.3,1);
  --ease:      cubic-bezier(.45,0,.55,1);

  /* ─── Fluid type scale (clamp: mobile → desktop) ─── */
  --t-2xs:  clamp(.52rem,  1.3vw, .60rem);
  --t-xs:   clamp(.60rem,  1.4vw, .68rem);
  --t-sm:   clamp(.72rem,  1.6vw, .85rem);
  --t-md:   clamp(.88rem,  1.8vw, 1.00rem);
  --t-lg:   clamp(1.10rem, 2.5vw, 1.40rem);
  --t-xl:   clamp(1.30rem, 3.0vw, 1.75rem);
  --t-2xl:  clamp(1.60rem, 3.8vw, 2.60rem);
  --t-3xl:  clamp(2.00rem, 5.0vw, 3.20rem);
  --t-hero: clamp(2.60rem, 7.5vw, 6.80rem);

  /* ─── Fluid spacing scale ─── */
  --sp-xs:  clamp(.50rem,  1.5vw,  .80rem);
  --sp-sm:  clamp(.80rem,  2.0vw,  1.20rem);
  --sp-md:  clamp(1.20rem, 3.0vw,  1.80rem);
  --sp-lg:  clamp(1.80rem, 4.0vw,  2.80rem);
  --sp-xl:  clamp(2.50rem, 6.0vw,  4.50rem);
  --sp-2xl: clamp(3.50rem, 8.0vw,  7.00rem);
}

/* ─── Reset ─── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100% }
body {
  background:var(--bg); color:var(--white);
  font-family:var(--sans); font-weight:300;
  letter-spacing:.025em; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img { display:block; width:100%; height:100%; object-fit:cover }
a { color:inherit; text-decoration:none }
::selection { background:var(--green); color:#fff }
::-webkit-scrollbar { width:3px }
::-webkit-scrollbar-track { background:var(--bg) }
::-webkit-scrollbar-thumb { background:var(--green); border-radius:2px }

/* ─── Shared utilities ─── */
.label {
  font-size:var(--t-2xs); letter-spacing:.38em; text-transform:uppercase;
  color:var(--green-lt); font-weight:500;
}
.serif { font-family:var(--serif) }
.h2 {
  font-family:var(--serif);
  font-size:var(--t-3xl);
  font-weight:300; line-height:1.12;
}
.body { font-size:var(--t-sm); line-height:2; color:var(--dim); max-width:520px }
.divider { width:44px; height:1px; background:var(--green); margin:1.2rem 0 1.8rem; flex-shrink:0 }

/* ─── Buttons ─── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.82rem 2.0rem;
  font-size:var(--t-2xs); letter-spacing:.22em; text-transform:uppercase;
  font-family:var(--sans); font-weight:400; border:none; cursor:pointer;
  transition:all .4s var(--spring);
  border-radius:var(--r-sm); position:relative; overflow:hidden; white-space:nowrap;
}
.btn:active { transform:scale(.97) !important }
.btn-solid  { background:var(--green); color:var(--white) }
.btn-solid:hover {
  background:var(--green-lt); transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(58,107,48,.4);
}
.btn-ghost { background:transparent; color:var(--white); border:1px solid var(--border) }
.btn-ghost:hover {
  border-color:var(--border-h); transform:translateY(-2px);
  background:rgba(240,237,232,.04);
}

/* ═══════════════════
   NAVIGATION
═══════════════════ */
nav {
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem clamp(1.2rem,5vw,4rem);
  background:rgba(8,10,8,.88);
  backdrop-filter:blur(24px) saturate(1.5);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);
  border-bottom:1px solid var(--border);
  transition:padding .5s var(--spring), background .5s, box-shadow .5s;
}
nav.scrolled {
  padding:.72rem clamp(1.2rem,5vw,4rem);
  background:rgba(8,10,8,.97);
  box-shadow:0 1px 0 var(--border), 0 4px 24px rgba(0,0,0,.5);
}
.brand { display:flex; flex-direction:column; line-height:1; gap:3px; min-width:0 }
.brand-name {
  font-family:var(--serif); font-size:clamp(.95rem,2.2vw,1.25rem); font-weight:600;
  color:var(--green-lt); letter-spacing:.12em; transition:color .3s; white-space:nowrap;
}
.brand:hover .brand-name { color:var(--white) }
.brand-sub {
  font-size:clamp(.40rem,1vw,.52rem); font-weight:200; letter-spacing:.24em;
  color:var(--dim2); text-transform:uppercase; white-space:nowrap;
}
.nav-links { display:flex; gap:clamp(1.2rem,2.5vw,2.4rem); list-style:none; align-items:center }
.nav-links a {
  font-size:var(--t-2xs); letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim); transition:all .3s; padding-bottom:3px;
  border-bottom:1px solid transparent; white-space:nowrap;
}
.nav-links a:hover, .nav-links a.active { color:var(--white); border-color:var(--green-lt) }
.nav-cta {
  padding:.50rem 1.2rem !important;
  background:var(--green) !important; color:var(--white) !important;
  border:none !important; border-bottom:none !important;
  border-radius:var(--r-sm) !important; font-size:var(--t-2xs) !important;
  transition:all .4s var(--spring) !important;
}
.nav-cta:hover {
  background:var(--green-lt) !important; transform:translateY(-1px) !important;
  box-shadow:0 4px 20px rgba(58,107,48,.4) !important;
}

/* Hamburger */
.hamburger {
  display:none; flex-direction:column; gap:5px; cursor:pointer;
  padding:7px; border-radius:6px; background:none; border:none;
  transition:background .3s; flex-shrink:0;
}
.hamburger:hover { background:rgba(255,255,255,.06) }
.hamburger span {
  width:22px; height:1px; background:var(--white); display:block;
  transition:all .4s var(--spring); transform-origin:center;
}
.hamburger.open span:nth-child(1) { transform:translateY(6px) rotate(45deg) }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0) }
.hamburger.open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg) }

/* Mobile full-screen overlay */
.mobile-nav {
  display:none; position:fixed; inset:0; z-index:899;
  background:rgba(8,10,8,.98); backdrop-filter:blur(30px);
  flex-direction:column; align-items:center; justify-content:center;
  gap:1.4rem; padding:2rem;
}
.mobile-nav.open { display:flex }
.mobile-nav a {
  font-size:var(--t-sm); letter-spacing:.22em; text-transform:uppercase;
  color:var(--dim); transition:all .35s; padding:.65rem 2.5rem;
  border-radius:var(--r-sm); width:100%; max-width:300px; text-align:center;
  border:1px solid transparent;
}
.mobile-nav a:hover { color:var(--green-lt); background:rgba(58,107,48,.08); border-color:var(--border) }

/* ═══════════════════
   LAYOUT
═══════════════════ */
main { padding-top:60px }
section { padding:var(--sp-2xl) clamp(1.2rem,5vw,4rem); border-top:1px solid var(--border) }

/* ═══════════════════
   HERO
═══════════════════ */
.hero {
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 clamp(1.2rem,5vw,4rem);
  position:relative; overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 90% at 78% 18%, rgba(58,107,48,.30) 0%, rgba(58,107,48,.05) 55%, transparent 75%),
    radial-gradient(ellipse 55% 65% at 12% 78%, rgba(58,107,48,.18) 0%, transparent 58%),
    radial-gradient(ellipse 45% 45% at 50% 50%, rgba(58,107,48,.07) 0%, transparent 70%),
    var(--bg);
  animation:bgBreath 9s ease-in-out infinite alternate;
  will-change:opacity;
}
@keyframes bgBreath { 0%{opacity:1} 100%{opacity:.78} }

.hero-lines {
  position:absolute; right:7vw; top:8%; bottom:8%;
  display:flex; gap:8px; pointer-events:none; z-index:1;
}
.hero-lines span {
  width:1px; background:var(--border); display:block;
  transform:scaleY(0); transform-origin:bottom;
  animation:lineGrow 1.6s var(--spring) forwards;
}
.hero-lines span:nth-child(1){height:100%;animation-delay:1s}
.hero-lines span:nth-child(2){height:70%;margin-top:auto;animation-delay:1.2s}
.hero-lines span:nth-child(3){height:40%;margin-top:auto;animation-delay:1.4s}
@keyframes lineGrow { to { transform:scaleY(1) } }

.hero-content { position:relative; z-index:2; max-width:780px; padding-bottom:var(--sp-xl) }

.hero-eyebrow {
  font-size:var(--t-2xs); letter-spacing:.38em; text-transform:uppercase;
  color:var(--green-lt); margin-bottom:var(--sp-md);
  display:flex; align-items:center; gap:.8rem;
  opacity:0; animation:slideUp .9s .3s var(--spring) forwards;
}
.hero-eyebrow::before { content:''; width:28px; height:1px; background:var(--green-lt); flex-shrink:0 }

.hero h1 {
  font-family:var(--serif);
  font-size:var(--t-hero);
  font-weight:300; line-height:1.02; letter-spacing:.02em; margin-bottom:.3em;
  opacity:0; animation:slideUp 1s .5s var(--spring) forwards;
}
.hero h1 em { font-style:italic; color:var(--green-lt) }

.hero-sub {
  font-size:var(--t-2xs); letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim); margin-bottom:var(--sp-lg);
  border-left:2px solid var(--green); padding-left:1rem; line-height:2;
  opacity:0; animation:slideUp .9s .7s var(--spring) forwards;
}
.hero-btns {
  display:flex; gap:.8rem; flex-wrap:wrap;
  opacity:0; animation:slideUp .9s .9s var(--spring) forwards;
}

.scroll-hint {
  position:absolute; bottom:clamp(2.5vh,4vh,5vh); left:clamp(1.2rem,5vw,4rem); z-index:2;
  display:flex; align-items:center; gap:.8rem;
  font-size:.54rem; letter-spacing:.3em; text-transform:uppercase; color:var(--dim2);
  opacity:0; animation:slideUp .9s 1.3s var(--spring) forwards;
}
.scroll-hint-bar { width:36px; height:1px; background:var(--dim3); position:relative; overflow:hidden }
.scroll-hint-bar::after {
  content:''; position:absolute; inset:0; background:var(--green-lt);
  animation:sweep 2.4s ease-in-out infinite; transform:translateX(-100%);
}
@keyframes sweep {
  0%{transform:translateX(-100%)} 50%{transform:translateX(0)} 100%{transform:translateX(110%)}
}

/* ═══════════════════
   ABOUT
═══════════════════ */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-xl); align-items:center }
.about-right { border-left:1px solid var(--border); padding-left:var(--sp-xl) }

.stat { margin-bottom:var(--sp-lg) }
.stat-num {
  font-family:var(--sans); font-size:clamp(2.4rem,5vw,4rem); font-weight:100;
  color:var(--green-lt); line-height:1; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; transition:color .4s;
}
.stat:hover .stat-num { color:var(--white) }
.stat-label {
  font-size:var(--t-2xs); letter-spacing:.22em; text-transform:uppercase;
  color:var(--dim); margin-top:6px; font-weight:400;
}
.addr-block {
  margin-top:var(--sp-md); padding-top:var(--sp-md);
  border-top:1px solid var(--border);
  font-size:var(--t-sm); line-height:2.1; color:var(--dim);
}
.addr-block strong {
  color:var(--white); font-weight:400; display:block; margin-bottom:.4rem;
  letter-spacing:.1em; font-size:var(--t-2xs); text-transform:uppercase;
}

/* ═══════════════════
   HOME PRODUCT GRID
═══════════════════ */
.prod-header {
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:var(--sp-xl); flex-wrap:wrap; gap:1rem;
}
.prod-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:2px; background:var(--border);
  border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden;
}
.prod-card {
  background:var(--bg3); display:flex; flex-direction:column;
  position:relative; overflow:hidden; cursor:pointer;
  transition:background .4s var(--spring);
}
.prod-card:hover { background:var(--bg4) }
.prod-card::after {
  content:''; position:absolute; bottom:0; left:0;
  width:0; height:2px; background:var(--green-lt);
  transition:width .5s var(--spring);
}
.prod-card:hover::after { width:100% }
.prod-img { width:100%; aspect-ratio:4/3; overflow:hidden; background:var(--bg2); position:relative; flex-shrink:0 }
.prod-img img { transition:transform .8s var(--spring) }
.prod-card:hover .prod-img img { transform:scale(1.06) }
.prod-img::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 100%,rgba(58,107,48,.22) 0%,transparent 70%);
  opacity:0; transition:opacity .4s;
}
.prod-card:hover .prod-img::after { opacity:1 }
.prod-img-empty {
  width:100%; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.8rem;
  color:rgba(240,237,232,.12); font-size:.55rem;
  letter-spacing:.2em; text-transform:uppercase; text-align:center; padding:1.5rem;
}
.prod-img-empty svg { width:34px; height:34px }
.prod-body { padding:clamp(1.1rem,2vw,1.8rem) clamp(1.1rem,2vw,2rem) clamp(1.3rem,2.5vw,2.2rem); flex:1 }
.prod-num { font-family:var(--mono); font-size:.6rem; color:var(--green-lt); letter-spacing:.14em; margin-bottom:.7rem; font-weight:300 }
.prod-name {
  font-family:var(--serif); font-size:clamp(1rem,2vw,1.4rem); font-weight:400;
  margin-bottom:.45rem; line-height:1.2; transition:color .3s;
}
.prod-card:hover .prod-name { color:var(--white) }
.prod-desc { font-size:var(--t-sm); color:var(--dim); line-height:1.85 }

/* ═══════════════════
   VISION STRIP
═══════════════════ */
.vision { background:var(--bg2); position:relative; overflow:hidden }
.vision::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 70% at 25% 50%,rgba(58,107,48,.12) 0%,transparent 65%),
    radial-gradient(ellipse 50% 50% at 80% 50%,rgba(58,107,48,.07) 0%,transparent 65%);
}
.vision-inner { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-xl); align-items:center }
.vision-quote {
  font-family:var(--serif); font-size:clamp(1.1rem,2.6vw,2.2rem);
  font-weight:300; font-style:italic; line-height:1.55;
  border-left:2px solid var(--green); padding-left:var(--sp-md);
  color:var(--white); position:relative; z-index:1;
}

/* ═══════════════════
   BRAND LOGOS
═══════════════════ */
.brand-row { display:flex; gap:.8rem; flex-wrap:wrap; margin-top:2rem; align-items:stretch }
.brand-logo {
  height:52px; padding:0 1.4rem; min-width:90px;
  border:1px solid var(--border); border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  transition:all .4s var(--spring); background:transparent; position:relative; overflow:hidden;
}
.brand-logo::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.04) 50%,transparent 70%);
  transform:translateX(-100%); transition:transform .6s;
}
.brand-logo:hover { border-color:var(--green-lt); background:rgba(58,107,48,.05); transform:translateY(-2px) }
.brand-logo:hover::before { transform:translateX(100%) }
.brand-logo img { width:auto; max-height:24px; object-fit:contain; filter:brightness(0) invert(1); opacity:.5; transition:opacity .35s }
.brand-logo:hover img { opacity:.9 }
.brand-logo-text { font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; color:var(--dim); white-space:nowrap; font-weight:400; transition:color .3s }
.brand-logo:hover .brand-logo-text { color:var(--white) }
.clients-label { font-size:var(--t-2xs); letter-spacing:.32em; color:var(--green-lt); text-transform:uppercase; margin:2.5rem 0 .8rem }
.client-row { display:flex; gap:.8rem; flex-wrap:wrap }
.client-chip {
  padding:.65rem 1.4rem; border:1px solid var(--border); border-radius:var(--r-sm);
  font-size:var(--t-2xs); letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
  transition:all .3s;
}
.client-chip:hover { border-color:var(--border-h); color:var(--white) }

/* ═══════════════════
   CONNECT CARDS
═══════════════════ */
.links-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2.5rem }
.link-card {
  border:1px solid var(--border); padding:2.2rem 1.8rem 3.2rem;
  display:block; position:relative; border-radius:var(--r);
  transition:all .4s var(--spring); background:transparent; overflow:hidden;
}
.link-card::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 100%,rgba(58,107,48,.12) 0%,transparent 70%);
  opacity:0; transition:opacity .4s;
}
.link-card:hover { border-color:var(--green-lt); transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.4) }
.link-card:hover::after { opacity:1 }
.link-card-label { font-size:var(--t-2xs); letter-spacing:.3em; text-transform:uppercase; color:var(--green-lt); margin-bottom:.8rem }
.link-card-title { font-family:var(--serif); font-size:clamp(1.1rem,2vw,1.4rem); font-weight:300; margin-bottom:.5rem; transition:color .3s }
.link-card:hover .link-card-title { color:var(--white) }
.link-card-desc { font-size:var(--t-sm); color:var(--dim); line-height:1.8 }
.link-card-arrow {
  position:absolute; bottom:1.6rem; right:1.8rem; font-size:1rem; color:var(--green-lt);
  transition:transform .35s var(--spring), opacity .3s; opacity:.7;
}
.link-card:hover .link-card-arrow { transform:translate(5px,-5px); opacity:1 }

/* ═══════════════════
   WHATSAPP FORM
═══════════════════ */
.wa-section-grid { display:grid; grid-template-columns:1fr 1fr; gap:6vw; align-items:center }
.wa-form-wrap {
  background:var(--bg2); border:1px solid var(--border); padding:clamp(1.5rem,3vw,3rem);
  border-radius:var(--r); transition:border-color .4s, box-shadow .4s;
}
.wa-form-wrap:focus-within {
  border-color:rgba(90,155,74,.3);
  box-shadow:0 0 0 1px rgba(90,155,74,.1), 0 8px 40px rgba(0,0,0,.3);
}
.wa-form-title { font-family:var(--serif); font-size:var(--t-xl); font-weight:300; margin-bottom:.5rem }
.wa-form-sub { font-size:var(--t-sm); color:var(--dim); line-height:1.9; margin-bottom:1.8rem }
.wa-input-row { display:flex; border-radius:var(--r-sm); overflow:hidden }
.wa-prefix {
  background:var(--bg3); border:1px solid var(--border); border-right:none;
  padding:0 1rem; font-size:var(--t-sm); color:var(--dim);
  display:flex; align-items:center; white-space:nowrap; letter-spacing:.05em;
}
.wa-input {
  flex:1; min-width:0; background:var(--bg3); border:1px solid var(--border); border-left:none;
  padding:.95rem 1.1rem; font-size:var(--t-sm); font-family:var(--sans);
  color:var(--white); outline:none; transition:border-color .3s; letter-spacing:.05em;
  -webkit-appearance:none;
}
.wa-input::placeholder { color:rgba(240,237,232,.18) }
.wa-input:focus { border-color:var(--green-lt) }
.wa-btn {
  width:100%; margin-top:.9rem; padding:1rem;
  background:var(--green); color:var(--white); border:none;
  font-family:var(--sans); font-size:var(--t-2xs); letter-spacing:.22em; text-transform:uppercase;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:.7rem;
  transition:all .4s var(--spring); border-radius:var(--r-sm);
}
.wa-btn:hover { background:var(--green-lt); transform:translateY(-2px); box-shadow:0 6px 24px rgba(58,107,48,.4) }
.wa-btn:active { transform:scale(.97) }
.wa-btn svg { width:17px; height:17px; fill:currentColor; flex-shrink:0 }
.wa-note { font-size:.58rem; color:var(--dim2); margin-top:.9rem; letter-spacing:.05em; line-height:1.8 }

/* ═══════════════════
   PAGE HERO (inner pages)
═══════════════════ */
.page-hero {
  min-height:clamp(38vh,45vh,52vh); display:flex; flex-direction:column;
  justify-content:flex-end; padding:0 clamp(1.2rem,5vw,4rem) clamp(3rem,6vh,5rem);
  position:relative; overflow:hidden;
}
.page-hero-bg {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 75% 85% at 70% 20%,rgba(58,107,48,.26) 0%,rgba(58,107,48,.04) 55%,transparent 72%),
    radial-gradient(ellipse 45% 55% at 15% 80%,rgba(58,107,48,.14) 0%,transparent 60%),
    var(--bg);
  animation:bgBreath 9s ease-in-out infinite alternate;
}
.page-hero-content { position:relative; z-index:2 }
.page-hero h1 {
  font-family:var(--serif); font-size:clamp(2rem,6vw,5rem);
  font-weight:300; line-height:1.05; margin-top:.8rem;
}

/* ═══════════════════
   PRODUCTS — FULL CARDS
═══════════════════ */
.products-full-grid {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:2px; background:var(--border);
  border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden;
}
.prod-full-card {
  background:var(--bg3); display:flex; flex-direction:row;
  overflow:hidden; transition:background .4s var(--spring); position:relative;
}
.prod-full-card::after {
  content:''; position:absolute; bottom:0; left:0;
  width:0; height:2px; background:var(--green-lt);
  transition:width .5s var(--spring);
}
.prod-full-card:hover::after { width:100% }
.prod-full-card:hover { background:var(--bg4) }
.prod-full-img {
  width:clamp(120px,22vw,220px); flex-shrink:0;
  overflow:hidden; background:var(--bg2); position:relative;
}
.prod-full-img img { width:100%; height:100%; transition:transform .7s var(--spring) }
.prod-full-card:hover .prod-full-img img { transform:scale(1.06) }
.prod-img-ph {
  width:100%; height:100%; min-height:160px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem; color:rgba(240,237,232,.12);
  font-size:.52rem; letter-spacing:.2em; text-transform:uppercase; text-align:center; padding:1.2rem;
}
.prod-img-ph svg { width:28px; height:28px; opacity:.35 }
.prod-full-body {
  padding:clamp(1.4rem,3vw,2.4rem) clamp(1.2rem,2.5vw,2.2rem); flex:1;
  display:flex; flex-direction:column; justify-content:center;
}
.prod-full-tag {
  font-family:var(--mono); font-size:var(--t-2xs); letter-spacing:.2em;
  text-transform:uppercase; color:var(--green-lt); margin-bottom:.9rem; font-weight:300;
}
.prod-full-name {
  font-family:var(--serif); font-size:clamp(1.2rem,2.5vw,1.75rem); font-weight:400;
  line-height:1.15; margin-bottom:.7rem; transition:color .3s;
}
.prod-full-card:hover .prod-full-name { color:var(--white) }
.prod-full-desc { font-size:var(--t-sm); color:var(--dim); line-height:1.9 }

/* ═══════════════════
   CONTACT PAGE
═══════════════════ */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:6vw; align-items:start }
.contact-detail { margin-bottom:2rem }
.contact-detail-label { font-size:var(--t-2xs); letter-spacing:.3em; text-transform:uppercase; color:var(--green-lt); margin-bottom:.5rem }
.contact-detail-value { font-family:var(--serif); font-size:clamp(.95rem,2vw,1.15rem); font-weight:300; line-height:1.7 }
.contact-detail-value a { transition:color .3s }
.contact-detail-value a:hover { color:var(--green-lt) }

.contact-actions { display:flex; flex-direction:column; gap:.65rem; margin-top:2rem }
.cta-btn {
  display:flex; align-items:center; gap:1rem; padding:1.05rem 1.5rem;
  border:1px solid var(--border); border-radius:var(--r);
  font-family:var(--sans); font-size:var(--t-2xs); letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim); background:transparent; cursor:pointer;
  transition:all .45s var(--spring); text-decoration:none; position:relative; overflow:hidden;
}
.cta-btn::before {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--green);
  transform:scaleY(0); transform-origin:bottom; transition:transform .4s var(--spring);
}
.cta-btn:hover {
  border-color:rgba(90,155,74,.5); color:var(--white);
  background:rgba(58,107,48,.07); transform:translateX(6px);
  box-shadow:0 4px 20px rgba(0,0,0,.3);
}
.cta-btn:hover::before { transform:scaleY(1) }
.cta-btn:active { transform:translateX(3px) scale(.98) }
.cta-btn-icon {
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg3); flex-shrink:0;
  transition:background .4s, transform .4s var(--spring);
}
.cta-btn:hover .cta-btn-icon { background:var(--green); transform:scale(1.1) rotate(-5deg) }
.cta-btn-icon svg { width:17px; height:17px; fill:currentColor; opacity:.8; transition:opacity .3s }
.cta-btn:hover .cta-btn-icon svg { opacity:1 }
.cta-btn-text { flex:1; min-width:0 }
.cta-btn-title { font-size:var(--t-2xs); letter-spacing:.18em; text-transform:uppercase; font-weight:500; transition:color .3s }
.cta-btn-sub { font-size:.57rem; color:var(--dim2); margin-top:.2rem; letter-spacing:.06em; text-transform:none; font-weight:300; transition:color .3s }
.cta-btn:hover .cta-btn-sub { color:var(--dim) }
.cta-btn-arrow { font-size:.9rem; opacity:.4; transition:opacity .3s, transform .35s var(--spring); margin-left:auto; flex-shrink:0 }
.cta-btn:hover .cta-btn-arrow { opacity:1; transform:translateX(5px) }
.cta-btn-primary { background:var(--green); color:var(--white); border-color:var(--green) }
.cta-btn-primary::before { display:none }
.cta-btn-primary:hover {
  background:var(--green-lt); border-color:var(--green-lt);
  transform:translateY(-3px) translateX(0);
  box-shadow:0 8px 32px rgba(58,107,48,.45);
}
.cta-btn-primary .cta-btn-icon { background:rgba(0,0,0,.2) }
.cta-btn-primary .cta-btn-sub { color:rgba(255,255,255,.6) }
.cta-btn-primary .cta-btn-arrow { opacity:.7 }

/* ═══════════════════
   FOOTER
═══════════════════ */
footer {
  border-top:1px solid var(--border); padding:2rem clamp(1.2rem,5vw,4rem);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
}
.footer-brand { font-family:var(--serif); font-size:clamp(.85rem,2vw,1rem); letter-spacing:.16em; color:var(--green-lt) }
.footer-copy { font-size:.54rem; color:var(--dim2); letter-spacing:.12em }
.footer-links { display:flex; gap:1.8rem; flex-wrap:wrap; align-items:center }
.footer-links a { font-size:.57rem; letter-spacing:.18em; text-transform:uppercase; color:var(--dim2); transition:color .3s }
.footer-links a:hover { color:var(--green-lt) }

/* ═══════════════════
   SCROLL REVEAL
═══════════════════ */
.fade-up {
  opacity:0; transform:translateY(28px);
  transition:opacity .85s var(--spring), transform .85s var(--spring);
}
.fade-up.visible { opacity:1; transform:translateY(0) }
.fade-left {
  opacity:0; transform:translateX(28px);
  transition:opacity .85s var(--spring), transform .85s var(--spring);
}
.fade-left.visible { opacity:1; transform:translateX(0) }
.scale-in {
  opacity:0; transform:scale(.95) translateY(12px);
  transition:opacity .75s var(--spring), transform .75s var(--spring);
}
.scale-in.visible { opacity:1; transform:scale(1) translateY(0) }

/* Stagger helpers */
.d1{transition-delay:.07s} .d2{transition-delay:.14s} .d3{transition-delay:.21s}
.d4{transition-delay:.28s} .d5{transition-delay:.35s} .d6{transition-delay:.42s}

/* ═══════════════════
   KEYFRAMES
═══════════════════ */
@keyframes slideUp {
  from { opacity:0; transform:translateY(26px) }
  to   { opacity:1; transform:translateY(0) }
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes shake {
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)} 40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)} 80%{transform:translateX(4px)}
}

/* ════════════════════════════════════════════
   RESPONSIVE — Tablet  (≤ 960 px)
════════════════════════════════════════════ */
@media (max-width:960px) {
  .prod-grid           { grid-template-columns:repeat(2,1fr) }
  .products-full-grid  { grid-template-columns:1fr }
  .prod-full-img       { width:clamp(130px,28vw,200px) }
  .links-grid          { grid-template-columns:repeat(2,1fr) }
}

/* ════════════════════════════════════════════
   RESPONSIVE — Mobile  (≤ 680 px)
════════════════════════════════════════════ */
@media (max-width:680px) {
  /* ── Nav ── */
  .nav-links   { display:none }
  .hamburger   { display:flex }
  .brand-sub   { display:none }  /* too tight on small screens */

  /* ── Layout ── */
  main { padding-top:56px }
  section { padding:clamp(2.5rem,7vw,4.5rem) clamp(1rem,5vw,1.5rem) }

  /* ── Hero ── */
  .hero { padding:0 clamp(1rem,5vw,1.5rem); min-height:100svh }
  .hero-content { padding-bottom:clamp(2.5rem,7vh,5rem) }
  .hero-lines  { display:none }
  .hero-sub    { letter-spacing:.13em; line-height:1.85 }
  .hero-btns   { flex-direction:column; align-items:flex-start }
  .hero-btns .btn { width:100%; max-width:280px; justify-content:center }
  .scroll-hint { display:none }

  /* ── All 2-col → 1-col ── */
  .about-grid, .vision-inner, .contact-grid, .wa-section-grid {
    grid-template-columns:1fr;
  }
  .about-right {
    border-left:none; border-top:1px solid var(--border);
    padding-left:0; padding-top:var(--sp-lg);
  }

  /* ── Grids ── */
  .prod-grid          { grid-template-columns:1fr }
  .products-full-grid { grid-template-columns:1fr }
  .links-grid         { grid-template-columns:1fr }

  /* ── Full product cards — stack ── */
  .prod-full-card { flex-direction:column }
  .prod-full-img  { width:100%; aspect-ratio:16/9; min-height:auto }

  /* ── Forms ── */
  .wa-form-wrap { padding:1.6rem }

  /* ── Contact ── */
  .contact-actions { gap:.55rem }
  .cta-btn { padding:.9rem 1.2rem }
  .cta-btn-icon { width:34px; height:34px }

  /* ── Footer ── */
  footer { flex-direction:column; align-items:flex-start; gap:.75rem; padding:1.6rem clamp(1rem,5vw,1.5rem) }
  .footer-links { gap:1.2rem }
}

/* ════════════════════════════════════════════
   RESPONSIVE — Small phones  (≤ 400 px)
════════════════════════════════════════════ */
@media (max-width:400px) {
  .btn { padding:.78rem 1.4rem }
  .hero-btns .btn { max-width:100% }
  .prod-header { flex-direction:column; align-items:flex-start }
  .prod-header .btn-ghost { align-self:flex-start }
  .wa-form-wrap { padding:1.3rem }
  .cta-btn-title { font-size:.6rem }
  .cta-btn-sub   { font-size:.54rem }
  .client-chip   { padding:.55rem 1rem }
  .vision-quote  { padding-left:.9rem }
}

/* ═══════════════════════════════
   Reduced-motion — respect OS pref
═══════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}