/* Mobile & tablet — Nuna Studio */

@media (max-width: 900px) {
  html,
  body {
    overflow-x: hidden;
  }

  body.nav-menu-open {
    overflow: hidden;
  }

  /* ─── Mobile header bar ─── */
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 10px;
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    z-index: 1202;
    position: relative;
  }

  .nav-toggle-bar {
    display: block;
    width: 22px;
    height: 1px;
    background: var(--dark);
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  .nav-toggle--light .nav-toggle-bar {
    background: rgba(255, 255, 255, 0.95);
  }

  nav.nav-open .nav-toggle-bar:nth-child(1),
  .hero-nav-overlay.nav-open .nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  nav.nav-open .nav-toggle-bar:nth-child(2),
  .hero-nav-overlay.nav-open .nav-toggle-bar:nth-child(2) {
    opacity: 0;
  }

  nav.nav-open .nav-toggle-bar:nth-child(3),
  .hero-nav-overlay.nav-open .nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  nav,
  .hero-nav-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--nav-h) !important;
    min-height: var(--nav-h) !important;
    max-height: var(--nav-h) !important;
    padding: 0 20px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    overflow: visible !important;
    z-index: 10000 !important;
    background: rgba(250, 250, 248, 0.98) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid var(--light-line);
  }

  .hero-nav-overlay {
    background: #3a4030 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  nav.nav-open,
  .hero-nav-overlay.nav-open {
    height: var(--nav-h) !important;
    max-height: var(--nav-h) !important;
  }

  /* Backdrop — portaled to body */
  .nav-menu-backdrop,
  .mobile-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    top: var(--nav-h);
    background: rgba(26, 24, 21, 0.5);
    z-index: 10001;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
  }

  .mobile-nav-backdrop.is-open {
    display: block;
  }

  /* Menu panel — portaled to body so it is never clipped */
  .nav-links,
  .hero-nav-links,
  .mobile-nav-panel {
    display: none !important;
    position: fixed !important;
    top: var(--nav-h) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 24px 48px !important;
    border-top: none !important;
    background: var(--warm-white) !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    z-index: 10002 !important;
    list-style: none !important;
  }

  .hero-nav-links,
  .mobile-nav-panel--dark {
    background: #3a4030 !important;
  }

  nav.nav-open .nav-links,
  .hero-nav-overlay.nav-open .hero-nav-links,
  .mobile-nav-panel.is-open {
    display: flex !important;
  }

  .nav-links > li,
  .hero-nav-links > li {
    width: 100%;
    flex-shrink: 0;
  }

  .nav-links > li > a,
  .hero-nav-links > li > a,
  .nav-dropdown-trigger {
    display: block;
    width: 100%;
    padding: 16px 0 !important;
    font-size: 12px !important;
    letter-spacing: 0.14em !important;
    text-align: left;
  }

  .hero-nav-links > li > a,
  .hero-nav-links .nav-dropdown-trigger {
    color: rgba(255, 255, 255, 0.95) !important;
  }

  .nav-item-dropdown {
    width: 100%;
  }

  .nav-dropdown-panel {
    position: static !important;
    transform: none !important;
    left: auto !important;
    min-width: 0 !important;
    width: 100% !important;
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 0 8px 16px !important;
    display: none !important;
    background: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .nav-item-dropdown.is-open .nav-dropdown-panel {
    display: block !important;
    animation: none !important;
  }

  .nav-item-dropdown:not(.is-open) .nav-dropdown-panel {
    display: none !important;
  }

  .nav-dropdown-label {
    display: none;
  }

  .nav-dropdown-menu {
    padding: 0 !important;
  }

  .nav-dropdown-menu a {
    padding: 12px 0 !important;
    white-space: normal;
    font-size: 11px !important;
    opacity: 0.85;
  }

  .hero-nav-links .nav-dropdown-menu a {
    color: rgba(255, 255, 255, 0.85) !important;
  }

  .nav-dropdown-trigger::after {
    float: right;
    margin-top: 4px;
  }

  .nav-item-dropdown.is-open > .nav-dropdown-trigger::after {
    transform: rotate(-135deg) translateY(-1px);
  }

  /* ─── Hero ─── */
  .hero {
    height: auto;
    min-height: 88svh;
    padding-top: var(--nav-h);
    display: flex !important;
    align-items: center !important;
  }

  .hero-content {
    padding: 0 28px 56px;
    margin-top: 0 !important;
    width: 100%;
  }

  .hero-display {
    font-size: clamp(46px, 12vw, 72px) !important;
    line-height: 1.06 !important;
  }

  .hero-tagline h1 {
    font-size: 11px !important;
  }

  .hero-tagline {
    margin-top: 24px;
    flex-wrap: wrap;
  }

  .hero-cta {
    margin-top: 36px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .hero-cta .hero-btn {
    width: 100%;
    justify-content: flex-start;
  }

  .hero-scroll {
    display: none;
  }

  #page-home {
    padding-top: 0 !important;
  }

  .nav-logo,
  .hero-nav-logo {
    position: relative;
    z-index: 1201;
  }

  /* ─── Shared layout stacks ─── */
  .intro-strip,
  .about-hero,
  .about-body,
  .projects-header,
  .project-detail-body,
  .services-header,
  .products-header,
  .contact-header,
  .contact-body,
  .blog-featured,
  .collection-block,
  .about-stats {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .intro-strip,
  .featured-projects,
  .about-video-section,
  .projects-filter,
  .projects-grid,
  .products-intro,
  .products-grid,
  .venus-gallery,
  .ceramic-detail-gallery,
  .blog-header,
  .blog-grid,
  .home-seo-links,
  .services-list,
  .service-item {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .intro-strip,
  .featured-projects,
  .about-hero,
  .about-body,
  .about-closing,
  .projects-header,
  .projects-grid,
  .contact-header,
  .contact-body,
  .services-header,
  .products-header,
  .products-grid,
  .blog-featured,
  .blog-grid,
  .collection-block,
  .venus-gallery,
  .ceramic-detail-gallery {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  .projects-grid,
  .products-grid,
  .blog-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .projects-grid-home {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .projects-grid-home .proj-card[style*="grid-row"] {
    grid-row: auto !important;
  }

  .proj-col-right {
    gap: 20px;
  }

  .proj-card-img.tall {
    aspect-ratio: 4 / 3;
  }

  .service-item,
  .detail-gallery {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .service-item {
    padding: 40px 0 !important;
  }

  .service-title {
    font-size: clamp(32px, 8vw, 48px) !important;
  }

  .project-detail-header,
  .project-detail-body {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .project-detail-meta {
    flex-wrap: wrap;
    gap: 24px;
  }

  .project-detail-hero,
  .ceramic-detail-hero {
    height: 50vh !important;
    min-height: 280px !important;
  }

  .detail-gallery {
    grid-template-columns: 1fr !important;
  }

  .form-row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .contact-body {
    gap: 48px !important;
  }

  .contact-info h3 {
    font-size: 28px;
  }

  .process-diagram {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    padding: 24px 0 !important;
  }

  .process-step {
    flex: none !important;
    width: 100%;
    padding-right: 0 !important;
  }

  .process-step::after {
    display: none !important;
  }

  .projects-filter {
    flex-wrap: wrap;
    gap: 16px 24px;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  .projects-tabs {
    padding: 24px 24px 0 !important;
    gap: 0;
    justify-content: space-between;
  }

  .proj-tab {
    flex: 1;
    margin: 0;
    padding: 0 8px 14px;
    text-align: center;
    font-size: 10px;
    letter-spacing: 0.14em;
  }

  .about-img-caption {
    position: static;
    margin-top: 16px;
  }

  .about-ceramics-section {
    padding: 48px 24px !important;
  }

  .about-ceramics-copy {
    width: 100%;
  }

  .about-ceramics-copy .about-gallery-grid {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 32px !important;
  }

  .about-ceramics-portrait {
    position: static;
    width: 100%;
    margin-top: 32px;
  }

  .about-ceramics-section .about-img-portrait {
    max-height: none;
  }

  .about-ceramics-section .about-gallery-quote {
    margin-top: 32px !important;
  }

  .about-gallery-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-bottom: 32px !important;
  }

  .about-gallery-quote {
    font-size: 18px;
  }

  .about-closing {
    padding: 48px 24px !important;
  }

  .about-closing h2 {
    font-size: clamp(24px, 6vw, 32px);
  }

  footer {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 48px 24px 32px !important;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px 24px !important;
  }

  .home-seo-links-grid {
    grid-template-columns: 1fr !important;
  }

  .venus-gallery,
  .ceramic-detail-gallery {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .venus-gallery .wide {
    grid-column: auto !important;
  }

  .featured-projects {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  .section-label {
    margin-bottom: 32px;
  }

  .blog-featured {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .collection-block {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
    gap: 32px !important;
  }

  .stat-num {
    font-size: 40px;
  }

  /* Inline grid / padding overrides inside SPA pages */
  .page [style*="grid-template-columns"],
  #page-home [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .page [style*="padding: 80px 48px"],
  .page [style*="padding:80px 48px"],
  .page [style*="padding: 100px 48px"],
  .page [style*="padding:100px 48px"],
  .page [style*="padding: 72px 48px"],
  .page [style*="padding:72px 48px"],
  .page [style*="padding: 64px 48px"],
  .page [style*="padding:64px 48px"],
  #page-home [style*="padding: 100px 48px"],
  #page-home [style*="padding:100px 48px"] {
    padding: 48px 24px !important;
  }

  .page [style*="padding: 0 48px"],
  .page [style*="padding:0 48px"],
  .blog-grid[style*="padding"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .page [style*="repeat(5, 1fr)"],
  .page [style*="repeat(3, 1fr)"],
  .page [style*="repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  .page [style*="left:48px"],
  .page [style*="left: 48px"] {
    left: 20px !important;
  }

  .page [style*="height:90vh"],
  .page [style*="height: 90vh"],
  .page [style*="height:88vh"],
  .page [style*="height: 88vh"] {
    height: 55vh !important;
    min-height: 280px !important;
  }

  /* ─── SEO pages ─── */
  .seo-hero {
    grid-template-columns: 1fr !important;
    padding: 48px 24px 36px !important;
    gap: 20px !important;
  }

  .seo-hero h1 {
    font-size: clamp(36px, 9vw, 52px) !important;
  }

  .seo-body,
  .faq-section,
  .cta-band,
  .home-seo-links,
  .legal-page {
    padding: 48px 24px 64px !important;
  }

  .seo-body h2 {
    font-size: clamp(26px, 6vw, 34px);
    margin-top: 40px;
  }

  .seo-placeholder-grid,
  .seo-gallery-grid,
  .seo-steps,
  .seo-founder,
  .seo-link-grid {
    grid-template-columns: 1fr !important;
  }

  .seo-link-grid {
    gap: 12px !important;
  }

  .cta-band {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  nav#main-nav:not(.hide) {
    display: flex;
  }
}

@media (max-width: 480px) {
  .hero-display {
    font-size: clamp(42px, 11vw, 58px) !important;
  }

  .services-header h1,
  .projects-header h1,
  .contact-header h1,
  .products-header h1,
  .blog-header h1 {
    font-size: clamp(40px, 11vw, 56px) !important;
  }

  .nav-logo,
  .hero-nav-logo {
    font-size: 11px !important;
    letter-spacing: 0.28em !important;
  }
}

@media (min-width: 901px) {
  .nav-toggle,
  .nav-menu-backdrop,
  .mobile-nav-backdrop {
    display: none !important;
  }

  .mobile-nav-panel {
    display: flex !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    z-index: auto !important;
  }

  .hero-nav-overlay .hero-nav-links,
  .hero-nav-overlay .mobile-nav-panel.hero-nav-links {
    background: transparent !important;
  }

  nav,
  .hero-nav-overlay {
    position: fixed !important;
    height: var(--nav-h) !important;
    max-height: var(--nav-h) !important;
    z-index: 200 !important;
  }

  .hero-nav-overlay {
    background: #3a4030 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  nav#main-nav {
    position: fixed !important;
    background: rgba(250, 250, 248, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid var(--light-line) !important;
  }
}

/* ─── Mobile scroll-to-top button ─── */
.scroll-top-btn {
  display: none;
  position: fixed;
  right: 20px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: var(--hero-header-olive, #3a4030);
  color: #fff;
  font-family: var(--font-body, 'Jost', sans-serif);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 10001;
  box-shadow: 0 8px 24px rgba(26, 24, 21, 0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

.scroll-top-btn span {
  display: block;
  transform: translateY(-1px);
}

.scroll-top-btn.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.scroll-top-btn:active {
  transform: scale(0.96);
}

@media (max-width: 900px) {
  .scroll-top-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}