/* ==========================================================
   Service pages: layout overrides to match the live service
   template (hitechsecurity.com.au/service/<slug>/).
   Loaded after styles.css, so these rules take precedence.
   ========================================================== */

/* ---------- Title band: flat light-grey band, dark title, uppercase breadcrumb ---------- */
.page-hero {
  padding: 64px 0;
  color: var(--text);
  background: var(--light);
}
.page-hero h1 {
  color: var(--heading);
  font-size: 2.625rem;          /* 42px */
  font-weight: 800;
  line-height: 52px;
  margin: 0 0 5px;
}
.page-hero .lead { display: none; }
.page-hero .container { display: flex; flex-direction: column; }
.page-hero nav[aria-label="Breadcrumb"] { order: 2; }

.breadcrumb {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #6d7a8c;
}
.breadcrumb li + li::before {
  content: ">";
  margin-right: 5px;
  color: #6d7a8c;
}
.breadcrumb a { color: #6d7a8c; opacity: 1; }
.breadcrumb a:hover { color: var(--heading); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: #6d7a8c; }

/* ---------- Layout: 378px sidebar on the left, article on the right ---------- */
.service-layout {
  gap: 0;
  padding-top: 80px;
  padding-bottom: 80px;
}
@media (min-width: 900px) {
  .service-layout {
    grid-template-columns: 378px minmax(0, 1fr);
    column-gap: 30px;
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

/* ---------- Article ---------- */
.service-main { padding-top: 40px; }
.service-main h2 {
  color: var(--yellow-dark);
  font-size: 1.875rem;          /* 30px */
  font-weight: 700;
  line-height: 30px;
  margin: 0 0 20px;
}
.service-main p { margin: 0 0 25px; }
.service-main p a { color: var(--yellow-dark); font-weight: 700; text-decoration: none; }
.service-main p a:hover { text-decoration: underline; }
.service-main > section + section {
  margin-top: 0;
  padding-top: 20px;
}

/* Reader cards: three plain columns, no boxes */
.service-main .service-grid {
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 0;
}
@media (min-width: 900px) {
  .service-main .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.service-main .service-card {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0 30px 30px 0;
  gap: 0;
}
.service-main .service-card .icon {
  width: 61px;
  height: 61px;
  margin-bottom: 25px;
  color: var(--yellow-dark);
}
.service-main .service-card h2,
.service-main .service-card h3 {
  color: var(--yellow-dark);
  font-size: 1.375rem;          /* 22px */
  font-weight: 700;
  line-height: 32px;
  margin: 0 0 5px;
}
.service-main .service-card p { margin: 0; }

/* Closing call-out */
.service-main .ask-block {
  padding: 40px 0 0;
  text-align: center;
}
.service-main .ask-block--tall { padding-top: 70px; }
.service-main .ask-block .btn {
  padding: 18px 43px;
  border-width: 0;
  font-size: 0.8125rem;
  line-height: 13px;
  letter-spacing: 0;
}
.service-main .ask-block h2 {
  color: #000;
  font-family: var(--font-body, Barlow, sans-serif);
  font-size: 1.375rem;          /* 22px */
  font-weight: 600;
  line-height: 22px;
  margin: 0 0 20px;
}

/* ---------- Sidebar: one grey column of stacked widgets ---------- */
.service-aside {
  background: var(--light);
  padding: 30px;
  gap: 0;
  align-content: start;
}
.service-nav {
  background: none;
  margin: 0 0 37px;
}
.service-nav li { margin: 2px 0; border: 0; }
.service-nav li + li { border: 0; }
.service-nav a {
  display: block;
  background: var(--white);
  padding: 16px 30px 20px;
  color: var(--heading);
  font-size: 1rem;
  font-weight: 500;
  line-height: 19px;
  text-decoration: none;
}
.service-nav a:hover { color: var(--yellow-dark); }
.service-nav [aria-current="page"] { color: var(--heading); font-weight: 500; }

.service-aside .aside-box {
  background:
    linear-gradient(rgba(15, 22, 38, 0.86), rgba(15, 22, 38, 0.86)),
    url('../images/project-photo.jpg') center / cover no-repeat;
  color: var(--white);
  text-align: center;
  padding: 50px 30px 30px;
  margin: 0 0 5px;
}
.service-aside .aside-box .dot {
  width: 100px;
  height: 100px;
  margin: 0 auto 28px;
}
.service-aside .aside-box h2 {
  color: var(--white);
  font-size: 1.875rem;          /* 30px */
  font-weight: 700;
  line-height: 40px;
  margin: 0 0 20px;
}
.service-aside .aside-box p {
  color: var(--white);
  font-size: 1.125rem;          /* 18px */
  line-height: 30.6px;
  margin: 0 0 25px;
}
.service-aside .aside-box .btn-outline {
  padding: 20px 50px;
  border-width: 2px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: 0;
  margin-bottom: 25px;
}

.aside-contact { margin: 0; }
.aside-contact h2 {
  color: var(--heading);
  font-size: 1.125rem;          /* 18px */
  font-weight: 700;
  line-height: 22px;
  margin: 0 0 35px;
  padding-bottom: 15px;
}
.aside-contact p { margin: 0; line-height: 27.2px; }
.aside-contact a { color: var(--text); }

/* ---------- Advantage row (alarm systems) ---------- */
.service-main .advantage-list {
  grid-template-columns: 1fr;
  gap: 0;
  margin: 20px 0 0;
}
@media (min-width: 900px) {
  .service-main .advantage-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.service-main .advantage-list li { padding: 0 30px 0 0; }
.service-main .advantage-list .icon { width: 61px; height: 61px; margin-bottom: 25px; color: var(--yellow-dark); }
.service-main .advantage-list h3 {
  color: var(--yellow-dark);
  font-size: 1.375rem;          /* 22px */
  font-weight: 700;
  line-height: 32px;
  margin: 0 0 5px;
}
.service-main .advantage-list p { margin: 0; }
.service-main .feature-row {
  grid-template-columns: 1fr;
  margin: 30px 0;
}
@media (min-width: 900px) {
  .service-main .feature-row { grid-template-columns: 381px minmax(0, 1fr); gap: 48px; }
}
.service-main .feature-row img { width: 381px; max-width: 100%; height: auto; box-shadow: none; border-radius: 0; }
.service-main .feature-row .did-you-know { padding-left: 0; font-weight: 400; }

/* ---------- Intercoms: H3 section headings and H2 card titles ---------- */
.service-main section > h3 {
  color: var(--yellow-dark);
  font-size: 1.375rem;          /* 22px */
  font-weight: 700;
  line-height: 26px;
  margin: 0 0 20px;
}

/* ---------- Monitoring: two side-by-side service columns with buttons ---------- */
.service-main .service-grid--2 { grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .service-main .service-grid--2 { grid-template-columns: repeat(2, 351px); gap: 30px; }
}
.service-main .service-grid--2 .service-card { padding: 0; }
.service-main .service-card .btn {
  align-self: flex-start;
  margin-top: 25px;
  padding: 18px 38px;
  border-width: 0;
  font-size: 0.8125rem;
  line-height: 13px;
  letter-spacing: 0;
}