/* Wesslink site-wide polish — 2026-08-16
   Additive overrides only, so the approved homepage concept remains intact. */

:root {
  --wesslink-ui-font: "Aptos", "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
}

/* Keep the same clean typographic voice used by the approved homepage. */
body:not(.page-home) {
  --sans: var(--wesslink-ui-font);
  --serif: var(--wesslink-ui-font);
  font-family: var(--wesslink-ui-font);
}

/* Premium paired desktop actions: restrained glass frame + one decisive lime CTA. */
@media (min-width: 821px) {
  .site-header .header-actions {
    gap: .35rem;
    padding: .3rem;
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: 999px;
    background: rgba(5, 8, 6, .58);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .04);
    backdrop-filter: blur(18px);
  }

  .site-header .header-phone,
  .site-header .header-help {
    min-height: 43px;
    border: 0;
    border-radius: 999px;
  }

  .site-header .header-phone {
    min-width: 148px;
    padding: .55rem 1rem .55rem 1.15rem;
    background: rgba(255, 255, 255, .035);
  }

  .site-header .header-phone:hover {
    background: rgba(255, 255, 255, .085);
    box-shadow: inset 0 0 0 1px rgba(183, 255, 24, .38);
  }

  .site-header .header-phone span { color: rgba(255, 255, 255, .5); }
  .site-header .header-phone strong { color: #fff; }

  .site-header .header-help {
    min-width: 118px;
    padding: .65rem 1.15rem;
    background: linear-gradient(135deg, #c6ff42 0%, #99dd13 100%);
    box-shadow: 0 9px 26px rgba(183, 255, 24, .2), inset 0 1px 0 rgba(255, 255, 255, .48);
  }

  .site-header .header-help:hover {
    background: #d2ff68;
    color: #071008;
    transform: translateY(-1px);
    box-shadow: 0 12px 34px rgba(183, 255, 24, .28), inset 0 1px 0 rgba(255, 255, 255, .58);
  }
}

/* Prevent the intrinsic height attribute from stretching either footer logo. */
.footer-logo,
.journal-footer .journal-brand img {
  width: auto;
  height: auto !important;
  max-width: 180px;
  object-fit: contain;
  aspect-ratio: auto;
}

.page-home .footer-logo { width: 132px; max-width: 132px; }

/* Preserve detail in the full-HD hero master; excessive contrast exaggerated compression edges. */
.page-home .home-hero-video {
  filter: brightness(.9) saturate(1.01) contrast(1.03);
  image-rendering: auto;
}

/* Use the published, semantically correct article artwork on homepage story cards. */
.page-home .c3-story:nth-child(1)::before {
  background-image: url('/journal/images/electrical-coc-property-transfer-gauteng.webp');
  background-position: center;
}

.page-home .c3-story:nth-child(2)::before {
  background-image: url('/journal/images/power-keeps-tripping-gauteng.webp');
  background-position: center;
}

.page-home .c3-story:nth-child(3)::before {
  background-image: url('/journal/images/sectional-title-electrical-maintenance.webp');
  background-position: center;
}

.page-home .c3-story::before {
  filter: brightness(.43) saturate(.82) contrast(1.05);
}

/* Relevant editorial imagery replaces the formerly empty homepage service tiles. */
.page-home .c3-service-item {
  position: relative;
  isolation: isolate;
  min-height: 210px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-size: cover;
  background-position: center;
}

.page-home .c3-service-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(4, 8, 6, .14) 4%, rgba(4, 8, 6, .88) 70%, rgba(4, 8, 6, .98) 100%);
}

.page-home .c3-service-item > * { position: relative; z-index: 1; }

.page-home .c3-service-item:nth-child(1),
.page-home .c3-service-item:nth-child(4) {
  background-image: url('/journal/images/power-keeps-tripping-gauteng.webp');
}

.page-home .c3-service-item:nth-child(2),
.page-home .c3-service-item:nth-child(5),
.page-home .c3-service-item:nth-child(8) {
  background-image: url('/journal/images/distribution-board-warning-signs.webp');
}

.page-home .c3-service-item:nth-child(3) {
  background-image: url('/journal/images/electrical-coc-property-transfer-gauteng.webp');
}

.page-home .c3-service-item:nth-child(6),
.page-home .c3-service-item:nth-child(10) {
  background-image: url('/journal/images/sandton-commercial-power-continuity.webp');
}

.page-home .c3-service-item:nth-child(7),
.page-home .c3-service-item:nth-child(9) {
  background-image: url('/journal/images/sectional-title-electrical-maintenance.webp');
}

/* Five genuinely distinct area illustrations, with honest LocationShown metadata. */
.page-home .c3-market-card:nth-child(1)::before {
  background-image: url('/assets/wesslink-electrician-roodepoort-gauteng-artists-impression.webp');
}

.page-home .c3-market-card:nth-child(2)::before {
  background-image: url('/assets/wesslink-electrician-sandton-gauteng-artists-impression.webp');
}

.page-home .c3-market-card:nth-child(3)::before {
  background-image: url('/assets/wesslink-electrician-randburg-gauteng-artists-impression.webp');
}

.page-home .c3-market-card:nth-child(4)::before {
  background-image: url('/assets/wesslink-electrician-midrand-gauteng-artists-impression.webp');
}

.page-home .c3-market-card:nth-child(5)::before {
  background-image: url('/assets/wesslink-electrician-centurion-gauteng-artists-impression.webp');
}

/* The Journal deliberately pairs the clean Wesslink UI type with an editorial serif. */
.journal-index,
.journal-article-page {
  --serif: Georgia, "Times New Roman", serif;
  --sans: var(--wesslink-ui-font);
  font-family: var(--wesslink-ui-font);
}

.journal-index h1,
.journal-index h2,
.journal-index h3,
.journal-article-page h1,
.journal-article-page h2,
.journal-article-page h3 {
  font-family: var(--serif);
}

/* 2026-08-17 visual system: photographic page heroes and a consistent dark canvas. */
.page-services .page-hero,
.page-areas .page-hero,
.page-about .about-hero {
  min-height: clamp(600px, 82svh, 900px);
  isolation: isolate;
  background-color: #040706;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.page-services .page-hero {
  background-image:
    linear-gradient(90deg, rgba(2, 5, 4, .96) 0%, rgba(2, 5, 4, .82) 42%, rgba(2, 5, 4, .18) 78%),
    linear-gradient(0deg, rgba(2, 5, 4, .76), transparent 46%),
    url('/assets/wesslink-electrical-services-gauteng-hero.webp');
  background-position: center, center, 62% center;
}

.page-areas .page-hero {
  background-image:
    linear-gradient(90deg, rgba(2, 5, 4, .96) 0%, rgba(2, 5, 4, .78) 43%, rgba(2, 5, 4, .16) 79%),
    linear-gradient(0deg, rgba(2, 5, 4, .78), transparent 48%),
    url('/assets/wesslink-gauteng-service-areas-hero.webp');
  background-position: center, center, 58% center;
}

.page-about .about-hero {
  background-image:
    linear-gradient(90deg, rgba(2, 5, 4, .95) 0%, rgba(2, 5, 4, .76) 44%, rgba(2, 5, 4, .12) 82%),
    linear-gradient(0deg, rgba(2, 5, 4, .72), transparent 48%),
    url('/assets/wesslink-electrical-team-about-hero.webp');
  background-position: center, center, 64% center;
}

.page-services .page-hero::after,
.page-areas .page-hero::after,
.page-about .about-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(183, 255, 24, .8), transparent 72%);
  box-shadow: 0 0 26px rgba(183, 255, 24, .25);
}

.page-services .page-hero-grid,
.page-areas .page-hero-grid { opacity: .22; }

.page-services .page-hero > div:not(.page-hero-grid),
.page-areas .page-hero > div:not(.page-hero-grid),
.page-about .about-hero > div {
  max-width: 1060px;
  padding-bottom: clamp(1rem, 3vw, 3rem);
}

.page-services .page-hero h1,
.page-areas .page-hero h1,
.page-about .about-hero h1 {
  max-width: 11.5ch;
  font-size: clamp(4rem, 8.5vw, 8.7rem);
  text-wrap: balance;
}

.page-services .page-hero > div > p:last-child,
.page-areas .page-hero > div > p:last-child,
.page-about .about-hero > div > p:last-child {
  max-width: 610px;
  color: rgba(255, 255, 255, .72);
  font-size: 1rem;
}

.page-services .services-directory,
.page-about .about-story {
  color: #f3f4ef;
  background:
    radial-gradient(circle at 84% 6%, rgba(183,255,24,.07), transparent 25rem),
    linear-gradient(145deg, #0b100d, #050706 64%);
}

.page-services .services-directory .section-intro > p,
.page-about .about-story > div:last-child > p:not(.micro) { color: rgba(255,255,255,.62); }

/* Photographic service directory cards with a readable editorial gradient. */
.page-services .services-directory .service-grid {
  gap: 1px;
  border-color: rgba(255,255,255,.13);
  background: rgba(255,255,255,.13);
}

.page-services .services-directory .service-card {
  min-height: 28rem;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  color: #fff;
  background-color: #080c0a;
  background-size: cover;
  background-position: center;
}

.page-services .services-directory .service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(4,7,5,.06) 8%, rgba(4,7,5,.46) 48%, rgba(4,7,5,.97) 91%);
  transition: background 220ms ease;
}

.page-services .services-directory .service-card:hover::before {
  background: linear-gradient(180deg, rgba(4,7,5,.02) 8%, rgba(4,7,5,.3) 44%, rgba(4,7,5,.92) 92%);
}

.page-services .services-directory .service-card p { color: rgba(255,255,255,.64); }
.page-services .services-directory .service-card:nth-child(1) { background-image: url('/journal/images/electrical-coc-property-transfer-gauteng.webp'); }
.page-services .services-directory .service-card:nth-child(2) { background-image: url('/assets/wesslink-electric-fence-compliance-service.webp'); }
.page-services .services-directory .service-card:nth-child(3) { background-image: url('/journal/images/power-keeps-tripping-gauteng.webp'); }
.page-services .services-directory .service-card:nth-child(4) { background-image: url('/journal/images/distribution-board-warning-signs.webp'); }
.page-services .services-directory .service-card:nth-child(5) { background-image: url('/journal/images/sandton-apartment-electrical-checklist.webp'); }
.page-services .services-directory .service-card:nth-child(6) { background-image: url('/journal/images/sandton-commercial-power-continuity.webp'); }
.page-services .services-directory .service-card:nth-child(7) { background-image: url('/journal/images/sectional-title-electrical-maintenance.webp'); }

/* Every homepage capability receives its own relevant image rather than repeated artwork. */
.page-home .c3-service-item:nth-child(1) { background-image: url('/journal/images/power-keeps-tripping-gauteng.webp'); }
.page-home .c3-service-item:nth-child(2) { background-image: url('/journal/images/distribution-board-warning-signs.webp'); }
.page-home .c3-service-item:nth-child(3) { background-image: url('/journal/images/electrical-coc-property-transfer-gauteng.webp'); }
.page-home .c3-service-item:nth-child(4) { background-image: url('/assets/wesslink-electric-fence-compliance-service.webp'); }
.page-home .c3-service-item:nth-child(5) { background-image: url('/journal/images/sandton-apartment-electrical-checklist.webp'); }
.page-home .c3-service-item:nth-child(6) { background-image: url('/journal/images/sandton-commercial-power-continuity.webp'); }
.page-home .c3-service-item:nth-child(7) { background-image: url('/journal/images/sectional-title-electrical-maintenance.webp'); }
.page-home .c3-service-item:nth-child(8) { background-image: url('/assets/wesslink-solar-inverter-backup-power-service.webp'); }
.page-home .c3-service-item:nth-child(9) { background-image: url('/journal/images/prepaid-meter-tampering-roodepoort.webp'); }
.page-home .c3-service-item:nth-child(10) { background-image: url('/journal/images/roodepoort-substation-outage-guide.webp'); }

/* Area directory: editorial, easy to scan and visually linked to each Gauteng hub. */
.page-areas .area-directory {
  padding-top: clamp(2rem, 5vw, 5rem);
  background: radial-gradient(circle at 50% 0, rgba(183,255,24,.065), transparent 32rem), #050807;
}

.page-areas .area-block {
  position: relative;
  min-height: 28rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-bottom: 1.25rem;
  padding: clamp(2rem, 4vw, 4.5rem);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background-color: #08100b;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  isolation: isolate;
}

.page-areas .area-block::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(2,5,4,.96) 0 48%, rgba(2,5,4,.34) 78%), linear-gradient(0deg, rgba(2,5,4,.86), transparent 60%);
}

.page-areas .area-block:nth-child(1) { background-image: url('/assets/wesslink-electrician-roodepoort-gauteng-artists-impression.webp'); }
.page-areas .area-block:nth-child(2) { background-image: url('/assets/wesslink-electrician-sandton-gauteng-artists-impression.webp'); }
.page-areas .area-block:nth-child(3) { background-image: url('/assets/wesslink-electrician-randburg-gauteng-artists-impression.webp'); }
.page-areas .area-block:nth-child(4) { background-image: url('/assets/wesslink-electrician-midrand-gauteng-artists-impression.webp'); }
.page-areas .area-block:nth-child(5) { background-image: url('/assets/wesslink-electrician-centurion-gauteng-artists-impression.webp'); }
.page-areas .area-heading { align-items: end; }
.page-areas .area-heading h2 { font-size: clamp(3.7rem, 8vw, 8rem); }
.page-areas .area-heading p { color: rgba(255,255,255,.7); }
.page-areas .locality-preview { position: relative; z-index: 2; border-color: rgba(255,255,255,.18); }
.page-areas .locality-preview span { color: rgba(255,255,255,.75); }

/* About: dark, restrained and human. */
.page-about .about-story { gap: clamp(3rem, 7vw, 8rem); }
.page-about .about-number { -webkit-text-stroke-color: rgba(183,255,24,.42); }
.page-about .about-story h2 { color: #f3f4ef; }
.page-about .values-grid { border-color: rgba(255,255,255,.16); }
.page-about .values-grid span { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.018); }
.page-about .values-grid em { color: rgba(255,255,255,.55); }
.page-about .referral-section { background: linear-gradient(180deg, #060907, #0a100c); }
.page-about .referral-grid span { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.025); }
.page-about .about-next {
  color: #fff;
  background: radial-gradient(circle at 84% 32%, rgba(183,255,24,.13), transparent 20rem), #050807;
  border-top: 1px solid rgba(183,255,24,.25);
}
.page-about .about-next .micro { color: var(--lime); }
.page-about .about-next .button.lime { color: #061008; background: var(--lime); border-color: var(--lime); }
.page-about .about-next .dark-text-button { color: #fff; border-color: rgba(255,255,255,.32); }

/* Individual service and locality pages inherit the same photographic standard. */
.page-service .service-hero,
.page-city .city-hero,
.page-suburb .city-hero {
  isolation: isolate;
  background-color: #040706;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.page-service .service-hero > div,
.page-city .city-hero-content,
.page-suburb .city-hero-content { position: relative; z-index: 2; }

.service-hero-electrical-coc { background-image: linear-gradient(90deg, rgba(2,5,4,.97) 0 50%, rgba(2,5,4,.25) 82%), url('/journal/images/electrical-coc-property-transfer-gauteng.webp') !important; }
.service-hero-electric-fence-coc { background-image: linear-gradient(90deg, rgba(2,5,4,.97) 0 50%, rgba(2,5,4,.25) 82%), url('/assets/wesslink-electric-fence-compliance-service.webp') !important; }
.service-hero-electrical-fault-finding { background-image: linear-gradient(90deg, rgba(2,5,4,.97) 0 50%, rgba(2,5,4,.25) 82%), url('/journal/images/power-keeps-tripping-gauteng.webp') !important; }
.service-hero-distribution-board-repairs { background-image: linear-gradient(90deg, rgba(2,5,4,.97) 0 50%, rgba(2,5,4,.25) 82%), url('/journal/images/distribution-board-warning-signs.webp') !important; }
.service-hero-residential-electrician { background-image: linear-gradient(90deg, rgba(2,5,4,.97) 0 50%, rgba(2,5,4,.25) 82%), url('/journal/images/sandton-apartment-electrical-checklist.webp') !important; }
.service-hero-commercial-electrician { background-image: linear-gradient(90deg, rgba(2,5,4,.97) 0 50%, rgba(2,5,4,.25) 82%), url('/journal/images/sandton-commercial-power-continuity.webp') !important; }
.service-hero-property-managers-complexes { background-image: linear-gradient(90deg, rgba(2,5,4,.97) 0 50%, rgba(2,5,4,.25) 82%), url('/journal/images/sectional-title-electrical-maintenance.webp') !important; }

.city-hero-roodepoort { background-image: linear-gradient(90deg, rgba(2,5,4,.97) 0 49%, rgba(2,5,4,.28) 82%), url('/assets/wesslink-electrician-roodepoort-gauteng-artists-impression.webp') !important; }
.city-hero-sandton { background-image: linear-gradient(90deg, rgba(2,5,4,.97) 0 49%, rgba(2,5,4,.28) 82%), url('/assets/wesslink-electrician-sandton-gauteng-artists-impression.webp') !important; }
.city-hero-randburg { background-image: linear-gradient(90deg, rgba(2,5,4,.97) 0 49%, rgba(2,5,4,.28) 82%), url('/assets/wesslink-electrician-randburg-gauteng-artists-impression.webp') !important; }
.city-hero-midrand { background-image: linear-gradient(90deg, rgba(2,5,4,.97) 0 49%, rgba(2,5,4,.28) 82%), url('/assets/wesslink-electrician-midrand-gauteng-artists-impression.webp') !important; }
.city-hero-centurion { background-image: linear-gradient(90deg, rgba(2,5,4,.97) 0 49%, rgba(2,5,4,.28) 82%), url('/assets/wesslink-electrician-centurion-gauteng-artists-impression.webp') !important; }

.page-service .service-signal,
.page-city .city-code,
.page-suburb .city-code { opacity: .34; }

@media (max-width: 820px) {
  .page-services .page-hero,
  .page-areas .page-hero,
  .page-about .about-hero {
    min-height: 82svh;
    padding-bottom: 5.8rem;
    background-position: center, center, 68% center;
  }

  .page-services .page-hero::before,
  .page-areas .page-hero::before,
  .page-about .about-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(2,5,4,.28), rgba(2,5,4,.2) 32%, rgba(2,5,4,.95) 88%);
  }

  .page-services .services-directory .service-card { min-height: 24rem; }
  .page-areas .area-block { min-height: 34rem; padding: 1.5rem; }
  .page-areas .area-block::before { background: linear-gradient(0deg, rgba(2,5,4,.97) 0 44%, rgba(2,5,4,.18) 86%); }
  .page-areas .area-heading h2 { font-size: clamp(3.3rem, 17vw, 5.6rem); }
  .page-service .service-hero,
  .page-city .city-hero,
  .page-suburb .city-hero { background-position: 68% center; }
}