/* ITService4UK visual redesign — v9 (navy + green, full rebuild, no legacy CSS dependency) */

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('/assets/sora.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/plus-jakarta-sans.woff2') format('woff2');
}

:root {
  --navy: #152447;
  --navy-light: #1D3160;
  --green: #2FAE5C;
  --green-dark: #24913F;
  --green-tint: #E9F7EE;
  --text: #1F2733;
  --text-secondary: #5B6472;
  --border: #E5E8EC;
  --bg-alt: #F5F7FA;
  --on-green: #0B2416;
  --font-heading: 'Sora', sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 96px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --shadow-card: 0 1px 2px rgba(21,36,71,0.04), 0 8px 24px rgba(21,36,71,0.06);
  --shadow-card-hover: 0 4px 8px rgba(21,36,71,0.06), 0 16px 36px rgba(21,36,71,0.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body) !important;
  color: var(--text);
  margin: 0;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading) !important;
  color: var(--text);
  margin: 0;
}
a { color: var(--green-dark); }
a:hover { color: var(--green); }
img { max-width: 100%; display: block; margin-left: auto; margin-right: auto; }
img.alignleft, img.alignright, img.aligncenter { float: none !important; margin-left: auto !important; margin-right: auto !important; }

.entry-content img,
.blk-gallery.has-nested-images figure.blk-image img {
  max-width: min(800px, 100%) !important;
  width: auto;
  height: auto;
}

/* the two known malformed pages (pasted-in raw HTML documents from the original migration)
   contain hardcoded multi-column CSS grids with no mobile breakpoint of their own — collapses
   to a single column below tablet width so nothing runs off the edge of the screen. */
@media (max-width: 640px) {
  .its4uk-mobile-grid { grid-template-columns: 1fr !important; }
}

/* ================= HEADER ================= */
.its4uk-header {
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 48px;
  gap: 24px;
  position: relative;
  z-index: 100;
}
.its4uk-header__logo {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  color: #FFFFFF;
  text-decoration: none;
  white-space: nowrap;
}
.its4uk-header__logo span { color: var(--green); }
.its4uk-nav { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.its4uk-nav li { position: relative; }
.its4uk-nav > li > a {
  color: #C7CEDC; font-weight: 500; font-size: 16px; text-decoration: none;
  font-family: var(--font-body); padding: 8px 0; display: inline-block; transition: color 0.15s ease;
}
.its4uk-nav > li > a:hover { color: #FFFFFF; }
.its4uk-nav .its4uk-submenu {
  display: none; position: absolute; top: 100%; left: 0; background: #FFFFFF;
  border-radius: var(--radius-sm); box-shadow: var(--shadow-card-hover); min-width: 300px;
  padding: 10px; list-style: none; margin: 10px 0 0; z-index: 200;
}
.its4uk-nav li:hover .its4uk-submenu,
.its4uk-nav li.its4uk-submenu--open .its4uk-submenu { display: block; }
.its4uk-nav .its4uk-submenu li a {
  display: block; padding: 10px 14px; font-size: 15px; color: var(--text); border-radius: 0;
  text-decoration: none; font-family: var(--font-body); font-weight: 500; transition: background 0.15s ease;
}
.its4uk-nav .its4uk-submenu li a:hover { background: var(--green-tint); color: var(--green-dark); }
.its4uk-header__right { display: flex; align-items: center; gap: 14px; }
.its4uk-header__call {
  display: flex; align-items: center; gap: 8px; background: var(--green); color: var(--on-green) !important;
  font-weight: 700; font-size: 14px; padding: 11px 20px; border-radius: var(--radius-sm);
  text-decoration: none !important; white-space: nowrap; font-family: var(--font-heading);
  transition: background 0.15s ease, transform 0.15s ease;
}
.its4uk-header__call:hover { background: var(--green-dark) !important; transform: translateY(-1px); }
.its4uk-header__legacy-link { font-size: 10px; color: #7C89A3; text-decoration: none; display: block; text-align: center; margin-top: 2px; }
.its4uk-menu-toggle { display: none; background: none; border: none; color: #FFFFFF; font-size: 24px; cursor: pointer; line-height: 1; padding: 4px; }
@media (max-width: 900px) {
  .its4uk-header { flex-wrap: nowrap; padding: 12px 16px; gap: 10px; }
  .its4uk-header__logo { font-size: 17px; }
  .its4uk-header__right { gap: 8px; }
  .its4uk-header__call { padding: 8px 12px; font-size: 12.5px; gap: 6px; }
  .its4uk-header__call svg { width: 12px; height: 12px; }
  /* a second, tiny duplicate of the same phone number already shown in the button above it —
     redundant on narrow screens, so it's dropped there to keep the header compact */
  .its4uk-header__legacy-link { display: none; }
  .its4uk-menu-toggle { display: block; }

  /* the nav becomes a tap-to-open dropdown panel instead of the desktop hover menu.
     flex-wrap must be reset to nowrap here — the base .its4uk-nav rule sets it to "wrap"
     for the desktop horizontal layout, and left uncorrected, a column-direction flex
     container that overflows its max-height starts a second COLUMN instead of scrolling,
     which is what was rendering "Posts"/"Reviews" as a second sidebar-like column bleeding
     off the right edge of the screen. */
  .its4uk-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; width: 100%; z-index: 150;
    background: var(--navy); flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0;
    padding: 4px 16px 12px; margin: 0; max-height: calc(100vh - 60px); overflow-y: auto;
    box-shadow: var(--shadow-card-hover); box-sizing: border-box;
  }
  .its4uk-nav.its4uk-nav--open { display: flex; }
  .its4uk-nav > li { width: 100%; }
  .its4uk-nav > li > a { display: block; padding: 13px 4px; border-bottom: 1px solid rgba(255,255,255,0.12); }
  .its4uk-nav .its4uk-submenu {
    display: block; position: static; background: none; box-shadow: none; border-radius: 0;
    padding: 0 0 6px 14px; margin: 0; min-width: 0;
  }
  .its4uk-nav .its4uk-submenu li a { color: #C7CEDC; padding: 9px 4px; font-size: 15px; }
  .its4uk-nav .its4uk-submenu li a:hover { background: none; color: #FFFFFF; }
}

/* ================= TRUST BADGES (deliberately wider than the content container — aligned to the header's own left/right inset instead) ================= */
.its4uk-trust-badges {
  display: flex; gap: 10px; flex-wrap: nowrap; justify-content: center;
  padding: 24px 48px 28px;
  width: 100vw; position: relative; left: 50%; margin-left: -50vw; box-sizing: border-box;
}
.its4uk-trust-badge {
  display: flex; align-items: center; gap: 8px; background: var(--bg-alt); border: 1px solid var(--border);
  padding: 12px 14px; font-size: 12.5px; font-weight: 500; color: var(--text); font-family: var(--font-body);
  flex: 0 1 auto; min-width: 0;
}
.its4uk-trust-badge svg { color: var(--green-dark); flex-shrink: 0; width: 17px; height: 17px; }
.its4uk-trust-badge strong { font-family: var(--font-heading); font-weight: 700; }
.its4uk-trust-badge span { white-space: normal; line-height: 1.35; }
.its4uk-trust-badge__tag {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--text-secondary); background: #EDEFF3; padding: 2px 6px; margin-left: 2px; flex-shrink: 0;
}
@media (max-width: 1100px) {
  .its4uk-trust-badges { flex-wrap: wrap; }
  .its4uk-trust-badge { flex: 1 1 45%; white-space: normal; }
}
@media (max-width: 900px) { .its4uk-trust-badges { padding: 20px 24px 24px; } }
@media (max-width: 560px) { .its4uk-trust-badge { flex: 1 1 100%; } }

/* ================= GENERIC PAGE HERO (applies to every page's own real, existing <h1>, currently hidden by the site's own custom CSS — homepage excluded, it keeps its bespoke hero below) ================= */

.entry-header:has(h1.entry-title), .page-header:has(h1.page-title) {
  position: relative;
  background: linear-gradient(100deg, rgba(11,20,40,0.8) 0%, rgba(11,20,40,0.52) 60%, rgba(11,20,40,0.28) 100%),
              url('/images/2023/09/man-repairing-circuit-board-laptop.webp');
  background-size: cover;
  background-position: center;
  min-height: 190px;
  padding: 40px 48px;
  margin: 0 !important;
  display: flex !important;
  align-items: center;
  overflow: hidden;
  box-sizing: border-box;
}
.entry-header:has(h1.entry-title)::after, .page-header:has(h1.page-title)::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 38%; max-width: 320px;
  background: linear-gradient(155deg, var(--green), var(--green-dark));
  clip-path: polygon(45% 0%, 100% 0%, 100% 100%, 0% 100%);
  opacity: 0.94; z-index: 1; pointer-events: none;
}
.entry-header h1.entry-title, .page-header h1.page-title {
  display: flex !important;
  position: relative; z-index: 2;
  font-family: var(--font-heading) !important; font-weight: 700 !important; color: #FFFFFF !important;
  font-size: clamp(20px, 2.4vw, 32px) !important; line-height: 1.3 !important; margin: 0 !important;
  max-width: 700px; text-transform: none !important; letter-spacing: normal !important;
  align-items: center; gap: 14px;
}
/* the small gravatar avatar on author-archive titles doesn't fit the photo-hero treatment cleanly —
   keep it, but round it and give it a white ring so it reads as a deliberate detail, not clutter */
.page-header h1.page-title img.avatar {
  border-radius: 50%; border: 2px solid #FFFFFF; flex-shrink: 0; margin: 0 !important; display: block !important;
}

.its4uk-home .entry-header { display: none !important; }

.its4uk-duplicate-title-hidden { display: none !important; }
.its4uk-hero-cta {
  position: relative; z-index: 2; display: inline-flex; margin-top: var(--space-xs); background: var(--green);
  color: var(--on-green) !important; font-weight: 700; font-size: 12px; padding: 9px 18px;
  border-radius: var(--radius-sm); text-decoration: none !important; font-family: var(--font-heading);
  box-shadow: 0 8px 20px rgba(47,174,92,0.35); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.its4uk-hero-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(47,174,92,0.45); }

/* ================= SERVICE ICON CARDS ================= */
.its4uk-icon-cards { display: grid; grid-template-columns: repeat(5, 1fr); }
/* 5 items never divides evenly into a multi-column grid (2, 3 or 4 columns all leave a ragged
   last row with an empty gap next to it) — stacked full-width rows is the only layout that's
   clean for an odd count, so every width at/under this breakpoint gets a single column. */
@media (max-width: 900px) { .its4uk-icon-cards { grid-template-columns: 1fr; } }
.its4uk-icon-cards a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  text-align: center; padding: 30px 14px; min-height: 160px; text-decoration: none; color: #FFFFFF;
  transition: transform 0.18s ease, filter 0.18s ease; position: relative; overflow: hidden;
}
@media (max-width: 900px) {
  /* full-width single column reads better as a compact horizontal row (icon beside text)
     than a tall vertical card repeated 5 times, which would push real content far down the page */
  .its4uk-icon-cards a {
    flex-direction: row; justify-content: flex-start; text-align: left;
    min-height: 0; padding: 16px 20px; gap: 16px;
  }
  .its4uk-icon-cards a svg { width: 24px; height: 24px; }
}
.its4uk-icon-cards a:nth-child(odd) { background: var(--navy); }
.its4uk-icon-cards a:nth-child(even) { background: linear-gradient(155deg, var(--green), var(--green-dark)); }
.its4uk-icon-cards a:hover { transform: translateY(-4px); filter: brightness(1.08); z-index: 2; }
.its4uk-icon-cards a svg { flex-shrink: 0; transition: transform 0.18s ease; }
.its4uk-icon-cards a:hover svg { transform: scale(1.12); }
.its4uk-icon-cards a span {
  font-family: var(--font-heading); font-weight: 700; font-size: 12.5px; line-height: 1.4;
  text-transform: uppercase; letter-spacing: 0.03em; white-space: normal;
}

/* ================= GENERIC SECTION SYSTEM ================= */
.its4uk-block { padding: var(--space-2xl) var(--space-xl); }
.its4uk-block--tight { padding: var(--space-xl) var(--space-xl); }
.its4uk-block--alt { background: var(--bg-alt); }
.its4uk-block--gradient {
  background: linear-gradient(135deg, #0F1B36 0%, var(--navy) 45%, #1A2E5C 100%);
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
}
.its4uk-block--gradient::before {
  content: ""; position: absolute; top: -120px; right: -100px; width: 420px; height: 420px;
  border-radius: 50%; background: radial-gradient(circle, rgba(47,174,92,0.35), transparent 70%);
}
.its4uk-block--gradient h2, .its4uk-block--gradient h3 { color: #FFFFFF; }
.its4uk-eyebrow {
  font-family: var(--font-heading); font-weight: 700; font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--green-dark); margin-bottom: var(--space-xs); display: block;
}
.its4uk-block--gradient .its4uk-eyebrow { color: var(--green); }
.its4uk-heading-lg { font-size: clamp(26px, 3vw, 38px); font-weight: 700; line-height: 1.2; }
.its4uk-lede { color: var(--text-secondary); font-size: 16px; line-height: 1.7; max-width: 640px; }
.its4uk-block--gradient .its4uk-lede { color: #C7CEDC; }

/* asymmetric two-column layout used across several sections */
.its4uk-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-xl); align-items: center; }
.its4uk-split--reverse { grid-template-columns: 0.9fr 1.1fr; }
.its4uk-split--reverse > *:first-child { order: 2; }
@media (max-width: 860px) { .its4uk-split, .its4uk-split--reverse { grid-template-columns: 1fr; } .its4uk-split--reverse > *:first-child { order: 0; } }
.its4uk-split img { border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }

/* cards */
.its4uk-card {
  background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-md); box-shadow: var(--shadow-card); transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.its4uk-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.its4uk-card--on-dark { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(2px); }
.its4uk-card--on-dark .its4uk-icon-chip { background: rgba(47,174,92,0.18); }

.its4uk-icon-chip {
  width: 46px; height: 46px; border-radius: 0; background: var(--green-tint);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.its4uk-icon-chip svg { color: var(--green-dark); }

.its4uk-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.its4uk-checklist li { display: flex; align-items: flex-start; gap: 10px; font-size: 17px; color: var(--text); font-weight: 500; }
.its4uk-checklist li svg { flex-shrink: 0; margin-top: 2px; color: var(--green-dark); }

.its4uk-btn {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 700;
  font-size: 14px; padding: 14px 24px; border-radius: var(--radius-sm); text-decoration: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.its4uk-btn--primary { background: var(--green); color: var(--on-green) !important; box-shadow: 0 8px 20px rgba(47,174,92,0.3); }
.its4uk-btn--primary:hover { background: var(--green-dark) !important; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(47,174,92,0.4); }
.its4uk-btn--outline { background: transparent; color: #FFFFFF !important; border: 1.5px solid rgba(255,255,255,0.35); }
.its4uk-btn--outline:hover { border-color: var(--green); background: rgba(47,174,92,0.12); }
.its4uk-btn--outline-dark { background: transparent; color: var(--text) !important; border: 1.5px solid var(--border); }
.its4uk-btn--outline-dark:hover { border-color: var(--green); color: var(--green-dark) !important; }

/* ================= REVIEWS ================= */
.its4uk-section { padding: var(--space-2xl) var(--space-xl) var(--space-lg); }
.its4uk-section h2 { font-family: var(--font-heading); font-weight: 700; font-size: 30px; color: var(--text); margin: 0 0 var(--space-xs); }
.its4uk-reviews-badge { font-size: 11px; font-weight: 700; color: var(--green-dark); background: var(--green-tint); padding: 6px 14px; border-radius: 0; display: inline-block; }
.its4uk-review-cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-md); margin-top: var(--space-md); }
@media (max-width: 860px) { .its4uk-review-cards { grid-template-columns: 1fr; } }
.its4uk-stars { color: #E8A33D; letter-spacing: 2px; font-size: 14px; }

/* ================= MAP ================= */
.its4uk-map-wrap { display: flex; gap: 0; background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-top: var(--space-md); box-shadow: var(--shadow-card); }
@media (max-width: 860px) { .its4uk-map-wrap { flex-direction: column; } }
.its4uk-map-info { flex: 1; padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); justify-content: center; }
.its4uk-map-embed { flex: 1.3; min-height: 340px; }
.its4uk-map-embed iframe { width: 100%; height: 100%; border: 0; display: block; min-height: 340px; }

/* ================= CONTACT FORM SUBMISSION NOTICE ================= */
.its4uk-form-notice {
  font-family: var(--font-body) !important; font-size: 15px !important; line-height: 1.5 !important;
  border-radius: var(--radius-sm) !important; padding: var(--space-md) var(--space-lg) !important;
  margin-top: var(--space-sm) !important; display: block !important;
}
.its4uk-form-notice--success { background: var(--green-tint) !important; color: var(--on-green) !important; border: 1px solid var(--green) !important; font-weight: 600 !important; }
.its4uk-form-notice--error { background: #FDECEC !important; color: #7A1F1F !important; border: 1px solid #E38C8C !important; }

/* ================= CTA BAND ================= */
.its4uk-cta-band {
  margin: 0 var(--space-xl) var(--space-2xl); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #0F1B36, var(--navy)); padding: var(--space-lg) var(--space-xl);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap;
  position: relative; overflow: hidden;
}
.its4uk-cta-band::before { content: ""; position: absolute; top: -80px; left: 35%; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(47,174,92,0.28), transparent 70%); }
.its4uk-cta-band h2 { color: #FFFFFF; font-size: 24px; margin: 0 0 var(--space-xs); position: relative; z-index: 1; }
.its4uk-cta-band p { color: #C7CEDC; margin: 0; font-size: 14px; position: relative; z-index: 1; }
.its4uk-cta-buttons { display: flex; gap: 12px; flex-wrap: wrap; position: relative; z-index: 1; }
.its4uk-btn-whatsapp { background: #25D366; color: #FFFFFF !important; font-weight: 700; font-size: 14px; padding: 14px 20px; border-radius: var(--radius-sm); text-decoration: none !important; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); transition: transform 0.15s ease; }
.its4uk-btn-whatsapp:hover { transform: translateY(-2px); }

/* ================= sticky contact buttons ================= */
.its4uk-sticky-group { position: fixed; bottom: 20px; right: 20px; z-index: 999; display: flex; align-items: center; gap: 10px; }
.its4uk-sticky-contact {
  display: flex; align-items: center; gap: 8px;
  background: var(--green); color: var(--on-green) !important; font-weight: 700; font-size: 14px;
  padding: 14px 22px; border-radius: 0; box-shadow: 0 10px 24px rgba(47,174,92,0.4);
  text-decoration: none !important; font-family: var(--font-heading); transition: transform 0.15s ease;
}
.its4uk-sticky-contact:hover { transform: translateY(-2px) scale(1.03); }
.its4uk-sticky-contact--whatsapp { background: #25D366; color: #FFFFFF !important; padding: 14px; box-shadow: 0 10px 24px rgba(37,211,102,0.4); }
@media (max-width: 600px) {
  .its4uk-sticky-group { bottom: 14px; right: 14px; gap: 8px; }
  .its4uk-sticky-contact { padding: 12px 18px; font-size: 13px; }
  .its4uk-sticky-contact--whatsapp { padding: 12px; }
}

/* ================= FOOTER ================= */
.its4uk-footer { background: var(--navy); color: #C7CEDC; padding: var(--space-2xl) var(--space-xl) var(--space-md); }
.its4uk-footer h3 { font-family: var(--font-heading); color: #FFFFFF; font-size: 16px; margin: 0 0 var(--space-sm); }
.its4uk-footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }
@media (max-width: 900px) { .its4uk-footer-grid { grid-template-columns: repeat(2, 1fr); } }
.its4uk-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.its4uk-footer a { color: #C7CEDC; text-decoration: none; font-size: 13px; transition: color 0.15s ease; }
.its4uk-footer a:hover { color: var(--green); }
.its4uk-footer-bottom { border-top: 1px solid #26345C; margin-top: var(--space-lg); padding-top: var(--space-sm); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 12px; color: #8493AD; }
.its4uk-social a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 0; background: #1D3160; margin-right: 8px; transition: background 0.15s ease; }
.its4uk-social a:hover { background: var(--green); }

/* redundant legacy sidebar removed from layout */
.sidebar.widget-area { display: none !important; }
.content-area { width: 100% !important; }

/* ================= TWO-TIER PRICING TABLE + FAQ (data recovery pages) ================= */
.its4uk-pricing-table { width: 100%; max-width: 100%; border-collapse: collapse; margin: var(--space-sm) 0 var(--space-md); background: #FFFFFF; box-shadow: var(--shadow-card); border: 1px solid var(--border); }
.its4uk-pricing-table thead th { background: var(--navy); color: #FFFFFF; font-family: var(--font-heading); font-weight: 700; font-size: 14px; text-align: left; padding: 14px var(--space-sm); }
.its4uk-pricing-table thead th:last-child { text-align: right; }
.its4uk-pricing-table tbody td { padding: 14px var(--space-sm); border-top: 1px solid var(--border); border-bottom: 0; font-size: 17px; color: var(--text); vertical-align: top; }
.its4uk-pricing-table tbody td strong { font-family: var(--font-heading); color: var(--navy); }
.its4uk-pricing-table tbody td:last-child { text-align: right; font-family: var(--font-heading); font-weight: 700; color: var(--green-dark); white-space: nowrap; }
.its4uk-pricing-table tbody tr:nth-child(even) { background: var(--bg-alt); }
@media (max-width: 640px) {
  .its4uk-pricing-table thead { display: none; }
  .its4uk-pricing-table, .its4uk-pricing-table tbody, .its4uk-pricing-table tr, .its4uk-pricing-table td { display: block; width: 100%; }
  .its4uk-pricing-table tbody tr { padding: var(--space-sm); }
  .its4uk-pricing-table tbody td { border-top: 0; border-bottom: 0; padding: 2px 0; }
  .its4uk-pricing-table tbody tr:not(:last-child) td:last-child { border-bottom: 1px solid var(--border); padding-bottom: var(--space-sm); }
  .its4uk-pricing-table tbody td:last-child { text-align: left; font-size: 18px; margin-top: 4px; }
}

.its4uk-callout {
  background: var(--green-tint); border: 1px solid rgba(47,174,92,0.3); border-left: 4px solid var(--green);
  border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); margin: var(--space-md) 0; font-size: 17px; color: var(--on-green);
}
.its4uk-callout strong { color: var(--navy); }

.its4uk-faq-item { border-top: 1px solid var(--border); padding: var(--space-sm) 0; }
.its4uk-faq-item:first-child { border-top: none; }
.its4uk-faq-item p:first-child { font-family: var(--font-heading); font-weight: 700; font-size: 17px; color: var(--navy); margin: 0 0 6px; }
.its4uk-faq-item p:last-child { margin: 0; font-size: 17px; color: var(--text-secondary); line-height: 1.6; }

/* ================= CONTENT PHOTOS (inline article images) =================
   The site-wide `.entry-content img` rule caps at 800px, which is the full
   width of this page's content column once the sidebar is hidden — full-
   bleed against 17px body text with zero vertical margin. This narrower,
   centered, properly-spaced variant is opt-in via an extra class so the
   800px default is untouched for the 170+ other pages relying on it. */
.its4uk-content-photo { margin: var(--space-lg) 0 !important; text-align: center; }
.its4uk-content-photo img {
  max-width: min(700px, 100%) !important; width: auto; height: auto;
  margin: 0 auto; display: inline-block;
}

/* ================= DEDICATED REVIEWS PAGE ================= */
.its4uk-reviews-hero { text-align: center; }
.its4uk-reviews-hero h1 { font-size: 34px; margin: 0 0 10px; }
.its4uk-reviews-subheading { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--text-secondary); margin: 0 0 var(--space-lg); }
.its4uk-review-cards--five { text-align: left; }
.its4uk-review-cards--five .its4uk-card--quote {
  grid-column: 1 / -1; max-width: 640px; margin: 0 auto; text-align: center;
  background: var(--green-tint); border-color: rgba(47,174,92,0.25);
}
@media (max-width: 860px) { .its4uk-review-cards--five .its4uk-card--quote { max-width: none; } }

/* ================= DEDICATED AREAS WE COVER PAGE ================= */
.its4uk-areas-hero { text-align: center; }
.its4uk-areas-hero h1 { font-size: 34px; margin: 0 0 var(--space-sm); }
.its4uk-areas-hero p { max-width: 720px; margin: 0 auto; font-size: 16px; color: var(--text-secondary); line-height: 1.6; }
.its4uk-areas-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--space-sm);
  margin-top: var(--space-lg);
}
.its4uk-area-card {
  display: flex; align-items: center; gap: 12px; background: #FFFFFF; border: 1px solid var(--border);
  box-shadow: var(--shadow-card); padding: var(--space-sm) var(--space-md); text-decoration: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.its4uk-area-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.its4uk-area-card .its4uk-icon-chip { width: 38px; height: 38px; }
.its4uk-area-card .its4uk-icon-chip svg { width: 16px; height: 16px; }
.its4uk-area-card span { font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: var(--navy); }
.its4uk-areas-outro { text-align: center; max-width: 560px; margin: var(--space-xl) auto 0; font-size: 16px; color: var(--text-secondary); }
.its4uk-areas-outro a { color: var(--green-dark); font-weight: 700; }

/* Stop the full-bleed (100vw) trust badges creating a sideways scrollbar on desktop */
html, body { overflow-x: clip; }

/* ================= TILE DESIGN SYSTEM (.drg) — shared by all pages ================= */
.drg{--n:var(--navy,#152447);--g:var(--green,#2FAE5C);--gt:var(--green-tint,#E9F7EE);--t:var(--text,#1F2733);--t2:var(--text-secondary,#5B6472);--b:var(--border,#E5E8EC);--alt:var(--bg-alt,#F5F7FA);color:var(--t);font-family:var(--font-body,"Plus Jakarta Sans",system-ui,sans-serif);font-size:17px;line-height:1.65}
.drg h2,.drg h3{font-family:var(--font-heading,"Sora",sans-serif);color:var(--n);line-height:1.25;margin:0 0 12px}
.drg h2{font-size:clamp(24px,3vw,32px);margin-top:56px}.drg h3{font-size:19px}
.drg p{margin:0 0 14px}.drg a{color:var(--n);text-decoration-color:var(--g);text-underline-offset:3px}
.drg-lead{font-size:20px;color:var(--t2);max-width:760px}
.drg-eyebrow{display:inline-block;font:600 12px/1 var(--font-heading,"Sora");letter-spacing:.12em;text-transform:uppercase;color:var(--g);margin-bottom:10px}
.drg-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:28px 0}
.drg-fact{background:#fff;border:1px solid var(--b);border-top:4px solid var(--g);padding:20px;box-shadow:var(--shadow-card)}
.drg-fact b{display:block;font:700 26px/1.1 var(--font-heading,"Sora");color:var(--n);margin-bottom:6px}
.drg-fact span{color:var(--t2);font-size:15px}
.drg-alert{background:var(--n);color:#fff;padding:28px 28px 20px;margin:32px 0;position:relative}
.drg-alert h2{color:#fff;margin-top:0}.drg-alert p{color:#cfd6e4}
.drg-steps{counter-reset:s;list-style:none;padding:0;margin:16px 0 0;display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
.drg-steps li{counter-increment:s;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:16px 16px 16px 56px;position:relative;color:#fff;font-size:15.5px}
.drg-steps li:before{content:counter(s);position:absolute;left:16px;top:14px;width:28px;height:28px;background:var(--g);color:#0B2416;font:700 15px/28px var(--font-heading,"Sora");text-align:center}
.drg-table{width:100%;border-collapse:collapse;margin:16px 0;font-size:15.5px;background:#fff}
.drg-table th{background:var(--alt);color:var(--n);text-align:left;font:600 13px/1.3 var(--font-heading,"Sora");letter-spacing:.04em;text-transform:uppercase;padding:12px 14px;border-bottom:2px solid var(--b)}
.drg-table td{padding:14px;border-bottom:1px solid var(--b);vertical-align:top}
.drg-tag{display:inline-block;padding:3px 9px;font:600 12px/1.4 var(--font-heading,"Sora");white-space:nowrap}
.drg-tag--local{background:var(--gt);color:#1d6b3a}.drg-tag--lab{background:#e8ecf6;color:var(--n)}
.drg-flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0;margin:20px 0;border:1px solid var(--b)}
.drg-flow div{padding:20px;border-right:1px solid var(--b);background:#fff}.drg-flow div:last-child{border-right:0}
.drg-flow small{display:block;font:700 12px var(--font-heading,"Sora");color:var(--g);letter-spacing:.1em;margin-bottom:6px}
.drg-price{display:grid;grid-template-columns:1fr 1.4fr;gap:20px;margin:20px 0}
.drg-card{border:1px solid var(--b);padding:24px;background:#fff;box-shadow:var(--shadow-card)}
.drg-card--accent{border-top:4px solid var(--g)}
.drg-big{font:700 34px/1 var(--font-heading,"Sora");color:var(--n);margin:8px 0 4px}
.drg-muted{color:var(--t2);font-size:14.5px}
.drg-chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;padding:0;list-style:none}
.drg-chips li{border:1px solid var(--b);background:var(--alt);padding:8px 14px;font-size:15px}
.drg-faq details{border-bottom:1px solid var(--b);padding:16px 0}
.drg-faq summary{cursor:pointer;font:600 17px/1.4 var(--font-heading,"Sora");color:var(--n);list-style:none;padding-right:28px;position:relative}
.drg-faq summary::-webkit-details-marker{display:none}
.drg-faq summary:after{content:"+";position:absolute;right:0;top:-2px;font-size:24px;color:var(--g)}
.drg-faq details[open] summary:after{content:"\2013"}
.drg-faq details p{margin:10px 0 0;color:var(--t2)}
.drg-quote{border-left:4px solid var(--g);background:var(--alt);padding:18px 22px;margin:12px 0}
.drg-quote p{margin:0 0 6px;font-size:16.5px}.drg-quote cite{font-style:normal;color:var(--t2);font-size:14px}
.drg-cta{background:linear-gradient(135deg,var(--n),#1D3160);color:#fff;padding:36px;margin:56px 0 24px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.drg-cta h2{color:#fff;margin:0 0 6px;font-size:26px}.drg-cta p{color:#cfd6e4;margin:0}
.drg-btns{display:flex;gap:12px;flex-wrap:wrap}
.drg .drg-btn{display:inline-block;background:var(--g);color:#0B2416;font:700 16px/1 var(--font-heading,"Sora");padding:15px 22px;text-decoration:none}
.drg .drg-btn--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
@media(max-width:700px){.drg-steps{grid-template-columns:1fr}.drg-price{grid-template-columns:1fr}.drg-flow div{border-right:0;border-bottom:1px solid var(--b)}.drg-table thead{display:none}.drg-table td{display:block;border:0;padding:4px 14px}.drg-table tr{display:block;border-bottom:1px solid var(--b);padding:10px 0}.drg-cta{padding:24px}}
.drg{--r:18px;--rs:12px}
.drg-fact,.drg-alert,.drg-card,.drg-flow,.drg-cta,.drg-quote,.drg-tile,.drg-ex,.drg-faq{border-radius:var(--r)}
.drg-fact,.drg-card,.drg-tile,.drg-ex{transition:transform .15s ease,box-shadow .15s ease}
.drg-fact:hover,.drg-tile:hover,.drg-ex:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover,0 8px 24px rgba(21,36,71,.12))}
.drg-fact{border-top:1px solid var(--b);display:flex;gap:14px;align-items:flex-start}
.drg-ico{flex:0 0 44px;height:44px;border-radius:12px;background:var(--gt);color:#1d6b3a;display:grid;place-items:center}
.drg-ico svg{width:22px;height:22px}
.drg-ico--lab{background:#e8ecf6;color:var(--n)}
.drg-steps li{border-radius:var(--rs)}.drg-steps li:before{border-radius:50%}
.drg-flow{border:0;gap:14px;display:grid}.drg-flow div{border:1px solid var(--b)!important;border-radius:var(--r);box-shadow:var(--shadow-card)}
.drg-flow small{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--g);color:#0B2416;letter-spacing:0;font-size:14px;margin-bottom:10px}
.drg-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:18px 0}
.drg-tile{background:#fff;border:1px solid var(--b);padding:20px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:10px}
.drg-tile h3{font-size:17px;margin:0}.drg-tile p{margin:0;color:var(--t2);font-size:15px}
.drg-tile .drg-tag{align-self:flex-start;margin-top:auto}
.drg-tag{border-radius:999px;padding:5px 12px}
.drg-exs{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:18px 0}
.drg-ex{background:var(--alt);border:1px solid var(--b);padding:22px;display:flex;flex-direction:column;gap:8px}
.drg-ex h3{font-size:17px;margin:0}.drg-ex p{margin:0;font-size:15px;color:var(--t2)}
.drg-ex .drg-ex-price{margin-top:auto;padding-top:10px;border-top:1px dashed var(--b);font:700 20px/1.2 var(--font-heading,"Sora");color:var(--n)}
.drg-ex .drg-ex-price small{display:block;font:500 12.5px var(--font-body,system-ui);color:var(--t2)}
.drg-chips li{border-radius:999px;background:#fff;display:flex;align-items:center;gap:8px}
.drg-chips li:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--g)}
.drg-card .drg-table{border-radius:var(--rs);overflow:hidden;border:1px solid var(--b)}
.drg-faq{background:#fff;border:1px solid var(--b);padding:4px 22px}.drg-faq details:last-child{border-bottom:0}
.drg .drg-btn{border-radius:999px}
.drg-tiers{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0}
.drg-tier{border:1px solid var(--b);border-radius:var(--rs);padding:14px;background:var(--alt)}
.drg-tier b{display:flex;justify-content:space-between;font:700 15px var(--font-heading,"Sora");color:var(--n)}
.drg-tier b span{color:#1d6b3a}.drg-tier p{margin:6px 0 0;font-size:13.5px;color:var(--t2);line-height:1.45}
@media(max-width:700px){.drg-tiers{grid-template-columns:1fr}.drg-fact{padding:16px}}

/* ===== Tile design: articles ===== */
.drg-article{font-size:17px;line-height:1.75}
.drg-article>h2{margin-top:44px;padding-left:14px;border-left:5px solid var(--g);border-radius:2px}
.drg-article>h3{margin-top:28px}
.drg-article img{border-radius:var(--r);height:auto;max-width:100%}
.drg-article figure{margin:24px 0}
.drg-article>ul,.drg-article>ol{padding:0;margin:16px 0;list-style:none;display:grid;gap:10px}
.drg-article>ul>li,.drg-article>ol>li{background:#fff;border:1px solid var(--b);border-radius:var(--rs);padding:12px 16px 12px 40px;position:relative;box-shadow:var(--shadow-card)}
.drg-article>ul>li:before{content:"";position:absolute;left:16px;top:21px;width:9px;height:9px;border-radius:50%;background:var(--g)}
.drg-article>ol{counter-reset:o}.drg-article>ol>li{counter-increment:o}
.drg-article>ol>li:before{content:counter(o);position:absolute;left:11px;top:12px;width:22px;height:22px;border-radius:50%;background:var(--g);color:#0B2416;font:700 12px/22px var(--font-heading,"Sora");text-align:center}
.drg-article table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--b);border-radius:var(--rs);overflow:hidden;margin:18px 0}
.drg-article th,.drg-article td{padding:12px 14px;border-bottom:1px solid var(--b);text-align:left}
.drg-article th{background:var(--alt);color:var(--n)}
.drg-article blockquote{border-left:4px solid var(--g);background:var(--alt);border-radius:var(--rs);padding:16px 20px;margin:18px 0}
.drg-related{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:16px 0}
.drg-related a{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--b);border-radius:var(--rs);padding:14px 16px;text-decoration:none;font:600 15px/1.3 var(--font-heading,"Sora");color:var(--n);box-shadow:var(--shadow-card);transition:transform .15s}
.drg-related a:hover{transform:translateY(-2px)}
.drg-related .drg-ico{flex:0 0 38px;height:38px;border-radius:10px}
.drg-related .drg-ico svg{width:19px;height:19px}
.drg-form{display:grid;gap:12px}
.drg-form input,.drg-form textarea{width:100%;border:1px solid var(--b);border-radius:var(--rs);padding:13px 14px;font:inherit;background:#fff;box-sizing:border-box}
.drg-form button{justify-self:start;border:0;cursor:pointer}
/* ===== Tile design: existing ITS4UK sections ===== */
.its4uk-card,.its4uk-callout,.its4uk-cta-band,.its4uk-areas-grid a,.its4uk-faq-item,.its4uk-section table,.its4uk-reviews-badge{border-radius:18px}
.its4uk-cta-band{overflow:hidden}
.its4uk-hero-cta,.its4uk-cta-buttons a{border-radius:999px!important}
.its4uk-checklist{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;padding:0;list-style:none}
.its4uk-checklist li{background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow-card);display:flex;gap:10px;align-items:flex-start}
.its4uk-faq-item{background:#fff;border:1px solid var(--border)!important;padding:18px 20px!important;margin-bottom:12px;box-shadow:var(--shadow-card)}
.its4uk-section table{border-collapse:separate;border-spacing:0;border:1px solid var(--border);overflow:hidden;width:100%}
.its4uk-section table th,.its4uk-section table td{padding:12px 16px;border-bottom:1px solid var(--border)}
.its4uk-section table tr:last-child td{border-bottom:0}
.its4uk-areas-grid a{box-shadow:var(--shadow-card);transition:transform .15s}
.its4uk-areas-grid a:hover{transform:translateY(-2px)}
.entry-header:has(h1.entry-title),.page-header:has(h1.page-title){border-radius:22px;overflow:hidden}

.drg-article>ul>li>ul,.drg-article>ol>li>ul{margin:8px 0 0 0;padding-left:18px;list-style:disc}
.drg-article .blk-table table,.drg-article>table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--b);border-radius:var(--rs);overflow:hidden}
.drg-article-end{margin-top:48px}

/* ===== 2026-10-09: rounded corners everywhere ===== */
.its4uk-header__call,
.its4uk-btn,
.its4uk-sticky-contact,
.blk-button__link,
button,
input[type=submit],
input[type=button],
.cf-submit,
a.button {border-radius:12px!important}
input[type=text],input[type=email],input[type=tel],input[type=search],input[type=url],
input[type=number],textarea,select{border-radius:10px!important}
.its4uk-trust-badge{border-radius:999px!important}
.its4uk-icon-cards{border-radius:18px;overflow:hidden;margin-top:12px}
.its4uk-block,
.its4uk-map-wrap {border-radius:22px;overflow:hidden}
.inside-article{border-radius:22px}
.inside-article img:not([width="15"]):not(.emoji):not([class*=icon]),
.entry-content img,
.blk-image img,
figure img {border-radius:16px}
.widget img,
.attachment-thumbnail {border-radius:12px}
iframe,
.its4uk-map-wrap iframe {border-radius:16px}
blockquote,.blk-quote{border-radius:16px;overflow:hidden}
.blk-table,.blk-table table,table{border-radius:14px;overflow:hidden}
.widget {border-radius:16px}
.its4uk-footer-bottom{border-radius:14px}
/* dark sections: list items as dark glass cards so light text stays readable */
.its4uk-block--gradient .its4uk-checklist li{background:rgba(255,255,255,.07)!important;
 border:1px solid rgba(255,255,255,.16)!important;box-shadow:none!important;color:#E7EBF3}
.its4uk-block--gradient .its4uk-checklist li svg{color:#2FAE5C}

/* ===== 2026-10-09: warm backgrounds (option A) ===== */
:root{--bg-alt:#FBF1E4!important;--border:#EFE2D1!important;--text:#2B2520!important;--text-secondary:#6E6259!important;
 --shadow-card:0 1px 2px rgba(90,55,20,.05),0 8px 24px rgba(90,55,20,.08)!important;
 --shadow-card-hover:0 4px 8px rgba(90,55,20,.07),0 16px 36px rgba(90,55,20,.13)!important}
.drg{--alt:#FBF1E4;--b:#EFE2D1;--t:#2B2520;--t2:#6E6259}
html,body,.site,.site-content{background:#FFF8F0!important}
.inside-article{background:#FFFCF8!important}
.its4uk-block--alt{background:#FBF1E4!important}
.drg-tile,.drg-fact,.drg-card,.drg-ex,.its4uk-checklist li,.drg-faq{background:#FFFFFF}
.its4uk-block--gradient .its4uk-checklist li{background:rgba(255,255,255,.07)!important}
header.entry-header{background-image:linear-gradient(100deg,rgba(45,22,8,.78) 0%,rgba(60,30,10,.5) 60%,rgba(80,40,10,.25) 100%),url(/images/2023/09/man-repairing-circuit-board-laptop.webp)!important}
.its4uk-trust-badge{background:#FFF3E3!important;border-color:#F3DCC0!important}
.drg-eyebrow,[class*=eyebrow]{color:#A8540F!important}
.its4uk-block--gradient [class*=eyebrow],.drg-cta [class*=eyebrow],.drg-alert [class*=eyebrow]{color:#F2A35A!important}

/* ===== 2026-10-09: corner leftovers ===== */
.post-image,.post-image img,.featured-image img{border-radius:18px}
.bx-button{border-radius:12px!important}
.pp-widget-popular-posts-list li{border-radius:14px!important;overflow:hidden}

.comments-area,#comments,#respond{display:none!important}

/* ===== 2026-10-10: mobile fixes ===== */
.entry-content img,
.inside-article img {max-width:100%;height:auto}
.its4uk-split>*,.its4uk-block>*{min-width:0}
.its4uk-checklist{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))!important}
@media (max-width:860px){
 .its4uk-block{padding:44px 20px!important}
 .its4uk-split{gap:28px}
}
@media (max-width:480px){
 .its4uk-block{padding:34px 16px!important;border-radius:18px}
 .its4uk-checklist li{padding:12px 14px}
}
@media (max-width:640px){
 div[style*="grid-template-columns:1fr 1fr"],div[style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr!important}
}
.blk-image,.blk-image.is-resized{max-width:100%}
.blk-image.is-resized{display:block}
.inside-article img[style*="width"]{max-width:100%!important;height:auto!important}
.entry-content li,.entry-content p,.entry-content h2,.entry-content h3{overflow-wrap:break-word}
.blk-image>a,.drg figure>a{display:block;max-width:100%}
.entry-content li{min-width:0;overflow-wrap:anywhere}
.drg ol,.drg ul{grid-template-columns:minmax(0,1fr)}
.drg li{min-width:0;overflow-wrap:anywhere}
/* 2. "Free diagnosis / Free collection / Early & evening / 5.0 on Google" cards: text stays inside the card */
.drg-fact > div { min-width: 0; }
.drg-fact b { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.2; overflow-wrap: break-word; }
.drg-fact span { overflow-wrap: break-word; }

:where(.its4uk-post, .its4uk-page) a { box-shadow: none; text-decoration: none; }
:where(.its4uk-post, .its4uk-page) img { border: none; border-radius: 0; box-shadow: none; height: auto; max-width: 100%; }
:where(.its4uk-post, .its4uk-page) iframe { border: none; line-height: 1; margin: 0; max-width: 100%; width: 100%; }
:where(.its4uk-post, .its4uk-page) hr { background-color: transparent; margin: 0; }

/* Post and town pages: title banner */
.its4uk-full-width .site-content { display: block; }
.its4uk-post { display: block; width: 100%; min-width: 0; }
.its4uk-post-hero { position: relative; overflow: hidden; box-sizing: border-box; min-height: 190px; margin: 0; padding: 60px 48px; border-radius: 22px;
  background: linear-gradient(100deg, rgba(11,20,40,0.8) 0%, rgba(11,20,40,0.52) 60%, rgba(11,20,40,0.28) 100%), url('/images/2023/09/man-repairing-circuit-board-laptop.webp') center / cover; }
.its4uk-post-hero::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 38%; max-width: 320px; background: linear-gradient(155deg, var(--green), var(--green-dark)); clip-path: polygon(45% 0%, 100% 0%, 100% 100%, 0% 100%); opacity: 0.94; z-index: 1; pointer-events: none; }
.its4uk-post-title { position: relative; z-index: 2; box-sizing: border-box; max-width: 1140px; margin: 0 auto; padding: 0 calc(min(100%, 1140px) * 0.0909 + 18.5px) 0 calc(min(100%, 1140px) * 0.07223 + 18.5px); font-family: var(--font-heading); font-weight: 700; color: #FFFFFF; font-size: clamp(20px, 2.4vw, 32px); line-height: 1.3; text-align: center; text-transform: none; letter-spacing: normal; }

@media (max-width: 1024px) { .its4uk-post-title { padding: 0 calc(6% + 18.5px) 0 calc(2% + 18.5px); } }
@media (max-width: 767px) { .its4uk-post-hero { padding: 61px 48px; } .its4uk-post-title { padding: 0 20px; } }

/* Post and town pages: article column, with "Latest Posts" beside it on wide screens and under it on phones */
.its4uk-post-body { box-sizing: border-box; max-width: 1140px; margin: 0 auto; padding: 10px; display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; }
.its4uk-post-main { box-sizing: border-box; flex: 0 0 78.368%; max-width: 78.368%; min-width: 0; padding: 10px; }
.its4uk-post-side { box-sizing: border-box; flex: 0 0 21.632%; max-width: 21.632%; min-width: 0; padding: 10px; }
@media (max-width: 1024px) { .its4uk-post-main { flex-basis: 75%; max-width: 75%; } .its4uk-post-side { flex-basis: 25%; max-width: 25%; } }
@media (max-width: 767px) { .its4uk-post-main, .its4uk-post-side { flex-basis: 100%; max-width: 100%; } }
.its4uk-post-featured { margin: 0 0 20px; text-align: center; }
.its4uk-post-content { display: flow-root; }
.its4uk-post-featured img { display: inline-block; vertical-align: middle; border-radius: 16px; }
.its4uk-post-featured img, .its4uk-post-content img { max-width: min(800px, 100%) !important; width: auto; height: auto; }
@media (min-width: 601px) { .its4uk-post .drg-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* "Latest Posts" cards */
.its4uk-post-main > .its4uk-latest { margin-top: 20px; }
.its4uk-latest-title { font-family: var(--font-heading); font-size: 26px; font-weight: 400; line-height: 30px; color: #424242; margin: 0 0 20px; padding: 0; text-align: start; }
@media (max-width: 1024px) { .its4uk-latest-title { font-size: 22px; line-height: 1.1; } }
@media (max-width: 767px) { .its4uk-latest-title { font-size: 30px; line-height: 1.1; } }
.its4uk-latest-list { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 35px; margin: 0; padding: 0; }
.its4uk-latest-item { display: flex; flex-direction: column; background: #FFFFFF; border-radius: 16px; padding: 14px 16px; margin: 0; overflow-wrap: break-word; }
.its4uk-latest-thumb { display: block; position: relative; overflow: hidden; padding-bottom: 66%; margin: 0 0 20px; border-radius: 12px; }
.its4uk-latest-thumb img { position: absolute; top: 50%; left: 50%; width: 100%; height: auto; max-width: none; transform: translate(-50%, -50%); border-radius: 12px; }
@media (max-width: 767px) { .its4uk-latest-thumb { padding-bottom: 50%; } }
.its4uk-latest-item h3 { margin: 0; padding: 0; font-family: var(--font-heading); font-size: 18px; font-weight: 400; line-height: 1.2; color: #54595F; }
.its4uk-latest-item h3 a { color: inherit; text-decoration: none; }
.its4uk-latest-item h3 a:hover { color: #1d6b3a; }
.its4uk-latest-date { font-family: var(--font-body); font-size: 12px; line-height: 1.3; color: #6E6259; margin: 0 0 13px; }
.its4uk-latest-excerpt { margin: 0 0 10px; }
.its4uk-latest-excerpt p { margin: 0; font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: #6E6259; }
.its4uk-latest-more { align-self: flex-start; font-family: var(--font-body); font-size: 12px; font-weight: 600; line-height: 1.5; color: #1d6b3a; text-decoration: none; }

.its4uk-crumbs { box-sizing: border-box; max-width: 1140px; margin: 10px auto 18px; padding: 0 10px; }
.its4uk-crumbs #breadcrumbs { font-family: var(--font-body, "Plus Jakarta Sans", system-ui, sans-serif); font-size: 14px; line-height: 1.5; color: #6E6259; margin: 0; }
.its4uk-crumbs #breadcrumbs a { color: #1d6b3a; text-decoration: none; }
.its4uk-crumbs #breadcrumbs a:hover { text-decoration: underline; }
@media (max-width: 1024px) { .its4uk-crumbs { padding: 0 20px; } }

/* Footer on phones: one wide column for recent posts and contact details, links and areas side by side */
@media (max-width: 600px) {
  .its4uk-footer { padding: 40px 20px 16px; }
  .its4uk-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .its4uk-footer-grid > div:first-child, .its4uk-footer-grid > div:last-child { grid-column: 1 / -1; }
}

/* Homepage: "Local Computer & Laptop Repair You Can Trust" banner */
.its4uk-home-intro { position: relative; overflow: hidden; box-sizing: border-box; min-height: 190px; margin: 0; padding: 44px 74px 48px; border-radius: 22px; background: url('/images/2023/09/man-repairing-circuit-board-laptop.webp') center center / cover; }
.its4uk-home-intro::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(11,20,40,0.78) 0%, rgba(11,20,40,0.4) 55%, rgba(11,20,40,0.12) 100%); }
.its4uk-home-intro::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 38%; max-width: 320px; background: linear-gradient(155deg, var(--green), var(--green-dark)); clip-path: polygon(45% 0%, 100% 0%, 100% 100%, 0% 100%); opacity: 0.94; z-index: 1; pointer-events: none; }
.its4uk-home-intro__in { position: relative; z-index: 2; max-width: 640px; }
.its4uk-home-intro__col { box-sizing: border-box; width: 75.282%; margin-left: 12%; padding: 0 10px; text-align: center; }
@media (max-width: 640px) { .its4uk-home-intro__col { width: 100%; margin-left: 0; } }
.its4uk-home-intro h2 { margin: 0 0 20px; padding: 0; font-family: var(--font-heading); font-weight: 700; color: #FFFFFF; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.3; text-transform: none; letter-spacing: normal; }
.its4uk-home-intro p { margin: 0 auto; max-width: 540px; font-family: var(--font-body); font-style: normal; font-weight: 400; color: #E7EBF3; font-size: clamp(12px, 1vw, 13px); line-height: 1.55; }

/* Sell your laptop, Upgrade your laptop and North Ferriby pages (rebuilt in the site's own style) */
.drg .its4uk-page-btns { margin: 20px 0; }
.drg .its4uk-page-figure { margin: 24px 0; text-align: center; }
.drg .its4uk-page-figure img { display: inline-block; max-width: min(560px, 100%) !important; height: auto; border-radius: 16px; }
.drg .its4uk-page-map { margin: 20px 0; border-radius: 16px; overflow: hidden; line-height: 0; }
.drg .its4uk-page-map iframe { display: block; width: 100%; height: 300px; border: 0; margin: 0; }
.drg .its4uk-facts .drg-fact b { font-size: clamp(17px, 1.5vw, 20px); }
.drg .its4uk-facts .drg-fact span a { color: inherit; }
.drg .its4uk-facts .drg-fact b a, .drg .its4uk-plain-link a { color: inherit; text-decoration: none; }
.drg .its4uk-chips .drg-chips { margin: 12px 0 20px; }
.drg .its4uk-page-btns .its4uk-btn { font: 700 16px/1 var(--font-heading, "Sora"); padding: 13px 20px; border-radius: 999px !important; }

/* ===== ITS4UK: 3 rules from the 10 Oct mobile fix that never went live, 12 Oct 2026 ===== */
.its4uk-header__legacy-link{display:none!important}
.screen-reader-text:not(:focus){position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;border:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
@media (max-width:860px){main#content{padding-inline:16px}}

/* Advice & guides hub and the travel line on town pages */
.its4uk-advice h2{font-size:22px;margin:34px 0 12px}
.its4uk-guides{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.its4uk-guides li{text-align:left;background:#fff;border:1px solid var(--border,#E5E8EC);border-radius:14px;padding:14px 16px}
.its4uk-guides a{font-weight:700;text-decoration:none}
.its4uk-guides a:hover{text-decoration:underline}
.its4uk-guides span{display:block;margin-top:4px;font-size:14px;color:#5B6470;line-height:1.5}
.its4uk-guides a{color:var(--navy,#152447)}
.its4uk-advice .drg{margin-top:36px}
.drg-travel{margin:18px 0 0;padding:12px 16px;border-left:4px solid var(--green,#2FAE5C);background:var(--green-tint,#E9F7EE);border-radius:0 12px 12px 0}