/* Shared visual system for Viraj IT support pages */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  color: #17131b;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  color: #17131b;
  font-family: "Space Grotesk", Manrope, sans-serif;
  font-weight: 700;
}

h1 {
  font-size: clamp(40px, 4.6vw, 62px);
  line-height: 1.08;
  letter-spacing: -0.055em;
}

h2 {
  font-size: clamp(30px, 3.5vw, 46px);
  line-height: 1.14;
  letter-spacing: -0.045em;
}

h3 {
  font-size: clamp(20px, 1.9vw, 24px);
  line-height: 1.22;
  letter-spacing: -0.03em;
}

p {
  color: #5b535d;
  font-size: 16px;
  line-height: 1.68;
}

.shell {
  width: min(1240px, calc(100% - 48px));
}

.site-header {
  background: rgba(255, 255, 255, 0.97);
  border-bottom-color: #e9e2eb;
}

.header-inner {
  min-height: 76px;
  gap: 22px;
}

.desktop-nav {
  gap: clamp(14px, 2vw, 27px);
  font-size: 14px;
}

.desktop-nav a {
  color: #29232d;
}

.header-cta {
  border-color: #e5dce7;
  padding: 10px 17px;
  font-size: 14px;
}

.button {
  min-height: 48px;
  font-size: 14px;
  font-weight: 800;
}

.breadcrumb {
  padding-top: 22px;
  color: #746b77;
  font-size: 13px;
}

.eyebrow {
  color: var(--pink);
  font-size: 12px;
  letter-spacing: 0.13em;
}

.lead,
.repair-hero .lead,
.rent-hero .lead,
.hero .lead,
.intro .lead,
.store-hero .lead {
  color: #514852;
  font-size: 18px;
  line-height: 1.65;
}

.repair-hero h1,
.rent-hero h1,
.hero h1,
.intro h1,
.store-hero h1,
.summary-column h1 {
  color: #17131b;
  font-size: clamp(38px, 4.4vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.055em;
}

.repair-hero h1 em,
.rent-hero h1 em,
.hero h1 em,
.intro h1 em,
.store-hero h1 em {
  color: var(--pink);
  font-style: normal;
}

.repair-hero,
.rent-hero,
.hero.shell,
.intro.shell,
.store-hero {
  display: grid;
  margin-block: 28px 18px;
  padding: clamp(28px, 4vw, 42px);
  gap: clamp(24px, 4vw, 48px);
  border: 1px solid #eee3ed;
  border-radius: 26px;
  background: linear-gradient(115deg, #fcf7fb 0%, #f8f0f8 100%);
}

.repair-hero-art,
.rent-hero-visual,
.hero-art,
.storefront-slot,
.photo-stage {
  border-color: #e9dce9;
  border-radius: 22px;
  box-shadow: 0 14px 34px rgba(50, 18, 59, 0.08);
}

.repair-hero .microcopy,
.rent-hero .microcopy,
.hero .microcopy {
  color: #716774;
  font-size: 14px;
}

.section,
.rental-fit,
.expertise-section,
.stories-section,
.service-section,
.location-section,
.detail-section {
  padding-block: clamp(46px, 6vw, 72px);
}

.section-heading p:not(.eyebrow),
.fit-lead,
.repair-copy > p:not(.eyebrow),
.enquiry-copy > p:not(.eyebrow),
.description-copy p,
.description-copy ul {
  color: #5b535d;
  font-size: 16px;
  line-height: 1.7;
}

.problem-card,
.scenario-card,
.process-grid article,
.brand-card,
.review-item,
.address-card,
.identity-card,
.fit-list,
.rental-form,
.product-card,
.related-card,
.service-grid article {
  border-color: #e9e2eb;
  border-radius: 18px;
  box-shadow: 0 7px 24px rgba(39, 16, 46, 0.045);
}

.problem-card p,
.scenario-card p,
.process-grid p,
.fit-list p,
.process-note p,
.brand-card-body p,
.review-item p,
.address-card p,
.service-grid article p,
.value-list p {
  color: #5b535d;
  font-size: 15px;
  line-height: 1.65;
}

.rental-form label {
  font-size: 14px;
}

.rental-form input,
.rental-form select,
.rental-form textarea {
  font-size: 16px;
}

.floating-wa {
  padding: 11px 16px;
  font-size: 14px;
}

.preview-ribbon {
  display: none;
}

@media (max-width: 1100px) {
  .desktop-nav {
    gap: 14px;
    font-size: 13px;
  }
}

@media (max-width: 760px) {
  .shell {
    width: min(100% - 32px, 560px);
  }

  .header-inner {
    min-height: 66px;
    gap: 12px;
  }

  .desktop-nav,
  .header-cta {
    display: none;
  }

  .mobile-menu {
    display: block;
    position: relative;
    font-size: 14px;
    font-weight: 800;
  }

  .mobile-menu summary {
    list-style: none;
    cursor: pointer;
    border: 1px solid #e5dce7;
    border-radius: 10px;
    padding: 9px 12px;
    background: #fff;
    color: #17131b;
  }

  .mobile-menu summary::-webkit-details-marker {
    display: none;
  }

  .mobile-menu summary span {
    margin-left: 8px;
    color: var(--pink);
  }

  .mobile-menu nav {
    position: absolute;
    top: 48px;
    right: 0;
    z-index: 50;
    display: flex;
    width: 240px;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    border: 1px solid #e5dce7;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(39, 16, 46, 0.12);
  }

  .mobile-menu nav a {
    padding: 10px 12px;
    border-radius: 8px;
    color: #29232d;
    font-weight: 700;
  }

  .mobile-menu nav a:hover {
    background: #faf5f9;
    color: var(--pink);
  }

  .repair-hero,
  .rent-hero,
  .hero.shell,
  .intro.shell,
  .store-hero {
    grid-template-columns: minmax(0, 1fr);
    margin-block: 16px 10px;
    padding: 24px 20px;
    gap: 20px;
    border-radius: 22px;
  }

  .repair-hero h1,
  .rent-hero h1,
  .hero h1,
  .intro h1,
  .store-hero h1,
  .summary-column h1 {
    font-size: clamp(34px, 8vw, 44px);
  }

  h2 {
    font-size: clamp(28px, 7vw, 36px);
  }

  .lead,
  .repair-hero .lead,
  .rent-hero .lead,
  .hero .lead,
  .intro .lead,
  .store-hero .lead {
    font-size: 17px;
  }

  .section,
  .rental-fit,
  .expertise-section,
  .stories-section,
  .service-section,
  .location-section,
  .detail-section {
    padding-block: 46px;
  }

  .problem-grid,
  .scenario-grid,
  .process-grid,
  .service-grid,
  .value-list,
  .story-grid,
  .expertise-grid,
  .review-slots,
  .location-grid,
  .gallery-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .brand-grid,
  .review-cards-grid,
  .trust-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-actions,
  .actions,
  .contact-actions {
    flex-direction: column;
  }

  .hero-actions .button,
  .actions .button,
  .contact-actions .button {
    width: 100%;
    justify-content: center;
  }

  .map-placeholder,
  .map-slot,
  .map-placeholder iframe,
  .map-slot iframe {
    max-width: 100%;
  }

  .floating-wa {
    display: none;
  }
}

@media (max-width: 520px) {
  .brand-grid,
  .review-cards-grid,
  .trust-strip {
    grid-template-columns: minmax(0, 1fr);
  }
}