/* ============================================================
   JTS LPG SERVICES
   HOMEPAGE ONLY
============================================================ */


/* ============================================================
   HERO
============================================================ */

.hero-shell {
  padding: 0;

  background: #080808;
}


.hero-card {
  position: relative;

  isolation: isolate;

  min-height: 720px;

  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(380px, 0.8fr);

  align-items: center;

  gap: 76px;

  overflow: hidden;

  padding:
    145px
    70px
    70px;

  background: #050505;

  color: #ffffff;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.1
    );

  border-radius:
    0
    0
    28px
    28px;
}


/* ============================================================
   HERO IMAGE
============================================================ */

.hero-media {
  position: absolute;

  z-index: -2;

  inset: 0;
}


.hero-media img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center;

  opacity: 0.78;

  filter:
    saturate(0.9)
    contrast(1.03);
}


.hero-card::after {
  content: "";

  position: absolute;

  z-index: -1;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.94) 0%,
      rgba(0, 0, 0, 0.82) 31%,
      rgba(0, 0, 0, 0.57) 54%,
      rgba(0, 0, 0, 0.28) 76%,
      rgba(0, 0, 0, 0.18) 100%
    );
}


/* ============================================================
   HERO COPY
============================================================ */

.hero-copy {
  position: relative;

  z-index: 2;

  max-width: 720px;
}


.hero-copy h1 span {
  display: block;

  color: var(--orange);
}


.hero-lead {
  max-width: 660px;

  margin:
    30px
    0
    0;

  color: #d2d2d0;

  font-size: 18px;

  line-height: 1.7;
}


/* ============================================================
   HERO FORM
============================================================ */

.hero-enquiry {
  position: relative;

  z-index: 3;

  width: 100%;

  max-width: 430px;

  justify-self: end;

  padding: 32px;

  background:
    rgba(
      13,
      13,
      13,
      0.62
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.18
    );

  border-radius: 26px;

  box-shadow:
    0
    28px
    70px
    rgba(
      0,
      0,
      0,
      0.35
    );

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}


.hero-enquiry::before {
  content: "";

  position: absolute;

  top: 0;
  left: 32px;

  width: 62px;
  height: 3px;

  background: var(--orange);

  border-radius: var(--pill);
}


.hero-enquiry h2 {
  margin:
    0
    0
    28px;

  color: #ffffff;

  font-size: 3rem;

  line-height: 0.94;
}


.hero-form-grid {
  display: grid;

  gap: 20px;
}


.hero-field {
  display: flex;

  flex-direction: column;

  gap: 8px;
}


.hero-field label {
  color: #f3f3f3;

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 16px;

  font-weight: 700;

  line-height: 1.2;
}


.hero-field input,
.hero-field select {
  width: 100%;

  min-height: 54px;

  padding:
    12px
    19px;

  background:
    rgba(
      255,
      255,
      255,
      0.96
    );

  color: #111111;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.7
    );

  border-radius: var(--pill);

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size: 16px;

  line-height: 1.2;
}


.hero-field input:focus,
.hero-field select:focus {
  background: #ffffff;

  border-color: var(--orange);

  outline:
    3px solid
    rgba(
      233,
      116,
      23,
      0.18
    );
}


.hero-submit {
  width: 100%;

  min-height: 56px;

  margin-top: 24px;

  padding:
    12px
    24px;

  background: var(--orange);

  color: #080808;

  border:
    1px solid
    var(--orange);

  border-radius: var(--pill);

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 17px;

  font-weight: 800;
}


.hero-submit:hover {
  background: var(--amber);
}


/* ============================================================
   USP STRIP
============================================================ */

.usp-strip {
  background: var(--orange);

  color: #ffffff;
}


.usp-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );
}


.usp-item {
  min-height: 230px;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  justify-content: center;

  padding:
    34px
    32px;

  border-right:
    1px solid
    rgba(
      255,
      255,
      255,
      0.22
    );
}


.usp-item:last-child {
  border-right: 0;
}


.usp-icon {
  margin-bottom: 20px;

  color: #ffffff;

  font-size: 2rem;

  line-height: 1;
}


.usp-big {
  display: block;

  color: #ffffff;

  font-family:
    "Barlow Condensed",
    Arial,
    sans-serif;

  font-size:
    clamp(
      2.3rem,
      2.7vw,
      3.15rem
    );

  font-weight: 800;

  line-height: 0.94;

  text-transform: uppercase;
}


.usp-title {
  display: block;

  margin-top: 8px;

  color:
    rgba(
      255,
      255,
      255,
      0.94
    );

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 13px;

  font-weight: 800;

  line-height: 1.3;

  letter-spacing: 0.07em;

  text-transform: uppercase;
}


.usp-item p {
  max-width: 260px;

  margin:
    10px
    0
    0;

  color:
    rgba(
      255,
      255,
      255,
      0.82
    );

  font-size: 15px;

  line-height: 1.5;
}


/* ============================================================
   SERVICES
============================================================ */

.services-showcase {
  background: #0b0b0b;
}


/* ============================================================
   LARGE SERVICE CARDS 01 + 02
============================================================ */

.feature-service-card {
  display: grid;

  grid-template-columns:
    minmax(0, 0.92fr)
    minmax(0, 1.08fr);

  gap: 52px;

  align-items: stretch;

  margin-bottom: 30px;

  padding: 32px;

  background: #151515;

  border:
    1px solid
    #292929;

  border-radius: 28px;
}


.feature-service-card.reverse {
  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(0, 0.92fr);
}


.feature-service-card.reverse
.service-image {
  order: 2;
}


/* ============================================================
   SERVICE IMAGE
============================================================ */

.service-image {
  width: 100%;
  height: 100%;

  min-height: 520px;

  overflow: hidden;

  background: #222222;

  border-radius: 22px;
}


.service-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* ============================================================
   SERVICE CONTENT
============================================================ */

.service-content {
  position: relative;

  min-width: 0;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  padding:
    10px
    8px;
}


.service-number {
  position: absolute;

  top: 0;
  right: 0;

  color:
    rgba(
      255,
      255,
      255,
      0.07
    );

  font-family:
    "Barlow Condensed",
    Arial,
    sans-serif;

  font-size: 4.1rem;

  font-weight: 800;

  line-height: 1;
}


.service-icon {
  margin-bottom: 22px;

  color: var(--orange);

  font-size: 2rem;

  line-height: 1;
}


.service-pill {
  min-height: 36px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 22px;

  padding:
    8px
    16px;

  background: #ffffff;

  color: var(--orange);

  border:
    1px solid
    #ffffff;

  border-radius: var(--pill);

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 13px;

  font-weight: 800;

  line-height: 1;

  letter-spacing: 0.055em;

  text-transform: uppercase;
}


.service-content h3 {
  max-width: 620px;

  color: #ffffff;

  font-size: 2.4rem;
}


.service-description {
  max-width: 670px;

  margin:
    20px
    0
    0;

  color: #c6c6c3;

  font-size: 18px;

  line-height: 1.65;
}


/* ============================================================
   SERVICE POINTS
============================================================ */

.service-points {
  width: 100%;

  display: grid;

  gap: 14px;

  margin:
    27px
    0
    28px;

  padding: 0;

  list-style: none;
}


.service-points li {
  display: flex;

  align-items: flex-start;

  gap: 13px;

  padding: 0;

  color: #ededeb;

  border: 0;

  font-size: 17px;

  line-height: 1.5;
}


.service-points li i {
  flex:
    0
    0
    auto;

  margin-top: 2px;

  color: var(--orange);

  font-size: 1.25rem;

  font-weight: 800;

  line-height: 1;
}


.service-experience {
  max-width: 620px;

  margin:
    -2px
    0
    28px;

  color: #a4a4a0;

  font-size: 15px;

  line-height: 1.55;
}


/* ============================================================
   SERVICE PRICE / CTA
============================================================ */

.service-bottom {
  width: 100%;

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 30px;

  margin-top: auto;

  padding-top: 14px;
}


.service-price > span {
  display: block;

  margin-bottom: 4px;

  color: #bdbdb9;

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 12px;

  font-weight: 800;

  line-height: 1.3;

  letter-spacing: 0.07em;

  text-transform: uppercase;
}


.service-price strong {
  display: block;

  color: var(--orange);

  font-family:
    "Barlow Condensed",
    Arial,
    sans-serif;

  font-size: 3.8rem;

  font-weight: 800;

  line-height: 0.9;
}


.service-price small {
  display: block;

  max-width: 340px;

  margin-top: 7px;

  color: #92928f;

  font-size: 13px;

  line-height: 1.45;
}


.service-cta {
  min-height: 52px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  flex:
    0
    0
    auto;

  padding:
    12px
    24px;

  background: var(--orange);

  color: #090909;

  border:
    1px solid
    var(--orange);

  border-radius: var(--pill);

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 16px;

  font-weight: 800;

  line-height: 1;

  white-space: nowrap;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}


.service-cta:hover {
  background: var(--amber);

  color: #090909;

  border-color: var(--amber);

  transform:
    translateY(-2px);
}


/* ============================================================
   MINI SERVICES 03 - 05
============================================================ */

.service-mini-carousel {
  position: relative;
}


.service-mini-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 20px;

  margin-top: 30px;
}


.mini-service-arrow {
  display: none;
}


.mini-service {
  min-height: 620px;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  padding: 30px;

  background: #141414;

  color: #ffffff;

  border:
    1px solid
    #2a2a2a;

  border-radius: 26px;

  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}


.mini-service:hover {
  background: var(--orange);

  color: #111111;

  border-color: var(--orange);

  transform:
    translateY(-6px);
}


.featured-mini-service {
  background: var(--orange);

  color: #111111;

  border-color: var(--orange);
}


/* ============================================================
   MINI SERVICE TOP
============================================================ */

.mini-service-top {
  width: 100%;

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  margin-bottom: 16px;
}


.mini-service-icon {
  color: var(--orange);

  font-size: 2rem;

  line-height: 1;
}


.mini-number {
  color:
    rgba(
      255,
      255,
      255,
      0.08
    );

  font-family:
    "Barlow Condensed",
    Arial,
    sans-serif;

  font-size: 3.6rem;

  font-weight: 800;

  line-height: 1;
}


.featured-mini-service
.mini-service-icon {
  color: #111111;
}


.featured-mini-service
.mini-number {
  color:
    rgba(
      0,
      0,
      0,
      0.18
    );
}


/* ============================================================
   MINI SERVICE CONTENT
============================================================ */

.mini-service h3 {
  margin:
    0
    0
    18px;

  color: inherit;

  font-size: 2rem;

  line-height: 1.1;
}


.mini-service > p {
  margin:
    0
    0
    26px;

  color: #bdbdb9;

  font-size: 18px;

  line-height: 1.65;
}


.featured-mini-service > p {
  color: #151515;
}


.mini-proof-list {
  width: 100%;

  margin:
    0
    0
    28px;

  padding: 0;

  list-style: none;
}


.mini-proof-list li {
  position: relative;

  padding:
    8px
    0
    8px
    24px;

  color: #e5e5e2;

  border: 0;

  font-size: 17px;

  line-height: 1.5;
}


.mini-proof-list li::before {
  content: "+";

  position: absolute;

  left: 0;
  top: 7px;

  color: var(--orange);

  font-size: 20px;

  font-weight: 800;

  line-height: 1;
}


.featured-mini-service
.mini-proof-list li,
.featured-mini-service
.mini-proof-list li::before {
  color: #111111;
}


/* ============================================================
   MINI OFFER
============================================================ */

.mini-offer {
  width: 100%;

  margin:
    auto
    0
    22px;

  padding: 0;

  border: 0;
}


.mini-offer span {
  display: block;

  margin-bottom: 6px;

  color: #969692;

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 12px;

  font-weight: 800;

  line-height: 1.3;

  letter-spacing: 0.07em;

  text-transform: uppercase;
}


.mini-offer strong {
  display: block;

  color: var(--orange);

  font-family:
    "Barlow Condensed",
    Arial,
    sans-serif;

  font-size: 2.8rem;

  font-weight: 800;

  line-height: 0.95;
}


.featured-mini-service
.mini-offer span,
.featured-mini-service
.mini-offer strong {
  color: #111111;
}


/* ============================================================
   MINI CARD BUTTONS
============================================================ */

.featured-mini-service
.service-cta {
  background: #111111;

  color: #ffffff;

  border-color: #111111;
}


.featured-mini-service
.service-cta:hover {
  background: #282828;

  color: #ffffff;

  border-color: #282828;
}


/* ============================================================
   MINI CARD HOVER
============================================================ */

.mini-service:not(.featured-mini-service):hover h3,
.mini-service:not(.featured-mini-service):hover > p,
.mini-service:not(.featured-mini-service):hover .mini-proof-list li,
.mini-service:not(.featured-mini-service):hover .mini-offer span,
.mini-service:not(.featured-mini-service):hover .mini-offer strong,
.mini-service:not(.featured-mini-service):hover .mini-service-icon,
.mini-service:not(.featured-mini-service):hover .mini-proof-list li::before {
  color: #111111;
}


.mini-service:not(.featured-mini-service):hover
.mini-number {
  color:
    rgba(
      0,
      0,
      0,
      0.18
    );
}


.mini-service:hover
.service-pill {
  background: #ffffff;

  color: var(--orange);

  border-color: #ffffff;
}


.mini-service:not(.featured-mini-service):hover
.service-cta {
  background: #111111;

  color: #ffffff;

  border-color: #111111;
}


/* ============================================================
   ALL SERVICES BAR
============================================================ */

.all-services-bar {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 40px;

  margin-top: 24px;

  padding:
    28px
    30px;

  background: var(--orange);

  color: #111111;

  border-radius: 24px;
}


.all-services-bar strong {
  display: block;

  margin-bottom: 5px;

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 20px;

  font-weight: 800;
}


.all-services-bar p {
  max-width: 800px;

  margin: 0;

  color:
    rgba(
      0,
      0,
      0,
      0.74
    );

  font-size: 16px;

  line-height: 1.55;
}


/* ============================================================
   ABOUT
============================================================ */

.about-preview {
  background: #101010;

  color: #ffffff;
}


.about-heading {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 70px;

  margin-bottom: 48px;
}


.about-heading h2 {
  max-width: 720px;
}


.about-heading > p {
  max-width: 520px;

  margin:
    0
    0
    5px;

  color: #bebeba;

  font-size: 18px;

  line-height: 1.65;
}


/* ============================================================
   ABOUT LAYOUT
============================================================ */

.about-trust-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(0, 1.1fr);

  gap: 26px;

  align-items: stretch;
}


/* ============================================================
   ABOUT PHOTO
============================================================ */

.about-photo {
  position: relative;

  min-height: 650px;

  overflow: hidden;

  background: #1d1d1d;

  border:
    1px solid
    #292929;

  border-radius: 26px;
}


.about-photo img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    saturate(0.86)
    contrast(1.04);
}


.about-photo::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      transparent 38%,
      rgba(0, 0, 0, 0.15) 58%,
      rgba(0, 0, 0, 0.88) 100%
    );
}


.about-photo-overlay {
  position: absolute;

  z-index: 2;

  left: 30px;
  right: 30px;
  bottom: 30px;
}


.about-photo-overlay > span {
  display: block;

  margin-bottom: 5px;

  color: var(--orange);

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 0.09em;

  text-transform: uppercase;
}


.about-photo-overlay strong {
  display: block;

  color: #ffffff;

  font-family:
    "Barlow Condensed",
    Arial,
    sans-serif;

  font-size:
    clamp(
      4rem,
      6vw,
      6.2rem
    );

  font-weight: 800;

  line-height: 0.9;
}


.about-photo-overlay p {
  margin:
    12px
    0
    0;

  color: #d3d3cf;

  font-size: 16px;
}


/* ============================================================
   CREDENTIALS PANEL
============================================================ */

.credentials-panel {
  padding:
    38px
    40px;

  background: #161616;

  border:
    1px solid
    #292929;

  border-radius: 26px;
}


.credentials-label,
.credential-subtitle,
.about-bottom-label {
  display: block;

  color: #8f8f8b;

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 12px;

  font-weight: 800;

  line-height: 1.2;

  letter-spacing: 0.09em;

  text-transform: uppercase;
}


/* ============================================================
   GAS SAFE BLOCK
============================================================ */

.gas-safe-block {
  margin-top: 22px;

  padding:
    26px
    0
    30px;

  border-bottom:
    1px solid
    #303030;
}


.gas-safe-top {
  display: flex;

  align-items: center;

  gap: 24px;
}


.gas-safe-logo {
  width: 112px;

  max-height: 68px;

  object-fit: contain;

  object-position:
    left
    center;
}


.gas-safe-top span {
  display: block;

  margin-bottom: 3px;

  color: #c8c8c4;

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 0.07em;

  text-transform: uppercase;
}


.gas-safe-top strong {
  display: block;

  color: #ffffff;

  font-family:
    "Barlow Condensed",
    Arial,
    sans-serif;

  font-size: 2.6rem;

  font-weight: 800;

  line-height: 1;
}


.gas-safe-block > p {
  max-width: 610px;

  margin:
    20px
    0;

  color: #b9b9b5;

  font-size: 16px;

  line-height: 1.6;
}


.gas-safe-button {
  min-height: 48px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding:
    11px
    20px;

  background: var(--orange);

  color: #080808;

  border:
    1px solid
    var(--orange);

  border-radius: var(--pill);

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 15px;

  font-weight: 800;

  line-height: 1;

  transition:
    background 0.2s ease,
    transform 0.2s ease;
}


.gas-safe-button:hover {
  background: var(--amber);

  transform:
    translateY(-2px);
}


/* ============================================================
   QUALIFICATIONS
============================================================ */

.qualification-block {
  padding:
    28px
    0;
}


.credential-subtitle {
  color: #b0b0ac;
}


.qualification-list {
  display: flex;

  flex-wrap: wrap;

  gap: 9px;

  margin-top: 15px;
}


.qualification-list span {
  min-height: 38px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding:
    8px
    14px;

  background: #ffffff;

  color: var(--orange);

  border-radius: var(--pill);

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 13px;

  font-weight: 800;

  letter-spacing: 0.03em;
}


/* ============================================================
   ABOUT EXPERTISE
============================================================ */

.about-expertise {
  display: grid;

  gap: 22px;

  padding-top: 5px;
}


.about-expertise-item {
  display: grid;

  grid-template-columns:
    32px
    1fr;

  gap: 15px;
}


.about-expertise-item > i {
  margin-top: 2px;

  color: var(--orange);

  font-size: 1.55rem;
}


.about-expertise-item strong {
  display: block;

  color: #ffffff;

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 17px;

  font-weight: 700;
}


.about-expertise-item p {
  max-width: 600px;

  margin:
    5px
    0
    0;

  color: #a8a8a4;

  font-size: 15px;

  line-height: 1.55;
}


/* ============================================================
   ABOUT BOTTOM
============================================================ */

.about-bottom {
  display: grid;

  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(0, 1.05fr);

  gap: 80px;

  align-items: end;

  margin-top: 26px;

  padding:
    38px
    40px;

  background: var(--orange);

  color: #111111;

  border-radius: 24px;
}


.about-bottom-label {
  color:
    rgba(
      0,
      0,
      0,
      0.62
    );
}


.about-bottom h3 {
  margin-top: 12px;

  color: #111111;

  font-family:
    "Barlow Condensed",
    Arial,
    sans-serif;

  font-size:
    clamp(
      2.4rem,
      3.5vw,
      3.7rem
    );

  font-weight: 800;

  line-height: 0.98;
}


.about-bottom-copy > p {
  max-width: 650px;

  margin:
    0
    0
    24px;

  color:
    rgba(
      0,
      0,
      0,
      0.76
    );

  font-size: 16px;

  line-height: 1.6;
}


.about-actions {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 18px;
}


.about-bottom .button {
  background: #111111;

  color: #ffffff;

  border-color: #111111;
}


.about-bottom .button:hover {
  background: #2a2a2a;

  border-color: #2a2a2a;
}


.about-review-link {
  color: #111111;

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 15px;

  font-weight: 800;

  border-bottom:
    1px solid
    rgba(
      0,
      0,
      0,
      0.45
    );
}


/* ============================================================
   REVIEWS
============================================================ */

.trust-reviews {
  overflow: hidden;

  padding-bottom: 48px;

  background: #080808;
}


.trust-reviews-heading {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 70px;

  margin-bottom: 48px;
}


.trust-reviews-heading h2 {
  max-width: 800px;
}


.trust-reviews-heading > p {
  max-width: 560px;

  margin:
    0
    0
    5px;

  color: #bdbdb9;

  font-size: 18px;

  line-height: 1.65;
}


/* ============================================================
   FEATURED WATERMILL REVIEW
============================================================ */

.trust-review-featured {
  display: grid;

  grid-template-columns:
    minmax(270px, 0.72fr)
    minmax(0, 1.28fr);

  gap: 76px;

  align-items: center;

  padding:
    46px
    48px;

  background: var(--orange);

  color: #ffffff;

  border-radius: 28px;
}


.trust-review-business-type {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 32px;

  color: #ffffff;
}


.trust-review-business-type i {
  color: #ffffff;

  font-size: 1.35rem;
}


.trust-review-business-type span {
  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 0.09em;

  text-transform: uppercase;
}


.trust-review-business-label {
  display: block;

  margin-bottom: 10px;

  color:
    rgba(
      255,
      255,
      255,
      0.72
    );

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


.trust-review-business h3 {
  margin: 0;

  color: #ffffff;

  font-family:
    "Barlow Condensed",
    Arial,
    sans-serif;

  font-size:
    clamp(
      3.3rem,
      4.6vw,
      5rem
    );

  font-weight: 800;

  line-height: 0.9;

  letter-spacing: -0.02em;
}


.trust-review-location {
  display: block;

  margin-top: 13px;

  color:
    rgba(
      255,
      255,
      255,
      0.8
    );

  font-size: 16px;

  font-weight: 700;
}


/* ============================================================
   WATERMILL PILLS
============================================================ */

.trust-review-pills {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 27px;
}


.trust-review-pills span {
  min-height: 36px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding:
    7px
    14px;

  background: #111111;

  color: var(--orange);

  border-radius: var(--pill);

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 12px;

  font-weight: 800;

  text-transform: uppercase;
}


.trust-review-featured-stars {
  margin-bottom: 22px;

  color: #ffffff;

  font-size:
    clamp(
      1.7rem,
      2vw,
      2.1rem
    );

  line-height: 1;

  letter-spacing: 0.1em;
}


.trust-review-featured blockquote {
  max-width: 760px;

  margin: 0;

  color: #ffffff;

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size:
    clamp(
      1.3rem,
      1.75vw,
      1.65rem
    );

  font-weight: 600;

  line-height: 1.6;
}


/* ============================================================
   REVIEW CAROUSEL HEADER
============================================================ */

.trust-review-slider-head {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 30px;

  margin:
    50px
    0
    20px;
}


.trust-review-slider-head
> div:first-child
> span {
  display: block;

  margin-bottom: 6px;

  color: var(--orange);

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0.09em;

  text-transform: uppercase;
}


.trust-review-slider-head
> div:first-child
> strong {
  display: block;

  color: #ffffff;

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 20px;

  font-weight: 700;
}


.trust-review-arrows {
  display: flex;

  gap: 9px;
}


.trust-review-arrow {
  width: 50px;
  height: 50px;

  display: grid;

  place-items: center;

  padding: 0;

  background: #161616;

  color: #ffffff;

  border:
    1px solid
    #303030;

  border-radius: 50%;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}


.trust-review-arrow:hover {
  background: var(--orange);

  color: #111111;

  border-color: var(--orange);

  transform:
    translateY(-2px);
}


/* ============================================================
   REVIEW TRACK
============================================================ */

.trust-review-track {
  display: grid;

  grid-auto-flow: column;

  grid-auto-columns:
    calc(
      (100% - 40px) / 3
    );

  gap: 20px;

  overflow-x: auto;

  padding-bottom: 6px;

  scroll-snap-type:
    x mandatory;

  scroll-behavior: smooth;

  overscroll-behavior-inline: contain;

  scrollbar-width: none;
}


.trust-review-track::-webkit-scrollbar {
  display: none;
}


/* ============================================================
   REVIEW CARDS
============================================================ */

.trust-review-card {
  min-height: 470px;

  display: flex;

  flex-direction: column;

  scroll-snap-align: start;

  padding:
    28px
    30px;

  background: #151515;

  color: #ffffff;

  border:
    1px solid
    #292929;

  border-radius: 24px;
}


.trust-review-stars {
  color: var(--orange);

  font-size: 18px;

  line-height: 1;

  letter-spacing: 0.09em;
}


.trust-review-copy {
  width: 100%;
}


.trust-review-text {
  max-height: 14.8em;

  overflow: hidden;

  margin:
    22px
    0
    0;

  color: #eeeeeb;

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 18px;

  font-weight: 600;

  line-height: 1.55;

  white-space: pre-line;

  transition:
    max-height 0.3s ease;
}


.trust-review-card-ben
.trust-review-text {
  max-height: 17.2em;
}


.trust-review-copy.is-expanded
.trust-review-text {
  max-height: 1200px;
}


.trust-review-toggle {
  display: inline-flex;

  align-items: center;

  margin-top: 13px;

  padding: 0;

  background: transparent;

  color: var(--orange);

  border: 0;

  border-bottom:
    1px solid
    currentColor;

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 14px;

  font-weight: 800;
}


.trust-review-toggle:hover {
  opacity: 0.72;
}


.trust-review-toggle[hidden] {
  display: none;
}


.trust-review-card footer {
  margin-top: auto;

  padding-top: 22px;
}


.trust-review-card footer strong {
  display: block;

  color: #ffffff;

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 16px;

  font-weight: 800;
}


/* ============================================================
   REVIEW PLATFORM BAR
============================================================ */

.trust-review-platforms {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 40px;

  margin-top: 42px;

  padding:
    28px
    30px;

  background: #121212;

  border:
    1px solid
    #292929;

  border-radius: 22px;
}


.trust-review-platforms
> div:first-child
strong {
  display: block;

  color: #ffffff;

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 20px;

  font-weight: 800;
}


.trust-review-platforms
> div:first-child
p {
  max-width: 520px;

  margin:
    5px
    0
    0;

  color: #999995;

  font-size: 14px;

  line-height: 1.5;
}


.trust-review-platform-actions {
  display: flex;

  align-items: center;

  gap: 12px;

  flex:
    0
    0
    auto;
}


.trust-review-platform-button {
  min-height: 54px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  padding:
    12px
    22px;

  border-radius: var(--pill);

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 15px;

  font-weight: 800;

  transition:
    transform 0.2s ease;
}


.trust-review-platform-button:hover {
  transform:
    translateY(-2px);
}


.trust-google {
  background: #ffffff;

  color: var(--orange);

  border:
    1px solid
    #ffffff;
}


.trust-google i {
  color: var(--orange);
}


.trust-google:hover {
  background: #f2f2f2;
}


.trust-facebook {
  background: var(--orange);

  color: #ffffff;

  border:
    1px solid
    var(--orange);
}


.trust-facebook i {
  color: #ffffff;
}


.trust-facebook:hover {
  background: var(--amber);

  border-color: var(--amber);
}


/* ============================================================
   COVERAGE
============================================================ */

.coverage-section {
  padding-top: 48px;

  padding-bottom: 90px;

  background: #080808;
}


.coverage-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(0, 0.92fr);

  gap: 64px;

  align-items: start;
}


.coverage-content h2 {
  max-width: none;

  margin: 0;

  color: #ffffff;

  font-size:
    clamp(
      4rem,
      5.6vw,
      5.9rem
    );

  line-height: 0.9;

  letter-spacing: -0.025em;
}


.coverage-content p {
  max-width: 680px;

  margin:
    26px
    0
    0;

  color: #bdbdb9;

  font-size: 18px;

  line-height: 1.7;
}


.coverage-pills {
  display: flex;

  flex-wrap: wrap;

  align-content: flex-start;

  gap:
    16px
    14px;

  padding-top: 2px;
}


.coverage-pill {
  min-height: 56px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding:
    0
    24px;

  background: var(--orange);

  color: #ffffff;

  border:
    1px solid
    var(--orange);

  border-radius: var(--pill);

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 17px;

  font-weight: 700;

  line-height: 1;

  white-space: nowrap;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}


.coverage-pill:hover {
  background: var(--amber);

  color: #ffffff;

  border-color: var(--amber);

  transform:
    translateY(-2px);
}


/* ============================================================
   FINAL CTA
============================================================ */

.final-conversion {
  position: relative;

  overflow: hidden;

  padding:
    90px
    0;

  background: var(--orange);

  color: #111111;
}


.final-conversion::before {
  content: "JTS";

  position: absolute;

  left: -35px;
  bottom: -125px;

  color:
    rgba(
      255,
      255,
      255,
      0.065
    );

  font-family:
    "Barlow Condensed",
    Arial,
    sans-serif;

  font-size: 26rem;

  font-weight: 800;

  line-height: 1;

  pointer-events: none;
}


.final-conversion-layout {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(390px, 0.7fr);

  gap: 80px;

  align-items: center;
}


.final-conversion-copy {
  max-width: 700px;
}


.final-conversion-eyebrow {
  display: block;

  margin-bottom: 18px;

  color:
    rgba(
      0,
      0,
      0,
      0.68
    );

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 13px;

  font-weight: 800;

  letter-spacing: 0.1em;

  text-transform: uppercase;
}


.final-conversion h2 {
  margin: 0;

  color: #ffffff;

  font-size:
    clamp(
      5rem,
      7.2vw,
      7.7rem
    );

  line-height: 0.83;

  letter-spacing: -0.025em;
}


.final-conversion-lead {
  max-width: 620px;

  margin:
    32px
    0
    0;

  color:
    rgba(
      0,
      0,
      0,
      0.78
    );

  font-size: 19px;

  line-height: 1.65;
}


/* ============================================================
   FINAL CTA PROOF
============================================================ */

.final-proof-list {
  width: 100%;

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 24px;

  margin-top: 42px;
}


.final-proof {
  min-width: 0;

  display: grid;

  grid-template-columns:
    30px
    minmax(0, 1fr);

  gap: 12px;

  align-items: start;
}


.final-proof > i {
  width: 30px;
  height: 30px;

  display: flex;

  align-items: flex-start;

  justify-content: center;

  padding-top: 2px;

  color: #111111;

  font-size: 1.35rem;

  line-height: 1;
}


.final-proof strong {
  display: block;

  color: #111111;

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 16px;

  font-weight: 800;

  line-height: 1.2;

  white-space: nowrap;
}


.final-proof span {
  display: block;

  margin-top: 5px;

  color:
    rgba(
      0,
      0,
      0,
      0.66
    );

  font-size: 13px;

  line-height: 1.4;
}


/* ============================================================
   FINAL DIRECT CONTACT
============================================================ */

.final-direct-contact {
  margin-top: 46px;
}


.final-direct-contact > span {
  display: block;

  margin-bottom: 13px;

  color:
    rgba(
      0,
      0,
      0,
      0.62
    );

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0.09em;

  text-transform: uppercase;
}


.final-direct-buttons {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;
}


.final-contact-button {
  min-height: 54px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  padding:
    12px
    24px;

  border-radius: var(--pill);

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 16px;

  font-weight: 800;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}


.final-contact-button:hover {
  transform:
    translateY(-2px);
}


.final-call-button {
  background: #ffffff;

  color: var(--orange);

  border:
    1px solid
    #ffffff;
}


.final-call-button i {
  color: var(--orange);
}


.final-call-button:hover {
  background: #f1f1f1;
}


.final-whatsapp-button {
  background: #111111;

  color: #ffffff;

  border:
    1px solid
    #111111;
}


.final-whatsapp-button i {
  color: #ffffff;
}


.final-whatsapp-button:hover {
  background: #292929;

  color: #ffffff;

  border-color: #292929;
}


/* ============================================================
   FINAL FORM
============================================================ */

.final-enquiry-form {
  width: 100%;

  max-width: 500px;

  justify-self: end;

  padding:
    30px
    36px
    34px;

  background: #111111;

  color: #ffffff;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.12
    );

  border-radius: 28px;

  box-shadow:
    0
    30px
    80px
    rgba(
      0,
      0,
      0,
      0.22
    );
}


.final-form-fields {
  display: grid;

  gap: 18px;
}


.final-field {
  display: flex;

  flex-direction: column;

  gap: 8px;
}


.final-field label {
  color: #ffffff;

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 16px;

  font-weight: 700;

  line-height: 1.2;
}


.final-field input,
.final-field select {
  width: 100%;

  min-height: 56px;

  padding:
    12px
    19px;

  background: #ffffff;

  color: #111111;

  border:
    1px solid
    #ffffff;

  border-radius: var(--pill);

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size: 16px;
}


.final-field input:focus,
.final-field select:focus {
  border-color: var(--orange);

  outline:
    3px solid
    rgba(
      233,
      116,
      23,
      0.25
    );
}


.final-submit {
  width: 100%;

  min-height: 58px;

  margin-top: 24px;

  padding:
    12px
    24px;

  background: var(--orange);

  color: #111111;

  border:
    1px solid
    var(--orange);

  border-radius: var(--pill);

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 17px;

  font-weight: 800;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}


.final-submit:hover {
  background: var(--amber);

  border-color: var(--amber);

  transform:
    translateY(-2px);
}


.final-form-note {
  margin:
    14px
    0
    0;

  color: #858581;

  font-size: 12px;

  line-height: 1.5;

  text-align: center;
}


/* ============================================================
   HOMEPAGE TABLET
============================================================ */

@media (max-width: 1050px) {

  .hero-card {
    grid-template-columns:
      1fr
      minmax(340px, 0.75fr);

    gap: 40px;

    padding:
      135px
      42px
      55px;
  }


  .feature-service-card,
  .feature-service-card.reverse {
    grid-template-columns: 1fr;

    gap: 28px;
  }


  .feature-service-card.reverse
  .service-image {
    order: 0;
  }


  .service-image {
    min-height: 390px;

    height: 390px;
  }


  /*
    KEEP 03 - 05 AS THREE CARDS
    UNTIL MOBILE.
  */

  .mini-service {
    min-height: 590px;

    padding: 24px;
  }


  .about-heading,
  .trust-reviews-heading {
    align-items: flex-start;

    flex-direction: column;

    gap: 22px;
  }


  .about-trust-layout {
    grid-template-columns: 1fr;
  }


  .about-photo {
    min-height: 520px;
  }


  .about-bottom {
    grid-template-columns: 1fr;

    gap: 24px;
  }


  .trust-review-featured {
    grid-template-columns: 1fr;

    gap: 40px;
  }


  .trust-review-track {
    grid-auto-columns:
      calc(
        (100% - 20px) / 2
      );
  }


  .trust-review-platforms {
    align-items: flex-start;

    flex-direction: column;
  }


  .coverage-layout {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 0.85fr);

    gap: 42px;
  }


  .coverage-content h2 {
    font-size:
      clamp(
        3.5rem,
        6vw,
        4.8rem
      );
  }


  .coverage-pill {
    min-height: 52px;

    padding:
      0
      19px;

    font-size: 16px;
  }


 

  .final-conversion h2 {
    font-size:
      clamp(
        4.7rem,
        8vw,
        6.5rem
      );
  }

}


/* ============================================================
   HOMEPAGE MOBILE
============================================================ */

@media (max-width: 700px) {

  body {
    font-size: 17px;
  }


  /* ========================================================
     HERO
  ========================================================= */

  .hero-card {
    min-height: auto;

    grid-template-columns: 1fr;

    gap: 28px;

    padding:
      100px
      18px
      28px;

    border-radius: 0;

    text-align: center;
  }


  .hero-card::after {
    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.67) 42%,
        rgba(0, 0, 0, 0.55) 66%,
        rgba(0, 0, 0, 0.76) 100%
      );
  }


  .hero-media img {
    opacity: 0.76;
  }


  .hero-copy {
    width: 100%;

    max-width: 100%;

    margin-inline: auto;

    text-align: center;
  }


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

    margin-bottom: 17px;
  }


  .hero-copy h1 {
    max-width: 11ch;

    margin-inline: auto;

    font-size:
      clamp(
        3rem,
        13vw,
        3.85rem
      );

    line-height: 0.9;

    text-align: center;
  }


  .hero-lead {
    max-width: 34rem;

    margin:
      20px
      auto
      0;

    font-size: 16px;

    line-height: 1.65;

    text-align: center;
  }


  .hero-enquiry {
    width: 100%;

    max-width: none;

    margin-inline: auto;

    padding:
      26px
      20px;

    border-radius: 22px;

    text-align: left;
  }


  .hero-enquiry::before {
    left: 50%;

    width: 52px;

    transform:
      translateX(-50%);
  }


  .hero-enquiry h2 {
    margin-bottom: 24px;

    font-size: 2.2rem;

    text-align: center;
  }


  .hero-form-grid {
    gap: 17px;
  }


  .hero-submit {
    min-height: 56px;

    margin-top: 20px;
  }


  /* ========================================================
     USP
  ========================================================= */

  .usp-grid {
    grid-template-columns:
      1fr
      1fr;
  }


  .usp-item {
    min-height: 185px;

    padding:
      22px
      17px;

    border-bottom:
      1px solid
      rgba(
        255,
        255,
        255,
        0.22
      );
  }


  .usp-item:nth-child(2n) {
    border-right: 0;
  }


  .usp-item:nth-child(n + 3) {
    border-bottom: 0;
  }


  .usp-icon {
    margin-bottom: 15px;

    font-size: 1.6rem;
  }


  .usp-big {
    font-size: 2rem;
  }


  .usp-title {
    font-size: 11px;
  }


  .usp-item p {
    font-size: 13px;
  }


  /* ========================================================
     LARGE SERVICES
  ========================================================= */

  .feature-service-card {
    padding: 14px;

    gap: 22px;

    border-radius: 22px;
  }


  .service-image {
    min-height: 0;

    height: 260px;

    border-radius: 18px;
  }


  .service-content {
    padding:
      10px
      8px
      12px;
  }


  .service-number {
    font-size: 3.1rem;
  }


  .service-icon {
    margin-bottom: 18px;

    font-size: 1.7rem;
  }


  .service-pill {
    max-width: 100%;

    min-height: 34px;

    padding:
      8px
      13px;

    font-size: 11px;

    line-height: 1.25;

    white-space: normal;
  }


  .service-content h3 {
    padding-right: 20px;

    font-size: 2rem;
  }


  .service-description {
    font-size: 17px;
  }


  .service-points {
    gap: 12px;

    margin:
      22px
      0
      25px;
  }


  .service-points li {
    font-size: 16px;
  }


  .service-bottom {
    align-items: flex-start;

    flex-direction: column;

    gap: 20px;
  }


  .service-price strong {
    font-size: 3.3rem;
  }


  .service-cta {
    width: 100%;
  }


  /* ========================================================
     03 - 05 HORIZONTAL MOBILE CAROUSEL
  ========================================================= */

  .service-mini-carousel {
    position: relative;

    margin-top: 28px;
  }


  .service-mini-grid {
    display: grid;

    grid-template-columns: none;

    grid-auto-flow: column;

    grid-auto-columns:
      calc(
        100% - 28px
      );

    gap: 14px;

    overflow-x: auto;

    margin-top: 0;

    padding:
      0
      2px
      8px;

    scroll-snap-type:
      x mandatory;

    scroll-behavior: smooth;

    overscroll-behavior-inline: contain;

    scrollbar-width: none;
  }


  .service-mini-grid::-webkit-scrollbar {
    display: none;
  }


  .mini-service {
    min-height: 545px;

    scroll-snap-align: start;

    padding:
      22px;

    border-radius: 22px;
  }


  .mini-service-top {
    margin-bottom: 10px;
  }


  .mini-service-icon {
    font-size: 1.7rem;
  }


  .mini-number {
    font-size: 3rem;
  }


  .mini-service .service-pill {
    margin-bottom: 16px;

    font-size: 10px;
  }


  .mini-service h3 {
    margin-bottom: 13px;

    font-size: 1.65rem;
  }


  .mini-service > p {
    margin-bottom: 17px;

    font-size: 16px;

    line-height: 1.55;
  }


  .mini-proof-list {
    margin-bottom: 17px;
  }


  .mini-proof-list li {
    padding:
      5px
      0
      5px
      20px;

    font-size: 15px;

    line-height: 1.45;
  }


  .mini-proof-list li::before {
    top: 5px;

    font-size: 17px;
  }


  .mini-offer {
    margin:
      auto
      0
      18px;
  }


  .mini-offer span {
    font-size: 10px;
  }


  .mini-offer strong {
    font-size: 2.15rem;
  }


  .mini-service-arrow {
    position: absolute;

    z-index: 6;

    top: 50%;

    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    padding: 0;

    background:
      rgba(
        5,
        5,
        5,
        0.92
      );

    color: #ffffff;

    border:
      1px solid
      rgba(
        255,
        255,
        255,
        0.18
      );

    border-radius: 50%;

    box-shadow:
      0
      10px
      26px
      rgba(
        0,
        0,
        0,
        0.35
      );

    transform:
      translateY(-50%);
  }


  .mini-service-arrow-prev {
    left: -8px;
  }


  .mini-service-arrow-next {
    right: -8px;
  }


  .mini-service-arrow:active {
    background: var(--orange);

    color: #111111;
  }

/* ============================================================
   SERVICES 03 - 05 MOBILE CAROUSEL
============================================================ */

.service-mini-carousel {
  position: relative;

  margin-top: 28px;
}


.service-mini-grid {
  display: grid;

  grid-template-columns: none;

  grid-auto-flow: column;

  grid-auto-columns: calc(100% - 28px);

  gap: 14px;

  margin-top: 0;

  padding:
    0
    2px
    8px;

  overflow-x: auto;

  scroll-snap-type: x mandatory;

  scroll-behavior: smooth;

  overscroll-behavior-inline: contain;

  scrollbar-width: none;
}


.service-mini-grid::-webkit-scrollbar {
  display: none;
}


.mini-service {
  min-height: 545px;

  scroll-snap-align: start;

  padding: 22px;

  border-radius: 22px;
}


/* ============================================================
   SIDE ARROWS
============================================================ */

.mini-service-arrow {
  position: absolute;

  z-index: 10;

  top: 50%;

  width: 46px;
  height: 46px;

  display: grid;

  place-items: center;

  padding: 0;

  background: #111111;

  color: #ffffff;

  border:
    1px solid
    rgba(255, 255, 255, 0.2);

  border-radius: 50%;

  box-shadow:
    0
    10px
    28px
    rgba(0, 0, 0, 0.38);

  transform: translateY(-50%);

  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}


.mini-service-arrow i {
  font-size: 1.15rem;

  line-height: 1;
}


.mini-service-arrow-prev {
  left: -9px;
}


.mini-service-arrow-next {
  right: -9px;
}


.mini-service-arrow:hover,
.mini-service-arrow:active {
  background: var(--orange);

  color: #111111;

  border-color: var(--orange);
}


/* make the next card slightly visible too */

.service-mini-grid {
  padding-right: 18px;
}

  /* ========================================================
     ALL SERVICES
  ========================================================= */

  .all-services-bar {
    align-items: flex-start;

    flex-direction: column;

    padding:
      24px
      20px;
  }


  .all-services-bar .button {
    width: 100%;
  }


  /* ========================================================
     ABOUT
  ========================================================= */

  .about-heading {
    margin-bottom: 30px;
  }


  .about-heading > p {
    font-size: 17px;
  }


  .about-photo {
    min-height: 420px;

    border-radius: 22px;
  }


  .about-photo-overlay {
    left: 22px;
    right: 22px;
    bottom: 22px;
  }


  .about-photo-overlay strong {
    font-size: 4rem;
  }


  .credentials-panel {
    padding:
      28px
      22px;

    border-radius: 22px;
  }


  .gas-safe-top {
    align-items: flex-start;

    flex-direction: column;

    gap: 16px;
  }


  .gas-safe-logo {
    width: 105px;
  }


  .gas-safe-top strong {
    font-size: 2.3rem;
  }


  .gas-safe-button {
    width: 100%;

    min-height: 50px;

    text-align: center;
  }


  .qualification-list {
    gap: 7px;
  }


  .qualification-list span {
    font-size: 12px;
  }


  .about-bottom {
    margin-top: 18px;

    padding:
      28px
      22px;

    border-radius: 22px;
  }


  .about-actions {
    align-items: stretch;

    flex-direction: column;
  }


  .about-actions .button {
    width: 100%;
  }


  .about-review-link {
    width: fit-content;
  }


  /* ========================================================
     REVIEWS
  ========================================================= */

  .trust-reviews {
    padding-bottom: 32px;
  }


  .trust-reviews-heading {
    margin-bottom: 30px;
  }


  .trust-reviews-heading > p {
    font-size: 17px;
  }


  .trust-review-featured {
    gap: 34px;

    padding:
      28px
      22px;

    border-radius: 22px;
  }


  .trust-review-business-type {
    margin-bottom: 24px;
  }


  .trust-review-business h3 {
    font-size: 3.4rem;
  }


  .trust-review-featured-stars {
    margin-bottom: 17px;

    font-size: 1.55rem;
  }


  .trust-review-featured blockquote {
    font-size: 19px;

    line-height: 1.6;
  }


  .trust-review-slider-head {
    align-items: center;

    margin-top: 38px;
  }


  .trust-review-slider-head
  > div:first-child
  > strong {
    font-size: 17px;
  }


  .trust-review-arrow {
    width: 46px;
    height: 46px;
  }


  .trust-review-track {
    grid-auto-columns:
      calc(
        100% - 22px
      );

    gap: 14px;
  }


  .trust-review-card {
    min-height: 440px;

    padding:
      24px
      22px;
  }


  .trust-review-text {
    max-height: 14em;

    margin-top: 20px;

    font-size: 17px;
  }


  .trust-review-card-ben
  .trust-review-text {
    max-height: 16.8em;
  }


  .trust-review-platforms {
    padding:
      24px
      20px;
  }


  .trust-review-platform-actions {
    width: 100%;

    align-items: stretch;

    flex-direction: column;
  }


  .trust-review-platform-button {
    width: 100%;
  }


  /* ========================================================
     COVERAGE
  ========================================================= */

  .coverage-section {
    padding-top: 32px;

    padding-bottom: 72px;
  }


  .coverage-layout {
    grid-template-columns: 1fr;

    gap: 30px;
  }


  .coverage-content h2 {
    font-size:
      clamp(
        3.2rem,
        13vw,
        4.5rem
      );
  }


  .coverage-content p {
    margin-top: 20px;

    font-size: 17px;
  }


  .coverage-pills {
    gap: 11px;
  }


  .coverage-pill {
    min-height: 50px;

    padding:
      0
      18px;

    font-size: 15px;
  }


  /* ========================================================
     FINAL CTA

     display: contents allows the form to appear BEFORE
     the Call / WhatsApp block with the current HTML structure.
  ========================================================= */

  .final-conversion {
    padding:
      62px
      0;

    text-align: center;
  }


  .final-conversion::before {
    display: none;
  }


  .final-conversion-layout {
    display: grid;

    grid-template-columns: 1fr;

    gap: 24px;

    align-items: initial;
  }


  .final-conversion-copy {
    display: contents;
  }


  .final-conversion-eyebrow {
    order: 1;

    margin:
      0
      auto;

    text-align: center;
  }


  .final-conversion h2 {
    order: 2;

    margin-top: -2px;

    font-size:
      clamp(
        3.5rem,
        15vw,
        4.7rem
      );

    line-height: 0.86;

    text-align: center;
  }


  .final-conversion-lead {
    order: 3;

    max-width: 520px;

    margin:
      0
      auto;

    font-size: 17px;

    line-height: 1.6;

    text-align: center;
  }


  .final-proof-list {
    order: 4;

    width:
      min(
        100%,
        370px
      );

    grid-template-columns: 1fr;

    gap: 17px;

    margin:
      6px
      auto
      4px;
  }


  .final-proof {
    grid-template-columns:
      30px
      auto;

    justify-content: center;

    gap: 11px;

    text-align: left;
  }


  .final-proof > i {
    width: 30px;
    height: 30px;

    font-size: 1.3rem;
  }


  .final-proof strong {
    font-size: 16px;

    white-space: normal;
  }


  .final-proof span {
    font-size: 13px;
  }


  /*
    FORM BEFORE DIRECT CONTACT
  */

  .final-enquiry-form {
    order: 5;

    width: 100%;

    max-width: 500px;

    justify-self: center;

    margin:
      8px
      auto
      0;

    padding:
      28px
      21px;

    border-radius: 23px;

    text-align: left;
  }


  .final-form-fields {
    gap: 17px;
  }


  .final-field input,
  .final-field select {
    min-height: 55px;

    font-size: 16px;
  }


  .final-submit {
    min-height: 56px;

    margin-top: 21px;

    font-size: 16px;
  }


  .final-direct-contact {
    order: 6;

    width: 100%;

    max-width: 500px;

    margin:
      8px
      auto
      0;

    text-align: center;
  }


  .final-direct-contact > span {
    margin-bottom: 13px;

    text-align: center;
  }


  .final-direct-buttons {
    width: 100%;

    display: grid;

    grid-template-columns: 1fr;

    gap: 10px;
  }


  .final-contact-button {
    width: 100%;

    min-height: 54px;
  }

}


/* ============================================================
   VERY SMALL MOBILE
============================================================ */

@media (max-width: 420px) {

  .hero-copy h1 {
    font-size:
      clamp(
        2.8rem,
        12.5vw,
        3.4rem
      );
  }


  .usp-grid {
    grid-template-columns: 1fr;
  }


  .usp-item {
    min-height: auto;

    padding:
      24px
      20px;

    border-right: 0;

    border-bottom:
      1px solid
      rgba(
        255,
        255,
        255,
        0.22
      );
  }


  .usp-item:nth-child(n + 3) {
    border-bottom:
      1px solid
      rgba(
        255,
        255,
        255,
        0.22
      );
  }


  .usp-item:last-child {
    border-bottom: 0;
  }


  .coverage-pill {
    min-height: 46px;

    padding:
      0
      15px;

    font-size: 14px;
  }


  .final-conversion h2 {
    font-size:
      clamp(
        3.2rem,
        14.5vw,
        4rem
      );
  }

}

/* ============================================================
   REAL JTS LPG WORK GALLERY
============================================================ */

.work-gallery {
  overflow: hidden;

  background: #0b0b0b;
  color: #ffffff;
}


/* ============================================================
   HEADING
============================================================ */

.work-gallery-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 70px;

  margin-bottom: 46px;
}


.work-gallery-heading h2 {
  max-width: 760px;
}


.work-gallery-heading > p {
  max-width: 540px;

  margin:
    0
    5px
    5px
    0;

  color: #b9b9b5;

  font-size: 18px;
  line-height: 1.65;
}


/* ============================================================
   CAROUSEL WRAPPER
============================================================ */

.work-gallery-carousel {
  position: relative;

  min-width: 0;
}


/* ============================================================
   DESKTOP MOSAIC
============================================================ */

.work-gallery-grid {
  display: grid;

  grid-template-columns:
    repeat(
      12,
      minmax(0, 1fr)
    );

  grid-template-rows:
    190px
    190px
    190px
    auto;

  gap: 14px;
}


/* 01 OLD FLUE */

.work-gallery-main {
  grid-column: 1 / 6;
  grid-row: 1 / 3;
}


/* 02 BOILER SERVICING */

.work-gallery-servicing {
  grid-column: 6 / 9;
  grid-row: 1 / 2;
}


/* 03 REPAIRS */

.work-gallery-repair {
  grid-column: 9 / 13;
  grid-row: 1 / 2;
}


/* 04 FLUE INSTALLATION */

.work-gallery-supply {
  grid-column: 6 / 10;
  grid-row: 2 / 4;
}


/* 05 CARAVAN / HOLIDAY HOME */

.work-gallery-site {
  grid-column: 1 / 6;
  grid-row: 3 / 4;
}


/* 06 REGULATOR */

.work-gallery-regulator {
  grid-column: 10 / 13;
  grid-row: 2 / 3;
}


/* 07 PARTS */

.work-gallery-parts {
  grid-column: 10 / 13;
  grid-row: 3 / 4;
}


/* ============================================================
   DETAIL STRIP
============================================================ */

.work-gallery-details {
  grid-column: 1 / -1;
  grid-row: 4 / 5;

  display: grid;

  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(160px, 0.7fr)
    minmax(160px, 0.7fr);

  gap: 14px;

  height: 230px;
}


/* ============================================================
   GALLERY ITEMS
============================================================ */

.work-gallery-item {
  position: relative;

  min-width: 0;

  overflow: hidden;

  margin: 0;

  background: #151515;

  border:
    1px solid
    rgba(255, 255, 255, 0.12);

  border-radius: 20px;

  box-shadow:
    0
    14px
    34px
    rgba(0, 0, 0, 0.16);
}


/* ============================================================
   IMAGES
============================================================ */

.work-gallery-item img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition:
    transform 0.45s ease,
    filter 0.45s ease;
}


.work-gallery-item:hover img {
  transform: scale(1.025);

  filter:
    saturate(1.05)
    contrast(1.03);
}


/* ============================================================
   IMAGE POSITIONING
============================================================ */

.work-gallery-main img {
  object-position: center center;
}


.work-gallery-servicing img {
  object-position: center center;
}


.work-gallery-repair img {
  object-position: center center;
}


.work-gallery-supply img {
  object-position: center 22%;
}


.work-gallery-site img {
  object-position: center center;
}


.work-gallery-regulator img {
  object-position: center center;
}


.work-gallery-parts img {
  object-position: center center;
}


.work-gallery-fittings img,
.work-gallery-pipework img,
.work-gallery-maintenance img {
  object-position: center center;
}


/* ============================================================
   DARK OVERLAY
============================================================ */

.work-gallery-item::after {
  content: "";

  position: absolute;
  z-index: 1;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      transparent 48%,
      rgba(0, 0, 0, 0.05) 63%,
      rgba(0, 0, 0, 0.84) 100%
    );

  pointer-events: none;
}


/* ============================================================
   CAPTIONS
============================================================ */

.work-gallery-item figcaption {
  position: absolute;
  z-index: 2;

  left: 16px;
  right: 16px;
  bottom: 14px;

  color: #ffffff;

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;

  text-shadow:
    0
    2px
    12px
    rgba(0, 0, 0, 0.82);
}


.work-gallery-main figcaption,
.work-gallery-supply figcaption,
.work-gallery-site figcaption {
  left: 20px;
  bottom: 17px;

  font-size: 15px;
}


.work-gallery-main figcaption span {
  display: block;

  margin-bottom: 4px;

  color: var(--orange);

  font-size: 10px;
  line-height: 1;

  letter-spacing: 0.09em;
  text-transform: uppercase;
}


/* ============================================================
   ARROWS
   DESKTOP HIDDEN
============================================================ */

.work-gallery-arrow {
  display: none;
}


/* ============================================================
   TABLET MOSAIC
============================================================ */

@media (max-width: 1000px) {

  .work-gallery-heading {
    align-items: flex-start;
    flex-direction: column;

    gap: 22px;
  }


  .work-gallery-heading > p {
    max-width: 620px;
  }


  .work-gallery-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    grid-template-rows: none;
    grid-auto-rows: 220px;
  }


  .work-gallery-main,
  .work-gallery-servicing,
  .work-gallery-repair,
  .work-gallery-supply,
  .work-gallery-site,
  .work-gallery-regulator,
  .work-gallery-parts {
    grid-column: auto;
    grid-row: auto;
  }


  .work-gallery-main {
    grid-column: span 2;
    grid-row: span 2;
  }


  .work-gallery-supply,
  .work-gallery-site {
    grid-column: span 2;
  }


  .work-gallery-details {
    grid-column: 1 / -1;
    grid-row: auto;

    grid-template-columns:
      1.2fr
      0.8fr
      0.8fr;

    height: 230px;
  }

}


/* ============================================================
   MOBILE
   EXACTLY ONE PHOTO AT A TIME
============================================================ */

@media (max-width: 700px) {

  .work-gallery-heading {
    gap: 18px;

    margin-bottom: 28px;
  }


  .work-gallery-heading > p {
    font-size: 16px;
    line-height: 1.6;
  }


  .work-gallery-carousel {
    position: relative;

    width: 100%;

    overflow: visible;
  }


  /*
    IMPORTANT:
    Every slide is exactly 100% of the gallery width.
    No next-card preview.
  */

  .work-gallery-grid {
    width: 100%;

    display: grid;

    grid-template-columns: none;
    grid-template-rows: none;

    grid-auto-flow: column;
    grid-auto-columns: 100%;
    grid-auto-rows: auto;

    gap: 14px;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 0;

    scroll-snap-type: x mandatory;
    scroll-snap-stop: always;

    scroll-behavior: smooth;

    overscroll-behavior-x: contain;

    scrollbar-width: none;

    touch-action: pan-y pinch-zoom;
  }


  .work-gallery-grid::-webkit-scrollbar {
    display: none;
  }


  /*
    Makes technical photos inside the wrapper
    join the exact same carousel.
  */

  .work-gallery-details {
    display: contents;
  }


  /*
    Completely remove all desktop/tablet placement.
  */

  .work-gallery-main,
  .work-gallery-servicing,
  .work-gallery-repair,
  .work-gallery-supply,
  .work-gallery-site,
  .work-gallery-regulator,
  .work-gallery-parts,
  .work-gallery-fittings,
  .work-gallery-pipework,
  .work-gallery-maintenance {
    grid-column: auto;
    grid-row: auto;

    width: 100%;
    height: clamp(360px, 105vw, 455px);

    scroll-snap-align: start;

    border-radius: 20px;
  }


  /*
    Keep all photos filling one consistent card.
  */

  .work-gallery-item img {
    width: 100%;
    height: 100%;

    object-fit: cover;
  }


  /*
    Portrait working photos need their own focal points.
  */

  .work-gallery-main img {
    object-position: center 30%;
  }


  .work-gallery-supply img {
    object-position: center 20%;
  }


  .work-gallery-servicing img,
  .work-gallery-repair img,
  .work-gallery-site img,
  .work-gallery-regulator img,
  .work-gallery-parts img,
  .work-gallery-fittings img,
  .work-gallery-pipework img,
  .work-gallery-maintenance img {
    object-position: center center;
  }


  .work-gallery-item figcaption {
    left: 20px;
    right: 20px;
    bottom: 18px;

    font-size: 15px;
  }


  /* ========================================================
     MOBILE ARROWS
  ========================================================= */

  .work-gallery-arrow {
    position: absolute;
    z-index: 10;

    top: 50%;

    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    padding: 0;

    background:
      rgba(8, 8, 8, 0.94);

    color: #ffffff;

    border:
      1px solid
      rgba(255, 255, 255, 0.22);

    border-radius: 50%;

    box-shadow:
      0
      10px
      28px
      rgba(0, 0, 0, 0.42);

    transform:
      translateY(-50%);

    cursor: pointer;
  }


  .work-gallery-arrow i {
    font-size: 1.1rem;
    line-height: 1;
  }


  /*
    Keep arrows INSIDE the image instead of hanging
    outside the viewport.
  */

  .work-gallery-arrow-prev {
    left: 12px;
  }


  .work-gallery-arrow-next {
    right: 12px;
  }


  .work-gallery-arrow:active {
    background: var(--orange);

    color: #111111;

    border-color: var(--orange);
  }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 420px) {

  .work-gallery-main,
  .work-gallery-servicing,
  .work-gallery-repair,
  .work-gallery-supply,
  .work-gallery-site,
  .work-gallery-regulator,
  .work-gallery-parts,
  .work-gallery-fittings,
  .work-gallery-pipework,
  .work-gallery-maintenance {
    height: 380px;
  }


  .work-gallery-arrow {
    width: 42px;
    height: 42px;
  }


  .work-gallery-arrow-prev {
    left: 9px;
  }


  .work-gallery-arrow-next {
    right: 9px;
  }

}

/* ============================================================
   FINAL CTA PROOF POINTS
   CLEAN / NO CARDS / NO BORDERS
============================================================ */

.final-proof-list {
  width: 100%;

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 38px;

  margin-top: 40px;
}


.final-proof {
  min-width: 0;

  display: grid;

  grid-template-columns:
    36px
    minmax(0, 1fr);

  gap: 13px;

  align-items: start;

  padding: 0;

  background: transparent;

  border: 0;

  border-radius: 0;

  box-shadow: none;
}


.final-proof > i {
  width: 36px;
  height: 36px;

  display: grid;

  place-items: center;

  padding: 0;

  background: transparent;

  color: #111111;

  border: 0;

  border-radius: 0;

  font-size: 1.35rem;

  line-height: 1;
}


.final-proof > div {
  min-width: 0;

  margin: 0;
}


.final-proof strong {
  display: block;

  color: #111111;

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 15px;

  font-weight: 800;

  line-height: 1.25;

  white-space: normal;
}


.final-proof span {
  display: block;

  margin-top: 5px;

  color:
    rgba(
      0,
      0,
      0,
      0.64
    );

  font-size: 13px;

  line-height: 1.45;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1100px) {

  .final-proof-list {
    gap: 28px;
  }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 700px) {

  .final-proof-list {
    order: 4;

    width: min(100%, 480px);

    grid-template-columns: 1fr;

    gap: 22px;

    margin:
      10px
      auto
      4px;
  }


  .final-proof {
    grid-template-columns:
      34px
      minmax(0, 1fr);

    gap: 13px;

    align-items: start;

    text-align: left;
  }


  .final-proof > i {
    width: 34px;
    height: 34px;

    font-size: 1.25rem;
  }


  .final-proof strong {
    font-size: 15px;
  }


  .final-proof span {
    font-size: 12px;
  }

}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 700px) {

  .final-proof-list {
    order: 4;

    width: min(100%, 480px);

    grid-template-columns: 1fr;

    gap: 24px;

    margin:
      12px
      auto
      4px;
  }


  .final-proof {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

    text-align: center;
  }


  .final-proof > i {
    width: auto;
    height: auto;

    display: block;

    font-size: 1.4rem;
  }


  .final-proof > div {
    width: 100%;

    margin: 0;

    text-align: center;
  }


  .final-proof strong {
    font-size: 15px;

    line-height: 1.25;

    text-align: center;
  }


  .final-proof span {
    margin-top: 4px;

    font-size: 12px;

    line-height: 1.4;

    text-align: center;
  }

}

/* ============================================================
   WINTERISATION CALLOUT
============================================================ */

.winter-service-bar {
  display: grid;
  grid-template-columns:
    64px
    minmax(0, 1fr)
    auto
    auto;

  gap: 24px;

  align-items: center;

  margin-top: 30px;

  padding:
    28px
    30px;

  background: #ffffff;
  color: #111111;

  border-radius: 24px;
}


.winter-service-icon {
  width: 64px;
  height: 64px;

  display: grid;
  place-items: center;

  background: var(--orange);
  color: #ffffff;

  border-radius: 18px;

  font-size: 1.7rem;
}


.winter-service-copy {
  min-width: 0;
}


.winter-service-copy > span,
.winter-service-price > span {
  display: block;

  color: var(--orange);

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 10px;
  font-weight: 800;

  line-height: 1.2;
  letter-spacing: 0.09em;

  text-transform: uppercase;
}


.winter-service-copy h3 {
  margin-top: 6px;

  color: #111111;

  font-size: 2rem;
}


.winter-service-copy p {
  max-width: 700px;

  margin:
    8px
    0
    0;

  color: #62625e;

  font-size: 14px;
  line-height: 1.6;
}


.winter-service-price {
  min-width: 105px;

  text-align: center;
}


.winter-service-price strong {
  display: block;

  margin-top: 3px;

  color: var(--orange);

  font-family:
    "Barlow Condensed",
    Arial,
    sans-serif;

  font-size: 3.5rem;
  font-weight: 800;
  line-height: 0.9;
}


@media (max-width: 900px) {

  .winter-service-bar {
    grid-template-columns:
      64px
      minmax(0, 1fr)
      auto;
  }

  .winter-service-bar .button {
    grid-column: 1 / -1;

    width: 100%;
  }

}


@media (max-width: 600px) {

  .winter-service-bar {
    grid-template-columns: 1fr;

    gap: 18px;

    padding:
      25px
      21px;

    text-align: center;
  }


  .winter-service-icon {
    margin-inline: auto;
  }


  .winter-service-copy p {
    margin-inline: auto;
  }


  .winter-service-price {
    text-align: center;
  }

}

.trust-review-featured-author {
  display: block;

  margin-top: 24px;

  color:
    rgba(255, 255, 255, 0.82);

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 15px;
  font-weight: 800;
  font-style: normal;
}