/* ============================================================
 CUSTOM OVERRIDES — loaded AFTER style.css (higher priority) so these
 tweaks survive even if style.css is overwritten by a sync/restore.
 Keep all bespoke UI fixes here, not in style.css.
 ============================================================ */

/* --- Font fallback (metric-matched, complements self-hosted Lora) --- */
@font-face {
  font-family: 'Lora Fallback';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 90%;
  ascent-override: 98%;
  descent-override: 26%;
  line-gap-override: 0%;
}
:root { --display: 'Lora', 'Lora Fallback', 'Georgia', serif; }

/* --- Homepage hero: cap title so it stays 2 lines; clear the fixed header --- */
.hero { padding-top: 180px; }
.hero-title { font-size: clamp(40px, 5vw, 66px); }
@media (max-width: 1024px) {
  .hero { padding-top: 150px; }
  .hero-title { font-size: clamp(34px, 5vw, 52px); }
}
@media (max-width: 640px) {
  .hero { padding-top: 140px; }
  .hero-title { font-size: clamp(30px, 8vw, 42px); }
}

/* --- Footer: 4 balanced columns + Connect/lang styling --- */
.footer-grid { grid-template-columns: 1.7fr 1fr 1fr 1.1fr; }
.footer-connect ul { list-style: none; }
.footer-connect a { display: inline-flex; align-items: center; gap: 9px; }
.footer-lang { display: inline-flex; align-items: center; gap: 9px; }
.footer-lang .sep { opacity: 0.4; }
.footer-lang a { color: rgba(237, 234, 227, 0.4); transition: color 0.2s; }
.footer-lang a:hover,
.footer-lang a.active { color: var(--rust-bright); }
@media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* Mobile: link columns become collapsible accordions (title + / toggle) */
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; gap: 0; margin-bottom: 48px; }
  .footer-col { border-top: 1px solid rgba(237, 234, 227, 0.12); }
  .footer-col-title {
    display: flex; align-items: center; justify-content: space-between;
    margin: 0; padding: 18px 2px; cursor: pointer; user-select: none;
  }
  .footer-col-title::after {
    content: "+"; font-family: var(--body); font-weight: 400; font-size: 22px; line-height: 1;
    color: var(--rust-bright); transition: transform 0.2s ease;
  }
  .footer-col.is-open .footer-col-title::after { content: "\2212"; }
  .footer-col ul { overflow: hidden; max-height: 0; margin: 0; transition: max-height 0.32s ease; }
  .footer-col.is-open ul { max-height: 520px; padding-bottom: 16px; }
  .footer-col-title:focus-visible { outline: 2px solid var(--rust-bright); outline-offset: 3px; }
}
.footer-copyright { max-width: 78ch; }
.footer-credit-inline { color: rgba(237, 234, 227, 0.4); }
.footer-credit-inline a { color: rgba(237, 234, 227, 0.7); transition: color 0.2s; }
.footer-credit-inline a:hover { color: var(--rust-bright); }

/* --- New Marble Collection: boxed hero + feathered image seam --- */
.nmc-hero-wrap { padding-inline: var(--gutter); margin: 148px auto 96px; }
.nmc-hero {
  grid-template-columns: 0.82fr 1.18fr;
  max-width: var(--container);
  margin-inline: auto;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--hairline-soft);
  box-shadow: 0 24px 64px rgba(38, 34, 28, 0.12);
  background: var(--bg);
}
.nmc-hero-right { position: relative; overflow: hidden; aspect-ratio: auto; }
.nmc-hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26%);
          mask-image: linear-gradient(to right, transparent 0, #000 26%);
}
.nmc-hero-divider { display: block; width: 56px; height: 2px; background: var(--rust); opacity: .85; margin: 2px 0 18px; }
.nmc-hero-badges {
  position: absolute; top: 26px; right: 26px;
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px; z-index: 2;
}
.nmc-hero-badges li {
  font-family: var(--body); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
}
@media (max-width: 900px) {
  .nmc-hero-wrap { margin: 120px auto 72px; }
  .nmc-hero { grid-template-columns: 1fr; }
  .nmc-hero-right { aspect-ratio: 16 / 9; order: -1; }
  .nmc-hero-img { -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 600px) {
  .nmc-hero-wrap { margin: 100px auto 56px; padding-inline: 16px; }
  .nmc-hero { border-radius: 16px; }
  .nmc-hero-right { aspect-ratio: 4 / 3; }
  .nmc-hero-badges { top: 16px; right: 16px; }
  .nmc-hero-badges li { font-size: 11px; }
}

/* --- Contact / distributor page: balanced layout + contact details --- */
.partner-inquiry--page { padding-block: 176px 100px; }
.partner-inquiry-inner { grid-template-columns: 0.9fr 1.1fr; }
.partner-inquiry-intro h2 { max-width: 460px; margin-bottom: 24px; }
.contact-details {
  list-style: none; margin: 40px 0 0; padding: 32px 0 0;
  border-top: 1px solid var(--hairline-soft);
  display: grid; gap: 16px; max-width: 440px;
}
.contact-details li {
  display: grid; grid-template-columns: 116px 1fr; gap: 16px;
  align-items: baseline; font-size: 14px; line-height: 1.5; color: var(--text-2);
}
.contact-details .cd-label {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); font-weight: 500;
}
.contact-details a { color: var(--text); border-bottom: 1px solid var(--hairline); transition: color .2s, border-color .2s; }
.contact-details a:hover { color: var(--rust); border-color: var(--rust); }
@media (max-width: 1024px) {
  .partner-inquiry--page { padding-block: 150px 90px; }
  .partner-inquiry-inner { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 640px) {
  .partner-inquiry--page { padding-block: 120px 72px; }
  .contact-details li { grid-template-columns: 100px 1fr; gap: 12px; }
}