/* Aarti Industries — shared site styles (loaded after tailwind.css) */
html { scroll-behavior: smooth; }
section[id], [id].anchor { scroll-margin-top: 110px; }
.font-pdf { font-family: 'Newsreader', serif; }
.font-label { font-family: 'Inter', sans-serif; }
body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }
.bg-stone { background-color: #f8f7f4; }
.text-forest { color: #1a2e26; }
.gold { color: #c9a96e; }

/* ── Header ── */
.header-glass { background-color: rgba(248, 247, 244, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background-color 0.6s cubic-bezier(0.2, 1, 0.3, 1), border-color 0.6s ease; transform: translateZ(0); }
.logo-btn, .nav-link, .quote-btn, .hamburger-line { transition: color .5s ease, background-color .5s ease; }
.header-scrolled { background-color: rgba(26, 46, 38, 0.95) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.header-scrolled .logo-btn, .header-scrolled .nav-link { color: #ffffff !important; }
.header-scrolled .quote-btn { background-color: #ffffff !important; color: #1a2e26 !important; }
.header-scrolled .hamburger-line { background-color: #ffffff !important; }
.nav-container { white-space: nowrap; }
.nav-link { text-decoration: none; }
.hamburger-line { background-color: #1a2e26; transition: background-color 0.5s ease, transform .3s ease, opacity .3s ease; }
.menu-open .hamburger-line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-open .hamburger-line:nth-child(2) { opacity: 0; }
.menu-open .hamburger-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
#mobile-menu { background-color: rgba(248, 247, 244, 0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); overflow-y: auto; }
#mobile-menu.active { opacity: 1; pointer-events: auto; }
.mobile-sub { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #6b7280; }
.mobile-sub a { color: #4b5563; text-decoration: none; }

/* Products dropdown (desktop) */
.nav-drop { position: relative; }
.nav-drop > .nav-link::after { content: ' ▾'; font-size: 8px; }
.nav-drop-menu { position: absolute; top: 100%; left: -18px; padding-top: 14px; opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; z-index: 60; }
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu { opacity: 1; pointer-events: auto; transform: translateY(0); }
.nav-drop-inner { background: #1a2e26; border: 1px solid rgba(201, 169, 110, .3); min-width: 250px; padding: 10px 0; box-shadow: 0 20px 40px rgba(0,0,0,.15); }
.nav-drop-inner a { display: block; padding: 10px 20px; color: rgba(255,255,255,.75); text-decoration: none; font-size: 10px; letter-spacing: .2em; }
.nav-drop-inner a:hover { color: #c9a96e; background: rgba(255,255,255,.04); }

/* ── Hero (home) ── */
/* Hero photo. Default: a normal background layer (works everywhere, incl. phones and old browsers).
   Desktop browsers with clip-path get the gentle "fixed" parallax on its own GPU layer — no repaint jank. */
.hero-bg-artisan { position: relative; overflow: hidden; z-index: 0; padding-top: 56px; padding-bottom: 56px; }
.hero-bg-artisan::before {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none;
  background-color: #f8f7f4;
  background-image: linear-gradient(rgba(248, 247, 244, 0.72), rgba(248, 247, 244, 0.72)),
    url('https://images.unsplash.com/photo-1586075010633-2470acfd8e8c?q=70&w=1600&auto=format&fit=crop');
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
@supports ((clip-path: inset(0)) or (-webkit-clip-path: inset(0))) {
  @media (min-width: 1024px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .hero-bg-artisan { overflow: visible; -webkit-clip-path: inset(0); clip-path: inset(0); }
    .hero-bg-artisan::before { position: fixed; -webkit-transform: translateZ(0); transform: translateZ(0); }
  }
}
.hero-kicker { display: block; font-family: 'Inter', sans-serif; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: #1a2e26; margin-bottom: 22px; line-height: 1.7; }
@media (min-width: 768px) { .hero-kicker { font-size: 13px; } }
.hero-separator { display: inline; padding: 0 0.5rem; }
@media (max-width: 640px) { .hero-sub { display: flex; flex-direction: column; align-items: center; } .hero-separator { display: none; } }

/* ── Form ── */
input::placeholder, textarea::placeholder { color: #9ca3af !important; }
.type-btn { color: rgba(255, 255, 255, 0.45); transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease !important; }
.type-btn:hover { color: rgba(255, 255, 255, 0.85); }
.type-btn.active { border-color: #c9a96e !important; background-color: rgba(201, 169, 110, 0.08); border-width: 1.5px; color: #c9a96e !important; }
.form-label { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .1em; color: #9ca3af; margin-bottom: 4px; display: block; text-transform: uppercase; }

/* ── Credential pills ── */
.credential-pill { position: relative; display: inline-flex; align-items: center; gap: 8px; background: #f8f7f4; border: 1px solid #dddbd4; padding: 7px 14px; font-size: 10px; font-weight: 500; letter-spacing: 0.04em; color: #1a2e26; text-decoration: none; transition: border-color 0.2s, background 0.2s; font-family: 'Inter', sans-serif; }
.credential-pill:hover { border-color: #c9a96e; background: #fdfcfa; }
.credential-pill .pill-tooltip { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px); background: #1a2e26; color: rgba(255, 255, 255, 0.85); font-size: 10px; font-weight: 400; letter-spacing: 0.02em; text-transform: none; line-height: 1.5; padding: 9px 13px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 100; border: 1px solid rgba(201, 169, 110, 0.25); }
.credential-pill .pill-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #1a2e26; }
.credential-pill:hover .pill-tooltip { opacity: 1; transform: translateX(-50%) translateY(0); }
.credential-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: #c9a96e; flex-shrink: 0; }
.credential-pill-label { font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #c9a96e; padding-right: 8px; border-right: 1px solid #dddbd4; margin-right: 2px; }

/* ── Reveal animations (hidden state applies only when <html> has .reveal-on, set by a head script) ── */
.reveal-on .reveal { opacity: 0; transform: translate3d(0, 36px, 0); transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1), transform 0.85s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal-on .reveal-left { opacity: 0; transform: translate3d(-40px, 0, 0); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal-on .reveal-right { opacity: 0; transform: translate3d(40px, 0, 0); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal-on .stagger > * { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal-on .reveal.visible, .reveal-on .reveal-left.visible, .reveal-on .reveal-right.visible, .reveal-on .stagger.visible > * { opacity: 1; transform: none; }
.reveal-on .stagger.visible > *:nth-child(2) { transition-delay: 0.1s; }
.reveal-on .stagger.visible > *:nth-child(3) { transition-delay: 0.2s; }
.reveal-on .stagger.visible > *:nth-child(4) { transition-delay: 0.3s; }
.reveal-on .stagger.visible > *:nth-child(n+5) { transition-delay: 0.4s; }
.heading-line::after { content: ''; display: block; width: 56px; height: 1.5px; background: #c9a96e; margin-top: 10px; }
.reveal-on .heading-line::after { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left; transform-origin: left; transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.4s; }
.reveal-on .heading-line.visible::after { -webkit-transform: none; transform: none; }
.text-center.heading-line::after { margin-left: auto; margin-right: auto; }
.reveal-on .text-center.heading-line::after { transform-origin: center; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-on .reveal, .reveal-on .reveal-left, .reveal-on .reveal-right, .reveal-on .stagger > *, .reveal-on .heading-line::after { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── Content building blocks ── */
.sec { padding: 88px 24px; }
@media (min-width: 768px) { .sec { padding: 96px 80px; } }
.sec-white { background: #fff; }
.sec-stone { background: #f8f7f4; }
.sec-forest { background: #1a2e26; color: #fff; }
.wrap { max-width: 64rem; margin: 0 auto; }
.wrap-narrow { max-width: 48rem; margin: 0 auto; }
.eyebrow { font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; font-weight: 700; color: #c9a96e; margin-bottom: 18px; }
.h2 { font-family: 'Newsreader', serif; font-style: italic; font-size: 30px; line-height: 1.2; color: #1a2e26; margin-bottom: 22px; }
@media (min-width: 768px) { .h2 { font-size: 38px; } }
.h3 { font-family: 'Newsreader', serif; font-style: italic; font-size: 22px; color: #1a2e26; margin: 28px 0 10px; }
.prose p { color: #374151; line-height: 1.8; font-size: 16px; margin-bottom: 16px; }
.prose ul { margin: 0 0 18px 0; padding: 0; list-style: none; }
.prose li { position: relative; padding-left: 20px; color: #374151; line-height: 1.75; margin-bottom: 8px; font-size: 15px; }
.prose li::before { content: ''; position: absolute; left: 0; top: 11px; width: 7px; height: 7px; background: #c9a96e; border-radius: 50%; }
.prose a, .text-link { color: #1a2e26; text-decoration: underline; text-decoration-color: #c9a96e; text-underline-offset: 3px; }
.prose strong { color: #1a2e26; }
.cols-2 { display: grid; gap: 48px; }
@media (min-width: 768px) { .cols-2 { grid-template-columns: 1fr 1fr; gap: 64px; } }
.gold-rule { border-left: 2px solid #c9a96e; padding-left: 28px; }
.gold-rule > div + div { margin-top: 26px; }
.mini-label { display: block; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #c9a96e; margin-bottom: 6px; }
.mini-text { font-size: 14px; color: #4b5563; line-height: 1.7; }

/* Page hero (inner pages) */
.page-hero { padding: 88px 24px 96px; background: #1a2e26; color: #fff; }
@media (min-width: 768px) { .page-hero { padding: 120px 80px; } }
.page-hero h1 { font-family: 'Newsreader', serif; font-style: italic; font-size: 38px; line-height: 1.15; margin-bottom: 26px; }
@media (min-width: 768px) { .page-hero h1 { font-size: 58px; } }
.page-hero .intro { max-width: 44rem; font-style: italic; color: rgba(255,255,255,.6); font-size: 17px; line-height: 1.75; }
.breadcrumb { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; font-weight: 700; color: #c9a96e; margin-bottom: 28px; }
.breadcrumb a { color: #c9a96e; text-decoration: none; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb .sep { margin: 0 8px; color: rgba(255,255,255,.3); }
.breadcrumb .here { color: rgba(255,255,255,.6); }
.btn-light { display: inline-block; margin-top: 36px; background: #fff; color: #c9a96e; padding: 16px 44px; font-size: 10px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; text-decoration: none; box-shadow: 0 10px 25px rgba(0,0,0,.15); }
.btn-light:hover { background: #f3f4f6; }
.btn-dark { display: inline-block; background: #1a2e26; color: #fff; padding: 16px 44px; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; box-shadow: 0 10px 25px rgba(0,0,0,.12); }
.btn-dark:hover { background: #000; }
.quick-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.quick-facts span { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #c9a96e; border: 1px solid rgba(201,169,110,.35); padding: 6px 12px; }

/* eyebrow labels inside prose blocks keep the gold label style */
.prose .eyebrow { color: #c9a96e; font-size: 10px; line-height: normal; margin-bottom: 18px; }
/* hide an empty gallery section (before photos are uploaded) */
section:has(.gallery:empty) { display: none; }

/* Spec table */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #e5e2db; background: #fff; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.spec-table th, .spec-table td { text-align: left; vertical-align: top; padding: 14px 18px; border-bottom: 1px solid #eeebe4; line-height: 1.6; }
.spec-table thead th { text-align: center; vertical-align: middle; background: #1a2e26; color: #fff; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; }
.spec-table tbody th { width: 30%; color: #1a2e26; font-weight: 600; background: #fbfaf7; }
.spec-table td { color: #4b5563; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: none; }
.table-note { font-size: 12px; color: #6b7280; margin-top: 12px; line-height: 1.6; }

/* Gallery — figures remove themselves if the photo file is missing */
.gallery { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery figure { margin: 0; background: #fff; border: 1px solid #e5e2db; }
.gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: #eeebe4; }
.gallery figcaption { font-size: 12px; color: #4b5563; padding: 10px 12px; line-height: 1.5; }

/* Cards */
.card-grid { display: grid; gap: 20px; }
@media (min-width: 700px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .card-grid.four { grid-template-columns: repeat(4, 1fr); } .card-grid.three { grid-template-columns: repeat(3, 1fr); } }
.p-card { padding: 34px 30px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); display: flex; flex-direction: column; transition: border-color .3s; }
.p-card:hover { border-color: rgba(201,169,110,.45); }
.p-card h3 { font-family: 'Newsreader', serif; font-style: italic; font-size: 24px; color: #fff; margin-bottom: 14px; }
.p-card h3 a { color: inherit; text-decoration: none; }
.p-card p { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.6); flex: 1; }
.p-card .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.p-card .tags span { font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #c9a96e; border: 1px solid rgba(201,169,110,.35); padding: 4px 10px; }
.p-card .more { margin-top: 26px; font-size: 10px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: #c9a96e; text-decoration: none; }
.p-card .more:hover { color: #fff; }
.l-card { display: block; padding: 26px 24px; border: 1px solid #d4d0c7; background: #f8f7f4; text-decoration: none; transition: border-color .3s; }
.l-card:hover { border-color: #c9a96e; }
.l-card .t { font-family: 'Newsreader', serif; font-style: italic; font-size: 20px; color: #1a2e26; display: block; margin-bottom: 8px; }
.l-card .d { font-size: 13px; color: #6b7280; line-height: 1.6; }

/* Facts panel (home "at a glance") */
.facts { display: grid; gap: 0; border: 1px solid #e5e2db; background: #fff; }
@media (min-width: 700px) { .facts { grid-template-columns: 1fr 1fr; } }
.facts div { padding: 18px 22px; border-bottom: 1px solid #eeebe4; }
.facts dt { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #c9a96e; margin-bottom: 4px; }
.facts dd { margin: 0; font-size: 14px; color: #1f2937; line-height: 1.6; }

/* Steps */
.steps { counter-reset: step; display: grid; gap: 18px; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { list-style: none; counter-increment: step; background: #fff; border: 1px solid #e5e2db; padding: 24px 22px; font-size: 14px; color: #4b5563; line-height: 1.65; }
.steps li::before { content: '0' counter(step); display: block; font-family: 'Newsreader', serif; font-style: italic; font-size: 26px; color: #c9a96e; margin-bottom: 8px; }
.steps li strong { display: block; color: #1a2e26; margin-bottom: 4px; font-size: 15px; }

/* FAQ (native details/summary: content always in the HTML) */
.faq details { border-bottom: 1px solid #e5e2db; padding: 20px 0; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-family: 'Newsreader', serif; font-style: italic; font-size: 19px; color: #1a2e26; margin: 0; font-weight: 400; }
@media (min-width: 768px) { .faq summary h3 { font-size: 21px; } }
.faq summary::after { content: '+'; color: #c9a96e; font-size: 22px; font-weight: 300; transition: transform .3s; flex-shrink: 0; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: #4b5563; font-size: 15px; line-height: 1.75; padding-top: 12px; }

/* Footer — same light stone look as the original footer, now with links */
.site-footer { background: #f8f7f4; color: #9ca3af; padding: 64px 24px 40px; font-size: 12px; border-top: 1px solid #d4d0c7; }
@media (min-width: 768px) { .site-footer { padding: 72px 80px 44px; } }
.footer-grid { max-width: 72rem; margin: 0 auto; display: grid; gap: 36px; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; } }
.site-footer h2 { font-size: 10px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: #c9a96e; margin-bottom: 16px; }
.site-footer .brand { font-family: 'Newsreader', serif; font-weight: 700; letter-spacing: .1em; font-size: 18px; color: #1a2e26; margin-bottom: 12px; }
.site-footer p, .site-footer address { line-height: 1.8; font-style: normal; color: #6b7280; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer a { color: #6b7280; text-decoration: none; transition: color .2s; }
.site-footer a:hover { color: #1a2e26; }
.footer-bottom { max-width: 72rem; margin: 44px auto 0; padding-top: 22px; border-top: 1px solid #e5e2db; text-align: center; font-size: 10px; text-transform: uppercase; letter-spacing: .3em; color: #9ca3af; line-height: 2; }
.footer-bottom .disambig { display: block; margin-top: 6px; text-transform: none; letter-spacing: .02em; font-size: 11px; }

/* intl-tel-input dark theme */
.iti { width: 100%; display: block; }
.iti__flag-container { padding: 0; }
.iti__selected-flag { background-color: transparent !important; padding-left: 0 !important; }
.iti__selected-dial-code { color: #ffffff !important; font-family: 'Inter', sans-serif; font-size: 16px; margin-left: 6px; }
.iti__arrow { border-top-color: #9ca3af !important; }
.iti__country-list { background-color: #1a2e26; color: #ffffff; border: 1px solid #374151; font-family: 'Inter', sans-serif; font-size: 14px; }
.iti__country-list .iti__country.iti__highlight { background-color: rgba(255, 255, 255, 0.1); }
.iti__search-input { background-color: #1a2e26 !important; color: #ffffff !important; border: 1px solid #374151 !important; padding: 8px !important; }
.iti #phone { padding-left: 85px !important; }

/* ── Compatibility: older Safari/iOS (10–14), older Firefox/Chrome, small & very large screens ── */
.sticky { position: -webkit-sticky; position: sticky; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.min-h-\[100dvh\] { min-height: 100vh; min-height: 100dvh; }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .header-glass { background-color: rgba(248, 247, 244, 0.97); }
  #mobile-menu { background-color: rgba(248, 247, 244, 0.99); }
}
/* Browsers without flexbox "gap" (Safari < 14.1): equivalent margins */
.no-flexgap .flex.flex-wrap.gap-3 > * { margin: 0 .75rem .75rem 0; }
.no-flexgap .flex.items-start.gap-5 > * + * { margin-left: 1.25rem; }
.no-flexgap .flex.gap-2 > * + * { margin-left: .5rem; }
.no-flexgap .credential-pill > * + * { margin-left: 8px; }
.no-flexgap .quick-facts > *, .no-flexgap .p-card .tags > * { margin: 0 8px 8px 0; }
.no-flexgap .faq summary h3 { margin-right: 20px; }
.no-flexgap .mobile-sub > * + * { margin-top: 10px; }
.no-flexgap .footer-bottom > * + * { margin-top: 8px; }
/* Touch screens: no hover-only tooltips hanging off the edge */
@media (hover: none) { .credential-pill .pill-tooltip { display: none; } }
/* Very small phones (320px) */
@media (max-width: 360px) {
  .logo-btn { font-size: 17px !important; letter-spacing: .06em !important; }
  .nav-container { padding-left: 16px !important; padding-right: 16px !important; }
  .page-hero h1 { font-size: 32px; }
  .credential-pill { font-size: 9px; padding: 6px 10px; }
}
/* Very large screens: keep line lengths comfortable */
@media (min-width: 1920px) { html { font-size: 17px; } }
img, svg { max-width: 100%; }
.serve-icon { width: 20px; height: 20px; }
@media print {
  .reveal-on .reveal, .reveal-on .reveal-left, .reveal-on .reveal-right, .reveal-on .stagger > * { opacity: 1 !important; transform: none !important; }
  #navbar, #mobile-menu, #contact form, .hero-bg-artisan::before { display: none !important; }
}