/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

@font-face {
  font-family: 'Bahnschrift';
  src: url('../fonts/bahnschrift.ttf') format('truetype');
  font-stretch: semi-condensed; 
  font-style: normal;
  font-display: swap; /* Keeps your site readable while loading */
}

/* ── TOKENS ── */
:root{
  --g:     #0F723A;
  --g-dk:  #0a5129;
  --black: #111111;
  --white: #ffffff;
  --gray:  #777777;
  --line:  #DEDEDE;
  --bg:    #ffffff;
  --nav-h: 90px;
}

html,body{
  height:100%;
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--black);
  overflow-x:hidden;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-thumb{background:var(--g);border-radius:2px}

/* ════════════════════════
   NAV
════════════════════════ */
#navbar{
  position:fixed;top:0;left:0;right:0;
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 48px;
  z-index:900;
  background:var(--white);
  border-bottom:1px solid var(--line);
}

/* Logo */
.nav-logo{
  display:flex;align-items:center;gap:12px;
  text-decoration:none;cursor:pointer;
}
.nav-logo img{
  height:calc(var(--nav-h) - 20px); /* 10px breathing room top & bottom */
  width:auto;object-fit:contain;
}
.nav-logo-text{
  font-family:'Bahnschrift',serif;
  font-weight:600;font-size:1.3rem;
  color:var(--black);
}

/* Links */
.nav-links{display:flex;align-items:center;gap:2px;list-style:none}
.nav-links a{
  display:block;padding:6px 16px;
  font-family:'Bahnschrift',sans-serif;
  font-weight:500;font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--gray);
  text-decoration:none;
  position:relative;transition:color .18s;
}
.nav-links a::after{
  content:'';position:absolute;
  bottom:3px;left:16px;right:16px;height:1.5px;
  background:var(--g);
  transform:scaleX(0);transform-origin:left;
  transition:transform .2s;
}
.nav-links a:hover,
.nav-links a.active{color:var(--black)}
.nav-links a:hover::after,
.nav-links a.active::after{transform:scaleX(1)}

/* nav-menu: desktop — inline flex row */
.nav-menu{display:flex;align-items:center;gap:8px}

/* Hamburger button — hidden on desktop */
.nav-hamburger{
  display:none;
  flex-direction:column;justify-content:center;gap:5px;
  background:none;border:none;cursor:pointer;
  width:40px;height:40px;padding:8px;flex-shrink:0;
}
.nav-hamburger span{
  display:block;width:22px;height:2px;
  background:var(--black);border-radius:1px;
  transition:transform .22s ease,opacity .22s ease;
  transform-origin:center;
}
/* X state */
#navbar.menu-open .nav-hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#navbar.menu-open .nav-hamburger span:nth-child(2){opacity:0;transform:scaleX(0)}
#navbar.menu-open .nav-hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Language switcher */
.lang-sw{
  display:flex;align-items:center;
  margin-left:20px;
  border:1px solid var(--line);
  overflow:hidden;
}
.lang-btn{
  background:none;border:none;
  color:var(--gray);
  font-family:'Bahnschrift',sans-serif;
  font-weight:600;font-size:.68rem;letter-spacing:.08em;
  padding:4px 10px;cursor:pointer;
  transition:background .15s,color .15s;
}
.lang-btn.active{background:var(--g);color:var(--white)}
.lang-btn:not(.active):hover{color:var(--black)}

/* ════════════════════════
   PAGE TRANSITIONS
════════════════════════ */
#app{position:relative}

.page{display:none}
.page.visible{display:block}
.page.anim-in{animation:pgIn .22s ease forwards}
.page.anim-out{animation:pgOut .14s ease forwards;pointer-events:none}

@keyframes pgIn{
  from{opacity:0;transform:translateY(10px)}
  to  {opacity:1;transform:translateY(0)}
}
@keyframes pgOut{
  from{opacity:1}
  to  {opacity:0}
}

/* ════════════════════════
   HOME / HERO
════════════════════════ */
#page-home{height:100vh;overflow:hidden}

.hero-slider{position:relative;width:100%;height:100%}

@keyframes slideIn  { from{transform:translateX(100%)} to{transform:translateX(0)} }
@keyframes slideOut { from{transform:translateX(0)}    to{transform:translateX(-100%)} }

.hero-slide{
  position:absolute;inset:0;
  transform:translateX(100%);   /* off-screen right by default */
  background-size:cover;background-position:center;
  will-change:transform;        /* pre-promote to compositor layer */
}
.hero-slide.active    { transform:translateX(0) }
.hero-slide.slide-in  { animation:slideIn  .52s cubic-bezier(0.4,0,0.2,1) both }
.hero-slide.slide-out { animation:slideOut .52s cubic-bezier(0.4,0,0.2,1) both }

/* Gradient fallback when no hero image is set */
.hero-slide:nth-child(1){background-color:#0a3d1f}
.hero-slide:nth-child(2){background-color:#111111}
.hero-slide:nth-child(3){background-color:#0a3d1f}

/* Dark vignette overlay */
.hero-slide::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.1) 0%,rgba(0,0,0,.5) 100%);
}

/* Mountain silhouette SVG */
/*.slide-svg{
  position:absolute;bottom:0;left:0;right:0;
  width:100%;height:40%;
  opacity:.07;z-index:1;
}*/

/* Content centred over slide */
.hero-content{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  padding:var(--nav-h) 24px 0;
}

.hero-quote{
  font-family:'Bahnschrift',sans-serif;
  font-weight:200;
  font-size:clamp(2.2rem,5vw,4rem);
  color:var(--white);
  letter-spacing:.03em;line-height:1.15;
  text-shadow:0 1px 30px rgba(0,0,0,.35);
  opacity:0;transform:translateY(14px);
  /* delay starts after slide finishes (.52s) */
  transition:opacity .45s .56s,transform .45s .56s;
  max-width:860px;
}
.hero-slide.active .hero-quote{opacity:1;transform:none}
.hero-quote em{font-style:italic;font-weight:600}

.hero-sub{
  margin-top:16px;
  font-family:'Bahnschrift',sans-serif;
  font-weight:300;font-size:clamp(.7rem,1.2vw,.82rem);
  color:rgba(255,255,255,.6);
  letter-spacing:.25em;text-transform:uppercase;
  opacity:0;transform:translateY(10px);
  transition:opacity .45s .72s,transform .45s .72s;
}
.hero-sub em{font-weight:600;font-style:normal;}
.hero-slide.active .hero-sub{opacity:1;transform:none}

.hero-cta{
  margin-top:36px;
  padding:12px 36px;
  background:transparent;
  border:1px solid rgba(255,255,255,.45);
  color:var(--white);
  font-family:'Bahnschrift',sans-serif;
  font-weight:500;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;
  cursor:pointer;
  opacity:0;transform:translateY(10px);
  transition:opacity .45s .88s,transform .45s .88s,background .18s,border-color .18s;
}
.hero-slide.active .hero-cta{opacity:1;transform:none}
.hero-cta:hover{background:var(--g);border-color:var(--g)}

/* Slide dots */
.hero-dots{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  z-index:3;display:flex;gap:8px;align-items:center;
}
.hero-dot{
  width:20px;height:3px;
  box-sizing:content-box;       /* padding adds to the hit area, not the bar */
  padding:12px 0;               /* 27px total clickable height */
  background:rgba(255,255,255,.3);
  background-clip:content-box;  /* colour only the 3px bar, not the padding */
  border:none;cursor:pointer;
  transition:background .25s,width .25s;
}
.hero-dot.active{background:var(--white);background-clip:content-box;width:36px}

/* ════════════════════════
   SHARED SECTION STYLES
════════════════════════ */
.sec{
  max-width:1080px;margin:0 auto;
  padding:110px 48px 90px;
}

.sec-label{
  font-family:'Bahnschrift',sans-serif;
  font-weight:500;font-size:.62rem;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--g);margin-bottom:14px;
}
.sec-title{
  font-family:'Bahnschrift',sans-serif;
  font-weight:600;font-size:clamp(1.6rem,3vw,2.4rem);
  color:var(--black);letter-spacing:.01em;line-height:1.15;
}
.sec-disclaimer{
  font-family:'Bahnschrift',sans-serif;
  font-weight:500;font-size:.92rem;
  letter-spacing:.22em;
  padding-left:3px;
  color:var(--g);margin-bottom:14px;
}
.sec-divider{width:32px;height:2px;background:var(--g);margin-top:18px}

/* ════════════════════════
   ABOUT
════════════════════════ */
#page-about{background:var(--bg);padding-top:var(--nav-h)}

.about-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:80px;align-items:center;margin-top:56px;
}

.about-img-wrap{
  aspect-ratio:4/5;
  background:#111 url('img/about.jpg') center/cover no-repeat;
  position:relative;
}
.about-img-wrap::after{
  content:'';position:absolute;
  bottom:-16px;right:-16px;
  width:40%;height:40%;
  border:1.5px solid var(--g);
  pointer-events:none;
}

.about-body p{
  font-size:.97rem;line-height:1.9;
  color:#444;margin-bottom:20px;
}

.about-stats{
  display:flex;gap:48px;
  margin-top:40px;padding-top:36px;
  border-top:1px solid var(--line);
}
.stat-num{
  font-family:'Bahnschrift',sans-serif;
  font-weight:700;font-size:2rem;color:var(--g);
}
.stat-lbl{
  font-size:.72rem;text-transform:uppercase;
  letter-spacing:.12em;color:var(--gray);margin-top:4px;
}

/* ════════════════════════
   GALLERY
════════════════════════ */
#page-gallery{background:var(--bg);padding-top:var(--nav-h)}
#page-gallery .sec-label{color:var(--g)}
#page-gallery .sec-title{color:var(--black)}
#page-gallery .sec-divider{background:var(--g)}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:4px;margin-top:40px;
}

.g-item{
  position:relative;aspect-ratio:1;
  overflow:hidden;cursor:pointer;
  background:#e8e8e8;
}
.g-item img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease,filter .35s;
  filter:brightness(.9);
}
.g-item:hover img{transform:scale(1.06);filter:brightness(1)}

.g-item-ov{
  position:absolute;inset:0;
  background:rgba(15,114,58,0);
  display:flex;align-items:center;justify-content:center;
  transition:background .22s;
}
.g-item:hover .g-item-ov{background:rgba(15,114,58,.25)}
.g-item-ov i{
  color:rgba(255,255,255,0);
  font-size:1.4rem;transition:color .2s;
}
.g-item:hover .g-item-ov i{color:var(--white)}

.g-placeholder{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:#e8e8e8;color:#bbb;
  font-family:'Bahnschrift',sans-serif;
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
}

/* ════════════════════════
   LIGHTBOX
════════════════════════ */
#lightbox{
  position:fixed;inset:0;z-index:2000;
  background:rgba(0,0,0,.93);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .2s;
}
#lightbox.open{opacity:1;pointer-events:all}

#lightbox img{
  max-width:88vw;max-height:86vh;
  object-fit:contain;display:block;
}

.lb-close{
  position:absolute;top:18px;right:24px;
  background:none;border:none;
  color:rgba(255,255,255,.5);font-size:1.4rem;
  cursor:pointer;transition:color .15s;padding:6px;
}
.lb-close:hover{color:var(--white)}

.lb-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  background:none;
  border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.6);font-size:1rem;
  width:44px;height:44px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .15s,color .15s,background .15s;
}
.lb-arrow:hover{border-color:var(--g);color:var(--white);background:var(--g)}
.lb-arrow.prev{left:18px}
.lb-arrow.next{right:18px}

.lb-counter{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.3);
  font-family:'Bahnschrift',sans-serif;
  font-size:.7rem;letter-spacing:.1em;
}

/* ════════════════════════
   ORDER PAGE
════════════════════════ */
#page-order{background:var(--bg);min-height:100vh}

/* ── Step 1: frame-type chooser ── */
#orderChoose{padding-top:var(--nav-h)}

.frame-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:26px;margin-top:44px;
}

.fr-card{
  cursor:pointer;background:var(--white);
  border:1px solid var(--line);
  display:flex;flex-direction:column;
  transition:border-color .2s,box-shadow .2s,transform .2s;
  outline:none;
}
.fr-card:hover,
.fr-card:focus-visible{
  border-color:var(--g);
  box-shadow:0 14px 34px rgba(0,0,0,.09);
  transform:translateY(-3px);
}

.fr-card-img{
  position:relative;aspect-ratio:4/3;
  overflow:hidden;background:#e8e8e8;
}
.fr-card-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease;
}
.fr-card:hover .fr-card-img img,
.fr-card:focus-visible .fr-card-img img{transform:scale(1.05)}

.fr-card-plc{
  position:absolute;inset:0;
  align-items:center;justify-content:center;
  background:linear-gradient(160deg,#0a3d1f,#1a5a2e);
  color:rgba(255,255,255,.15);font-size:3rem;
}

.fr-card-ov{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(10,61,31,0);
  opacity:0;transition:opacity .22s,background .22s;
}
.fr-card:hover .fr-card-ov,
.fr-card:focus-visible .fr-card-ov{opacity:1;background:rgba(10,61,31,.38)}
.fr-card-ov span{
  font-family:'Bahnschrift',sans-serif;
  font-size:.66rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--white);
  border:1px solid rgba(255,255,255,.75);padding:9px 18px;
}

.fr-card-body{padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.fr-card-name{
  font-family:'Bahnschrift',sans-serif;
  font-weight:600;font-size:.96rem;
  color:var(--black);line-height:1.3;
}
.fr-card-price{
  font-family:'Bahnschrift',sans-serif;
  font-weight:700;font-size:1.05rem;color:var(--g);
}

/* ── Step 2: form controls ── */
.order-back{
  display:inline-flex;align-items:center;gap:8px;
  background:none;border:none;cursor:pointer;padding:0;
  margin-bottom:22px;
  font-family:'Bahnschrift',sans-serif;
  font-size:.64rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--gray);transition:color .15s;
}
.order-back:hover{color:var(--g)}
.order-back i{font-size:.7rem}

.selected-frame{
  font-family:'Bahnschrift',sans-serif;
  font-weight:600;font-size:clamp(1.6rem,3vw,2.4rem);
  color:var(--black);letter-spacing:.01em;line-height:1.15;
}

/* The frame <select> is replaced by the grid + selected-frame line */
#fg-frame{display:none}
/* Fields hidden for the chosen frame type */
.fg.hidden{display:none}

/* LED lights segmented toggle (left = off, right = on) — square, like the language selector */
.led-toggle{
  display:inline-flex;align-items:center;
  border:1px solid var(--line);
  overflow:hidden;user-select:none;
}
.led-opt{
  background:none;border:none;cursor:pointer;
  font-family:'Bahnschrift',sans-serif;
  font-weight:600;font-size:.66rem;letter-spacing:.08em;
  padding:5px 11px;color:var(--gray);white-space:nowrap;
  transition:background .15s,color .15s;
}
/* Solid fill on the active side */
.led-toggle:not(.on) .led-off{background:var(--g);color:var(--white)}
.led-toggle.on .led-on{background:var(--g);color:var(--white)}
.led-toggle:not(.on) .led-on:hover,
.led-toggle.on .led-off:hover{color:var(--black)}

.order-wrap{
  display:grid;grid-template-columns:1fr 1fr;
  min-height:100vh;
}

/* Left image panel */
.order-img-side{
  position:relative;overflow:hidden;
  background:#0a3d1f;min-height:600px;
}

.o-img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .5s ease;
}
.o-img.active{opacity:1}

.o-plc{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;
  opacity:0;transition:opacity .5s ease;
}
.o-plc.active{opacity:1}

/* One per frame index — feel free to customise these gradients */
.o-plc-0{background:linear-gradient(160deg,#051a0e,#0F723A)}
.o-plc-1{background:linear-gradient(160deg,#111,#222)}
.o-plc-2{background:linear-gradient(160deg,#0a3d1f,#1a5a2e)}

.o-plc i{font-size:3.5rem;color:rgba(255,255,255,.1)}
.o-plc span{
  font-family:'Bahnschrift',sans-serif;
  font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.22);
}

/* Right form panel */
.order-form-side{
  padding:80px 60px;
  padding-top:calc(var(--nav-h) + 56px);
  overflow-y:auto;
}

/* ── Form fields (underline style) ── */
.fg{margin-bottom:28px}
.fg label{
  display:block;
  font-family:'Bahnschrift',sans-serif;
  font-weight:500;font-size:.62rem;
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--gray);margin-bottom:8px;
}
.fg input,
.fg select,
.fg textarea{
  width:100%;background:transparent;
  border:none;border-bottom:1px solid var(--line);
  padding:8px 0;
  font-family:'Inter',sans-serif;font-size:.93rem;color:var(--black);
  outline:none;border-radius:0;
  transition:border-color .18s;
  -webkit-appearance:none;appearance:none;
}
.fg select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23777' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center;
  padding-right:20px;cursor:pointer;
}
.fg input:focus,
.fg select:focus,
.fg textarea:focus{border-bottom-color:var(--g)}
.fg textarea{min-height:80px;resize:vertical}

/* File upload zone */
.file-zone{
  border:1px dashed var(--line);
  padding:22px;text-align:center;
  cursor:pointer;position:relative;
  transition:border-color .18s;
}
.file-zone:hover,.file-zone.drag{border-color:var(--g)}
.file-zone input[type=file]{
  position:absolute;inset:0;opacity:0;
  cursor:pointer;width:100%;height:100%;
}
.file-zone i{font-size:1.4rem;color:var(--line);display:block;margin-bottom:6px}
.fz-txt{
  font-family:'Bahnschrift',sans-serif;
  font-size:.7rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gray);
}
.fz-hint{font-size:.68rem;color:var(--line);margin-top:3px}

/* Attached file chips */
.file-list{margin-top:8px;display:flex;flex-direction:column;gap:4px}
.f-chip{
  display:flex;align-items:center;gap:8px;
  padding:6px 0;
  border-bottom:1px solid var(--line);
  font-size:.82rem;color:var(--gray);
}
.f-chip i{color:var(--g);font-size:.85rem}
.f-chip .f-rm{
  margin-left:auto;background:none;border:none;
  color:var(--line);cursor:pointer;font-size:.8rem;
  transition:color .15s;padding:0;
}
.f-chip .f-rm:hover{color:#c0392b}
.f-err{font-size:.75rem;color:#c0392b;margin-top:6px;font-family:'Bahnschrift',sans-serif}

/* Price row */
.price-row{
  display:flex;align-items:baseline;justify-content:space-between;
  padding:20px 0;margin:20px 0 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.price-lbl{
  font-family:'Bahnschrift',sans-serif;
  font-size:.62rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;color:var(--gray);
}
.price-val{
  font-family:'Bahnschrift',sans-serif;
  font-weight:700;font-size:1.35rem;color:var(--g);
}

/* Fee row */
.fee-row{
  display:flex;align-items:baseline;justify-content:space-between;
  padding:20px 0;margin:20px 0 0;
  border-bottom:1px solid var(--line);
}
.fee-lbl{
  font-family:'Bahnschrift',sans-serif;
  font-size:.62rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;color:var(--gray);
}
.fee-val{
  font-family:'Bahnschrift',sans-serif;
  font-weight:700;font-size:1.35rem;color:var(--g);
}

/* Submit button */
.btn-sub{
  width:100%;margin-top:24px;padding:14px;
  background:var(--g);color:var(--white);border:none;
  font-family:'Bahnschrift',sans-serif;
  font-weight:600;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;transition:background .18s;
}
.btn-sub:hover{background:var(--g-dk)}

/* Success state */
.form-ok{
  display:none;text-align:center;padding:48px 0;
}
.form-ok i{font-size:2.5rem;color:var(--g);display:block;margin-bottom:20px}
.form-ok h3{
  font-family:'Bahnschrift',sans-serif;
  font-weight:600;font-size:1.25rem;color:var(--black);margin-bottom:10px;
}
.form-ok p{font-size:.9rem;color:var(--gray);line-height:1.75}

/* ════════════════════════
   FOOTER
════════════════════════ */
footer{
  background:var(--black);
  background-image: url('../img/zelena sara-35.png');
  padding:52px 48px;
  display:flex;flex-direction:column;
  align-items:center;gap:24px;
}
.ft-logo{display:flex;align-items:center;gap:10px}
.ft-logo img{height:30px;}
.ft-logo-txt{
  font-family:'Bahnschrift',sans-serif;
  font-weight:600;font-size:.82rem;
  color:rgba(255,255,255,.5);
}
.ft-socials{display:flex;gap:12px}
.ft-soc{
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.35);font-size:.95rem;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.1);
  transition:color .15s,border-color .15s,background .15s;
}
.ft-soc:hover{color:var(--white);border-color:var(--g);background:var(--g)}
.ft-copy{
  font-size:.7rem;color:rgba(255,255,255,.22);
  letter-spacing:.08em;text-align:center;
}

/* ════════════════════════
   TOAST
════════════════════════ */
#toast{
  position:fixed;bottom:24px;left:50%;
  transform:translateX(-50%) translateY(60px);
  background:var(--black);color:var(--white);
  font-family:'Bahnschrift',sans-serif;
  font-size:.75rem;font-weight:500;letter-spacing:.08em;
  padding:12px 24px;z-index:3000;
  opacity:0;transition:opacity .22s,transform .22s;
  pointer-events:none;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.err{background:#c0392b}

/* ════════════════════════
   RESPONSIVE
════════════════════════ */
@media(max-width:900px){
  #navbar{padding:0 20px}
  .nav-logo-text{display:none}
  .sec{padding-left:24px;padding-right:24px;padding-top:90px}
  .about-grid{grid-template-columns:1fr;gap:40px}
  .about-img-wrap{aspect-ratio:16/9}
  .order-wrap{grid-template-columns:1fr}
  .order-img-side{min-height:280px}
  .order-form-side{padding:40px 24px}
}

/* ── MOBILE NAV ── */
@media(max-width:768px){
  .nav-hamburger{display:flex}

  /* dropdown panel */
  .nav-menu{
    position:absolute;
    top:var(--nav-h);left:0;right:0;
    background:var(--white);
    border-bottom:1px solid var(--line);
    box-shadow:0 8px 24px rgba(0,0,0,.06);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    /* hidden */
    opacity:0;pointer-events:none;
    transform:translateY(-6px);
    transition:opacity .2s ease,transform .2s ease;
  }
  #navbar.menu-open .nav-menu{
    opacity:1;pointer-events:all;transform:translateY(0);
  }

  /* vertical links */
  .nav-links{flex-direction:column;gap:0}
  .nav-links li{border-bottom:1px solid var(--line)}
  .nav-links li:last-child{border-bottom:none}
  .nav-links a{
    padding:16px 24px;font-size:.8rem;
    color:var(--black);width:100%;
  }
  .nav-links a::after{display:none}
  .nav-links a.active{color:var(--g)}

  /* lang inside dropdown */
  .lang-sw{
    margin:16px 24px 20px;
    align-self:flex-start;
  }
}

@media(max-width:560px){
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .frame-grid{grid-template-columns:1fr;gap:18px}
  .about-stats{flex-direction:column;gap:20px}
  .hero-quote{font-size:1.9rem}
}