/* =====================================================================
   Univer Food Ltd. — main stylesheet
   Palette: forest green (brand), amber (accent), warm neutrals
   ===================================================================== */

:root{
  --green:#16794a;
  --green-dark:#0e5533;
  --green-darker:#0a3f26;
  --green-soft:#eaf4ee;
  --amber:#f2a03d;
  --amber-dark:#d9821b;
  --red:#d64533;
  --ink:#16241c;
  --body:#4a5c52;
  --muted:#7a8b82;
  --line:#e2eae5;
  --soft:#f5f9f6;
  --white:#fff;
  --radius:12px;
  --radius-lg:18px;
  --shadow-sm:0 2px 8px rgba(14,85,51,.06);
  --shadow:0 10px 30px rgba(14,85,51,.10);
  --shadow-lg:0 22px 60px rgba(14,85,51,.16);
  --container:1200px;
  /* the header row (logo + nine menu items + CTA) needs more width than the
     1200px content column, so it gets its own wider container */
  --container-wide:1560px;
  --header-h:84px;
  --ease:cubic-bezier(.4,0,.2,1);
  --font:"Poppins","Hind Siliguri",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;scroll-behavior:smooth;
  /* stop anchor jumps (brands.html#ruposhi, media.html#tvc) from parking the
     target heading underneath the sticky header */
  scroll-padding-top:calc(var(--header-h) + 24px);
}
body{
  margin:0;font-family:var(--font);font-size:16px;line-height:1.75;
  color:var(--body);background:var(--white);-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;border:0}
/* inline icons default to text size; components below override where needed */
svg{width:1em;height:1em;fill:currentColor;flex:none}
a{color:var(--green);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--amber-dark)}
ul,ol{margin:0;padding:0}
h1,h2,h3,h4,h5,h6{margin:0 0 .6em;color:var(--ink);font-weight:700;line-height:1.25;letter-spacing:-.01em}
h1{font-size:clamp(2rem,4.4vw,3.1rem)}
h2{font-size:clamp(1.6rem,3.1vw,2.35rem)}
h3{font-size:clamp(1.15rem,2vw,1.45rem)}
h4{font-size:1.08rem}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:4px}

/* keyboard users can jump the nine-item menu instead of tabbing through it */
.skip-link{
  position:absolute;left:16px;top:-60px;z-index:1000;background:var(--green);color:#fff;
  padding:12px 22px;border-radius:0 0 10px 10px;font-size:.9rem;font-weight:600;
  transition:top .2s var(--ease);
}
.skip-link:focus{top:0;color:#fff}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}
.section{padding:88px 0}
.section--soft{background:var(--soft)}
.section--green{background:var(--green-dark);color:#cfe4d8}
.section--green h2,.section--green h3{color:#fff}
.section--tight{padding:60px 0}
.text-center{text-align:center}
.mt-40{margin-top:40px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- section heading ---------- */
.sec-head{max-width:760px;margin:0 auto 52px;text-align:center}
.sec-head--left{margin-left:0;text-align:left}
.eyebrow{
  display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--amber-dark);margin-bottom:12px;
}
.section--green .eyebrow{color:var(--amber)}
.sec-head p{color:var(--muted);font-size:1.02rem}
.section--green .sec-head p{color:#a9c8b8}
.rule{display:block;width:64px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--green),var(--amber));margin:18px auto 0}
.sec-head--left .rule{margin-left:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:13px 28px;border:2px solid transparent;
  border-radius:60px;font-size:.94rem;font-weight:600;letter-spacing:.01em;cursor:pointer;
  transition:all .25s var(--ease);white-space:nowrap;font-family:inherit;
}
.btn--primary{background:var(--green);color:#fff;box-shadow:0 8px 22px rgba(22,121,74,.28)}
.btn--primary:hover{background:var(--green-dark);color:#fff;transform:translateY(-2px);box-shadow:0 12px 28px rgba(22,121,74,.36)}
.btn--amber{background:var(--amber);color:#3a2708;box-shadow:0 8px 22px rgba(242,160,61,.35)}
.btn--amber:hover{background:var(--amber-dark);color:#fff;transform:translateY(-2px)}
.btn--ghost{border-color:rgba(255,255,255,.6);color:#fff;background:transparent}
.btn--ghost:hover{background:#fff;color:var(--green-dark);border-color:#fff}
.btn--outline{border-color:var(--green);color:var(--green);background:transparent}
.btn--outline:hover{background:var(--green);color:#fff}
.btn--sm{padding:9px 20px;font-size:.85rem}
.btn__arrow{transition:transform .25s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}

/* =====================================================================
   TOP BAR
   ===================================================================== */
.topbar{background:var(--green-darker);color:#a9c8b8;font-size:.82rem;line-height:40px}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.topbar__list{display:flex;align-items:center;gap:24px;list-style:none;flex-wrap:wrap}
.topbar a{color:#a9c8b8}
.topbar a:hover{color:var(--amber)}
.topbar__list li{display:flex;align-items:center;gap:7px}
.topbar__list svg{width:14px;height:14px;fill:var(--amber);flex:none}
.social{display:flex;align-items:center;gap:8px;list-style:none}
.social a{
  display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.09);transition:all .22s var(--ease);
}
.social a:hover{background:var(--amber);transform:translateY(-2px)}
.social svg{width:13px;height:13px;fill:#cfe4d8}
.social a:hover svg{fill:#3a2708}

/* =====================================================================
   HEADER / NAV
   ===================================================================== */
.header{
  position:sticky;top:0;z-index:900;background:#fff;
  border-bottom:1px solid var(--line);transition:box-shadow .25s var(--ease);
}
.header.is-stuck{box-shadow:0 6px 24px rgba(14,85,51,.10)}
/* top bar matches the header so the contact line stays aligned with the logo */
.topbar .container,.header .container{max-width:var(--container-wide)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--header-h)}
.logo{flex:none}
.logo img{height:52px;width:auto}

.nav{margin-left:auto}
.nav__list{display:flex;align-items:center;gap:0;list-style:none}
.nav__list > li{position:relative}
.nav__list > li > a{
  display:flex;align-items:center;gap:5px;padding:10px 11px;border-radius:8px;
  font-size:.87rem;font-weight:600;color:var(--ink);white-space:nowrap;
  transition:all .2s var(--ease);
}
.nav__list > li > a::after{
  content:"";position:absolute;left:11px;right:11px;bottom:2px;height:2px;
  background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease);
}
.nav__list > li:hover > a,
.nav__list > li.is-active > a{color:var(--green)}
.nav__list > li:hover > a::after,
.nav__list > li.is-active > a::after{transform:scaleX(1)}
.caret{width:9px;height:9px;fill:currentColor;opacity:.6;transition:transform .25s var(--ease)}
.nav__list > li:hover .caret{transform:rotate(180deg)}

.submenu{
  position:absolute;top:calc(100% + 8px);left:0;min-width:238px;list-style:none;
  background:#fff;border-radius:12px;border:1px solid var(--line);box-shadow:var(--shadow);
  padding:10px;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:all .25s var(--ease);
}
.submenu::before{content:"";position:absolute;top:-8px;left:0;right:0;height:8px}
.nav__list > li:hover .submenu,
.nav__list > li:focus-within .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu a{
  display:block;padding:9px 14px;border-radius:8px;font-size:.86rem;font-weight:500;color:var(--body);
}
.submenu a:hover{background:var(--green-soft);color:var(--green);padding-left:19px}

.nav-cta{flex:none}
.burger{
  display:none;width:46px;height:46px;border:1px solid var(--line);background:#fff;border-radius:10px;
  cursor:pointer;padding:0;place-items:center;
}
.burger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;position:relative;transition:all .25s var(--ease)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:all .25s var(--ease)}
.burger span::before{top:-6px}
.burger span::after{top:6px}
body.nav-open .burger span{background:transparent}
body.nav-open .burger span::before{top:0;transform:rotate(45deg)}
body.nav-open .burger span::after{top:0;transform:rotate(-45deg)}

/* =====================================================================
   HERO SLIDER
   ===================================================================== */
.hero{position:relative;overflow:hidden;background:var(--green-dark)}
.hero__track{position:relative;height:clamp(420px,62vh,640px)}
/* True crossfade: the outgoing slide stays fully opaque underneath until the
   incoming one has finished fading in on top, so the background never shows
   through mid-transition. */
.hero__slide{
  position:absolute;inset:0;z-index:1;opacity:1;visibility:visible;
  transition:opacity 0s var(--ease) .8s,visibility 0s var(--ease) .8s;
}
.hero__slide:not(.is-active){opacity:0;visibility:hidden}
.hero__slide.is-active{
  z-index:2;opacity:1;visibility:visible;
  transition:opacity .8s var(--ease),visibility 0s;
}
.hero__slide img{width:100%;height:100%;object-fit:cover}
.hero__slide::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,42,25,.86) 0%,rgba(8,42,25,.55) 48%,rgba(8,42,25,.18) 100%);
}
.hero__caption{position:absolute;inset:0;z-index:2;display:flex;align-items:center}
.hero__box{max-width:640px;color:#fff}
.hero__box .eyebrow{color:var(--amber)}
/* only the first slide carries the page's <h1>; the others are marketing
   lines styled to match, so the document keeps exactly one top-level heading */
/* .hero__box .hero__title, not .hero__title — it has to outrank the
   .hero__box p rule below, which would otherwise style it as body text */
.hero__box h1,.hero__box .hero__title{
  color:#fff;margin:0 0 18px;max-width:none;font-weight:700;line-height:1.25;
  letter-spacing:-.01em;font-size:clamp(2rem,4.4vw,3.1rem);
}
.hero__box p{font-size:1.06rem;color:#d5e7dd;margin-bottom:30px;max-width:520px}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px}
/* The start state lives in the keyframes with a `backwards` fill, not on the
   element itself. If the animation never runs the text simply shows, instead
   of being stranded at opacity 0. Inactive slides are already hidden by the
   slide's own opacity, so the children need no hiding of their own. */
.hero__slide.is-active .hero__box > *{animation:heroIn .7s var(--ease) backwards}
.hero__slide.is-active .hero__box > *:nth-child(1){animation-delay:.15s}
.hero__slide.is-active .hero__box > *:nth-child(2){animation-delay:.28s}
.hero__slide.is-active .hero__box > *:nth-child(3){animation-delay:.41s}
.hero__slide.is-active .hero__box > *:nth-child(4){animation-delay:.54s}
@keyframes heroIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* arrows sit bottom-right so they never overlap the caption text */
.hero__nav{
  position:absolute;bottom:24px;z-index:3;width:46px;height:46px;
  border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.22);border-radius:50%;
  display:grid;place-items:center;cursor:pointer;transition:all .25s var(--ease);
}
.hero__nav:hover{background:var(--amber);border-color:var(--amber)}
.hero__nav svg{width:16px;height:16px;fill:#fff}
.hero__nav:hover svg{fill:#3a2708}
.hero__nav--prev{right:84px}
.hero__nav--next{right:24px}
.hero__dots{position:absolute;left:50%;bottom:38px;transform:translateX(-50%);z-index:3;display:flex;gap:10px}
.hero__dots button{
  width:34px;height:5px;border:0;border-radius:4px;background:rgba(255,255,255,.4);cursor:pointer;
  padding:0;transition:all .25s var(--ease);
}
.hero__dots button.is-active{background:var(--amber);width:52px}

/* =====================================================================
   PAGE BANNER (inner pages)
   ===================================================================== */
/* The banner's height comes from its own content plus padding. It used to be a
   fixed-height image with the title absolutely positioned on top, which meant
   the title could be clipped whenever the text grew (zoom, a longer page name,
   a larger user font) while the breadcrumb below it stayed visible. */
.banner{position:relative;background:var(--green-dark);overflow:hidden}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.banner__inner{position:relative;z-index:1;padding:clamp(52px,6vw,84px) 0}
.banner h1{color:#fff;margin-bottom:8px}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;list-style:none;font-size:.85rem;color:#bcd6c8}
.breadcrumb a{color:var(--amber)}
.breadcrumb li+li::before{content:"/";margin-right:8px;opacity:.5}

/* =====================================================================
   GRID HELPERS
   ===================================================================== */
.grid{display:grid;gap:26px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split--wide-left{grid-template-columns:1.15fr .85fr}
/* image first, text second — done with grid order rather than direction:rtl,
   which also flipped punctuation and bullet placement inside the text */
.split--flip > *:first-child{order:2}
.split--flip > *:last-child{order:1}

/* =====================================================================
   FEATURE / VALUE CARDS
   ===================================================================== */
.feature{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px 28px;
  transition:all .3s var(--ease);position:relative;overflow:hidden;
}
.feature::before{
  content:"";position:absolute;left:0;top:0;height:4px;width:100%;
  background:linear-gradient(90deg,var(--green),var(--amber));transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.feature:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.feature:hover::before{transform:scaleX(1)}
.feature__icon{
  width:58px;height:58px;border-radius:16px;background:var(--green-soft);display:grid;place-items:center;
  margin-bottom:20px;transition:all .3s var(--ease);
}
.feature__icon svg{width:26px;height:26px;fill:var(--green)}
.feature:hover .feature__icon{background:var(--green);transform:rotate(-6deg)}
.feature:hover .feature__icon svg{fill:#fff}
.feature h3{font-size:1.15rem;margin-bottom:10px}
.feature p{font-size:.93rem;color:var(--muted);margin:0}

/* =====================================================================
   BRAND CARDS
   ===================================================================== */
.brand-card{
  display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:8px;text-align:center;transition:all .3s var(--ease);overflow:hidden;
}
.brand-card:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:transparent}
.brand-card img{width:100%;border-radius:12px;background:var(--soft)}
.brand-card__body{padding:14px 12px 18px}
.brand-card__body h3{font-size:1.05rem;margin-bottom:4px}
.brand-card__body p{font-size:.82rem;color:var(--muted);margin:0}
.brand-card__link{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:.82rem;font-weight:600;color:var(--green);
}

/* =====================================================================
   PRODUCT CARDS / CAROUSEL
   ===================================================================== */
.carousel{position:relative}
.carousel__viewport{overflow:hidden}
.carousel__track{display:flex;gap:24px;transition:transform .55s var(--ease);will-change:transform}
.carousel__track > *{flex:0 0 calc((100% - 72px)/4)}
.carousel__ctrl{display:flex;justify-content:center;gap:12px;margin-top:34px}
.carousel__ctrl button{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;
  display:grid;place-items:center;cursor:pointer;transition:all .25s var(--ease);
}
.carousel__ctrl button:hover:not(:disabled){background:var(--green);border-color:var(--green)}
.carousel__ctrl button:hover:not(:disabled) svg{fill:#fff}
.carousel__ctrl button:disabled{opacity:.35;cursor:not-allowed}
.carousel__ctrl svg{width:15px;height:15px;fill:var(--green)}

.product{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  transition:all .3s var(--ease);display:flex;flex-direction:column;
}
.product:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.product__media{position:relative;overflow:hidden;background:var(--soft)}
.product__media img{width:100%;transition:transform .5s var(--ease)}
.product:hover .product__media img{transform:scale(1.06)}
.product__tag{
  position:absolute;top:14px;left:14px;background:var(--amber);color:#3a2708;
  font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 12px;border-radius:40px;
}
.product__body{padding:18px 20px 22px;text-align:center}
.product__body h4{margin-bottom:4px;font-size:1rem}
.product__body span{font-size:.82rem;color:var(--muted)}

/* filter bar */
.filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:44px}
.filters button{
  padding:10px 22px;border-radius:40px;border:1px solid var(--line);background:#fff;cursor:pointer;
  font-family:inherit;font-size:.86rem;font-weight:600;color:var(--body);transition:all .25s var(--ease);
}
.filters button:hover{border-color:var(--green);color:var(--green)}
.filters button.is-active{background:var(--green);border-color:var(--green);color:#fff}
.is-hidden{display:none!important}

/* =====================================================================
   COUNTERS
   ===================================================================== */
.counters{background:var(--green-dark);position:relative;overflow:hidden}
.counters::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 15% 20%,rgba(242,160,61,.18),transparent 45%),
             radial-gradient(circle at 85% 80%,rgba(255,255,255,.10),transparent 45%);
}
.counters .container{position:relative;z-index:1}
.counter{text-align:center;padding:14px 10px}
.counter__num{
  font-size:clamp(2.1rem,4vw,3rem);font-weight:700;color:#fff;line-height:1.1;
  display:flex;align-items:baseline;justify-content:center;gap:2px;
}
.counter__num em{font-style:normal;color:var(--amber)}
.counter__label{
  font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#9cc0ae;margin-top:8px;
}

/* =====================================================================
   ABOUT / MEDIA BLOCKS
   ===================================================================== */
.media-frame{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.media-frame img{width:100%}
.play{
  position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,50,30,.35);
  border:0;cursor:pointer;width:100%;
}
.play span{
  width:78px;height:78px;border-radius:50%;background:var(--amber);display:grid;place-items:center;
  box-shadow:0 0 0 0 rgba(242,160,61,.6);animation:pulse 2.2s infinite;
}
.play svg{width:24px;height:24px;fill:#3a2708;margin-left:4px}
@keyframes pulse{70%{box-shadow:0 0 0 26px rgba(242,160,61,0)}100%{box-shadow:0 0 0 0 rgba(242,160,61,0)}}

.check-list{list-style:none;display:grid;gap:12px;margin:24px 0}
.check-list li{display:flex;gap:12px;align-items:flex-start;font-size:.95rem}
.check-list svg{width:20px;height:20px;fill:var(--green);flex:none;margin-top:3px}
.section--green .check-list svg{fill:var(--amber)}

/* =====================================================================
   NEWS
   ===================================================================== */
.news{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  transition:all .3s var(--ease);display:flex;flex-direction:column;
}
.news:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.news__media{overflow:hidden;position:relative}
.news__media img{width:100%;transition:transform .55s var(--ease)}
.news:hover .news__media img{transform:scale(1.07)}
.news__date{
  position:absolute;left:16px;bottom:16px;background:#fff;border-radius:10px;padding:8px 14px;
  text-align:center;box-shadow:var(--shadow-sm);
}
.news__date strong{display:block;font-size:1.15rem;color:var(--green);line-height:1}
.news__date span{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.news__body{padding:22px 24px 26px;flex:1;display:flex;flex-direction:column}
.news__body h3{font-size:1.08rem;margin-bottom:8px}
.news__body h3 a{color:inherit}
.news__body h3 a:hover{color:var(--green)}
.news__body p{font-size:.9rem;color:var(--muted);margin-bottom:16px}
.news__more{margin-top:auto;font-size:.83rem;font-weight:600;display:inline-flex;gap:6px;align-items:center}

/* =====================================================================
   CTA STRIP
   ===================================================================== */
.cta{
  background:linear-gradient(120deg,var(--green) 0%,var(--green-dark) 60%,#0a3f26 100%);
  color:#d5e7dd;position:relative;overflow:hidden;
}
.cta::after{
  content:"";position:absolute;right:-60px;top:-60px;width:340px;height:340px;border-radius:50%;
  background:rgba(242,160,61,.14);
}
.cta__inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap}
.cta h2{color:#fff;margin-bottom:6px}
.cta p{margin:0;color:#a9c8b8}

/* =====================================================================
   CONTENT / TABLES
   ===================================================================== */
.prose h2{margin-top:1.4em}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.3em;color:var(--green)}
.prose ul{margin:0 0 1.2em 1.2em}
.prose li{margin-bottom:.45em}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;min-width:600px;font-size:.92rem;background:#fff}
th,td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line)}
th{background:var(--green-soft);color:var(--green-dark);font-weight:700;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--soft)}

.quote{
  border-left:4px solid var(--amber);background:var(--soft);padding:26px 30px;border-radius:0 12px 12px 0;
  font-size:1.05rem;font-style:italic;color:var(--ink);
}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none}
.chips li{
  background:#fff;border:1px solid var(--line);border-radius:40px;padding:9px 18px;font-size:.86rem;
  font-weight:500;transition:all .25s var(--ease);
}
.chips li:hover{background:var(--green);color:#fff;border-color:var(--green);transform:translateY(-2px)}

/* ---------- accordion ---------- */
.acc{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.acc + .acc{margin-top:14px}
.acc__head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 24px;background:none;border:0;cursor:pointer;text-align:left;
  font-family:inherit;font-size:1rem;font-weight:600;color:var(--ink);
}
.acc__head svg{width:14px;height:14px;fill:var(--green);flex:none;transition:transform .3s var(--ease)}
.acc.is-open .acc__head{color:var(--green)}
.acc.is-open .acc__head svg{transform:rotate(180deg)}
.acc__body{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.acc__body > div{padding:0 24px 22px;font-size:.94rem;color:var(--muted)}

/* ---------- forms ---------- */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:36px;box-shadow:var(--shadow-sm)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field--full{grid-column:1/-1}
.field label{font-size:.84rem;font-weight:600;color:var(--ink)}
.field input,.field select,.field textarea{
  width:100%;padding:13px 16px;border:1px solid var(--line);border-radius:10px;
  font-family:inherit;font-size:.94rem;color:var(--ink);background:#fff;
  transition:all .2s var(--ease);
}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--green);box-shadow:0 0 0 4px rgba(22,121,74,.10);
}
.form-note{font-size:.82rem;color:var(--muted);margin-top:14px}
.form-status{margin-top:16px;padding:14px 18px;border-radius:10px;font-size:.9rem;display:none}
.form-status.is-ok{display:block;background:var(--green-soft);color:var(--green-dark);border:1px solid #bfe0cd}
.form-status.is-error{display:block;background:#fdeeec;color:#a8321f;border:1px solid #f3c9c2}
.form-note code{background:var(--green-soft);color:var(--green-dark);padding:2px 6px;border-radius:5px;font-size:.85em}
/* honeypot: off-screen for people, still fillable by bots */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- contact info cards ---------- */
.info-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px 26px;
  display:flex;gap:18px;transition:all .3s var(--ease);
}
.info-card:hover{box-shadow:var(--shadow);border-color:transparent;transform:translateY(-4px)}
.info-card__icon{width:50px;height:50px;border-radius:14px;background:var(--green-soft);display:grid;place-items:center;flex:none}
.info-card__icon svg{width:22px;height:22px;fill:var(--green)}
.info-card h4{margin-bottom:4px}
.info-card p,.info-card a{font-size:.92rem;color:var(--muted);margin:0}
.info-card a:hover{color:var(--green)}
.map-embed{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);height:420px}
.map-embed iframe{width:100%;height:100%;border:0;display:block}

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer{background:var(--green-darker);color:#9cc0ae;padding-top:72px;font-size:.92rem}
.footer h4{
  color:#fff;font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:22px;
  position:relative;padding-bottom:12px;
}
.footer h4::after{content:"";position:absolute;left:0;bottom:0;width:36px;height:3px;border-radius:3px;background:var(--amber)}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:44px;padding-bottom:56px}
.footer__logo{height:56px;width:auto;margin-bottom:20px}
.footer a{color:#9cc0ae}
.footer a:hover{color:var(--amber)}
.footer__links{list-style:none;display:grid;gap:11px}
.footer__links a{display:inline-flex;align-items:center;gap:8px;transition:padding-left .22s var(--ease)}
.footer__links a::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--amber);flex:none}
.footer__links a:hover{padding-left:5px}
.footer__contact{list-style:none;display:grid;gap:16px}
.footer__contact li{display:flex;gap:12px;align-items:flex-start}
.footer__contact svg{width:17px;height:17px;fill:var(--amber);flex:none;margin-top:5px}
.footer .social{margin-top:24px}
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.10);padding:22px 0;display:flex;justify-content:space-between;
  align-items:center;gap:18px;flex-wrap:wrap;font-size:.85rem;
}
.footer__bottom ul{display:flex;gap:22px;list-style:none;flex-wrap:wrap}

.to-top{
  position:fixed;right:24px;bottom:24px;z-index:800;width:46px;height:46px;border-radius:50%;
  background:var(--green);border:0;cursor:pointer;display:grid;place-items:center;
  box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(14px);
  transition:all .3s var(--ease);
}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--amber)}
.to-top svg{width:16px;height:16px;fill:#fff}
.to-top:hover svg{fill:#3a2708}

/* =====================================================================
   REVEAL ON SCROLL
   ===================================================================== */
/* only hidden when JS is available to reveal them again */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
/* below this width the desktop nav row can no longer hold nine items */
@media (max-width:1100px){
  .footer__grid{grid-template-columns:1fr 1fr;gap:38px}
  .split,.split--wide-left{grid-template-columns:1fr;gap:38px}
  /* stacked: text before image, whichever order the desktop layout used */
  .split--flip > *:first-child,.split--flip > *:last-child{order:0}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .carousel__track > *{flex:0 0 calc((100% - 24px)/2)}
  .section{padding:64px 0}
  .hero__nav{display:none}
}

/* =====================================================================
   COMPACT NAVIGATION
   Driven by measurement rather than a fixed pixel breakpoint: main.js
   compares what the header row needs against the room it has and sets
   .nav-cta-off / .nav-compact on <html>. Page zoom, a longer menu label
   or a different font therefore cannot push the nav off the right edge.
   The no-JS fallback is at the end of this block.
   ===================================================================== */
html.nav-cta-off .nav-cta{display:none}

/* one step before the burger: buy width back from the menu itself */
html.nav-tight .nav__list > li > a{padding:10px 8px;font-size:.8rem}
html.nav-tight .nav__list > li > a::after{left:8px;right:8px}
html.nav-tight .logo img{height:44px}

html.nav-compact{--header-h:72px}
html.nav-compact .burger{display:grid;position:relative;z-index:960}
html.nav-compact .nav{
  position:fixed;top:0;right:0;width:min(340px,86vw);height:100dvh;background:#fff;
  box-shadow:-10px 0 40px rgba(0,0,0,.16);padding:88px 20px 30px;overflow-y:auto;
  transform:translateX(100%);z-index:950;margin:0;
  transition:transform .35s var(--ease);
  /* No visibility toggle here. It inherits to every link along with its
     transition delay, so the links stayed hidden ~60ms after the panel had
     opened and focus() silently failed. The closed panel is taken out of the
     tab order with the inert attribute instead (see initNav), and the
     overflow-x:clip below stops it adding any horizontal scroll. */
}
html.nav-compact body.nav-open .nav{transform:none}
/* the off-canvas panel parks outside the viewport; clip (not hidden) so it
   adds no horizontal scroll while the sticky header keeps working */
html.nav-compact,html.nav-compact body{overflow-x:clip}
html.nav-compact body.nav-open{overflow:hidden}
html.nav-compact body.nav-open::after{content:"";position:fixed;inset:0;background:rgba(10,40,25,.5);z-index:940}
/* .header is a sticky stacking context, so the panel inside it can only
   clear the dim overlay if the header itself is lifted above it */
html.nav-compact body.nav-open .header{z-index:960}
html.nav-compact .nav__list{flex-direction:column;align-items:stretch;gap:2px}
html.nav-compact .nav__list > li > a{padding:13px 14px;font-size:.95rem;justify-content:space-between}
html.nav-compact .nav__list > li > a::after{display:none}
html.nav-compact .submenu{
  position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
  border-left:2px solid var(--line);border-radius:0;margin:0 0 6px 14px;padding:0 0 0 6px;
  display:none;
}
html.nav-compact .nav__list > li.is-open .submenu{display:block}
html.nav-compact .nav__list > li.is-open .caret{transform:rotate(180deg)}

/* No JS: a burger nothing can open would be worse than no burger, so the
   menu simply wraps onto its own row under the logo. */
@media (max-width:1260px){
  html:not(.js) .nav-cta{display:none}
}
@media (max-width:1100px){
  html:not(.js) .header__inner{height:auto;flex-wrap:wrap;padding:14px 0;gap:14px}
  html:not(.js) .nav{width:100%;margin:0}
  html:not(.js) .nav__list{flex-wrap:wrap;justify-content:center}
  html:not(.js) .submenu{display:none}
}
@media (max-width:860px){
  .topbar__inner{justify-content:center}
  .topbar__list--contact{display:none}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr;gap:34px}
  .cta__inner{flex-direction:column;text-align:center}
}
@media (max-width:620px){
  .container{padding:0 18px}
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .carousel__track > *{flex:0 0 100%}
  .form-grid{grid-template-columns:1fr}
  .form-card{padding:26px 20px}
  .section{padding:52px 0}
  .hero__box p{font-size:.98rem}
  .footer__bottom{flex-direction:column;text-align:center}
  .logo img{height:42px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
}

@media print{
  .topbar,.header,.footer,.to-top,.hero__nav,.hero__dots{display:none!important}
  body{color:#000}
}