/* 7Arts V9 product card + mockup fixes */
.product-grid-v9{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  align-items:stretch;
}
.product-card-v9{
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  border:1px solid rgba(47,183,183,.18);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.025));
  border-radius:24px;
  min-height:520px;
  position:relative;
}
.product-card-v9::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 65% 0%,rgba(47,183,183,.16),transparent 36%);pointer-events:none;opacity:.75}
.product-card-v9:hover{border-color:rgba(24,224,223,.55);transform:translateY(-4px);transition:.22s ease;box-shadow:0 18px 48px rgba(0,0,0,.35)}
.product-visual-v9{
  width:100%;height:245px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(47,183,183,.10),rgba(0,0,0,.18));
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:20px;position:relative;z-index:1;
}
.product-visual-v9 img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 18px 30px rgba(0,0,0,.34))}
.product-info-v9{padding:26px 28px 28px;display:flex;flex-direction:column;gap:12px;position:relative;z-index:1;flex:1;min-width:0}
.product-cat-v9{font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--teal,#2FB7B7);font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.product-info-v9 h2{
  font-size:clamp(24px,2vw,34px)!important;line-height:1.12!important;margin:0!important;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:anywhere;word-break:normal;max-width:100%;letter-spacing:-.7px!important;
}
.product-info-v9 p{
  font-size:15px;line-height:1.65;color:var(--muted2,#9AA4A4);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.product-bottom-v9{margin-top:auto;padding-top:16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.product-price-v9{font-size:clamp(28px,2.6vw,42px);line-height:1;color:var(--teal,#2FB7B7);font-weight:950;letter-spacing:-1px}
.product-bottom-v9 small{font-size:13px;color:var(--teal,#2FB7B7);font-weight:800;line-height:1.45;display:block;white-space:normal}
.product-page-v9{max-width:1180px;margin:auto}.product-detail-v9{display:grid;grid-template-columns:minmax(340px,520px) 1fr;gap:42px;align-items:center;background:rgba(255,255,255,.035);border:1px solid rgba(47,183,183,.18);border-radius:28px;padding:42px;overflow:hidden}.product-detail-image-v9{min-height:390px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(47,183,183,.09),rgba(255,255,255,.025));border-radius:24px;border:1px solid rgba(255,255,255,.06);padding:28px}.product-detail-image-v9 img{max-width:100%;max-height:360px;object-fit:contain;filter:drop-shadow(0 24px 45px rgba(0,0,0,.4))}.product-detail-info-v9 h2{font-size:48px;color:var(--teal,#2FB7B7);margin:16px 0}.product-detail-info-v9 p{font-size:16px;line-height:1.85;color:var(--muted2,#9AA4A4)}
/* legacy safety: prevent old product title overflow too */
.product-card h2,.card h2{overflow-wrap:anywhere;word-break:normal;line-height:1.15}.product-card{overflow:hidden}.product-card .store-img{object-fit:contain!important;background:rgba(47,183,183,.06)!important;padding:14px!important}.store-grid{align-items:stretch}.store-grid .card{min-width:0}
@media(max-width:1100px){.product-grid-v9{grid-template-columns:repeat(2,minmax(0,1fr))}.product-detail-v9{grid-template-columns:1fr}.product-detail-image-v9{min-height:300px}}
@media(max-width:720px){.product-grid-v9{grid-template-columns:1fr}.product-card-v9{min-height:auto}.product-visual-v9{height:220px}.product-info-v9{padding:22px}.product-info-v9 h2{font-size:26px!important}.product-detail-v9{padding:24px}.product-detail-info-v9 h2{font-size:36px}.product-detail-image-v9{min-height:240px}.product-detail-image-v9 img{max-height:230px}}

/* V11.60 - Mobile only home fix
   Scope: mobile screens only. Desktop layout remains untouched. */
@media (max-width: 767px) {
  html, body { overflow-x: hidden !important; }

  /* Hide desktop hero side service rail on mobile. It was designed for desktop only. */
  .hero .sorbit,
  #hero .sorbit,
  .sorbit {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* Keep hero clean and prevent decorative base bars from appearing as broken blocks. */
  .hero {
    min-height: auto !important;
    padding: 100px 20px 38px !important;
    overflow: hidden !important;
  }
  .hero .hl {
    position: relative !important;
    z-index: 3 !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
  }
  .hcenter {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    opacity: 1 !important;
    margin: 26px auto 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    pointer-events: none !important;
  }
  .l3w {
    width: 100% !important;
    height: 330px !important;
  }
  .hero-logo-img {
    width: min(74vw, 285px) !important;
    height: auto !important;
  }
  .plat,
  .pr,
  .glow-ground {
    display: none !important;
  }
  .hero-logo-plate {
    inset: 12% 0 auto !important;
    height: 76% !important;
  }

  /* Mobile ticker: visible but contained. */
  .ticker {
    position: relative !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    min-height: 48px !important;
    height: 48px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    z-index: 2 !important;
  }
  .ticker .ttrack {
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    width: max-content !important;
    min-width: max-content !important;
  }
  .ticker .ti {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    letter-spacing: 4px !important;
  }

  /* Service cards: convert to readable mobile cards and constrain illustrations/icons. */
  .svcsec {
    padding: 58px 20px 48px !important;
    overflow: hidden !important;
  }
  .svctop {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .sgrid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    overflow: visible !important;
  }
  .sgrid .sc,
  .sc {
    position: relative !important;
    min-height: 138px !important;
    height: auto !important;
    padding: 24px 22px !important;
    overflow: hidden !important;
    border-top: 0 !important;
    border-left: 2px solid rgba(47,183,183,.35) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.035) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 8px !important;
  }
  .sgrid .sc::after,
  .sc::after {
    opacity: .55 !important;
    pointer-events: none !important;
  }
  .scico {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 96px !important;
    height: 96px !important;
    border: 0 !important;
    background: transparent !important;
    opacity: .16 !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }
  .scico img,
  .scico svg {
    display: block !important;
    width: 96px !important;
    max-width: 96px !important;
    height: 96px !important;
    max-height: 96px !important;
    object-fit: contain !important;
  }
  .scn,
  .scname,
  .scdesc {
    position: relative !important;
    z-index: 2 !important;
    max-width: calc(100% - 105px) !important;
  }
  .scn {
    font-size: 11px !important;
    letter-spacing: 3px !important;
    color: rgba(47,183,183,.72) !important;
  }
  .scname {
    font-size: 22px !important;
    line-height: 1.12 !important;
    color: #F4F7F7 !important;
  }
  .scdesc {
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: rgba(244,247,247,.68) !important;
  }

  /* Homepage selected work marquee: keep image strip visible and clean on mobile. */
  #work,
  .worksec {
    display: block !important;
    visibility: visible !important;
    padding: 58px 20px !important;
    overflow: hidden !important;
  }
  #work .wgrid.home-work-marquee,
  .home-work-marquee {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    padding: 10px 0 18px !important;
  }
  #work .home-work-track,
  .home-work-track {
    display: flex !important;
    gap: 14px !important;
    width: max-content !important;
    min-width: max-content !important;
  }
  #work .home-work-track .wcard,
  .home-work-track .wcard,
  .wgrid.home-work-marquee .wcard {
    flex: 0 0 78vw !important;
    width: 78vw !important;
    min-width: 260px !important;
    max-width: 340px !important;
    height: auto !important;
  }
  #work .wimg,
  .home-work-marquee .wimg {
    height: 220px !important;
  }
  #work .wimg img,
  .home-work-marquee .wimg img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

@media (max-width: 390px) {
  .hero { padding-left: 16px !important; padding-right: 16px !important; }
  .l3w { height: 300px !important; }
  .hero-logo-img { width: min(76vw, 260px) !important; }
  .scname { font-size: 20px !important; }
  .scdesc { font-size: 12.5px !important; }
  .scico,
  .scico img,
  .scico svg { width: 82px !important; height: 82px !important; max-width: 82px !important; max-height: 82px !important; }
  .scn,
  .scname,
  .scdesc { max-width: calc(100% - 88px) !important; }
}


/* V11.61 - Mobile performance safe tuning only */
@media (max-width: 767px) {
  /* Hide non-essential decorative/cursor layers on mobile to reduce first paint cost. */
  #c, #cr, .pt, .bgrid, .horb { display: none !important; }

  /* Contain below-the-fold sections so mobile Chrome paints the first screen faster. */
  #services, .svcsec, .mets, #work, .worksec, #contact, .ctasec, footer {
    content-visibility: auto;
    contain-intrinsic-size: 720px;
  }

  /* Keep the above-the-fold hero image predictable for LCP. */
  .hero-logo-img, .logo-mark {
    image-rendering: auto;
  }
  .hero-logo-img {
    display:block!important;
    aspect-ratio: 1 / 1;
    max-width: min(72vw, 280px) !important;
  }
  .l3w { height: 300px !important; }

  /* Reduce mobile animation cost without changing desktop. */
  .hero * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .ticker .ttrack, .home-work-track { will-change: transform; }
}


/* V11.62 - Mobile-only performance fixes
   These rules are scoped to phones only and do not change desktop layout. */
@media (max-width: 767px) {
  /* Remove desktop-only cursor layers and decorative effects on touch devices. */
  #c, #cr,
  .custom-cursor, .cursor-dot, .cursor-ring, .mouse-cursor, .pointer-cursor,
  .orb, .orbit, .rings, .noise, .grain, .gridbg, .bg-grid, .hero-grid,
  .decor, .decorative, .glow, .glow2, .blur, .blur-circle {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Prevent expensive paint/reflow for sections outside the first viewport. */
  .svcsec, #work, .worksec, .storesec, .ctasec, footer,
  .product-grid-v9, .portfolio-grid, .wgrid, .sgrid {
    content-visibility: auto;
    contain-intrinsic-size: 1px 900px;
  }

  /* Keep images contained and cheaper to paint on mobile. */
  img {
    max-width: 100%;
    height: auto;
  }
  .hero img,
  .logo-mark,
  .hero-logo-img,
  .product-visual-v9 img,
  .product-detail-image-v9 img,
  .wimg img,
  .store-img {
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  /* Limit offscreen/large decorative hero area on mobile without touching desktop. */
  .hero, #hero {
    contain: layout paint style;
  }
  .hcenter, .l3w, .hero-logo-plate {
    contain: layout paint;
  }

  /* Reduce animation cost on slow mobile PageSpeed simulation. */
  .home-work-track, .ticker .ttrack, .marquee, .marquee-track {
    will-change: transform;
  }
  .sc, .wcard, .product-card-v9, .card {
    transition-property: transform, border-color, opacity !important;
  }

  /* Avoid layout jumps from floating buttons. */
  .wa {
    width: 58px !important;
    height: 58px !important;
    contain: layout paint style !important;
  }
}