/* ==========================================================================
   pages.css - page-specific styles, lifted out of the per-page <style> blocks
   that each HTML file used to carry. Loaded site-wide after styles.css.

   One section per page, headed with the page URLs that use it; a block shared
   by several pages appears once.

   Some selectors are written as "body.p-<page> .thing". Those are selectors
   that different pages defined differently - scoping them keeps each page's
   version to that page, which a single merged stylesheet otherwise could not
   do. The matching class comes from $page['body_class'] in the page itself.
   ========================================================================== */


/* --------------------------------------------------------------------------
   /about-us/meet-the-team/
   -------------------------------------------------------------------------- */
 .team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}
.team-card {
  background: #fff;
  border: 1px solid var(--light-grey);
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.team-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.10);
  transform: translateY(-4px);
}
.team-card__photo {
  background: var(--dark);
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.team-card__photo-icon {
  color: rgba(255,255,255,0.12);
}
.team-card__accent {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 48px;
  height: 4px;
  background: var(--orange);
}
.team-card__body {
  padding: 1.5rem;
}
.team-card__name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--dark);
  margin: 0 0 0.25rem;
  letter-spacing: 0.02em;
}
.team-card__role {
  color: var(--orange);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.75rem;
}
.team-card__bio {
  color: var(--mid-grey);
  font-size: 0.9rem;
  line-height: 1.8;
  margin: 0;
}
.team-card__certs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1rem;
}
.cert-badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--light-grey);
  border-radius: 4px;
  color: var(--mid-grey);
}


/* --------------------------------------------------------------------------
   /about-us/our-story/
   -------------------------------------------------------------------------- */
 .page-hero .hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
}
.page-hero .hero-copy { flex: 1; }
.page-hero .hero-icon { flex-shrink: 0; }
.page-hero .hero-icon svg {
  width: clamp(156px, 19vw, 240px);
  height: auto;
  display: block;
}
@media (max-width: 700px) {
  .page-hero .hero-icon { display: none; }
}


/* --------------------------------------------------------------------------
   /about-us/press-release/alcom-it-partner-news/
   -------------------------------------------------------------------------- */
 .press-article { max-width: 760px; }
.press-article__meta { color: var(--mid-grey); font-size: 0.95rem; letter-spacing: 0.03em; margin-bottom: 2rem; }
.press-article__meta strong { color: var(--dark); display: block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.35rem; }
.press-article p { margin-bottom: 1.4rem; }
.press-article h2 { font-size: 1.6rem; margin: 2.5rem 0 1.25rem; }
.press-article blockquote { margin: 2rem 0; padding: 1.5rem 2rem; border-left: 4px solid var(--orange); background: var(--light-grey); font-size: 1.15rem; font-style: italic; text-align: center; }
.press-ends { color: var(--mid-grey); font-family: var(--font-display); letter-spacing: 0.1em; margin: 2.5rem 0 1.5rem; }
.press-notes { border-top: 1px solid var(--light-grey); padding-top: 2rem; margin-top: 2.5rem; font-size: 0.95rem; color: var(--mid-grey); }
.press-notes h2 { font-size: 1.2rem; margin: 0 0 1rem; }
.press-back { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 2.5rem; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; color: var(--orange); font-weight: 700; }


/* --------------------------------------------------------------------------
   /about-us/press-release/from-apprentice-to-telecoms-account-manager/
   -------------------------------------------------------------------------- */
 .press-article { max-width: 760px; }
.press-article__meta { color: var(--mid-grey); font-size: 0.95rem; letter-spacing: 0.03em; margin-bottom: 2rem; }
.press-article__meta strong { color: var(--dark); display: block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.35rem; }
.press-article p { margin-bottom: 1.4rem; }
.press-article blockquote { margin: 2rem 0; padding: 1.5rem 2rem; border-left: 4px solid var(--orange); background: var(--light-grey); font-size: 1.15rem; font-style: italic; text-align: center; }
.press-article .split__img-box { margin-bottom: 2.5rem; }
.press-back { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 2.5rem; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; color: var(--orange); font-weight: 700; }


/* --------------------------------------------------------------------------
   /about-us/press-release/
   -------------------------------------------------------------------------- */
 .feature-card { display: flex; flex-direction: column; position: relative; cursor: pointer; }
.press-card__date { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; color: var(--mid-grey); margin-bottom: 0.75rem; }
.press-card__link { display: inline-block; margin-top: 1.5rem; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--orange); }
/* Stretch the link to cover the whole card so a click anywhere navigates */
.press-card__link::after { content: ""; position: absolute; inset: 0; }
.feature-card:hover .press-card__link { text-decoration: underline; }
.press-related { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--light-grey); }
.press-related__links { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 0.75rem; }
.press-related__links a { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--orange); }


/* --------------------------------------------------------------------------
   /ai/
   -------------------------------------------------------------------------- */
 @media (max-width: 700px) {
  .engineer-steps { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 420px) {
  .engineer-steps { grid-template-columns: 1fr !important; }
  .engineer-steps .process-step::after { display: none; }
}


/* --------------------------------------------------------------------------
   /contact/
   -------------------------------------------------------------------------- */
  
.page-hero .hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
}
.page-hero .hero-copy { flex: 1; }
.page-hero .hero-copy p { font-size: 1.0625rem; }
.hero-rule {
  width: 48px;
  height: 3px;
  background: var(--orange);
  margin: 1.25rem 0;
}
.page-hero .hero-icon { flex-shrink: 0; }
.page-hero .hero-icon svg {
  width: clamp(156px, 19vw, 240px);
  height: auto;
  display: block;
}
@media (max-width: 700px) {
  .page-hero .hero-icon { display: none; }
}
 
.hero-phone-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--orange);
  margin-bottom: 0.4rem;
}
.hero-phone-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: #fff;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-decoration: none;
  line-height: 1;
}
.hero-phone-link svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.hero-phone {
  margin-top: 1.75rem;
}

/* Keep the contact hero the same overall height as other page heroes.
   Its longer title, phone CTA and icon otherwise make it much taller, so
   tighten the icon column, gap, phone spacing and bottom padding. Scoped to
   the contact page so the shared .page-hero / .hero-inner rules are untouched. */
body.p-contact .page-hero { padding-bottom: 2rem; }
body.p-contact .page-hero .hero-inner { gap: 2rem; }
body.p-contact .page-hero .hero-icon svg { width: clamp(130px, 15vw, 190px); }
body.p-contact .hero-phone { margin-top: 1.25rem; }

.contact-grid {
  align-items: start;
  grid-template-columns: 1fr 1.7fr;
}
.contact-info {
  display: flex;
  flex-direction: column;
}
.trust-box {
  margin-top: auto !important;
}
.contact-form {
  box-sizing: border-box;
}
.form-textarea {
  min-height: 90px;
}
 @media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}
 
.contact-left-heading {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--dark);
  margin-bottom: 1.25rem;
}
.contact-left-intro {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 2.5rem;
}
 .contact-philosophy {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dark);
  line-height: 1.6;
  border-left: 3px solid var(--orange);
  padding-left: 0.85rem;
  margin-bottom: 2rem;
}
 
.contact-detail {
  padding: 1.1rem 0;
}
.contact-detail__label {
  font-size: 0.68rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mid-grey);
  margin-bottom: 0.2rem;
}
.contact-detail__value {
  font-size: 0.95rem;
  color: var(--dark);
  font-weight: 800;
  line-height: 1.6;
  text-decoration: none;
}
a.contact-detail {
  text-decoration: none;
  cursor: pointer;
}
a.contact-detail:hover .contact-detail__value { color: var(--orange); }
a.contact-detail:hover .contact-detail__icon { border-color: var(--dark); color: var(--dark); }
.contact-detail__emerg {
  color: var(--orange);
  font-weight: 600;
}
 
.trust-box {
  background: transparent;
  border-radius: 4px;
  padding: 1.5rem 0 0;
  margin-top: 2.5rem;
}
.trust-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid #c5c7c8;
}
.trust-item:last-child { border-bottom: none; }
.trust-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
}
.trust-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.3;
}
.trust-desc {
  font-size: 0.77rem;
  color: var(--mid-grey);
  margin-top: 0.2rem;
}
 
.contact-map {
  border-radius: 4px;
  display: block;
  margin-top: 1.5rem;
  width: 100%;
  height: 220px;
  border: 0;
}
 
.form-section-divider {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mid-grey);
  text-align: center;
  border-top: 1px solid var(--light-grey);
  padding-top: 1.25rem;
  margin: 0.5rem 0 1.25rem;
}
.form-hint {
  font-size: 0.72rem;
  color: var(--mid-grey);
  margin-top: 0.3rem;
  display: block;
}
.form-privacy {
  font-size: 0.75rem;
  color: var(--mid-grey);
  margin-bottom: 1.25rem;
  line-height: 1.6;
}
.form-privacy a { color: var(--orange); }
 
.whn-section {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--light-grey);
}
.whn-heading {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--dark);
  text-align: center;
  margin-bottom: 0.5rem;
}
.whn-heading span { color: var(--orange); }
.whn-sub {
  text-align: center;
  color: var(--mid-grey);
  font-size: 0.9rem;
  margin-bottom: 2.5rem;
}
.whn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  border: 1px solid var(--light-grey);
  border-radius: 4px;
  overflow: hidden;
}
.whn-step {
  background: #fff;
  padding: 2rem 2rem 2rem 1.75rem;
  border-right: 1px solid var(--light-grey);
  position: relative;
}
.whn-step:last-child { border-right: none; }
@media (max-width: 640px) {
  .whn-step { border-right: none; border-bottom: 1px solid var(--light-grey); }
  .whn-step:last-child { border-bottom: none; }
}
.whn-number {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--orange);
  margin-bottom: 0.75rem;
}
.whn-step h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--dark);
  margin-bottom: 0.5rem;
}
.whn-step p {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--dark);
  line-height: 1.6;
}


/* --------------------------------------------------------------------------
   /contact/thank-you/
   -------------------------------------------------------------------------- */
  .thankyou-hero {
  padding: calc(var(--header-h) + 3rem) 0 3rem;
  text-align: center;
}
.thankyou-check {
  width: 68px;
  height: 68px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: #e6f4ea;
  display: flex;
  align-items: center;
  justify-content: center;
}
.thankyou-check svg {
  width: 32px;
  height: 32px;
  stroke: #1e8a3b;
}
.thankyou-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--dark);
  margin-bottom: 0.75rem;
}
.thankyou-hero h1 span {
  display: block;
  color: var(--orange);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  margin-top: 0.25rem;
}
.thankyou-hero p {
  color: var(--mid-grey);
  font-size: 1.05rem;
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.7;
}
.thankyou-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
  flex-wrap: wrap;
}
 /* What happens next section, reused from the contact page */
body.p-contact-thank-you .whn-section{
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid var(--light-grey);
}
.whn-heading {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--dark);
  text-align: center;
  margin-bottom: 0.5rem;
}
.whn-heading span { color: var(--orange); }
.whn-sub {
  text-align: center;
  color: var(--mid-grey);
  font-size: 0.9rem;
  margin-bottom: 2.5rem;
}
.whn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  border: 1px solid var(--light-grey);
  border-radius: 4px;
  overflow: hidden;
}
.whn-step {
  background: #fff;
  padding: 2rem 2rem 2rem 1.75rem;
  border-right: 1px solid var(--light-grey);
  position: relative;
}
.whn-step:last-child { border-right: none; }
@media (max-width: 640px) {
  .whn-step { border-right: none; border-bottom: 1px solid var(--light-grey); }
  .whn-step:last-child { border-bottom: none; }
}
.whn-number {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--orange);
  margin-bottom: 0.75rem;
}
.whn-step h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--dark);
  margin-bottom: 0.5rem;
}
.whn-step p {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--dark);
  line-height: 1.6;
}


/* --------------------------------------------------------------------------
   /csr/
   -------------------------------------------------------------------------- */
 /* CSR video - click-to-play facade using the film's own orange title card */
body.p-csr .video-embed{
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 2px;
  overflow: hidden;
  background: var(--orange);
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
body.p-csr .video-embed__poster{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--orange);
  border: 0;
  text-align: center;
}
.video-embed__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.1rem, 3.2vw, 1.9rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
}
body.p-csr .video-embed__play{
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 2px solid #fff;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
.video-embed__play:hover,
.video-embed__play:focus-visible {
  background: #fff;
  transform: translateX(-50%) scale(1.08);
}
.video-embed__play svg { fill: #fff; margin-left: 4px; transition: fill 0.25s ease; }
.video-embed__play:hover svg,
.video-embed__play:focus-visible svg { fill: var(--orange); }
 /* Point lists here hold full sentences, so override brand-list's compact
   uppercase label styling to read like the body copy around them */
.csr .brand-list { margin: 0; max-width: 620px; }
.csr .brand-list li {
  display: block;
  position: relative;
  padding-left: 1.75rem;
  font-weight: 400;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.8;
  color: var(--mid-grey);
  margin-bottom: 1rem;
}
.csr .brand-list li:last-child { margin-bottom: 0; }
.csr .brand-list li::before {
  position: absolute;
  left: 0;
  top: 0.55rem;
  margin-top: 0;
}
.csr .brand-list li a { color: var(--orange); font-weight: 700; }
 /* Pillar jump-nav - lets users (and crawlers) see the full scope of the page at a glance */
.csr-jumpnav {
  border-bottom: 1px solid rgba(60,60,59,0.1);
  padding: 1rem 0;
}
.csr-jumpnav .container {
  display: flex;
  align-items: center;
  gap: 0.75rem 1.5rem;
  flex-wrap: wrap;
}
.csr-jumpnav__label {
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mid-grey);
  white-space: nowrap;
}
.csr-jumpnav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.csr-jumpnav__list a {
  color: var(--dark);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}
.csr-jumpnav__list a:hover,
.csr-jumpnav__list a:focus-visible {
  color: var(--orange);
}


/* --------------------------------------------------------------------------
   /cyber-security/cyber-security-guide/
   -------------------------------------------------------------------------- */
  /* Local styles for the cybersecurity guide - table of contents + anchor offset */
  .guide [id] { scroll-margin-top: 110px; }
  .toc {
background: var(--off-white);
border: 1px solid var(--light-grey);
border-left: 4px solid var(--orange);
border-radius: 6px;
padding: 2rem 2.25rem;
max-width: 760px;
  }
  .toc__title {
font-family: var(--font-display);
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.02em;
font-size: 1.35rem;
color: var(--dark);
margin: 0 0 1.25rem;
  }
  .toc__list {
list-style: none;
margin: 0;
padding: 0;
columns: 2;
column-gap: 2.5rem;
  }
  .toc__list li {
margin: 0 0 0.75rem;
break-inside: avoid;
padding-left: 1.5rem;
position: relative;
line-height: 1.5;
  }
  .toc__list li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 8px;
height: 8px;
border: 2px solid var(--orange);
border-radius: 50%;
  }
  .toc__list a {
color: var(--dark);
text-decoration: none;
font-weight: 600;
font-size: 0.95rem;
transition: color 0.15s ease;
  }
  .toc__list a:hover { color: var(--orange); }
  .related-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 1.5rem;
font-weight: 700;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--orange);
text-decoration: none;
  }
  .related-link:hover { text-decoration: underline; }
  .related-link svg { flex-shrink: 0; }
  /* Training topic list - compact two-column checklist */
  .topic-grid {
list-style: none;
margin: 3rem 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1.25rem 2.5rem;
  }
  .topic-grid li {
position: relative;
padding-left: 2.25rem;
line-height: 1.7;
color: var(--mid-grey);
font-size: 0.95rem;
  }
  .topic-grid li strong {
display: block;
color: var(--dark);
font-weight: 700;
margin-bottom: 0.15rem;
  }
  .topic-grid li::before {
content: "";
position: absolute;
left: 0;
top: 0.2em;
width: 20px;
height: 20px;
border: 2px solid var(--orange);
border-radius: 50%;
background: no-repeat center / 11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fe6a00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  }
  @media (max-width: 600px) {
.toc__list { columns: 1; }
.toc { padding: 1.5rem 1.5rem; }
  }


/* --------------------------------------------------------------------------
   /cyber-security/cyber-security-services/assessment/
   -------------------------------------------------------------------------- */
 /* ---- Hero: answer-first lead + early call to action ---- */
.hero-lead {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--light-grey);
  max-width: 640px;
  margin-top: 0.75rem;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.75rem;
}
.hero-actions .btn--lg { padding: 1.05rem 2.25rem; font-size: 0.85rem; }
.hero-call {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
  font-size: 1.05rem;
  white-space: nowrap;
}
.hero-call svg { width: 20px; height: 20px; color: var(--orange); flex-shrink: 0; }
.hero-call:hover { color: var(--orange); }
.hero-reassure {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 1.5rem;
  list-style: none;
  padding: 0;
}
.hero-reassure li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--light-grey);
}
.hero-reassure svg { width: 18px; height: 18px; color: var(--orange); flex-shrink: 0; }


/* --------------------------------------------------------------------------
   /cyber-security/cyber-security-services/
   -------------------------------------------------------------------------- */
 /* ---- Testimonial box: compact prompt in the hero; opens a square panel on hover ---- */
.pr-testimonial-box {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.75rem;
  background: rgba(254,106,0,0.12);
  border: 1px solid rgba(254,106,0,0.4);
  border-left: 3px solid var(--orange);
  border-radius: 6px;
  padding: 0.7rem 1.25rem;
  cursor: pointer;
  transition: background 0.2s ease;
}
.pr-testimonial-box:hover { background: rgba(254,106,0,0.2); }
.pr-testimonial-box:focus { outline: none; }
.pr-testimonial-box__prompt { display: flex; align-items: center; gap: 0.7rem; }
.pr-testimonial-box__prompt svg { color: var(--orange); width: 26px; height: 26px; flex-shrink: 0; }
.pr-testimonial-box__label {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  color: var(--white);
  line-height: 1.25;
}
.pr-testimonial-box__hint {
  display: block;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.78rem;
  color: var(--light-grey);
  margin-top: 0.15rem;
}
.pr-testimonial-box__content {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  width: 320px;
  height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--white);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  overflow: visible;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.92);
  transform-origin: bottom left;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  z-index: 30;
}
.pr-testimonial-box__content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 24px;
  border: 9px solid transparent;
  border-top-color: var(--white);
}
.pr-testimonial-box:hover .pr-testimonial-box__content {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.pr-testimonial-box__quote-mark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.1rem;
  color: var(--orange);
  line-height: 1;
  display: block;
  margin-bottom: 0.2rem;
}
.pr-testimonial-box__content p {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--dark);
  margin: 0;
}
.pr-testimonial-box__stars {
  display: flex;
  gap: 0.2rem;
  margin-top: 0.9rem;
  color: var(--orange);
}
.pr-testimonial-box__stars svg { width: 16px; height: 16px; }
 /* ---- Hero: answer-first lead + early call to action ---- */
.hero-lead {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--light-grey);
  max-width: 640px;
  margin-top: 0.75rem;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.75rem;
}
.hero-actions .btn--lg { padding: 1.05rem 2.25rem; font-size: 0.85rem; }
.hero-call {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
  font-size: 1.05rem;
  white-space: nowrap;
}
.hero-call svg { width: 20px; height: 20px; color: var(--orange); flex-shrink: 0; }
.hero-call:hover { color: var(--orange); }
.hero-reassure {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 1.5rem;
  list-style: none;
  padding: 0;
}
.hero-reassure li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--light-grey);
}
.hero-reassure svg { width: 18px; height: 18px; color: var(--orange); flex-shrink: 0; }


/* --------------------------------------------------------------------------
   10 pages: /faqs/business-support-faqs/
   /faqs/cyber-security-faqs/
   /faqs/data-recovery-faqs/
   /faqs/it-faqs/
   /faqs/it-support-faqs/
   /faqs/remote-it-support-for-business/
   /faqs/telephone-systems-faqs/
   /faqs/top-10-remote-it-support-questions/
   /faqs/voip-faqs/
   /faqs/windows-10/
   -------------------------------------------------------------------------- */
 /* --- FAQ accordion (page-scoped) --- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.faq-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 3.5rem;
  align-items: start;
}
/* Category quick-jump rail */
.faq-nav {
  position: sticky;
  top: calc(var(--header-h) + 20px);
}
.faq-nav__heading {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--dark);
  margin: 0 0 1rem;
}
.faq-nav__list {
  list-style: none;
  margin: 0; padding: 0;
  border-left: 2px solid var(--light-grey);
}
.faq-nav__list a {
  display: block;
  padding: 0.55rem 0 0.55rem 1rem;
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: var(--mid-grey);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.faq-nav__list a:hover,
.faq-nav__list a:focus {
  color: var(--orange);
  border-left-color: var(--orange);
}
.faq-group { margin-bottom: 3rem; }
.faq-group:last-child { margin-bottom: 0; }
.faq-group__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--dark);
  margin: 0 0 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 3px solid var(--orange);
  scroll-margin-top: 110px;
}
.faq-item {
  border: 1px solid var(--light-grey);
  border-radius: 6px;
  margin-bottom: 0.85rem;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq-item[open] {
  border-color: var(--orange);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}
.faq-item__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.15rem 1.35rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--dark);
  line-height: 1.4;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q-text {
  margin: 0;
  font: inherit;
  color: inherit;
  font-weight: inherit;
}
.faq-item__q:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: 4px;
}
.faq-item__q:hover { color: var(--orange); }
.faq-item__icon {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  position: relative;
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  background: var(--orange);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.faq-item__icon::before {
  top: 50%; left: 4px; right: 4px; height: 3px;
  transform: translateY(-50%);
}
.faq-item__icon::after {
  left: 50%; top: 4px; bottom: 4px; width: 3px;
  transform: translateX(-50%);
}
.faq-item[open] .faq-item__icon::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}
.faq-item__a {
  padding: 0 1.35rem 1.3rem;
  color: var(--mid-grey);
  line-height: 1.8;
}
.faq-item__a p { margin: 0 0 0.9rem; }
.faq-item__a p:last-child { margin-bottom: 0; }
.faq-item__a a { color: var(--orange); font-weight: 600; }
.faq-item__a ul {
  margin: 0 0 0.9rem;
  padding-left: 1.2rem;
}
.faq-item__a li { margin-bottom: 0.4rem; }
@media (max-width: 860px) {
  .faq-layout { grid-template-columns: 1fr; gap: 2rem; }
  .faq-nav { position: static; }
  .faq-nav__list { display: flex; flex-wrap: wrap; gap: 0.5rem; border-left: 0; }
  .faq-nav__list a {
    border: 1px solid var(--light-grey);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    margin-left: 0;
  }
  .faq-nav__list a:hover,
  .faq-nav__list a:focus { border-color: var(--orange); }
}


/* --------------------------------------------------------------------------
   /faqs/general/
   -------------------------------------------------------------------------- */
 /* --- FAQ accordion (page-scoped) --- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.faq-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 3.5rem;
  align-items: start;
}
/* Category quick-jump rail */
.faq-nav {
  position: sticky;
  top: calc(var(--header-h) + 20px);
}
.faq-nav__heading {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--dark);
  margin: 0 0 1rem;
}
.faq-nav__list {
  list-style: none;
  margin: 0; padding: 0;
  border-left: 2px solid var(--light-grey);
}
.faq-nav__list a {
  display: block;
  padding: 0.55rem 0 0.55rem 1rem;
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: var(--mid-grey);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.faq-nav__list a:hover,
.faq-nav__list a:focus {
  color: var(--orange);
  border-left-color: var(--orange);
}
.faq-group { margin-bottom: 3rem; }
.faq-group:last-child { margin-bottom: 0; }
.faq-group__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--dark);
  margin: 0 0 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 3px solid var(--orange);
  scroll-margin-top: 110px;
}
.faq-item {
  border: 1px solid var(--light-grey);
  border-radius: 6px;
  margin-bottom: 0.85rem;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq-item[open] {
  border-color: var(--orange);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}
.faq-item__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.15rem 1.35rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--dark);
  line-height: 1.4;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q-text {
  margin: 0;
  font: inherit;
  color: inherit;
  font-weight: inherit;
}
.faq-item__q:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: 4px;
}
.faq-item__q:hover { color: var(--orange); }
.faq-item__icon {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  position: relative;
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  background: var(--orange);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.faq-item__icon::before {
  top: 50%; left: 4px; right: 4px; height: 3px;
  transform: translateY(-50%);
}
.faq-item__icon::after {
  left: 50%; top: 4px; bottom: 4px; width: 3px;
  transform: translateX(-50%);
}
.faq-item[open] .faq-item__icon::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}
.faq-item__a {
  padding: 0 1.35rem 1.3rem;
  color: var(--mid-grey);
  line-height: 1.8;
}
.faq-item__a p { margin: 0 0 0.9rem; }
.faq-item__a p:last-child { margin-bottom: 0; }
.faq-item__a a { color: var(--orange); font-weight: 600; }
.faq-item__a ul {
  margin: 0 0 0.9rem;
  padding-left: 1.2rem;
}
.faq-item__a li { margin-bottom: 0.4rem; }
@media (max-width: 860px) {
  .faq-layout { grid-template-columns: 1fr; gap: 2rem; }
  .faq-nav { position: static; }
  .faq-nav__list { display: flex; flex-wrap: wrap; gap: 0.5rem; border-left: 0; }
  .faq-nav__list a {
    border: 1px solid var(--light-grey);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    margin-left: 0;
  }
  .faq-nav__list a:hover,
  .faq-nav__list a:focus { border-color: var(--orange); }
}
/* --- Browse-by-topic --- */
.topic-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.75rem 0 0;
}
.topic-links a {
  border: 1px solid var(--light-grey);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  color: var(--dark);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.topic-links a:hover,
.topic-links a:focus {
  color: #fff;
  background: var(--orange);
  border-color: var(--orange);
}


/* --------------------------------------------------------------------------
   /faqs/
   -------------------------------------------------------------------------- */
 .kb-section { margin-bottom: 3.5rem; }
.kb-section__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.6rem;
  color: var(--dark);
  margin: 0 0 1.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 3px solid var(--orange);
}
.kb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}
.kb-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--light-grey);
  border-radius: 8px;
  padding: 1.5rem;
  background: #fff;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.kb-card:hover {
  border-color: var(--orange);
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
  transform: translateY(-3px);
}
.kb-card__count {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--orange);
  margin-bottom: 0.6rem;
}
.kb-card__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--dark);
  margin: 0 0 0.6rem;
}
.kb-card__desc {
  color: var(--mid-grey);
  line-height: 1.7;
  font-size: 0.92rem;
  margin: 0 0 1.1rem;
  flex: 1 1 auto;
}
.kb-card__link {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--orange);
}
.kb-card--guide { background: #fafafa; }


/* --------------------------------------------------------------------------
   /faqs/it-suppliers/
   -------------------------------------------------------------------------- */
 .sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* --- Article body (page-scoped) --- */
.article {
  max-width: 820px;
  margin: 0 auto;
}
.article > p {
  color: var(--mid-grey);
  line-height: 1.85;
  margin: 0 0 1.2rem;
}
.article h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.75rem;
  color: var(--dark);
  margin: 2.75rem 0 1.1rem;
  padding-bottom: 0.6rem;
  border-bottom: 3px solid var(--orange);
  scroll-margin-top: 110px;
}
.article h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.25rem;
  color: var(--dark);
  margin: 2rem 0 0.9rem;
}
.article h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--dark);
  margin: 1.6rem 0 0.5rem;
}
.article ul, .article ol {
  color: var(--mid-grey);
  line-height: 1.85;
  margin: 0 0 1.2rem;
  padding-left: 1.4rem;
}
.article li { margin-bottom: 0.55rem; }
.article li > strong { color: var(--dark); }
/* --- FAQ accordion (page-scoped) --- */
.faq-group { margin-bottom: 3rem; }
.faq-group:last-child { margin-bottom: 0; }
body.p-faqs-it-suppliers .faq-group__title{
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.75rem;
  color: var(--dark);
  margin: 2.75rem 0 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 3px solid var(--orange);
  scroll-margin-top: 110px;
}
.faq-item {
  border: 1px solid var(--light-grey);
  border-radius: 6px;
  margin-bottom: 0.85rem;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq-item[open] {
  border-color: var(--orange);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}
.faq-item__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.15rem 1.35rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--dark);
  line-height: 1.4;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q-text {
  margin: 0;
  font: inherit;
  color: inherit;
  font-weight: inherit;
}
.faq-item__q:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: 4px;
}
.faq-item__q:hover { color: var(--orange); }
.faq-item__icon {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  position: relative;
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  background: var(--orange);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.faq-item__icon::before {
  top: 50%; left: 4px; right: 4px; height: 3px;
  transform: translateY(-50%);
}
.faq-item__icon::after {
  left: 50%; top: 4px; bottom: 4px; width: 3px;
  transform: translateX(-50%);
}
.faq-item[open] .faq-item__icon::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}
.faq-item__a {
  padding: 0 1.35rem 1.3rem;
  color: var(--mid-grey);
  line-height: 1.8;
}
.faq-item__a p { margin: 0 0 0.9rem; }
.faq-item__a p:last-child { margin-bottom: 0; }
.faq-item__a a { color: var(--orange); font-weight: 600; }


/* --------------------------------------------------------------------------
   /
   -------------------------------------------------------------------------- */
  /* -- TESTIMONIALS: two on top, third centered below -- */
.testimonials-grid--centered {
  grid-template-columns: repeat(2, 1fr);
  max-width: 900px;
  margin-inline: auto;
}
.testimonials-grid--centered .testimonial-card:last-child {
  grid-column: 1 / -1;
  max-width: calc(50% - 1rem);
  margin-inline: auto;
}
@media (max-width: 640px) {
  .testimonials-grid--centered {
    grid-template-columns: 1fr;
  }
  .testimonials-grid--centered .testimonial-card:last-child {
    max-width: none;
  }
}
 /* -- REVIEWS CAROUSEL -- */
.reviews-section {
  background: #f7f7f6;
  border: 1px solid var(--light-grey);
  border-radius: 4px;
  padding: 3rem 2.5rem;
  text-align: center;
}
.reviews-quote-icon {
  color: var(--orange);
  width: 28px;
  height: 28px;
  margin: 0 auto 1.5rem;
  display: block;
  opacity: 0.8;
}
.review-carousel {
  position: relative;
  overflow: hidden;
  min-height: 160px;
}
.review-track {
  display: flex;
  transition: transform 0.5s ease;
  will-change: transform;
}
.review-slide {
  min-width: 100%;
  padding: 0 0.5rem;
  box-sizing: border-box;
}
.review-slide blockquote {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  font-style: italic;
  color: var(--dark);
  line-height: 1.8;
  max-width: 680px;
  margin: 0 auto 1.25rem;
}
.reviews-stars {
  font-size: 1.55rem;
  color: #f4b400;
  letter-spacing: 0.1em;
  margin: 0 0 0.4rem;
}
.reviews-rated {
  font-size: 1.05rem;
  color: var(--dark);
  margin: 0 0 1.75rem;
}
.review-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.rdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--light-grey);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s;
}
.rdot--active { background: var(--orange); }
.review-nav {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.review-nav button {
  background: none;
  border: 1.5px solid var(--light-grey);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dark);
  transition: border-color 0.2s;
}
.review-nav button:hover { border-color: var(--orange); color: var(--orange); }
.reviews-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.25rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--orange);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}


/* --------------------------------------------------------------------------
   /it-consultants/
   -------------------------------------------------------------------------- */
 .consultant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2.5rem 1.5rem;
  margin-top: 3rem;
}
.consultant {
  text-align: center;
}
.consultant__photo {
  width: 150px;
  height: 150px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--dark);
  border: 4px solid #fff;
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.consultant:hover .consultant__photo {
  transform: translateY(-4px);
  box-shadow: 0 14px 38px rgba(0,0,0,0.18);
}
.consultant__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.consultant__name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--dark);
  margin: 0 0 0.35rem;
}
.consultant__role {
  color: var(--orange);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.consult-call {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.consult-call__number {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--orange);
  text-decoration: none;
  margin-top: 1.5rem;
  letter-spacing: 0.01em;
}
.consult-call__number svg {
  width: 0.85em;
  height: 0.85em;
}


/* --------------------------------------------------------------------------
   /it-jargon-busters/business-it-products/
   -------------------------------------------------------------------------- */
  .feature-card[id] { scroll-margin-top: 100px; }
  .guide-toc {
background: var(--white);
border: 1px solid var(--light-grey);
border-radius: 10px;
padding: 2.25rem;
margin-top: 2.5rem;
box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  }
  .guide-toc__title {
font-family: var(--font-display);
text-transform: uppercase;
font-weight: 900;
font-size: 1.25rem;
color: var(--dark);
margin-bottom: 1.25rem;
  }
  .guide-toc__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 0.5rem 2rem;
list-style: none;
margin: 0;
padding: 0;
  }
  .guide-toc__grid a {
display: flex;
align-items: baseline;
gap: 0.65rem;
padding: 0.55rem 0;
color: var(--dark);
text-decoration: none;
border-bottom: 1px solid var(--light-grey);
transition: color 0.2s;
  }
  .guide-toc__grid a:hover { color: var(--orange); }
  .guide-toc__grid a span {
font-family: var(--font-display);
font-weight: 900;
color: var(--orange);
min-width: 1.5rem;
  }
  .feature-card__link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: 1.25rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
font-size: 0.85rem;
color: var(--orange);
text-decoration: none;
  }
  .feature-card__link svg { width: 16px; height: 16px; }
  .feature-card__link:hover { text-decoration: underline; }


/* --------------------------------------------------------------------------
   /it-jargon-busters/business-it-support/
   -------------------------------------------------------------------------- */
  /* Local styles for the IT support guide - table of contents + anchor offset */
  .guide [id] { scroll-margin-top: 110px; }
  .toc {
background: var(--off-white);
border: 1px solid var(--light-grey);
border-left: 4px solid var(--orange);
border-radius: 6px;
padding: 2rem 2.25rem;
max-width: 760px;
  }
  .toc__title {
font-family: var(--font-display);
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.02em;
font-size: 1.35rem;
color: var(--dark);
margin: 0 0 1.25rem;
  }
  .toc__list {
list-style: none;
margin: 0;
padding: 0;
columns: 2;
column-gap: 2.5rem;
  }
  .toc__list li {
margin: 0 0 0.75rem;
break-inside: avoid;
padding-left: 1.5rem;
position: relative;
line-height: 1.5;
  }
  .toc__list li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 8px;
height: 8px;
border: 2px solid var(--orange);
border-radius: 50%;
  }
  .toc__list a {
color: var(--dark);
text-decoration: none;
font-weight: 600;
font-size: 0.95rem;
transition: color 0.15s ease;
  }
  .toc__list a:hover { color: var(--orange); }
  .related-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 1.5rem;
font-weight: 700;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--orange);
text-decoration: none;
  }
  .related-link:hover { text-decoration: underline; }
  .related-link svg { flex-shrink: 0; }
  @media (max-width: 600px) {
.toc__list { columns: 1; }
.toc { padding: 1.5rem 1.5rem; }
  }


/* --------------------------------------------------------------------------
   /it-jargon-busters/business-phone-systems-guide/
   -------------------------------------------------------------------------- */
 /* Local styles for the phone systems guide - table of contents, anchor offset, FAQ accordion */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.guide [id] { scroll-margin-top: 110px; }
.toc {
  background: var(--off-white);
  border: 1px solid var(--light-grey);
  border-left: 4px solid var(--orange);
  border-radius: 6px;
  padding: 2rem 2.25rem;
  max-width: 760px;
}
.toc__title {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.35rem;
  color: var(--dark);
  margin: 0 0 1.25rem;
}
.toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 2.5rem;
}
.toc__list li {
  margin: 0 0 0.75rem;
  break-inside: avoid;
  padding-left: 1.5rem;
  position: relative;
  line-height: 1.5;
}
.toc__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border: 2px solid var(--orange);
  border-radius: 50%;
}
.toc__list a {
  color: var(--dark);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: color 0.15s ease;
}
.toc__list a:hover { color: var(--orange); }
.related-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--orange);
  text-decoration: none;
}
.related-link:hover { text-decoration: underline; }
.related-link svg { flex-shrink: 0; }
 /* FAQ accordion (page-scoped) */
.faq-item {
  border: 1px solid var(--light-grey);
  border-radius: 6px;
  margin-bottom: 0.85rem;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq-item[open] {
  border-color: var(--orange);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}
.faq-item__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.15rem 1.35rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--dark);
  line-height: 1.4;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: 4px;
}
.faq-item__q:hover { color: var(--orange); }
.faq-item__icon {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  position: relative;
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  background: var(--orange);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.faq-item__icon::before {
  top: 50%; left: 4px; right: 4px; height: 3px;
  transform: translateY(-50%);
}
.faq-item__icon::after {
  left: 50%; top: 4px; bottom: 4px; width: 3px;
  transform: translateX(-50%);
}
.faq-item[open] .faq-item__icon::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}
body.p-it-jargon-busters-business-phone-systems-guide .faq-item__a{
  padding: 0 1.35rem 1.3rem;
  color: var(--mid-grey);
  line-height: 1.8;
  max-width: 820px;
}
.faq-item__a p { margin: 0 0 0.9rem; }
.faq-item__a p:last-child { margin-bottom: 0; }
.faq-item__a a { color: var(--orange); font-weight: 600; }
 /* Get in touch detail strip */
.contact-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem 2.5rem;
  margin-top: 2.5rem;
  max-width: 900px;
}
.contact-strip__item {
  border-left: 3px solid var(--orange);
  padding-left: 1.1rem;
}
.contact-strip__label {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 0.03em;
  font-size: 0.85rem;
  color: var(--orange);
  margin: 0 0 0.35rem;
}
.contact-strip__value {
  color: var(--mid-grey);
  line-height: 1.7;
  font-size: 0.98rem;
}
.contact-strip__value a { color: var(--dark); font-weight: 600; text-decoration: none; }
.contact-strip__value a:hover { color: var(--orange); }
 @media (max-width: 600px) {
  .toc__list { columns: 1; }
  .toc { padding: 1.5rem 1.5rem; }
}


/* --------------------------------------------------------------------------
   /it-jargon-busters/
   -------------------------------------------------------------------------- */
 /* --- Jargon Busters grid (page-scoped) --- */
.jargon-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
/* Last card (IT Products) sits centred on the bottom row */
.jargon-card:last-child {
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  max-width: calc(50% - 0.75rem);
}
@media (max-width: 680px) {
  .jargon-grid { grid-template-columns: 1fr; }
  .jargon-card:last-child {
    grid-column: auto;
    justify-self: stretch;
    max-width: none;
  }
}
.jargon-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  background: #fff;
  border: 1px solid var(--light-grey);
  border-radius: 8px;
  padding: 1.75rem;
  color: inherit;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.jargon-card:hover,
.jargon-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--orange);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}
.jargon-card__mainlink {
  display: block;
  text-decoration: none;
  color: inherit;
  outline: none;
}
.jargon-card__label {
  align-self: flex-start;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  background: rgba(254, 106, 0, 0.08);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  text-decoration: none;
  position: relative;
  z-index: 1;
}
.jargon-card__label:hover,
.jargon-card__label:focus-visible {
  background: rgba(254, 106, 0, 0.16);
  text-decoration: underline;
}
.jargon-card__see-also {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--mid-grey);
  position: relative;
  z-index: 1;
}
.jargon-card__see-also a {
  color: var(--orange);
  text-decoration: underline;
}
.jargon-intro {
  max-width: 62ch;
  color: var(--mid-grey);
  line-height: 1.8;
  margin: 0 0 2.5rem;
}
.jargon-intro a { color: var(--orange); }
.glossary-section {
  background: var(--off-white, #f7f7f5);
  border-top: 1px solid var(--light-grey);
  border-bottom: 1px solid var(--light-grey);
}
.glossary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 2.5rem;
  margin-top: 1.5rem;
}
@media (max-width: 680px) {
  .glossary-grid { grid-template-columns: 1fr; }
}
.glossary-grid dt {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
  color: var(--dark);
  margin-bottom: 0.4rem;
}
.glossary-grid dd {
  margin: 0;
  color: var(--mid-grey);
  line-height: 1.7;
}
.jargon-card__title {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1.5rem;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--dark);
  margin: 0.9rem 0 0.7rem;
}
.jargon-card:hover .jargon-card__title,
.jargon-card:focus-within .jargon-card__title { color: var(--orange); }
.jargon-card__desc {
  color: var(--mid-grey);
  line-height: 1.8;
  margin: 0;
  flex: 1 1 auto;
}
.jargon-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 0.03em;
  font-size: 0.95rem;
  color: var(--orange);
}
.jargon-card__cta svg {
  width: 18px; height: 18px;
  transition: transform 0.2s ease;
}
.jargon-card:hover .jargon-card__cta svg,
.jargon-card:focus-within .jargon-card__cta svg { transform: translateX(4px); }


/* --------------------------------------------------------------------------
   /it-jargon-busters/it-business-management/
   -------------------------------------------------------------------------- */
 /* --- Guide page-scoped styles --- */
.guide-intro p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin: 0 0 1.25rem;
  max-width: 820px;
}
/* Related-reading callout link */
.resource-link {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.5rem;
  padding: 0.9rem 1.25rem;
  border: 1px solid var(--light-grey);
  border-left: 4px solid var(--orange);
  border-radius: 6px;
  background: #fff;
  text-decoration: none;
  color: var(--dark);
  font-weight: 600;
  line-height: 1.4;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.resource-link:hover,
.resource-link:focus-visible {
  border-color: var(--orange);
  box-shadow: 0 8px 22px rgba(0,0,0,0.06);
  transform: translateY(-2px);
  outline: none;
}
.resource-link svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--orange); }
.resource-link__label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 700;
  margin-bottom: 0.15rem;
}
 /* Pain point vs solution */
.pain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}
.pain-card {
  background: #fff;
  border: 1px solid var(--light-grey);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pain-card__problem {
  padding: 1.5rem;
  border-bottom: 1px solid var(--light-grey);
}
.pain-card__tag {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mid-grey);
  margin-bottom: 0.6rem;
}
.pain-card__problem h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--dark);
  margin: 0 0 0.6rem;
  line-height: 1.25;
}
.pain-card__problem p { color: var(--mid-grey); line-height: 1.7; margin: 0; font-size: 0.95rem; }
.pain-card__solution {
  padding: 1.5rem;
  background: rgba(254, 106, 0, 0.05);
  flex: 1 1 auto;
}
.pain-card__tag--fix { color: var(--orange); }
.pain-card__solution p { color: var(--dark); line-height: 1.7; margin: 0; font-size: 0.95rem; }
 /* Success stories */
.story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}
.story-card {
  background: #fff;
  border: 1px solid var(--light-grey);
  border-radius: 8px;
  padding: 2rem;
}
.story-card__sector {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--orange);
}
.story-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--dark);
  margin: 0.5rem 0 1rem;
  line-height: 1.2;
}
.story-card__body { color: var(--mid-grey); line-height: 1.8; margin: 0; }
.story-card__stat {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--light-grey);
}
.story-card__stat strong {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.25rem;
  color: var(--orange);
  line-height: 1;
}
.story-card__stat span { color: var(--mid-grey); font-size: 0.9rem; line-height: 1.4; }


/* --------------------------------------------------------------------------
   /it-support/
   -------------------------------------------------------------------------- */
 /* ---- Compact hero so the plan cards sit higher on the page ---- */
.page-hero--compact { padding: calc(7rem + var(--header-extra)) 0 3rem; }
 /* ---- Testimonial box: compact prompt; opens a square panel on hover ---- */
.pr-testimonial-box {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.75rem;
  background: rgba(254,106,0,0.12);
  border: 1px solid rgba(254,106,0,0.4);
  border-left: 3px solid var(--orange);
  border-radius: 6px;
  padding: 0.7rem 1.25rem;
  cursor: pointer;
  transition: background 0.2s ease;
}
.pr-testimonial-box:hover { background: rgba(254,106,0,0.2); }
.pr-testimonial-box:focus { outline: none; }
.pr-testimonial-box__prompt { display: flex; align-items: center; gap: 0.7rem; }
.pr-testimonial-box__prompt svg { color: var(--orange); width: 26px; height: 26px; flex-shrink: 0; }
body.p-it-support .pr-testimonial-box__label{
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  color: #000;
  line-height: 1.25;
}
body.p-it-support .pr-testimonial-box__hint{
  display: block;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.78rem;
  color: var(--dark);
  margin-top: 0.15rem;
}
.pr-testimonial-box__content {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  width: 320px;
  height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--white);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  overflow: visible;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.92);
  transform-origin: bottom left;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  z-index: 30;
}
.pr-testimonial-box__content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 24px;
  border: 9px solid transparent;
  border-top-color: var(--white);
}
.pr-testimonial-box:hover .pr-testimonial-box__content {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.pr-testimonial-box__quote-mark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.1rem;
  color: var(--orange);
  line-height: 1;
  display: block;
  margin-bottom: 0.2rem;
}
body.p-it-support .pr-testimonial-box__content p{
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--dark);
  margin: 0;
}
.pr-testimonial-box__stars {
  display: flex;
  gap: 0.2rem;
  margin-top: 0.9rem;
  color: var(--orange);
}
.pr-testimonial-box__stars svg { width: 16px; height: 16px; }
 .plans {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--light-grey);
  border-radius: 10px;
  padding: 2.5rem;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0,0,0,0.09);
  border-color: var(--orange);
}
.plan-card__icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  margin-bottom: 1.5rem;
  flex-shrink: 0;
  transition: transform .3s;
}
.plan-card:hover .plan-card__icon { transform: scale(1.08); }
.plan-card__icon svg { width: 28px; height: 28px; }
.plan-card__title {
  font-size: 1.6rem;
  margin: 0 0 0.75rem;
}
.plan-card__body {
  color: var(--mid-grey);
  line-height: 1.75;
  font-size: 1.05rem;
  margin: 0 0 1.5rem;
}
.plan-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0 0 1rem;
  color: var(--dark);
}
.plan-card__from { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mid-grey); font-weight: 600; }
.plan-card__amount { font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; color: var(--orange); line-height: 1; }
.plan-card__unit { font-size: 0.85rem; color: var(--mid-grey); font-weight: 400; }
.plan-card__ribbon {
  position: absolute;
  top: 0;
  left: 0;
  width: 110px;
  height: 110px;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.plan-card__ribbon span {
  position: absolute;
  top: 26px;
  left: -32px;
  width: 150px;
  background: var(--orange);
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4rem 0;
  transform: rotate(-45deg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
 /* ---- At a Glance comparison table (matches plan detail pages) ---- */
body.p-it-support .g-compare{ max-width: 900px; margin: 3rem 0 0; }
.g-compare__scroll { overflow-x: auto; border: 1px solid var(--light-grey); border-radius: 4px; }
.g-compare table { width: 100%; border-collapse: collapse; min-width: 560px; background: #fff; }
.g-compare th,
body.p-it-support .g-compare td{
  padding: 0.9rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid var(--light-grey);
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--dark);
}
.g-compare thead th {
  background: var(--orange);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
  border-bottom: none;
}
.g-compare thead th:first-child { background: var(--dark); }
.g-compare tbody th { font-weight: 600; color: var(--dark); }
body.p-it-support .g-compare td{ text-align: center; font-weight: 500; }
.g-compare tbody tr:last-child th,
.g-compare tbody tr:last-child td { border-bottom: none; }
.g-compare tbody tr:nth-child(even) { background: var(--off-white); }
.g-compare .g-compare__guardian { background: rgba(254,106,0,0.05); }
body.p-it-support .g-compare__yes{ color: #16a34a; font-weight: 600; }
.g-compare__no { color: var(--mid-grey); }
body.p-it-support .g-compare__val{ font-size: 0.85rem; font-weight: 500; }
.g-compare__best-for td { text-align: left; font-weight: 400; color: var(--mid-grey); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.plan-card .brand-list { margin-bottom: 1.75rem; }
.plan-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: normal;
  color: var(--dark);
}
.plan-card__cta { font-size: 1.05rem; }
.plan-card__cta svg { width: 22px; height: 22px; transition: transform .25s ease; }
.plan-card:hover .plan-card__cta { color: var(--orange); }
.plan-card:hover .plan-card__cta svg { transform: translateX(4px); }
 @media (max-width: 992px) {
  .plans { grid-template-columns: 1fr; gap: 1.5rem; }
}
@media (max-width: 768px) {
  .plan-card { padding: 2rem; }
}
/* Three-up variant for service/product listing pages with many cards */
.plans--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 992px) {
  .plans--three { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
@media (max-width: 640px) {
  .plans--three { grid-template-columns: 1fr; }
}
/* Full-width variant: sits below a .plans grid, laid out horizontally */
.plan-card--wide {
  flex-direction: row;
  align-items: center;
  gap: 2rem;
  margin-top: 2rem;
}
.plan-card--wide .plan-card__icon { margin-bottom: 0; }
.plan-card--wide .plan-card__wide-body { flex: 1; }
.plan-card--wide .plan-card__title { margin-bottom: 0.4rem; }
.plan-card--wide .plan-card__body { margin-bottom: 0; }
.plan-card--wide .plan-card__cta { margin-top: 0; white-space: nowrap; }
@media (max-width: 640px) {
  .plan-card--wide { flex-direction: column; align-items: flex-start; gap: 1.25rem; margin-top: 1.5rem; }
  .plan-card--wide .plan-card__cta { white-space: normal; }
}


/* --------------------------------------------------------------------------
   /it-support/managed-it-support/
   -------------------------------------------------------------------------- */
 /* ================= GUARDIAN PAGE - bespoke shield/tier design ================= */
 .g-hero {
  background: var(--dark);
  position: relative;
  overflow: hidden;
  padding: calc(8.5rem + var(--header-extra)) 0 8rem;
  clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
}
.g-hero__shield {
  position: absolute;
  top: 50%;
  right: -60px;
  transform: translateY(-50%);
  width: 480px;
  height: 480px;
  opacity: 0.07;
  color: var(--orange);
  pointer-events: none;
}
.g-hero .breadcrumb a, .g-hero .breadcrumb span { color: var(--light-grey); }
.g-hero .breadcrumb .current { color: var(--orange); }
.g-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(254,106,0,0.12);
  border: 1px solid rgba(254,106,0,0.4);
  color: var(--orange);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}
.g-hero h1 {
  color: var(--white);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  max-width: 680px;
  margin-bottom: 1.25rem;
}
.g-hero h1 span { color: var(--orange); }
.g-hero p {
  color: var(--light-grey);
  max-width: 620px;
  font-size: 1.2rem;
  line-height: 1.8;
  margin-bottom: 2rem;
}
.g-hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; position: relative; z-index: 1; }
 .g-facts {
  max-width: 1200px;
  margin: -3.5rem auto 0;
  padding: 0 1.5rem;
  position: relative;
  z-index: 2;
}
.g-facts__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--light-grey);
  box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}
.g-facts__item {
  background: var(--white);
  padding: 1.5rem 1.25rem;
  text-align: center;
}
.g-facts__item svg { color: var(--orange); width: 26px; height: 26px; margin-bottom: 0.6rem; }
.g-facts__item .g-facts__currency { display: block; color: var(--orange); font-family: var(--font-display); font-weight: 900; font-size: 1.7rem; line-height: 26px; height: 26px; margin-bottom: 0.6rem; }
.g-facts__item span {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dark);
  line-height: 1.4;
}
 .g-angel {
  padding: 7rem 0 5rem;
}
.g-angel__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3.5rem;
  align-items: center;
}
.g-angel__card {
  background: var(--dark);
  border-radius: 16px;
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
}
.g-angel__card::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -30%;
  width: 260px;
  height: 260px;
  background: var(--orange);
  opacity: 0.15;
  border-radius: 50%;
}
.g-angel__card-label {
  color: var(--orange);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 1rem;
  position: relative;
}
.g-angel__checklist { position: relative; }
.g-angel__checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--light-grey);
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}
.g-angel__checklist li:last-child { margin-bottom: 0; }
.g-angel__checklist svg { color: var(--orange); width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
 .g-tiers { background: var(--off-white); padding: 5rem 0; }
.g-tier { margin-bottom: 4rem; }
.g-tier:last-child { margin-bottom: 0; }
.g-tier__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 2rem;
}
.g-tier__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.5rem;
  color: var(--orange);
  opacity: 0.35;
  line-height: 1;
}
.g-tier__title {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1.6rem;
  color: var(--dark);
}
.g-tier__intro {
  color: var(--mid-grey);
  max-width: 640px;
  margin: -1rem 0 2rem;
  line-height: 1.7;
}
.g-tier__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.g-tier__item {
  background: var(--white);
  border-left: 3px solid var(--orange);
  padding: 1.75rem;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.g-tier__item h3 {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.1rem;
  color: var(--dark);
  margin-bottom: 0.6rem;
}
.g-tier__item p {
  color: var(--mid-grey);
  font-size: 1rem;
  line-height: 1.7;
}
 .g-cta {
  background: var(--orange);
  padding: 5rem 0;
  text-align: center;
}
.g-cta h2 {
  color: var(--white);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 0.75rem;
}
.g-cta p {
  color: rgba(255,255,255,0.85);
  max-width: 520px;
  margin: 0 auto 2rem;
  line-height: 1.7;
}
.g-cta .btn--outline { color: var(--white); border-color: rgba(255,255,255,0.6); }
.g-cta .btn--outline:hover { border-color: var(--dark); color: var(--dark); }
.g-cta__note { margin-top: 1.5rem; }
.g-cta__note a { color: var(--white); text-decoration: underline; font-size: 1rem; }
 /* ---- Price justification + social proof (inside pricing card header) ---- */
.g-price-perday {
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  margin-top: 0.9rem;
}
.g-social-proof {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.1rem;
  padding: 0.4rem 0.9rem;
  background: rgba(255,255,255,0.15);
  border-radius: 999px;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.g-social-proof svg { width: 15px; height: 15px; flex-shrink: 0; }
 /* ---- Compare toggle (sits under Get a Quote) ---- */
.pricing-card__footer { display: flex; flex-direction: column; align-items: center; }
.pricing-card__footer .g-compare-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
.g-compare-toggle svg { width: 18px; height: 18px; transition: transform 0.25s ease; }
.g-compare-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
 /* ---- Comparison table ---- */
.g-compare { max-width: 900px; margin: 1.5rem 0 0; }
.g-compare[hidden] { display: none; }
.g-compare__scroll { overflow-x: auto; border: 1px solid var(--light-grey); border-radius: 4px; }
.g-compare table { width: 100%; border-collapse: collapse; min-width: 560px; background: #fff; }
.g-compare th, .g-compare td {
  padding: 0.9rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid var(--light-grey);
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--dark);
}
.g-compare thead th {
  background: var(--orange);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
  border-bottom: none;
}
.g-compare thead th:first-child { background: var(--dark); }
.g-compare tbody th {
  font-weight: 600;
  color: var(--dark);
}
.g-compare td { text-align: center; font-weight: 600; }
.g-compare tbody tr:last-child th,
.g-compare tbody tr:last-child td { border-bottom: none; }
.g-compare tbody tr:nth-child(even) { background: var(--off-white); }
.g-compare col.g-compare__guardian { }
.g-compare .g-compare__guardian { background: rgba(254,106,0,0.05); }
.g-compare__yes { color: #16a34a; font-weight: 700; }
.g-compare__no { color: var(--mid-grey); }
.g-compare__val { font-size: 0.85rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
 @media (max-width: 900px) {
  .g-angel__grid { grid-template-columns: 1fr; }
  .g-facts__grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-card__body.g-included { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 560px) {
  .g-facts__grid { grid-template-columns: 1fr; }
  .g-facts { margin-top: -2.5rem; }
  .g-hero { padding: calc(8rem + var(--header-extra)) 0 6rem; }
}
 /* ---- Guardian FAQ (page-scoped, mirrors frequently-asked-questions) ---- */
.g-faq { padding: 5rem 0; }
.g-faq__list { max-width: 800px; margin-top: 2rem; }
.g-faq__item {
  border: 1px solid var(--light-grey);
  border-radius: 6px;
  margin-bottom: 1rem;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.g-faq__item[open] { border-color: var(--orange); box-shadow: 0 6px 20px rgba(0,0,0,0.06); }
.g-faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.35rem;
}
.g-faq__q::-webkit-details-marker { display: none; }
.g-faq__q-text { margin: 0; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.15; font-size: 1.4rem; color: var(--dark); }
.g-faq__q:hover .g-faq__q-text { color: var(--orange); }
.g-faq__icon { flex: 0 0 auto; width: 22px; height: 22px; position: relative; }
.g-faq__icon::before, .g-faq__icon::after {
  content: ''; position: absolute; background: var(--orange); transition: transform 0.25s ease, opacity 0.25s ease;
}
.g-faq__icon::before { top: 50%; left: 2px; right: 2px; height: 3px; transform: translateY(-50%); }
.g-faq__icon::after { left: 50%; top: 2px; bottom: 2px; width: 3px; transform: translateX(-50%); }
.g-faq__item[open] .g-faq__icon::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.g-faq__a { padding: 0 1.35rem 1.3rem; color: var(--mid-grey); line-height: 1.8; }
.g-faq__a a { color: var(--orange); font-weight: 600; }


/* --------------------------------------------------------------------------
   /it-support/pay-as-you-go/
   -------------------------------------------------------------------------- */
 /* ================= PAY AS YOU GO PAGE - matches Guardian's bespoke design ================= */
 .p-hero {
  background: var(--dark);
  position: relative;
  overflow: hidden;
  padding: calc(8.5rem + var(--header-extra)) 0 8rem;
  clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
}
.p-hero__watermark {
  position: absolute;
  top: 50%;
  right: -60px;
  transform: translateY(-50%);
  width: 480px;
  height: 480px;
  opacity: 0.07;
  color: var(--orange);
  pointer-events: none;
}
.p-hero .breadcrumb a, .p-hero .breadcrumb span { color: var(--light-grey); }
.p-hero .breadcrumb .current { color: var(--orange); }
.p-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(254,106,0,0.12);
  border: 1px solid rgba(254,106,0,0.4);
  color: var(--orange);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}
.p-hero h1 {
  color: var(--white);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  max-width: 680px;
  margin-bottom: 1.25rem;
}
.p-hero h1 span { color: var(--orange); }
.p-hero p {
  color: var(--light-grey);
  max-width: 620px;
  font-size: 1.2rem;
  line-height: 1.8;
  margin-bottom: 2rem;
}
.p-hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; position: relative; z-index: 1; }
 .p-facts {
  max-width: 1200px;
  margin: -3.5rem auto 0;
  padding: 0 1.5rem;
  position: relative;
  z-index: 2;
}
.p-facts__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--light-grey);
  box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}
.p-facts__item {
  background: var(--white);
  padding: 1.5rem 1.25rem;
  text-align: center;
}
.p-facts__item svg { color: var(--orange); width: 26px; height: 26px; margin-bottom: 0.6rem; }
.p-facts__item span {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dark);
  line-height: 1.4;
}
 .p-tiers { background: var(--off-white); padding: 5rem 0; }
.p-tier { margin-bottom: 4rem; }
.p-tier:last-child { margin-bottom: 0; }
.p-tier__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 2rem;
}
.p-tier__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.5rem;
  color: var(--orange);
  opacity: 0.35;
  line-height: 1;
}
.p-tier__title {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1.6rem;
  color: var(--dark);
}
.p-tier__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.p-tier__item {
  background: var(--white);
  border-left: 3px solid var(--orange);
  padding: 1.75rem;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.p-tier__item h3 {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.1rem;
  color: var(--dark);
  margin-bottom: 0.6rem;
}
.p-tier__item p {
  color: var(--mid-grey);
  font-size: 1rem;
  line-height: 1.7;
}
 .p-cta {
  background: var(--orange);
  padding: 5rem 0;
  text-align: center;
}
.p-cta h2 {
  color: var(--white);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 0.75rem;
}
.p-cta p {
  color: rgba(255,255,255,0.85);
  max-width: 520px;
  margin: 0 auto 2rem;
  line-height: 1.7;
}
.p-cta .btn--outline { color: var(--white); border-color: rgba(255,255,255,0.6); }
.p-cta .btn--outline:hover { border-color: var(--dark); color: var(--dark); }
.p-cta__note { margin-top: 1.5rem; }
.p-cta__note a { color: var(--white); text-decoration: underline; font-size: 1rem; }
 /* ---- Price justification + social proof (inside pricing card header) ---- */
.g-price-perday {
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  margin-top: 0.9rem;
}
.g-social-proof {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.1rem;
  padding: 0.4rem 0.9rem;
  background: rgba(255,255,255,0.15);
  border-radius: 999px;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.g-social-proof svg { width: 15px; height: 15px; flex-shrink: 0; }
 /* ---- Compare toggle (sits under Get a Rate Card) ---- */
.pricing-card__footer { display: flex; flex-direction: column; align-items: center; }
.pricing-card__footer .g-compare-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
.g-compare-toggle svg { width: 18px; height: 18px; transition: transform 0.25s ease; }
.g-compare-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
 /* ---- Comparison table ---- */
.g-compare { max-width: 900px; margin: 1.5rem 0 0; }
.g-compare[hidden] { display: none; }
.g-compare__scroll { overflow-x: auto; border: 1px solid var(--light-grey); border-radius: 4px; }
.g-compare table { width: 100%; border-collapse: collapse; min-width: 560px; background: #fff; }
.g-compare th, .g-compare td {
  padding: 0.9rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid var(--light-grey);
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--dark);
}
.g-compare thead th {
  background: var(--orange);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
  border-bottom: none;
}
.g-compare thead th:first-child { background: var(--dark); }
.g-compare tbody th { font-weight: 600; color: var(--dark); }
.g-compare td { text-align: center; font-weight: 600; }
.g-compare tbody tr:last-child th,
.g-compare tbody tr:last-child td { border-bottom: none; }
.g-compare tbody tr:nth-child(even) { background: var(--off-white); }
.g-compare .g-compare__current { background: rgba(254,106,0,0.05); }
.g-compare__yes { color: #16a34a; font-weight: 700; }
.g-compare__no { color: var(--mid-grey); }
.g-compare__val { font-size: 0.85rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
 @media (max-width: 900px) {
  .p-facts__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .p-facts__grid { grid-template-columns: 1fr; }
  .p-facts { margin-top: -2.5rem; }
  .p-hero { padding: calc(8rem + var(--header-extra)) 0 6rem; }
}


/* --------------------------------------------------------------------------
   /legal/
   -------------------------------------------------------------------------- */
 .legal-pages { list-style: none; padding: 0; margin: 1.5rem 0 0; max-width: 640px; }
.legal-pages li { border-bottom: 1px solid var(--light-grey); }
.legal-pages li:first-child { border-top: 1px solid var(--light-grey); }
.legal-pages a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0.25rem;
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.legal-pages a:hover,
.legal-pages a:focus-visible {
  color: var(--dark);
  padding-left: 0.75rem;
}
.legal-pages a svg { flex-shrink: 0; }


/* --------------------------------------------------------------------------
   /legal/privacy-policy/
   -------------------------------------------------------------------------- */
 .legal-content p,
.legal-content li { color: var(--mid-grey); line-height: 1.8; }
.legal-content h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  margin-top: 2.75rem;
}
.legal-content h4 {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--dark);
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}
.legal-content ul,
.legal-content ol { margin: 0.75rem 0 1.25rem; padding-left: 1.5rem; }
.legal-content li { margin-bottom: 0.5rem; padding-left: 0.25rem; }
.legal-content ul li::marker { color: var(--orange); }
.legal-content ol li::marker { color: var(--orange); font-weight: 700; }
.legal-content a { color: var(--orange); font-weight: 600; }
.legal-content p + p { margin-top: 1rem; }


/* --------------------------------------------------------------------------
   /legal/terms-and-conditions-of-work/
   -------------------------------------------------------------------------- */
 .legal-content p,
.legal-content li { color: var(--mid-grey); line-height: 1.8; }
.legal-content h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  margin-top: 2.75rem;
}
.legal-content ul,
.legal-content ol { margin: 0.75rem 0 1.25rem; padding-left: 1.5rem; }
.legal-content li { margin-bottom: 0.5rem; padding-left: 0.25rem; }
.legal-content ul li::marker { color: var(--orange); }
.legal-content ol li::marker { color: var(--orange); font-weight: 700; }
.legal-content a { color: var(--orange); font-weight: 600; }
.legal-content p + p { margin-top: 1rem; }
.legal-content .legal-tagline {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  color: var(--orange);
  letter-spacing: 0.05em;
  margin: 0.25rem 0 1.5rem;
}
.legal-content .rate-table {
  list-style: none;
  padding-left: 0;
  margin: 1rem 0 1.25rem;
  border: 1px solid var(--light-grey);
  border-radius: 6px;
  overflow: hidden;
}
.legal-content .rate-table li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--light-grey);
}
.legal-content .rate-table li:last-child { border-bottom: 0; }
.legal-content .rate-table .rate-name { font-weight: 600; color: var(--dark); }
.legal-content .rate-table .rate-price { font-weight: 700; color: var(--orange); white-space: nowrap; }


/* --------------------------------------------------------------------------
   /legal/terms-of-use/
   -------------------------------------------------------------------------- */
 .legal-content p,
.legal-content li { color: var(--mid-grey); line-height: 1.8; }
.legal-content h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  margin-top: 2.75rem;
}
.legal-content ul,
.legal-content ol { margin: 0.75rem 0 1.25rem; padding-left: 1.5rem; }
.legal-content li { margin-bottom: 0.5rem; padding-left: 0.25rem; }
.legal-content ul li::marker { color: var(--orange); }
.legal-content ol li::marker { color: var(--orange); font-weight: 700; }
.legal-content a { color: var(--orange); font-weight: 600; }
.legal-content p + p { margin-top: 1rem; }


/* --------------------------------------------------------------------------
   /locations/
   -------------------------------------------------------------------------- */
 .loc-trust { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1.25rem; margin:2.25rem 0 0; }
.loc-trust__item { display:flex; align-items:center; gap:0.85rem; background:#fff; border:1px solid var(--light-grey); border-radius:8px; padding:1.1rem 1.25rem; }
.loc-trust__item svg { color:var(--orange); width:26px; height:26px; flex-shrink:0; }
.loc-trust__item span { font-family:var(--font-body); font-weight:700; font-size:0.95rem; color:var(--dark); line-height:1.35; }
 .loc-map { margin-top:2.75rem; }
.loc-map__caption { color:var(--mid-grey); font-size:0.92rem; margin-top:1rem; line-height:1.6; max-width:640px; }
 /* Map key: explains what the pins mean */
.loc-legend { list-style:none; display:flex; flex-wrap:wrap; gap:0.9rem 1.75rem; margin:1.1rem 0 0; padding:0; }
.loc-legend li { display:flex; align-items:center; gap:0.6rem; font-family:var(--font-body); font-size:0.9rem; color:var(--mid-grey); }
.loc-legend__key { width:18px; height:18px; border-radius:50%; flex-shrink:0; box-sizing:border-box; }
.loc-legend__key--hq { background:var(--dark); border:3px solid var(--orange); }
 .loc-counties { margin-top:2.5rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.5rem; }
.loc-county { background:#fff; border:1px solid var(--light-grey); border-radius:10px; padding:1.5rem 1.5rem 1.25rem; }
.loc-county__name { font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:1.15rem; color:var(--dark); margin-bottom:1rem; padding-bottom:0.6rem; border-bottom:2px solid var(--orange); }
.loc-town-list { list-style:none; padding:0; margin:0; }
.loc-town-list li { margin-bottom:0.55rem; }
.loc-town-list li:last-child { margin-bottom:0; }
.loc-town-list a { color:var(--mid-grey); font-size:0.95rem; text-decoration:none; transition:color .15s ease; }
.loc-town-list a:hover, .loc-town-list a:focus { color:var(--orange); text-decoration:underline; }
.loc-more { color:var(--mid-grey); font-style:italic; margin-top:2rem; }
.loc-more a { color:var(--orange); font-weight:600; font-style:normal; text-decoration:none; }
.loc-more a:hover, .loc-more a:focus { text-decoration:underline; }
 .loc-services { display:grid; grid-template-columns:repeat(5,1fr); gap:1.25rem; margin-top:2.5rem; }
.loc-service { display:block; background:#fff; border:1px solid var(--light-grey); border-left:3px solid var(--orange); border-radius:4px; padding:1.5rem; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease; }
.loc-service:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,0.08); }
.loc-service svg { color:var(--orange); width:26px; height:26px; margin-bottom:0.75rem; }
.loc-service h3 { font-family:var(--font-display); font-weight:700; font-size:1.35rem; line-height:1.2; color:var(--dark); margin-bottom:0.5rem; }
.loc-service p { color:var(--mid-grey); font-size:0.9rem; line-height:1.6; margin:0; }
 .loc-leafmap { height:520px; width:100%; border:1px solid var(--light-grey); border-radius:12px; overflow:hidden; background:#dbe7ec; box-shadow:0 10px 30px rgba(0,0,0,0.06); }
.loc-map__fallback { display:flex; align-items:center; justify-content:center; height:100%; padding:2rem; margin:0; color:var(--mid-grey); text-align:center; }
.loc-map__fallback a { color:var(--orange); font-weight:600; }
.loc-map__hint { color:var(--mid-grey); font-size:0.82rem; margin-top:0.6rem; }
.loc-cluster { background:var(--orange); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:900; box-shadow:0 2px 8px rgba(0,0,0,0.35); border:2px solid #fff; }
.loc-pin { background:var(--orange); border:2px solid #fff; border-radius:50%; box-shadow:0 1px 4px rgba(0,0,0,0.4); }
.loc-hq { background:var(--dark); border:3px solid var(--orange); border-radius:50%; box-shadow:0 2px 8px rgba(0,0,0,0.45); }
.leaflet-popup-content { font-family:var(--font-body); font-size:0.9rem; }
.leaflet-popup-content strong { color:var(--dark); }
.leaflet-popup-content a { color:var(--orange); font-weight:600; }
.page-hero__lead { margin-top:1.25rem; max-width:680px; font-size:1.125rem; line-height:1.6; color:var(--mid-grey); }
.loc-pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.5rem; }
.loc-pillar { background:#fff; border:1px solid var(--light-grey); border-top:4px solid var(--orange); border-radius:10px; padding:1.75rem 1.5rem; }
.loc-pillar svg { color:var(--orange); width:30px; height:30px; margin-bottom:0.85rem; }
.loc-pillar h3 { font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:1.35rem; line-height:1.15; color:var(--dark); margin-bottom:0.6rem; }
.loc-pillar p { color:var(--mid-grey); font-size:0.95rem; line-height:1.65; margin:0; }
.loc-map__title { font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:1.35rem; color:var(--dark); margin:3rem 0 0.6rem; }
 @media (max-width:900px) { .loc-services { grid-template-columns:repeat(3,1fr); } .loc-pillars { grid-template-columns:1fr; } }
@media (max-width:768px) { .loc-trust { grid-template-columns:repeat(2,1fr); } .loc-leafmap { height:400px; } }
@media (max-width:560px) { .loc-services { grid-template-columns:repeat(2,1fr); } .loc-trust { grid-template-columns:1fr; } .loc-legend { gap:0.7rem 1.25rem; } }


/* --------------------------------------------------------------------------
   /it-products/accessories/
   -------------------------------------------------------------------------- */
 /* ---- Hero strapline on its own line (as computers.html) ---- */
.cp-hero h1 { margin-bottom: 0.25rem; }
.cp-hero h1 span { display: block; color: var(--orange); font-size: 0.42em; letter-spacing: 0.04em; }
.cp-hero p { margin-top: 1.5rem; }
 /* ---- Lead statement + call strip ---- */
.cp-lead { max-width: 780px; }
.cp-lead p {
  color: var(--mid-grey);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.cp-lead p:last-child { margin-bottom: 0; }
 .cp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}
.cp-actions .btn {
  white-space: normal;
  text-align: center;
  max-width: 100%;
}
 /* ---- Category split visual panel ---- */
.cp-split p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.cp-split p:last-child { margin-bottom: 0; }
.cp-panel {
  position: relative;
  z-index: 1;
  background:
    radial-gradient(120% 120% at 85% 8%, rgba(254,106,0,0.32) 0%, rgba(254,106,0,0) 55%),
    linear-gradient(155deg, #474746 0%, var(--dark) 55%, #2c2c2b 100%);
  aspect-ratio: 4/3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 2.5rem;
  overflow: hidden;
}
/* subtle diagonal sheen across the panel */
.cp-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 40%);
  pointer-events: none;
}
.cp-panel svg {
  position: absolute;
  right: -1.5rem;
  top: -1rem;
  width: 74%;
  color: var(--orange);
  opacity: 0.9;
  stroke-width: 1.1;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,0.35));
  transition: transform 0.4s ease;
}
.cp-panel:hover svg {
  transform: translateY(-4px) scale(1.03);
}
.cp-panel__bar {
  position: relative;
  width: 4px;
  height: 46px;
  background: var(--orange);
  margin-bottom: 1rem;
}
.cp-panel__kicker {
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--light-grey);
  margin-bottom: 0.4rem;
}
.cp-panel__title {
  position: relative;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 0.95;
  color: var(--white);
}
.cat-quote-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  color: var(--orange);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
}
.cat-quote-link svg { width: 16px; height: 16px; }
.cat-quote-link:hover { text-decoration: underline; }
 /* ---- FAQs ---- */
.cp-faqs { max-width: 860px; margin-top: 2.5rem; }
.cp-faq { border-bottom: 1px solid var(--light-grey); }
.cp-faq:first-child { border-top: 1px solid var(--light-grey); }
.cp-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 3rem 1.4rem 0;
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
  transition: color 0.2s ease;
}
.cp-faq summary::-webkit-details-marker { display: none; }
.cp-faq summary:hover { color: var(--orange); }
.cp-faq summary::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.cp-faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.cp-faq__body {
  padding: 0 3rem 1.6rem 0;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.98rem;
}
 /* ---- Quote form ---- */
.cp-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}
.cp-form-aside p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.cp-form-aside .contact-detail { margin-bottom: 1.5rem; }
 /* ---- Radio option grid (what are you looking for?) ---- */
.ac-radios {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
  margin-top: 0.25rem;
}
.ac-radio {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  background: var(--white);
  border: 1px solid var(--light-grey);
  cursor: pointer;
  transition: border-color 0.2s ease;
  color: var(--dark);
  font-size: 0.95rem;
}
.ac-radio:hover { border-color: var(--orange); }
.ac-radio input { flex: none; width: 18px; height: 18px; accent-color: var(--orange); }
 /* ---- Hints & tips opt-in ---- */
.pr-optin {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.1rem 1.25rem;
  background: var(--off-white);
  border: 1px solid var(--light-grey);
}
.pr-optin input { margin-top: 0.2rem; flex: none; width: 18px; height: 18px; accent-color: var(--orange); }
.pr-optin__text { color: var(--mid-grey); line-height: 1.6; font-size: 0.92rem; }
.pr-optin__text strong { color: var(--dark); font-weight: 600; }
.pr-optin__note { display: block; font-size: 0.82rem; margin-top: 0.25rem; color: var(--mid-grey); }
 @media (max-width: 900px) {
  .cp-form-grid { grid-template-columns: 1fr; gap: 2rem; }
  .cp-panel { padding: 1.75rem; }
}


/* --------------------------------------------------------------------------
   /it-products/advanced-network-protection/
   -------------------------------------------------------------------------- */
 /* ---- Hero strapline on its own line (as antivirus.html) ---- */
.anp-hero h1 { margin-bottom: 0.25rem; }
.anp-hero h1 span { display: block; color: var(--orange); font-size: 0.42em; letter-spacing: 0.04em; }
.anp-hero p { margin-top: 1.5rem; }
 /* ---- Lead statement + actions ---- */
.anp-lead { max-width: 780px; }
.anp-lead p {
  color: var(--mid-grey);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.anp-lead p:last-child { margin-bottom: 0; }
 .anp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}
/* Long CTA label needs to wrap on narrow screens - .btn is nowrap by default */
.anp-actions .btn {
  white-space: normal;
  text-align: center;
  max-width: 100%;
}
.anp-callout {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--off-white);
  border-left: 4px solid var(--orange);
  max-width: 780px;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.95rem;
}
.anp-callout strong { color: var(--dark); }
.anp-callout a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
}
.anp-callout a:hover { text-decoration: underline; }
 /* ---- Threats ANP reduces ---- */
.anp-threats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
}
.anp-threat {
  flex: 1 1 200px;
  max-width: 280px;
  background: var(--white);
  border: 1px solid var(--light-grey);
  padding: 2.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
  transition: background 0.25s ease;
}
.anp-threat:hover { background: var(--off-white); }
.anp-threat__icon {
  width: 64px;
  height: 64px;
  color: var(--orange);
}
.anp-threat__icon svg { width: 100%; height: 100%; }
.anp-threat__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  color: var(--dark);
  line-height: 1.1;
}
.anp-threat__body {
  color: var(--mid-grey);
  font-size: 0.9rem;
  line-height: 1.7;
}
 /* ---- "Remember" warning band ---- */
.anp-warning {
  margin-top: 2rem;
  background: var(--off-white);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  border-left: 4px solid var(--orange);
  max-width: 780px;
}
.anp-warning__icon {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--orange);
  margin-top: 0.15rem;
}
.anp-warning__icon svg { width: 100%; height: 100%; }
.anp-warning__label {
  font-family: var(--font-body);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--dark);
  line-height: 1;
  margin-bottom: 0.4rem;
}
.anp-warning p {
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.95rem;
  margin: 0;
}
 /* ---- Scenario ---- */
.anp-scenario {
  max-width: 820px;
  margin-top: 2.5rem;
  background: var(--white);
  border: 1px solid var(--light-grey);
  padding: 2.25rem 2.5rem;
}
.anp-scenario__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--orange);
  margin-bottom: 0.9rem;
}
.anp-scenario p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1rem;
}
.anp-scenario p:last-child { margin-bottom: 0; }
 /* ---- Without / With comparison ---- */
.anp-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2.5rem;
}
.anp-outcome {
  border: 1px solid var(--light-grey);
  background: var(--white);
  display: flex;
  flex-direction: column;
}
.anp-outcome__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 2rem;
  background: var(--off-white);
  border-bottom: 1px solid var(--light-grey);
}
.anp-outcome__head svg { width: 30px; height: 30px; flex: none; }
.anp-outcome__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--dark);
}
.anp-outcome__body { padding: 2rem; }
.anp-outcome__body p {
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.98rem;
  margin: 0;
}
.anp-outcome__result {
  margin-top: auto;
  padding: 1.25rem 2rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
/* Without ANP - dark, the bad outcome */
.anp-outcome--without { border-top: 4px solid var(--dark); }
.anp-outcome--without .anp-outcome__head svg { color: var(--dark); }
.anp-outcome--without .anp-outcome__result {
  background: var(--dark);
  color: var(--light-grey);
}
/* With ANP - orange, the good outcome */
.anp-outcome--with { border-top: 4px solid var(--orange); }
.anp-outcome--with .anp-outcome__head svg { color: var(--orange); }
.anp-outcome--with .anp-outcome__result {
  background: var(--orange);
  color: var(--white);
}
 /* ---- Two-column copy block ---- */
.anp-split p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.anp-split p:last-child { margin-bottom: 0; }
 .anp-panel {
  position: relative;
  /* sits above .split__img-accent so only the offset corner shows behind it */
  z-index: 1;
  background:
    radial-gradient(120% 120% at 85% 8%, rgba(254,106,0,0.32) 0%, rgba(254,106,0,0) 55%),
    linear-gradient(155deg, #474746 0%, var(--dark) 55%, #2c2c2b 100%);
  aspect-ratio: 4/3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 2.5rem;
  overflow: hidden;
}
/* subtle diagonal sheen across the panel */
.anp-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 40%);
  pointer-events: none;
}
.anp-panel svg {
  position: absolute;
  right: -1.5rem;
  top: -1rem;
  width: 74%;
  color: var(--orange);
  opacity: 0.9;
  stroke-width: 1.1;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,0.35));
  transition: transform 0.4s ease;
}
.anp-panel:hover svg {
  transform: translateY(-4px) scale(1.03);
}
.anp-panel__bar {
  position: relative;
  width: 4px;
  height: 46px;
  background: var(--orange);
  margin-bottom: 1rem;
}
.anp-panel__kicker {
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--light-grey);
  margin-bottom: 0.4rem;
}
.anp-panel__title {
  position: relative;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  line-height: 0.95;
  color: var(--white);
}
 /* ---- Layers of defence ---- */
.anp-layers { max-width: 900px; margin-top: 2.5rem; }
.anp-layer {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--light-grey);
}
.anp-layer:first-child { border-top: 1px solid var(--light-grey); }
.anp-layer__num {
  flex: none;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2rem;
  line-height: 1;
  color: var(--orange);
  min-width: 3rem;
}
.anp-layer__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  color: var(--dark);
  line-height: 1.1;
  margin-bottom: 0.5rem;
}
.anp-layer__body {
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.95rem;
  margin: 0;
}
 /* ---- FAQs ---- */
.anp-faqs { max-width: 860px; margin-top: 2.5rem; }
.anp-faq { border-bottom: 1px solid var(--light-grey); }
.anp-faq:first-child { border-top: 1px solid var(--light-grey); }
.anp-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 3rem 1.4rem 0;
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
  transition: color 0.2s ease;
}
.anp-faq summary::-webkit-details-marker { display: none; }
.anp-faq summary:hover { color: var(--orange); }
.anp-faq summary::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.anp-faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.anp-faq__body {
  padding: 0 3rem 1.6rem 0;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.98rem;
}
.anp-faq__body a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
}
.anp-faq__body a:hover { text-decoration: underline; }
 /* ---- Quote form ---- */
.anp-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}
.anp-form-aside p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.anp-form-aside .contact-detail { margin-bottom: 1.5rem; }
 @media (max-width: 900px) {
  .anp-form-grid { grid-template-columns: 1fr; gap: 2rem; }
  .anp-panel { padding: 1.75rem; }
  .anp-scenario { padding: 1.75rem; }
  .anp-warning { padding: 1.25rem 1.5rem; gap: 0.85rem; }
  .anp-outcome__head { padding: 1.25rem 1.5rem; }
  .anp-outcome__body { padding: 1.5rem; }
  .anp-outcome__result { padding: 1.1rem 1.5rem; }
}


/* --------------------------------------------------------------------------
   /it-products/antivirus/
   -------------------------------------------------------------------------- */
 /* ---- Hero strapline on its own line (as office-365.html) ---- */
.av-hero h1 { margin-bottom: 0.25rem; }
.av-hero h1 span { display: block; color: var(--orange); font-size: 0.42em; letter-spacing: 0.04em; }
.av-hero p { margin-top: 1.5rem; }
 /* ---- Lead statement + actions ---- */
.av-lead { max-width: 780px; }
.av-lead p {
  color: var(--mid-grey);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.av-lead p:last-child { margin-bottom: 0; }
 .av-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}
/* Long CTA label needs to wrap on narrow screens - .btn is nowrap by default */
.av-actions .btn {
  white-space: normal;
  text-align: center;
  max-width: 100%;
}
.av-callout {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--off-white);
  border-left: 4px solid var(--orange);
  max-width: 780px;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.95rem;
}
.av-callout strong { color: var(--dark); }
.av-callout a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
}
.av-callout a:hover { text-decoration: underline; }
 /* ---- What harm can a virus do ---- */
.av-harm {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
}
.av-harm__item {
  flex: 1 1 200px;
  max-width: 280px;
  background: var(--white);
  border: 1px solid var(--light-grey);
  padding: 2.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
  transition: background 0.25s ease;
}
.av-harm__item:hover { background: var(--off-white); }
.av-harm__icon {
  width: 64px;
  height: 64px;
  color: var(--orange);
}
.av-harm__icon svg { width: 100%; height: 100%; }
.av-harm__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  color: var(--dark);
  line-height: 1.1;
}
.av-harm__body {
  color: var(--mid-grey);
  font-size: 0.9rem;
  line-height: 1.7;
}
.av-harm-note {
  margin-top: 2rem;
  max-width: 780px;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.98rem;
}
.av-harm-note a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
}
.av-harm-note a:hover { text-decoration: underline; }
 /* ---- Two-column copy block ---- */
.av-split p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.av-split p:last-child { margin-bottom: 0; }
 .av-panel {
  position: relative;
  /* sits above .split__img-accent so only the offset corner shows behind it */
  z-index: 1;
  background:
    radial-gradient(120% 120% at 85% 8%, rgba(254,106,0,0.32) 0%, rgba(254,106,0,0) 55%),
    linear-gradient(155deg, #474746 0%, var(--dark) 55%, #2c2c2b 100%);
  aspect-ratio: 4/3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 2.5rem;
  overflow: hidden;
}
/* subtle diagonal sheen across the panel */
.av-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 40%);
  pointer-events: none;
}
.av-panel svg {
  position: absolute;
  right: -1.5rem;
  top: -1rem;
  width: 74%;
  color: var(--orange);
  opacity: 0.9;
  stroke-width: 1.1;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,0.35));
  transition: transform 0.4s ease;
}
.av-panel:hover svg {
  transform: translateY(-4px) scale(1.03);
}
.av-panel__bar {
  position: relative;
  width: 4px;
  height: 46px;
  background: var(--orange);
  margin-bottom: 1rem;
}
.av-panel__kicker {
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--light-grey);
  margin-bottom: 0.4rem;
}
.av-panel__title {
  position: relative;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 0.95;
  color: var(--white);
}
 /* ---- FAQs ---- */
.av-faqs { max-width: 860px; margin-top: 2.5rem; }
.av-faq { border-bottom: 1px solid var(--light-grey); }
.av-faq:first-child { border-top: 1px solid var(--light-grey); }
.av-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 3rem 1.4rem 0;
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
  transition: color 0.2s ease;
}
.av-faq summary::-webkit-details-marker { display: none; }
.av-faq summary:hover { color: var(--orange); }
.av-faq summary::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.av-faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.av-faq__body {
  padding: 0 3rem 1.6rem 0;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.98rem;
}
 /* ---- Quote form ---- */
.av-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}
.av-form-aside p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.av-form-aside .contact-detail { margin-bottom: 1.5rem; }
 @media (max-width: 900px) {
  .av-form-grid { grid-template-columns: 1fr; gap: 2rem; }
  .av-panel { padding: 1.75rem; }
}


/* --------------------------------------------------------------------------
   /it-products/centralised-email-signatures/
   -------------------------------------------------------------------------- */
 /* ---- Lead statement ---- */
.es-lead { max-width: 780px; }
.es-lead p {
  color: var(--mid-grey);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.es-lead p:last-child { margin-bottom: 0; }
 .es-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}
.es-actions .btn {
  white-space: normal;
  text-align: center;
  max-width: 100%;
}
.es-note {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--off-white);
  border-left: 4px solid var(--orange);
  max-width: 780px;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.95rem;
}
.es-note strong { color: var(--dark); }
.es-note a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
}
.es-note a:hover { text-decoration: underline; }
 /* ---- Two-column explainer ---- */
.es-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.es-split p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.es-split p:last-child { margin-bottom: 0; }
 /* ---- Email signature mockup ---- */
.es-mail {
  background: var(--white);
  border: 1px solid var(--light-grey);
  box-shadow: 0 10px 30px rgba(0,0,0,0.07);
}
.es-mail__chrome {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--light-grey);
}
.es-mail__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--light-grey);
}
.es-mail__body { padding: 1.75rem 1.75rem 2rem; }
.es-mail__text {
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.95rem;
  margin: 0 0 1.5rem;
}
.es-sig {
  border-top: 3px solid var(--orange);
  padding-top: 1.25rem;
  display: flex;
  gap: 1.1rem;
  align-items: center;
}
.es-sig__logo {
  width: 58px;
  height: 58px;
  border-radius: 8px;
  background: var(--orange);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}
.es-sig__name {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1.15rem;
  color: var(--dark);
  line-height: 1.1;
}
.es-sig__role {
  color: var(--orange);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0.2rem 0 0.5rem;
}
.es-sig__meta {
  color: var(--mid-grey);
  font-size: 0.82rem;
  line-height: 1.6;
}
 /* ---- Benefits grid ---- */
.es-benefits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.es-benefit {
  flex: 1 1 280px;
  max-width: 380px;
  background: var(--orange);
  color: var(--white);
  padding: 2rem 2rem;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.es-benefit__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
}
.es-benefit__icon svg {
  width: 44px;
  height: 44px;
  stroke: var(--white);
}
.es-benefit h3 {
  color: var(--white);
  font-size: 1.15rem;
  margin-bottom: 0.6rem;
}
.es-benefit p {
  color: rgba(255,255,255,0.9);
  line-height: 1.7;
  font-size: 0.95rem;
  margin: 0;
}
 /* ---- FAQs ---- */
.es-faqs { max-width: 860px; margin-top: 2.5rem; }
.es-faq { border-bottom: 1px solid var(--light-grey); }
.es-faq:first-child { border-top: 1px solid var(--light-grey); }
.es-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 3rem 1.4rem 0;
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
  transition: color 0.2s ease;
}
.es-faq summary::-webkit-details-marker { display: none; }
.es-faq summary:hover { color: var(--orange); }
.es-faq summary::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.es-faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.es-faq__body {
  padding: 0 3rem 1.6rem 0;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.98rem;
}
 /* ---- Quote form ---- */
.es-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}
.es-form-aside p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.es-form-aside .contact-detail { margin-bottom: 1.5rem; }
 @media (max-width: 900px) {
  .es-split,
  .es-form-grid { grid-template-columns: 1fr; gap: 2rem; }
}


/* --------------------------------------------------------------------------
   /it-products/computers/
   -------------------------------------------------------------------------- */
 /* ---- Hero strapline on its own line (as computer-service.html) ---- */
.cp-hero h1 { margin-bottom: 0.25rem; }
.cp-hero h1 span { display: block; color: var(--orange); font-size: 0.42em; letter-spacing: 0.04em; }
.cp-hero p { margin-top: 1.5rem; }
 /* ---- Lead statement + call strip ---- */
.cp-lead { max-width: 780px; }
.cp-lead p {
  color: var(--mid-grey);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.cp-lead p:last-child { margin-bottom: 0; }
 .cp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}
/* Long CTA label needs to wrap on narrow screens - .btn is nowrap by default */
.cp-actions .btn {
  white-space: normal;
  text-align: center;
  max-width: 100%;
}
.cp-callout {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--off-white);
  border-left: 4px solid var(--orange);
  max-width: 780px;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.95rem;
}
.cp-callout strong { color: var(--dark); }
.cp-callout a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
}
.cp-callout a:hover { text-decoration: underline; }
 /* ---- Brands ---- */
.cp-brands {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--light-grey);
  border: 1px solid var(--light-grey);
  margin-top: 2.5rem;
}
.cp-brand {
  background: var(--white);
  padding: 2.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  transition: background 0.25s ease;
}
.cp-brand:hover { background: var(--off-white); }
.cp-brand__name {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.75rem;
  letter-spacing: 0.03em;
  color: var(--dark);
  line-height: 1;
}
.cp-brand__note {
  color: var(--mid-grey);
  font-size: 0.9rem;
  line-height: 1.7;
}
.cp-brands-note {
  margin-top: 2rem;
  max-width: 780px;
  color: var(--mid-grey);
  line-height: 1.8;
}
 /* ---- Big visual panels for computer / laptop ---- */
body.p-products-computers .cp-panel{
  position: relative;
  /* sits above .split__img-accent so only the offset corner shows behind it */
  z-index: 1;
  background:
    radial-gradient(120% 120% at 85% 8%, rgba(254,106,0,0.32) 0%, rgba(254,106,0,0) 55%),
    linear-gradient(155deg, #474746 0%, var(--dark) 55%, #2c2c2b 100%);
  aspect-ratio: 4/3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 2.5rem;
  overflow: hidden;
}
/* subtle diagonal sheen across the panel */
.cp-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 40%);
  pointer-events: none;
}
.cp-panel svg {
  position: absolute;
  right: -1.5rem;
  top: -1rem;
  width: 74%;
  color: var(--orange);
  opacity: 0.9;
  stroke-width: 1.1;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,0.35));
  transition: transform 0.4s ease;
}
.cp-panel:hover svg {
  transform: translateY(-4px) scale(1.03);
}
.cp-panel__bar {
  position: relative;
  width: 4px;
  height: 46px;
  background: var(--orange);
  margin-bottom: 1rem;
}
.cp-panel__kicker {
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--light-grey);
  margin-bottom: 0.4rem;
}
.cp-panel__title {
  position: relative;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 0.95;
  color: var(--white);
}
 /* ---- Jargon explainer ---- */
.cp-jargon {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--light-grey);
  border: 1px solid var(--light-grey);
  margin-top: 2.5rem;
}
.cp-jargon__item {
  background: var(--white);
  padding: 2.25rem 1.75rem;
}
.cp-jargon__term {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  color: var(--dark);
  margin-bottom: 0.6rem;
}
.cp-jargon__term span { color: var(--orange); }
.cp-jargon__body {
  color: var(--mid-grey);
  line-height: 1.7;
  font-size: 0.95rem;
}
 /* ---- Two-column copy blocks ---- */
.cp-split p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.cp-split p:last-child { margin-bottom: 0; }
 /* ---- FAQs ---- */
.cp-faqs { max-width: 860px; margin-top: 2.5rem; }
.cp-faq { border-bottom: 1px solid var(--light-grey); }
.cp-faq:first-child { border-top: 1px solid var(--light-grey); }
.cp-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 3rem 1.4rem 0;
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
  transition: color 0.2s ease;
}
.cp-faq summary::-webkit-details-marker { display: none; }
.cp-faq summary:hover { color: var(--orange); }
.cp-faq summary::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.cp-faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.cp-faq__body {
  padding: 0 3rem 1.6rem 0;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.98rem;
}
 /* ---- Quote form ---- */
.cp-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}
.cp-form-aside p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.cp-form-aside .contact-detail { margin-bottom: 1.5rem; }
 @media (max-width: 900px) {
  .cp-form-grid { grid-template-columns: 1fr; gap: 2rem; }
  .cp-panel { padding: 1.75rem; }
}


/* --------------------------------------------------------------------------
   /it-products/
   -------------------------------------------------------------------------- */
 .product-grid__heading {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.4rem;
  color: var(--dark);
  margin: 2.5rem 0 1.5rem;
}


/* --------------------------------------------------------------------------
   /it-products/
   -------------------------------------------------------------------------- */
 /* Vendor partnership logo strip */
.partner-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.75rem 2.5rem;
}
.partner-logo {
  display: inline-flex;
  align-items: center;
  opacity: 0.85;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.partner-logo:hover { opacity: 1; transform: translateY(-2px); }
.partner-logo:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 2px; }
.partner-logo svg { height: 30px; width: auto; display: block; }
@media (min-width: 992px) {
  .partner-grid { flex-wrap: nowrap; gap: 2rem; }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* --------------------------------------------------------------------------
   /it-products/network-equipment/
   -------------------------------------------------------------------------- */
  @media (max-width: 900px) {
.ne-form-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
  }


/* --------------------------------------------------------------------------
   /it-products/office-365/
   -------------------------------------------------------------------------- */
 /* ---- Hero strapline on its own line (as computer-service.html) ---- */
.o3-hero h1 { margin-bottom: 0.25rem; }
.o3-hero h1 span { display: block; color: var(--orange); font-size: 0.42em; letter-spacing: 0.04em; }
.o3-hero p { margin-top: 1.5rem; }
 /* ---- Lead statement + call strip ---- */
.o3-lead { max-width: 780px; }
.o3-lead p {
  color: var(--mid-grey);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.o3-lead p:last-child { margin-bottom: 0; }
 .o3-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}
/* Long CTA label needs to wrap on narrow screens - .btn is nowrap by default */
.o3-actions .btn {
  white-space: normal;
  text-align: center;
  max-width: 100%;
}
.o3-callout {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--off-white);
  border-left: 4px solid var(--orange);
  max-width: 780px;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.95rem;
}
.o3-callout strong { color: var(--dark); }
.o3-callout a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
}
.o3-callout a:hover { text-decoration: underline; }
 /* ---- Prominent "Update Your Password" clickable box ---- */
.o3-pw-box {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.5rem;
  padding: 0.85rem 1.1rem;
  background: var(--white);
  border: 2px solid var(--orange);
  border-radius: 6px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(254,106,0,0.12);
  transition: box-shadow 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
.o3-pw-box:hover {
  background: var(--off-white);
  box-shadow: 0 10px 26px rgba(254,106,0,0.2);
  transform: translateY(-2px);
}
.o3-pw-box__icon {
  flex: none;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--orange);
  color: var(--white);
  border-radius: 6px;
}
.o3-pw-box__icon svg { width: 20px; height: 20px; }
.o3-pw-box__text { display: flex; flex-direction: column; gap: 0.25rem; }
.o3-pw-box__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--dark);
  line-height: 1.1;
}
.o3-pw-box__desc {
  color: var(--mid-grey);
  font-size: 0.95rem;
  line-height: 1.6;
}
.o3-pw-box__arrow {
  flex: none;
  margin-left: auto;
  color: var(--orange);
  display: flex;
  align-items: center;
  transition: transform 0.25s ease;
}
.o3-pw-box__arrow svg { width: 24px; height: 24px; }
.o3-pw-box:hover .o3-pw-box__arrow { transform: translateX(4px); }
@media (max-width: 520px) {
  .o3-pw-box__arrow { display: none; }
}
 /* Benefit cards here aren't links, so don't imply they're clickable */
section[aria-labelledby="o3-benefits-heading"] .feature-card,
section[aria-labelledby="db-included-heading"] .feature-card,
section[aria-labelledby="cloud-included-heading"] .feature-card,
section[aria-labelledby="cloud-benefits-heading"] .feature-card,
section[aria-labelledby="values-heading"] .feature-card,
section[aria-labelledby="ai-services-heading"] .feature-card { cursor: default; }

/* Telecoms "Business Telecoms, Explained" - two cards on top with the third
   centred underneath, and full-width intro paragraphs aligned to the title */
section[aria-labelledby="telecoms-intro-heading"] .features-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
section[aria-labelledby="telecoms-intro-heading"] .features-grid .feature-card {
  flex: 1 1 320px;
  max-width: 460px;
}
section[aria-labelledby="telecoms-intro-heading"] .section-intro {
  max-width: none;
}

 /* ---- The apps strip ---- */
/* Six apps in a bordered grid - column counts are fixed to divisors of 6 so
   the last row is never left with an empty grey cell */
.o3-apps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--light-grey);
  border: 1px solid var(--light-grey);
  margin-top: 2.5rem;
}
@media (min-width: 620px)  { .o3-apps { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .o3-apps { grid-template-columns: repeat(6, 1fr); } }
.o3-app {
  background: var(--white);
  padding: 2.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.9rem;
  transition: background 0.25s ease;
}
.o3-app:hover { background: var(--off-white); }
.o3-app__mark {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dark);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.75rem;
  line-height: 1;
  padding-top: 0.15em;
}
.o3-app__name {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--dark);
  line-height: 1;
}
.o3-app__note {
  color: var(--mid-grey);
  font-size: 0.85rem;
  line-height: 1.6;
}
 /* ---- Storage highlight ---- */
.o3-figure {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 3rem;
  margin-top: 3rem;
}
.o3-figure__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--orange);
  margin-bottom: 0.5rem;
}
.o3-figure__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--dark);
  margin-bottom: 0.6rem;
}
.o3-figure__body {
  color: var(--mid-grey);
  font-size: 0.95rem;
  line-height: 1.7;
}
 /* ---- Two-column copy blocks ---- */
.o3-split p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.o3-split p:last-child { margin-bottom: 0; }
 .o3-panel {
  position: relative;
  /* sits above .split__img-accent so only the offset corner shows behind it */
  z-index: 1;
  background:
    radial-gradient(120% 120% at 85% 8%, rgba(254,106,0,0.32) 0%, rgba(254,106,0,0) 55%),
    linear-gradient(155deg, #474746 0%, var(--dark) 55%, #2c2c2b 100%);
  aspect-ratio: 4/3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 2.5rem;
  overflow: hidden;
}
/* subtle diagonal sheen across the panel */
.o3-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 40%);
  pointer-events: none;
}
.o3-panel svg {
  position: absolute;
  right: -1.5rem;
  top: -1rem;
  width: 74%;
  color: var(--orange);
  opacity: 0.9;
  stroke-width: 1.1;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,0.35));
  transition: transform 0.4s ease;
}
.o3-panel:hover svg {
  transform: translateY(-4px) scale(1.03);
}
.o3-panel__bar {
  position: relative;
  width: 4px;
  height: 46px;
  background: var(--orange);
  margin-bottom: 1rem;
}
.o3-panel__kicker {
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--light-grey);
  margin-bottom: 0.4rem;
}
.o3-panel__title {
  position: relative;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 0.95;
  color: var(--white);
}
 /* ---- FAQs ---- */
.o3-faqs { max-width: 860px; margin-top: 2.5rem; }
.o3-faq { border-bottom: 1px solid var(--light-grey); }
.o3-faq:first-child { border-top: 1px solid var(--light-grey); }
.o3-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 3rem 1.4rem 0;
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
  transition: color 0.2s ease;
}
.o3-faq summary::-webkit-details-marker { display: none; }
.o3-faq summary:hover { color: var(--orange); }
.o3-faq summary::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.o3-faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.o3-faq__body {
  padding: 0 3rem 1.6rem 0;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.98rem;
}
 /* ---- Quote form ---- */
.o3-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}
.o3-form-aside p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.o3-form-aside .contact-detail { margin-bottom: 1.5rem; }
 @media (max-width: 900px) {
  .o3-form-grid { grid-template-columns: 1fr; gap: 2rem; }
  .o3-panel { padding: 1.75rem; }
}


/* --------------------------------------------------------------------------
   /it-products/office-365/update-your-office-365-password/
   -------------------------------------------------------------------------- */
 .pw-lead { max-width: 780px; }
.pw-lead p {
  color: var(--mid-grey);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.pw-lead p:last-child { margin-bottom: 0; }
 /* Highlighted action button inside a step */
.pw-step-actions { margin-top: 1.25rem; }
.pw-step-actions .btn { white-space: normal; text-align: center; max-width: 100%; }
 .pw-callout {
  margin-top: 2.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--off-white);
  border-left: 4px solid var(--orange);
  max-width: 780px;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.95rem;
}
.pw-callout strong { color: var(--dark); }
.pw-callout a { color: var(--orange); font-weight: 700; text-decoration: none; }
.pw-callout a:hover { text-decoration: underline; }


/* --------------------------------------------------------------------------
   /it-products/printers-and-scanners/
   -------------------------------------------------------------------------- */
 /* ---- Hero strapline on its own line (as computers.html) ---- */
.cp-hero h1 { margin-bottom: 0.25rem; }
.cp-hero h1 span { display: block; color: var(--orange); font-size: 0.42em; letter-spacing: 0.04em; }
.cp-hero p { margin-top: 1.5rem; }
 /* ---- Lead statement + call strip ---- */
.cp-lead { max-width: 780px; }
.cp-lead p {
  color: var(--mid-grey);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.cp-lead p:last-child { margin-bottom: 0; }
 .cp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}
.cp-actions .btn {
  white-space: normal;
  text-align: center;
  max-width: 100%;
}
.cp-callout {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--off-white);
  border-left: 4px solid var(--orange);
  max-width: 780px;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.95rem;
}
.cp-callout strong { color: var(--dark); }
.cp-callout a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
}
.cp-callout a:hover { text-decoration: underline; }
 /* ---- Laser vs Inkjet comparison ---- */
.pr-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--light-grey);
  border: 1px solid var(--light-grey);
  margin-top: 2.5rem;
}
.pr-type {
  background: var(--white);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
}
.pr-type__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.pr-type__icon {
  flex: none;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--off-white);
  border: 1px solid var(--light-grey);
}
.pr-type__icon svg { width: 26px; height: 26px; color: var(--orange); }
.pr-type__name {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  color: var(--dark);
  line-height: 1;
}
.pr-type__lead {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.pr-proscons { margin-top: auto; }
.pr-pc { margin-bottom: 1.1rem; }
.pr-pc:last-child { margin-bottom: 0; }
.pr-pc__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 0.4rem;
}
.pr-pc__label svg { width: 15px; height: 15px; }
.pr-pc--pro .pr-pc__label { color: #2e8b57; }
.pr-pc--con .pr-pc__label { color: var(--orange); }
.pr-pc__body {
  color: var(--mid-grey);
  line-height: 1.7;
  font-size: 0.95rem;
}
 /* ---- Laser vs Inkjet comparison table ---- */
.pr-compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}
.pr-compare-table th,
.pr-compare-table td {
  text-align: left;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--light-grey);
  font-size: 0.95rem;
  color: var(--mid-grey);
}
.pr-compare-table thead th {
  color: var(--dark);
  font-family: var(--font-body);
  font-weight: 700;
  background: var(--off-white);
}
.pr-compare-table tbody th {
  color: var(--dark);
  font-weight: 700;
  white-space: nowrap;
}
.pr-compare-note {
  margin-top: 2.5rem;
  max-width: 820px;
  color: var(--mid-grey);
  line-height: 1.8;
}
 /* ---- Budget callout with worked example ---- */
.pr-budget {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 3rem;
  align-items: center;
  margin-top: 2.5rem;
}
.pr-budget p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.pr-budget p:last-child { margin-bottom: 0; }
.pr-example {
  background: var(--dark);
  color: var(--white);
  padding: 2.5rem 2rem;
  text-align: center;
}
.pr-example__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--light-grey);
  margin-bottom: 1rem;
}
.pr-example__figure {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--orange);
  font-size: clamp(3rem, 8vw, 4.5rem);
  line-height: 0.9;
}
.pr-example__unit { display: block; font-size: 1rem; color: var(--white); letter-spacing: 0.1em; margin-top: 0.5rem; }
.pr-example__note {
  color: var(--light-grey);
  font-size: 0.9rem;
  line-height: 1.7;
  margin-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 1.25rem;
}
 /* ---- Big visual panel ---- */
.cp-split p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.cp-split p:last-child { margin-bottom: 0; }
.cp-panel {
  position: relative;
  z-index: 1;
  background:
    radial-gradient(120% 120% at 85% 8%, rgba(254,106,0,0.32) 0%, rgba(254,106,0,0) 55%),
    linear-gradient(155deg, #474746 0%, var(--dark) 55%, #2c2c2b 100%);
  aspect-ratio: 4/3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 2.5rem;
  overflow: hidden;
}
/* subtle diagonal sheen across the panel */
.cp-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 40%);
  pointer-events: none;
}
.cp-panel svg {
  position: absolute;
  right: -1.5rem;
  top: -1rem;
  width: 74%;
  color: var(--orange);
  opacity: 0.9;
  stroke-width: 1.1;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,0.35));
  transition: transform 0.4s ease;
}
.cp-panel:hover svg {
  transform: translateY(-4px) scale(1.03);
}
.cp-panel__bar {
  position: relative;
  width: 4px;
  height: 46px;
  background: var(--orange);
  margin-bottom: 1rem;
}
.cp-panel__kicker {
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--light-grey);
  margin-bottom: 0.4rem;
}
.cp-panel__title {
  position: relative;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 0.95;
  color: var(--white);
}
 /* ---- FAQs ---- */
.cp-faqs { max-width: 860px; margin-top: 2.5rem; }
.cp-faq { border-bottom: 1px solid var(--light-grey); }
.cp-faq:first-child { border-top: 1px solid var(--light-grey); }
.cp-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 3rem 1.4rem 0;
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
  transition: color 0.2s ease;
}
.cp-faq summary::-webkit-details-marker { display: none; }
.cp-faq summary:hover { color: var(--orange); }
.cp-faq summary::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.cp-faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.cp-faq__body {
  padding: 0 3rem 1.6rem 0;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.98rem;
}
 /* ---- Quote form ---- */
.cp-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}
.cp-form-aside p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.cp-form-aside .contact-detail { margin-bottom: 1.5rem; }
 /* ---- Hints & tips opt-in ---- */
.pr-optin {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.1rem 1.25rem;
  background: var(--off-white);
  border: 1px solid var(--light-grey);
}
.pr-optin input { margin-top: 0.2rem; flex: none; width: 18px; height: 18px; accent-color: var(--orange); }
.pr-optin__text { color: var(--mid-grey); line-height: 1.6; font-size: 0.92rem; }
.pr-optin__text strong { color: var(--dark); font-weight: 600; }
.pr-optin__note { display: block; font-size: 0.82rem; margin-top: 0.25rem; color: var(--mid-grey); }
 @media (max-width: 900px) {
  .cp-form-grid { grid-template-columns: 1fr; gap: 2rem; }
  .pr-budget { grid-template-columns: 1fr; gap: 2rem; }
  .cp-panel { padding: 1.75rem; }
}


/* --------------------------------------------------------------------------
   /it-products/secure-password-vault/
   -------------------------------------------------------------------------- */
 /* ---- Hero strapline: "powered by" badge under the title ---- */
.pv-hero h1 { margin-bottom: 1rem; }
.pv-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 0.5rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--orange);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
}
.pv-hero__badge span {
  color: var(--orange);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
}
.pv-hero p { margin-top: 1.5rem; }
 /* ---- Lead statement ---- */
.pv-lead { max-width: 780px; }
.pv-lead p {
  color: var(--mid-grey);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.pv-lead p:last-child { margin-bottom: 0; }
 .pv-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}
.pv-actions .btn {
  white-space: normal;
  text-align: center;
  max-width: 100%;
}
 /* ---- Stat rings (dark band) ---- */
.pv-stats { background: var(--dark); }
.pv-stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2.5rem 2rem;
}
.pv-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
}
.pv-stat__ring {
  --pct: 0;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(closest-side, var(--dark) 71%, transparent 72% 100%),
    conic-gradient(var(--orange) calc(var(--pct) * 1%), rgba(255,255,255,0.14) 0);
}
.pv-stat__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.4rem;
  color: var(--white);
  line-height: 1;
}
.pv-stat__body {
  color: var(--light-grey);
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 240px;
}
 /* ---- Two-column copy block ---- */
.pv-split p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.pv-split p:last-child { margin-bottom: 0; }
 .pv-panel {
  position: relative;
  z-index: 1;
  background:
    radial-gradient(120% 120% at 85% 8%, rgba(254,106,0,0.32) 0%, rgba(254,106,0,0) 55%),
    linear-gradient(155deg, #474746 0%, var(--dark) 55%, #2c2c2b 100%);
  aspect-ratio: 4/3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 2.5rem;
  overflow: hidden;
}
/* subtle diagonal sheen across the panel */
.pv-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 40%);
  pointer-events: none;
}
.pv-panel svg {
  position: absolute;
  right: -1.5rem;
  top: -1rem;
  width: 74%;
  color: var(--orange);
  opacity: 0.9;
  stroke-width: 1.1;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,0.35));
  transition: transform 0.4s ease;
}
.pv-panel:hover svg {
  transform: translateY(-4px) scale(1.03);
}
.pv-panel__bar {
  position: relative;
  width: 4px;
  height: 46px;
  background: var(--orange);
  margin-bottom: 1rem;
}
.pv-panel__kicker {
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--light-grey);
  margin-bottom: 0.4rem;
}
.pv-panel__title {
  position: relative;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 0.95;
  color: var(--white);
}
 /* ---- Closing banner (as image) ---- */
.pv-banner {
  background: var(--dark);
  padding: 3.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.pv-banner h2 { color: var(--white); margin: 0; }
.pv-banner h2 span { color: var(--orange); }
 @media (max-width: 900px) {
  .pv-panel { padding: 1.75rem; }
  .pv-banner { padding: 2.25rem; }
}


/* --------------------------------------------------------------------------
   /it-products/servers/
   -------------------------------------------------------------------------- */
 /* ---- Hero strapline on its own line (as computers.html) ---- */
.cp-hero h1 { margin-bottom: 0.25rem; }
.cp-hero h1 span { display: block; color: var(--orange); font-size: 0.42em; letter-spacing: 0.04em; }
.cp-hero p { margin-top: 1.5rem; }
 /* ---- Lead statement + call strip ---- */
.cp-lead { max-width: 780px; }
.cp-lead p {
  color: var(--mid-grey);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.cp-lead p:last-child { margin-bottom: 0; }
 .cp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}
.cp-actions .btn {
  white-space: normal;
  text-align: center;
  max-width: 100%;
}
.cp-callout {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--off-white);
  border-left: 4px solid var(--orange);
  max-width: 780px;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.95rem;
}
.cp-callout strong { color: var(--dark); }
.cp-callout a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
}
.cp-callout a:hover { text-decoration: underline; }
 /* ---- "What is a server" explainer ---- */
.sv-explain {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 3rem;
  align-items: center;
  margin-top: 2.5rem;
}
.sv-explain p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.sv-explain p:last-child { margin-bottom: 0; }
.sv-diagram {
  background: var(--dark);
  color: var(--white);
  padding: 2.5rem 2rem;
  text-align: center;
}
.sv-diagram__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1.25rem;
  color: var(--orange);
}
.sv-diagram__icon svg { width: 100%; height: 100%; }
.sv-diagram__title {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--white);
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  line-height: 1;
  margin-bottom: 1rem;
}
.sv-diagram__note {
  color: var(--light-grey);
  font-size: 0.92rem;
  line-height: 1.7;
}
 /* ---- Server uses grid ---- */
.sv-uses {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
}
.sv-use {
  flex: 1 1 240px;
  max-width: 320px;
  background: var(--white);
  border: 1px solid var(--light-grey);
  padding: 2rem;
  display: flex;
  flex-direction: column;
}
.sv-use__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
  margin-bottom: 1rem;
}
.sv-use__icon svg { width: 28px; height: 28px; }
.sv-use__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  color: var(--dark);
  margin-bottom: 0.6rem;
  line-height: 1.1;
}
.sv-use__body {
  color: var(--mid-grey);
  line-height: 1.7;
  font-size: 0.95rem;
}
 /* ---- Big visual panel ---- */
.cp-split p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.cp-split p:last-child { margin-bottom: 0; }
.cp-panel {
  position: relative;
  z-index: 1;
  background:
    radial-gradient(120% 120% at 85% 8%, rgba(254,106,0,0.32) 0%, rgba(254,106,0,0) 55%),
    linear-gradient(155deg, #474746 0%, var(--dark) 55%, #2c2c2b 100%);
  aspect-ratio: 4/3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 2.5rem;
  overflow: hidden;
}
/* subtle diagonal sheen across the panel */
.cp-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 40%);
  pointer-events: none;
}
.cp-panel svg {
  position: absolute;
  right: -1.5rem;
  top: -1rem;
  width: 74%;
  color: var(--orange);
  opacity: 0.9;
  stroke-width: 1.1;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,0.35));
  transition: transform 0.4s ease;
}
.cp-panel:hover svg {
  transform: translateY(-4px) scale(1.03);
}
.cp-panel__bar {
  position: relative;
  width: 4px;
  height: 46px;
  background: var(--orange);
  margin-bottom: 1rem;
}
.cp-panel__kicker {
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--light-grey);
  margin-bottom: 0.4rem;
}
.cp-panel__title {
  position: relative;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 0.95;
  color: var(--white);
}
 /* ---- FAQs ---- */
.cp-faqs { max-width: 860px; margin-top: 2.5rem; }
.cp-faq { border-bottom: 1px solid var(--light-grey); }
.cp-faq:first-child { border-top: 1px solid var(--light-grey); }
.cp-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 3rem 1.4rem 0;
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
  transition: color 0.2s ease;
}
.cp-faq summary::-webkit-details-marker { display: none; }
.cp-faq summary:hover { color: var(--orange); }
.cp-faq summary::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.cp-faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.cp-faq__body {
  padding: 0 3rem 1.6rem 0;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.98rem;
}
 /* ---- Quote form ---- */
.cp-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}
.cp-form-aside p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.cp-form-aside .contact-detail { margin-bottom: 1.5rem; }
 /* ---- Hints & tips opt-in ---- */
.pr-optin {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.1rem 1.25rem;
  background: var(--off-white);
  border: 1px solid var(--light-grey);
}
.pr-optin input { margin-top: 0.2rem; flex: none; width: 18px; height: 18px; accent-color: var(--orange); }
.pr-optin__text { color: var(--mid-grey); line-height: 1.6; font-size: 0.92rem; }
.pr-optin__text strong { color: var(--dark); font-weight: 600; }
.pr-optin__note { display: block; font-size: 0.82rem; margin-top: 0.25rem; color: var(--mid-grey); }
 @media (max-width: 900px) {
  .cp-form-grid { grid-template-columns: 1fr; gap: 2rem; }
  .sv-explain { grid-template-columns: 1fr; gap: 2rem; }
  .cp-panel { padding: 1.75rem; }
}


/* --------------------------------------------------------------------------
   /it-products/software/
   -------------------------------------------------------------------------- */
 /* ---- Hero strapline on its own line (as servers.html) ---- */
.cp-hero h1 { margin-bottom: 0.25rem; }
.cp-hero h1 span { display: block; color: var(--orange); font-size: 0.42em; letter-spacing: 0.04em; }
.cp-hero p { margin-top: 1.5rem; }
 /* ---- Lead statement + call strip ---- */
.cp-lead { max-width: 780px; }
.cp-lead p {
  color: var(--mid-grey);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.cp-lead p:last-child { margin-bottom: 0; }
 .cp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}
.cp-actions .btn {
  white-space: normal;
  text-align: center;
  max-width: 100%;
}
 /* ---- Worked examples grid ---- */
.sw-examples {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
}
.sw-example {
  flex: 1 1 240px;
  max-width: 320px;
  background: var(--white);
  border: 1px solid var(--light-grey);
  padding: 2rem;
  display: flex;
  flex-direction: column;
}
.sw-example__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
  margin-bottom: 1rem;
}
.sw-example__icon svg { width: 28px; height: 28px; }
.sw-example__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  color: var(--dark);
  margin-bottom: 0.6rem;
  line-height: 1.1;
}
.sw-example__body {
  color: var(--mid-grey);
  line-height: 1.7;
  font-size: 0.95rem;
}
 /* ---- Big visual panel ---- */
.cp-split p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.cp-split p:last-child { margin-bottom: 0; }
.cp-panel {
  position: relative;
  z-index: 1;
  background:
    radial-gradient(120% 120% at 85% 8%, rgba(254,106,0,0.32) 0%, rgba(254,106,0,0) 55%),
    linear-gradient(155deg, #474746 0%, var(--dark) 55%, #2c2c2b 100%);
  aspect-ratio: 4/3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 2.5rem;
  overflow: hidden;
}
/* subtle diagonal sheen across the panel */
.cp-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 40%);
  pointer-events: none;
}
.cp-panel svg {
  position: absolute;
  right: -1.5rem;
  top: -1rem;
  width: 74%;
  color: var(--orange);
  opacity: 0.9;
  stroke-width: 1.1;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,0.35));
  transition: transform 0.4s ease;
}
.cp-panel:hover svg {
  transform: translateY(-4px) scale(1.03);
}
.cp-panel__bar {
  position: relative;
  width: 4px;
  height: 46px;
  background: var(--orange);
  margin-bottom: 1rem;
}
.cp-panel__kicker {
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--light-grey);
  margin-bottom: 0.4rem;
}
.cp-panel__title {
  position: relative;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 0.95;
  color: var(--white);
}
 /* ---- FAQs ---- */
.cp-faqs { max-width: 860px; margin-top: 2.5rem; }
.cp-faq { border-bottom: 1px solid var(--light-grey); }
.cp-faq:first-child { border-top: 1px solid var(--light-grey); }
.cp-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 3rem 1.4rem 0;
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
  transition: color 0.2s ease;
}
.cp-faq summary::-webkit-details-marker { display: none; }
.cp-faq summary:hover { color: var(--orange); }
.cp-faq summary::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.cp-faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.cp-faq__body {
  padding: 0 3rem 1.6rem 0;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.98rem;
}
 @media (max-width: 900px) {
  .cp-panel { padding: 1.75rem; }
}


/* --------------------------------------------------------------------------
   /it-products/the-cloud/dropbox/
   -------------------------------------------------------------------------- */
 .db-hero h1 { margin-bottom: 0.25rem; }
.db-hero h1 span { display: block; color: var(--orange); font-size: 0.42em; letter-spacing: 0.04em; }
 .db-lead { max-width: 780px; }
.db-lead p {
  color: var(--mid-grey);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.db-lead p:last-child { margin-bottom: 0; }
.db-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}
.db-actions .btn { white-space: normal; text-align: center; max-width: 100%; }
 /* ---- Plans ---- */
.db-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 3rem;
}
.db-plan {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--light-grey);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.db-plan:hover {
  border-color: var(--orange);
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0,0,0,0.09);
}
.db-plan__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.75rem 2rem;
  background: var(--dark);
}
.db-plan__name {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  color: var(--white);
  line-height: 1;
}
.db-plan__store {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.db-plan__body { display: flex; flex-direction: column; flex: 1; padding: 2rem; }
.db-specs { list-style: none; margin: 0 0 2rem; padding: 0; }
.db-spec {
  display: flex;
  gap: 0.9rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--light-grey);
  color: var(--mid-grey);
  line-height: 1.7;
  font-size: 0.98rem;
}
.db-spec:first-child { padding-top: 0; }
.db-spec:last-child { border-bottom: none; padding-bottom: 0; }
.db-spec svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 0.25rem; color: var(--orange); }
.db-spec strong { color: var(--dark); }
.db-plan .btn { margin-top: auto; }
 /* ---- FAQs ---- */
.db-faqs { max-width: 860px; margin-top: 2.5rem; }
.db-faq { border-bottom: 1px solid var(--light-grey); }
.db-faq:first-child { border-top: 1px solid var(--light-grey); }
.db-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 3rem 1.4rem 0;
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
  transition: color 0.2s ease;
}
.db-faq summary::-webkit-details-marker { display: none; }
.db-faq summary:hover { color: var(--orange); }
.db-faq summary::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.db-faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.db-faq__body {
  padding: 0 3rem 1.6rem 0;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.98rem;
}
 @media (max-width: 900px) {
  .db-plans { grid-template-columns: 1fr; gap: 2rem; }
}


/* --------------------------------------------------------------------------
   /it-products/the-cloud/
   -------------------------------------------------------------------------- */
 /* ---- Hero strapline on its own line (as computer-service.html) ---- */
.cl-hero h1 { margin-bottom: 0.25rem; }
.cl-hero h1 span { display: block; color: var(--orange); font-size: 0.42em; letter-spacing: 0.04em; }
.cl-hero p { margin-top: 1.5rem; }
 /* ---- Lead statement + call strip ---- */
.cl-lead { max-width: 780px; }
.cl-lead p {
  color: var(--mid-grey);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.cl-lead p:last-child { margin-bottom: 0; }
 .cl-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}
/* Long CTA label needs to wrap on narrow screens - .btn is nowrap by default */
.cl-actions .btn {
  white-space: normal;
  text-align: center;
  max-width: 100%;
}
.cl-callout {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--off-white);
  border-left: 4px solid var(--orange);
  max-width: 780px;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.95rem;
}
.cl-callout strong { color: var(--dark); }
.cl-callout a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
}
.cl-callout a:hover { text-decoration: underline; }
 /* ---- OneDrive vs Dropbox comparison ---- */
.cl-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 3rem;
}
.cl-option {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--light-grey);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.cl-option:hover {
  border-color: var(--orange);
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0,0,0,0.09);
}
.cl-option__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.75rem 2rem;
  background: var(--dark);
}
.cl-option__head svg {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  color: var(--orange);
}
.cl-option__name {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.75rem;
  letter-spacing: 0.02em;
  color: var(--white);
  line-height: 1;
}
.cl-option__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 2rem;
}
.cl-specs { list-style: none; margin: 0 0 2rem; padding: 0; }
.cl-spec {
  display: flex;
  gap: 0.9rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--light-grey);
  color: var(--mid-grey);
  line-height: 1.7;
  font-size: 0.98rem;
}
.cl-spec:first-child { padding-top: 0; }
.cl-spec:last-child { border-bottom: none; padding-bottom: 0; }
.cl-spec svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 0.25rem;
  color: var(--orange);
}
.cl-spec strong { color: var(--dark); }
.cl-option .btn { margin-top: auto; }
 .cl-compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}
.cl-compare-table th,
.cl-compare-table td {
  text-align: left;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--light-grey);
  font-size: 0.95rem;
  color: var(--mid-grey);
}
.cl-compare-table thead th {
  color: var(--dark);
  font-family: var(--font-body);
  font-weight: 700;
  background: var(--off-white);
}
.cl-compare-table tbody th {
  color: var(--dark);
  font-weight: 700;
  white-space: nowrap;
}
 .cl-compare-note {
  margin-top: 2.5rem;
  max-width: 820px;
  color: var(--mid-grey);
  line-height: 1.8;
}
.cl-compare-note a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
}
.cl-compare-note a:hover { text-decoration: underline; }
 /* ---- Two-column copy blocks ---- */
.cl-split p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.cl-split p:last-child { margin-bottom: 0; }
 .cl-panel {
  position: relative;
  /* sits above .split__img-accent so only the offset corner shows behind it */
  z-index: 1;
  background:
    radial-gradient(120% 120% at 85% 8%, rgba(254,106,0,0.32) 0%, rgba(254,106,0,0) 55%),
    linear-gradient(155deg, #474746 0%, var(--dark) 55%, #2c2c2b 100%);
  aspect-ratio: 4/3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 2.5rem;
  overflow: hidden;
}
/* subtle diagonal sheen across the panel */
.cl-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 40%);
  pointer-events: none;
}
.cl-panel svg {
  position: absolute;
  right: -1.5rem;
  top: -1rem;
  width: 74%;
  color: var(--orange);
  opacity: 0.9;
  stroke-width: 1.1;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,0.35));
  transition: transform 0.4s ease;
}
.cl-panel:hover svg {
  transform: translateY(-4px) scale(1.03);
}
.cl-panel__bar {
  position: relative;
  width: 4px;
  height: 46px;
  background: var(--orange);
  margin-bottom: 1rem;
}
.cl-panel__kicker {
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--light-grey);
  margin-bottom: 0.4rem;
}
.cl-panel__title {
  position: relative;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 0.95;
  color: var(--white);
}
 /* ---- FAQs ---- */
.cl-faqs { max-width: 860px; margin-top: 2.5rem; }
.cl-faq { border-bottom: 1px solid var(--light-grey); }
.cl-faq:first-child { border-top: 1px solid var(--light-grey); }
.cl-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 3rem 1.4rem 0;
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
  transition: color 0.2s ease;
}
.cl-faq summary::-webkit-details-marker { display: none; }
.cl-faq summary:hover { color: var(--orange); }
.cl-faq summary::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.cl-faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.cl-faq__body {
  padding: 0 3rem 1.6rem 0;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.98rem;
}
 /* ---- Quote form ---- */
.cl-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}
.cl-form-aside p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.cl-form-aside .contact-detail { margin-bottom: 1.5rem; }
 @media (max-width: 900px) {
  .cl-compare,
  .cl-form-grid { grid-template-columns: 1fr; gap: 2rem; }
  .cl-panel { padding: 1.75rem; }
}


/* --------------------------------------------------------------------------
   /it-products/the-cloud/onedrive/
   -------------------------------------------------------------------------- */
 .od-hero h1 { margin-bottom: 0.25rem; }
.od-hero h1 span { display: block; color: var(--orange); font-size: 0.42em; letter-spacing: 0.04em; }
 .od-lead { max-width: 780px; }
.od-lead p {
  color: var(--mid-grey);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.od-lead p:last-child { margin-bottom: 0; }
.od-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}
.od-actions .btn { white-space: normal; text-align: center; max-width: 100%; }
 /* ---- FAQs ---- */
.od-faqs { max-width: 860px; margin-top: 2.5rem; }
.od-faq { border-bottom: 1px solid var(--light-grey); }
.od-faq:first-child { border-top: 1px solid var(--light-grey); }
.od-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 3rem 1.4rem 0;
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
  transition: color 0.2s ease;
}
.od-faq summary::-webkit-details-marker { display: none; }
.od-faq summary:hover { color: var(--orange); }
.od-faq summary::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.od-faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.od-faq__body {
  padding: 0 3rem 1.6rem 0;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.98rem;
}


/* --------------------------------------------------------------------------
   /cloud/
   -------------------------------------------------------------------------- */
 /* ---- Lead statement ---- */
.cloud-lead {
  max-width: 780px;
}
.cloud-lead__kicker {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.1;
  color: var(--dark);
  margin-bottom: 1.5rem;
}
.cloud-lead p {
  color: var(--mid-grey);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.cloud-lead p:last-child { margin-bottom: 0; }
 /* ---- Quote form ---- */
.cloud-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}
.cloud-form-aside p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.cloud-form-aside .contact-detail { margin-bottom: 1.5rem; }
 /* ---- Yes / No switch ---- */
.switch-field {
  background: var(--white);
  border: 1px solid var(--light-grey);
  padding: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.switch-field__text {
  font-size: 0.88rem;
  color: var(--dark);
  line-height: 1.6;
}
.switch {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mid-grey);
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.switch__track {
  width: 46px;
  height: 24px;
  border-radius: 999px;
  background: var(--light-grey);
  position: relative;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.switch__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform 0.2s ease;
}
.switch input:checked + .switch__track { background: var(--orange); }
.switch input:checked + .switch__track::after { transform: translateX(22px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--orange); outline-offset: 3px; }
 @media (max-width: 900px) {
  .cloud-form-grid { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 600px) {
  .switch-field { flex-direction: column; align-items: flex-start; gap: 1rem; }
}


/* --------------------------------------------------------------------------
   /services/computer-service/
   -------------------------------------------------------------------------- */
 body.p-services-computer-service .sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
 /* ---- HERO ---- */
.cs-hero {
  background: var(--dark);
  color: var(--white);
  padding: calc(9rem + var(--header-extra)) 0 5rem;
  position: relative;
  overflow: hidden;
}
.cs-hero__watermark {
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
  width: 380px;
  height: 380px;
  color: var(--orange);
  opacity: 0.12;
  pointer-events: none;
}
.cs-hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  color: var(--white);
  margin-bottom: 0.25rem;
}
.cs-hero h1 span { display: block; color: var(--orange); font-size: 0.42em; letter-spacing: 0.04em; }
.cs-hero p {
  color: rgba(255,255,255,0.8);
  max-width: 620px;
  margin-top: 1.5rem;
  line-height: 1.8;
  font-size: 1.05rem;
}
.cs-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; }
 /* ---- WHAT'S INCLUDED ---- */
.cs-included { background: var(--off-white); padding: 5rem 0; }
.cs-included__head { max-width: 620px; margin-bottom: 3rem; }
.cs-included__head p { color: var(--mid-grey); margin-top: 1rem; line-height: 1.8; }
 .cs-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.cs-check {
  background: var(--white);
  border-left: 3px solid var(--orange);
  padding: 1.75rem;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.cs-check__tick {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.cs-check__tick svg { width: 15px; height: 15px; color: var(--white); }
.cs-check h3 {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--dark);
}
.cs-check p {
  color: var(--mid-grey);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-top: 0.4rem;
}
.cs-check--more {
  border-left-color: var(--light-grey);
  background: transparent;
  box-shadow: none;
  align-items: center;
}
.cs-check--more .cs-check__tick { background: var(--light-grey); }
.cs-check--more h3 { color: var(--mid-grey); }
 /* ---- EXPERTS BAND ---- */
.cs-band {
  background: var(--orange);
  padding: 3rem 0;
}
.cs-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.cs-band h2 {
  color: var(--white);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  max-width: 640px;
}
.cs-band .btn--outline { color: var(--white); border-color: rgba(255,255,255,0.65); }
.cs-band .btn--outline:hover { background: var(--white); border-color: var(--white); color: var(--orange); }
 /* ---- PC & MAC ---- */
.cs-platforms { padding: 5rem 0; }
.cs-platforms__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--light-grey);
  border: 1px solid var(--light-grey);
}
.cs-platform {
  background: var(--white);
  padding: 2.5rem 2rem;
  text-align: center;
}
.cs-platform svg { width: 42px; height: 42px; color: var(--orange); margin: 0 auto 1rem; }
.cs-platform h3 {
  font-size: 1.5rem;
  color: var(--dark);
  margin-bottom: 0.5rem;
}
.cs-platform p { color: var(--mid-grey); font-size: 0.98rem; line-height: 1.7; }
 /* ---- QUOTE FORM ---- */
.cs-quote { background: var(--off-white); padding: 5rem 0; }
.cs-quote__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 4rem;
  align-items: start;
}
.cs-quote__intro h2 { color: var(--dark); margin-bottom: 1rem; }
.cs-quote__intro p { color: var(--mid-grey); line-height: 1.8; }
.cs-quote__form {
  background: var(--white);
  padding: 2.5rem;
  box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}
 .cs-optin {
  border-top: 1px solid var(--light-grey);
  padding-top: 1.5rem;
  margin-top: 0.5rem;
}
.cs-optin__q {
  display: block;
  font-size: 0.95rem;
  color: var(--dark);
  line-height: 1.6;
  margin-bottom: 0.9rem;
}
.cs-switch { display: flex; align-items: center; gap: 0.75rem; }
.cs-switch__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mid-grey);
  transition: color 0.2s;
}
.cs-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cs-switch__track {
  position: relative;
  width: 52px;
  height: 28px;
  border-radius: 999px;
  background: var(--light-grey);
  cursor: pointer;
  transition: background 0.25s ease;
  flex-shrink: 0;
}
.cs-switch__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  transition: transform 0.25s ease;
}
.cs-switch input:checked + .cs-switch__track { background: var(--orange); }
.cs-switch input:checked + .cs-switch__track::after { transform: translateX(24px); }
.cs-switch input:focus-visible + .cs-switch__track { outline: 2px solid var(--orange); outline-offset: 2px; }
.cs-switch input:checked ~ .cs-switch__label--yes { color: var(--dark); }
.cs-optin__note {
  font-size: 0.8rem;
  color: var(--mid-grey);
  margin-top: 0.9rem;
  line-height: 1.6;
}
 /* ---- TRUST STRIP ---- */
.cs-trust { background: var(--white); padding: 1.75rem 0; border-bottom: 1px solid var(--light-grey); }
.cs-trust__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.cs-trust__item { font-size: 0.92rem; color: var(--mid-grey); }
.cs-trust__item strong { color: var(--dark); font-weight: 800; }
 /* ---- FAQs ---- */
.cs-faqs { max-width: 860px; margin-top: 2.5rem; }
.cs-faq { border-bottom: 1px solid var(--light-grey); }
.cs-faq:first-child { border-top: 1px solid var(--light-grey); }
.cs-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 3rem 1.4rem 0;
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
  transition: color 0.2s ease;
}
.cs-faq summary::-webkit-details-marker { display: none; }
.cs-faq summary:hover { color: var(--orange); }
.cs-faq summary::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.cs-faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.cs-faq__body { padding: 0 3rem 1.6rem 0; color: var(--mid-grey); line-height: 1.8; }
 @media (max-width: 900px) {
  .cs-quote__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .cs-hero__watermark { display: none; }
}
@media (max-width: 560px) {
  .cs-platforms__grid { grid-template-columns: 1fr; }
  .cs-quote__form { padding: 1.75rem; }
  .cs-hero { padding: calc(7.5rem + var(--header-extra)) 0 4rem; }
}


/* --------------------------------------------------------------------------
   /services/cyber-security-training/
   -------------------------------------------------------------------------- */
 /* ---- Intro: copy ---- */
.training-intro__copy {
  max-width: 760px;
}
.training-intro__copy p {
  color: var(--mid-grey);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.training-intro__copy p:last-of-type { margin-bottom: 0; }
.training-intro__copy a { color: var(--orange); font-weight: 600; }
 /* ---- Topics grid ---- */
.topics-grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.topics-grid .feature-card { padding: 1.75rem 1.5rem; }
.topics-grid .feature-card__icon { width: 48px; height: 48px; margin-bottom: 1rem; }
.topics-grid .feature-card__icon svg { width: 22px; height: 22px; }
.topics-grid .feature-card__title { font-size: 1.15rem; margin-bottom: 0.6rem; }
.topics-grid .feature-card__body { font-size: 0.92rem; line-height: 1.7; }
 @media (max-width: 1100px) {
  .topics-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .topics-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .topics-grid { grid-template-columns: 1fr; }
}
 /* ---- Philosophy statement (not a client testimonial) ---- */
.why-visual__kicker {
  display: block;
  position: relative;
  z-index: 1;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--light-grey);
  text-align: center;
  margin-bottom: 0.9rem;
}
 /* ---- FAQ ---- */
.training-faqs { max-width: 860px; margin-top: 2.5rem; }
.training-faq { border-bottom: 1px solid var(--light-grey); }
.training-faq:first-child { border-top: 1px solid var(--light-grey); }
.training-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 3rem 1.4rem 0;
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
  transition: color 0.2s ease;
}
.training-faq summary::-webkit-details-marker { display: none; }
.training-faq summary:hover { color: var(--orange); }
.training-faq summary::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.training-faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.training-faq__body { padding: 0 3rem 1.6rem 0; color: var(--mid-grey); line-height: 1.8; }


/* --------------------------------------------------------------------------
   /services/data-recovery/
   -------------------------------------------------------------------------- */
 /* ---- Lead statement + urgent call strip ---- */
.dr-lead { max-width: 780px; }
.dr-lead p {
  color: var(--mid-grey);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.dr-lead p:last-child { margin-bottom: 0; }
 .dr-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}
/* Long CTA label needs to wrap on narrow screens - .btn is nowrap by default */
.dr-actions .btn {
  white-space: normal;
  text-align: center;
  max-width: 100%;
}
.dr-urgent {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--off-white);
  border-left: 4px solid var(--orange);
  max-width: 780px;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.95rem;
}
.dr-urgent strong { color: var(--dark); }
.dr-urgent a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
}
.dr-urgent a:hover { text-decoration: underline; }
 /* ---- Device grid ---- */
.dr-devices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--light-grey);
  border: 1px solid var(--light-grey);
  margin-top: 2.5rem;
}
.dr-device {
  background: var(--white);
  padding: 2.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  transition: background 0.25s ease;
}
.dr-device:hover { background: var(--off-white); }
.dr-device svg {
  width: 40px;
  height: 40px;
  color: var(--orange);
}
.dr-device__label {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.4rem;
  color: var(--dark);
  margin: 0;
}
.dr-device__body {
  color: var(--mid-grey);
  line-height: 1.7;
  font-size: 0.92rem;
  margin: 0;
}
 /* ---- Who we help ---- */
.dr-who-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2.5rem;
}
.dr-who {
  background: var(--white);
  border: 1px solid var(--light-grey);
  border-top: 4px solid var(--orange);
  padding: 2.5rem 2rem;
}
.dr-who h3 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  color: var(--dark);
}
.dr-who p {
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.98rem;
}
 /* ---- Recovery times ---- */
.dr-times-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.dr-times-grid p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
 /* ---- FAQs ---- */
.dr-faqs { max-width: 860px; margin-top: 2.5rem; }
.dr-faq {
  border-bottom: 1px solid var(--light-grey);
}
.dr-faq:first-child { border-top: 1px solid var(--light-grey); }
.dr-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 3rem 1.4rem 0;
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
  transition: color 0.2s ease;
}
.dr-faq summary::-webkit-details-marker { display: none; }
.dr-faq summary:hover { color: var(--orange); }
.dr-faq summary::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.dr-faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.dr-faq__body {
  padding: 0 3rem 1.6rem 0;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.98rem;
}
 /* ---- Quote form ---- */
.dr-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}
.dr-form-aside p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.dr-form-aside .contact-detail { margin-bottom: 1.5rem; }
 @media (max-width: 900px) {
  .dr-times-grid,
  .dr-form-grid { grid-template-columns: 1fr; gap: 2rem; }
}


/* --------------------------------------------------------------------------
   /services/disposal-and-secure-erase/
   -------------------------------------------------------------------------- */
 /* ---- Lead statement ---- */
.se-lead { max-width: 780px; }
.se-lead p {
  color: var(--mid-grey);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.se-lead p:last-child { margin-bottom: 0; }
 .se-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}
/* Long CTA label needs to wrap on narrow screens - .btn is nowrap by default */
.se-actions .btn {
  white-space: normal;
  text-align: center;
  max-width: 100%;
}
.se-note {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--off-white);
  border-left: 4px solid var(--orange);
  max-width: 780px;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.95rem;
}
.se-note strong { color: var(--dark); }
.se-note a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
}
.se-note a:hover { text-decoration: underline; }
 /* ---- Two-column explainer ---- */
.se-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.se-split p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.se-split p:last-child { margin-bottom: 0; }
 /* ---- Myth vs fact panel ---- */
.se-myth {
  background: var(--white);
  border: 1px solid var(--light-grey);
  border-top: 4px solid var(--orange);
  padding: 2.5rem 2rem;
}
.se-myth + .se-myth { margin-top: 1.5rem; }
.se-myth__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 0.75rem;
}
.se-myth h3 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: var(--dark);
}
.se-myth p {
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.98rem;
  margin: 0;
}
 /* ---- Device grid ---- */
.se-devices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--light-grey);
  border: 1px solid var(--light-grey);
  margin-top: 2.5rem;
}
.se-device {
  background: var(--white);
  padding: 2.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  transition: background 0.25s ease;
}
.se-device:hover { background: var(--off-white); }
.se-device svg {
  width: 40px;
  height: 40px;
  color: var(--orange);
}
.se-device__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--dark);
  margin: 0;
}
.se-device__body {
  color: var(--mid-grey);
  line-height: 1.7;
  font-size: 0.92rem;
  margin: 0;
}
 /* ---- NAP / location block ---- */
.se-location {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--light-grey);
}
.se-location a.contact-detail { text-decoration: none; }
 /* ---- FAQs ---- */
.se-faqs { max-width: 860px; margin-top: 2.5rem; }
.se-faq { border-bottom: 1px solid var(--light-grey); }
.se-faq:first-child { border-top: 1px solid var(--light-grey); }
.se-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 3rem 1.4rem 0;
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
  transition: color 0.2s ease;
}
.se-faq summary::-webkit-details-marker { display: none; }
.se-faq summary:hover { color: var(--orange); }
.se-faq summary::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.se-faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.se-faq__body {
  padding: 0 3rem 1.6rem 0;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.98rem;
}
 /* ---- Quote form ---- */
.se-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}
.se-form-aside p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.se-form-aside .contact-detail { margin-bottom: 1.5rem; }
 /* Newsletter opt-in switch */
.se-optin {
  border-top: 1px solid var(--light-grey);
  margin-top: 2rem;
  padding-top: 1.75rem;
}
.se-optin__question {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--dark);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.se-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--mid-grey);
  font-weight: 600;
}
.se-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.se-switch__track {
  width: 52px;
  height: 28px;
  border-radius: 999px;
  background: var(--light-grey);
  position: relative;
  flex-shrink: 0;
  transition: background 0.25s ease;
}
.se-switch__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  transition: transform 0.25s ease;
}
.se-switch input:checked ~ .se-switch__track { background: var(--orange); }
.se-switch input:checked ~ .se-switch__track::after { transform: translateX(24px); }
.se-switch input:focus-visible ~ .se-switch__track {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}
.se-switch__off, .se-switch__on { transition: color 0.25s ease; }
.se-switch input:checked ~ .se-switch__on { color: var(--dark); }
.se-switch input:not(:checked) ~ .se-switch__off { color: var(--dark); }
.se-optin__smallprint {
  display: block;
  margin-top: 0.9rem;
  font-size: 0.8rem;
  color: var(--mid-grey);
}
 @media (max-width: 900px) {
  .se-split,
  .se-form-grid { grid-template-columns: 1fr; gap: 2rem; }
}


/* --------------------------------------------------------------------------
   /services/domain-name-registration/
   -------------------------------------------------------------------------- */
 /* ---- Lead statement ---- */
.dn-lead { max-width: 780px; }
.dn-lead p {
  color: var(--mid-grey);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.dn-lead p:last-child { margin-bottom: 0; }
 .dn-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}
/* Long CTA label needs to wrap on narrow screens - .btn is nowrap by default */
.dn-actions .btn {
  white-space: normal;
  text-align: center;
  max-width: 100%;
}
.dn-note {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--off-white);
  border-left: 4px solid var(--orange);
  max-width: 780px;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.95rem;
}
.dn-note strong { color: var(--dark); }
.dn-note a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
}
.dn-note a:hover { text-decoration: underline; }
 /* ---- Two-column explainer ---- */
.dn-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.dn-split p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.dn-split p:last-child { margin-bottom: 0; }
 /* ---- Mock browser address bar ---- */
.dn-browser {
  background: var(--white);
  border: 1px solid var(--light-grey);
  box-shadow: 0 10px 30px rgba(0,0,0,0.07);
}
.dn-browser__chrome {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--light-grey);
}
.dn-browser__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--light-grey);
}
.dn-browser__body { padding: 1.75rem 1.5rem 2rem; }
.dn-browser__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 2px solid var(--light-grey);
  border-radius: 999px;
  padding: 0.85rem 1.25rem;
  background: var(--off-white);
}
.dn-browser__bar svg {
  width: 18px;
  height: 18px;
  color: var(--mid-grey);
  flex-shrink: 0;
}
.dn-browser__url {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(0.95rem, 2.4vw, 1.15rem);
  color: var(--mid-grey);
  overflow-wrap: anywhere;
}
.dn-browser__url strong {
  color: var(--orange);
  font-weight: 700;
}
.dn-browser__caption {
  margin-top: 1.25rem;
  font-size: 0.85rem;
  color: var(--mid-grey);
  line-height: 1.7;
}
 /* ---- Tips ---- */
.dn-tips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--light-grey);
  border: 1px solid var(--light-grey);
  margin-top: 2.5rem;
}
.dn-tip {
  background: var(--white);
  padding: 2.5rem 2rem;
  transition: background 0.25s ease;
}
.dn-tip:hover { background: var(--off-white); }
.dn-tip__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--orange);
  margin-bottom: 1rem;
}
.dn-tip h3 {
  font-size: 1.15rem;
  margin-bottom: 0.85rem;
  color: var(--dark);
}
.dn-tip p {
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.98rem;
  margin: 0;
}
 /* ---- Quote form ---- */
.dn-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}
.dn-form-aside p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.dn-form-aside .contact-detail { margin-bottom: 1.5rem; }
 /* Newsletter opt-in switch */
.dn-optin {
  border-top: 1px solid var(--light-grey);
  margin-top: 2rem;
  padding-top: 1.75rem;
}
.dn-optin__question {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--dark);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.dn-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--mid-grey);
  font-weight: 600;
}
.dn-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.dn-switch__track {
  width: 52px;
  height: 28px;
  border-radius: 999px;
  background: var(--light-grey);
  position: relative;
  flex-shrink: 0;
  transition: background 0.25s ease;
}
.dn-switch__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  transition: transform 0.25s ease;
}
.dn-switch input:checked ~ .dn-switch__track { background: var(--orange); }
.dn-switch input:checked ~ .dn-switch__track::after { transform: translateX(24px); }
.dn-switch input:focus-visible ~ .dn-switch__track {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}
.dn-switch__off, .dn-switch__on { transition: color 0.25s ease; }
.dn-switch input:checked ~ .dn-switch__on { color: var(--dark); }
.dn-switch input:not(:checked) ~ .dn-switch__off { color: var(--dark); }
.dn-optin__smallprint {
  display: block;
  margin-top: 0.9rem;
  font-size: 0.8rem;
  color: var(--mid-grey);
}
 @media (max-width: 900px) {
  .dn-split,
  .dn-form-grid { grid-template-columns: 1fr; gap: 2rem; }
}
 /* ---- FAQs ---- */
.dn-faqs { max-width: 860px; margin-top: 2.5rem; }
.dn-faq { border-bottom: 1px solid var(--light-grey); }
.dn-faq:first-child { border-top: 1px solid var(--light-grey); }
.dn-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 3rem 1.4rem 0;
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
  transition: color 0.2s ease;
}
.dn-faq summary::-webkit-details-marker { display: none; }
.dn-faq summary:hover { color: var(--orange); }
.dn-faq summary::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.dn-faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.dn-faq__body {
  padding: 0 3rem 1.6rem 0;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.98rem;
}


/* --------------------------------------------------------------------------
   /services/
   -------------------------------------------------------------------------- */
 .services-intro { padding: calc(7rem + var(--header-extra)) 0 3rem; }
.services-intro h1 {
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  color: var(--dark);
  margin-bottom: 0.25rem;
}
.services-intro h1 span {
  display: block;
  color: var(--orange);
}
.services-intro p {
  color: var(--mid-grey);
  max-width: 100%;
  margin-top: 1.25rem;
  line-height: 1.8;
  font-size: 1.05rem;
}
 .services-panel { padding: 0 0 6rem; }
.services-panel__box {
  padding: 4rem 3rem;
}
.services-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 2rem;
}
/* Centre the lone final tile (Web Hosting) under the middle column */
.services-tiles > .services-tile:last-child { grid-column: 2; }
.services-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
}
.services-tile__icon {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: var(--orange);
  border: 5px solid var(--white);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  transition: transform 0.25s ease;
}
.services-tile:hover .services-tile__icon { transform: translateY(-4px); }
.services-tile__icon svg { width: 48px; height: 48px; color: var(--white); }
.services-tile__label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--dark);
  transition: color 0.25s ease;
}
.services-tile:hover .services-tile__label { color: var(--orange); }
.services-tile__desc {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--mid-grey);
  line-height: 1.5;
  margin-top: 0.4rem;
}
 @media (max-width: 800px) {
  .services-tiles { grid-template-columns: repeat(2, 1fr); }
  .services-tiles > .services-tile:last-child { grid-column: auto; }
  .services-panel__box { padding: 3rem 1.5rem; }
}
@media (max-width: 480px) {
  .services-tiles { grid-template-columns: 1fr; }
}




/* --------------------------------------------------------------------------
   /services/laptop-repair/
   -------------------------------------------------------------------------- */
 /* ---- Lead statement + call strip ---- */
.lr-lead { max-width: 780px; }
.lr-lead p {
  color: var(--mid-grey);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.lr-lead p:last-child { margin-bottom: 0; }
 .lr-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}
/* Long CTA label needs to wrap on narrow screens - .btn is nowrap by default */
.lr-actions .btn {
  white-space: normal;
  text-align: center;
  max-width: 100%;
}
.lr-callout {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--off-white);
  border-left: 4px solid var(--orange);
  max-width: 780px;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.95rem;
}
.lr-callout strong { color: var(--dark); }
.lr-callout a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
}
.lr-callout a:hover { text-decoration: underline; }
 /* ---- Repairs grid ---- */
.lr-repairs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
}
.lr-repair {
  flex: 1 1 220px;
  max-width: 300px;
  background: var(--white);
  border: 1px solid var(--light-grey);
  padding: 2.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  transition: background 0.25s ease;
}
.lr-repair:hover { background: var(--off-white); }
.lr-repair svg {
  width: 42px;
  height: 42px;
  color: var(--orange);
}
.lr-repair__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
}
.lr-repair__body {
  color: var(--mid-grey);
  line-height: 1.7;
  font-size: 0.92rem;
}
.lr-anything {
  margin-top: 2rem;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  color: var(--orange);
}
 /* ---- Brands / any laptop ---- */
.lr-brands-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.lr-brands-grid p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
 /* ---- FAQs ---- */
.lr-faqs { max-width: 860px; margin-top: 2.5rem; }
.lr-faq { border-bottom: 1px solid var(--light-grey); }
.lr-faq:first-child { border-top: 1px solid var(--light-grey); }
.lr-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 3rem 1.4rem 0;
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
  transition: color 0.2s ease;
}
.lr-faq summary::-webkit-details-marker { display: none; }
.lr-faq summary:hover { color: var(--orange); }
.lr-faq summary::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.lr-faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.lr-faq__body {
  padding: 0 3rem 1.6rem 0;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.98rem;
}
 /* ---- Quote form ---- */
.lr-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}
.lr-form-aside p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.lr-form-aside .contact-detail { margin-bottom: 1.5rem; }
 @media (max-width: 900px) {
  .lr-brands-grid,
  .lr-form-grid { grid-template-columns: 1fr; gap: 2rem; }
}


/* --------------------------------------------------------------------------
   /services/projects/
   -------------------------------------------------------------------------- */
 /* ================= PROJECTS PAGE - matches Guardian / Pay As You Go bespoke design ================= */
 .pr-hero {
  background: var(--dark);
  position: relative;
  overflow: hidden;
  padding: calc(8.5rem + var(--header-extra)) 0 8rem;
  clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
}
.pr-hero__watermark {
  position: absolute;
  top: 50%;
  right: -60px;
  transform: translateY(-50%);
  width: 480px;
  height: 480px;
  opacity: 0.07;
  color: var(--orange);
  pointer-events: none;
}
.pr-hero .breadcrumb a, .pr-hero .breadcrumb span { color: var(--light-grey); }
.pr-hero .breadcrumb .current { color: var(--orange); }
.pr-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(254,106,0,0.12);
  border: 1px solid rgba(254,106,0,0.4);
  color: var(--orange);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}
.pr-hero h1 {
  color: var(--white);
  font-size: clamp(2.8rem, 6vw, 5rem);
  max-width: 680px;
  margin-bottom: 1.25rem;
}
.pr-hero h1 span { color: var(--orange); }
.pr-hero p {
  color: var(--light-grey);
  max-width: 620px;
  font-size: 1.2rem;
  line-height: 1.8;
  margin-bottom: 2rem;
}
.pr-hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; position: relative; z-index: 1; }
 .pr-facts {
  max-width: 1200px;
  margin: -3.5rem auto 0;
  padding: 0 1.5rem;
  position: relative;
  z-index: 2;
}
.pr-facts__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--light-grey);
  box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}
.pr-facts__item {
  background: var(--white);
  padding: 1.5rem 1.25rem;
  text-align: center;
}
.pr-facts__item svg { color: var(--orange); width: 26px; height: 26px; margin-bottom: 0.6rem; }
.pr-facts__item span {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dark);
  line-height: 1.4;
}
 .pr-intro { padding: calc(7rem + var(--header-extra)) 0 5rem; }
.pr-intro__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3.5rem;
  align-items: center;
}
.pr-intro__card {
  background: var(--dark);
  border-radius: 16px;
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
}
.pr-intro__card::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -30%;
  width: 260px;
  height: 260px;
  background: var(--orange);
  opacity: 0.15;
  border-radius: 50%;
}
.pr-intro__card-label {
  color: var(--orange);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 1rem;
  position: relative;
}
.pr-intro__checklist { position: relative; }
.pr-intro__checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--light-grey);
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}
.pr-intro__checklist li:last-child { margin-bottom: 0; }
.pr-intro__checklist svg { color: var(--orange); width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
 .pr-tiers { background: var(--off-white); padding: 5rem 0; }
.pr-tier { margin-bottom: 4rem; }
.pr-tier:last-child { margin-bottom: 0; }
.pr-tier__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 2rem;
}
.pr-tier__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.5rem;
  color: var(--orange);
  opacity: 0.35;
  line-height: 1;
}
.pr-tier__title {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1.6rem;
  color: var(--dark);
}
.pr-tier__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.pr-tier__item {
  background: var(--white);
  border-left: 3px solid var(--orange);
  padding: 1.75rem;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.pr-tier__item h4 {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.1rem;
  color: var(--dark);
  margin-bottom: 0.6rem;
}
.pr-tier__item p {
  color: var(--mid-grey);
  font-size: 1rem;
  line-height: 1.7;
}
 .pr-cta {
  background: var(--orange);
  padding: 5rem 0;
  text-align: center;
}
.pr-cta h2 {
  color: var(--white);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 0.75rem;
}
.pr-cta p {
  color: rgba(255,255,255,0.85);
  max-width: 520px;
  margin: 0 auto 2rem;
  line-height: 1.7;
}
.pr-cta .btn--outline { color: var(--white); border-color: rgba(255,255,255,0.6); }
.pr-cta .btn--outline:hover { border-color: var(--dark); color: var(--dark); }
.pr-cta__note { margin-top: 1.5rem; }
.pr-cta__note a { color: var(--white); text-decoration: underline; font-size: 1rem; }
 /* ---- Testimonial box: compact prompt next to the buttons; opens a square panel on hover ---- */
body.p-services-projects .pr-testimonial-box{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: rgba(254,106,0,0.12);
  border: 1px solid rgba(254,106,0,0.4);
  border-left: 3px solid var(--orange);
  border-radius: 6px;
  padding: 0.7rem 1.25rem;
  cursor: pointer;
  transition: background 0.2s ease;
}
.pr-testimonial-box:hover { background: rgba(254,106,0,0.2); }
.pr-testimonial-box:focus { outline: none; }
 /* default prompt row */
.pr-testimonial-box__prompt {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.pr-testimonial-box__prompt svg { color: var(--orange); width: 26px; height: 26px; flex-shrink: 0; }
.pr-testimonial-box__label {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  color: var(--white);
  line-height: 1.25;
}
.pr-testimonial-box__hint {
  display: block;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.78rem;
  color: var(--light-grey);
  margin-top: 0.15rem;
}
 /* square panel that opens on hover */
.pr-testimonial-box__content {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  width: 320px;
  height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--white);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  overflow: visible;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.92);
  transform-origin: bottom left;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  z-index: 30;
}
.pr-testimonial-box__content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 24px;
  border: 9px solid transparent;
  border-top-color: var(--white);
}
.pr-testimonial-box:hover .pr-testimonial-box__content {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.pr-testimonial-box__quote-mark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.1rem;
  color: var(--orange);
  line-height: 1;
  display: block;
  margin-bottom: 0.2rem;
}
body.p-services-projects .pr-testimonial-box__content p{
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--dark);
  margin: 0;
}
body.p-services-projects .pr-testimonial-box__stars{
  display: flex;
  gap: 0.2rem;
  margin-top: 0.85rem;
  color: var(--orange);
}
.pr-testimonial-box__stars svg { width: 16px; height: 16px; }
 @media (max-width: 900px) {
  .pr-intro__grid { grid-template-columns: 1fr; }
  .pr-facts__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pr-facts__grid { grid-template-columns: 1fr; }
  .pr-facts { margin-top: -2.5rem; }
  .pr-hero { padding: calc(8rem + var(--header-extra)) 0 6rem; }
}
 /* Before / after on-site install comparison — two tiles focused on the
   same corner. */
.ba-compare {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
}
.ba-compare__tile {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 2px;
  background: var(--light-grey);
  box-shadow: 0 12px 30px rgba(15, 23, 32, 0.14);
}
.ba-compare__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.ba-compare__label {
  position: absolute;
  bottom: 0.75rem;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  padding: 0.4rem 0.9rem;
  border-radius: 2px;
}
.ba-compare__label--before { left: 0.75rem; background: rgba(15, 23, 32, 0.82); }
.ba-compare__label--after  { right: 0.75rem; background: var(--orange); }
@media (max-width: 560px) {
  .ba-compare { gap: 12px; }
  .ba-compare__label { font-size: 0.65rem; padding: 0.3rem 0.7rem; }
}


/* --------------------------------------------------------------------------
   /services/repairs-and-diagnostics/
   -------------------------------------------------------------------------- */
 /* ---- Lead statement + call strip ---- */
.rd-lead { max-width: 780px; }
.rd-lead p {
  color: var(--mid-grey);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.rd-lead p:last-child { margin-bottom: 0; }
 .rd-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}
.rd-actions .btn {
  white-space: normal;
  text-align: center;
  max-width: 100%;
}
.rd-callout {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--off-white);
  border-left: 4px solid var(--orange);
  max-width: 780px;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.95rem;
}
.rd-callout strong { color: var(--dark); }
.rd-callout a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
}
.rd-callout a:hover { text-decoration: underline; }
 /* ---- Faults grid ---- */
.rd-faults {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
}
.rd-fault {
  flex: 1 1 220px;
  max-width: 300px;
  background: var(--white);
  border: 1px solid var(--light-grey);
  padding: 2.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  transition: background 0.25s ease;
}
.rd-fault:hover { background: var(--off-white); }
.rd-fault svg {
  width: 42px;
  height: 42px;
  color: var(--orange);
}
.rd-fault__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
}
.rd-fault__body {
  color: var(--mid-grey);
  line-height: 1.7;
  font-size: 0.92rem;
}
.rd-anything {
  margin-top: 2rem;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  color: var(--orange);
}
 /* ---- Devices / any equipment ---- */
.rd-devices-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.rd-devices-grid p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
 /* ---- FAQs ---- */
.rd-faqs { max-width: 860px; margin-top: 2.5rem; }
.rd-faq { border-bottom: 1px solid var(--light-grey); }
.rd-faq:first-child { border-top: 1px solid var(--light-grey); }
.rd-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 3rem 1.4rem 0;
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
  transition: color 0.2s ease;
}
.rd-faq summary::-webkit-details-marker { display: none; }
.rd-faq summary:hover { color: var(--orange); }
.rd-faq summary::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.rd-faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.rd-faq__body {
  padding: 0 3rem 1.6rem 0;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.98rem;
}
 /* ---- Quote form ---- */
.rd-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}
.rd-form-aside p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.rd-form-aside .contact-detail { margin-bottom: 1.5rem; }
 @media (max-width: 900px) {
  .rd-devices-grid,
  .rd-form-grid { grid-template-columns: 1fr; gap: 2rem; }
}


/* --------------------------------------------------------------------------
   /services/server-monitoring/
   -------------------------------------------------------------------------- */
 /* ---- Lead statement ---- */
.sm-lead { max-width: 780px; }
.sm-lead p {
  color: var(--mid-grey);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.sm-lead p:last-child { margin-bottom: 0; }
 .sm-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}
/* Long CTA label needs to wrap on narrow screens - .btn is nowrap by default */
.sm-actions .btn {
  white-space: normal;
  text-align: center;
  max-width: 100%;
}
.sm-note {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--off-white);
  border-left: 4px solid var(--orange);
  max-width: 780px;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.95rem;
}
.sm-note strong { color: var(--dark); }
.sm-note a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
}
.sm-note a:hover { text-decoration: underline; }
 /* ---- What we monitor ---- */
.sm-monitor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 2.5rem;
  margin-top: 3rem;
}
.sm-monitor {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.sm-monitor__icon {
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  color: var(--orange);
  transition: transform 0.25s ease;
}
.sm-monitor:hover .sm-monitor__icon { transform: translateY(-4px); }
.sm-monitor__icon svg { width: 56px; height: 56px; }
.sm-monitor h3 {
  font-size: 1.2rem;
  margin-bottom: 0.85rem;
  color: var(--dark);
}
.sm-monitor p {
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.98rem;
  margin: 0;
}
.sm-monitor p a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.sm-monitor p a:hover { text-decoration: underline; }
 /* ---- Two-column explainer ---- */
.sm-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.sm-split p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.sm-split p:last-child { margin-bottom: 0; }
 /* ---- Mock status panel ---- */
.sm-panel {
  background: var(--white);
  border: 1px solid var(--light-grey);
  box-shadow: 0 10px 30px rgba(0,0,0,0.07);
}
.sm-panel__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--light-grey);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dark);
}
.sm-panel__pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
}
.sm-panel__rows { padding: 0.5rem 0; }
.sm-panel__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.5rem;
  border-bottom: 1px solid var(--light-grey);
  font-size: 0.95rem;
}
.sm-panel__row:last-child { border-bottom: 0; }
.sm-panel__label { color: var(--mid-grey); font-weight: 600; }
.sm-panel__value {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange);
  white-space: nowrap;
}
.sm-panel__caption {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--light-grey);
  background: var(--off-white);
  font-size: 0.85rem;
  color: var(--mid-grey);
  line-height: 1.7;
}
 /* ---- FAQs ---- */
.sm-faqs { max-width: 860px; margin-top: 2.5rem; }
.sm-faq { border-bottom: 1px solid var(--light-grey); }
.sm-faq:first-child { border-top: 1px solid var(--light-grey); }
.sm-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 3rem 1.4rem 0;
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
  transition: color 0.2s ease;
}
.sm-faq summary::-webkit-details-marker { display: none; }
.sm-faq summary:hover { color: var(--orange); }
.sm-faq summary::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.sm-faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.sm-faq__body {
  padding: 0 3rem 1.6rem 0;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.98rem;
}
 /* ---- Quote form ---- */
.sm-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}
.sm-form-aside p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.sm-form-aside .contact-detail { margin-bottom: 1.5rem; }
 /* Newsletter opt-in switch */
.sm-optin {
  border-top: 1px solid var(--light-grey);
  margin-top: 2rem;
  padding-top: 1.75rem;
}
.sm-optin__question {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--dark);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.sm-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--mid-grey);
  font-weight: 600;
}
.sm-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.sm-switch__track {
  width: 52px;
  height: 28px;
  border-radius: 999px;
  background: var(--light-grey);
  position: relative;
  flex-shrink: 0;
  transition: background 0.25s ease;
}
.sm-switch__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  transition: transform 0.25s ease;
}
.sm-switch input:checked ~ .sm-switch__track { background: var(--orange); }
.sm-switch input:checked ~ .sm-switch__track::after { transform: translateX(24px); }
.sm-switch input:focus-visible ~ .sm-switch__track {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}
.sm-switch__off, .sm-switch__on { transition: color 0.25s ease; }
.sm-switch input:checked ~ .sm-switch__on { color: var(--dark); }
.sm-switch input:not(:checked) ~ .sm-switch__off { color: var(--dark); }
.sm-optin__smallprint {
  display: block;
  margin-top: 0.9rem;
  font-size: 0.8rem;
  color: var(--mid-grey);
}
 @media (max-width: 900px) {
  .sm-monitor-grid { grid-template-columns: repeat(2, 1fr); }
  .sm-split,
  .sm-form-grid { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 520px) {
  .sm-monitor-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}


/* --------------------------------------------------------------------------
   /services/upgrades/
   -------------------------------------------------------------------------- */
 /* ---- Lead statement + call strip ---- */
.up-lead { max-width: 780px; }
.up-lead p {
  color: var(--mid-grey);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.up-lead p:last-child { margin-bottom: 0; }
 .up-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}
/* Long CTA label needs to wrap on narrow screens - .btn is nowrap by default */
.up-actions .btn {
  white-space: normal;
  text-align: center;
  max-width: 100%;
}
.up-callout {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--off-white);
  border-left: 4px solid var(--orange);
  max-width: 780px;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.95rem;
}
.up-callout strong { color: var(--dark); }
.up-callout a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
}
.up-callout a:hover { text-decoration: underline; }
 /* ---- Upgrades grid ---- */
.up-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--light-grey);
  border: 1px solid var(--light-grey);
  margin-top: 2.5rem;
}
.up-option {
  background: var(--white);
  padding: 2.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  transition: background 0.25s ease;
}
.up-option:hover { background: var(--off-white); }
.up-option svg {
  width: 46px;
  height: 46px;
  color: var(--orange);
}
.up-option__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--dark);
}
.up-option__body {
  color: var(--mid-grey);
  line-height: 1.7;
  font-size: 0.95rem;
}
.up-anything {
  margin-top: 2rem;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  color: var(--orange);
}
 /* ---- Signs you need an upgrade ---- */
.up-signs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.up-signs-grid p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
 /* ---- FAQs ---- */
.up-faqs { max-width: 860px; margin-top: 2.5rem; }
.up-faq { border-bottom: 1px solid var(--light-grey); }
.up-faq:first-child { border-top: 1px solid var(--light-grey); }
.up-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 3rem 1.4rem 0;
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
  transition: color 0.2s ease;
}
.up-faq summary::-webkit-details-marker { display: none; }
.up-faq summary:hover { color: var(--orange); }
.up-faq summary::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.up-faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.up-faq__body {
  padding: 0 3rem 1.6rem 0;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.98rem;
}
 /* ---- Quote form ---- */
.up-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}
.up-form-aside p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.up-form-aside .contact-detail { margin-bottom: 1.5rem; }
 @media (max-width: 900px) {
  .up-signs-grid,
  .up-form-grid { grid-template-columns: 1fr; gap: 2rem; }
}


/* --------------------------------------------------------------------------
   /services/web-hosting/
   -------------------------------------------------------------------------- */
 /* ---- Lead statement ---- */
.wh-lead { max-width: 780px; }
.wh-lead p {
  color: var(--mid-grey);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.wh-lead p:last-child { margin-bottom: 0; }
 .wh-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}
/* Long CTA label needs to wrap on narrow screens - .btn is nowrap by default */
.wh-actions .btn {
  white-space: normal;
  text-align: center;
  max-width: 100%;
}
.wh-note {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--off-white);
  border-left: 4px solid var(--orange);
  max-width: 780px;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.95rem;
}
.wh-note strong { color: var(--dark); }
.wh-note a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
}
.wh-note a:hover { text-decoration: underline; }
 /* ---- Two-column explainer ---- */
.wh-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.wh-split p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.wh-split p:last-child { margin-bottom: 0; }
 /* ---- Browser to server diagram ---- */
.wh-diagram {
  background: var(--white);
  border: 1px solid var(--light-grey);
  box-shadow: 0 10px 30px rgba(0,0,0,0.07);
  padding: 2.25rem 2rem;
}
.wh-hop {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.wh-hop__icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border: 2px solid var(--light-grey);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mid-grey);
}
.wh-hop__icon svg { width: 24px; height: 24px; }
.wh-hop--server .wh-hop__icon {
  border-color: var(--orange);
  background: var(--orange);
  color: var(--white);
}
.wh-hop__label {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.1rem;
  line-height: 1.2;
  color: var(--dark);
}
.wh-hop__sub {
  font-size: 0.85rem;
  color: var(--mid-grey);
  line-height: 1.6;
  margin-top: 0.15rem;
}
.wh-hop__arrow {
  margin: 0.6rem 0 0.6rem 25px;
  width: 2px;
  height: 26px;
  background: var(--light-grey);
  position: relative;
}
.wh-hop__arrow::after {
  content: '';
  position: absolute;
  left: -3px;
  bottom: 0;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: rotate(45deg);
}
.wh-diagram__caption {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--light-grey);
  font-size: 0.85rem;
  color: var(--mid-grey);
  line-height: 1.7;
}
 /* ---- Benefits ---- */
.wh-benefits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
}
.wh-benefit {
  flex: 1 1 260px;
  max-width: 340px;
  background: var(--white);
  border: 1px solid var(--light-grey);
  padding: 2.5rem 2rem;
  transition: background 0.25s ease;
}
.wh-benefit:hover { background: var(--off-white); }
.wh-benefit__icon {
  width: 44px;
  height: 44px;
  color: var(--orange);
  margin-bottom: 1.25rem;
}
.wh-benefit__icon svg { width: 100%; height: 100%; }
.wh-benefit h3 {
  font-size: 1.15rem;
  margin-bottom: 0.85rem;
  color: var(--dark);
}
.wh-benefit p {
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.98rem;
  margin: 0;
}
 /* ---- FAQs ---- */
.wh-faqs { max-width: 860px; margin-top: 2.5rem; }
.wh-faq { border-bottom: 1px solid var(--light-grey); }
.wh-faq:first-child { border-top: 1px solid var(--light-grey); }
.wh-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 3rem 1.4rem 0;
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
  transition: color 0.2s ease;
}
.wh-faq summary::-webkit-details-marker { display: none; }
.wh-faq summary:hover { color: var(--orange); }
.wh-faq summary::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.wh-faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.wh-faq__body {
  padding: 0 3rem 1.6rem 0;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.98rem;
}
 /* ---- Quote form ---- */
.wh-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}
.wh-form-aside p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.wh-form-aside .contact-detail { margin-bottom: 1.5rem; }
 /* Newsletter opt-in switch */
.wh-optin {
  border-top: 1px solid var(--light-grey);
  margin-top: 2rem;
  padding-top: 1.75rem;
}
.wh-optin__question {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--dark);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.wh-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--mid-grey);
  font-weight: 600;
}
.wh-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.wh-switch__track {
  width: 52px;
  height: 28px;
  border-radius: 999px;
  background: var(--light-grey);
  position: relative;
  flex-shrink: 0;
  transition: background 0.25s ease;
}
.wh-switch__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  transition: transform 0.25s ease;
}
.wh-switch input:checked ~ .wh-switch__track { background: var(--orange); }
.wh-switch input:checked ~ .wh-switch__track::after { transform: translateX(24px); }
.wh-switch input:focus-visible ~ .wh-switch__track {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}
.wh-switch__off, .wh-switch__on { transition: color 0.25s ease; }
.wh-switch input:checked ~ .wh-switch__on { color: var(--dark); }
.wh-switch input:not(:checked) ~ .wh-switch__off { color: var(--dark); }
.wh-optin__smallprint {
  display: block;
  margin-top: 0.9rem;
  font-size: 0.8rem;
  color: var(--mid-grey);
}
 @media (max-width: 900px) {
  .wh-split,
  .wh-form-grid { grid-template-columns: 1fr; gap: 2rem; }
}


/* --------------------------------------------------------------------------
   /sitemap/
   -------------------------------------------------------------------------- */
 .sitemap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.75rem;
  margin-top: 3rem;
  align-items: start;
}
.sitemap-card {
  background: var(--white);
  padding: 2rem 2.25rem 2.25rem;
  border: 1px solid var(--light-grey);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.sitemap-card:hover {
  border-color: var(--orange);
  box-shadow: 0 16px 32px rgba(0,0,0,0.09);
}
.sitemap-card h2 {
  font-size: 1.25rem;
  margin: 0 0 1.25rem;
  padding-bottom: 0.85rem;
  border-bottom: 2px solid var(--orange);
}
.sitemap-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sitemap-card li { margin: 0; }
.sitemap-card li + li { margin-top: 0.15rem; }
.sitemap-card a {
  display: block;
  padding: 0.4rem 0;
  color: var(--mid-grey);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: color 0.2s, padding-left 0.2s;
}
.sitemap-card a:hover,
.sitemap-card a:focus {
  color: var(--orange);
  padding-left: 0.35rem;
}


/* --------------------------------------------------------------------------
   /telecoms/
   -------------------------------------------------------------------------- */
   /* Centre the final orphan card (M2M) instead of leaving it left-aligned */
  .product-grid--centered {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .product-grid--centered .product-card {
    flex: 1 1 220px;
    max-width: 300px;
  }


/* --------------------------------------------------------------------------
   /telecoms/landline-phone-lines/
   -------------------------------------------------------------------------- */
 /* ---- Opening question ---- */
.ll-question {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  line-height: 1.6;
  color: var(--dark);
  max-width: 820px;
  margin-bottom: 2.5rem;
  padding-left: 1.5rem;
  border-left: 4px solid var(--orange);
}
 .ll-lead p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.ll-lead p:last-child { margin-bottom: 0; }
.ll-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}
 /* ---- Video facade - keeps YouTube off the page until asked ---- */
.video-embed {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--orange);
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-embed__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--orange);
  border: 0;
  cursor: pointer;
  text-align: center;
}
.video-embed__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.1rem, 3.2vw, 1.9rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
}
.video-embed__play {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, transform 0.25s ease;
}
.video-embed__poster:hover .video-embed__play,
.video-embed__poster:focus-visible .video-embed__play {
  background: #fff;
  transform: translateX(-50%) scale(1.08);
}
.video-embed__play svg { fill: #fff; margin-left: 4px; transition: fill 0.25s ease; }
.video-embed__poster:hover .video-embed__play svg,
.video-embed__poster:focus-visible .video-embed__play svg { fill: var(--orange); }
 /* ---- Types of phone lines - orange cards ---- */
.ll-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.ll-type {
  background: var(--orange);
  padding: 2.25rem 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ll-type:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(254,106,0,0.32);
}
.ll-type__icon {
  width: 56px;
  height: 56px;
  border: 2px solid rgba(255,255,255,0.85);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  flex-shrink: 0;
}
.ll-type__icon svg {
  width: 28px;
  height: 28px;
  color: #fff;
}
.ll-type__name {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.5rem;
  line-height: 1;
  color: #fff;
  margin-bottom: 0.55rem;
}
.ll-type__meta {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(255,255,255,0.8);
  margin-bottom: 1rem;
}
.ll-type__body {
  color: #fff;
  line-height: 1.8;
  font-size: 0.95rem;
  margin: 0;
}
 /* ---- Switch-off note ---- */
.ll-note {
  background: var(--white);
  border-left: 4px solid var(--orange);
  padding: 2rem 2.25rem;
  max-width: 860px;
  margin-top: 2rem;
}
.ll-note h3 {
  font-size: 1.2rem;
  margin-bottom: 0.9rem;
  color: var(--dark);
}
.ll-note p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin: 0 0 1rem;
}
.ll-note p:last-child { margin-bottom: 0; }
.ll-note a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
}
.ll-note a:hover { text-decoration: underline; }
 /* ---- Digital switchover callout ---- */
.ll-switchover {
  background: var(--dark);
  padding: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.ll-switchover p {
  color: rgba(255,255,255,0.85);
  line-height: 1.8;
  margin: 0;
}
.ll-switchover__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
}
 /* ---- Two-column layouts ---- */
.ll-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.ll-split p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.ll-split p:last-child { margin-bottom: 0; }
 /* ---- FAQs ---- */
.ll-faqs { max-width: 860px; margin-top: 2.5rem; }
.ll-faq { border-bottom: 1px solid var(--light-grey); }
.ll-faq:first-child { border-top: 1px solid var(--light-grey); }
.ll-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 3rem 1.4rem 0;
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
  transition: color 0.2s ease;
}
.ll-faq summary::-webkit-details-marker { display: none; }
.ll-faq summary:hover { color: var(--orange); }
.ll-faq summary::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.ll-faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.ll-faq__body {
  padding: 0 3rem 1.6rem 0;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.98rem;
}
 /* ---- Quote form ---- */
.ll-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}
.ll-form-aside p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.ll-form-aside .contact-detail { margin-bottom: 1.5rem; }
 @media (max-width: 900px) {
  .ll-split,
  .ll-form-grid { grid-template-columns: 1fr; gap: 2rem; }
}


/* --------------------------------------------------------------------------
   /telecoms/leased-lines/
   -------------------------------------------------------------------------- */
 /* ---- Opening question ---- */
.ll-question {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  line-height: 1.6;
  color: var(--dark);
  max-width: 820px;
  margin-bottom: 2.5rem;
  padding-left: 1.5rem;
  border-left: 4px solid var(--orange);
}
 .ll-lead p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.ll-lead p:last-child { margin-bottom: 0; }
.ll-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}
 /* ---- Video facade - keeps YouTube off the page until asked ---- */
.video-embed {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--orange);
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-embed__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--orange);
  border: 0;
  cursor: pointer;
  text-align: center;
}
.video-embed__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.1rem, 3.2vw, 1.9rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
}
.video-embed__play {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, transform 0.25s ease;
}
.video-embed__poster:hover .video-embed__play,
.video-embed__poster:focus-visible .video-embed__play {
  background: #fff;
  transform: translateX(-50%) scale(1.08);
}
.video-embed__play svg { fill: #fff; margin-left: 4px; transition: fill 0.25s ease; }
.video-embed__poster:hover .video-embed__play svg,
.video-embed__poster:focus-visible .video-embed__play svg { fill: var(--orange); }
 /* ---- Benefits - orange cards ---- */
.ll-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.ll-benefit {
  background: var(--orange);
  padding: 2.25rem 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ll-benefit:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(254,106,0,0.32);
}
.ll-benefit__icon {
  width: 56px;
  height: 56px;
  border: 2px solid rgba(255,255,255,0.85);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  flex-shrink: 0;
}
.ll-benefit__icon svg {
  width: 28px;
  height: 28px;
  color: #fff;
}
.ll-benefit__name {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.5rem;
  line-height: 1.05;
  color: #fff;
  margin-bottom: 0.85rem;
}
.ll-benefit__body {
  color: #fff;
  line-height: 1.8;
  font-size: 0.95rem;
  margin: 0;
}
 /* ---- Advice note ---- */
body.p-telecoms-leased-lines .ll-note{
  background: var(--white);
  border-left: 4px solid var(--orange);
  padding: 2rem 2.25rem;
  max-width: 860px;
  margin-top: 2.5rem;
}
.ll-note h3 {
  font-size: 1.2rem;
  margin-bottom: 0.9rem;
  color: var(--dark);
}
.ll-note p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin: 0 0 1rem;
}
.ll-note p:last-child { margin-bottom: 0; }
.ll-note a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
}
.ll-note a:hover { text-decoration: underline; }
 /* ---- Two-column layouts ---- */
.ll-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.ll-split p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.ll-split p:last-child { margin-bottom: 0; }
 /* ---- Quote form ---- */
.ll-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}
.ll-form-aside p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.ll-form-aside .contact-detail { margin-bottom: 1.5rem; }
 /* ---- Contract length radio choices ---- */
.ll-choice-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.75rem;
}
.ll-choice {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.9rem 1rem;
  border: 1px solid var(--light-grey);
  background: var(--white);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--dark);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.ll-choice input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.ll-choice:hover { border-color: var(--orange); }
.ll-choice:has(input:checked) {
  border-color: var(--orange);
  background: var(--orange);
  color: #fff;
}
.ll-choice:has(input:focus-visible) {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}
 /* ---- Newsletter opt-in switch ---- */
.ll-optin {
  border-top: 1px solid var(--light-grey);
  margin-top: 2rem;
  padding-top: 1.75rem;
}
.ll-optin__question {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--dark);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.ll-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--mid-grey);
  font-weight: 600;
}
.ll-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.ll-switch__track {
  width: 52px;
  height: 28px;
  border-radius: 999px;
  background: var(--light-grey);
  position: relative;
  flex-shrink: 0;
  transition: background 0.25s ease;
}
.ll-switch__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  transition: transform 0.25s ease;
}
.ll-switch input:checked ~ .ll-switch__track { background: var(--orange); }
.ll-switch input:checked ~ .ll-switch__track::after { transform: translateX(24px); }
.ll-switch input:focus-visible ~ .ll-switch__track {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}
.ll-switch__off, .ll-switch__on { transition: color 0.25s ease; }
.ll-switch input:checked ~ .ll-switch__on { color: var(--dark); }
.ll-switch input:not(:checked) ~ .ll-switch__off { color: var(--dark); }
.ll-optin__smallprint {
  display: block;
  margin-top: 0.9rem;
  font-size: 0.8rem;
  color: var(--mid-grey);
}
 /* ---- Hero price anchor ---- */
.hero-price {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: rgba(255,255,255,0.85);
  max-width: 620px;
  margin-top: -0.5rem;
  margin-bottom: 1.75rem;
}
.hero-price strong { color: #fff; }
 /* ---- Comparison table ---- */
.ll-compare-wrap {
  margin-top: 2.5rem;
  overflow-x: auto;
}
.ll-compare {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}
.ll-compare caption { text-align: left; margin-bottom: 1rem; color: var(--mid-grey); }
.ll-compare th, .ll-compare td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--light-grey);
  text-align: left;
  font-size: 0.92rem;
  color: var(--mid-grey);
  line-height: 1.6;
}
.ll-compare thead th {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dark);
  border-bottom: 2px solid var(--light-grey);
}
.ll-compare tbody th {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--dark);
  white-space: nowrap;
}
.ll-compare .ll-compare__highlight {
  background: rgba(254,106,0,0.07);
  color: var(--dark);
  font-weight: 600;
  border-left: 3px solid var(--orange);
  border-right: 3px solid var(--orange);
}
.ll-compare thead .ll-compare__highlight {
  background: var(--orange);
  color: #fff;
  border-left: 3px solid var(--orange);
  border-right: 3px solid var(--orange);
}
 /* ---- FAQs ---- */
.ll-faqs { max-width: 860px; margin-top: 2.5rem; }
.ll-faq { border-bottom: 1px solid var(--light-grey); }
.ll-faq:first-child { border-top: 1px solid var(--light-grey); }
.ll-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 3rem 1.4rem 0;
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
  transition: color 0.2s ease;
}
.ll-faq summary::-webkit-details-marker { display: none; }
.ll-faq summary:hover { color: var(--orange); }
.ll-faq summary::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.ll-faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.ll-faq__body {
  padding: 0 3rem 1.6rem 0;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.98rem;
}
 @media (max-width: 900px) {
  .ll-split,
  .ll-form-grid { grid-template-columns: 1fr; gap: 2rem; }
}


/* --------------------------------------------------------------------------
   /telecoms/m2m-sim-cards/
   -------------------------------------------------------------------------- */
 /* ---- Opening question ---- */
.sim-question {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  line-height: 1.6;
  color: var(--dark);
  max-width: 820px;
  margin-bottom: 2.5rem;
  padding-left: 1.5rem;
  border-left: 4px solid var(--orange);
}
.sim-lead p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.sim-lead p:last-child { margin-bottom: 0; }
 /* ---- FAQ / Essentials accordion ---- */
.m2m-faqs { max-width: 860px; margin-top: 2.5rem; }
.m2m-faq { border-bottom: 1px solid var(--light-grey); }
.m2m-faq:first-child { border-top: 1px solid var(--light-grey); }
.m2m-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 3rem 1.4rem 0;
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
  transition: color 0.2s ease;
}
.m2m-faq summary::-webkit-details-marker { display: none; }
.m2m-faq summary:hover { color: var(--orange); }
.m2m-faq summary::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.m2m-faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.m2m-faq__body {
  padding: 0 3rem 1.6rem 0;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.98rem;
}
 /* ---- Benefit cards - orange ---- */
.m2m-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.m2m-benefit {
  background: var(--orange);
  padding: 2rem 1.9rem 2.1rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.m2m-benefit:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(254,106,0,0.32);
}
.m2m-benefit__icon {
  width: 52px;
  height: 52px;
  border: 2px solid rgba(255,255,255,0.85);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}
.m2m-benefit__icon svg { width: 26px; height: 26px; color: #fff; }
.m2m-benefit h3 {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.35rem;
  line-height: 1.05;
  color: #fff;
  margin-bottom: 0.6rem;
}
.m2m-benefit p {
  color: #fff;
  line-height: 1.75;
  font-size: 0.95rem;
  margin: 0;
}
 /* ---- Two-column layouts ---- */
.sim-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
 /* ---- Quote form ---- */
.sim-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}
.sim-form-aside p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.sim-form-aside .contact-detail { margin-bottom: 1.5rem; }
 /* ---- Radio group ---- */
.sim-radio-group { display: grid; gap: 0.75rem; }
.sim-radio {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--light-grey);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  font-size: 0.95rem;
  color: var(--dark);
  line-height: 1.5;
}
.sim-radio:hover { border-color: var(--orange); }
.sim-radio input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.sim-radio__dot {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  border: 2px solid var(--light-grey);
  border-radius: 50%;
  position: relative;
  transition: border-color 0.2s ease;
}
.sim-radio__dot::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--orange);
  transform: scale(0);
  transition: transform 0.2s ease;
}
.sim-radio input:checked ~ .sim-radio__dot { border-color: var(--orange); }
.sim-radio input:checked ~ .sim-radio__dot::after { transform: scale(1); }
.sim-radio:has(input:checked) { border-color: var(--orange); background: var(--off-white); }
.sim-radio input:focus-visible ~ .sim-radio__dot {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
 /* ---- Newsletter opt-in switch ---- */
.sim-optin {
  border-top: 1px solid var(--light-grey);
  margin-top: 2rem;
  padding-top: 1.75rem;
}
.sim-optin__question {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--dark);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.sim-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--mid-grey);
  font-weight: 600;
}
.sim-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.sim-switch__track {
  width: 52px;
  height: 28px;
  border-radius: 999px;
  background: var(--light-grey);
  position: relative;
  flex-shrink: 0;
  transition: background 0.25s ease;
}
.sim-switch__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  transition: transform 0.25s ease;
}
.sim-switch input:checked ~ .sim-switch__track { background: var(--orange); }
.sim-switch input:checked ~ .sim-switch__track::after { transform: translateX(24px); }
.sim-switch input:focus-visible ~ .sim-switch__track {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}
.sim-switch__off, .sim-switch__on { transition: color 0.25s ease; }
.sim-switch input:checked ~ .sim-switch__on { color: var(--dark); }
.sim-switch input:not(:checked) ~ .sim-switch__off { color: var(--dark); }
.sim-optin__smallprint {
  display: block;
  margin-top: 0.9rem;
  font-size: 0.8rem;
  color: var(--mid-grey);
}
 @media (max-width: 900px) {
  .sim-split,
  .sim-form-grid { grid-template-columns: 1fr; gap: 2rem; }
}


/* --------------------------------------------------------------------------
   /telecoms/microsoft-teams-direct-routing/
   -------------------------------------------------------------------------- */
 /* ---- Opening question ---- */
.bb-question {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  line-height: 1.6;
  color: var(--dark);
  max-width: 820px;
  margin-bottom: 2.5rem;
  padding-left: 1.5rem;
  border-left: 4px solid var(--orange);
}
 .bb-lead p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.bb-lead p:last-child { margin-bottom: 0; }
.bb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}
 /* ---- Headline price ---- */
.bb-price {
  margin-top: 2.25rem;
  padding-top: 2rem;
  border-top: 1px solid var(--light-grey);
}
.bb-price__label {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mid-grey);
  margin-bottom: 0.5rem;
}
.bb-price__figure {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 7vw, 4rem);
  line-height: 1;
  color: var(--orange);
}
.bb-price__unit {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.32em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: baseline;
}
.bb-price__note {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-top: 1rem;
  max-width: 480px;
}
.bb-price__note a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
}
.bb-price__note a:hover { text-decoration: underline; }
 /* ---- Benefit cards - orange ---- */
.dr-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.dr-benefit {
  background: var(--orange);
  padding: 2rem 1.9rem 2.1rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.dr-benefit:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(254,106,0,0.32);
}
.dr-benefit__icon {
  width: 52px;
  height: 52px;
  border: 2px solid rgba(255,255,255,0.85);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.35rem;
  flex-shrink: 0;
}
.dr-benefit__icon svg {
  width: 26px;
  height: 26px;
  color: #fff;
}
.dr-benefit__name {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.4rem;
  line-height: 1.05;
  color: #fff;
  margin-bottom: 0.6rem;
}
.dr-benefit__body {
  color: #fff;
  line-height: 1.7;
  font-size: 0.95rem;
  margin: 0;
}
.dr-benefit__body a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
}
 /* ---- Intro layout (image placeholder removed - single column) ---- */
body.p-telecoms-microsoft-teams-direct-routing .bb-split{
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: center;
  max-width: 820px;
}
.bb-split p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.bb-split p:last-child { margin-bottom: 0; }
 /* ---- Comparison table ---- */
.dr-compare {
  margin-top: 2.5rem;
  overflow-x: auto;
}
.dr-compare table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}
.dr-compare th, .dr-compare td {
  text-align: left;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--light-grey);
  color: var(--mid-grey);
  line-height: 1.6;
}
.dr-compare thead th {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--dark);
}
.dr-compare tbody th {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--dark);
  white-space: nowrap;
}
.dr-compare td.is-us { color: var(--dark); font-weight: 600; }
 /* ---- FAQ accordion ---- */
.dr-faqs { max-width: 860px; margin-top: 2.5rem; }
.dr-faq { border-bottom: 1px solid var(--light-grey); }
.dr-faq:first-child { border-top: 1px solid var(--light-grey); }
.dr-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 3rem 1.4rem 0;
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
  transition: color 0.2s ease;
}
.dr-faq summary::-webkit-details-marker { display: none; }
.dr-faq summary:hover { color: var(--orange); }
.dr-faq summary::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.dr-faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.dr-faq__body {
  padding: 0 3rem 1.6rem 0;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.98rem;
}
 /* ---- Quote form ---- */
.bb-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}
.bb-form-aside p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.bb-form-aside .contact-detail { margin-bottom: 1.5rem; }
 /* ---- Newsletter opt-in switch ---- */
.bb-optin {
  border-top: 1px solid var(--light-grey);
  margin-top: 2rem;
  padding-top: 1.75rem;
}
.bb-optin__question {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--dark);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.bb-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--mid-grey);
  font-weight: 600;
}
.bb-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.bb-switch__track {
  width: 52px;
  height: 28px;
  border-radius: 999px;
  background: var(--light-grey);
  position: relative;
  flex-shrink: 0;
  transition: background 0.25s ease;
}
.bb-switch__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  transition: transform 0.25s ease;
}
.bb-switch input:checked ~ .bb-switch__track { background: var(--orange); }
.bb-switch input:checked ~ .bb-switch__track::after { transform: translateX(24px); }
.bb-switch input:focus-visible ~ .bb-switch__track {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}
.bb-switch__off, .bb-switch__on { transition: color 0.25s ease; }
.bb-switch input:checked ~ .bb-switch__on { color: var(--dark); }
.bb-switch input:not(:checked) ~ .bb-switch__off { color: var(--dark); }
.bb-optin__smallprint {
  display: block;
  margin-top: 0.9rem;
  font-size: 0.8rem;
  color: var(--mid-grey);
}
 @media (max-width: 900px) {
  .bb-split,
  .bb-form-grid { grid-template-columns: 1fr; gap: 2rem; }
}


/* --------------------------------------------------------------------------
   /telecoms/mifi/
   -------------------------------------------------------------------------- */
 /* ---- Opening question ---- */
.mifi-question {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  line-height: 1.6;
  color: var(--dark);
  max-width: 820px;
  margin-bottom: 2.5rem;
  padding-left: 1.5rem;
  border-left: 4px solid var(--orange);
}
.mifi-lead p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.mifi-lead p:last-child { margin-bottom: 0; }
.mifi-lead p a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
}
.mifi-lead p a:hover { text-decoration: underline; }
.mifi-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}
 /* ---- "What is MiFi?" callout ---- */
.mifi-what {
  margin-top: 2.25rem;
  padding-top: 2rem;
  border-top: 1px solid var(--light-grey);
}
.mifi-what p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.mifi-what p:last-child { margin-bottom: 0; }
 /* ---- Benefit boxes - solid orange grid ---- */
.mifi-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.mifi-benefit {
  background: var(--orange);
  padding: 2rem 2rem 2.15rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.mifi-benefit:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(254,106,0,0.32);
}
.mifi-benefit__icon {
  width: 52px;
  height: 52px;
  border: 2px solid rgba(255,255,255,0.85);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.4rem;
  flex-shrink: 0;
}
.mifi-benefit__icon svg { width: 26px; height: 26px; color: #fff; }
.mifi-benefit h3 {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.3rem;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 0.6rem;
}
.mifi-benefit p {
  color: #fff;
  line-height: 1.7;
  font-size: 0.95rem;
  margin: 0;
}
 /* ---- Three promises ---- */
.mifi-promises {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--light-grey);
  border: 1px solid var(--light-grey);
}
.mifi-promise {
  background: var(--white);
  padding: 2.5rem 2rem;
  transition: background 0.25s ease;
}
.mifi-promise:hover { background: var(--off-white); }
.mifi-promise__tick {
  width: 44px;
  height: 44px;
  border: 2px solid var(--orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.mifi-promise__tick svg { width: 22px; height: 22px; color: var(--orange); }
.mifi-promise h3 {
  font-size: 1.2rem;
  margin-bottom: 0.7rem;
  color: var(--dark);
}
.mifi-promise p {
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.95rem;
  margin: 0;
}
 /* ---- Video facade - keeps YouTube off the page until asked ---- */
.video-embed {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--orange);
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-embed__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--orange);
  border: 0;
  cursor: pointer;
  text-align: center;
}
.video-embed__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.1rem, 3.2vw, 1.9rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
}
.video-embed__play {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, transform 0.25s ease;
}
.video-embed__poster:hover .video-embed__play,
.video-embed__poster:focus-visible .video-embed__play {
  background: #fff;
  transform: translateX(-50%) scale(1.08);
}
.video-embed__play svg { fill: #fff; margin-left: 4px; transition: fill 0.25s ease; }
.video-embed__poster:hover .video-embed__play svg,
.video-embed__poster:focus-visible .video-embed__play svg { fill: var(--orange); }
 /* ---- Two-column layouts ---- */
.mifi-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
 /* ---- Quote form ---- */
.mifi-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}
.mifi-form-aside p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.mifi-form-aside .contact-detail { margin-bottom: 1.5rem; }
 /* ---- Radio group ---- */
.mifi-radio-group { display: grid; gap: 0.75rem; }
.mifi-radio {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--light-grey);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  font-size: 0.95rem;
  color: var(--dark);
  line-height: 1.5;
}
.mifi-radio:hover { border-color: var(--orange); }
.mifi-radio input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.mifi-radio__dot {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  border: 2px solid var(--light-grey);
  border-radius: 50%;
  position: relative;
  transition: border-color 0.2s ease;
}
.mifi-radio__dot::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--orange);
  transform: scale(0);
  transition: transform 0.2s ease;
}
.mifi-radio input:checked ~ .mifi-radio__dot { border-color: var(--orange); }
.mifi-radio input:checked ~ .mifi-radio__dot::after { transform: scale(1); }
.mifi-radio:has(input:checked) { border-color: var(--orange); background: var(--off-white); }
.mifi-radio input:focus-visible ~ .mifi-radio__dot {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
 /* ---- Newsletter opt-in switch ---- */
.mifi-optin {
  border-top: 1px solid var(--light-grey);
  margin-top: 2rem;
  padding-top: 1.75rem;
}
.mifi-optin__question {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--dark);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.mifi-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--mid-grey);
  font-weight: 600;
}
.mifi-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.mifi-switch__track {
  width: 52px;
  height: 28px;
  border-radius: 999px;
  background: var(--light-grey);
  position: relative;
  flex-shrink: 0;
  transition: background 0.25s ease;
}
.mifi-switch__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  transition: transform 0.25s ease;
}
.mifi-switch input:checked ~ .mifi-switch__track { background: var(--orange); }
.mifi-switch input:checked ~ .mifi-switch__track::after { transform: translateX(24px); }
.mifi-switch input:focus-visible ~ .mifi-switch__track {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}
.mifi-switch__off, .mifi-switch__on { transition: color 0.25s ease; }
.mifi-switch input:checked ~ .mifi-switch__on { color: var(--dark); }
.mifi-switch input:not(:checked) ~ .mifi-switch__off { color: var(--dark); }
.mifi-optin__smallprint {
  display: block;
  margin-top: 0.9rem;
  font-size: 0.8rem;
  color: var(--mid-grey);
}
 /* ---- Box/plan comparison - orange cards ---- */
.mifi-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.mifi-type {
  background: var(--orange);
  padding: 2.25rem 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.mifi-type:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(254,106,0,0.32);
}
.mifi-type__icon {
  width: 56px;
  height: 56px;
  border: 2px solid rgba(255,255,255,0.85);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  flex-shrink: 0;
}
.mifi-type__icon svg { width: 28px; height: 28px; color: #fff; }
.mifi-type__name {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.4rem;
  line-height: 1;
  color: #fff;
  margin-bottom: 0.55rem;
}
.mifi-type__meta {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(255,255,255,0.8);
  margin-bottom: 1rem;
}
.mifi-type__body {
  color: #fff;
  line-height: 1.8;
  font-size: 0.95rem;
  margin: 0;
}
 /* ---- Advice note ---- */
.mifi-note {
  background: var(--white);
  border-left: 4px solid var(--orange);
  padding: 1.75rem 2rem;
  margin-top: 2rem;
}
.mifi-note h3 { font-size: 1.15rem; margin-bottom: 0.6rem; color: var(--dark); }
.mifi-note p { color: var(--mid-grey); line-height: 1.8; margin-bottom: 0.5rem; }
.mifi-note p:last-child { margin-bottom: 0; }
 /* ---- Network partners - coloured logo blocks ---- */
.mifi-networks {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.mifi-network {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  height: 90px;
  padding: 0 2rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.9rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.mifi-network:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(60,60,59,0.15);
}
.mifi-network--o2 { background: #0019a5; color: #fff; }
.mifi-network--ee { background: #007b85; color: #fce300; }
.mifi-network--vodafone { background: #e60000; color: #fff; }
.mifi-network--three { background: #000; color: #fff; font-size: 2.4rem; }
.mifi-network--ofcom { background: #fff; color: #e4007c; }
.mifi-networks__note {
  color: var(--mid-grey);
  font-size: 0.85rem;
  margin-top: 1.5rem;
}
 /* ---- FAQs ---- */
.mifi-faqs { max-width: 860px; margin-top: 2.5rem; }
.mifi-faq { border-bottom: 1px solid var(--light-grey); }
.mifi-faq:first-child { border-top: 1px solid var(--light-grey); }
.mifi-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 3rem 1.4rem 0;
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
  transition: color 0.2s ease;
}
.mifi-faq summary::-webkit-details-marker { display: none; }
.mifi-faq summary:hover { color: var(--orange); }
.mifi-faq summary::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.mifi-faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.mifi-faq__body {
  padding: 0 3rem 1.6rem 0;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.98rem;
}
 @media (max-width: 900px) {
  .mifi-split,
  .mifi-form-grid { grid-template-columns: 1fr; gap: 2rem; }
}


/* --------------------------------------------------------------------------
   /telecoms/mobile-phone-deals/
   -------------------------------------------------------------------------- */
 /* ---- Opening question ---- */
.mp-question {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  line-height: 1.6;
  color: var(--dark);
  max-width: 820px;
  margin-bottom: 2.5rem;
  padding-left: 1.5rem;
  border-left: 4px solid var(--orange);
}
 .mp-lead p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.mp-lead p:last-child { margin-bottom: 0; }
.mp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}
 /* ---- Video facade - keeps YouTube off the page until asked ---- */
.video-embed {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--orange);
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-embed__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--orange);
  border: 0;
  cursor: pointer;
  text-align: center;
}
.video-embed__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.1rem, 3.2vw, 1.9rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
}
.video-embed__play {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, transform 0.25s ease;
}
.video-embed__poster:hover .video-embed__play,
.video-embed__poster:focus-visible .video-embed__play {
  background: #fff;
  transform: translateX(-50%) scale(1.08);
}
.video-embed__play svg { fill: #fff; margin-left: 4px; transition: fill 0.25s ease; }
.video-embed__poster:hover .video-embed__play svg,
.video-embed__poster:focus-visible .video-embed__play svg { fill: var(--orange); }
 /* ---- Selling points ---- */
.mp-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--light-grey);
  border: 1px solid var(--light-grey);
  margin-top: 2.5rem;
}
.mp-point {
  background: var(--white);
  padding: 2.5rem 2rem;
  transition: background 0.25s ease;
}
.mp-point:hover { background: var(--off-white); }
.mp-point__icon {
  width: 44px;
  height: 44px;
  border: 2px solid var(--orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.mp-point__icon svg {
  width: 22px;
  height: 22px;
  color: var(--orange);
}
.mp-point h3 {
  font-size: 1.2rem;
  margin-bottom: 0.7rem;
  color: var(--dark);
}
.mp-point p {
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.95rem;
  margin: 0;
}
 /* ---- Phone brand range ---- */
.mp-brands {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.mp-brand {
  background: var(--white);
  border: 1px solid var(--light-grey);
  padding: 2.5rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.mp-brand:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(60,60,59,0.12);
  border-color: var(--orange);
}
.mp-brand__phone {
  width: 72px;
  height: 128px;
  border: 2.5px solid var(--dark);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  color: var(--dark);
  transition: border-color 0.25s ease, color 0.25s ease;
}
.mp-brand:hover .mp-brand__phone { border-color: var(--orange); color: var(--orange); }
.mp-brand__phone svg { width: 34px; height: 34px; }
.mp-brand__name {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.25rem;
  line-height: 1.1;
  color: var(--dark);
  margin-bottom: 0.4rem;
}
.mp-brand__note {
  color: var(--mid-grey);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}
/* ---- Advice note ---- */
.mp-note {
  background: var(--white);
  border-left: 4px solid var(--orange);
  padding: 2rem 2.25rem;
  max-width: 860px;
  margin-top: 2.5rem;
}
.mp-note h3 {
  font-size: 1.2rem;
  margin-bottom: 0.9rem;
  color: var(--dark);
}
.mp-note p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin: 0 0 1rem;
}
.mp-note p:last-child { margin-bottom: 0; }
.mp-note a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
}
.mp-note a:hover { text-decoration: underline; }
 /* ---- Two-column layouts ---- */
.mp-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.mp-split p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.mp-split p:last-child { margin-bottom: 0; }
 /* ---- FAQs ---- */
.mp-faqs { max-width: 860px; margin-top: 2.5rem; }
.mp-faq { border-bottom: 1px solid var(--light-grey); }
.mp-faq:first-child { border-top: 1px solid var(--light-grey); }
.mp-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 3rem 1.4rem 0;
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
  transition: color 0.2s ease;
}
.mp-faq summary::-webkit-details-marker { display: none; }
.mp-faq summary:hover { color: var(--orange); }
.mp-faq summary::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.mp-faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.mp-faq__body {
  padding: 0 3rem 1.6rem 0;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.98rem;
}
 /* ---- Quote form ---- */
.mp-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}
.mp-form-aside p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.mp-form-aside .contact-detail { margin-bottom: 1.5rem; }
 /* ---- Radio question groups ---- */
.mp-fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 1.75rem;
}
.mp-fieldset__legend {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--dark);
  line-height: 1.5;
  margin-bottom: 0.9rem;
  padding: 0;
}
.mp-radio {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.35rem 0;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--mid-grey);
  line-height: 1.5;
}
.mp-radio input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.mp-radio__dot {
  width: 20px;
  height: 20px;
  border: 2px solid var(--light-grey);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.2s ease;
}
.mp-radio__dot::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--orange);
  transform: scale(0);
  transition: transform 0.2s ease;
}
.mp-radio:hover .mp-radio__dot { border-color: var(--orange); }
.mp-radio input:checked ~ .mp-radio__dot { border-color: var(--orange); }
.mp-radio input:checked ~ .mp-radio__dot::after { transform: scale(1); }
.mp-radio input:checked ~ .mp-radio__label { color: var(--dark); font-weight: 600; }
.mp-radio input:focus-visible ~ .mp-radio__dot {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}
 /* ---- Newsletter opt-in switch ---- */
.mp-optin {
  border-top: 1px solid var(--light-grey);
  margin-top: 2rem;
  padding-top: 1.75rem;
}
.mp-optin__question {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--dark);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.mp-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--mid-grey);
  font-weight: 600;
}
.mp-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.mp-switch__track {
  width: 52px;
  height: 28px;
  border-radius: 999px;
  background: var(--light-grey);
  position: relative;
  flex-shrink: 0;
  transition: background 0.25s ease;
}
.mp-switch__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  transition: transform 0.25s ease;
}
.mp-switch input:checked ~ .mp-switch__track { background: var(--orange); }
.mp-switch input:checked ~ .mp-switch__track::after { transform: translateX(24px); }
.mp-switch input:focus-visible ~ .mp-switch__track {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}
.mp-switch__off, .mp-switch__on { transition: color 0.25s ease; }
.mp-switch input:checked ~ .mp-switch__on { color: var(--dark); }
.mp-switch input:not(:checked) ~ .mp-switch__off { color: var(--dark); }
.mp-optin__smallprint {
  display: block;
  margin-top: 0.9rem;
  font-size: 0.8rem;
  color: var(--mid-grey);
}
 @media (max-width: 900px) {
  .mp-split,
  .mp-form-grid { grid-template-columns: 1fr; gap: 2rem; }
}


/* --------------------------------------------------------------------------
   /telecoms/services-telecoms-broadband/
   -------------------------------------------------------------------------- */
 /* ---- Opening question ---- */
.bb-question {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  line-height: 1.6;
  color: var(--dark);
  max-width: 820px;
  margin-bottom: 2.5rem;
  padding-left: 1.5rem;
  border-left: 4px solid var(--orange);
}
 .bb-lead p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.bb-lead p:last-child { margin-bottom: 0; }
.bb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}
 /* ---- Headline price ---- */
.bb-price {
  margin-top: 2.25rem;
  padding-top: 2rem;
  border-top: 1px solid var(--light-grey);
}
body.p-telecoms-services-telecoms-broadband .bb-price__label{
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mid-grey);
  margin-bottom: 0.5rem;
}
body.p-telecoms-services-telecoms-broadband .bb-price__figure{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3rem, 8vw, 4.5rem);
  line-height: 1;
  color: var(--orange);
}
body.p-telecoms-services-telecoms-broadband .bb-price__unit{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.3em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: baseline;
}
body.p-telecoms-services-telecoms-broadband .bb-price__note{
  color: var(--mid-grey);
  line-height: 1.8;
  margin-top: 1rem;
  max-width: 460px;
}
.bb-price__note a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
}
.bb-price__note a:hover { text-decoration: underline; }
 /* ---- Video facade - keeps YouTube off the page until asked ---- */
.video-embed {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--orange);
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-embed__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--orange);
  border: 0;
  cursor: pointer;
  text-align: center;
}
.video-embed__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.1rem, 3.2vw, 1.9rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
}
.video-embed__play {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, transform 0.25s ease;
}
.video-embed__poster:hover .video-embed__play,
.video-embed__poster:focus-visible .video-embed__play {
  background: #fff;
  transform: translateX(-50%) scale(1.08);
}
.video-embed__play svg { fill: #fff; margin-left: 4px; transition: fill 0.25s ease; }
.video-embed__poster:hover .video-embed__play svg,
.video-embed__poster:focus-visible .video-embed__play svg { fill: var(--orange); }
 /* ---- Three promises ---- */
.bb-promises {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--light-grey);
  border: 1px solid var(--light-grey);
}
.bb-promise {
  background: var(--white);
  padding: 2.5rem 2rem;
  transition: background 0.25s ease;
}
.bb-promise:hover { background: var(--off-white); }
.bb-promise__tick {
  width: 44px;
  height: 44px;
  border: 2px solid var(--orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.bb-promise__tick svg {
  width: 22px;
  height: 22px;
  color: var(--orange);
}
.bb-promise h3 {
  font-size: 1.2rem;
  margin-bottom: 0.7rem;
  color: var(--dark);
}
.bb-promise p {
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.95rem;
  margin: 0;
}
 /* ---- Connection types - orange cards ---- */
.bb-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.bb-type {
  background: var(--orange);
  padding: 2.25rem 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.bb-type:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(254,106,0,0.32);
}
.bb-type__icon {
  width: 56px;
  height: 56px;
  border: 2px solid rgba(255,255,255,0.85);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  flex-shrink: 0;
}
.bb-type__icon svg {
  width: 28px;
  height: 28px;
  color: #fff;
}
.bb-type__name {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.5rem;
  line-height: 1;
  color: #fff;
  margin-bottom: 0.55rem;
}
.bb-type__meta {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(255,255,255,0.8);
  margin-bottom: 1rem;
}
.bb-type__body {
  color: #fff;
  line-height: 1.8;
  font-size: 0.95rem;
  margin: 0;
}
 /* ---- Package pricing table ---- */
.bb-pricing-wrap { overflow-x: auto; margin-top: 2.5rem; }
.bb-pricing {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  min-width: 520px;
}
.bb-pricing caption { text-align: left; margin-bottom: 1rem; color: var(--mid-grey); }
.bb-pricing th, .bb-pricing td {
  text-align: left;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--light-grey);
  font-size: 0.98rem;
}
.bb-pricing thead th {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 900;
  color: var(--dark);
  background: var(--off-white);
}
.bb-pricing tbody th { font-weight: 700; color: var(--dark); }
.bb-pricing tbody tr:hover { background: var(--off-white); }
.bb-pricing__price {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.25rem;
  color: var(--orange);
  white-space: nowrap;
}
.bb-pricing__tag {
  display: inline-block;
  margin-left: 0.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mid-grey);
  border: 1px solid var(--light-grey);
  border-radius: 4px;
  padding: 0.15rem 0.4rem;
  vertical-align: middle;
}
.bb-pricing__note {
  margin-top: 1.25rem;
  font-size: 0.9rem;
  color: var(--mid-grey);
  max-width: 860px;
}
.bb-pricing__note a { color: var(--orange); font-weight: 700; text-decoration: none; }
.bb-pricing__note a:hover { text-decoration: underline; }
 /* ---- Advice note ---- */
.bb-note {
  background: var(--white);
  border-left: 4px solid var(--orange);
  padding: 2rem 2.25rem;
  max-width: 860px;
  margin-top: 2rem;
}
.bb-note h3 {
  font-size: 1.2rem;
  margin-bottom: 0.9rem;
  color: var(--dark);
}
.bb-note p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin: 0 0 1rem;
}
.bb-note p:last-child { margin-bottom: 0; }
.bb-note a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
}
.bb-note a:hover { text-decoration: underline; }
 /* ---- Two-column layouts ---- */
.bb-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.bb-split p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.bb-split p:last-child { margin-bottom: 0; }
 /* ---- Quote form ---- */
.bb-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}
.bb-form-aside p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.bb-form-aside .contact-detail { margin-bottom: 1.5rem; }
 /* ---- Newsletter opt-in switch ---- */
.bb-optin {
  border-top: 1px solid var(--light-grey);
  margin-top: 2rem;
  padding-top: 1.75rem;
}
.bb-optin__question {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--dark);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.bb-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--mid-grey);
  font-weight: 600;
}
.bb-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.bb-switch__track {
  width: 52px;
  height: 28px;
  border-radius: 999px;
  background: var(--light-grey);
  position: relative;
  flex-shrink: 0;
  transition: background 0.25s ease;
}
.bb-switch__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  transition: transform 0.25s ease;
}
.bb-switch input:checked ~ .bb-switch__track { background: var(--orange); }
.bb-switch input:checked ~ .bb-switch__track::after { transform: translateX(24px); }
.bb-switch input:focus-visible ~ .bb-switch__track {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}
.bb-switch__off, .bb-switch__on { transition: color 0.25s ease; }
.bb-switch input:checked ~ .bb-switch__on { color: var(--dark); }
.bb-switch input:not(:checked) ~ .bb-switch__off { color: var(--dark); }
.bb-optin__smallprint {
  display: block;
  margin-top: 0.9rem;
  font-size: 0.8rem;
  color: var(--mid-grey);
}
 /* ---- FAQs ---- */
.bb-faqs { max-width: 860px; margin-top: 2.5rem; }
.bb-faq { border-bottom: 1px solid var(--light-grey); }
.bb-faq:first-child { border-top: 1px solid var(--light-grey); }
.bb-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 3rem 1.4rem 0;
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
  transition: color 0.2s ease;
}
.bb-faq summary::-webkit-details-marker { display: none; }
.bb-faq summary:hover { color: var(--orange); }
.bb-faq summary::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.bb-faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.bb-faq__body {
  padding: 0 3rem 1.6rem 0;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.98rem;
}
 @media (max-width: 900px) {
  .bb-split,
  .bb-form-grid { grid-template-columns: 1fr; gap: 2rem; }
}


/* --------------------------------------------------------------------------
   /telecoms/telephone-systems/
   -------------------------------------------------------------------------- */
 /* ---- Pricing table ---- */
.tps-pricing {
  margin-top: 2.5rem;
  display: grid;
  gap: 2.75rem;
}
.tps-pricing__group-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  font-size: clamp(1.2rem, 2.8vw, 1.5rem);
  color: var(--dark);
  margin-bottom: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--orange);
}
.tps-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--light-grey);
}
.tps-price-row:last-child { border-bottom: 0; }
.tps-price-row__name {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--dark);
  line-height: 1.5;
}
.tps-price-row__name span {
  display: block;
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--mid-grey);
  margin-top: 0.25rem;
}
.tps-price-row__price {
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}
.tps-price-row__figure {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.9rem;
  color: var(--orange);
  line-height: 1;
}
.tps-price-row__figure.is-poa { font-size: 1.3rem; }
.tps-price-row__unit {
  display: block;
  font-size: 0.78rem;
  color: var(--mid-grey);
  margin-top: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.tps-pricing__note {
  margin-top: 2rem;
  font-size: 0.9rem;
  color: var(--mid-grey);
  line-height: 1.8;
}
.tps-pricing__note a { color: var(--orange); font-weight: 700; text-decoration: none; }
.tps-pricing__note a:hover { text-decoration: underline; }
@media (max-width: 520px) {
  .tps-price-row { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .tps-price-row__price { text-align: left; }
}
 /* ---- Opening question ---- */
.bb-question {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  line-height: 1.6;
  color: var(--dark);
  max-width: 820px;
  margin-bottom: 2.5rem;
  padding-left: 1.5rem;
  border-left: 4px solid var(--orange);
}
 .bb-lead p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.bb-lead p:last-child { margin-bottom: 0; }
.bb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}
 /* ---- Video facade - keeps YouTube off the page until asked ---- */
.video-embed {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--orange);
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-embed__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--orange);
  border: 0;
  cursor: pointer;
  text-align: center;
}
.video-embed__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.1rem, 3.2vw, 1.9rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
}
.video-embed__play {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, transform 0.25s ease;
}
.video-embed__poster:hover .video-embed__play,
.video-embed__poster:focus-visible .video-embed__play {
  background: #fff;
  transform: translateX(-50%) scale(1.08);
}
.video-embed__play svg { fill: #fff; margin-left: 4px; transition: fill 0.25s ease; }
.video-embed__poster:hover .video-embed__play svg,
.video-embed__poster:focus-visible .video-embed__play svg { fill: var(--orange); }
.video-transcript {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--mid-grey);
}
.video-transcript summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--dark);
}
.video-transcript summary:hover { color: var(--orange); }
.video-transcript p { margin-top: 0.75rem; line-height: 1.8; }
 /* ---- Benefit cards - orange ---- */
.voip-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.voip-benefit {
  background: var(--orange);
  padding: 2rem 1.9rem 2.1rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.voip-benefit:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(254,106,0,0.32);
}
.voip-benefit__icon {
  width: 52px;
  height: 52px;
  border: 2px solid rgba(255,255,255,0.85);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.35rem;
  flex-shrink: 0;
}
.voip-benefit__icon svg {
  width: 26px;
  height: 26px;
  color: #fff;
}
.voip-benefit__name {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.4rem;
  line-height: 1.05;
  color: #fff;
  margin-bottom: 0.6rem;
}
.voip-benefit__body {
  color: #fff;
  line-height: 1.7;
  font-size: 0.95rem;
  margin: 0;
}
.voip-benefit__body a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
}
 /* ---- As used by logo strip ---- */
.clients {
  text-align: center;
}
.clients__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.5rem 3.5rem;
  margin-top: 2.5rem;
}
.clients__logo {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  color: var(--mid-grey);
  opacity: 0.85;
  transition: color 0.25s ease, opacity 0.25s ease;
}
.clients__logo:hover { color: var(--dark); opacity: 1; }
.clients__source {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--mid-grey);
}
 /* ---- Two-column layouts ---- */
.bb-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.bb-split p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.bb-split p:last-child { margin-bottom: 0; }
 /* ---- FAQs ---- */
.tps-faqs { max-width: 860px; margin-top: 2.5rem; }
.tps-faq { border-bottom: 1px solid var(--light-grey); }
.tps-faq:first-child { border-top: 1px solid var(--light-grey); }
.tps-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 3rem 1.4rem 0;
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
  transition: color 0.2s ease;
}
.tps-faq summary::-webkit-details-marker { display: none; }
.tps-faq summary:hover { color: var(--orange); }
.tps-faq summary::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.tps-faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.tps-faq__body {
  padding: 0 3rem 1.6rem 0;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.98rem;
}
 /* ---- Quote form ---- */
.bb-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}
.bb-form-aside p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.bb-form-aside .contact-detail { margin-bottom: 1.5rem; }
 /* ---- Phone type radio group ---- */
.bb-radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.bb-radio {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--dark);
  font-weight: 600;
}
.bb-radio input { accent-color: var(--orange); width: 18px; height: 18px; }
 /* ---- Newsletter opt-in switch ---- */
.bb-optin {
  border-top: 1px solid var(--light-grey);
  margin-top: 2rem;
  padding-top: 1.75rem;
}
.bb-optin__question {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--dark);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.bb-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--mid-grey);
  font-weight: 600;
}
.bb-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.bb-switch__track {
  width: 52px;
  height: 28px;
  border-radius: 999px;
  background: var(--light-grey);
  position: relative;
  flex-shrink: 0;
  transition: background 0.25s ease;
}
.bb-switch__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  transition: transform 0.25s ease;
}
.bb-switch input:checked ~ .bb-switch__track { background: var(--orange); }
.bb-switch input:checked ~ .bb-switch__track::after { transform: translateX(24px); }
.bb-switch input:focus-visible ~ .bb-switch__track {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}
.bb-switch__off, .bb-switch__on { transition: color 0.25s ease; }
.bb-switch input:checked ~ .bb-switch__on { color: var(--dark); }
.bb-switch input:not(:checked) ~ .bb-switch__off { color: var(--dark); }
.bb-optin__smallprint {
  display: block;
  margin-top: 0.9rem;
  font-size: 0.8rem;
  color: var(--mid-grey);
}
 @media (max-width: 900px) {
  .bb-split,
  .bb-form-grid { grid-template-columns: 1fr; gap: 2rem; }
}


/* --------------------------------------------------------------------------
   /telecoms/unlimited-data-sim-mobile/
   -------------------------------------------------------------------------- */
 /* ---- Opening question ---- */
.sim-question {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  line-height: 1.6;
  color: var(--dark);
  max-width: 820px;
  margin-bottom: 2.5rem;
  padding-left: 1.5rem;
  border-left: 4px solid var(--orange);
}
.sim-lead p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.sim-lead p:last-child { margin-bottom: 0; }
.sim-lead p a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
}
.sim-lead p a:hover { text-decoration: underline; }
.sim-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}
 /* ---- Headline price ---- */
.sim-price {
  margin-top: 2.25rem;
  padding-top: 2rem;
  border-top: 1px solid var(--light-grey);
}
.sim-price__label {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mid-grey);
  margin-bottom: 0.5rem;
}
.sim-price__figure {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3rem, 8vw, 4.5rem);
  line-height: 1;
  color: var(--orange);
}
.sim-price__unit {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.3em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: baseline;
}
.sim-price__vat {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--mid-grey);
  margin-left: 0.4rem;
}
 /* ---- Per-network pricing ---- */
.sim-price__networks {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  max-width: 340px;
}
.sim-price__networks li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--light-grey);
}
.sim-price__network {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.05rem;
  color: var(--dark);
}
.sim-price__amount {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.35rem;
  color: var(--orange);
  white-space: nowrap;
}
.sim-price__per {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.5em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mid-grey);
  margin-left: 0.15rem;
}
 /* ---- The three "unlimited" ticks ---- */
.sim-includes {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}
.sim-includes li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.15rem;
  color: var(--dark);
}
.sim-includes__tick {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: 2px solid var(--orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sim-includes__tick svg { width: 16px; height: 16px; color: var(--orange); }
 /* ---- Video facade - keeps YouTube off the page until asked ---- */
.video-embed {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--orange);
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-embed__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--orange);
  border: 0;
  cursor: pointer;
  text-align: center;
}
.video-embed__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.1rem, 3.2vw, 1.9rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
}
.video-embed__play {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, transform 0.25s ease;
}
.video-embed__poster:hover .video-embed__play,
.video-embed__poster:focus-visible .video-embed__play {
  background: #fff;
  transform: translateX(-50%) scale(1.08);
}
.video-embed__play svg { fill: #fff; margin-left: 4px; transition: fill 0.25s ease; }
.video-embed__poster:hover .video-embed__play svg,
.video-embed__poster:focus-visible .video-embed__play svg { fill: var(--orange); }
 /* ---- Three promises ---- */
.sim-promises {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--light-grey);
  border: 1px solid var(--light-grey);
}
.sim-promise {
  background: var(--white);
  padding: 2.5rem 2rem;
  transition: background 0.25s ease;
}
.sim-promise:hover { background: var(--off-white); }
.sim-promise__tick {
  width: 44px;
  height: 44px;
  border: 2px solid var(--orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.sim-promise__tick svg { width: 22px; height: 22px; color: var(--orange); }
.sim-promise h3 {
  font-size: 1.2rem;
  margin-bottom: 0.7rem;
  color: var(--dark);
}
.sim-promise p {
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.95rem;
  margin: 0;
}
 /* ---- Plan option cards - orange ---- */
.sim-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.sim-plan {
  background: var(--orange);
  padding: 2.25rem 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sim-plan:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(254,106,0,0.32);
}
.sim-plan__icon {
  width: 56px;
  height: 56px;
  border: 2px solid rgba(255,255,255,0.85);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  flex-shrink: 0;
}
.sim-plan__icon svg { width: 28px; height: 28px; color: #fff; }
.sim-plan__name {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.5rem;
  line-height: 1;
  color: #fff;
  margin-bottom: 0.55rem;
}
.sim-plan__meta {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(255,255,255,0.8);
  margin-bottom: 1rem;
}
.sim-plan__body {
  color: #fff;
  line-height: 1.8;
  font-size: 0.95rem;
  margin: 0;
}
 /* ---- Two-column layouts ---- */
.sim-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
 /* ---- Quote form ---- */
.sim-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}
.sim-form-aside p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.sim-form-aside .contact-detail { margin-bottom: 1.5rem; }
 /* ---- Radio group ---- */
.sim-radio-group { display: grid; gap: 0.75rem; }
.sim-radio {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--light-grey);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  font-size: 0.95rem;
  color: var(--dark);
  line-height: 1.5;
}
.sim-radio:hover { border-color: var(--orange); }
.sim-radio input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.sim-radio__dot {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  border: 2px solid var(--light-grey);
  border-radius: 50%;
  position: relative;
  transition: border-color 0.2s ease;
}
.sim-radio__dot::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--orange);
  transform: scale(0);
  transition: transform 0.2s ease;
}
.sim-radio input:checked ~ .sim-radio__dot { border-color: var(--orange); }
.sim-radio input:checked ~ .sim-radio__dot::after { transform: scale(1); }
.sim-radio:has(input:checked) { border-color: var(--orange); background: var(--off-white); }
.sim-radio input:focus-visible ~ .sim-radio__dot {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
 /* ---- Newsletter opt-in switch ---- */
.sim-optin {
  border-top: 1px solid var(--light-grey);
  margin-top: 2rem;
  padding-top: 1.75rem;
}
.sim-optin__question {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--dark);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.sim-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--mid-grey);
  font-weight: 600;
}
.sim-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.sim-switch__track {
  width: 52px;
  height: 28px;
  border-radius: 999px;
  background: var(--light-grey);
  position: relative;
  flex-shrink: 0;
  transition: background 0.25s ease;
}
.sim-switch__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  transition: transform 0.25s ease;
}
.sim-switch input:checked ~ .sim-switch__track { background: var(--orange); }
.sim-switch input:checked ~ .sim-switch__track::after { transform: translateX(24px); }
.sim-switch input:focus-visible ~ .sim-switch__track {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}
.sim-switch__off, .sim-switch__on { transition: color 0.25s ease; }
.sim-switch input:checked ~ .sim-switch__on { color: var(--dark); }
.sim-switch input:not(:checked) ~ .sim-switch__off { color: var(--dark); }
.sim-optin__smallprint {
  display: block;
  margin-top: 0.9rem;
  font-size: 0.8rem;
  color: var(--mid-grey);
}
 /* ---- Network / regulator logos ---- */
.sim-networks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
  max-width: 960px;
}
.sim-network {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  padding: 1rem;
  background: var(--white);
  border: 1px solid var(--light-grey);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.9rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sim-network:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(60,60,59,0.15);
}
.sim-network--o2 { background: #0019a5; color: #fff; }
.sim-network--ee { background: #007b85; color: #fce300; }
.sim-network--vodafone { background: #e60000; color: #fff; }
.sim-network--three { background: #000; color: #fff; font-size: 2.4rem; }
.sim-network--ofcom { background: #fff; color: #e4007c; }
.sim-networks__note {
  color: var(--mid-grey);
  font-size: 0.85rem;
  margin-top: 1.5rem;
}
 /* ---- FAQs ---- */
.sim-faqs { max-width: 860px; margin-top: 2.5rem; }
.sim-faq { border-bottom: 1px solid var(--light-grey); }
.sim-faq:first-child { border-top: 1px solid var(--light-grey); }
.sim-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 3rem 1.4rem 0;
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
  transition: color 0.2s ease;
}
.sim-faq summary::-webkit-details-marker { display: none; }
.sim-faq summary:hover { color: var(--orange); }
.sim-faq summary::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.sim-faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.sim-faq__body {
  padding: 0 3rem 1.6rem 0;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.98rem;
}
 @media (max-width: 900px) {
  .sim-split,
  .sim-form-grid { grid-template-columns: 1fr; gap: 2rem; }
}


/* --------------------------------------------------------------------------
   /telecoms/voip/
   -------------------------------------------------------------------------- */
 /* ---- Opening question ---- */
.bb-question {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  line-height: 1.6;
  color: var(--dark);
  max-width: 820px;
  margin-bottom: 2.5rem;
  padding-left: 1.5rem;
  border-left: 4px solid var(--orange);
}
 .bb-lead p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.bb-lead p:last-child { margin-bottom: 0; }
.bb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}
 /* ---- Video facade - keeps YouTube off the page until asked ---- */
.video-embed {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--orange);
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-embed__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--orange);
  border: 0;
  cursor: pointer;
  text-align: center;
}
.video-embed__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.1rem, 3.2vw, 1.9rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
}
.video-embed__play {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, transform 0.25s ease;
}
.video-embed__poster:hover .video-embed__play,
.video-embed__poster:focus-visible .video-embed__play {
  background: #fff;
  transform: translateX(-50%) scale(1.08);
}
.video-embed__play svg { fill: #fff; margin-left: 4px; transition: fill 0.25s ease; }
.video-embed__poster:hover .video-embed__play svg,
.video-embed__poster:focus-visible .video-embed__play svg { fill: var(--orange); }
 /* ---- Benefit cards - orange ---- */
.voip-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.voip-benefit {
  background: var(--orange);
  padding: 2rem 1.9rem 2.1rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.voip-benefit:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(254,106,0,0.32);
}
.voip-benefit__icon {
  width: 52px;
  height: 52px;
  border: 2px solid rgba(255,255,255,0.85);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.35rem;
  flex-shrink: 0;
}
.voip-benefit__icon svg {
  width: 26px;
  height: 26px;
  color: #fff;
}
.voip-benefit__name {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.4rem;
  line-height: 1.05;
  color: #fff;
  margin-bottom: 0.6rem;
}
.voip-benefit__body {
  color: #fff;
  line-height: 1.7;
  font-size: 0.95rem;
  margin: 0;
}
.voip-benefit__body a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
}
 /* ---- Recommended platform callout ---- */
.bb-callout {
  background: var(--white);
  border: 2px solid var(--orange);
  border-radius: 4px;
  padding: 2.25rem 2.5rem;
  max-width: 900px;
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.bb-callout__text { flex: 1 1 420px; }
.bb-callout__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.8rem;
  color: var(--orange);
  margin-bottom: 0.5rem;
}
.bb-callout h3 {
  font-size: 1.25rem;
  color: var(--dark);
  margin-bottom: 0.6rem;
}
.bb-callout p {
  color: var(--mid-grey);
  line-height: 1.7;
  margin: 0;
}
 /* ---- Resilience / requirements list ---- */
.bb-checklist {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.bb-checklist li {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  color: var(--mid-grey);
  line-height: 1.7;
}
.bb-checklist svg {
  flex-shrink: 0;
  margin-top: 0.2rem;
  color: var(--orange);
}
.bb-checklist strong { color: var(--dark); }
 /* ---- Advice / FAQ note ---- */
body.p-telecoms-voip .bb-note{
  background: var(--white);
  border-left: 4px solid var(--orange);
  padding: 2rem 2.25rem;
  max-width: 860px;
  margin-top: 2.5rem;
}
.bb-note h3 {
  font-size: 1.2rem;
  margin-bottom: 0.9rem;
  color: var(--dark);
}
.bb-note p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin: 0 0 1rem;
}
.bb-note p:last-child { margin-bottom: 0; }
.bb-note a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
}
.bb-note a:hover { text-decoration: underline; }
 /* ---- Two-column layouts ---- */
.bb-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.bb-split p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.bb-split p:last-child { margin-bottom: 0; }
 /* ---- FAQs ---- */
.tps-faqs { max-width: 860px; margin-top: 2.5rem; }
.tps-faq { border-bottom: 1px solid var(--light-grey); }
.tps-faq:first-child { border-top: 1px solid var(--light-grey); }
.tps-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 3rem 1.4rem 0;
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
  transition: color 0.2s ease;
}
.tps-faq summary::-webkit-details-marker { display: none; }
.tps-faq summary:hover { color: var(--orange); }
.tps-faq summary::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.tps-faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.tps-faq__body {
  padding: 0 3rem 1.6rem 0;
  color: var(--mid-grey);
  line-height: 1.8;
  font-size: 0.98rem;
}
 /* ---- Quote form ---- */
.bb-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}
.bb-form-aside p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.bb-form-aside .contact-detail { margin-bottom: 1.5rem; }
 /* ---- Phone type radio group ---- */
.bb-radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.bb-radio {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--dark);
  font-weight: 600;
}
.bb-radio input { accent-color: var(--orange); width: 18px; height: 18px; }
 /* ---- Newsletter opt-in switch ---- */
.bb-optin {
  border-top: 1px solid var(--light-grey);
  margin-top: 2rem;
  padding-top: 1.75rem;
}
.bb-optin__question {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--dark);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.bb-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--mid-grey);
  font-weight: 600;
}
.bb-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.bb-switch__track {
  width: 52px;
  height: 28px;
  border-radius: 999px;
  background: var(--light-grey);
  position: relative;
  flex-shrink: 0;
  transition: background 0.25s ease;
}
.bb-switch__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  transition: transform 0.25s ease;
}
.bb-switch input:checked ~ .bb-switch__track { background: var(--orange); }
.bb-switch input:checked ~ .bb-switch__track::after { transform: translateX(24px); }
.bb-switch input:focus-visible ~ .bb-switch__track {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}
.bb-switch__off, .bb-switch__on { transition: color 0.25s ease; }
.bb-switch input:checked ~ .bb-switch__on { color: var(--dark); }
.bb-switch input:not(:checked) ~ .bb-switch__off { color: var(--dark); }
.bb-optin__smallprint {
  display: block;
  margin-top: 0.9rem;
  font-size: 0.8rem;
  color: var(--mid-grey);
}
 @media (max-width: 900px) {
  .bb-split,
  .bb-form-grid { grid-template-columns: 1fr; gap: 2rem; }
}


/* --------------------------------------------------------------------------
   /testimonials/
   -------------------------------------------------------------------------- */
 .testimonials-intro {
  max-width: 760px;
}
.testimonials-cta {
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}
.testimonials-cta .reviews-stars {
  font-size: 1.55rem;
  color: #f4b400;
  letter-spacing: 0.1em;
  margin: 0 0 0.4rem;
}

/* --------------------------------------------------------------------------
   COMPACT ANSWER-FIRST HERO
   Shrinks the tall service/product/telecoms black hero banners down to
   roughly the height of the About / Our Story hero, without dropping any
   content. Scoped with :has(.hero-lead) so it only affects the answer-first
   heroes (lead + actions + reassure) and leaves the shorter heroes alone.
   -------------------------------------------------------------------------- */
.page-hero:has(.hero-lead) {
  padding: calc(6.5rem + var(--header-extra)) 0 2.75rem;
}
.page-hero:has(.hero-lead) h1 {
  margin-bottom: 0.6rem;
}
/* Keep the orange emphasis inline so titles sit on one line where they fit,
   instead of the default forced line break - keeps every hero the same
   compact height as the IT Services hero. */
.page-hero:has(.hero-lead) h1 span {
  display: inline;
}
.page-hero:has(.hero-lead) .hero-lead {
  font-size: 1.05rem;
  line-height: 1.6;
  margin-top: 0.5rem;
}
.page-hero:has(.hero-lead) .hero-actions {
  margin-top: 1.1rem;
}
.page-hero:has(.hero-lead) .hero-actions .btn--lg {
  padding: 0.85rem 1.9rem;
}
.page-hero:has(.hero-lead) .hero-reassure {
  margin-top: 0.9rem;
}

/* Form send result (added by main.js for [data-form] forms) */
.form-status {
  margin-bottom: 1.25rem;
  padding: 1rem;
  border-radius: 6px;
  line-height: 1.6;
}
.form-status--sent  { background: #e8f5e9; color: #1b5e20; border: 1px solid #b7dfb9; }
.form-status--error { background: #fdeaea; color: #611a15; border: 1px solid #f2c2be; }