/* ============================================
   ALCOM IT - Brand Stylesheet
   Colors: Orange #fe6a00 | Dark #3c3c3b | Mid Grey #858687 | Light Grey #d1d3d4
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;900&family=Montserrat:ital,wght@0,400;0,600;0,700;1,400&display=swap');

:root {
  --orange:      #fe6a00;
  --dark:        #3c3c3b;
  --mid-grey:    #858687;
  --light-grey:  #d1d3d4;
  --off-white:   #f7f7f7;
  --white:       #ffffff;
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body:    'Montserrat', sans-serif;
  /* Header geometry - utility bar + main nav. Anything that needs to clear
     the fixed header offsets by --header-h. */
  --utility-h:   36px;
  --nav-h:       72px;
  --header-h:    109px;   /* 36 + 1px hairline + 72 */
  /* How much taller the header is than the old nav-only 72px - page-top
     bands add this to their padding so their visible whitespace is unchanged. */
  --header-extra: 37px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 88%; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--dark);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a  { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ---- TYPOGRAPHY ---- */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
}

h1 { font-size: clamp(2.8rem, 6vw, 5rem); }
h2 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); }

h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.12rem;
  line-height: 1.8;
  color: var(--dark);
}

.text-orange { color: var(--orange); }
.text-grey   { color: var(--mid-grey); }
.text-white  { color: var(--white); }

/* ---- LAYOUT ---- */

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 2rem;
}

.section { padding: 5rem 0; }
.section--sm { padding: 3rem 0; }
.section--lg { padding: 7rem 0; }

.section-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--orange);
  margin-bottom: 1rem;
  display: block;
}

.section-heading {
  margin-bottom: 1.5rem;
}

.section-intro {
  max-width: 600px;
  margin-bottom: 3rem;
  color: var(--mid-grey);
  font-size: 1.1rem;
  line-height: 1.8;
}

/* ---- SITE HEADER (utility bar + main nav) ---- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

/* Secondary / utility menu.
   Sits above the main nav and carries everything that isn't a service:
   Contact Us, About Us, Customer Login and search. Deliberately quieter than
   the nav below - smaller type, darker ground - so the service links stay
   the loudest thing in the header. */
.utility-bar {
  position: relative;
  z-index: 20;
  background: #2e2e2d;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-family: var(--font-body);
}

.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
  height: var(--utility-h);
}

.utility-bar .container {
  max-width: 1240px;
}

.utility-bar__nav {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 1.5rem;
}

.utility-bar__link {
  position: relative;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--light-grey);
  white-space: nowrap;
  transition: color 0.2s;
}

.utility-bar__link:hover,
.utility-bar__link[aria-current="page"] {
  color: var(--orange);
}

/* Contact Us keeps a visual nudge over its neighbours - it is still the
   primary action, just no longer competing with the service links. */
.utility-bar__link--accent {
  color: var(--white);
}

.utility-bar__link--accent::before {
  content: '';
  position: absolute;
  left: -0.75rem;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--orange);
}

.utility-bar__link--accent:hover {
  color: var(--orange);
}

/* About Us dropdown in the utility bar. Reuses .nav__dropdown behaviour
   (hover/click open, hover bridge) but takes the utility bar's quieter type,
   and stays a popover at every width - it is never folded into the
   hamburger menu the way the main nav links are. */
.utility-bar__dropdown {
  align-self: stretch;
}

.utility-bar__dropdown .nav__dropdown__toggle {
  cursor: pointer;
  height: 100%;
}

.utility-bar__dropdown.open .nav__dropdown__toggle {
  color: var(--orange);
}

.utility-bar__dropdown .nav__dropdown__menu {
  top: 100%;
  /* Anchored to the toggle's right edge so the panel opens inwards and
     cannot run off the viewport on a narrow phone. */
  left: auto;
  right: 0;
  min-width: 220px;
  border-radius: 0 0 4px 4px;
}

.utility-bar__dropdown .nav__dropdown__menu a {
  font-size: 0.95rem;
  padding: 0.85rem 1.25rem;
}

/* Search lives in the utility bar */
.utility-bar .nav__search {
  margin: 0;
  /* Full-height so the results panel hangs off the bottom of the bar
     rather than out of the middle of it. */
  align-self: stretch;
}

.utility-bar .nav__search__toggle {
  gap: 0.4rem;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.utility-bar .nav__search__toggle svg {
  width: 14px;
  height: 14px;
}

.utility-bar .nav__search__panel {
  top: calc(100% + 10px);
}

/* Blog / FAQs / Jargon Busters are reference material rather than pages about
   the company, so they sit next to the About Us dropdown rather than in it.
   They stay in this bar at every width - they are not in the hamburger menu. */
@media (max-width: 1024px) {
  .utility-bar__inner { gap: 1.1rem; }
  .utility-bar__nav { gap: 1.1rem; }
}

@media (max-width: 560px) {
  .utility-bar__inner { gap: 1.1rem; }
  .utility-bar__nav { gap: 1.1rem; }
  .utility-bar__link,
  .utility-bar .nav__search__toggle { font-size: 0.68rem; letter-spacing: 0.05em; }
  .nav__search__label { display: none; }
}

/* Phones: seven items will not fit one row, so the bar wraps to two and
   grows instead of holding its 36px. Wrapping rather than scrolling on
   purpose - a scroller would need overflow-x, which forces overflow-y to
   compute as auto and would clip the About Us and search popovers. */
@media (max-width: 700px) {
  .utility-bar__inner {
    height: auto;
    min-height: var(--utility-h);
    flex-wrap: wrap;
    row-gap: 0;
    padding: 0.3rem 0;
  }
  .utility-bar__nav {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem 0.95rem;
    /* Stretching to a wrapped row's height would drag the dropdown and
       search panels away from their toggles. */
    align-self: center;
  }
  .utility-bar__dropdown,
  .utility-bar .nav__search { align-self: center; }
  /* Going static hands the menu's positioning up to .utility-bar, so it
     hangs off the bottom of the whole two-row bar instead of opening over
     the wrapped row - the same place the search panel lands. Needs the extra
     class to outrank the later `.nav__dropdown { position: relative }`. */
  .utility-bar .utility-bar__dropdown { position: static; }
  .utility-bar__dropdown .nav__dropdown__menu { top: 100%; right: 0; }
  .utility-bar__abbr { display: none; }
}

/* ---- NAVIGATION ---- */

.nav {
  position: relative;
  z-index: 10;
  background: var(--dark);
  transition: box-shadow 0.3s;
}

.nav.scrolled {
  box-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: var(--nav-h);
  gap: 1.5rem;
}

/* The nav needs more breathing room than the 960px content container,
   so it gets its own wider max-width while sections stay unaffected. */
.nav .container {
  max-width: 1240px;
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  line-height: 1;
}

.nav__inner .nav-logo {
  margin-left: 2.5rem;
}

.nav-logo__img {
  height: 44px;
  width: auto;
  display: block;
}

/* Fallback text logo (hidden when image loads) */
.nav-logo__wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.8rem;
  text-transform: lowercase;
  letter-spacing: -0.02em;
  color: var(--white);
  display: flex;
  align-items: flex-start;
  gap: 2px;
}

.nav-logo__wordmark .it-badge {
  font-size: 0.6rem;
  font-family: var(--font-body);
  font-weight: 700;
  background: transparent;
  border: 1.5px solid var(--orange);
  color: var(--orange);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  letter-spacing: 0;
  flex-shrink: 0;
}

.nav-logo__tagline {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--light-grey);
}

/* Footer logo — slightly larger */
.footer__brand .nav-logo__img {
  height: 50px;
}

/* Nav links */
.nav__links {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-shrink: 0;
  /* Pushed to the right edge so the service links line up under the
     utility menu above, instead of trailing off mid-row now that the
     Contact/search/login cluster has moved out of this bar. */
  margin-left: auto;
}

.nav__links > a,
.nav__links > .nav__dropdown,
.nav__links > .nav__search {
  flex-shrink: 0;
}

.nav__links a {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--light-grey);
  white-space: nowrap;
  transition: color 0.2s;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}

.nav__links a:hover,
.nav__links a.active {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

.nav__dropdown { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; }
.nav__dropdown > a { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.nav__dropdown > a::after { content: '▾'; font-size: 0.7em; line-height: 1; }
.nav__dropdown__menu {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--dark);
  border-top: 2px solid var(--orange);
  min-width: 160px;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  z-index: 200;
  transition: opacity 0.15s ease, visibility 0s linear 0.3s;
}

/* Invisible hover bridge covering the gap between the About link and the menu */
.nav__dropdown__menu::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}
.nav__dropdown__menu a {
  display: block;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.8);
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}
.nav__dropdown__menu a:hover { color: var(--orange); background: rgba(255,255,255,0.05); }
.nav__dropdown:hover .nav__dropdown__menu,
.nav__dropdown:focus-within .nav__dropdown__menu,
.nav__dropdown.open .nav__dropdown__menu {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
}

.nav__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  transition: all 0.3s;
}

/* Right-hand nav cluster (hamburger) - only exists below the nav
   breakpoint; hidden above it so it adds no flex gap after the links. */
.nav__right {
  display: none;
  align-items: center;
  gap: 1rem;
}

/* Search */
.nav__search {
  position: relative;
  display: flex;
  align-items: center;
  /* Tighten the 1.6rem nav gap on either side of the search icon */
  margin-left: -1.15rem;
  margin-right: -1.15rem;
}

.nav__search__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--light-grey);
  cursor: pointer;
  padding: 6px;
  transition: color 0.2s;
}

.nav__search__toggle svg {
  width: 20px;
  height: 20px;
}

.nav__search__toggle:hover,
.nav__search__toggle:focus-visible,
.nav__search.open .nav__search__toggle {
  color: var(--orange);
}

.nav__search__panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(320px, 90vw);
  background: var(--dark);
  border-top: 2px solid var(--orange);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
  z-index: 300;
}

.nav__search.open .nav__search__panel {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

.nav__search__input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,0.06);
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  color: var(--white);
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
}

.nav__search__input:focus {
  outline: none;
  border-bottom-color: var(--orange);
}

.nav__search__input::placeholder {
  color: var(--mid-grey);
}

.nav__search__input::-webkit-search-cancel-button {
  filter: invert(0.7);
}

.nav__search__results {
  max-height: 320px;
  overflow-y: auto;
}

.nav__search__result {
  display: block;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background 0.2s;
}

.nav__search__result:last-child {
  border-bottom: none;
}

.nav__search__result-title {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--white);
  transition: color 0.2s;
}

.nav__search__result-desc {
  display: block;
  font-size: 0.75rem;
  color: var(--mid-grey);
  margin-top: 2px;
  line-height: 1.4;
}

.nav__search__result:hover,
.nav__search__result.active {
  background: rgba(255,255,255,0.05);
}

.nav__search__result:hover .nav__search__result-title,
.nav__search__result.active .nav__search__result-title {
  color: var(--orange);
}

.nav__search__empty {
  padding: 0.85rem 1rem;
  font-size: 0.8rem;
  color: var(--mid-grey);
}

/* ---- HERO ---- */

.hero {
  min-height: 100vh;
  max-height: 100vh;
  background: var(--dark);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-top: var(--header-h);
}

.hero::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 55%;
  height: 130%;
  background: var(--orange);
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
  opacity: 0.08;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--orange);
}

.hero__photo {
  position: absolute;
  top: 0;
  right: 0;
  width: 45%;
  height: 100%;
  background-image: url('../images/alcom-it-support-van-fleet.jpg');
  background-size: 140%;
  background-position: 65% 60%;
  clip-path: polygon(15.5% 0, 100% 0, 100% 100%, 1.4% 100%);
  opacity: 0.12;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.hero__content { padding: 2rem 0; text-align: left; }

.hero__eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--orange);
  margin-bottom: 1.5rem;
  display: block;
}

.hero__title {
  color: var(--white);
  font-size: clamp(1.9rem, 4.2vw, 4.2rem);
  line-height: 1.08;
  margin-bottom: 1rem;
  white-space: nowrap;
}

.hero__title span { color: var(--orange); }

.hero__tagline {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.4;
  margin-bottom: 0.75rem;
  max-width: 480px;
}

.hero__sub {
  font-size: 1.15rem;
  color: var(--light-grey);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  max-width: 480px;
}

.hero__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero__actions .btn {
  padding: 0.9rem 1.5rem;
}

.hero__visual {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.hero__logo-large {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(5rem, 10vw, 9rem);
  text-transform: lowercase;
  color: var(--white);
  letter-spacing: -0.01em;
  line-height: 0.9;
  position: relative;
  opacity: 0.12;
  user-select: none;
}

/* ---- BUTTONS ---- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.9rem 2rem;
  border-radius: 2px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn--primary {
  background: var(--orange);
  color: var(--white);
}

.btn--primary:hover {
  background: #e55d00;
  transform: translateY(-1px);
}

.btn--outline {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,0.3);
}

.btn--outline:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.btn--outline-dark {
  background: transparent;
  color: var(--dark);
  border: 2px solid var(--dark);
}

.btn--outline-dark:hover {
  background: var(--dark);
  color: var(--white);
}

.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ---- SERVICES GRID ---- */

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1px;
  background: var(--light-grey);
}

.service-card {
  background: var(--white);
  padding: 1.75rem 2rem;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--orange);
  transform: scaleX(0);
  transition: transform 0.3s;
  transform-origin: left;
}

.service-card:hover::before { transform: scaleX(1); }
.service-card:hover { background: var(--off-white); cursor: pointer; }

.service-card__icon {
  width: 42px;
  height: 42px;
  margin-bottom: 1rem;
  color: var(--orange);
}

.service-card__title {
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
}

.service-card__title a {
  color: inherit;
  transition: color 0.2s;
}

.service-card__title a:hover {
  color: var(--orange);
}

.service-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.service-card__body {
  color: var(--mid-grey);
  margin-bottom: 0;
  font-size: 0.95rem;
  line-height: 1.65;
}

.service-card__link {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: gap 0.2s;
  position: relative;
  z-index: 2;
}

.service-card__link:hover { gap: 0.7rem; }

.service-card__body + .service-card__link { margin-top: 1.25rem; }

/* ---- SERVICES INTRO CHECKLIST ---- */

.services-intro-lead {
  margin-bottom: 1.25rem;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--dark);
}

.services-checklist {
  list-style: none;
  max-width: 640px;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.services-checklist li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--mid-grey);
  font-size: 1.2rem;
  line-height: 1.4;
}

.services-checklist svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--orange);
}

.services-intro-outro {
  margin-bottom: 3rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--dark);
}

.service-card__suboptions {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.4rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  position: relative;
  z-index: 2;
}

.service-card__suboptions a {
  padding: 0 0.9rem;
  border-left: 1px solid var(--light-grey);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--dark);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color 0.2s, text-decoration-color 0.2s;
}

.service-card__suboptions a:first-child {
  padding-left: 0;
  border-left: none;
}

.service-card__suboptions a:hover {
  color: var(--orange);
  text-decoration-color: var(--orange);
}

/* ---- STATS BAR ---- */

.stats-bar {
  background: var(--orange);
  padding: 3rem 0;
}

.stats-bar__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}

.stat__number {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 3.5rem;
  color: var(--white);
  line-height: 1;
  display: block;
}

.stat__label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.7);
  margin-top: 0.5rem;
}

/* ---- WHY CHOOSE US ---- */

.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.why-list { margin-top: 2rem; }

.why-item {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--light-grey);
}

.why-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.why-item__icon {
  width: 40px;
  height: 40px;
  background: var(--orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--white);
}

.why-item__icon svg { width: 18px; height: 18px; }

.why-item__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.4rem;
}

.why-item__body {
  font-size: 0.95rem;
  color: var(--mid-grey);
  line-height: 1.7;
}

.why-visual {
  position: relative;
}

.why-visual__bg {
  background: var(--dark);
  border-radius: 2px;
  padding: 3rem;
  position: relative;
  overflow: hidden;
}

.why-visual__bg::after {
  content: '';
  position: absolute;
  top: -30%;
  right: -20%;
  width: 70%;
  height: 80%;
  background: var(--orange);
  opacity: 0.1;
  border-radius: 50%;
}

.why-visual__quote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--white);
  line-height: 1.6;
  text-align: center;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}

.why-visual__attr {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--orange);
  text-align: center;
  position: relative;
  z-index: 1;
}

/* ---- DARK SECTION ---- */

.section--dark {
  background: var(--dark);
}

.section--dark h2,
.section--dark h3,
.section--dark p,
.section--dark .section-intro {
  color: var(--white);
}

.section--dark .section-intro { color: var(--light-grey); }

/* ---- CTA BANNER ---- */

.cta-banner {
  background: var(--orange);
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: 'alcom';
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18rem;
  color: rgba(255,255,255,0.06);
  position: absolute;
  right: -2rem;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
  pointer-events: none;
  text-transform: lowercase;
}

.cta-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.cta-banner h2 { color: var(--white); }
.cta-banner p  { color: rgba(255,255,255,0.8); margin-top: 0.75rem; }

.cta-banner .btn--outline {
  border-color: rgba(255,255,255,0.5);
}

/* ---- SERVICE PAGE HERO ---- */

.page-hero {
  background: var(--dark);
  padding: calc(9rem + var(--header-extra)) 0 5rem;
  position: relative;
  overflow: hidden;
}

.page-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--orange);
}

.page-hero__accent {
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
  background: var(--orange);
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
  opacity: 0.06;
}

.page-hero h1 { color: var(--white); margin-bottom: 1rem; }
.page-hero h1 span { color: var(--orange); display: block; }
.page-hero p  { color: var(--light-grey); max-width: 600px; font-size: 1.15rem; line-height: 1.8; }

/* ---- ANSWER-FIRST HERO CTA (inner marketing pages) ----
   Lets a time-pressured visitor see the answer and act without scrolling.
   Used inside .page-hero: .hero-lead + .hero-actions + .hero-reassure */
.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; }

/* ---- FEATURE LIST (service pages) ---- */

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.75rem;
  margin-top: 3rem;
}

.feature-card {
  background: var(--white);
  padding: 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, transform 0.3s, box-shadow 0.3s;
}

.feature-card--link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.feature-card--link:hover,
.feature-card--link:focus,
.feature-card--link:visited {
  color: inherit;
  text-decoration: none;
}

.feature-card--link:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

.feature-card:hover {
  border-color: var(--orange);
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0,0,0,0.09);
}

.feature-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 1.25rem;
  transition: transform 0.3s;
}

.feature-card:hover .feature-card__icon {
  transform: scale(1.08);
}

.feature-card__icon svg {
  width: 26px;
  height: 26px;
}

.feature-card__title {
  font-size: 1.4rem;
  margin-bottom: 0.85rem;
  color: var(--dark);
}

.feature-card__body {
  font-size: 1.05rem;
  color: var(--mid-grey);
  line-height: 1.75;
}

/* ---- PRODUCT GRID (IT Products page) ---- */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.75rem;
  margin-top: 3rem;
}

.product-card--center {
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  max-width: 260px;
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--light-grey);
  border-radius: 10px;
  padding: 2.25rem 1.75rem 2rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.product-card:hover {
  border-color: var(--orange);
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0,0,0,0.09);
}

.product-card__icon {
  width: 64px;
  height: 64px;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s;
}

.product-card:hover .product-card__icon {
  transform: scale(1.08);
}

.product-card__icon svg {
  width: 28px;
  height: 28px;
}

.product-card__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--dark);
  margin-bottom: 0.6rem;
}

.product-card__body {
  color: var(--mid-grey);
  line-height: 1.65;
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
}

.product-card__arrow {
  width: 20px;
  height: 20px;
  color: var(--orange);
  margin-top: auto;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s, transform 0.25s;
}

.product-card:hover .product-card__arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ---- BULLET LIST ---- */

.brand-list {
  margin: 1.5rem 0;
}

.brand-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dark);
  margin-bottom: 0.75rem;
}

.brand-list li::before {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid var(--orange);
  border-radius: 50%;
  flex-shrink: 0;
}

/* On dark sections the default var(--dark) label colour is invisible */
.section--dark .brand-list li {
  color: var(--white);
}

.brand-list--check li::before {
  content: '\2713';
  width: auto;
  height: auto;
  border: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  color: #2e7d32;
}

/* Modifier for lists holding full sentences rather than short compact labels.
   The default .brand-list li is display:flex, which splits a link followed by
   trailing text into separate flex items that each wrap independently -
   producing a broken, staggered layout. It's also bold/uppercase/letter-spaced,
   which is fine for short labels but hard to read across a full sentence. */
.brand-list--sentence li {
  display: block;
  position: relative;
  padding-left: 1.75rem;
  font-weight: 400;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.6;
  color: var(--mid-grey);
  margin-bottom: 0.85rem;
}

.brand-list--sentence li::before {
  position: absolute;
  left: 0;
  top: 0.45rem;
  margin-top: 0;
}

/* Links stay orange to read as links, but a lighter weight + underline
   keeps them from looking like heavy bold text mid-sentence. */
.brand-list--sentence li a {
  color: var(--orange);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- PRICING CARD ---- */

.pricing-card {
  margin-top: 3rem;
  max-width: 900px;
  border: 1px solid var(--light-grey);
  border-radius: 2px;
  overflow: hidden;
  background: #fff;
}

.pricing-card__header {
  background: var(--orange);
  padding: 2.5rem 2.5rem 2rem;
  text-align: center;
}

.pricing-card__label {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  margin-bottom: 0.75rem;
}

.pricing-card__price {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 3.5rem;
  color: #fff;
  line-height: 1;
}

.pricing-card__currency {
  font-size: 1.75rem;
  vertical-align: top;
  position: relative;
  top: 0.5rem;
}

.pricing-card__from {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.85);
  margin-right: 0.5rem;
}

.pricing-card__unit {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.85);
  margin-left: 0.5rem;
}

.pricing-card__note {
  color: rgba(255,255,255,0.9);
  font-size: 0.9rem;
  margin-top: 0.75rem;
}

.pricing-card__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  padding: 2.5rem;
}

.pricing-card__col-title {
  font-size: 1rem;
  color: var(--dark);
  margin-bottom: 1.25rem;
}

.pricing-card__upsell {
  margin-top: 1.25rem;
  font-size: 0.9rem;
  color: var(--mid-grey);
  line-height: 1.7;
}

.pricing-card__upsell a { color: var(--orange); font-weight: 600; }

.pricing-card__footer {
  text-align: center;
  padding: 0 2.5rem 2.5rem;
}

.check-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--dark);
  margin-bottom: 0.9rem;
}

.check-list li::before {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  line-height: 1;
}

.check-list--yes li::before {
  content: '\2713';
  background: rgba(22,163,74,0.12);
  color: #16a34a;
}

.check-list--no li {
  color: var(--mid-grey);
}

.check-list--no li::before {
  content: '\2013';
  background: var(--light-grey);
  color: var(--mid-grey);
}

@media (max-width: 768px) {
  .pricing-card__body { grid-template-columns: 1fr; gap: 2rem; }
  .pricing-card__price { font-size: 2.75rem; }
}

/* ---- SPLIT SECTION ---- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.split--reverse .split__visual { order: -1; }

.split__visual {
  position: relative;
}

.split__img-box {
  background: var(--light-grey);
  border-radius: 2px;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.split__img-box .icon-placeholder {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 8rem;
  color: var(--mid-grey);
  opacity: 0.2;
  text-transform: uppercase;
}

.split__img-accent {
  position: absolute;
  bottom: -1rem;
  right: -1rem;
  width: 60%;
  height: 60%;
  background: var(--orange);
  opacity: 0.12;
  border-radius: 2px;
  pointer-events: none;
}

/* ---- CONTACT PAGE ---- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 4rem;
  align-items: start;
}

.contact-info h3 { margin-bottom: 1.5rem; }

.contact-detail {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  align-items: flex-start;
}

.contact-detail__icon {
  width: 36px;
  height: 36px;
  color: var(--orange);
  flex-shrink: 0;
  margin-top: 2px;
}

.contact-detail__label {
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mid-grey);
  margin-bottom: 0.25rem;
}

.contact-detail__value {
  font-size: 0.95rem;
  color: var(--dark);
}

/* ---- QUICK CONTACT (HOME PAGE) ---- */

.quick-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-top: 2.5rem;
}

.quick-contact-grid .contact-detail { margin-bottom: 1.75rem; }
.quick-contact-grid .contact-detail:last-child { margin-bottom: 0; }

/* Form */
.contact-form { background: var(--off-white); padding: 2.5rem; }

.form-group { margin-bottom: 1.5rem; }

.form-label {
  display: block;
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dark);
  margin-bottom: 0.5rem;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--dark);
  background: var(--white);
  border: 1px solid var(--light-grey);
  border-radius: 2px;
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--orange);
}

/* appearance:none above drops the native arrow, so draw a chevron (--dark) */
.form-select {
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%233c3c3b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
  cursor: pointer;
  -moz-appearance: none;
  appearance: none;
}

.form-textarea { min-height: 140px; resize: vertical; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* ---- FOOTER ---- */

.footer {
  background: #222221;
  color: var(--light-grey);
  padding: 4rem 0 2rem;
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

.footer__brand .nav-logo { margin-bottom: 1rem; }

.footer__tagline {
  font-size: 0.9rem;
  color: var(--mid-grey);
  line-height: 1.7;
  max-width: 260px;
  margin-top: 0.75rem;
}

.footer__heading {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--orange);
  margin-bottom: 1.25rem;
}

.footer__links li { margin-bottom: 0.6rem; }

.footer__links a {
  font-size: 0.9rem;
  color: var(--mid-grey);
  transition: color 0.2s;
}

.footer__links a:hover { color: var(--orange); }

/* Opening hours line in the "Get in Touch" column (was an inline style
   attribute repeated on every page before the footer became an include). */
.footer__hours {
  color: var(--mid-grey);
  font-size: 0.85rem;
  margin-top: 0.5rem;
  line-height: 1.6;
}

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer__copy {
  font-size: 0.85rem;
  color: var(--mid-grey);
}

.footer__legal {
  display: flex;
  gap: 1.5rem;
}

.footer__legal a {
  font-size: 1rem;
  font-weight: 600;
  color: var(--mid-grey);
  transition: color 0.2s;
}

.footer__legal a:hover { color: var(--orange); }

/* ---- BREADCRUMB ---- */

.breadcrumb {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1.5rem;
}

.breadcrumb a,
.breadcrumb span {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mid-grey);
}

.breadcrumb a:hover { color: var(--orange); }
.breadcrumb .sep { color: var(--mid-grey); opacity: 0.5; }
.breadcrumb .current { color: var(--orange); }

/* ---- TESTIMONIALS ---- */

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.testimonial-card {
  background: var(--white);
  padding: 2rem;
  border-left: 4px solid var(--orange);
}

.section--dark .testimonial-card__quote {
  font-style: italic;
  font-size: 1rem;
  color: var(--dark);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.testimonial-card__author {
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--orange);
}

.testimonial-card__company {
  font-size: 0.8rem;
  color: var(--mid-grey);
  margin-top: 0.2rem;
}

/* ---- PROCESS STEPS ---- */

.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  position: relative;
  margin-top: 3rem;
}

/* Four across on top (01-04), with 05 & 06 dropped into the middle two
   columns underneath instead of sitting flush left. */
.process-steps--center {
  grid-template-columns: repeat(4, 1fr);
}
.process-steps--center .process-step:nth-child(5) { grid-column: 2; }
.process-steps--center .process-step:nth-child(6) { grid-column: 3; }

@media (max-width: 768px) {
  .process-steps--center {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  .process-steps--center .process-step:nth-child(5),
  .process-steps--center .process-step:nth-child(6) {
    grid-column: auto;
  }
}

.process-step {
  padding: 2rem;
  text-align: center;
  position: relative;
}

.process-step::after {
  content: '→';
  position: absolute;
  right: -0.5rem;
  top: 2.5rem;
  color: var(--orange);
  font-size: 1.5rem;
  font-weight: 700;
}

.process-step:last-child::after { display: none; }

.process-step__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 4rem;
  color: var(--light-grey);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.process-step__title {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: var(--dark);
}

.process-step__body {
  font-size: 0.9rem;
  color: var(--mid-grey);
  line-height: 1.6;
}

/* ---- RESPONSIVE ---- */

@media (max-width: 1024px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .stats-bar__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}

/* Nav collapses to the hamburger earlier than the general content
   breakpoint below — the full link row needs more width than it can
   fairly claim once the viewport gets much under ~1250px. */
@media (max-width: 1250px) {
  .nav__links { display: none; }
  /* Dropdowns inside the collapsed hamburger menu unfold in place instead of
     floating. Scoped to .nav__links so the utility bar's About Us menu keeps
     its popover behaviour at every width - it is not in the hamburger. */
  .nav__links .nav__dropdown { flex-direction: column; align-items: flex-start; }
  .nav__links .nav__dropdown__menu {
    display: none;
    position: static;
    visibility: visible;
    opacity: 1;
    transition: none;
    box-shadow: none;
    border-radius: 0;
    margin-top: 0.75rem;
  }
  .nav__links .nav__dropdown__menu::before { display: none; }
  .nav__links .nav__dropdown:hover .nav__dropdown__menu,
  .nav__links .nav__dropdown:focus-within .nav__dropdown__menu { display: none; }
  .nav__links .nav__dropdown.open .nav__dropdown__menu { display: block; }
  .nav__links.open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    background: var(--dark);
    padding: 1.5rem 2rem;
    gap: 1rem;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .nav__hamburger { display: flex; }
  /* Links are hidden here, so the hamburger claims the right edge. */
  .nav__right { display: flex; margin-left: auto; }
}

@media (max-width: 768px) {
  .hero { max-height: none; min-height: 100vh; }
  .hero__title { white-space: normal; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { display: none; }
  .hero__photo { display: none; }
  .why-grid { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__visual { order: 0; }
  .contact-grid { grid-template-columns: 1fr; }
  .quick-contact-grid { grid-template-columns: 1fr; gap: 2rem; }
  .cta-banner__inner { flex-direction: column; text-align: center; }
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer__bottom { flex-direction: column; text-align: center; }
  .form-row { grid-template-columns: 1fr; }
  .process-step::after { display: none; }
}

/* ---- UTILITIES ---- */
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }
.text-center { text-align: center; }
.bg-offwhite { background: var(--off-white); }
.bg-dark { background: var(--dark); }
.bg-orange { background: var(--orange); }

/* ---- FIND OUT MORE / PERSON MODAL ---- */
.find-out-more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.75rem;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--orange);
  cursor: pointer;
}
.find-out-more:hover { text-decoration: underline; }
.find-out-more svg { transition: transform 0.2s ease; }
.find-out-more:hover svg { transform: translateX(3px); }
.find-out-more--reviews { color: var(--mid-grey); }

.person-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0,0,0,0.6);
}
.person-modal.open { display: flex; }
.person-modal__dialog {
  position: relative;
  background: #fff;
  border-radius: 8px;
  max-width: 560px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 2.5rem;
}
.person-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--off-white);
  border: 1px solid var(--light-grey);
  border-radius: 50%;
  color: var(--dark);
  cursor: pointer;
  padding: 0;
}
.person-modal__close:hover { color: var(--orange); border-color: var(--orange); }
.person-modal__name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--dark);
  margin: 0 0 0.25rem;
  letter-spacing: 0.02em;
}
.person-modal__role {
  color: var(--orange);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1.25rem;
}
.person-modal__body {
  color: var(--mid-grey);
  font-size: 0.95rem;
  line-height: 1.8;
}

/* ---- Customer review cards (inside review modals) ---- */
.review-item {
  border: 1px solid var(--light-grey);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.review-item:last-child { margin-bottom: 0; }
.review-item__text {
  color: var(--dark);
  font-style: italic;
  margin: 0 0 0.75rem;
}
.review-item__rating {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--orange);
}
.review-item__rating::before {
  content: "Rating: ";
  font-weight: 600;
  color: var(--mid-grey);
}
.review-item__rating--stars {
  font-size: 1.05rem;
  letter-spacing: 0.12em;
}
.review-item__rating--stars::before { content: none; }

.reviews-period {
  font-family: var(--font-body);
  text-transform: none;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--mid-grey);
  white-space: nowrap;
}

/* ============================================
   BLOG - listing grid + article typography
   ============================================ */

/* ---- Blog listing ---- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
  margin-top: 1rem;
}

.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--light-grey);
  border-radius: 12px;
  overflow: hidden;
  color: var(--dark);
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.blog-card:hover {
  border-color: var(--orange);
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0,0,0,0.09);
}
.blog-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--off-white);
}
.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.blog-card:hover .blog-card__media img { transform: scale(1.04); }
.blog-card__noimg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dark);
}
.blog-card__noimg span {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--orange);
  font-size: 1.4rem;
}
.blog-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem;
}
.blog-card__meta {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mid-grey);
  margin-bottom: 0.75rem;
}
.blog-card__title {
  font-size: 1.35rem;
  line-height: 1.1;
  color: var(--dark);
  margin-bottom: 0.75rem;
  transition: color 0.3s;
}
.blog-card:hover .blog-card__title { color: var(--orange); }
.blog-card__excerpt {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--mid-grey);
  margin-bottom: 1.25rem;
}
.blog-card__more {
  margin-top: auto;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.82rem;
  color: var(--orange);
}

/* ---- Article meta (hero) ---- */
.blog-meta {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--light-grey);
}
.blog-meta__author { font-weight: 700; color: var(--white); }
.blog-meta__sep { color: var(--orange); }
.page-hero--article h1 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); }

/* ---- Article body ---- */
.container--narrow { max-width: 800px; }

.blog-article__hero {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 2.5rem;
  border: 1px solid var(--light-grey);
}
.blog-article__hero img { width: 100%; height: auto; }

.blog-article__body { font-size: 1.12rem; }
.blog-article__body > *:first-child { margin-top: 0; }
.blog-article__body p {
  margin: 0 0 1.5rem;
  line-height: 1.85;
}
.blog-article__body h2,
.blog-article__body h3,
.blog-article__body h4 {
  color: var(--dark);
  margin: 2.5rem 0 1rem;
}
.blog-article__body h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); }
.blog-article__body h3 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); }
.blog-article__body a {
  color: var(--orange);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.blog-article__body a:hover { text-decoration: none; }
.blog-article__body ul,
.blog-article__body ol {
  margin: 0 0 1.5rem 1.25rem;
  padding-left: 1rem;
}
.blog-article__body ul { list-style: disc; }
.blog-article__body ol { list-style: decimal; }
.blog-article__body li {
  margin-bottom: 0.6rem;
  line-height: 1.8;
  color: var(--dark);
}
.blog-article__body img,
.blog-article__body figure {
  max-width: 100%;
  height: auto;
  margin: 2rem auto;
  border-radius: 10px;
}
.blog-article__body figure img { border-radius: 10px; }
.blog-article__body figcaption {
  font-size: 0.9rem;
  color: var(--mid-grey);
  text-align: center;
  margin-top: 0.5rem;
}
.blog-article__body blockquote {
  border-left: 4px solid var(--orange);
  margin: 2rem 0;
  padding: 0.5rem 0 0.5rem 1.5rem;
  font-style: italic;
  color: var(--mid-grey);
  font-size: 1.15rem;
}
.blog-article__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 0.98rem;
}
.blog-article__body th,
.blog-article__body td {
  border: 1px solid var(--light-grey);
  padding: 0.75rem 1rem;
  text-align: left;
}
.blog-article__body th { background: var(--off-white); font-weight: 700; }
.blog-article__body iframe { max-width: 100%; margin: 2rem 0; border-radius: 10px; }

/* Tags + back link */
.blog-article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--light-grey);
}
.blog-tag {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mid-grey);
  background: var(--off-white);
  border: 1px solid var(--light-grey);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
}
.blog-article__back { margin-top: 2.5rem; }

/* ---- Blog pagination ---- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  margin-top: 3.5rem;
}
.pagination__num,
.pagination__arrow {
  min-width: 2.6rem;
  height: 2.6rem;
  padding: 0 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--dark);
  background: var(--white);
  border: 1px solid var(--light-grey);
  border-radius: 8px;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.pagination__num:hover,
.pagination__arrow:hover {
  border-color: var(--orange);
  color: var(--orange);
}
.pagination__num.is-active {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
}
.pagination__arrow.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}
.blog-pagecount {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--mid-grey);
}

/* ============================================
   LEGAL / POLICY PAGES
   ============================================ */
.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;
}

.legal-content {
  max-width: 820px;
}

.legal-content .legal-tagline {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--orange);
  margin-bottom: 2rem;
  display: block;
}

.legal-content .legal-tagline + p,
.legal-content .legal-intro {
  font-size: 1.18rem;
  color: var(--dark);
  line-height: 1.75;
}

.legal-content h3 {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  color: var(--dark);
  margin-top: 2.75rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--off-white);
}

.legal-content h4 {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.05rem;
  color: var(--dark);
  margin-top: 1.85rem;
  margin-bottom: 0.5rem;
}

.legal-content p {
  color: var(--mid-grey);
  line-height: 1.8;
  margin-bottom: 1rem;
}

.legal-content ul,
.legal-content ol {
  color: var(--mid-grey);
  line-height: 1.8;
  margin: 0 0 1.35rem 0;
  padding-left: 1.5rem;
}

.legal-content ul li { list-style: disc; margin-bottom: 0.55rem; padding-left: 0.35rem; }
.legal-content ol li { list-style: decimal; margin-bottom: 0.55rem; padding-left: 0.35rem; }
.legal-content li::marker { color: var(--orange); }

.legal-content a {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}
.legal-content a:hover { color: var(--dark); }

.legal-content .legal-meta {
  margin-top: 2.5rem;
  font-size: 0.95rem;
  color: var(--mid-grey);
}

.legal-content .legal-back {
  margin-top: 2.5rem;
  display: inline-block;
}

/* Legal landing - list of policy links */
.legal-pages {
  display: grid;
  gap: 0.85rem;
  margin-top: 2rem;
  max-width: 640px;
}
.legal-pages li { margin: 0; }
.legal-pages a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.5rem;
  background: var(--off-white);
  border: 1px solid transparent;
  border-left: 3px solid var(--orange);
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--dark);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.legal-pages a svg {
  color: var(--orange);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.legal-pages a:hover {
  background: var(--white);
  border-color: var(--light-grey);
  border-left-color: var(--orange);
  transform: translateX(3px);
}
.legal-pages a:hover svg { transform: translateX(3px); }

/* Quote CTA - the centred "Get a quote" block on product and service pages,
   linking to /enquiry/?from=<page> which pre-fills the enquiry for them. */
.quote-cta { max-width: 680px; margin: 0 auto; text-align: center; }
.quote-cta h2 { margin-bottom: 1.5rem; }
.quote-cta p { color: var(--mid-grey); line-height: 1.8; margin-bottom: 1rem; }
.quote-cta .btn { margin-top: 1rem; }
.quote-cta .quote-cta__alt { margin: 1.75rem 0 0; font-size: 0.95rem; }
.quote-cta__alt a { color: var(--orange); font-weight: 600; text-decoration: none; }
.quote-cta__alt a:hover { text-decoration: underline; }