/* ============================================================
   Fornetti România — site multi-pagină
   Paletă oficială: portocaliu + magenta + maro închis
   Culori per categorie produse (ca pe site-ul original)
   ============================================================ */

:root {
  --orange: #EC6A1E;
  --orange-deep: #C9520C;
  --magenta: #D6166B;
  --magenta-deep: #B01057;
  --maroon: #6E1430;
  --cream: #FFF6EC;
  --cream-2: #FBEAD6;
  --ink: #2A1A12;
  --ink-soft: #6B5443;
  --gold: #F4A622;
  --white: #fff;

  /* culori categorii */
  --c-mini: #EC6A1E;
  --c-panificatie: #2B9CC4;
  --c-bucata: #D6166B;
  --c-food: #16A89C;
  --c-donuts: #A4C520;

  --shadow-sm: 0 4px 14px rgba(42,26,18,.08);
  --shadow-md: 0 18px 50px rgba(42,26,18,.14);
  --shadow-lg: 0 30px 80px rgba(214,22,107,.18);

  --r: 16px;
  --r-lg: 26px;
  --max: 1200px;
  --ease: cubic-bezier(.22,1,.36,1);
  --topbar-h: 40px;
  --nav-h: 72px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:"Plus Jakarta Sans", system-ui, sans-serif;
  color:var(--ink); background:var(--cream); line-height:1.6;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
h1,h2,h3 { font-family:"Fraunces", Georgia, serif; line-height:1.05; letter-spacing:-.02em; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

.section-title { font-size:clamp(2rem,4.4vw,3.4rem); font-weight:900; color:var(--ink); }
.section-title--light { color:var(--white); }
.kicker { display:inline-block; font-weight:800; font-size:.8rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--orange); margin-bottom:.8rem; }
.kicker--light { color:var(--gold); }

/* ===== Buttons ===== */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:700; font-size:.95rem; padding:.9rem 1.6rem; border-radius:100px;
  cursor:pointer; border:2px solid transparent;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, color .3s;
  white-space:nowrap; }
.btn:hover { transform:translateY(-3px); }
.btn--solid { background:var(--orange); color:#fff; box-shadow:var(--shadow-md); }
.btn--solid:hover { background:var(--orange-deep); }
.btn--magenta { background:var(--magenta); color:#fff; box-shadow:var(--shadow-md); }
.btn--magenta:hover { background:var(--magenta-deep); }
.btn--ghost { border-color:currentColor; }
.btn--ghost:hover { background:var(--ink); color:var(--cream); border-color:var(--ink); }
.btn--full { width:100%; }

/* ============================================================ Loader */
.loader { position:fixed; inset:0; z-index:9999; background:var(--orange);
  display:grid; place-items:center; transition:opacity .6s ease, visibility .6s; }
.loader.is-done { opacity:0; visibility:hidden; }
.loader__mark { width:90px; height:90px; border-radius:24px; background:var(--cream);
  display:grid; place-items:center; font-family:"Fraunces",serif; font-weight:900;
  font-size:3rem; color:var(--orange); animation:pop 1s var(--ease) infinite alternate; }
@keyframes pop { from{transform:scale(.9) rotate(-4deg)} to{transform:scale(1.05) rotate(4deg)} }

/* ============================================================ Top utility bar */
.topbar { background:var(--maroon); color:#fff; height:var(--topbar-h);
  position:fixed; top:0; left:0; right:0; z-index:101; }
.topbar__inner { max-width:var(--max); height:100%; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:flex-end; gap:1rem; }
.topbar__social { display:flex; gap:.5rem; }
.topbar__social a { width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.14);
  display:grid; place-items:center; font-size:.7rem; font-weight:700; transition:.3s var(--ease); }
.topbar__social a:hover { background:#fff; color:var(--maroon); transform:translateY(-2px); }
.topbar__lang { display:flex; gap:.4rem; font-size:.78rem; font-weight:700; letter-spacing:.05em; }
.topbar__lang a { opacity:.6; } .topbar__lang a.is-active { opacity:1; color:var(--gold); }
.topbar__sep { opacity:.3; }

/* ============================================================ Main nav */
.nav { background:var(--orange); position:fixed; top:var(--topbar-h); left:0; right:0;
  z-index:100; height:var(--nav-h); transition:height .35s var(--ease), box-shadow .35s; }
.nav.is-scrolled { box-shadow:0 8px 28px rgba(42,26,18,.18); height:60px; }
.nav__inner { max-width:var(--max); height:100%; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; gap:1.2rem; }
.brand { display:flex; align-items:center; flex:none; }
.brand__logo { height:34px; width:auto; display:block; transition:height .35s var(--ease); }
.nav.is-scrolled .brand__logo { height:30px; }

.nav__links { display:flex; align-items:center; height:100%; margin-left:auto; }
.nav__item { position:relative; height:100%; display:flex; align-items:center; }
.nav__item > a { color:#fff; font-weight:700; font-size:.86rem; letter-spacing:.04em;
  text-transform:uppercase; padding:0 1rem; height:100%; display:flex; align-items:center;
  transition:background .25s, color .25s; cursor:pointer; }
.nav__item:hover > a, .nav__item.is-active > a { background:var(--magenta); color:#fff; }
.nav__item--has > a::after { content:"▾"; margin-left:.4rem; font-size:.7rem; opacity:.8; }

/* dropdown */
.dropdown { position:absolute; top:100%; left:0; min-width:300px; background:var(--magenta);
  padding:.6rem 0; box-shadow:var(--shadow-lg); opacity:0; visibility:hidden;
  transform:translateY(10px); transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  border-radius:0 0 12px 12px; }
.nav__item--has:hover .dropdown { opacity:1; visibility:visible; transform:none; }
.dropdown a { display:block; color:#fff; padding:.7rem 1.5rem; font-size:1rem; font-weight:500;
  white-space:nowrap; transition:background .2s, padding .2s; }
.dropdown a:hover { background:var(--magenta-deep); padding-left:1.8rem; }

.nav__b2b { background:var(--maroon); color:#fff; padding:.55rem 1.3rem; border-radius:100px;
  font-weight:800; font-size:.82rem; letter-spacing:.06em; margin-left:.6rem; transition:.3s var(--ease); }
.nav__b2b:hover { background:var(--magenta); transform:translateY(-2px); }

.nav__burger { display:none; flex-direction:column; gap:5px; background:none; border:0;
  cursor:pointer; padding:8px; margin-left:auto; }
.nav__burger span { width:26px; height:3px; background:#fff; border-radius:3px; transition:.3s; }
.nav__burger.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav__burger.is-open span:nth-child(2){opacity:0}
.nav__burger.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* spacer so content nu intră sub nav fix */
.app { padding-top:calc(var(--topbar-h) + var(--nav-h)); }
.view[hidden] { display:none; }

/* ============================================================ Hero + video */
/* strat video fix, în spatele întregului site */
.site-bg { position:fixed; inset:0; z-index:0; overflow:hidden; background:#1a0d08; }
.site-bg #ytplayer, .site-bg iframe { position:absolute; top:50%; left:50%;
  width:100vw; height:56.25vw; min-height:100vh; min-width:177.78vh;
  transform:translate(-50%,-50%); pointer-events:none; border:0; }
.app { position:relative; z-index:1; }

.hero { position:relative; min-height:calc(100svh - var(--topbar-h) - var(--nav-h));
  display:flex; align-items:center; overflow:hidden; padding:4rem 0; }
.hero__scrim { position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(150,62,12,.82) 0%, rgba(150,62,12,.34) 45%, rgba(26,13,8,.28) 100%),
    linear-gradient(0deg, rgba(26,13,8,.85), rgba(26,13,8,0) 45%); }
.hero__content { position:relative; z-index:2; max-width:var(--max); margin:0 auto; padding:0 24px; color:var(--cream); }
.hero__eyebrow { font-weight:700; letter-spacing:.2em; text-transform:uppercase; font-size:.82rem;
  color:var(--gold); margin-bottom:1.2rem; }
.hero__title { font-size:clamp(2.8rem,8vw,6rem); font-weight:900; color:#fff; text-shadow:0 8px 40px rgba(0,0,0,.4); }
.hero__title em { color:var(--gold); font-style:italic; }
.hero__lead { max-width:540px; margin:1.5rem 0 2.2rem; font-size:clamp(1rem,1.6vw,1.2rem); color:rgba(255,255,255,.92); }
.hero__lead strong { color:var(--gold); }
.hero__actions { display:flex; gap:1rem; flex-wrap:wrap; }
.hero__actions .btn--ghost { color:#fff; }
.hero__actions .btn--ghost:hover { background:#fff; color:var(--orange); border-color:#fff; }

.hero__sound { position:absolute; bottom:1.6rem; right:1.6rem; z-index:3; width:50px; height:50px;
  border-radius:50%; background:rgba(255,255,255,.15); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.3); color:#fff; cursor:pointer; display:grid; place-items:center;
  transition:background .3s, transform .3s; }
.hero__sound:hover { background:rgba(255,255,255,.3); transform:scale(1.08); }
.hero__sound svg { width:22px; height:22px; }
.hero__sound .icon-sound { display:none; }
.hero__sound.is-on .icon-mute { display:none; } .hero__sound.is-on .icon-sound { display:block; }

/* ============================================================ Stats */
.stats { background:var(--ink); color:var(--cream); padding:4.5rem 0 0; }
.stats__grid { max-width:var(--max); margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.stat { text-align:center; padding:1rem; }
.stat__num { font-family:"Fraunces",serif; font-size:clamp(2.4rem,5vw,3.8rem); font-weight:900; color:var(--gold); }
.stat__suffix { font-family:"Fraunces",serif; font-size:1.4rem; font-weight:700; color:var(--gold); margin-left:.2rem; }
.stat__label { display:block; margin-top:.4rem; color:rgba(255,246,236,.7); font-size:.9rem; }
.marquee { margin-top:3.5rem; overflow:hidden; border-top:1px solid rgba(255,255,255,.1);
  padding:1.2rem 0; background:var(--magenta); }
.marquee__track { display:inline-flex; align-items:center; gap:1.5rem; white-space:nowrap; animation:marquee 26s linear infinite; }
.marquee__track span { font-family:"Fraunces",serif; font-size:1.6rem; font-weight:700; color:var(--cream); }
.marquee__track i { color:var(--gold); font-style:normal; }
@keyframes marquee { to { transform:translateX(-50%); } }

/* ============================================================ About */
.about { max-width:var(--max); margin:0 auto; padding:7rem 24px;
  display:grid; grid-template-columns:1fr 1.1fr; gap:4rem; align-items:center; }
.about__media { position:relative; height:460px; }
.about__photo { position:absolute; border-radius:var(--r-lg); box-shadow:var(--shadow-md);
  background-size:cover; background-position:center; }
.about__photo--1 { inset:0 30% 25% 0;
  background-image:linear-gradient(135deg, rgba(236,106,30,.12), rgba(214,22,107,.12)), url("../assets/img/dupla-csokis.jpg"); }
.about__photo--2 { inset:35% 0 0 35%; border:6px solid var(--cream);
  background-image:linear-gradient(135deg, rgba(214,22,107,.12), rgba(236,106,30,.12)), url("../assets/img/kokuszoscsiga.jpg"); }
.about__badge { position:absolute; right:6%; bottom:8%; z-index:3; background:var(--magenta);
  color:#fff; border-radius:20px; padding:1rem 1.3rem; text-align:center; box-shadow:var(--shadow-lg); }
.about__badge strong { display:block; font-family:"Fraunces",serif; font-size:2.4rem; line-height:1; }
.about__badge span { font-size:.8rem; opacity:.9; }
.about__text p { color:var(--ink-soft); font-size:1.05rem; margin-top:1rem; }
.about__text strong { color:var(--ink); }
.about__values { list-style:none; margin-top:2rem; display:grid; gap:1rem; }
.about__values li { background:#fff; border-radius:var(--r); padding:1.1rem 1.3rem;
  box-shadow:var(--shadow-sm); border-left:4px solid var(--gold); font-size:.98rem; color:var(--ink-soft); }
.about__values span { display:block; font-family:"Fraunces",serif; font-weight:700; color:var(--orange);
  font-size:1.05rem; margin-bottom:.15rem; }

/* ============================================================ Products (teaser + grid) */
.products { background:linear-gradient(180deg, var(--cream), var(--cream-2)); padding:7rem 0; }
.products__head { max-width:var(--max); margin:0 auto; padding:0 24px; text-align:center; }
.products__sub { color:var(--ink-soft); margin-top:.7rem; font-size:1.05rem; }
.cat-tabs { max-width:var(--max); margin:2.5rem auto 0; padding:0 24px;
  display:flex; gap:.7rem; flex-wrap:wrap; justify-content:center; }
.cat-tab { border:2px solid var(--cream-2); background:#fff; color:var(--ink);
  padding:.65rem 1.3rem; border-radius:100px; font-weight:800; font-size:.92rem; cursor:pointer;
  transition:.3s var(--ease); text-transform:uppercase; letter-spacing:.02em; }
.cat-tab:hover { transform:translateY(-2px); }
.cat-tab.is-active { color:#fff; border-color:transparent; box-shadow:var(--shadow-md); }

.cards { max-width:var(--max); margin:2.5rem auto 0; padding:0 24px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.card { background:#fff; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease), box-shadow .4s; cursor:pointer;
  opacity:0; transform:translateY(20px) scale(.98); animation:cardin .5s var(--ease) forwards; }
@keyframes cardin { to { opacity:1; transform:none; } }
.card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.card__img { position:relative; aspect-ratio:1/1; overflow:hidden;
  background:linear-gradient(135deg, var(--cream-2), #fff); }
.card__img img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.card:hover .card__img img { transform:scale(1.07); }
.card__img--fallback { display:grid; place-items:center; }
.card__img--fallback img { display:none; }
.card__img--fallback::after { content:"🥐"; font-size:3.4rem; }
.card__tag { position:absolute; top:10px; left:10px; font-size:.68rem; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:#fff; padding:.25rem .6rem; border-radius:100px; }
.card__body { padding:1.1rem 1.2rem 1.4rem; }
.card__title { font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; font-size:1.02rem; }
.card__desc { color:var(--ink-soft); font-size:.85rem; margin-top:.3rem; }
.card__more { margin-top:.7rem; font-size:.8rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.04em; display:inline-flex; align-items:center; gap:.3rem; }

/* ============================================================ Modal produs */
.modal { position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:24px; }
.modal.is-open { display:flex; }
.modal__overlay { position:absolute; inset:0; background:rgba(26,13,8,.7); backdrop-filter:blur(4px);
  animation:fade .3s ease; }
@keyframes fade { from{opacity:0} to{opacity:1} }
.modal__box { position:relative; z-index:2; width:min(960px,100%); max-height:90vh; overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr; background:#fff; border-radius:20px;
  box-shadow:var(--shadow-lg); animation:pop-in .4s var(--ease); }
@keyframes pop-in { from{opacity:0; transform:scale(.94) translateY(20px)} to{opacity:1; transform:none} }
.modal__media { position:relative; background:#fff; display:grid; place-items:center; padding:2rem; }
.modal__media img { max-height:340px; object-fit:contain; filter:drop-shadow(0 20px 30px rgba(0,0,0,.18)); }
.modal__nav { position:absolute; bottom:1rem; left:50%; transform:translateX(-50%); display:flex; gap:.6rem; }
.modal__nav button { width:42px; height:42px; border-radius:50%; border:0; cursor:pointer;
  background:var(--cream-2); color:var(--ink); font-size:1.1rem; transition:.25s var(--ease); }
.modal__nav button:hover { background:var(--orange); color:#fff; transform:scale(1.08); }
.modal__panel { color:#fff; padding:2.2rem; overflow-y:auto; }
.modal__title { font-size:1.7rem; font-weight:900; text-transform:uppercase; margin-bottom:1.2rem; color:#fff; }
.modal__row { display:flex; justify-content:space-between; gap:1rem; padding:.45rem 0;
  border-bottom:1px solid rgba(255,255,255,.18); font-size:.95rem; }
.modal__row span:last-child { font-weight:800; white-space:nowrap; }
.modal__row--sub { padding-left:1rem; opacity:.92; font-size:.88rem; }
.modal__note { font-size:.82rem; opacity:.85; margin:.8rem 0 .4rem; }
.modal__alg { margin-top:1.1rem; font-size:.9rem; line-height:1.5; }
.modal__alg b { display:block; text-transform:uppercase; font-size:.72rem; letter-spacing:.08em; opacity:.85; margin-bottom:.2rem; }
.modal__close { position:absolute; top:14px; right:14px; z-index:3; width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.9); border:0; cursor:pointer; font-size:1.3rem; color:var(--magenta);
  display:grid; place-items:center; transition:.25s var(--ease); }
.modal__close:hover { background:#fff; transform:rotate(90deg); }

/* ============================================================ Community */
.community { position:relative; overflow:hidden; text-align:center; padding:7rem 24px; color:#fff;
  background:linear-gradient(120deg, var(--magenta-deep), var(--magenta), var(--orange) 140%);
  background-size:200% 200%; animation:gradientshift 12s ease infinite; }
@keyframes gradientshift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.community::before, .community::after { content:""; position:absolute; border-radius:50%; filter:blur(60px); opacity:.35; }
.community::before { width:340px; height:340px; background:var(--gold); top:-80px; left:-60px; animation:float 9s ease-in-out infinite; }
.community::after { width:300px; height:300px; background:#fff; bottom:-100px; right:-60px; animation:float 11s ease-in-out infinite reverse; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(28px)} }
.community__inner { position:relative; z-index:2; max-width:760px; margin:0 auto; }
.community__lead { margin:1.2rem auto 2rem; font-size:1.1rem; color:rgba(255,255,255,.92); }
.social-row { display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }
.social { padding:.8rem 1.5rem; border-radius:100px; font-weight:700; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(6px); transition:.3s var(--ease); }
.social:hover { background:#fff; color:var(--magenta); transform:translateY(-4px); }

/* ============================================================ Business teaser */
.business { max-width:var(--max); margin:0 auto; padding:7rem 24px;
  display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.business__text p { color:var(--ink-soft); font-size:1.05rem; margin-top:1rem; }
.business__cta { display:flex; gap:1rem; flex-wrap:wrap; margin-top:2rem; }
.business__cards { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.perk { background:#fff; border-radius:var(--r-lg); padding:1.6rem; box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s; border-top:4px solid var(--orange); }
.perk:nth-child(2){border-top-color:var(--magenta)} .perk:nth-child(3){border-top-color:var(--c-panificatie)}
.perk:nth-child(4){border-top-color:var(--c-food)}
.perk:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); }
.perk h3 { font-size:1.2rem; } .perk p { color:var(--ink-soft); font-size:.92rem; margin-top:.4rem; }

/* ============================================================ Career */
.career { max-width:var(--max); margin:0 auto 7rem; padding:0 24px; }
.career__inner { background:var(--ink); color:var(--cream); border-radius:var(--r-lg); padding:3rem;
  display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; box-shadow:var(--shadow-md); }
.career__inner .section-title { color:#fff; }
.career__inner p { color:rgba(255,246,236,.75); margin-top:.8rem; max-width:460px; }
.career__actions { display:flex; gap:1rem; flex-wrap:wrap; }
.career__actions .btn--ghost { color:var(--cream); }
.career__actions .btn--ghost:hover { background:var(--cream); color:var(--ink); border-color:var(--cream); }

/* ============================================================ Contact */
.contact { max-width:var(--max); margin:0 auto; padding:0 24px 7rem;
  display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.contact__list { list-style:none; margin-top:1.5rem; display:grid; gap:1rem; }
.contact__list li { background:#fff; border-radius:var(--r); padding:1rem 1.2rem; box-shadow:var(--shadow-sm);
  font-size:1rem; color:var(--ink); }
.contact__list a { color:var(--orange); font-weight:600; }
.contact__k { display:block; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:800; margin-bottom:.2rem; }

/* Form (shared) */
.frm { background:#fff; border-radius:var(--r-lg); padding:2.2rem; box-shadow:var(--shadow-md); display:grid; gap:1.2rem; }
.field { position:relative; }
.field input, .field textarea, .field select { width:100%; padding:1.1rem 1rem .5rem; border:2px solid var(--cream-2);
  border-radius:var(--r); font:inherit; background:var(--cream); color:var(--ink); transition:border .3s; resize:vertical; }
.field select { padding-top:1.1rem; padding-bottom:.6rem; }
.field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color:var(--orange); background:#fff; }
.field label { position:absolute; left:1rem; top:.95rem; color:var(--ink-soft); pointer-events:none;
  transition:.2s var(--ease); font-size:1rem; }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field.filled label { top:.35rem; font-size:.7rem; color:var(--orange); font-weight:700; }
.field--select label { top:.35rem; font-size:.7rem; color:var(--orange); font-weight:700; }
.check { display:flex; gap:.6rem; align-items:flex-start; font-size:.85rem; color:var(--ink-soft); }
.check input { margin-top:.25rem; accent-color:var(--orange); width:auto; }
.form-note { color:var(--orange); font-weight:700; text-align:center; }
.frm__grid2 { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }

/* ============================================================ Sub-page view */
.page-hero { position:relative; overflow:hidden; padding:4.5rem 24px 4rem; color:#fff; text-align:center;
  background:linear-gradient(120deg, var(--magenta-deep), var(--magenta)); background-size:200% 200%;
  animation:gradientshift 12s ease infinite; }
.page-hero::before { content:""; position:absolute; width:320px; height:320px; border-radius:50%;
  filter:blur(70px); opacity:.4; background:var(--gold); top:-100px; right:-60px; animation:float 10s ease-in-out infinite; }
.page-hero__inner { position:relative; z-index:2; max-width:var(--max); margin:0 auto; }
.page-hero__crumb { font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.8); margin-bottom:.8rem; }
.page-hero h1 { font-size:clamp(2rem,5vw,3.4rem); font-weight:900; color:#fff; }
.page-hero__intro { max-width:720px; margin:1.2rem auto 0; color:rgba(255,255,255,.94); font-size:1.08rem; }

.page-body { max-width:var(--max); margin:0 auto; padding:4rem 24px 6rem; }
.page-points { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.2rem; }
.point { background:#fff; border-radius:var(--r-lg); padding:1.6rem 1.7rem; box-shadow:var(--shadow-sm);
  border-left:5px solid var(--magenta); transition:transform .3s var(--ease), box-shadow .3s; }
.point:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); }
.point__n { font-family:"Fraunces",serif; font-weight:900; font-size:1.4rem; color:var(--magenta); margin-bottom:.4rem; }
.point p { color:var(--ink-soft); font-size:1rem; }
.page-cta { margin-top:3rem; text-align:center; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* logos retail strip */
.retail-strip { display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-top:2.5rem; }
.retail-chip { background:#fff; border:2px solid var(--cream-2); color:var(--ink-soft); padding:.5rem 1.1rem;
  border-radius:100px; font-weight:700; font-size:.9rem; box-shadow:var(--shadow-sm); }

/* category page header inline tabs */
.catpage-tabs { display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; margin-top:1.8rem; }
.catpage-tabs a { padding:.55rem 1.1rem; border-radius:100px; font-weight:800; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.03em; background:rgba(255,255,255,.18); color:#fff; transition:.25s var(--ease); }
.catpage-tabs a:hover { background:rgba(255,255,255,.32); }
.catpage-tabs a.is-active { background:#fff; }

/* ============================================================ Footer */
.footer { background:var(--ink); color:var(--cream); padding:3.5rem 24px 2rem; }
.footer__top { max-width:var(--max); margin:0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:2rem; flex-wrap:wrap; padding-bottom:2rem; border-bottom:1px solid rgba(255,255,255,.12); }
.footer .brand__logo { height:46px; }
.footer__nav { display:flex; gap:1.4rem; flex-wrap:wrap; }
.footer__nav a { color:rgba(255,246,236,.75); font-size:.92rem; transition:color .3s; cursor:pointer; }
.footer__nav a:hover { color:var(--gold); }
.footer__social { display:flex; gap:.6rem; }
.footer__social a { width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.1); font-weight:700; font-size:.85rem; transition:.3s var(--ease); }
.footer__social a:hover { background:var(--gold); color:var(--ink); transform:translateY(-3px); }
.footer__bottom { max-width:var(--max); margin:1.5rem auto 0; display:flex; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; font-size:.82rem; color:rgba(255,246,236,.5); }

/* ============================================================ Reveal */
[data-reveal] { opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-visible { opacity:1; transform:none; }

/* ============================================================ Responsive */
@media (max-width:960px) {
  .topbar__social { display:none; }
  .nav__links { position:fixed; top:calc(var(--topbar-h) + var(--nav-h)); right:0; bottom:0;
    width:min(82vw,340px); background:var(--orange); flex-direction:column; align-items:stretch; height:auto;
    padding:1rem 0 2rem; transform:translateX(100%); transition:transform .4s var(--ease);
    box-shadow:var(--shadow-lg); overflow-y:auto; }
  .nav__links.is-open { transform:none; }
  .nav__item { height:auto; flex-direction:column; align-items:stretch; }
  .nav__item > a { height:auto; padding:.9rem 1.5rem; }
  .dropdown { position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    background:var(--magenta-deep); border-radius:0; padding:0; max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
  .nav__item--has.is-open .dropdown { max-height:500px; }
  .nav__b2b { margin:1rem 1.5rem; text-align:center; }
  .nav__burger { display:flex; }
  .stats__grid { grid-template-columns:1fr 1fr; }
  .about, .business, .contact { grid-template-columns:1fr; gap:2.5rem; }
  .about__media { height:380px; }
  .cards { grid-template-columns:1fr 1fr; }
  .modal__box { grid-template-columns:1fr; max-height:88vh; overflow-y:auto; }
  .modal__media { padding:1.5rem; } .modal__media img { max-height:240px; }
}
@media (max-width:560px) {
  .cards { grid-template-columns:1fr; }
  .stats__grid { grid-template-columns:1fr 1fr; }
  .frm__grid2 { grid-template-columns:1fr; }
  .career__inner { padding:2rem; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; }
  html { scroll-behavior:auto; }
}