/* ==========================================================================
   BuilderPage: main stylesheet
   --------------------------------------------------------------------------
   REUSING THIS FOR ANOTHER BUSINESS?
   Change the colours and fonts in "1. Brand settings" below.
   The rest of the site picks them up automatically.

   Contents
   1. Brand settings
   2. Base styles
   3. Shared pieces (container, labels, buttons)
   4. Header + navigation
   5. Hero
   6. Section basics
   7. Services & prices
   8. Why choose us
   9. Our work
   10. Customer reviews
   11. Contact
   12. Footer + legal pop-ups
   13. Animations
   ========================================================================== */


/* 1. Brand settings
   ========================================================================== */
:root {
  /* Colours */
  --navy-950: #03070D;
  --navy-900: #050C16;
  --navy-800: #07101C;               /* main dark background */
  --navy-700: #0C1B2E;
  --hivis: #FFC800;                  /* accent: buttons + highlights */
  --hivis-light: #FFD83D;
  --paper: #F2F5F9;                  /* light background */
  --white: #FFFFFF;
  --ink: #0A1624;                    /* text on light backgrounds */
  --ink-muted: #4E5D6E;
  --on-dark: #F2F5F9;                /* text on dark backgrounds */
  --on-dark-muted: rgba(242, 245, 249, 0.8);
  --line-dark: rgba(120, 165, 230, 0.11);        /* blueprint lines */
  --line-dark-strong: rgba(120, 165, 230, 0.4);
  --bp-major: rgba(120, 165, 230, 0.1);          /* blueprint grid: bold lines */
  --bp-minor: rgba(120, 165, 230, 0.045);        /* blueprint grid: fine lines */

  /* Fonts */
  --font-main: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  /* Layout */
  --container: 1200px;
  --gutter: 20px;
  --header-h: 68px;
  --radius: 6px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --header-h: 76px;
  }
}


/* 2. Base styles
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-main);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--on-dark);
  background: var(--navy-800);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.no-scroll {
  overflow: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
p {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--hivis);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 10px 16px;
  font-weight: 700;
  color: var(--ink);
  background: var(--hivis);
  border-radius: var(--radius);
}

.skip-link:focus {
  top: 12px;
}


/* 3. Shared pieces
   ========================================================================== */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Small label above headings, e.g. "WEBSITES FOR TRADES" */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-main);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hivis);
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  font-size: 0.975rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  border: 2px solid transparent;
  border-radius: 4px;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s var(--ease);
}

.btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s var(--ease);
}

.btn:hover svg {
  transform: translateX(4px);
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  color: var(--navy-900);
  background: var(--hivis);
}

.btn-primary:hover {
  background: var(--hivis-light);
}

.btn-outline {
  color: var(--on-dark);
  border-color: rgba(242, 245, 249, 0.3);
}

.btn-outline:hover {
  background: rgba(242, 245, 249, 0.06);
  border-color: var(--on-dark);
}

.btn-lg {
  min-height: 58px;
  padding: 14px 28px;
  font-size: 1.05rem;
}


/* 4. Header + navigation
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-h);
  color: var(--on-dark);
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s, border-color 0.3s;
}

/* Solid header once the page is scrolled (added by script.js) */
.site-header.is-scrolled,
.site-header.nav-open {
  background: rgba(7, 17, 28, 0.94);
  border-bottom-color: var(--line-dark);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.25rem;
  font-weight: 800;
  font-stretch: 108%;
  letter-spacing: -0.01em;
}

.logo-mark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.logo-frame {
  fill: none;
  stroke: var(--on-dark);
  stroke-width: 3;
}

.logo-bricks {
  fill: var(--hivis);
}

.logo-text span {
  color: var(--hivis);
}

.nav {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav-list {
  display: flex;
  gap: 30px;
}

.nav-list a {
  position: relative;
  padding: 6px 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--on-dark-muted);
  transition: color 0.2s;
}

.nav-list a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--hivis);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}

.nav-list a:hover,
.nav-list a.is-active {
  color: var(--on-dark);
}

.nav-list a:hover::after,
.nav-list a.is-active::after {
  transform: scaleX(1);
}

.nav-cta {
  min-height: 44px;
  padding: 10px 18px;
  font-size: 0.92rem;
}

.nav-toggle {
  display: none;
}

/* Mobile + tablet menu */
@media (max-width: 959.98px) {
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    margin-right: -10px;
  }

  .nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: currentColor;
    transition: transform 0.3s var(--ease);
  }

  .nav-open .nav-toggle span:first-child {
    transform: translateY(4px) rotate(45deg);
  }

  .nav-open .nav-toggle span:last-child {
    transform: translateY(-4px) rotate(-45deg);
  }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 4px var(--gutter) 28px;
    background: var(--navy-900);
    border-bottom: 1px solid var(--line-dark);
    box-shadow: 0 24px 40px rgba(2, 6, 12, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s, transform 0.3s var(--ease), visibility 0s linear 0.3s;
  }

  .nav-open .nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.25s, transform 0.3s var(--ease);
  }

  .nav-list {
    flex-direction: column;
    gap: 0;
  }

  .nav-list a {
    display: block;
    padding: 16px 0;
    font-size: 1.15rem;
    color: var(--on-dark);
    border-bottom: 1px solid var(--line-dark);
  }

  .nav-list a::after {
    display: none;
  }

  .nav-cta {
    min-height: 52px;
    font-size: 1rem;
  }
}


/* 5. Hero
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--header-h) + 48px);
  color: var(--on-dark);
  background: var(--navy-800);
}

/* Cinematic background photo, faded into the navy */
.hero-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: min(100%, 1040px);
  overflow: hidden;
  pointer-events: none;
}

.hero-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 45%;
  opacity: 0.7;
  animation: push 14s var(--ease) both;
}

.hero-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, rgba(7, 16, 28, 0.55) 0%, rgba(7, 16, 28, 0) 70%),
    linear-gradient(180deg, rgba(7, 16, 28, 0.88) 0%, rgba(7, 16, 28, 0.45) 30%, rgba(7, 16, 28, 0.7) 55%, var(--navy-800) 88%);
}

/* Faint blueprint grid over the top of the hero */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(var(--line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 80% 45% at 50% 25%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 80% 45% at 50% 25%, #000 10%, transparent 70%);
  opacity: 0.7;
  pointer-events: none;
}

.hero > .container {
  position: relative;
  z-index: 2;
  padding-bottom: 96px;
}

.hero-content {
  max-width: 960px;
  margin-inline: auto;
  text-align: center;
}

.hero-title {
  font-size: clamp(2.6rem, 1.4rem + 4.6vw, 4.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.hero-title .eyebrow {
  display: flex;
  justify-content: center;
  margin-bottom: 26px;
  letter-spacing: 0.16em;
}

.hero-title .eyebrow::after {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
}

.hero-line {
  white-space: nowrap;
}

/* Second part of the headline: its own line, in yellow */
.hero-title .highlight {
  display: block;
  color: var(--hivis);
}

.hero-text {
  max-width: 40rem;
  margin: 28px auto 0;
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
  font-weight: 500;
  color: var(--on-dark-muted);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
}

/* ---- Website mockup ------------------------------------------------------
   Sizes inside the mockup use "cqw" (1cqw = 1% of the mockup's width),
   so the whole picture scales down perfectly on smaller screens.        */
.showcase {
  position: relative;
  container-type: inline-size;
  max-width: 1000px;
  margin: 72px auto 0;
  transform: perspective(2200px) rotateX(var(--tilt, 0deg)) scale(var(--zoom, 1));
  transform-origin: 50% 100%;
  will-change: transform;
}

/* Soft light glow behind the mockup */
.showcase::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 20%;
  bottom: -12%;
  z-index: -1;
  background:
    radial-gradient(ellipse 50% 50% at 30% 60%, rgba(255, 200, 0, 0.22), transparent 70%),
    radial-gradient(ellipse 55% 55% at 70% 40%, rgba(70, 130, 220, 0.28), transparent 70%);
  filter: blur(40px);
}

/* Blueprint corner marks */
.mark {
  position: absolute;
  z-index: 1;
  width: 22px;
  height: 22px;
  border: 0 solid var(--line-dark-strong);
}

.mark-tl { top: -14px; left: -14px; border-top-width: 2px; border-left-width: 2px; }
.mark-tr { top: -14px; right: -14px; border-top-width: 2px; border-right-width: 2px; }
.mark-bl { bottom: -14px; left: -14px; border-bottom-width: 2px; border-left-width: 2px; }

/* Browser window */
.browser {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border-radius: 1cqw;
  box-shadow:
    0 50px 100px -30px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(120, 165, 230, 0.16);
}

.browser-bar {
  display: flex;
  align-items: center;
  height: 4.2cqw;
  padding: 0 1.8cqw;
  background: #E7EBF0;
  border-bottom: 1px solid #D2D9E2;
}

.browser-dots {
  display: flex;
  gap: 0.7cqw;
}

.browser-dots i {
  width: 1.1cqw;
  height: 1.1cqw;
  border-radius: 50%;
  background: #C2CAD4;
}

.browser-url {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6cqw;
  width: 38%;
  height: 2.6cqw;
  margin-inline: auto;
  transform: translateX(-2.5cqw);
  font-family: var(--font-mono);
  font-size: 1.15cqw;
  white-space: nowrap;
  color: #566374;
  background: var(--white);
  border-radius: 0.5cqw;
}

.browser-url svg {
  width: 1.2cqw;
  height: 1.2cqw;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
}

.browser-screen {
  aspect-ratio: 16 / 10.2;
  overflow: hidden;
  color: #151515;
  background: #F4F2EE;
}

/* Example client website (desktop) */
.demo-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 43cqw;
  padding: 0 4.5cqw;
  color: #FFFFFF;
  background: #0B0D10;
}

.demo-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 55%;
}

.demo-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 10, 14, 0.9) 0%, rgba(8, 10, 14, 0.6) 38%, rgba(8, 10, 14, 0) 68%),
    linear-gradient(180deg, rgba(8, 10, 14, 0.55) 0%, rgba(8, 10, 14, 0) 25%);
}

.demo-nav,
.demo-copy {
  position: relative;
  z-index: 1;
}

.demo-nav {
  display: flex;
  align-items: center;
  gap: 3cqw;
  height: 6.4cqw;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.demo-logo {
  font-size: 1.55cqw;
  font-weight: 800;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.demo-logo span {
  font-weight: 500;
  opacity: 0.75;
}

.demo-links {
  display: flex;
  gap: 2.6cqw;
  margin-left: auto;
  font-size: 1.2cqw;
  font-weight: 500;
  opacity: 0.85;
}

.demo-links i {
  font-style: normal;
}

.demo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8cqw 1.5cqw;
  font-size: 1.15cqw;
  font-weight: 700;
  white-space: nowrap;
  color: #151515;
  background: #FFFFFF;
  border-radius: 0.35cqw;
}

.demo-copy {
  max-width: 42cqw;
  margin-top: auto;
  padding-bottom: 4.4cqw;
}

.demo-tag {
  display: block;
  margin-bottom: 1.4cqw;
  font-size: 1.05cqw;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.8;
}

.demo-title {
  display: block;
  margin-bottom: 1.8cqw;
  font-size: 5cqw;
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.demo-sub {
  display: block;
  max-width: 34cqw;
  margin-bottom: 2.4cqw;
  font-size: 1.35cqw;
  line-height: 1.5;
  opacity: 0.8;
}

.demo-actions {
  display: flex;
  align-items: center;
  gap: 1.2cqw;
}

.demo-btn-lg {
  padding: 1.25cqw 2.2cqw;
  font-size: 1.3cqw;
}

.demo-btn-ghost {
  padding: 1.1cqw 2cqw;
  font-size: 1.3cqw;
  color: #FFFFFF;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.demo-rating {
  display: block;
  margin-top: 2cqw;
  font-size: 1.1cqw;
  opacity: 0.85;
}

.demo-rating b {
  margin-right: 0.5cqw;
  letter-spacing: 0.1em;
  color: var(--hivis);
}

.demo-section {
  padding: 2.4cqw 4.5cqw;
}

.demo-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.8cqw;
  font-size: 1.9cqw;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.demo-link {
  font-size: 1.15cqw;
  font-weight: 600;
  color: #6A6A6A;
}

.demo-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8cqw;
}

.demo-card {
  display: block;
  overflow: hidden;
  background: #FFFFFF;
  border-radius: 0.6cqw;
  box-shadow: 0 0.2cqw 1cqw rgba(0, 0, 0, 0.06);
}

.demo-card img {
  width: 100%;
  height: 10cqw;
  object-fit: cover;
}

.demo-card span {
  display: block;
  padding: 1.2cqw 1.4cqw;
  font-size: 1.3cqw;
  font-weight: 700;
}

/* Phone */
.phone {
  position: absolute;
  right: -3.5cqw;
  bottom: -6cqw;
  z-index: 2;
  width: 21cqw;
  padding: 0.75cqw;
  background: #03060A;
  border-radius: 3.4cqw;
  box-shadow:
    0 40px 80px -20px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(120, 165, 230, 0.22);
}

/* Inside the phone, 1cqw = 1% of the phone screen's width */
.phone-screen {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 9 / 19;
  overflow: hidden;
  color: #151515;
  background: #F4F2EE;
  border-radius: 2.7cqw;
}

.phone-island {
  position: absolute;
  top: 3cqw;
  left: 50%;
  z-index: 3;
  width: 30cqw;
  height: 8.5cqw;
  background: #03060A;
  border-radius: 99px;
  transform: translateX(-50%);
}

.demo-m-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15cqw 6cqw 4cqw;
  color: #FFFFFF;
  background: #141414;
}

.demo-m-nav .demo-logo {
  font-size: 4.6cqw;
}

.demo-burger {
  display: grid;
  gap: 1.8cqw;
}

.demo-burger i {
  display: block;
  width: 7cqw;
  height: 0.9cqw;
  background: #FFFFFF;
}

.demo-m-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100cqw;
  padding: 6cqw;
  color: #FFFFFF;
}

.demo-m-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 12, 12, 0.1) 0%, rgba(12, 12, 12, 0.88) 78%);
}

.demo-m-hero > span {
  position: relative;
  z-index: 1;
}

.demo-m-hero .demo-bg {
  object-position: 74% 50%;
}

.demo-m-hero .demo-tag {
  margin-bottom: 2.6cqw;
  font-size: 3.3cqw;
}

.demo-m-hero .demo-title {
  margin-bottom: 4.5cqw;
  font-size: 8.8cqw;
}

.demo-m-hero .demo-btn-block {
  padding: 3.6cqw;
  font-size: 4.2cqw;
  border-radius: 1.4cqw;
}

.demo-m-list {
  display: grid;
  gap: 3cqw;
  padding: 5cqw;
}

.demo-m-item {
  display: flex;
  align-items: center;
  gap: 3.5cqw;
  padding: 2.4cqw;
  font-size: 4.2cqw;
  font-weight: 700;
  background: #FFFFFF;
  border-radius: 2.4cqw;
  box-shadow: 0 0.5cqw 2cqw rgba(0, 0, 0, 0.06);
}

.demo-m-item img {
  width: 13cqw;
  height: 13cqw;
  object-fit: cover;
  border-radius: 1.6cqw;
}

/* "New enquiry" card */
.enquiry-card {
  position: absolute;
  left: -5cqw;
  bottom: 9cqw;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px 14px 14px;
  color: var(--ink);
  background: var(--white);
  border-radius: 8px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5);
}

.enquiry-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  color: var(--navy-900);
  background: var(--hivis);
  border-radius: 6px;
}

.enquiry-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.enquiry-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.enquiry-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.enquiry-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.enquiry-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink-muted);
}

.enquiry-time::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22C55E;
  animation: pulse 2s ease-out infinite;
}

.enquiry-title {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
}

/* Trades strip */
.hero-trades {
  position: relative;
  z-index: 2;
  background: var(--navy-950);
  border-top: 1px solid var(--line-dark);
}

/* Thin beam of light along the top edge */
.hero-trades::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: min(760px, 80%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hivis), transparent);
  opacity: 0.7;
  transform: translateX(-50%);
}

.hero-trades-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-block: 14px;
}

.trades-label {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--hivis);
}

/* One slim line of trades that slowly scrolls sideways, fading at the edges */
.trades-marquee {
  display: flex;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.trades-track {
  display: flex;
  flex-shrink: 0;
  animation: trades-scroll 150s linear infinite;
}

.trades-marquee:hover .trades-track {
  animation-play-state: paused;
}

.trades-track li {
  display: inline-flex;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--on-dark-muted);
}

/* Small square after each trade */
.trades-track li::after {
  content: "";
  width: 4px;
  height: 4px;
  margin-inline: 16px;
  background: var(--line-dark-strong);
}

@keyframes trades-scroll {
  to { transform: translateX(-100%); }
}

/* Visitors who prefer less motion can swipe/scroll the list instead */
@media (prefers-reduced-motion: reduce) {
  .trades-marquee {
    overflow-x: auto;
  }
}

/* Tablet and up */
@media (min-width: 768px) {
  .hero {
    padding-top: calc(var(--header-h) + 72px);
  }

  .hero > .container {
    padding-bottom: 130px;
  }

  .showcase {
    margin-top: 84px;
  }
}

/* Tablets and small laptops: keep the phone + card inside the screen edges */
@media (min-width: 600px) and (max-width: 1099.98px) {
  .phone {
    right: -1.5cqw;
  }

  .enquiry-card {
    left: -2cqw;
  }
}

/* Phones */
@media (max-width: 599.98px) {
  .hero-title .eyebrow {
    margin-bottom: 20px;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
  }

  .hero-title .eyebrow::before,
  .hero-title .eyebrow::after {
    display: none;
  }

  .hero-actions .btn {
    flex: 1 1 100%;
  }

  .showcase {
    margin-top: 56px;
  }

  .mark {
    display: none;
  }

  .phone {
    right: -2cqw;
    bottom: -14cqw;
    width: 29cqw;
    padding: 1cqw;
    border-radius: 4.6cqw;
  }

  .phone-screen {
    border-radius: 3.8cqw;
  }

  .enquiry-card {
    left: -2cqw;
    bottom: -13cqw;
    gap: 8px;
    padding: 9px 10px 9px 9px;
  }

  .enquiry-icon {
    width: 32px;
    height: 32px;
  }

  .enquiry-icon svg {
    width: 18px;
    height: 18px;
  }

  .enquiry-meta {
    gap: 8px;
  }

  .enquiry-label {
    font-size: 0.6rem;
  }

  .enquiry-time {
    font-size: 0.68rem;
  }

  .enquiry-title {
    font-size: 0.8rem;
  }

  .hero-trades-inner {
    gap: 14px;
  }
}


/* 6. Section basics
   ========================================================================== */
.section {
  position: relative;
  padding-block: clamp(84px, 10vw, 132px);
}

/* Blueprint background: navy with a bold grid + a fine grid */
.section-blueprint {
  color: var(--on-dark);
  background-color: var(--navy-800);
  background-image:
    linear-gradient(var(--bp-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-major) 1px, transparent 1px),
    linear-gradient(var(--bp-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-minor) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: center top;
}

/* Shading so the grid fades softly at the top and edges */
.section-blueprint::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--navy-950) 0%, rgba(3, 7, 13, 0) 180px),
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(3, 7, 13, 0) 45%, rgba(3, 7, 13, 0.7) 100%);
  pointer-events: none;
}

.section-blueprint > .container {
  position: relative;
}

.section-head {
  max-width: 780px;
  margin: 0 auto 56px;
  text-align: center;
}

.section-head .eyebrow {
  justify-content: center;
}

.section-head .eyebrow::after {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
}

.section-title {
  margin-top: 18px;
  font-size: clamp(2.2rem, 1.4rem + 3.2vw, 3.6rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.section-title .highlight {
  color: var(--hivis);
}

.section-text {
  max-width: 40rem;
  margin: 18px auto 0;
  font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.15rem);
  font-weight: 500;
  color: var(--on-dark-muted);
}

/* Dark card used on blueprint sections */
.panel {
  position: relative;
  background: rgba(8, 18, 31, 0.86);
  border: 1px solid rgba(120, 165, 230, 0.16);
  border-radius: 12px;
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.8);
}


/* 7. Services & prices
   ========================================================================== */
.pricing {
  display: grid;
  gap: 28px;
}

/* "Included in every package" block with the blueprint drawing */
.spec {
  display: grid;
  gap: 28px;
  align-items: center;
  margin-bottom: 28px;
  padding: 32px 24px;
}

.spec-drawing svg {
  width: 100%;
  max-width: 300px;
  height: auto;
  margin-inline: auto;
}

.spec-kicker {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hivis);
}

.spec-title {
  margin-top: 10px;
  font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.1rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.spec-list {
  display: grid;
  gap: 12px;
  margin-top: 24px;
  font-size: 1rem;
  font-weight: 600;
}

/* Blueprint drawing styles */
.bp-line {
  fill: none;
  stroke: rgba(140, 185, 245, 0.6);
  stroke-width: 1.2;
}

.bp-soft {
  fill: rgba(140, 185, 245, 0.07);
}

.bp-bar {
  fill: rgba(140, 185, 245, 0.42);
}

.bp-accent {
  fill: var(--hivis);
}

.bp-text {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  fill: rgba(190, 212, 245, 0.85);
}

/* The drawing's lines sketch themselves in when it scrolls into view */
.js .spec .bp-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.8s var(--ease) 0.2s;
}

.js .spec.is-visible .bp-line {
  stroke-dashoffset: 0;
}

/* Price cards */
.plan {
  display: flex;
  flex-direction: column;
  padding: 34px 28px 28px;
}

/* Keep the fade-in and add a smooth hover */
.js .plan[data-reveal] {
  transition:
    box-shadow 0.3s,
    border-color 0.3s,
    opacity 0.7s var(--ease) var(--delay, 0s),
    transform 0.7s var(--ease) var(--delay, 0s);
}

.plan:hover {
  border-color: rgba(120, 165, 230, 0.34);
}

.plan-name {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.plan-for {
  margin-top: 6px;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--on-dark-muted);
}

/* One-time price + monthly price, side by side */
.plan-price {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  margin-top: 24px;
  padding: 22px 0;
  border-block: 1px solid rgba(120, 165, 230, 0.16);
}

.price-part {
  display: flex;
  flex-direction: column;
}

.price {
  font-size: clamp(2.3rem, 1.95rem + 1vw, 2.9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
}

.price-label {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hivis);
}

.price-note {
  margin-top: 2px;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--on-dark-muted);
}

.price-plus {
  padding-top: 4px;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1;
  color: var(--line-dark-strong);
}

.plan-note {
  margin-top: 18px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--on-dark-muted);
}

.plan-note strong {
  font-weight: 700;
  white-space: nowrap;
  color: var(--hivis);
}

/* "After your first year: £39 a month for everyone" banner */
.after-year {
  display: grid;
  gap: 20px;
  align-items: center;
  margin-top: 28px;
  padding: 28px 24px;
  background: linear-gradient(90deg, rgba(255, 200, 0, 0.1) 0%, rgba(8, 18, 31, 0.92) 65%);
  border-color: rgba(255, 200, 0, 0.55);
}

.after-year-kicker {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hivis);
}

.after-year-title {
  margin-top: 8px;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.after-year-title .highlight {
  white-space: nowrap;
  color: var(--hivis);
}

.after-year-sub {
  max-width: 40rem;
  margin-top: 8px;
  font-weight: 500;
  color: var(--on-dark-muted);
}

.after-year-price {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .after-year {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 40px;
    padding: 32px 40px;
  }

  .after-year-price {
    align-items: flex-end;
    text-align: right;
  }
}

@media (min-width: 960px) {
  .after-year {
    margin-top: 44px;
  }
}

/* "1. Pay once  2. Then monthly" strip */
.pay-steps {
  display: grid;
  gap: 12px;
  margin: 0 0 44px;
  padding: 0;
  list-style: none;
}

.pay-step {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  font-size: 0.95rem;
  color: var(--on-dark-muted);
}

.pay-step strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--on-dark);
}

.pay-step-num {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  font-weight: 800;
  color: var(--navy-900);
  background: var(--hivis);
  border-radius: 50%;
}

@media (min-width: 768px) {
  .pay-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px;
    max-width: 820px;
    margin-inline: auto;
  }

  /* Arrow between the two steps */
  .pay-step + .pay-step::before {
    content: "→";
    position: absolute;
    left: -36px;
    top: 50%;
    font-size: 1.4rem;
    color: var(--hivis);
    transform: translateY(-50%);
  }
}

.care-list li,
.spec-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* Yellow tick */
.care-list li::before,
.spec-list li::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 4px;
  background: var(--hivis) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%2307101C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* Button always sits at the bottom of the card */
.plan-btn {
  width: 100%;
  margin-top: auto;
}

.plan-note {
  margin-bottom: 28px;
}

/* Highlighted package */
.plan-featured {
  background: linear-gradient(180deg, rgba(17, 34, 56, 0.97) 0%, rgba(8, 18, 31, 0.97) 100%);
  border-color: rgba(255, 200, 0, 0.6);
  box-shadow:
    0 0 0 1px rgba(255, 200, 0, 0.12),
    0 40px 90px -40px rgba(255, 200, 0, 0.35);
}

.plan-featured:hover {
  border-color: var(--hivis);
}

/* Faint grid + warm glow inside the highlighted card */
.plan-featured::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 70% 45% at 85% 0%, rgba(255, 200, 0, 0.16), transparent 70%),
    linear-gradient(var(--line-dark) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--line-dark) 1px, transparent 1px) 0 0 / 32px 32px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 55%);
  mask-image: linear-gradient(180deg, #000, transparent 55%);
  pointer-events: none;
}

.plan-featured > * {
  position: relative;
}

.plan-badge {
  position: absolute;
  top: 0;
  left: 50%;
  padding: 7px 14px;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--navy-900);
  background: var(--hivis);
  border-radius: 99px;
  transform: translate(-50%, -50%);
}

.plan-featured > .plan-badge {
  position: absolute;
}

/* Care plan + extras */
.pricing-extras {
  display: grid;
  gap: 20px;
  margin-top: 20px;
}

.care,
.extras {
  padding: 30px 28px;
}

.care {
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-left: 4px solid var(--hivis);
}

.care-title,
.extras-title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.care-text {
  max-width: 34rem;
  margin-top: 8px;
  font-weight: 500;
  color: var(--on-dark-muted);
}

.care-list {
  display: grid;
  gap: 10px;
  margin-top: 20px;
  font-size: 0.95rem;
  font-weight: 600;
}

.extras-title {
  margin-bottom: 6px;
}

.extras-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  font-weight: 500;
  border-bottom: 1px dashed rgba(120, 165, 230, 0.24);
}

.extras-list small {
  display: block;
  margin-top: 2px;
  font-size: 0.85rem;
  color: var(--on-dark-muted);
}

.extras-price {
  font-weight: 800;
  white-space: nowrap;
}

.extras-note {
  margin-top: 18px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--on-dark-muted);
}

.extras-note a {
  font-weight: 700;
  color: var(--on-dark);
  text-decoration: underline;
  text-decoration-color: var(--hivis);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

@media (max-width: 599.98px) {
  .spec-drawing svg {
    max-width: 230px;
  }
}

@media (min-width: 600px) {
  .care-list,
  .spec-list {
    grid-template-columns: repeat(2, auto);
    justify-content: start;
    column-gap: 28px;
  }
}

@media (min-width: 960px) {
  .spec {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 64px;
    margin-bottom: 40px;
    padding: 44px 56px 44px 44px;
  }

  .spec-list {
    gap: 16px 36px;
    font-size: 1.05rem;
  }

  .pricing {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    padding-top: 16px;
  }

  .plan {
    padding: 38px 32px 32px;
  }

  /* Highlighted card sits a little taller than the others */
  .plan-featured {
    margin-block: -16px;
    padding-block: 54px 48px;
  }

  .plan-for {
    min-height: 3.2em;
  }

  .pricing-extras {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 24px;
    margin-top: 40px;
  }

  .care {
    flex-direction: row;
    justify-content: space-between;
    padding: 34px 32px;
  }

  .extras {
    padding: 34px 32px;
  }
}


/* 8. Why choose us
   ========================================================================== */
.why {
  display: grid;
  gap: 48px;
}

.why-intro .section-text {
  margin: 18px 0 36px;
}

/* Cinematic photo with a call-to-action over the bottom */
.why-photo {
  position: relative;
  margin: 0;
  aspect-ratio: 5 / 4;
}

.why-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.why-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(3, 7, 13, 0) 45%, rgba(3, 7, 13, 0.85) 100%);
  box-shadow: inset 0 0 0 1px rgba(120, 165, 230, 0.16);
  pointer-events: none;
}

.why-photo-cta {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
}

.why-photo-cta span {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.why-photo-cta .btn {
  min-height: 44px;
  padding: 10px 18px;
}

/* Phones: a squarer photo so the button doesn't cover too much of it */
@media (max-width: 599.98px) {
  .why-photo {
    aspect-ratio: 1 / 1;
  }
}

.why-list {
  display: grid;
  border-top: 1px solid rgba(120, 165, 230, 0.16);
}

.why-item {
  padding: 28px 0;
  border-bottom: 1px solid rgba(120, 165, 230, 0.16);
}

.why-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.why-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  color: var(--hivis);
  background: rgba(255, 200, 0, 0.06);
  border: 1px solid rgba(120, 165, 230, 0.24);
  border-radius: 10px;
  transition: border-color 0.3s, background-color 0.3s, transform 0.3s var(--ease);
}

.why-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.why-item:hover .why-icon {
  background: rgba(255, 200, 0, 0.12);
  border-color: var(--hivis);
  transform: translateY(-2px);
}

.why-num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--line-dark-strong);
}

.why-title {
  margin-top: 20px;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.why-text {
  margin-top: 8px;
  font-weight: 500;
  color: var(--on-dark-muted);
}

/* Two columns of reasons, with a blueprint line between them */
@media (min-width: 640px) {
  .why-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .why-item {
    padding: 32px 0;
  }

  .why-item:nth-child(odd) {
    padding-right: 32px;
    border-right: 1px solid rgba(120, 165, 230, 0.16);
  }

  .why-item:nth-child(even) {
    padding-left: 32px;
  }
}

/* Desktop: heading + photo on the left, reasons on the right */
@media (min-width: 1024px) {
  .why {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.3fr);
    align-items: start;
    gap: 72px;
  }

  .why-photo-cta {
    left: 24px;
    right: 24px;
    bottom: 24px;
  }
}


/* 9. Our work
   ========================================================================== */
.work-grid {
  display: grid;
  gap: 24px;
}

.work-card {
  display: flex;
  flex-direction: column;
  padding: 14px;
  overflow: hidden;
}

/* Dark "stage" behind each mockup, lit with the demo's own brand colour */
.work-stage {
  position: relative;
  padding: 8% 9% 11% 7%;
  overflow: hidden;
  border-radius: 8px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 100%, var(--glow, rgba(255, 200, 0, 0.25)), transparent 70%),
    linear-gradient(var(--bp-major) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, var(--bp-major) 1px, transparent 1px) 0 0 / 40px 40px,
    var(--navy-950);
}

.work-shot {
  position: relative;
  container-type: inline-size;
}

.work-browser {
  overflow: hidden;
  background: var(--white);
  border-radius: 1.2cqw;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(120, 165, 230, 0.16);
  transition: transform 0.6s var(--ease);
}

.work-browser .browser-bar {
  height: 4.6cqw;
}

.work-browser .browser-dots i {
  width: 1.2cqw;
  height: 1.2cqw;
}

.work-browser .browser-url {
  height: 2.9cqw;
  font-size: 1.35cqw;
}

.work-browser .browser-url svg {
  width: 1.4cqw;
  height: 1.4cqw;
}

.work-browser img,
.work-phone img {
  width: 100%;
  height: auto;
}

.work-phone {
  position: absolute;
  right: -5cqw;
  bottom: -7cqw;
  width: 22cqw;
  padding: 0.9cqw;
  background: #03060A;
  border-radius: 3.6cqw;
  box-shadow: 0 30px 60px -16px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(120, 165, 230, 0.22);
  transition: transform 0.6s var(--ease);
}

.work-phone img {
  border-radius: 2.8cqw;
}

.work-card:hover .work-browser {
  transform: translateY(-4px);
}

.work-card:hover .work-phone {
  transform: translateY(-10px);
}

.work-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 10px 10px;
}

.work-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.work-num {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hivis);
}

.work-tag {
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--on-dark-muted);
  border: 1px solid rgba(120, 165, 230, 0.24);
  border-radius: 99px;
}

.work-title {
  margin-top: 14px;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.work-text {
  margin-top: 8px;
  font-weight: 500;
  color: var(--on-dark-muted);
}

.work-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 16px 0 24px;
  font-size: 0.92rem;
  font-weight: 600;
}

.work-features li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.work-features li::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--hivis);
}

.work-btn {
  align-self: flex-start;
  margin-top: auto;
}

.work-note {
  margin-top: 40px;
  font-size: 1.05rem;
  font-weight: 500;
  text-align: center;
  color: var(--on-dark-muted);
}

.work-note a {
  font-weight: 700;
  color: var(--on-dark);
  text-decoration: underline;
  text-decoration-color: var(--hivis);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

@media (min-width: 900px) {
  .work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Featured demo spans the full width: mockup left, details right */
  .work-card-featured {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: center;
    gap: 16px;
  }

  .work-card-featured .work-info {
    padding: 24px 32px 24px 24px;
  }

  .work-card-featured .work-title {
    font-size: clamp(1.6rem, 1.1rem + 1vw, 2.1rem);
  }

  .work-card-featured .work-features {
    flex-direction: column;
  }

  /* Second featured demo mirrors the first: details left, mockup right */
  .work-card-flipped {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  }

  .work-card-flipped .work-stage {
    order: 2;
  }

  .work-card-flipped .work-info {
    padding: 24px 24px 24px 32px;
  }
}


/* 10. Customer reviews
   ========================================================================== */
.reviews {
  display: grid;
  gap: 24px;
}

.review {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 32px 28px 28px;
}

.review-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.review-quote {
  width: 34px;
  height: 26px;
  fill: var(--hivis);
}

/* Five yellow stars drawn from one repeating star shape */
.review-stars {
  width: 100px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M8 .8l2.1 4.4 4.8.6-3.5 3.3.9 4.8L8 11.6l-4.3 2.3.9-4.8L1.1 5.8l4.8-.6z' fill='%23FFC800'/%3E%3C/svg%3E") left center / 20px 16px repeat-x;
}

.review-text {
  margin: 24px 0 28px;
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.65;
}

.review-text p {
  margin: 0;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px dashed rgba(120, 165, 230, 0.24);
}

.review-avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--hivis);
  background: rgba(255, 200, 0, 0.1);
  border: 1px solid rgba(255, 200, 0, 0.4);
  border-radius: 50%;
}

.review-author strong {
  display: block;
  font-weight: 800;
}

.review-author small {
  display: block;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--on-dark-muted);
}

/* Middle review stands out */
.review-featured {
  background: linear-gradient(180deg, rgba(17, 34, 56, 0.97) 0%, rgba(8, 18, 31, 0.97) 100%);
  border-color: rgba(255, 200, 0, 0.55);
  box-shadow:
    0 0 0 1px rgba(255, 200, 0, 0.12),
    0 40px 90px -40px rgba(255, 200, 0, 0.3);
}

.review-featured .review-avatar {
  color: var(--navy-900);
  background: var(--hivis);
  border-color: var(--hivis);
}

@media (min-width: 900px) {
  .reviews {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-block: 16px;
  }

  .review {
    padding: 36px 32px 32px;
  }

  .review-featured {
    margin-block: -16px;
    padding-block: 52px 48px;
  }

  .review-featured .review-text {
    font-size: 1.15rem;
  }
}


/* 11. Contact
   ========================================================================== */
.contact {
  display: grid;
  gap: 48px;
}

.contact-info .section-text {
  margin: 18px 0 32px;
}

.contact-methods {
  display: grid;
  gap: 12px;
}

.contact-method {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px 16px 16px;
  transition: border-color 0.3s, transform 0.3s var(--ease);
}

.contact-method:hover {
  border-color: var(--hivis);
  transform: translateX(4px);
}

.contact-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  color: var(--hivis);
  background: rgba(255, 200, 0, 0.1);
  border: 1px solid rgba(255, 200, 0, 0.35);
  border-radius: 10px;
}

.contact-icon svg,
.contact-arrow {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-text {
  min-width: 0;
}

.contact-text small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}

.contact-text strong {
  display: block;
  font-size: 1.1rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.contact-arrow {
  flex-shrink: 0;
  margin-left: auto;
  color: var(--on-dark-muted);
  transition: color 0.3s, transform 0.3s var(--ease);
}

.contact-method:hover .contact-arrow {
  color: var(--hivis);
  transform: translateX(3px);
}

/* Enquiry form */
.contact-card {
  padding: 30px 22px;
}

.form-title {
  font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.form-intro {
  margin-top: 4px;
  font-weight: 500;
  color: var(--on-dark-muted);
}

.req {
  color: var(--hivis);
}

.form-grid {
  display: grid;
  gap: 18px;
  margin-top: 28px;
}

.field label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.92rem;
  font-weight: 700;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  font: inherit;
  font-size: 1rem;
  color: var(--on-dark);
  background: rgba(3, 7, 13, 0.6);
  border: 1px solid rgba(120, 165, 230, 0.26);
  border-radius: 6px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.field textarea {
  min-height: 120px;
  resize: vertical;
}

.field select {
  padding-right: 44px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23FFC800' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}

/* Dropdown list colours (the open list uses the device's own style) */
.field option {
  color: var(--ink);
  background: var(--white);
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(242, 245, 249, 0.4);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--hivis);
  box-shadow: 0 0 0 3px rgba(255, 200, 0, 0.2);
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: #FF7A7A;
}

.field-error {
  display: block;
  margin-top: 6px;
  font-size: 0.86rem;
  font-weight: 600;
  color: #FF9A9A;
}

.form-submit {
  width: 100%;
  margin-top: 26px;
}

.form-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.88rem;
  font-weight: 500;
  text-align: center;
  color: var(--on-dark-muted);
}

.form-note svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* Thank-you message */
.form-success {
  padding: 40px 8px;
  text-align: center;
}

.form-success:focus {
  outline: none;
}

.form-success-icon {
  display: inline-grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin-bottom: 20px;
  color: var(--navy-900);
  background: var(--hivis);
  border-radius: 50%;
}

.form-success-icon svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.form-success h3 {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.form-success p {
  max-width: 30rem;
  margin: 12px auto 0;
  font-weight: 500;
  color: var(--on-dark-muted);
}

.form-success a {
  font-weight: 700;
  color: var(--on-dark);
  text-decoration: underline;
  text-decoration-color: var(--hivis);
  text-underline-offset: 3px;
}

/* Phones: slimmer contact buttons so the text stays on one line */
@media (max-width: 479.98px) {
  .contact-method {
    gap: 12px;
    padding: 14px 16px 14px 14px;
  }

  .contact-icon {
    width: 44px;
    height: 44px;
  }

  .contact-text strong {
    font-size: 0.98rem;
  }

  .contact-arrow {
    display: none;
  }
}

@media (min-width: 600px) {
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field-full {
    grid-column: 1 / -1;
  }

  .contact-card {
    padding: 40px 36px;
  }
}

@media (min-width: 1024px) {
  .contact {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
    gap: 64px;
  }
}


/* 12. Footer + legal pop-ups
   ========================================================================== */
.site-footer {
  position: relative;
  overflow: hidden;
  padding-top: 72px;
  background: var(--navy-950);
  border-top: 1px solid var(--line-dark);
}

/* Thin beam of light along the top edge */
.site-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: min(760px, 80%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hivis), transparent);
  opacity: 0.7;
  transform: translateX(-50%);
}

.footer-grid {
  display: grid;
  gap: 40px;
}

.footer-about {
  max-width: 24rem;
  margin-top: 18px;
  font-weight: 500;
  color: var(--on-dark-muted);
}

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.socials a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--on-dark-muted);
  border: 1px solid rgba(120, 165, 230, 0.24);
  border-radius: 10px;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s var(--ease);
}

.socials a:hover {
  color: var(--navy-900);
  background: var(--hivis);
  border-color: var(--hivis);
  transform: translateY(-2px);
}

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

.socials .fill {
  fill: currentColor;
}

.socials .line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.footer-title {
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hivis);
}

.footer-links {
  display: grid;
  gap: 10px;
}

.footer-links a,
.footer-legal a,
.link-btn {
  font-weight: 500;
  color: var(--on-dark-muted);
  transition: color 0.2s;
}

.footer-links a:hover,
.footer-legal a:hover,
.link-btn:hover {
  color: var(--on-dark);
}

.footer-contact li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.footer-contact svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--hivis);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-contact a {
  overflow-wrap: anywhere;
}

.footer-areas-text {
  font-weight: 500;
  color: var(--on-dark-muted);
}

.footer-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.footer-areas li {
  padding: 4px 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--on-dark-muted);
  border: 1px solid rgba(120, 165, 230, 0.24);
  border-radius: 99px;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 56px;
  padding-block: 24px;
  font-size: 0.9rem;
  color: var(--on-dark-muted);
  border-top: 1px solid var(--line-dark);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.link-btn {
  padding: 0;
  font-size: inherit;
}

/* Giant outlined name across the bottom of the page */
.footer-wordmark {
  margin-bottom: -0.14em;
  font-size: clamp(3rem, 13.5vw, 15rem);
  font-weight: 900;
  font-stretch: 100%;
  line-height: 0.8;
  letter-spacing: -0.04em;
  text-align: center;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(120, 165, 230, 0.2);
  user-select: none;
}

@media (min-width: 640px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 48px;
  }
}

/* Legal pop-ups */
.legal-dialog {
  width: min(680px, calc(100% - 32px));
  max-height: min(85vh, 780px);
  padding: 0;
  color: var(--on-dark);
  background: var(--navy-900);
  border: 1px solid rgba(120, 165, 230, 0.24);
  border-radius: 12px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
}

.legal-dialog::backdrop {
  background: rgba(3, 7, 13, 0.78);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.legal-inner {
  position: relative;
  max-height: inherit;
  padding: 36px 28px 32px;
  overflow-y: auto;
}

.legal-inner h2 {
  margin-top: 14px;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.legal-updated {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--on-dark-muted);
}

.legal-inner h3 {
  margin-top: 26px;
  font-size: 1.05rem;
  font-weight: 800;
}

.legal-inner p:not(.eyebrow):not(.legal-updated) {
  margin-top: 6px;
  font-weight: 500;
  color: var(--on-dark-muted);
}

.legal-inner a {
  font-weight: 700;
  color: var(--on-dark);
  text-decoration: underline;
  text-decoration-color: var(--hivis);
  text-underline-offset: 3px;
}

.legal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--on-dark-muted);
  border: 1px solid rgba(120, 165, 230, 0.24);
  border-radius: 10px;
  transition: color 0.2s, border-color 0.2s;
}

.legal-close:hover {
  color: var(--hivis);
  border-color: var(--hivis);
}

.legal-close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}


/* 13. Animations
   ========================================================================== */

/* Hero fades in when the page loads */
.hero-content > * {
  animation: rise 0.8s var(--ease) both;
}

.hero-content > :nth-child(2) { animation-delay: 0.08s; }
.hero-content > :nth-child(3) { animation-delay: 0.16s; }

.browser {
  animation: rise 1s var(--ease) 0.25s both;
}

.phone {
  animation: rise 1s var(--ease) 0.5s both;
}

.enquiry-card {
  animation: rise 0.7s var(--ease) 0.9s both;
}

.mark {
  animation: fade 0.8s ease 0.7s both;
}

/* Sections below fade up as you scroll (script.js adds .is-visible) */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--delay, 0s);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Slow "camera push" on the hero background */
@keyframes push {
  from { opacity: 0; transform: scale(1.12); }
  to   { opacity: 0.7; transform: scale(1); }
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  100% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
}

/* Respect visitors who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}