/* Zentari Trading — base styles & locally hosted fonts */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-variable.woff2) format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/playfair-display.woff2) format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/playfair-display-italic.woff2) format('woff2');
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #211c2a;
}
img { display: block; }

/* form fields (used on the contact page) */
input, textarea, select { font-family: 'Inter', sans-serif; }
input::placeholder, textarea::placeholder { color: #a39caa; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #4b2a6a !important;
  box-shadow: 0 0 0 3px rgba(75, 42, 106, .1);
}

@keyframes flo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }


/* ============================================================
   Responsive layer — desktop design is unchanged above these
   breakpoints. Hooks (rgrid/rgrid4/rwrap/rrow/fsNN/nav-*) are
   added to the markup; rules only apply at tablet/mobile widths.
   ============================================================ */

/* Tablet and below (≤900px) */
@media (max-width: 900px) {
  .rwrap { padding-left: 32px !important; padding-right: 32px !important; }
  .rgrid4 { grid-template-columns: repeat(2, 1fr) !important; }
  .fs80{font-size:67px!important}.fs58{font-size:49px!important}.fs56{font-size:47px!important}.fs52{font-size:44px!important}.fs50{font-size:42px!important}
}

/* Mobile navigation (≤820px) */
@media (max-width: 820px) {
  .nav-toggle { display: inline-flex !important; align-items: center; justify-content: center; }
  .nav-inner { position: relative; flex-wrap: nowrap !important; }
  .nav-links {
    display: none !important;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column !important; align-items: stretch !important;
    gap: 2px !important;
    background: #fff;
    padding: 12px 24px 20px !important;
    border-bottom: 1px solid rgba(33,28,42,.08);
    box-shadow: 0 22px 32px -22px rgba(33,28,42,.45);
  }
  .nav-links.open { display: flex !important; }
  .nav-links > a { padding: 12px 4px !important; font-size: 16px !important; }
  .nav-links > a:last-child { justify-content: center; margin-top: 8px; padding: 14px 22px !important; }
}

/* Tablet portrait / large phone (≤760px) */
@media (max-width: 760px) {
  .rgrid { grid-template-columns: 1fr !important; }
  .rrow { flex-wrap: wrap !important; }
  [style*="display:flex"] > *, [style*="display:grid"] > * { min-width: 0; }
  img { height: auto; }
}

/* Overflow safety — clip (not hidden) so position:sticky still works */
html, body { overflow-x: clip; }
html { max-width: 100%; }

/* Footer: long email token must wrap; columns stack on small screens */
@media (max-width: 760px) {
  footer [style*="grid-template-columns"] { grid-template-columns: 1fr 1fr !important; gap: 30px !important; }
  footer a, footer span { overflow-wrap: anywhere; }
  h1, h2, h3, p { overflow-wrap: break-word; }
}
@media (max-width: 520px) {
  footer [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}

/* Phones (≤600px) */
@media (max-width: 600px) {
  .rwrap { padding-left: 20px !important; padding-right: 20px !important; }
  .rgrid4 { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="padding:64px"] { padding: 32px !important; }
  [style*="padding:40px 42px"] { padding: 26px 20px !important; }
  [style*="padding:40px 48px"] { padding: 26px 20px !important; }
  .fs80{font-size:48px!important}.fs58{font-size:38px!important}.fs56{font-size:37px!important}.fs52{font-size:36px!important}.fs50{font-size:35px!important}.fs44{font-size:32px!important}.fs38{font-size:30px!important}.fs36{font-size:29px!important}.fs34{font-size:28px!important}.fs30{font-size:27px!important}.fs26{font-size:25px!important}
}