/*
 * Section-level IntegrityTeks design rules ported from the approved static page.
 * This file carries section styling needed by WordPress block markup; wp-adapter.css
 * remains limited to wrapper and image-block glue.
 */

.cats {
  background: var(--white);
  padding: 18px 0;
}

.stats-band {
  background: var(--navy-grad);
  color: var(--white);
  padding: clamp(26px, 2.6vw, 40px) 0;
}

.values--whatwedo {
  background: var(--cool);
}

.values--howwehelp {
  background: var(--white);
  padding-top: 44px;
}

.values-grid--how {
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.values-grid--how .value-card {
  min-height: 196px;
}

.values-grid--how .value-body {
  max-width: 62%;
  padding: 20px 18px;
}

.values-grid--how .value-card h3 {
  font-size: 16px;
  line-height: 1.2;
}

.values-grid--how .value-card p {
  font-size: 13px;
}

.section-head p.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0;
}

.value-split .wp-block-image.value-img img {
  clip-path: polygon(60% 0, 100% 0, 100% 100%, 48% 100%);
}

.value-full-van {
  --photo: url("https://integrityteks.com/wp-content/uploads/2026/07/svc-van.jpg");
}

.value-badge .wp-block-heading {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin: 0;
}

.cat-copy h3 a,
.tile-learn a {
  color: inherit;
  text-decoration: none;
}

.bento-tile:not(.tile-recovery) p.tile-learn {
  flex: 0 0 auto;
}

.tile-learn a {
  display: inline-flex;
}

.cat-card,
.svc-card,
.area-card {
  cursor: pointer;
}

/* B3 — Center a trailing partial row in the 3-up services grid so leftover
   cards do not orphan to the left. The grid runs on a 6-column track with each
   card spanning 2, which yields card widths and gaps identical to a repeat(3)
   grid for full rows, while letting a lone card (count = 3n+1) or a pair
   (count = 3n+2) be placed dead centre. Full rows (3n) are never matched. */
@media (min-width: 861px) {
  .bento { grid-template-columns: repeat(6, 1fr); grid-auto-flow: row; }
  .bento .svc-card { grid-column: span 2; }
  /* lone trailing card -> centre columns 3-4 */
  .bento .svc-card:last-child:nth-child(3n + 1) { grid-column: 3 / span 2; }
  /* two trailing cards -> centred pair (this card 2-3, the last card flows to 4-5) */
  .bento .svc-card:nth-child(3n + 1):nth-last-child(2) { grid-column: 2 / span 2; }
}

.guarantee-card .g-num.wp-block-heading,
.guarantee-card p.g-desc {
  margin: 0;
}

.guarantee-card .g-num.wp-block-heading {
  line-height: 1.6;
}

.guarantee-card .g-desc {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
}

.guarantee-card p.g-desc {
  margin-top: 8px;
}

.emergency p.stat-kicker {
  margin: 0 0 16px;
  max-width: none;
}

.emergency-cta {
  position: relative;
  flex: 0 0 auto;
  text-decoration: none;
}

.emergency-cta > .wp-block-html {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  color: inherit;
}

.emergency-cta > .wp-block-html svg {
  display: block;
  width: 18px;
  height: 18px;
}

.emergency-cta .wp-block-buttons,
.emergency-cta .wp-block-button {
  display: inline-flex;
  margin: 0;
}

.emergency-cta .wp-block-button__link {
  position: static;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-decoration: none;
}

.emergency-cta .wp-block-button__link::before {
  content: "";
  position: absolute;
  inset: 0;
}

.reviews {
  background: var(--white);
}

.section-head p.head-aside {
  margin: 0;
}

.section-head p.head-aside a {
  color: inherit;
  text-decoration: none;
}

.review-card .wp-block-html {
  line-height: 1;
}

.review-card p {
  margin: 0;
}

.reviews-cta .wp-block-button.btn.btn-outline {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.reviews-cta .wp-block-button.btn.btn-outline .wp-block-button__link {
  background: transparent;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--navy);
  border-radius: 12px;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  padding: 15px 30px;
  text-decoration: none;
  white-space: nowrap;
}

.reviews-cta .wp-block-button.btn.btn-outline .wp-block-button__link:hover {
  color: var(--deep);
  border-color: var(--deep);
}

.stats-band .wrap {
  display: block;
}

.itk-trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px 30px;
  align-items: center;
}

.itk-trust-item {
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--white);
  text-decoration: none;
}

.itk-trust-ic {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  color: rgba(255, 255, 255, 0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.itk-trust-ic svg {
  width: 100%;
  height: 100%;
}

.itk-trust-tx {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.itk-trust-tx p {
  margin: 0;
}

.itk-trust-num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(28px, 2.3vw, 34px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--white);
}

.itk-trust-num.wp-block-group {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
}

.itk-trust-rating-link {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.itk-trust-rating-link:hover {
  color: inherit;
}

.itk-trust-num .count,
.itk-trust-num .itk-trust-unit {
  margin: 0;
}

.itk-trust-unit {
  font-size: 0.46em;
  font-weight: 600;
  opacity: 0.9;
  margin-left: 5px;
}

.itk-trust-rating-link .itk-trust-unit {
  margin-left: 0.32em;
}

.itk-trust-label {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.4;
}

.itk-trust-reviews {
  transition: opacity 0.18s ease;
}

.itk-trust-reviews:hover {
  opacity: 0.85;
}

.stats-band .count {
  font-variant-numeric: tabular-nums;
}

.itk-trust-stars {
  display: inline-flex;
  align-items: center;
  margin-right: 9px;
}

.itk-trust-stars svg {
  display: block;
  width: 84px;
  height: 16px;
}

.wp-block-heading .fix {
  display: inline-block;
  position: relative;
  color: var(--deep);
}

.wp-block-heading .fix em {
  font-style: normal;
  position: relative;
}

.wp-block-heading .fix em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.02em;
  height: 0.1em;
  background: var(--green);
  border-radius: 99px;
}

.problem--business-it h2 .fix {
  display: block;
}

.problem--business-it h2 .q {
  font-weight: 400;
  margin-top: 12px;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.5;
  letter-spacing: 0;
}

.problem--business-it .problem-note {
  /* Full-width band body measure. 620px left a headless intro (180-184) looking
     like a narrow column with dead space on the right; 780px fills the band while
     staying a comfortable measure. Paragraph + CTA spacing below is unchanged. */
  max-width: 780px;
}

.problem--residential .problem-note {
  max-width: 780px;
}

.problem-list,
.areas-list {
  list-style: none;
  padding-left: 0;
}

.problem-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 44px;
  margin-top: 26px;
  margin-bottom: 26px;
}

@media (max-width: 860px) {
  .problem-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .problem-list {
    grid-template-columns: 1fr;
  }
}

.problem-list li,
.areas-list li {
  position: relative;
  padding-left: 24px;
  color: var(--ink);
  line-height: 1.5;
}

.problem-list li::before,
.areas-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 12px;
  height: 12px;
  background: var(--green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6.5 5 9l5-6' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6.5 5 9l5-6' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.areas-list {
  display: grid;
  gap: 7px;
  margin: 4px 0 18px;
  color: var(--muted);
}

.problem-cta .wp-block-buttons,
.problem-cta .wp-block-button {
  margin: 0;
}

.problem-cta .wp-block-button.btn {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.problem-cta .wp-block-button.btn .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px solid transparent;
  border-radius: 12px;
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
  padding: 19px 38px;
  text-decoration: none;
  white-space: nowrap;
}

.problem-cta .wp-block-button.btn-primary .wp-block-button__link {
  background: var(--navy);
  color: var(--white);
}

.problem-cta .wp-block-button.btn-primary .wp-block-button__link:hover {
  background: var(--deep);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.biz-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}

/* Residential services: card lists vary a lot in length. Size each card to its
   own content (no forced row-stretch) so short cards don't leave a large empty
   void. Scoped to the residential page so Business IT keeps its even cards. */
.biz-cards--residential {
  align-items: start;
}

.biz-card {
  flex: 0 0 calc((100% - 22px) / 2);
  background: var(--navy-grad);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.biz-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-float);
}

.biz-figure {
  position: relative;
  width: 100%;
  height: 188px;
  overflow: hidden;
  background: var(--deep);
}

.biz-figure::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  background: linear-gradient(to bottom, rgba(22, 48, 124, 0) 0%, rgba(22, 48, 124, 0.9) 100%);
  pointer-events: none;
}

.biz-figure .wp-block-image.biz-img {
  margin: 0;
  width: 100%;
  height: 100%;
}

.biz-figure .wp-block-image.biz-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.biz-card:hover .biz-figure .wp-block-image.biz-img img {
  transform: scale(1.04);
}

.biz-body {
  padding: 24px 26px 26px;
  display: flex;
  flex-direction: column;
}

.biz-body h3 {
  font-size: 19px;
  letter-spacing: -0.01em;
  color: #fff;
  line-height: 1.25;
}

.biz-body > p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 14.5px;
  line-height: 1.55;
  margin-top: 8px;
}

.biz-body ul {
  list-style: none;
  margin-top: 16px;
  display: grid;
  gap: 9px;
  padding-left: 0;
}

.biz-body li {
  position: relative;
  padding-left: 25px;
  font-size: 14.5px;
  line-height: 1.5;
  color: #fff;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5 5 9l5-6' fill='none' stroke='%2328A745' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 4px / 14px 14px;
}

/* Residential cards: some checklists are much longer than their row-neighbour's
   (e.g. Laptop Repair vs Desktop), leaving one card far taller. On desktop, split
   each residential card's list into two short columns so tall lists roughly halve
   in height and the row reads balanced. The base .biz-body ul grid stays intact
   (row-gap 9px, green-check bullets unchanged); grid items never split mid-item.
   Collapses to one column inside the narrow single-card mobile layout (<=720px). */
@media (min-width: 721px) {
  .biz-cards--residential .biz-body ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 30px;
  }
}

.wc-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 6px;
}

.wc-card {
  flex: 0 1 calc(33.333% - 10px);
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.wc-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-float);
}

.wc-card strong {
  color: var(--navy);
}

.wc-card p {
  margin: 0;
}

.wc-check {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(40, 167, 69, 0.12);
  color: var(--green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wc-check svg {
  width: 17px;
  height: 17px;
}

.growth-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.growth-pills .growth-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 11px 18px;
  box-shadow: var(--shadow-card);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  color: var(--navy);
}

.growth-pills .growth-pill > .wp-block-html {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  color: var(--green);
}

.growth-pills .growth-pill p {
  margin: 0;
}

.growth-pills .growth-pill svg {
  width: 16px;
  height: 16px;
  color: var(--green);
  display: block;
}

.growth-intro {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 16px;
  color: var(--navy);
  margin-top: 22px;
}

/* .step-num is a paragraph here (block-valid), so neutralise the .process-step p
   top margin the approved sheet applies to body copy. */
.process-band .process-step .step-num {
  margin-top: 0;
}

.whychoose,
.problem--business-it,
.process-band,
.section--related,
.faq-section--business {
  background: var(--cool);
}

.business-growth {
  background: var(--white);
}

.service-areas--inner {
  background: var(--white);
}

.wp-block-post-content .pricing-band {
  background: var(--white);
}

.service-areas--inner::before {
  background-position: 100% 43%;
}

.service-areas--inner .areas-van::after {
  display: none;
}

.service-areas--inner .areas-mapcol {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.service-areas--inner .areas-copy .areas-grid {
  width: 100%;
  margin-top: 6px;
}

.service-areas--inner .areas-directions {
  margin-top: 14px;
  background: var(--white);
}

.final-cta--solid {
  background: var(--navy);
}

.related-grid .value-card {
  cursor: pointer;
}

.value-learn a {
  color: inherit;
  text-decoration: none;
}

body.home .main-nav a[href="/"],
body.page-id-59 .main-nav a[href="/business-it-services/"],
body.page-id-68 .main-nav a[href="/residential-it-support/"] {
  color: var(--navy);
  border-bottom-color: var(--navy);
}

body.home .mobile-menu a[href="/"],
body.page-id-59 .mobile-menu a[href="/business-it-services/"],
body.page-id-68 .mobile-menu a[href="/residential-it-support/"] {
  color: var(--navy);
  font-weight: 700;
}

.about-intro .intro-copy {
  max-width: 760px;
}

.about-intro .intro-copy p {
  color: var(--muted, #5b6172);
  font-size: 16.5px;
  line-height: 1.7;
  margin-top: 16px;
}

.about-intro .intro-copy p:first-of-type {
  margin-top: 18px;
}

.mission-band {
  background: var(--cool);
}

.mission-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 5px solid var(--green);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: clamp(26px, 3.4vw, 40px);
  max-width: 920px;
  margin: 0 auto;
}

.mission-card .eyebrow {
  color: var(--green);
}

.mission-card p {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.4;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin-top: 12px;
}

.mission-card p.eyebrow,
.oakville-band p.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.22em;
  margin-top: 0;
}

.why-choose-about,
.who-section,
.oakville-band {
  background: var(--white);
}

.why-choose-about .why-close,
.how-work-section .how-close {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 16px;
  color: var(--navy);
}

.why-choose-about .why-close {
  text-align: center;
  margin-top: 26px;
}

.why-choose-about .wc-card strong {
  font-weight: 400;
}

#core-services,
.how-work-section {
  background: var(--cool);
}

.svc-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 8px;
}

.svc-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  padding: 22px 22px 24px;
}

.svc-item h3 {
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--navy);
  line-height: 1.3;
  padding-left: 24px;
  position: relative;
}

.svc-item h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5 5 9l5-6' fill='none' stroke='%2328A745' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
}

.svc-item p {
  color: var(--muted, #5b6172);
  font-size: 14.5px;
  line-height: 1.6;
  margin-top: 10px;
}

.oakville-band .split-layout {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.oakville-band .split-copy {
  max-width: 560px;
}

.oakville-band p {
  color: var(--muted, #5b6172);
  font-size: 16.5px;
  line-height: 1.7;
  margin-top: 14px;
}

.oakville-band .split-figure {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.oakville-band .split-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.how-work {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 22px;
  margin-top: 8px;
}

.how-step {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
}

.how-num {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.how-step span:last-child {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink);
  align-self: center;
}

.how-work-section .how-close {
  margin-top: 22px;
}

.audience {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 8px;
}

.audience-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: clamp(24px, 3vw, 32px);
}

.audience-card h3 {
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--navy);
}

.audience-card ul {
  list-style: none;
  margin-top: 16px;
  display: grid;
  gap: 11px;
  padding-left: 0;
}

.audience-card li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5 5 9l5-6' fill='none' stroke='%2328A745' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 4px / 15px 15px;
}

.final-cta .or-call a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.final-cta .cta-sub {
  color: rgba(255, 255, 255, 0.78);
  font-size: 17px;
  line-height: 1.6;
  margin-top: 16px;
  max-width: 540px;
}

.about-page-final {
  background: var(--navy);
}

@media (max-width: 900px) {
  .svc-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  .oakville-band .split-layout {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .oakville-band .split-figure {
    order: -1;
  }
}

@media (max-width: 720px) {
  .audience {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .svc-list,
  .how-work {
    grid-template-columns: 1fr;
  }
}

.herox-media .wp-block-image.herox-img {
  height: 100%;
}

.herox-media .wp-block-image.herox-img img {
  min-height: 0;
  clip-path: polygon(13% 0, 100% 0, 100% 100%, 4% 100%);
}

.wp-block-buttons.herox-ctas,
.herox-ctas .wp-block-button {
  margin: 0;
}

.svc-hero .wp-block-buttons.herox-ctas {
  gap: 12px;
  flex-wrap: nowrap;
  margin-top: 7px;
}

.herox-ctas .wp-block-button.btn {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.herox-ctas .wp-block-button.btn .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px solid transparent;
  border-radius: 12px;
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
  padding: 19px 38px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.svc-hero .herox-ctas .wp-block-button.btn .wp-block-button__link {
  min-height: 52px;
  padding: 12px 24px;
  font-size: 15px;
  line-height: 1.3;
}

.herox-ctas .wp-block-button.btn-primary .wp-block-button__link {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
}

.herox-ctas .wp-block-button.btn-primary .wp-block-button__link:hover {
  background: var(--cool);
  color: var(--deep);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.herox-ctas .wp-block-button.btn-outline .wp-block-button__link {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}

.herox-ctas .wp-block-button.btn-outline .wp-block-button__link:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}

.herox-ctas .wp-block-button.has-phone-icon .wp-block-button__link::before {
  content: "";
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 2h3l1.5 3.5L5.7 7a9 9 0 0 0 3.3 3.3l1.5-1.8L14 10v3a1 1 0 0 1-1 1A11 11 0 0 1 2 3a1 1 0 0 1 1-1Z' fill='currentColor'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 2h3l1.5 3.5L5.7 7a9 9 0 0 0 3.3 3.3l1.5-1.8L14 10v3a1 1 0 0 1-1 1A11 11 0 0 1 2 3a1 1 0 0 1 1-1Z' fill='currentColor'/%3E%3C/svg%3E") center / contain no-repeat;
}

.herox-eyebrow {
  font-size: clamp(8.5px, 2.2vw, 12px);
  letter-spacing: 0.1em;
  white-space: nowrap;
  gap: 8px;
}

.herox-eyebrow::before {
  width: 18px;
}

.herox-promise {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.herox-promise p {
  margin: 0;
}

.herox-promise .herox-promise-ic {
  flex: 0 0 auto;
  color: var(--green);
  display: inline-flex;
  margin-top: 1px;
}

.herox-promise .herox-promise-ic svg {
  width: 18px;
  height: 18px;
}

@media (min-width: 1500px) {
  .herox-media {
    max-width: 880px;
  }
}

@media (min-width: 1101px) {
  .service-areas--inner .areas-layout {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .service-areas--inner .areas-van {
    height: 400px;
  }
}

@media (min-width: 981px) {
  .values--whatwedo {
    padding-bottom: 22px;
  }

  .values--howwehelp {
    padding-top: 30px;
  }
}

@media (max-width: 1100px) {
  .herox-media {
    height: 280px;
  }

  .herox-media .wp-block-image.herox-img img {
    clip-path: none;
  }
}

@media (max-width: 980px) {
  .itk-trust {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 28px;
  }

  .values-grid--how {
    grid-template-columns: repeat(2, 1fr);
  }

  .wc-card {
    flex-basis: calc(50% - 7px);
  }
}

/* (Removed the .biz-card:last-child:nth-child(odd) single-orphan rule — the
   flex-wrap + justify-content:center default on .biz-cards now centers any short
   last row generically, so the special-case nth-child rule is redundant.) */
@media (max-width: 720px) {
  .biz-card {
    flex-basis: 100%;
  }

  .biz-figure {
    height: 200px;
  }
}

@media (max-width: 600px) {
  .wc-card {
    flex-basis: 100%;
  }
}

@media (max-width: 560px) {
  .herox-media {
    height: 230px;
  }

  .svc-hero .wp-block-buttons.herox-ctas {
    flex-wrap: wrap;
  }

  .herox-ctas .wp-block-button.btn,
  .herox-ctas .wp-block-button.btn .wp-block-button__link {
    width: 100%;
  }

  .herox-badge {
    right: auto;
  }

  .itk-trust {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-left: clamp(10px, 5vw, 30px);
  }

  .itk-trust-item {
    gap: 14px;
  }

  .itk-trust-ic {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 480px) {
  .biz-body {
    padding: 22px 22px 24px;
  }
}

/* Service Areas: ported from home-v3 stylesheet + inline section rules. */
.service-areas {
  position: relative;
  overflow: hidden;
  background: #F2F5F8;
  isolation: isolate;
}

.service-areas::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/wp-content/uploads/2026/07/oakville-map.png") 50% 43% / 135% auto no-repeat;
  opacity: 0.36;
  filter: grayscale(1) saturate(0.12) contrast(1.06);
  transform: scale(1.02);
  pointer-events: none;
}

.service-areas .wrap {
  position: relative;
  z-index: 1;
}

.service-areas .area-card {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(2px);
}

.area-card p.area-region {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.area-card p.learn {
  margin: 6px 0 0;
}

.area-card p.learn a {
  color: inherit;
  text-decoration: none;
}

.areas-van::after {
  display: none;
}

.areas-van > .wp-block-html {
  width: 100%;
  height: 100%;
}

.areas-van > .wp-block-html iframe.img-fill {
  width: 100%;
  height: 100%;
}

.areas-mapcol {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.areas-copy .areas-grid {
  width: 100%;
  margin-top: 6px;
}

.areas-directions {
  margin-top: 14px;
  background: var(--white);
}

@media (min-width: 1101px) {
  .areas-layout {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .areas-van {
    height: 400px;
  }

  .service-areas::before {
    background-position: 100% 43%;
  }
}

@media (max-width: 560px) {
  .service-areas::before {
    background-size: auto 112%;
    background-position: 68% 72%;
    opacity: 0.2;
  }
}

@media (max-width: 600px) {
  .values-grid--how {
    grid-template-columns: 1fr;
  }

  .values-grid--how .value-card {
    min-height: 168px;
  }

  .values-grid--how .value-body {
    max-width: 60%;
  }
}

/* How It Works: inline source rules from home-v3.html. */
.howit-strip {
  display: flex;
  align-items: center;
  gap: 22px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  transition: transform 0.18s ease, background 0.18s ease;
}

.howit-strip:hover {
  transform: translateX(6px);
  background: rgba(255, 255, 255, 0.09);
}

.wp-block-image.howit-thumb {
  flex: 0 0 auto;
  width: 110px;
  height: 110px;
  margin: 0;
  border-radius: 16px;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 10px 26px rgba(0, 0, 0, 0.34);
  overflow: hidden;
}

.wp-block-image.howit-thumb img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
}

.howit-strip-tx {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 4px;
}

.howit-strip-tx h3 {
  color: var(--white);
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}

.howit-strip-tx p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

.howit-arrow {
  display: flex;
  justify-content: center;
  color: var(--green);
  margin: -2px 0;
}

.howit-arrow svg {
  width: 24px;
  height: 24px;
}

.howit-cta {
  margin-top: 28px;
}

.howit-cta p {
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.howit-cta .wp-block-button.btn.btn-white {
  padding: 0;
}

.howit-cta .wp-block-button.btn.btn-white .wp-block-button__link {
  background: var(--white);
  color: var(--deep);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  border: 0;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  padding: 15px 18px;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
}

.howit-cta .wp-block-button.btn.btn-white .wp-block-button__link::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 2h3l1.5 3.5L5.7 7a9 9 0 0 0 3.3 3.3l1.5-1.8L14 10v3a1 1 0 0 1-1 1A11 11 0 0 1 2 3a1 1 0 0 1 1-1Z' fill='currentColor'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 2h3l1.5 3.5L5.7 7a9 9 0 0 0 3.3 3.3l1.5-1.8L14 10v3a1 1 0 0 1-1 1A11 11 0 0 1 2 3a1 1 0 0 1 1-1Z' fill='currentColor'/%3E%3C/svg%3E") center / contain no-repeat;
}

.why-item p {
  margin: 0;
}

.why-item > .wp-block-html {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
}

.why-item > .wp-block-html .check {
  display: inline-flex;
}

.why-item > .wp-block-html svg {
  display: block;
}

.final-cta .wp-block-buttons,
.final-cta .wp-block-button {
  margin: 0;
}

.final-cta .wp-block-button.btn.btn-white.btn-lg {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.final-cta .wp-block-button.btn.btn-white.btn-lg .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  border-radius: 12px;
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  padding: 12px 24px;
  text-decoration: none;
  white-space: nowrap;
}

.final-cta .wp-block-button.btn.btn-white.btn-lg .wp-block-button__link:hover {
  color: var(--deep);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  transform: translateY(-2px);
}

.final-cta .or-call {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}

.final-cta .or-call p {
  margin: 0;
}

.final-cta .or-call a {
  text-decoration: none;
}

.final-cta .or-call > .wp-block-html {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
}

.final-cta .or-call svg {
  display: block;
  flex: 0 0 auto;
}

@media (min-width: 1101px) {
  .howit-grid {
    align-items: stretch;
  }

  .howit-left {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .howit-left .why-close {
    margin-bottom: auto;
  }

  .howit-cta {
    margin-top: 0;
  }
}

@media (max-width: 560px) {
  .howit-strip {
    padding: 14px 16px;
    gap: 16px;
  }

  .wp-block-image.howit-thumb {
    width: 88px;
    height: 88px;
    border-radius: 14px;
  }
}

/* =====================================================================
   Section layout polish — Residential (68) + Business IT Support (86).
   Shared rules; verified against hub (59), home (6), Data Recovery (77),
   About (80), New Businesses (84) so nothing else shifts.
   ===================================================================== */

/* A1 / B4 — Explicit section-background alternation utilities.
   The shared semantic-section classes (.whychoose, .process-band,
   .service-areas, .faq-section--business, .business-growth ...) each pin a
   fixed background, so alternation breaks whenever the per-page section order
   differs or a new band is inserted. Applying one of these utilities in the
   page content pins a band's background independent of source order / nth
   position. Scoped to post-content for the specificity needed to beat the
   single-class section defaults. */
.wp-block-post-content .itk-bg-white { background: var(--white); }
.wp-block-post-content .itk-bg-cool  { background: var(--cool); }

/* A3 / B2 — "Common Problems" / small-business pain-point list.
   Lift the flat check-list into a single soft-bordered panel with small navy
   check icons — deliberately lighter in weight than the elevated
   green-circle .wc-card benefit cards it sits beside, so the two never read
   as the same component. Only .problem-list carries this (Residential +
   Business); the other pages' problem sections use different markup. */
.problem-list {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 30px;
}

/* Navy checks for the panel list (.areas-list keeps its green checks — this
   overrides only the shared green fill set earlier for .problem-list). */
.problem-list li::before {
  background: var(--navy);
}

/* Business pain-point list: 7 items read best as two columns. Scoped away
   from the residential problem list (which stays 3-up). Collapses to a
   single column on the narrow mobile layout via the base .problem-list rule. */
@media (min-width: 561px) {
  .problem--business-it:not(.problem--residential) .problem-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px 44px;
  }
}

/* B1 — Business hero: the three verbatim client paragraphs read as a wall of
   uniform muted text. Give them hierarchy — lead line, then smaller muted
   support — and tighten measure/leading. Scoped to the business hero only
   (other service heroes carry a single supporting line). */
.svc-hero--biz .herox-copy {
  max-width: 540px;
}

.svc-hero--biz .herox-sub {
  max-width: 500px;
  line-height: 1.5;
}

/* First paragraph after the subhead = lead line (brighter, a touch larger). */
.svc-hero--biz .herox-sub + .herox-sub {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.5;
  margin-top: 3px;
}

/* Remaining supporting paragraphs = smaller, muted, looser leading. */
.svc-hero--biz .herox-sub + .herox-sub + .herox-sub {
  font-size: 13.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.6;
  margin-top: 8px;
}

/* =====================================================================
   Data Recovery (post 77) — inserted-section styling + fixes.
   All rules are scoped to page-specific classes (.common-causes,
   .data-loss-callout, .pricing-cta) that exist ONLY on post 77, so no
   other page is touched. Palette stays on-brand (navy + existing tokens).
   ===================================================================== */

/* Two-column intro band. Headless service-page intros (and 77's "When your drive
   fails") read cramped and jammed left at the shared measure in a full-width band.
   Flow the client paragraphs across two balanced columns (CSS multi-column, so ANY
   paragraph count balances by height — 77 has 2, 180/182 have 3, 181/184 have 2);
   the eyebrow (if any) and the Call CTA span the full width. Collapses to one
   column on mobile. Used by 77 and the intro bands of 180/181/182/184 (182 shown).
   NB: single-paragraph intros (183) don't get .dr-intro — one paragraph can't fill
   two columns. */
.dr-intro {
  columns: 2;
  column-gap: 48px;
  max-width: 1120px;
  margin-inline: auto;
}

.dr-intro .eyebrow {
  column-span: all;
  margin: 0 0 12px;
}

.dr-intro .problem-note {
  max-width: none;
  margin: 0 0 14px;
  break-inside: avoid;
}

.dr-intro .problem-cta {
  column-span: all;
  margin-top: 12px;
}

@media (max-width: 760px) {
  .dr-intro {
    columns: 1;
  }
}

/* REFINEMENT 2 — "Common Causes of Data Loss": render the 8 causes as light
   informational cells in a grid that fills the content width (4x2 desktop, 2-up
   tablet, 1-up mobile). Deliberately flatter and smaller than the elevated
   "Data Recovery Services We Provide" service cards above — subtle #F5F7FA fill,
   1px border, no image, no shadow — so services stay the primary cards and the
   causes read as secondary info. .common-causes-list is post 77 only. */
.common-causes-list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  /* Trailing-partial-row centering (see the shared grid convention): flex-wrap +
     justify-content:center with fixed-basis, no-grow items. Full rows fill exactly
     100% (N*basis + (N-1)*gap = 100%) so they stay edge-to-edge; only a short last
     row has free space and centers. Works for any remainder at every breakpoint. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.common-causes-list li {
  flex: 0 0 calc((100% - 3 * 14px) / 4);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 15px 16px;
  background: var(--cool);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
}

/* Cell/background contrast — the cool cell fill (#F5F7FA) is invisible on an
   .itk-bg-cool section (same colour). On cool sections, fill the cells white so the
   #E5E8EF border + fill read clearly. White sections keep the cool fill. Generic,
   not per page. (Only .common-causes-list shares its fill with the section bg;
   .svc-gcard/.wc-card are white and .problem-list cells are unfilled — all safe.) */
.itk-bg-cool .common-causes-list li {
  background: var(--white);
}

.common-causes-list li::before {
  content: "";
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%2312296B' fill-opacity='0.1'/%3E%3Cpath d='M7 12.3 10.3 15.5 17 8.5' fill='none' stroke='%2312296B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
}

@media (max-width: 900px) {
  .common-causes-list li {
    flex-basis: calc((100% - 14px) / 2);
  }
}

@media (max-width: 560px) {
  .common-causes-list li {
    flex-basis: 100%;
  }
}

/* FIX 3 — "Important: Stop Using the Device": an on-brand caution callout
   (navy only — no red/amber). Light navy-tinted panel with a navy accent
   rule and a navy alert badge before the heading, so it catches the eye as
   a notice rather than sitting flat as body text. */
.data-loss-callout .head-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 900px;
  background: rgba(18, 41, 107, 0.045);
  border: 1px solid var(--border);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius);
  padding: 24px 30px 26px;
}

.data-loss-callout h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.01em;
  color: var(--navy);
}

.data-loss-callout h2::before {
  content: "";
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 7v6' stroke='white' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='16.8' r='1.5' fill='white'/%3E%3C/svg%3E") center / 34px 34px no-repeat;
}

.data-loss-callout p {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
}

/* FIX 4 — "Book a Free Consult" in the pricing band renders with WordPress
   default button colours (dark text on navy, illegible). Restyle its link to
   the standard primary CTA, mirroring .problem-cta. .pricing-cta is post 77
   only, so this changes nothing elsewhere. */
.pricing-cta .wp-block-buttons,
.pricing-cta .wp-block-button {
  margin: 0;
}

.pricing-cta .wp-block-button.btn {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.pricing-cta .wp-block-button.btn .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px solid transparent;
  border-radius: 12px;
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
  padding: 19px 38px;
  text-decoration: none;
  white-space: nowrap;
}

.pricing-cta .wp-block-button.btn-primary .wp-block-button__link {
  background: var(--navy);
  color: var(--white);
}

.pricing-cta .wp-block-button.btn-primary .wp-block-button__link:hover {
  background: var(--deep);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.wp-site-blocks > .wp-block-template-part:has(.site-header) {
  display: contents;
}

html {
  --iteks-sticky-scroll-offset: 112px;
  scroll-padding-top: var(--iteks-sticky-scroll-offset);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1500;
}

body.admin-bar {
  --iteks-admin-bar-offset: var(--wp-admin--admin-bar--height, 32px);
}

body.admin-bar .site-header {
  top: var(--iteks-admin-bar-offset);
}

.site-header.scrolled {
  box-shadow: 0 10px 28px rgba(10, 26, 82, 0.12);
}

.wp-block-post-content [id],
main [id] {
  scroll-margin-top: var(--iteks-sticky-scroll-offset);
}

body.admin-bar .wp-block-post-content [id],
body.admin-bar main [id] {
  scroll-margin-top: calc(var(--iteks-sticky-scroll-offset) + var(--iteks-admin-bar-offset));
}

html:has(body.admin-bar) {
  scroll-padding-top: calc(var(--iteks-sticky-scroll-offset) + var(--wp-admin--admin-bar--height, 32px));
}

@media (max-width: 1100px) {
  html {
    --iteks-sticky-scroll-offset: 104px;
  }
}

@media (max-width: 782px) {
  body.admin-bar {
    --iteks-admin-bar-offset: var(--wp-admin--admin-bar--height, 46px);
  }

  body.admin-bar .site-header {
    top: var(--iteks-admin-bar-offset);
  }

  html:has(body.admin-bar) {
    scroll-padding-top: calc(var(--iteks-sticky-scroll-offset) + var(--wp-admin--admin-bar--height, 46px));
  }
}

@media (max-width: 600px) {
  body.admin-bar {
    --iteks-admin-bar-offset: 0px;
  }

  html:has(body.admin-bar) {
    scroll-padding-top: var(--iteks-sticky-scroll-offset);
  }
}

@media (max-width: 560px) {
  html {
    --iteks-sticky-scroll-offset: 88px;
  }
}

@media (max-width: 1100px) {
  .site-header {
    --iteks-header-gutter: 24px;
  }

  .site-header .wrap {
    justify-content: space-between;
    padding-right: var(--iteks-header-gutter);
    padding-left: var(--iteks-header-gutter);
  }

  .site-header .header-actions {
    flex: 0 0 auto;
    justify-content: flex-end;
    margin-left: auto;
  }

  .site-header .nav-toggle {
    flex: 0 0 44px;
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  .site-header .logo-link img {
    max-width: min(34vw, 220px);
    height: auto;
  }

  .site-header .header-actions {
    gap: 8px;
  }

  .site-header .header-actions .btn {
    min-height: 44px;
    padding: 9px 12px;
    font-size: 13px;
    white-space: nowrap;
  }
}

@media (max-width: 560px) {
  .site-header {
    --iteks-header-gutter: 12px;
  }

  .site-header .wrap {
    flex-wrap: nowrap;
  }

  .site-header .header-actions {
    flex-shrink: 0;
    gap: 6px;
  }

  .site-header .header-actions .btn {
    padding: 7px 8px;
    font-size: 12px;
  }
}

@media (max-width: 380px) {
  .site-header .logo-link img {
    max-width: 32vw;
  }

  .site-header .header-actions .btn {
    gap: 6px;
    padding-right: 6px;
    padding-left: 6px;
    font-size: 11px;
  }

  .site-header .header-actions .btn svg {
    width: 14px;
    height: 14px;
  }
}

@media (min-width: 861px) and (max-width: 1100px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.86fr);
    align-items: stretch;
    gap: 32px;
  }

  .hero-copy {
    justify-content: center;
  }

  .hero-photo-panel {
    min-height: 100%;
  }

  .hero-photo-panel .img-area {
    height: 100%;
    min-height: 360px;
  }

  .herox {
    display: flex;
    align-items: center;
    min-height: 400px;
  }

  .herox > .wrap {
    position: relative;
    z-index: 2;
    width: 100%;
  }

  .herox-copy {
    max-width: min(470px, 48vw);
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .herox-media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 50%;
    height: auto;
    clip-path: polygon(12.5% 0, 100% 0, 100% 100%, 3.5% 100%);
    background: var(--green);
  }

  .herox-media .herox-img,
  .herox-media .wp-block-image.herox-img {
    height: 100%;
    min-height: 0;
  }

  .herox-media .herox-img img,
  .herox-media .wp-block-image.herox-img img {
    height: 100%;
    min-height: 0;
    object-fit: cover;
    clip-path: polygon(13% 0, 100% 0, 100% 100%, 4% 100%);
  }

  .herox-badge {
    right: 24px;
    left: auto;
    bottom: 20px;
  }
}

@media (max-width: 860px) {
  .hero-copy,
  .hero-sub,
  .herox-copy,
  .svc-hero .herox-copy,
  .svc-hero--biz .herox-copy,
  .svc-hero .herox-sub,
  .herox-sub {
    max-width: none;
  }

  .hero-copy,
  .herox-copy,
  .svc-hero .herox-copy,
  .svc-hero--biz .herox-copy {
    width: 100%;
  }

  .svc-hero .herox-copy,
  .svc-hero .herox-sub {
    max-width: none !important;
  }

  .svc-hero .herox-copy {
    width: 100% !important;
  }
}

/* ============================================================
   Primary nav — dropdown submenus (desktop) + accordions (mobile).
   Restructure: Home | Business IT Services v | Residential IT Services v |
   Service Areas v | About | Contact | Remote Support.
   Desktop dropdowns open on hover AND on caret/toggle click; parent hub
   links still navigate. Panels layer above the sticky header + hero.
   Mobile (<=1100px) renders submenus as inline accordions.
   ============================================================ */

/* ---- Desktop dropdowns (visible while .main-nav is shown, >1100px) ---- */
.main-nav .nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.main-nav .nav-item > .nav-parent {
  white-space: nowrap;
}

/* Caret toggle button (Business / Residential) + Service Areas toggle button */
.main-nav .nav-caret,
.main-nav .nav-parent--toggle {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 0;
  display: inline-flex;
  align-items: center;
  border-bottom: 2px solid transparent;
}

.main-nav .nav-caret {
  width: 20px;
  justify-content: center;
}

.main-nav .nav-parent--toggle {
  gap: 8px;
  white-space: nowrap;
}

/* Down-caret indicator (chevron drawn from borders) */
.main-nav .nav-caret::after,
.main-nav .nav-parent--toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 0.2s ease;
}

.main-nav .nav-item:hover .nav-caret::after,
.main-nav .nav-item.open .nav-caret::after,
.main-nav .nav-item:hover .nav-parent--toggle::after,
.main-nav .nav-parent--toggle[aria-expanded="true"]::after {
  transform: rotate(-135deg) translate(-1px, -1px);
}

.main-nav .nav-caret:hover,
.main-nav .nav-parent--toggle:hover {
  color: var(--navy);
  border-bottom-color: var(--green);
}

.main-nav .nav-caret:focus-visible,
.main-nav .nav-parent--toggle:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Dropdown panel */
.main-nav .submenu {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-float);
  padding: 8px;
  min-width: 250px;
  z-index: 1600;
}

/* Right-align the panel for the rightmost dropdown (More) so it opens toward
   the left and never overruns the viewport edge or the Book-a-Consult button. */
.main-nav .submenu--right {
  left: auto;
  right: 0;
}

/* Invisible hover bridge spanning the parent-to-panel gap. It overlaps a couple
   of pixels into BOTH the parent row and the panel so there is no dead pixel at
   either seam — the cursor stays over a hovered descendant the whole way down,
   which (with the JS hover-intent close-delay) fixes the diagonal collapse. It
   is transparent, so the green accent underline at the seam is never covered. */
.main-nav .submenu::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 16px;
}

/* Panel visibility is driven by the .open class (managed in menu.js for both
   hover and click) so the mouseleave close-delay can hold it open across the
   gap. Hover no longer toggles display directly via CSS :hover. */
.main-nav .nav-item.open > .submenu {
  display: block;
}

.main-nav .submenu a {
  display: block;
  padding: 11px 14px;
  border-radius: 8px;
  border-bottom: none;
  font-size: 15px;
  white-space: nowrap;
  color: var(--ink);
}

.main-nav .submenu a:hover,
.main-nav .submenu a:focus-visible {
  background: var(--cool);
  color: var(--navy);
}

/* ---- Mobile accordions (<=1100px, inside the burger menu) ---- */
@media (max-width: 1100px) {
  .mobile-menu .m-item {
    border-bottom: 1px solid var(--border);
  }

  .mobile-menu .m-parent-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .mobile-menu .m-parent-row > a,
  .mobile-menu .m-parent-btn {
    flex: 1 1 auto;
    display: block;
    font-family: var(--font-head);
    font-weight: 500;
    font-size: 17px;
    color: var(--ink);
    padding: 13px 0;
    border-bottom: none;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    text-align: left;
    cursor: pointer;
    min-height: 44px;
  }

  .mobile-menu .m-toggle {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--navy);
  }

  .mobile-menu .m-toggle::after {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.2s ease;
  }

  .mobile-menu .m-item.open .m-toggle::after {
    transform: rotate(-135deg) translateY(-1px);
  }

  .mobile-menu .m-toggle:focus-visible,
  .mobile-menu .m-parent-btn:focus-visible,
  .mobile-menu .m-parent-row > a:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: -2px;
  }

  .mobile-menu .m-submenu {
    display: none;
    padding: 0 0 8px 16px;
  }

  .mobile-menu .m-item.open .m-submenu {
    display: block;
  }

  .mobile-menu .m-submenu a {
    display: block;
    font-family: var(--font-head);
    font-weight: 500;
    font-size: 15.5px;
    color: var(--muted);
    padding: 11px 0;
    border-bottom: none;
    min-height: 44px;
  }

  .mobile-menu .m-submenu a:hover,
  .mobile-menu .m-submenu a:focus-visible {
    color: var(--navy);
  }
}

/* ============================================================
   Content-wiring additions (city eyebrow links + city "What we help"
   3-up tile grid). Links/labels only — no structural redesign.
   ============================================================ */

/* City eyebrow links (homepage hero): the city names in the
   "Oakville · Burlington · Milton · Mississauga" eyebrow link to their
   location pages while keeping the eyebrow's exact look — inherit the mono,
   uppercase, letter-spaced, translucent-white styling; no default underline.
   The .eyebrow-cities span keeps all links + separators as ONE flex item so
   the parent's inline-flex `gap` doesn't space out each name/dot. */
.herox-eyebrow a.eyebrow-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.herox-eyebrow a.eyebrow-link:hover {
  color: var(--green);
}

.herox-eyebrow a.eyebrow-link:focus-visible {
  color: var(--green);
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Location-page "What we help <City> with" grid restores the concept's 3-up
   layout for its six value-split tiles. Scoped to the .related-grid--3col
   modifier (compound selector) so the default 4-up .related-grid used on other
   pages (Business IT Services 59, Residential 68, Data Recovery 77, etc.) is
   NOT affected. Steps 3 -> 2 -> 1 at the same breakpoints as .related-grid. */
.related-grid.related-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 980px) {
  .related-grid.related-grid--3col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .related-grid.related-grid--3col {
    grid-template-columns: 1fr;
  }
}

/* Column modifiers for the two list/card components that ship single-width
   defaults. Same convention as .related-grid--3col above: compound selector so
   the component default is untouched everywhere it is already used, and the
   modifier repeats itself inside each breakpoint (a bare .wc-card / .wd-checks
   rule in a media query would otherwise out-order a single-class modifier and
   break the stack).

   .wd-checks--3col — Cybersecurity (184) "Why Cybersecurity Matters". The base
   .wd-checks is a one-column grid, so its six short labels each stretched the
   full 1168px content width. Six items divide evenly 3-up. Steps 3 -> 2 -> 1 at
   the .wc-card breakpoints (980 / 600) so it stacks in step with the cards it
   sits beside.

   .wc-grid--4col — Business IT Services (59) "Common Business Problems We
   Solve". The default .wc-card is 3-up, which left its eight items as 3-3-2
   with a centred orphan row. 4-up gives two full rows. Same 980 / 600 steps as
   the default, so tablet is 2x4 and mobile is 1-up exactly as before. */
.wd-checks.wd-checks--3col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 32px;
}

.wc-grid--4col .wc-card {
  flex-basis: calc(25% - 10.5px);
}

@media (max-width: 980px) {
  .wd-checks.wd-checks--3col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wc-grid--4col .wc-card {
    flex-basis: calc(50% - 7px);
  }
}

@media (max-width: 600px) {
  .wd-checks.wd-checks--3col {
    grid-template-columns: 1fr;
  }

  .wc-grid--4col .wc-card {
    flex-basis: 100%;
  }
}

/* ============================================================
   Data Backup pages (146/147) — layout polish.
   Page-scoped via body.page-id-* so no other page is affected;
   the shared .data-loss-callout on Data Recovery (77) is untouched
   (those two callout sections were converted to plain prose in markup).
   ============================================================ */

/* COMPONENT DEFAULT — grid/checklist followed by a closing paragraph.
   Any card/checklist grid immediately followed by a <p> (a closing line) would
   otherwise sit flush against the grid. Give it breathing room everywhere, by
   construction, so new pages never reintroduce the bug. Supersedes the old
   per-page rules (body.page-id-146/147 .wc-grid + p). */
.wc-grid + p,
.svc-grid + p,
.biz-cards + p,
.common-causes-list + p,
.problem-list + p,
.growth-pills + p {
  margin-top: 1.75rem;
}

/* Data Backup pages (146/147) — pair the two narrative sections side by side in a
   single band (previously two stacked full-width bands each with text on a narrow
   left measure, leaving a large empty right half). Page-scoped: .narrative-pair
   is used on 146/147 and the paired residential/business bands of 181/182. Reuses
   the .dr-intro (post 77) gutter + measure. Each
   column stays a plain .section-head so its eyebrow/32px-h2/muted-body typography
   is inherited; columns are TOP-aligned and may be unequal height by design.
   Collapses to one column (source order preserved) at the same 860px breakpoint
   .dr-intro uses. */
.narrative-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
  align-items: start;
  max-width: 1120px;
  margin-inline: auto;
}

.narrative-pair .section-head {
  display: block;
  margin-bottom: 0;
}

@media (max-width: 860px) {
  .narrative-pair {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }
}

/* ============================================================
   Legal / policy pages — plain readable prose layout.
   Scoped to .policy-section / .policy-head / .policy-prose, which appear ONLY
   on Privacy Policy, Terms of Service, Payments & Billing, Service Commitment,
   and the Environmental Responsibility Policy pages. No other page is affected.
   ============================================================ */
.policy-section .wrap { max-width: 780px; }

.policy-head { margin-bottom: 30px; }
.policy-head h1 {
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0;
}
.policy-subtitle { color: var(--muted); font-size: 18px; line-height: 1.5; margin: 12px 0 0; }
.policy-updated {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 12px 0 0;
}

.policy-prose > h2 {
  font-size: 23px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin: 42px 0 12px;
}
.policy-prose > h2:first-child { margin-top: 4px; }
.policy-prose > h3 { font-size: 17.5px; font-weight: 600; color: var(--navy); margin: 26px 0 8px; }
.policy-prose p { color: var(--ink); font-size: 16px; line-height: 1.7; margin: 0 0 14px; }
.policy-prose ul { margin: 4px 0 18px; padding-left: 24px; list-style: disc; }
.policy-prose li { color: var(--ink); font-size: 16px; line-height: 1.7; margin: 5px 0; }
.policy-prose li::marker { color: var(--green); }
.policy-prose strong { color: var(--navy); }
.policy-prose a { color: var(--navy); }

/* ---------------------------------------------------------------------------
   Service-page detail grids (Printer / Network / Virus & Performance).
   Text-card grid for heading+description and heading+bullet groups that have
   no per-item imagery. Scoped to .svc-grid/.svc-gcard, which appear only on
   those three service pages, so no other page is affected.
--------------------------------------------------------------------------- */
.svc-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 8px; }
.svc-gcard {
  flex: 0 0 calc((100% - 2 * 20px) / 3);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 22px 20px;
}
.svc-gcard h3 { font-size: 17px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; margin: 0 0 8px; }
.svc-gcard p { color: var(--ink); font-size: 14.5px; line-height: 1.6; margin: 0; }
.svc-gcard p + ul { margin-top: 10px; }
.svc-gcard ul { margin: 6px 0 0; padding-left: 20px; list-style: disc; }
.svc-gcard li { color: var(--ink); font-size: 14.5px; line-height: 1.55; margin: 4px 0; }
.svc-gcard li::marker { color: var(--green); }
@media (max-width: 900px) { .svc-gcard { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 600px) { .svc-grid { max-width: 560px; margin-left: auto; margin-right: auto; } .svc-gcard { flex-basis: 100%; } }

/* 4-up modifier for a grid that holds exactly four cards, so the set reads as
   one row instead of 3 + 1 orphan (Pre Go Live #8 / image39, Website Design).
   A modifier rather than a change to .svc-gcard because the base 3-up basis is
   shared by grids of 2, 3, 5, 6, 7 and 11 cards on pages 180/182/183/190/258
   and by the second grid on 225 itself — all of which must keep 3-up.

   Ladder: 4-up above 1100px, then 2-up, then 1-up. The step down at 1100px
   (not the base 900px) matches .cats-grid, which was already raised to 1100px
   for the same reason: four columns inside the 1240px wrap are 277px each, and
   below ~1100px that falls under 250px and the card headings start wrapping to
   three lines. Each breakpoint is restated because the modifier's (0,2,0)
   outranks the base .svc-gcard rules inside their media queries. */
.svc-grid--4up .svc-gcard { flex-basis: calc((100% - 3 * 20px) / 4); }
@media (max-width: 1100px) { .svc-grid--4up .svc-gcard { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 600px)  { .svc-grid--4up .svc-gcard { flex-basis: 100%; } }

/* Partner logo chip inside a svc-gcard (Affiliations page only — .aff-logo
   appears nowhere else). Fixed-height frame + contain keeps the 11 partner
   logos visually uniform despite differing source aspect ratios. */
.svc-gcard .aff-logo { margin: 0 0 14px; }
.svc-gcard .aff-logo img {
  height: 54px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  object-position: left center;
}

/* ============================================================
   CONTACT PAGE — form + details layout (page 'contact')
   ------------------------------------------------------------
   The form is a NON-FUNCTIONAL placeholder: it is a <div>, not a
   <form>, and has no submit target, so nothing can ever be sent.
   These rules only style the shell so it reads as a real form
   until the client's chosen plugin replaces the placeholder block.
   Reuses the shared tokens; no new colours introduced.
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: start; margin-top: 8px; }
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.cf-row { display: flex; flex-direction: column; gap: 6px; }
.cf-row label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.contact-form input,
.contact-form textarea {
  font: inherit; color: var(--ink); background: var(--white);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; width: 100%;
}
.contact-form input:focus,
.contact-form textarea:focus { outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy); }
.contact-form textarea { min-height: 140px; resize: vertical; }
.cf-submit { align-self: flex-start; margin-top: 4px; }

/* Contact details card (NAP / phone / email / hours) — white card so it
   separates cleanly on the white first-content band via border + shadow. */
.contact-details {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: 28px; display: flex; flex-direction: column; gap: 22px;
}
.cd-block h3 { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.cd-block p { margin: 2px 0; color: var(--ink); font-size: 15px; }
.cd-block a { color: var(--navy); font-weight: 700; }
.cd-block a:hover { color: var(--green); }
.contact-details .iteks-hours { list-style: none; margin: 0; padding: 0; }
.contact-details .iteks-hours li { color: var(--ink); font-size: 15px; margin: 2px 0; }
.contact-details .iteks-hours-open7 { font-weight: 700; color: var(--navy); }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; gap: 24px; } }

/* ============================================================
   CONTACT FORM — Fluent Forms skin (form id 3)
   ------------------------------------------------------------
   Maps Fluent Forms markup onto the same input/label/button
   tokens the original .contact-form placeholder used, so the
   live form matches the rest of the page. No new colours.
   The required-state label swap turns Fluent Forms' red asterisk
   into a "(Mandatory)" tag that follows each field's Required
   toggle automatically (admin flips it in the form builder).
   ============================================================ */
.contact-grid .fluent_form_3 { width: 100%; }
.fluent_form_3 .ff-el-group { margin-bottom: 16px; }
.fluent_form_3 .ff-el-group:last-child { margin-bottom: 0; }
.fluent_form_3 .ff-el-input--label { margin-bottom: 6px; padding: 0; line-height: 1.4; }
.fluent_form_3 .ff-el-input--label label {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted); font-weight: 400; margin: 0;
}
.fluent_form_3 .ff-el-form-control {
  font: inherit; color: var(--ink); background: var(--white);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; width: 100%; box-shadow: none; height: auto;
}
.fluent_form_3 textarea.ff-el-form-control { min-height: 140px; resize: vertical; }
.fluent_form_3 select.ff-el-form-control { appearance: auto; -webkit-appearance: menulist; }
.fluent_form_3 .ff-el-form-control:focus {
  outline: 2px solid var(--navy); outline-offset: 1px;
  border-color: var(--navy); box-shadow: none;
}
.fluent_form_3 .ff-el-form-control::placeholder { color: var(--muted); opacity: 0.8; }

/* Submit button = primary large button */
.fluent_form_3 .ff-btn-submit {
  font-family: var(--font-head); font-weight: 600; font-size: 18px; line-height: 1;
  padding: 19px 38px; border-radius: 12px; border: 2px solid transparent;
  background: var(--navy) !important; color: var(--white) !important;
  cursor: pointer; width: auto; box-shadow: none; margin-top: 4px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.fluent_form_3 .ff-btn-submit:hover {
  background: var(--deep) !important; color: var(--white) !important;
  transform: translateY(-2px); box-shadow: var(--shadow-card);
}

/* Required-state label: replace the "*" asterisk with "(Mandatory)".
   Scoped with a double class so it beats Fluent Forms' own asterisk
   rule on specificity regardless of stylesheet load order. Optional
   fields have no .ff-el-is-required class, so they show only the name. */
.frm-fluent-form.fluent_form_3 .ff-el-input--label.ff-el-is-required.asterisk-right label:after {
  content: " (Mandatory)"; color: var(--navy); margin-left: 6px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  text-transform: none; font-weight: 600;
}
/* Validation + confirmation messages in palette */
.fluent_form_3 .ff-el-is-error .ff-el-form-control { border-color: #D03227; }
.fluent_form_3 .error.text-danger, .fluent_form_3 .ff-el-is-error .text-danger { color: #D03227; }
.ff-message-success {
  background: rgba(40,167,69,0.10); border: 1px solid var(--green);
  color: var(--ink); border-radius: 10px; padding: 16px 18px;
}

/* ============================================================
   REMOTE SUPPORT PAGE — download buttons + office-first callout
   ------------------------------------------------------------
   Buttons reuse the shared .btn set; only the callout note and the
   download-button spacing are new. No new colours introduced.
   ============================================================ */
.remote-note {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--white); border: 1px solid var(--border);
  border-left: 4px solid var(--green); border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: 18px 22px; margin: 0 0 28px;
  color: var(--ink); font-size: 15.5px; font-weight: 600;
}
.remote-note svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--green); margin-top: 1px; }
.remote-dl { display: flex; flex-direction: column; gap: 24px; margin-top: 8px; align-items: center; }
/* Each group shrink-wraps to its own button row so the heading centres over the
   buttons (start of first to end of last). align-items:center above sizes the
   group to its widest child (the .btnrow) AND centres that group on the page
   ("Center on page", Pre Go Live #7 / image10 — the two rows are different
   widths, so left-aligning them left the block sitting off-centre). The row's
   flex-wrap lets buttons be added or removed and reflow cleanly while the
   heading stays centred (#33, #35). */
.remote-dl-group { max-width: 100%; }
.remote-dl-group h3 { font-size: 16px; color: var(--navy); margin: 0 0 12px; text-align: center; }
/* justify-content keeps a wrapped row centred too, so a row that breaks onto a
   second line does not fall back to left-aligned under a centred heading. */
.remote-dl-group .btnrow { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.remote-dl-group .btnrow .btn svg { width: 17px; height: 17px; }

/* Remote Support page — compact, centred banner (#31). The hero carries no media
   image, so the copy is centred across the full banner and the height is reduced. */
.remote-hero { min-height: 300px; }
.remote-hero .herox-copy { max-width: 720px; margin-left: auto; margin-right: auto; padding: 40px 0; align-items: center; text-align: center; }
.remote-hero .herox-eyebrow { justify-content: center; }
.remote-hero .herox-sub { max-width: 620px; margin-left: auto; margin-right: auto; }
.remote-hero .herox-ctas { justify-content: center; }

/* Contact page — centred banner text (#36). Copy-only hero (no media), so the
   copy is centred across the full-width banner. Height left unchanged. */
.contact-hero .herox-copy { max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; align-items: center; }
.contact-hero .herox-eyebrow { justify-content: center; }
.contact-hero .herox-sub { max-width: 620px; margin-left: auto; margin-right: auto; }
.contact-hero .herox-ctas { justify-content: center; }

/* Policy-page section icons (#43/#44/#46). Hand-built inline line SVGs, one per
   section heading, in the site green to echo the green-check treatment. */
.policy-prose h2 { display: flex; align-items: flex-start; gap: 12px; }
.policy-prose h2 .pol-ic { flex: 0 0 auto; width: 25px; height: 25px; color: var(--green); margin-top: 3px; }
.policy-prose h2 .pol-ic svg { width: 100%; height: 100%; display: block; }

/* Service-section icons (#26/#27) — same hand-built line SVGs as the policy pages,
   in the site green. Inline before a section h2 (Cybersecurity), and a block icon
   above a navy problem card (Network). 146/147 reuse the .wc-check badge as-is. */
.head-copy h2 .sec-ic--inline { display: inline-block; vertical-align: middle; width: 26px; height: 26px; margin-right: 11px; color: var(--green); position: relative; top: -2px; }
.head-copy h2 .sec-ic--inline svg { width: 100%; height: 100%; display: block; }
.biz-body .sec-ic { display: block; width: 30px; height: 30px; color: var(--green); margin-bottom: 12px; }
.biz-body .sec-ic svg { width: 100%; height: 100%; display: block; }

/* Data Recovery FAQ — Call Us CTA button with phone icon (#22). Reuses the
   site's primary button; the phone mask mirrors the hero has-phone-icon. */
.faq-call-cta { margin-top: 14px; }
/* Neutralise the block-button wrapper so only the inner link renders as the
   button (otherwise the wrapper's .btn-primary background boxes the link,
   producing a button-inside-a-button). Mirrors the .herox-ctas treatment. */
.faq-call-cta .wp-block-button.btn { padding: 0; background: transparent; border: 0; border-radius: 0; }
.faq-call-cta .wp-block-button.btn .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 2px solid transparent; border-radius: 12px;
  font-family: var(--font-head); font-size: 18px; font-weight: 600; line-height: 1.6;
  padding: 19px 38px; text-decoration: none; white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.faq-call-cta .wp-block-button.btn-primary .wp-block-button__link { background: var(--navy); color: var(--white); }
.faq-call-cta .wp-block-button.btn-primary .wp-block-button__link:hover { background: var(--deep); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.faq-call-cta .wp-block-button.has-phone-icon .wp-block-button__link { display: inline-flex; align-items: center; gap: 9px; }
.faq-call-cta .wp-block-button.has-phone-icon .wp-block-button__link::before {
  content: ""; width: 17px; height: 17px; flex: 0 0 auto; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 2h3l1.5 3.5L5.7 7a9 9 0 0 0 3.3 3.3l1.5-1.8L14 10v3a1 1 0 0 1-1 1A11 11 0 0 1 2 3a1 1 0 0 1 1-1Z' fill='currentColor'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 2h3l1.5 3.5L5.7 7a9 9 0 0 0 3.3 3.3l1.5-1.8L14 10v3a1 1 0 0 1-1 1A11 11 0 0 1 2 3a1 1 0 0 1 1-1Z' fill='currentColor'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ============================================================
   WEBSITE DESIGN showcase page (page 'website-design', post 225)
   ------------------------------------------------------------
   Image-forward layout with alternating image+text bands and one
   dark navy showcase band. Every selector is .wd-* and appears
   ONLY on this page, so no other page is affected. Uses existing
   tokens only (--navy-grad, --green, --shadow-card). Stacks to a
   single column at <=820px so it is safe narrow.
--------------------------------------------------------------- */
.wd-band { display: flex; gap: clamp(28px, 4vw, 52px); align-items: center; }
.wd-band--rev { flex-direction: row-reverse; }
.wd-band-media { flex: 1 1 50%; min-width: 0; }
.wd-band-copy { flex: 1 1 50%; min-width: 0; }
.wd-band-copy > .eyebrow:first-child { margin-top: 0; }
.wd-band-copy h2 { margin-top: 6px; }
.wd-band-media .wp-block-image { margin: 0; }
.wd-band-media img { width: 100%; height: auto; display: block; border-radius: 16px; box-shadow: var(--shadow-card); }
@media (max-width: 820px) { .wd-band, .wd-band--rev { flex-direction: column; gap: 26px; } }

/* Green-check feature list used inside the bands */
.wd-checks { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 13px; }
.wd-checks li { position: relative; padding-left: 36px; line-height: 1.55; font-size: 15.5px; }
.wd-checks li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 23px; height: 23px; border-radius: 50%;
  background: var(--green) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5 10 17l9-10' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.wd-checks li strong { display: block; }
/* Breathing room between the last check item and the paragraph that follows it */
.wd-checks + p { margin-top: 18px; }

/* Dark navy showcase band (Lead Generation section, image built for dark) */
.wd-dark { background: var(--navy-grad); }
.wd-dark .eyebrow { color: #8fb0ff; }
.wd-dark h2, .wd-dark h3, .wd-dark p, .wd-dark li { color: #fff; }
.wd-dark .fix, .wd-dark .fix em { color: #fff; }

/* Closing "under one roof" line on the Why-choose section */
.wd-underroof { max-width: 760px; margin: 30px auto 0; color: var(--ink); font-size: 16px; line-height: 1.6; }

/* ============================================================
   COMPUTER REPAIR page (page 'computer-repair')
   ------------------------------------------------------------
   Image-beside-text device sections built with core wp:columns
   (a standard block, no new layout system). .cr-* selectors
   appear only on this page. Image column is always first in the
   DOM so it stacks on top on mobile; .cr-rev flips the desktop
   side only. Uses existing tokens (--shadow-card, --green).
--------------------------------------------------------------- */
.cr-band { align-items: center; gap: clamp(26px, 4vw, 48px); }
.cr-media { margin: 0; }
.cr-media img { width: 100%; height: auto; display: block; border-radius: 14px; box-shadow: var(--shadow-card); }
.cr-copy h2 { margin-top: 0; }
.cr-copy .cr-subhead { font-weight: 700; color: var(--navy); margin: 4px 0 10px; }
.cr-copy ul { margin: 12px 0 14px; padding-left: 20px; list-style: disc; }
.cr-copy li { color: var(--ink); font-size: 15px; line-height: 1.55; margin: 5px 0; }
.cr-copy li::marker { color: var(--green); }
@media (min-width: 782px) { .cr-band.cr-rev { flex-direction: row-reverse; } }

/* ============================================================
   EYEBROW LABELS — one component-level definition for the site
   ------------------------------------------------------------
   The base .eyebrow rule in -v3 is specificity (0,1,0), so every
   container "p" rule in the codebase outranks it and drifts the
   label: .areas-copy p and .section-head p set font-size AND
   colour, .faq-copy p and .oakville-band p set colour. That is
   the whole of the "green dash is bolded on some and not others"
   report: the dash is 26x2px everywhere, but a 26x2px dash beside
   a 16px grey label reads thinner than the same dash beside a
   12px navy one.

   This block re-asserts the label's own typography at (0,1,1) so
   no container can drift it again. Every .eyebrow on the site
   resolves here. Dash geometry stays with .eyebrow::before in -v3
   and is deliberately untouched. Weight 700 is the existing bold
   variant already used by .mission-card / .oakville-band, now
   applied site-wide ("Make bolded", Pre Go Live #1).

   Must stay AFTER .oakville-band p (~line 920): equal specificity,
   so source order settles the tie.
--------------------------------------------------------------- */
p.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy);
}

/* Dark/navy band carve-outs — the ONLY eyebrows that must not go
   navy. Specificity (0,2,1) beats the normaliser above regardless
   of source order, so a dark band can never inherit navy-on-navy. */
p.eyebrow.eyebrow-light { color: rgba(255, 255, 255, 0.75); }
.wd-dark p.eyebrow { color: #8fb0ff; }

/* Mission card accent: green on a WHITE card, an intentional
   variant, not band drift. Restated here so it survives the
   normaliser. */
.mission-card p.eyebrow { color: var(--green); }

/* ============================================================
   CORE SERVICE CARDS — green accent under the FIRST heading line
   ------------------------------------------------------------
   .cat-copy h3::after in -v3 is pinned to bottom:0, so a heading
   that wraps ("Residential / IT Support") gets its accent under
   the LAST line.

   This cannot be solved with a static offset. At 19px/1.15 the
   two line boxes are 21.85px apart while the text rects are 25px
   tall, so consecutive lines OVERLAP by ~3px: there is no fixed
   position that clears line one on a wrapping heading and also
   keeps the current gap on a single-line one. A static
   calc(1lh + 7px) lands inside line two and strikes through it.

   So home.js measures the two line boxes and drops the accent
   into the visible gap between line one's baseline and line
   two's cap height, then sets .is-acc-measured. Single-line
   headings are never touched, so Business IT Services and Data
   Recovery stay pixel-identical, and a JS failure leaves every
   card exactly as it is today.

   Scoped to the .cats band, which exists only on the home page
   (patterns/below-hero-cards.php). Deliberately NOT applied to
   .cats-grid.recover-cats on page 77, which is out of scope this
   batch and has five wrapping headings of its own.
--------------------------------------------------------------- */
.cats .cat-copy h3.is-acc-measured::after {
  top: var(--itk-acc-t);
  bottom: auto;
}

/* Linked chips in the navy tag bar (Pre Go Live #4). The Residential card's
   three chips now point at their own service pages. The <a> is nested INSIDE
   the existing chip <span> rather than replacing it, deliberately: .cat-tags
   span is restyled three times down -v3 (1682 -> 2059 -> 2123, ending at
   10px text and a 12px icon), so an <a> sibling would have had to duplicate
   the whole cascade and would silently drift the moment any layer changes.
   Nested, the chip keeps every existing rule and the link only has to relay
   layout and undo the global `a { color: var(--navy) }`, which would
   otherwise render navy text on the navy bar.

   home.js already skips clicks that land on an <a>, so a chip navigates to
   its own target while the rest of the card still opens the card link. */
.cat-card .cat-tags span > a {
  display: inline-flex;
  align-items: center;
  gap: inherit;
  color: inherit;
  text-decoration: none;
}
.cat-card .cat-tags span > a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cat-card .cat-tags span > a:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 3px; }

/* ============================================================
   GREEN HEADING UNDERLINE — measured first-line state
   ------------------------------------------------------------
   Pairs with the underline module in home.js. The .fix em::after
   rule above is left exactly as it was and paints first, so a
   cold load, a JS error or a no-JS client keeps today's
   underline. Once home.js has measured the heading's first line
   box it adds .is-ul-measured and the bar moves here: pinned to
   the real first line, ending where that line's text ends, at
   any viewport width.

   Absolutely positioned inside the heading, so nothing reflows
   when the swap happens. Custom-property fallbacks mean a
   half-applied state can never paint a zero-width bar.
--------------------------------------------------------------- */
.wp-block-heading.is-ul-measured { position: relative; }

/* Retire the em-bound bar once the measured one is live. */
.wp-block-heading.is-ul-measured .fix em::after { display: none; }

.wp-block-heading.is-ul-measured::after {
  content: "";
  position: absolute;
  left: var(--itk-ul-l, 0);
  /* --itk-ul-t is the first line's text-rect bottom. Backing off 0.12em puts
     the bar exactly where .fix em::after had it (bottom: 0.02em, height:
     0.1em), so headings that were already correct do not shift by a pixel. */
  top: calc(var(--itk-ul-t, 100%) - 0.12em);
  width: var(--itk-ul-w, 0);
  height: 0.1em;
  background: var(--green);
  border-radius: 99px;
  pointer-events: none;
}

/* The dark showcase band paints its .fix white; keep the bar green there
   too, matching every other band. */
.wd-dark .wp-block-heading.is-ul-measured::after { background: var(--green); }


/* ============================================================
   MOBILE TYPE SCALE + BREATHING ROOM (<= 480px)
   ------------------------------------------------------------
   Client review on a ~320px phone: "too dense, writing too small
   on the first screen." This raises the narrow-width floor so no
   body-level or interactive text computes under 16px at 320px,
   and opens the tightest heading-to-body gaps.

   Extends the theme's existing narrow-width blocks rather than
   introducing a new scale. Placed at the end of sections.css so
   it wins over the -v3 @media (max-width:560px) hero block; the
   hero body line lives in service-page.css and is raised there.
   Desktop (>480px) is untouched.
--------------------------------------------------------------- */
@media (max-width: 480px) {

  /* --- hero: city eyebrow. At 320px the nowrap line ran to 332px
     and .herox has overflow:hidden, so "MISSISSAUGA" was cut off
     mid-word. Let it wrap and give it a readable size. --- */
  /* Client preference: the city line stays on ONE line, at its original size.
     Reverted to the pre-batch-9 fluid clamp; .wrap p (0,1,1) would otherwise
     lift it to the 16px body floor, so it is re-stated at weight below. */

  /* --- hero subhead (home). -v3 drops this to 13.5px at 560. --- */
  .herox-sub { font-size: 16px; line-height: 1.5; }

  /* --- body copy floor. NOTE: .wrap p is deliberately followed by the
     label re-assertions below; a bare .wrap p (0,1,1) outranks .eyebrow
     (0,1,0) and would otherwise blow up every micro-label, which is the
     same specificity trap the eyebrow normaliser hit. --- */
  .wrap p,
  .problem-note,
  .svc-gcard p,
  .biz-body > p,
  .wc-card p,
  .common-causes-list li,
  .wd-checks li,
  .growth-pills .growth-pill,
  .faq-item .faq-body {
    font-size: 16px;
  }
  .svc-gcard p,
  .biz-body > p,
  .faq-item .faq-body { line-height: 1.6; }

  /* higher-specificity body selectors in -v3 that the floor above
     does not outrank on its own */
  .problem .problem-note { font-size: 16px; line-height: 1.6; }
  .cat-copy p { font-size: 15px; line-height: 1.55; }
  .value-card p { font-size: 15px; line-height: 1.55; }
  /* .values-grid--how .value-card p (0,3,1) earlier in this file sets 13px and
     outranks the line above, so the floor has to be re-stated at that weight. */
  .values-grid--how .value-card p { font-size: 15px; line-height: 1.55; }
  /* mono labels were 10.5px, below the 12px label exception */
  .area-card p.area-region { font-size: 12px; letter-spacing: 0.12em; }
  .svc-badge { font-size: 12px; letter-spacing: 0.12em; }
  .svc-tags span { font-size: 12px; }
  .footer-tagline { font-size: 14px; }

  /* --- card + FAQ headings --- */
  .svc-gcard h3 { font-size: 18px; line-height: 1.3; }
  .faq-item summary { font-size: 16.5px; }

  /* --- interactive chip labels in the navy tag bar were 10px --- */
  /* Client preference: all three tags on ONE line, at their original size.
     -v3's own <=560 block sets flex-wrap:wrap, which is what let them stack,
     so the sizes revert to -v3's 10px/12px and the wrap is turned back off. */
  .cat-card .cat-tags { flex-wrap: nowrap; justify-content: space-between; }

  /* --- re-assert the micro-labels after the body floor above.
     These are mono uppercase design devices, not body copy, so they
     stay at their label size rather than being pushed to 16px. --- */
  .wrap p.eyebrow,
  p.eyebrow { font-size: 12px; letter-spacing: 0.22em; line-height: 1.6; }
  .wrap p.herox-eyebrow,
  p.herox-eyebrow {
    font-size: clamp(8.5px, 2.2vw, 12px);
    letter-spacing: 0.1em;
    white-space: nowrap;
  }
  .herox-eyebrow .eyebrow-cities { white-space: nowrap; }
  .wrap p.itk-trust-label,
  p.itk-trust-label { font-size: 12px; }
  .wrap p.step-num, p.step-num { font-size: inherit; }

  /* Hero entry-point chips stay one per line at <=480 (client preference).
     -v3's <=560 block already stacks them; the only change needed here is the
     label size: .herox-cat is an <a>, so 13.5px breached the 14px floor. */
  .herox-cat { font-size: 14px; }
}

/* ============================================================
   BATCH 10 ITEM 3 - home hero as a designed full screen (<=480px)

   Scoped to .herox:not(.svc-hero): the home hero is a bare .herox, while
   every service page AND all four city pages carry .herox.svc-hero, so this
   cannot leak into them. Desktop is untouched: the whole block is <=480.

   min-height goes on .herox-copy, NOT .herox. The hero photo is a sibling of
   .wrap inside .herox, so sizing .herox would pull the photo into the first
   viewport. Sizing the copy makes the navy fill the screen and the photo
   start exactly at the fold.

   61px is the measured sticky header height at 320 (the bar above it is a
   non-sticky topbar that scrolls away). svh, not vh, so mobile browser
   chrome collapsing does not cause overflow.
   ============================================================ */
@media (max-width: 480px) {
  /* 10e: the navy region is content-driven now, not a fraction of the
     viewport, so the gap under the trust line stays modest (56px) at every
     viewport height instead of ballooning on tall screens. */
  .herox:not(.svc-hero) .herox-copy {
    min-height: 0;
    /* Content runs from the top on svh-based spacing so tall phones get real
       breathing room, and the trust line is pushed to the floor by auto margin
       rather than the block being centred as one lump. */
    justify-content: flex-start;
    flex: 1 1 auto;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: clamp(18px, 2.6svh, 30px);
  }
  .herox:not(.svc-hero) > .wrap { padding-left: 16px; padding-right: 16px; }
  .herox:not(.svc-hero) .herox-eyebrow { margin-top: clamp(6px, 1.6svh, 16px); }
  .herox:not(.svc-hero) .herox-title {
    margin-top: auto;
    margin-bottom: auto;
    padding-top: clamp(10px, 2svh, 22px);
    padding-bottom: clamp(10px, 2svh, 22px);
  }
  .herox:not(.svc-hero) .herox-cats { margin-top: clamp(14px, 4.4svh, 42px); }
  .herox:not(.svc-hero) .herox-title {
    font-size: clamp(30px, 9.2vw, 38px);
  }

  /* ---- BATCH 10b: phone hero is heading-only, centred ----
     The long hero body paragraph is HIDDEN, never removed: it is SEO copy and
     must stay in the HTML for crawlers and for desktop, so this is display:none
     at <=480 only.

     Home and the service/city heroes need different selectors:
     - Home has exactly ONE .herox-sub and it IS the body paragraph. The trust
       line also carries .herox-sub, so it is excluded explicitly or it would
       vanish too.
     - .svc-hero heroes lead with a SHORT secondary line (first .herox-sub),
       which stays; every later .herox-sub is body copy and goes.
     The H1 is already font-weight 700 in -v3, so weight is left alone. */
  .herox:not(.svc-hero) .herox-copy > .herox-sub:not(.herox-promise) {
    display: none;
  }
  .svc-hero .herox-copy > .herox-sub ~ .herox-sub:not(.herox-promise) {
    display: none;
  }

  /* Heading unit centred: eyebrow, H1 and the surviving secondary line only.
     Chips, CTAs and the trust line keep their existing alignment. The eyebrow
     is a flex row with a ::before rule, so it needs justify-content, matching
     the .remote-hero / .contact-hero idiom already in this file. */
  .herox .herox-eyebrow { justify-content: center; text-align: center; }
  .herox .herox-title { text-align: center; }
  .herox .herox-copy > .herox-sub:not(.herox-promise) { text-align: center; }

  /* ---- BATCH 10c.1 composition ----
     space-between split the slack evenly across three gaps, which at 390 put
     138px between the eyebrow and the H1 it labels. Slack now falls in exactly
     two places (heading unit -> chips, chips -> trust line) via auto margins,
     and the heading unit sits at the top of the copy box on its normal 9px
     row-gap, so eyebrow + H1 read as one unit. */
  /* ---- BATCH 10d: content flows from the top on designed gaps ----
     The auto-margin slack structure is gone. .herox-copy carries a 9px
     row-gap, so the extra margins below make the two intended gaps
     9+23=32px (heading unit -> chips) and 9+17=26px (chips -> trust). */
  .herox:not(.svc-hero) .herox-promise { margin-top: 17px; }

  /* ---- BATCH 10d: chips promoted to primary content ----
     width:fit-content + auto side margins centres the block as a unit while
     the chips stretch to a shared width and stay icon-then-label internally.
     -v3 already sets .herox-cat to font-weight 600, so weight is untouched. */
  .herox:not(.svc-hero) .herox-cats {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    gap: 15px;
    align-items: stretch;
  }
  .herox:not(.svc-hero) .herox-cat {
    min-height: 58px;
    padding: 6px 14px 6px 6px;
    gap: 12px;
    font-size: 16.5px;
  }
  .herox:not(.svc-hero) .herox-cat-ic {
    width: 46px;
    height: 46px;
    border-radius: 12px;
  }
  .herox:not(.svc-hero) .herox-cat-ic svg { width: 22px; height: 22px; }

  /* trust line closes under the centred chip block */
  .herox:not(.svc-hero) .herox-promise { justify-content: center; }

  /* ---- BATCH 10c.2 ----
     Post 86's second .herox-sub is a tagline at secondary-line scale, not body
     copy, so it comes back. Scoped by page id, NOT by .svc-hero--biz: post 146
     carries that same modifier and must keep its body paragraph hidden.
     nth-of-type(3) counts <p> only, so it is eyebrow(1), lead(2), tagline(3). */
  /* NOTE the extra .herox.svc-hero: the hiding rule above is (0,5,0) and a
     plainer selector here lost on specificity, leaving the tagline hidden. */
  body.page-id-86 .herox.svc-hero .herox-copy > p.herox-sub:nth-of-type(3) {
    display: block;
  }

  /* ---- BATCH 10c.3 service + city H1s into the home range ---- */
  .svc-hero .herox-title { font-size: clamp(28px, 7.6vw, 30px); }

  /* ---- BATCH 10c.4 depth ----
     The hero band is now ~1013px tall while the fold is at 783px, so -v3's
     160deg gradient only played its first ~68% above the fold: the deepest
     navy never appeared on screen and the visible range was compressed, which
     is the "flat" the client saw. The gradient is now sized to the visible
     height, so it runs the full --navy -> --deep distance above the fold and
     holds --deep below it. Colours are the theme's own two navys via their
     existing variables. The radial is the hero's OWN existing glow, moved from
     88% 8% (top right, where the heading used to sit) to 32% 14% (where the
     centred heading now sits). No new asset or texture. */
  /* 10e: the hero becomes a column. .wrap (the navy) takes its natural
     content height; .herox-media absorbs the rest of the first viewport, so
     the photo band grows on taller phones instead of leaving empty navy.
     The badge is position:absolute, so it stays out of this flow. */
  .herox:not(.svc-hero) {
    /* 10f: the LANDING view is the first impression, so the height equation
       subtracts the topbar as well as the sticky header. The topbar is not
       sticky and scrolls away, but at scrollY=0 it is on screen and was
       pushing the composition ~80px low, clipping the photo band and leaving
       the badge straddling the viewport edge. Measured, not assumed: 61px
       sticky header at every width; topbar 34px from 336 up, 48px below that
       where its two lines wrap (the 333-335 window is no real device). */
    --itk-header: 61px;
    display: flex;
    flex-direction: column;
    /* BATCH 11.1: the topbar is display:none at <=480, so its term is gone
       from the height equation and the landing view composes on its own.
       BATCH 16.4: svh pins the hero to the SMALL viewport, i.e. the height
       while the mobile browser chrome is expanded. That is correct at load,
       but as soon as the chrome collapses the visible viewport grows to lvh
       and the hero no longer reaches the fold, revealing the top of the next
       section (measured: ~46-90px of the first card photo on iPhone widths).
       dvh tracks the live viewport so the hero always fills it. The svh line
       is kept immediately above as the fallback for engines without dvh. */
    min-height: calc(100svh - var(--itk-header));
    min-height: calc(100dvh - var(--itk-header));
    /* BATCH 11.8: the office photo becomes a darkened layer BEHIND the navy
       across the whole hero, replacing the photo band below the fold. Navy
       stays clearly dominant; the photo reads as texture and is allowed to
       ghost through more toward the bottom. Overlay values are the ones the
       contrast table passed at - see the report. */
    background-color: var(--deep);
    background-image:
      linear-gradient(180deg,
        rgba(10, 26, 82, 0.955) 0%,
        rgba(10, 26, 82, 0.930) 42%,
        rgba(10, 26, 82, 0.855) 78%,
        rgba(10, 26, 82, 0.820) 100%),
      url(/wp-content/uploads/2026/07/hero-panel-v2.webp);
    background-size: cover, cover;
    background-position: center top, center 22%;
    background-repeat: no-repeat, no-repeat;
  }
  .herox:not(.svc-hero) > .wrap {
    /* 11.10: with .herox-media hidden, .wrap must absorb the hero height or
       the trust line's margin-top:auto has no free space to push against. */
    flex: 1 1 auto;
    display: flex;
    /* 11.8: the gradient moved up to .herox so it can sit over the photo.
       .wrap is now a plain transparent box again. */
    background: none;
  }
  /* ================= BATCH 11 =================

     11.1 topbar hidden on mobile (sitewide). Desktop keeps it.
     11.5 green Call CTA. No solid-green button variant existed in the theme
          (.btn-primary is navy), so this is the one new style the batch adds,
          built on the existing .btn geometry with the accent green.
     11.6 the three entry-point chips become solid white cards.
     11.7 the header Call pill hides at scrollY=0 on mobile and is revealed by
          IntersectionObserver once the green CTA leaves the viewport. The
          hiding is keyed off .itk-cta-auto, which JS adds, so with no JS the
          pill simply stays visible (current behaviour).
     11.8 .herox-media is retired on mobile; the photo is now a background
          layer on .herox.
     ============================================ */

  .utilbar { display: none; }

  /* burger: border removed, bars closer together. The .open transforms in -v3
     assume the old 5px gap, so they are restated for the new 3px. */
  .nav-toggle {
    border: none;
    gap: 3px;
    width: 40px;
    height: 40px;
  }
  .nav-toggle.open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

  .herox:not(.svc-hero) .herox-call-cta {
    display: flex;
    /* .herox-copy is align-items:flex-start, so flex children shrink-wrap;
       these two need to be told to span the column. */
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    margin-top: 0;
    padding: 12px 18px;
    border-radius: 10px;
    background: var(--green);
    color: var(--white);
    font-family: var(--font-head);
    font-weight: 700;
    /* 19px, not 17px: white on the theme green (#28A745) is 3.13:1, which is
       below the 4.5 WCAG asks of normal text. At >=18.66px bold it qualifies
       as large text, where the threshold is 3.0, so it passes on the theme
       colour unchanged. See the report for the alternative (darker green). */
    font-size: 19px;
    letter-spacing: 0.01em;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(10, 26, 82, 0.28);
  }
  .herox:not(.svc-hero) .herox-call-cta:hover,
  .herox:not(.svc-hero) .herox-call-cta:focus-visible { color: var(--white); }
  .herox:not(.svc-hero) .herox-call-ic { display: inline-flex; }
  .herox:not(.svc-hero) .herox-call-ic svg { width: 18px; height: 18px; }

  /* --- 11.6 white service cards --- */
  .herox:not(.svc-hero) .herox-cats {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    gap: 13px;
  }
  .herox:not(.svc-hero) .herox-cat {
    position: relative;
    min-height: 60px;
    padding: 10px 42px 10px 12px;
    gap: 12px;
    border-radius: 12px;
    /* translucent blue card, taken from the client's chosen mockup */
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.26);
    color: var(--white);
    font-size: 16.5px;
    box-shadow: none;
  }
  .herox:not(.svc-hero) .herox-cat:hover,
  .herox:not(.svc-hero) .herox-cat:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    color: var(--white);
    transform: none;
  }
  .herox:not(.svc-hero) .herox-cat-ic {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(40, 167, 69, 0.18);
    border: 1px solid rgba(40, 167, 69, 0.38);
    color: var(--green);
  }
  .herox:not(.svc-hero) .herox-cat:hover .herox-cat-ic {
    background: rgba(40, 167, 69, 0.13);
    border-color: rgba(40, 167, 69, 0.26);
  }
  .herox:not(.svc-hero) .herox-cat-ic svg { width: 20px; height: 20px; }
  /* -v3 sets .herox-cat-tx to #fff for the old dark chips; on a white card
     that is invisible, so the label follows the card's navy and is allowed
     its full width. */
  .herox:not(.svc-hero) .herox-cat-tx {
    color: inherit;
    max-width: none;
    font-size: 16.5px;
    line-height: 1.25;
  }
  /* chevron drawn in CSS rather than added to post markup */
  .herox:not(.svc-hero) .herox-cat::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(255, 255, 255, 0.55);
    border-bottom: 2px solid rgba(255, 255, 255, 0.55);
    transform: translateY(-50%) rotate(-45deg);
  }

  /* --- 11.9 trust line sits left, per spec --- */
  /* 11.10: trust line anchors the bottom of the hero; the 10d fixed
     margin-top is replaced by auto so it absorbs the leftover height. */
  .herox:not(.svc-hero) .herox-promise {
    justify-content: flex-start;
    width: 100%;
    margin-top: auto;
    padding-top: clamp(18px, 3svh, 34px);
  }
  .herox:not(.svc-hero) .herox-promise p { font-size: clamp(13px, 3.6vw, 14.5px); line-height: 1.45; }
  .herox:not(.svc-hero) .herox-title,
  .herox:not(.svc-hero) .herox-eyebrow { width: 100%; }

  /* --- transparent header over the hero, solid once scrolled past the CTA ---
     The header is sticky and sits in flow above .herox, so a transparent
     background would show the page white, not the hero. The hero is pulled up
     under it and .wrap re-adds the clearance, so the navy runs edge to edge
     behind the logo. Home only: service pages have a breadcrumb bar between
     the header and their hero, which this would sit on top of. */
  body.home .site-header {
    background: transparent;
    border-bottom-color: transparent;
    transition: background-color 200ms ease, border-color 200ms ease;
  }
  body.home .herox:not(.svc-hero) {
    margin-top: -61px;
    /* BATCH 16.4: same svh -> dvh change as the general rule above. Home pulls
       the hero up under the transparent header, so its height is the plain
       viewport unit rather than the calc(). svh kept as the fallback. */
    min-height: 100svh;
    min-height: 100dvh;
  }
  body.home .herox:not(.svc-hero) > .wrap { padding-top: 61px; }

  body.home .site-header .nav-toggle span { background: var(--white); }

  /* As soon as the page moves, the bar takes the hero's own colour at the very
     top (measured composite of the overlay over the photo across y0-61) so the
     H1 cannot show through it. It only goes white once past the green CTA. */
  body.home .site-header.scrolled {
    background: rgb(18, 34, 87);
    border-bottom-color: transparent;
  }

  body.home .site-header.itk-header-solid {
    background: var(--white);
    border-bottom-color: var(--border);
  }
  body.home .site-header.itk-header-solid .nav-toggle span { background: #6B7280; }

  /* Logo: the client's original is desktop-only. Mobile shows the new thicker
     artwork, white over the photo and full colour once the bar goes solid.
     Explicit height here because the thick art is 6.21:1 against the
     original's 4.86:1, so a shared height rule would render it wider. */
  .logo-link { position: relative; display: inline-flex; }
  .logo-img { display: block; }
  .site-header .logo-img--desktop { display: none; }
  .site-header .logo-img--m-white,
  .site-header .logo-img--m-colour { height: 22px; width: auto; }
  .site-header .logo-img--m-white { display: block; }
  .site-header .logo-img--m-colour { display: none; }
  body.home .site-header.itk-header-solid .logo-img--m-white { display: none; }
  body.home .site-header.itk-header-solid .logo-img--m-colour { display: block; }
  /* off the home page the bar is always solid, so show the colour variant */
  body:not(.home) .site-header .logo-img--m-white { display: none; }
  body:not(.home) .site-header .logo-img--m-colour { display: block; }

  /* --- 11.7 header Call pill, revealed on scroll --- */
  /* Hidden by DEFAULT, not via a JS-added class: keying it off JS meant the
     pill painted once before the script ran and flashed. The <noscript> block
     in header.html restores it when JS is unavailable. */
  .header-actions .btn-primary {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
  }
  .header-actions .btn-primary.is-revealed {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .herox:not(.svc-hero) .herox-media { display: none; }

  /* 11.8 badge, OPTION B (default, matches the mockup which shows no badge):
     the Open Now pill is hidden on mobile. It sat 12px from the hero bottom
     and now collides with the trust line that anchors there.
     OPTION A is to keep it and lift it clear of the trust line:
        .herox:not(.svc-hero) .herox-badge { bottom: 104px; }
     Swap the two rules to switch. */
  .herox:not(.svc-hero) .herox-badge { display: none; }
}

/* 10f: at 320 the content already overruns the viewport, so the generous
   56px close under the trust line only pushes the photo further down. Revert
   to -v3's 18px there, restoring the 10d behaviour at that width. */
@media (max-width: 320px) {
  .herox:not(.svc-hero) .herox-copy { padding-bottom: 18px; }
}

/* Footer city links (bottom line). -v3 styles .footer-col a and .footer-nap a
   but never .footer-bottom a, so the city links would fall back to the global
   navy <a> colour on the dark footer. Matched to .footer-col a exactly, which
   is the footer's general navigation link style. Separators stay plain text. */
.footer-bottom a { color: rgba(255, 255, 255, 0.72); }
.footer-bottom a:hover { color: var(--green); }

/* 381-480 keeps both of these at their original -v3 sizes. At or below 380 the
   city line and the widest tag bar ("Network & WiFi Support") no longer fit the
   content width at those sizes, and .herox / .cat-tags both clip rather than
   scroll, so the type tightens just enough to keep each on ONE line. */
@media (max-width: 380px) {
  .wrap p.herox-eyebrow,
  p.herox-eyebrow {
    font-size: clamp(7.6px, 2.35vw, 12px);
    letter-spacing: 0.04em;
    gap: 5px;
  }
  .herox-eyebrow::before { width: 12px; }

  .cat-card .cat-tags { padding: 12px 10px; gap: 6px; }
  .cat-card .cat-tags span { font-size: clamp(8px, 2.6vw, 10px); }
}


/* BATCH 11: the green Call CTA is new markup in post 6 and must not reach
   desktop, which this batch requires to stay byte-identical. */
@media (min-width: 481px) {
  .herox-call-cta { display: none; }
}

/* The thick logo variants are mobile only; desktop keeps the original file. */
@media (min-width: 481px) {
  .logo-img--m-white,
  .logo-img--m-colour { display: none; }
}

/* BATCH 13 (4a): post 146's H1 must break so line 2 starts "Disaster Recovery
   Services". Keeping that phrase unbreakable forces the wrap before it at
   desktop widths without a hard <br>. Desktop only: below 481 the H1 needs to
   wrap freely or it overflows the narrow hero. */
@media (min-width: 481px) {
  .herox-title .h1-keep { white-space: nowrap; }
}