/* ==========================================================
   City Print landing page
   Built from _cityprint/cityprint-home-template.json.

   The base rules give a readable, stacked page (this is what the
   Elementor editor and "reduce motion" visitors see). Everything
   that depends on the scripts is scoped to html.cp-motion, which
   cityprint-home.js adds once GSAP is ready.

   Defaults are prefixed with .cp-home so they beat Elementor's global
   colours, while colours set on a single widget in Elementor still win.
   ========================================================== */

:root {
  /* Brand palette */
  --cp-ink: #000000;      /* text */
  --cp-dark: #1c133d;     /* dark sections */
  --cp-accent: #5245c2;   /* buttons, highlights */
  --cp-paper: #f4f3fa;    /* page background (light tint of the accent) */
  --cp-white: #ffffff;
  --cp-header-h: 84px;
  --cp-gutter: clamp(16px, 5vw, 80px);
}

body:has(.cp-home) {
  background: var(--cp-paper);
}

/* Off-screen panels and huge one-line headings must never make phones
   zoom out to fit them. On <html> only: on <body> as well it would turn
   the body into its own scroll box and fight the smooth scrolling. */
html:has(.cp-home) {
  overflow-x: hidden;
  /* Elementor sets scroll-behavior: smooth on <html>, which makes
     ScrollTrigger's own scroll corrections animate (a visible jump).
     The script smooth-scrolls menu links itself. */
  scroll-behavior: auto !important;
}

/* clip (not hidden) on the body: stops sideways overflow without turning
   the body into its own scroll box */
body:has(.cp-home) {
  overflow-x: clip;
}

.cp-home {
  color: var(--cp-ink);
  overflow-x: clip;
  /* Elementor gives every container (and widget) a 0.4s transition on
     transform. GSAP moves these elements itself on every frame and pins
     sections with transforms, so that transition made pinned sections
     jump when they let go and made scroll animations lag. Switch the
     transform part off; colour/background transitions are unaffected. */
  --e-con-transform-transition-duration: 0s;
  --e-transform-transition-duration: 0s;
}

/* The site's Elementor kit (Playfair / DM Sans, gold square buttons) is
   for City Media; this page uses its own type and buttons. */
.cp-home,
.cp-home .elementor-heading-title,
.cp-home .elementor-widget-text-editor,
.cp-home .elementor-button {
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
}

/* h1/h2/h3 are always Oswald. It is already condensed, so no negative
   tracking. Doubled class beats the per-section heading rules below. */
.cp-home.cp-home :is(h1, h2, h3).elementor-heading-title,
.cp-home.cp-home .elementor-widget-text-editor :is(h1, h2, h3) {
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.02;
}

.cp-home .elementor-heading-title,
.cp-home .elementor-widget-text-editor {
  color: inherit;
}

.cp-home .elementor-widget-text-editor {
  font-size: 17px;
  line-height: 1.55;
}

.cp-home a {
  color: inherit;
}

.cp-home .elementor-button {
  padding: 14px 26px;
  border: 1px solid var(--cp-accent);
  border-radius: 999px;
  background: var(--cp-accent);
  color: var(--cp-white);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: lowercase;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.cp-home .elementor-button:hover,
.cp-home .elementor-button:focus {
  background: var(--cp-dark);
  color: var(--cp-white);
  border-color: var(--cp-dark);
}

/* Premium touches: a soft glow under buttons and an arrow that nudges
   forward on hover */
.cp-home .elementor-button {
  box-shadow: 0 14px 30px -14px rgba(82, 69, 194, 0.7);
}

.cp-home .elementor-button .elementor-button-text::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.55em;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.cp-home .elementor-button:hover .elementor-button-text::after {
  transform: translateX(4px);
}

.cp-home .cp-dark .elementor-button:hover,
.cp-home .cp-dark .elementor-button:focus {
  background: var(--cp-white);
  color: var(--cp-dark);
  border-color: var(--cp-white);
}

/* ---------- Header ---------- */

.cp-header {
  position: fixed !important;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--cp-header-h);
  padding: 0 var(--cp-gutter) !important;
  border-bottom: 1px solid rgba(28, 19, 61, 0.14);
  /* Solid tint, not a backdrop blur: a blur has to be redrawn on every
     scroll frame and was one of the causes of stutter. */
  background: rgba(244, 243, 250, 0.94);
  color: var(--cp-ink);
  transition: color 0.35s ease, border-color 0.35s ease, background-color 0.35s ease;
}

body.elementor-editor-active .cp-header {
  position: relative !important;
}

.cp-home .cp-header .cp-logo .elementor-heading-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.04em;
  text-transform: lowercase;
  white-space: nowrap;
}

.cp-home .cp-header .cp-nav-link .elementor-heading-title {
  font-size: 15px;
  font-weight: 500;
  text-transform: lowercase;
}

.cp-home .cp-header a {
  color: inherit;
}

.cp-home .cp-header .cp-cta .elementor-button {
  border-radius: 999px;
  border-color: var(--cp-accent);
  background: var(--cp-accent);
  color: var(--cp-white);
  padding: 12px 22px;
  text-transform: lowercase;
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

body.cp-invert .cp-header {
  color: var(--cp-white);
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(28, 19, 61, 0.96);
}

body.cp-invert .cp-home .cp-header .cp-cta .elementor-button:hover,
body.cp-invert .cp-home .cp-header .cp-cta .elementor-button:focus {
  background: var(--cp-white);
  border-color: var(--cp-white);
  color: var(--cp-dark);
}

@media (max-width: 767px) {
  .cp-header .cp-nav-link {
    display: none;
  }
}

/* ---------- Loading screen (removed) ----------
   The page opens straight on the hero. If an older copy of the page still
   has the .cp-preloader container, never show it. */

body:not(.elementor-editor-active) .cp-preloader {
  display: none !important;
}

/* ---------- Hero ---------- */

.cp-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--cp-header-h) + 48px) var(--cp-gutter) 72px !important;
  overflow: hidden;
}

/* Soft brand-colour glow (plain gradients: no blur filter to redraw) */
.cp-hero::after {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background:
    radial-gradient(40% 50% at 18% 30%, rgba(82, 69, 194, 0.28), transparent 72%),
    radial-gradient(36% 46% at 74% 22%, rgba(28, 19, 61, 0.14), transparent 72%),
    radial-gradient(46% 52% at 62% 84%, rgba(82, 69, 194, 0.20), transparent 72%);
  pointer-events: none;
}

.cp-home .cp-hero .cp-hero-title .elementor-heading-title {
  font-size: clamp(46px, 7.4vw, 124px);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.045em;
}

/* Two lines on desktop, leaving the right side for the copier */
.cp-home .cp-hero .cp-hero-title .elementor-heading-title {
  max-width: 11.5ch;
}

/* On a dark hero (background video) the highlight runs violet to lavender */
.cp-home .cp-hero:has(.elementor-background-video-container) .cp-hero-title span {
  background-image: linear-gradient(90deg, #8f86ff, #c9c4ff);
}

.cp-home .cp-hero .cp-hero-title span {
  background: linear-gradient(90deg, var(--cp-accent), var(--cp-dark));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cp-home .cp-hero .cp-hero-text {
  font-size: clamp(18px, 1.6vw, 22px);
}

.cp-home .cp-hero .cp-hero-text > .elementor-widget-container {
  max-width: 34ch; /* on the inner box: Elementor forces max-width:100% on widgets */
}

.cp-home .cp-hero .cp-hero-link .elementor-heading-title {
  font-size: 17px;
  font-weight: 600;
}

.cp-home .cp-hero .cp-hero-link a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* ---------- 3D copier layer (created by cityprint-copier3d.js) ---------- */

/* Layering: section backgrounds < 3D object (z 1) < text (z 2) < header.
   So the objects pass behind the words but in front of section colours. */
.cp-scene {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.cp-scene.is-ready {
  opacity: 1;
}

.cp-scene canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Editor / reduced motion: the copier sits inside the hero instead */
.cp-scene.is-static {
  position: absolute;
  inset: 0 0 0 45%;
  z-index: 0;
}

/* While a section is held in place (pinned) it's its own layer, so the
   3D layer moves inside it (cityprint-copier3d.js) */
.cp-scene.in-pin {
  position: absolute;
  inset: 0;
}

/* Text and buttons above the 3D object (Elementor's absolutely positioned
   widgets keep their own positioning) */
.cp-home .elementor-widget:not(.elementor-absolute):not(.elementor-fixed) {
  position: relative;
  z-index: 2;
}

/* ---------- Panels (design / print / deliver) ---------- */

.cp-panels {
  position: relative;
  padding: 0 !important;
}

.cp-panel {
  position: relative;
  min-height: 100vh;
  padding: calc(var(--cp-header-h) + 40px) var(--cp-gutter) 140px !important;
  overflow: hidden;
}

html:not(.cp-motion) .cp-panel {
  isolation: isolate;
}

.cp-panel,
.cp-panel-slab {
  --cp-panel-bg: var(--cp-white);
  --cp-panel-fg: var(--cp-ink);
  --cp-panel-label: var(--cp-accent);
  --cp-panel-tint: rgba(82, 69, 194, 0.1);
  background: var(--cp-panel-bg);
  color: var(--cp-panel-fg);
}

/* Each service has its own colour: white, black, violet, indigo */
.cp-panel:nth-child(4n + 2),
.cp-panel-slab:nth-child(4n + 2) {
  --cp-panel-bg: #000000;
  --cp-panel-fg: var(--cp-white);
  --cp-panel-label: #a59ef2;
  --cp-panel-tint: rgba(82, 69, 194, 0.22);
}

.cp-panel:nth-child(4n + 3),
.cp-panel-slab:nth-child(4n + 3) {
  --cp-panel-bg: var(--cp-accent);
  --cp-panel-fg: var(--cp-white);
  --cp-panel-label: rgba(255, 255, 255, 0.75);
  --cp-panel-tint: rgba(255, 255, 255, 0.1);
}

.cp-panel:nth-child(4n + 4),
.cp-panel-slab:nth-child(4n + 4) {
  --cp-panel-bg: var(--cp-dark);
  --cp-panel-fg: var(--cp-white);
  --cp-panel-label: #a59ef2;
  --cp-panel-tint: rgba(82, 69, 194, 0.3);
}

.cp-home .cp-panel .cp-label .elementor-heading-title {
  color: var(--cp-panel-label);
}

/* Progress bar turns white over the dark panels */
.cp-panels.is-dark .cp-slide-progress {
  background: var(--cp-white);
}

/* Colour disc behind each panel. The script puts it on the panel's slab
   and grows it as the panel scrolls in; without the script it's a pseudo
   on the panel. */
.cp-panel-disc,
html:not(.cp-motion) .cp-panel::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -18vmax;
  bottom: -30vmax;
  width: 80vmax;
  height: 80vmax;
  border-radius: 50%;
  background: var(--cp-panel-tint);
  pointer-events: none;
}

.cp-panel-disc {
  will-change: transform;
}

/* Sideways: the services section holds in place while the panels slide
   right-to-left (set up by cityprint-home.js). */
html.cp-motion .cp-panels {
  height: 100vh;
  overflow: hidden;
}

html.cp-motion .cp-panels-track {
  position: relative;
  z-index: 2; /* text: above the 3D object */
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  height: 100%;
  will-change: transform;
}

html.cp-motion .cp-panel {
  flex: 0 0 100vw !important;
  width: 100vw !important;
  height: 100vh;
  /* the script moves the panel's colour onto its slab behind the text */
}

/* Colour strip behind the text, sliding in step with it */
.cp-panels-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  display: flex;
  width: max-content;
  height: 100%;
  will-change: transform;
}

.cp-panel-slab {
  position: relative;
  flex: 0 0 100vw;
  width: 100vw;
  height: 100%;
  overflow: hidden;
  background: var(--cp-panel-bg);
}

.cp-slide-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 5;
  width: 100%;
  height: 4px;
  background: var(--cp-accent);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* Zigzag: every second panel has its text on the right, with the colour
   disc (and the copier, see cityprint-copier3d.js) on the left. Phones and
   upright tablets keep everything left-aligned (the "stacked" layout). */
@media (min-width: 768px) and (orientation: landscape), (min-width: 1101px) {
  .cp-panel:nth-child(even) {
    --align-items: flex-end;
    align-items: flex-end !important;
    text-align: right;
  }

  .cp-panel-slab:nth-child(even) .cp-panel-disc,
  html:not(.cp-motion) .cp-panel:nth-child(even)::after {
    right: auto;
    left: -18vmax;
  }

  .cp-panel:nth-child(even) .elementor-widget > .elementor-widget-container {
    margin-left: auto;
  }
}

/* Service names run over two lines ("Printers & / Copiers") and keep
   their capitals (IT, Office 365) */
.cp-home .cp-panel .cp-panel-title .elementor-heading-title {
  font-size: clamp(56px, 8.5vw, 150px);
  font-weight: 700;
  text-transform: uppercase;
  padding-bottom: 0.08em; /* room for Oswald's descenders */
}

.cp-home .cp-panel .cp-panel-lead {
  font-size: clamp(22px, 2.2vw, 34px);
  font-weight: 600;
  line-height: 1.15;
}

.cp-home .cp-panel .cp-panel-lead > .elementor-widget-container {
  max-width: 22ch; /* on the inner box: Elementor forces max-width:100% on widgets */
}

.cp-home .cp-panel .cp-panel-text {
  opacity: 0.75;
}

.cp-home .cp-panel .cp-panel-text > .elementor-widget-container {
  max-width: 42ch; /* on the inner box: Elementor forces max-width:100% on widgets */
}

/* Big text that slides on scroll gets its own GPU layer, so moving it
   never repaints the page around it. */
html.cp-motion .cp-marquee-text,
html.cp-motion .cp-feature-wordmark,
html.cp-motion .cp-outro-line,
html.cp-motion .cp-statement-text .elementor-heading-title > div {
  will-change: transform;
}

/* ---------- Statement ---------- */

.cp-statement {
  min-height: 100vh;
  padding: 120px var(--cp-gutter) !important;
  justify-content: center;
}

.cp-home .cp-statement .cp-statement-text .elementor-heading-title {
  font-size: clamp(44px, 8.5vw, 150px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.05em;
  text-transform: lowercase;
}

.cp-underline {
  display: block;
  height: 6px;
  margin-top: 28px;
  width: min(60vw, 720px);
  background: linear-gradient(90deg, var(--cp-accent), var(--cp-dark), var(--cp-ink));
  transform-origin: left center;
}

/* ---------- Mission ---------- */

.cp-mission {
  padding: 120px var(--cp-gutter) !important;
}

/* Small label above a heading ("What do we do?", "About us", "Call now") */
.cp-home .cp-label .elementor-heading-title {
  color: var(--cp-accent);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cp-home .cp-mission .cp-mission-quote .elementor-heading-title {
  font-size: clamp(28px, 3.2vw, 48px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* ---------- Marquee ---------- */

.cp-marquee {
  min-height: 100vh;
  padding: 0 !important;
  justify-content: center;
  overflow: hidden;
  color: var(--cp-white);
  background-color: var(--cp-dark);
  /* The photo or video is whatever is set in Elementor (Style >
     Background); no built-in fallback, so clearing it really clears it */
  --cp-photo-wash: linear-gradient(180deg, rgba(28, 19, 61, 0.35) 0%, rgba(28, 19, 61, 0.55) 100%);
}

.cp-home .cp-marquee .cp-marquee-text .elementor-heading-title {
  font-size: clamp(90px, 17vw, 300px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.06em;
  white-space: nowrap;
  text-transform: lowercase;
}

html.cp-motion .cp-marquee .cp-marquee-text {
  width: max-content !important;
  max-width: none !important;
}

/* ---------- Feature ---------- */

.cp-feature {
  position: relative;
  min-height: 100vh;
  padding: calc(var(--cp-header-h) + 40px) var(--cp-gutter) 80px !important;
  background: var(--cp-dark);
  color: var(--cp-white);
  overflow: hidden;
  isolation: isolate;
}

.cp-home .cp-feature .cp-feature-wordmark {
  position: absolute !important;
  left: 0;
  bottom: 2vh;
  z-index: -1;
  width: max-content !important;
  max-width: none !important;
  pointer-events: none;
}

.cp-home .cp-feature .cp-feature-wordmark .elementor-heading-title {
  font-size: clamp(120px, 22vw, 420px);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.04em;
  white-space: nowrap;
  text-transform: lowercase;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(124, 112, 230, 0.5);
}

.cp-home .cp-feature .cp-feature-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
}

.cp-home .cp-feature .cp-feature-image .elementor-widget-container {
  overflow: hidden;
  border-radius: 6px;
}

.cp-home .cp-feature .cp-feature-lead {
  font-weight: 600;
}

.cp-home .cp-feature .cp-feature-title .elementor-heading-title {
  font-size: clamp(36px, 4.2vw, 68px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.cp-home .cp-feature .elementor-button {
  border-radius: 999px;
}

/* ---------- FAQ ---------- */

.cp-faq {
  padding: 140px var(--cp-gutter) !important;
}

.cp-home .cp-faq .cp-faq-title .elementor-heading-title {
  font-size: clamp(64px, 10vw, 160px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.06em;
  text-transform: lowercase;
}

.cp-faq-item {
  position: relative;
  padding: 26px 0 !important;
}

.cp-faq-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
  transform-origin: left center;
}

html.cp-motion .cp-faq-item::after {
  transform: scaleX(0);
  transition: transform 1.1s cubic-bezier(0.65, 0, 0.35, 1);
}

html.cp-motion .cp-faq-item.is-inview::after {
  transform: scaleX(1);
}

.cp-faq-q {
  cursor: pointer;
}

.cp-home .cp-faq .cp-faq-q .elementor-heading-title {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 600;
}

.cp-home .cp-faq .cp-faq-q .elementor-heading-title::after {
  content: "+";
  flex: none;
  transition: transform 0.35s ease;
}

.cp-faq-item.is-open .cp-faq-q .elementor-heading-title::after {
  transform: rotate(45deg);
}

.cp-faq-q:focus-visible {
  outline: 2px solid var(--cp-accent);
  outline-offset: 6px;
}

.cp-home .cp-faq .cp-faq-a {
  opacity: 0.75;
}

.cp-home .cp-faq .cp-faq-a > .elementor-widget-container {
  max-width: 70ch; /* on the inner box: Elementor forces max-width:100% on widgets */
}

html.cp-motion .cp-faq-a {
  height: 0;
  overflow: hidden;
}

/* ---------- Get in touch ---------- */

.cp-contact {
  padding: 140px var(--cp-gutter) !important;
}

.cp-home .cp-contact .cp-contact-title .elementor-heading-title {
  font-size: clamp(56px, 8vw, 128px);
  font-weight: 700;
}

.cp-home .cp-contact .cp-contact-phone .elementor-heading-title {
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-size: clamp(32px, 3.4vw, 52px);
  font-weight: 600;
  color: var(--cp-accent);
}

.cp-home .cp-contact .cp-contact-phone a:hover {
  color: var(--cp-dark);
}

.cp-contact-form {
  padding: clamp(24px, 3vw, 40px) !important;
  border-radius: 20px;
  background: var(--cp-white);
  box-shadow: 0 30px 60px -30px rgba(28, 19, 61, 0.25);
}

.cp-home .cp-form .elementor-field-group {
  margin-bottom: 14px;
}

.cp-home .cp-form .elementor-field-textual {
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid rgba(28, 19, 61, 0.16);
  border-radius: 12px;
  background: var(--cp-paper);
  color: var(--cp-ink);
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Normal case for what people type and the placeholders (the site's
   Elementor kit sets form fields to its uppercase "Accent" typography) */
.cp-home .cp-form .elementor-field-group .elementor-field-textual,
.cp-home .cp-form .elementor-field-group .elementor-field-textual::placeholder {
  text-transform: none;
}

.cp-home .cp-form .elementor-field-textual:focus {
  border-color: var(--cp-accent);
  box-shadow: 0 0 0 3px rgba(82, 69, 194, 0.18);
  outline: none;
}

.cp-home .cp-form .elementor-field-textual::placeholder {
  color: rgba(0, 0, 0, 0.45);
}

.cp-home .cp-form .elementor-button {
  width: 100%;
  min-height: 54px;
  justify-content: center;
  font-size: 16px;
}

.cp-home .cp-form-note {
  font-size: 13px;
  opacity: 0.6;
}

/* ---------- Outro ---------- */

.cp-outro {
  position: relative;
  min-height: 90vh;
  padding: 120px var(--cp-gutter) !important;
  justify-content: center;
  overflow: hidden;
  color: var(--cp-white);
  background-color: var(--cp-dark);
  /* Default photo if none is set in Elementor (Style > Background) */
  --cp-photo-default: url("/wp-content/themes/hello-theme-child-master/assets/images/cityprint-fleet.jpg");
  --cp-photo-wash: linear-gradient(180deg, rgba(28, 19, 61, 0.55) 0%, rgba(28, 19, 61, 0.78) 60%, rgba(28, 19, 61, 0.92) 100%);
  --cp-photo-position: center 62%;
}

@media (max-width: 767px) {
  .cp-outro {
    --cp-photo-default: url("/wp-content/themes/hello-theme-child-master/assets/images/cityprint-fleet-1024.jpg");
    --cp-photo-position: 30% center;
  }
}

/* ---------- Still photo behind a section ----------
   For .cp-marquee, .cp-outro and any container with the class
   cp-fixed-photo. The script moves the container's Elementor background
   image (or the section's default) onto a layer fixed to the screen and
   clipped to the section: the section scrolls over a still photo like a
   window. It's its own layer, so it costs nothing to scroll, and unlike
   background-attachment: fixed it works on iPhones. */
.has-fixed-photo {
  clip-path: inset(0);
}

/* In the Elementor editor (and for "reduce motion" visitors) there's no
   fixed layer: show the default photo as the section's normal background
   so you can see it. An image set in Elementor (Style > Background) is
   more specific, so it always takes over. */
html.cp-editor .cp-marquee:not(.has-fixed-photo),
html.cp-editor .cp-outro:not(.has-fixed-photo),
.cp-static .cp-marquee:not(.has-fixed-photo),
.cp-static .cp-outro:not(.has-fixed-photo) {
  background-image: var(--cp-photo-wash), var(--cp-photo-default);
  background-size: cover;
  background-position: var(--cp-photo-position, center);
  background-repeat: no-repeat;
}

.has-fixed-photo::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    var(--cp-photo-wash, linear-gradient(rgba(28, 19, 61, 0.35), rgba(28, 19, 61, 0.35))),
    var(--cp-photo, var(--cp-photo-default, none)) var(--cp-photo-position, center) / cover no-repeat;
  pointer-events: none;
}

/* Until the section is near (cp-near, added by the script) the layer is
   just the colour wash, so the photo isn't downloaded with the page */
.has-fixed-photo:not(.cp-near)::after {
  background: var(--cp-photo-wash, none);
}

.cp-home .cp-outro .cp-outro-text,
.cp-home .cp-outro .elementor-widget-text-editor {
  color: rgba(255, 255, 255, 0.88);
}

.cp-home .cp-outro .cp-outro-line .elementor-heading-title {
  font-size: clamp(56px, 11vw, 200px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-transform: lowercase;
  white-space: nowrap;
  text-align: center;
}

.cp-home .cp-outro .cp-outro-text {
  margin-top: 24px;
  text-align: center;
}

.cp-home .cp-outro .cp-outro-text > .elementor-widget-container {
  max-width: 60ch; /* on the inner box: Elementor forces max-width:100% on widgets */
  margin: 0 auto;
}

/* ---------- Footer ---------- */

.cp-footer {
  padding: 96px var(--cp-gutter) 40px !important;
  background: var(--cp-dark);
  color: var(--cp-white);
}

.cp-home .cp-footer a {
  color: inherit;
}

.cp-home .cp-footer .cp-logo .elementor-heading-title {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.cp-home .cp-footer .cp-footer-heading .elementor-heading-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
}

.cp-home .cp-footer .cp-footer-small {
  font-size: 13px;
  opacity: 0.55;
}

/* ---------- Phones and upright tablets: "stacked" ----------
   Same query as STACKED in cityprint-copier3d.js. The 3D object takes the
   top of the screen at full size and the words sit at the bottom, like a
   poster, rather than the two sharing (and fighting over) the middle. */

:root {
  --cp-toolbar: 0px;
}

/* How much of the bottom of a phone screen the browser's toolbar can
   cover (100vh is the screen with it hidden, 100svh with it showing), so
   words anchored to the bottom never end up underneath it */
@supports (height: 100svh) {
  :root {
    --cp-toolbar: calc(100vh - 100svh);
  }
}

@media (max-width: 767px), (max-width: 1100px) and (orientation: portrait) {
  .cp-hero {
    justify-content: flex-end !important;
    padding-bottom: calc(var(--cp-toolbar) + 10vh) !important;
  }

  .cp-home .cp-hero .cp-hero-title .elementor-heading-title {
    font-size: clamp(46px, 11vw, 104px);
  }

  html.cp-motion .cp-panel {
    justify-content: flex-end !important;
    padding-bottom: calc(var(--cp-toolbar) + 9vh) !important;
  }

  .cp-home .cp-panel .cp-panel-title .elementor-heading-title {
    font-size: clamp(54px, 12vw, 120px);
  }

  .cp-home .cp-panel .cp-panel-lead {
    font-size: clamp(20px, 3.4vw, 30px);
  }

  /* The colour disc becomes a spotlight behind the object */
  .cp-panel-disc,
  html:not(.cp-motion) .cp-panel::after {
    --cp-disc: min(130vw, 70vh);
    top: calc(29% - var(--cp-disc) / 2);
    right: auto;
    bottom: auto;
    left: calc(50% - var(--cp-disc) / 2);
    width: var(--cp-disc);
    height: var(--cp-disc);
  }

  .cp-statement {
    justify-content: flex-end !important;
    padding-bottom: calc(var(--cp-toolbar) + 12vh) !important;
  }
}

/* Phones: the hero words sit lower, clear of the copier's loose pieces */
@media (max-width: 767px) {
  .cp-hero {
    padding-bottom: calc(var(--cp-toolbar) + 4vh) !important;
  }
}

/* Phones on their side: a short, wide screen, so the big headings are
   sized by the height to keep everything clear of the header */
@media (max-height: 520px) and (orientation: landscape) {
  .cp-hero,
  html.cp-motion .cp-panel {
    padding-top: 84px !important;
    padding-bottom: 28px !important;
  }

  .cp-home .cp-hero .cp-hero-title .elementor-heading-title,
  .cp-home .cp-panel .cp-panel-title .elementor-heading-title {
    font-size: 13vh;
  }

  .cp-home .cp-panel .cp-panel-lead {
    font-size: 18px;
  }

  .cp-home .cp-panel .cp-label .elementor-heading-title {
    font-size: 12px;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .cp-scene,
  .cp-header,
  .cp-home .cp-header .cp-cta .elementor-button {
    transition: none;
  }
}

/* ==========================================================
   Header and footer, built in Elementor (insert
   _cityprint/cityprint-header-template.json and
   _cityprint/cityprint-footer-template.json). Everything in them is
   edited in Elementor; these rules give them the look. Doubled-up
   selectors beat the site's Elementor kit (Playfair, gold buttons) while
   anything set on a single widget in Elementor still wins.
   ========================================================== */

/* A newer header/footer hides the old page ones, so there's never two */
body:has(.cp-site-header) .cp-home .cp-header,
body:has(.cp-site-footer) .cp-home .cp-footer {
  display: none !important;
}

/* The header template's outer box takes no space; the bar and menu are fixed */
.cp-header-wrap {
  min-height: 0 !important;
  height: 0;
  padding: 0 !important;
  margin: 0 !important;
}

/* ---------- Logo: CITYPRINT | UK, as on the vans ---------- */

.cph-logo .elementor-heading-title,
.cph-logo .elementor-heading-title a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  font-family: "Oswald", "Arial Narrow", sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.cph-logo-rule {
  display: inline-block;
  width: 2px;
  height: 20px;
  border-radius: 2px;
  background: var(--cp-accent);
}

.cph-logo-uk {
  font-weight: 400;
  letter-spacing: 0.08em;
}

/* ---------- Header bar: floating and sticky ---------- */

.cp-site-header.cp-site-header {
  position: fixed !important;
  top: 16px;
  left: 50%;
  z-index: 100;
  width: min(1240px, calc(100% - 32px)) !important;
  max-width: none !important;
  min-height: 0 !important;
  height: 64px;
  padding: 0 10px 0 28px !important;
  transform: translateX(-50%);
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 32px !important;
  border: 1px solid rgba(28, 19, 61, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--cp-ink);
  box-shadow: 0 18px 50px -24px rgba(28, 19, 61, 0.35), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
  font-family: "Oswald", "Arial Narrow", sans-serif;
  transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}

.cp-site-header .elementor-widget {
  width: auto !important;
  margin: 0 !important;
}

.cp-site-header .cph-nav.cph-nav {
  flex-direction: row !important;
  align-items: center;
  gap: 30px !important;
  width: auto !important;
  margin-left: auto;
  padding: 0 !important;
}

.cp-site-header .cph-nav-link .elementor-heading-title {
  font-family: "Oswald", "Arial Narrow", sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  color: inherit !important;
}

.cp-site-header .cph-nav-link a {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  color: inherit;
  opacity: 0.8;
  transition: opacity 0.25s ease;
}

.cp-site-header .cph-nav-link a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--cp-accent);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.cp-site-header .cph-nav-link a:hover,
.cp-site-header .cph-nav-link a.is-current {
  opacity: 1;
}

.cp-site-header .cph-nav-link a:hover::after,
.cp-site-header .cph-nav-link a.is-current::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* Touch screens wide enough for the full menu (tablets on their side):
   a taller tap area on each link, with the underline kept just under it */
@media (pointer: coarse) {
  .cp-site-header .cph-nav-link a {
    padding: 14px 0;
  }

  .cp-site-header .cph-nav-link a::after {
    bottom: 8px;
  }
}

/* Call button */
.cp-site-header .cph-call .elementor-button {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 22px 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--cp-accent);
  color: var(--cp-white);
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  white-space: nowrap;
  box-shadow: 0 12px 26px -12px rgba(82, 69, 194, 0.8);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.cp-site-header .cph-call .elementor-button:hover,
.cp-site-header .cph-call .elementor-button:focus {
  background: var(--cp-dark);
  color: var(--cp-white);
  transform: translateY(-1px);
}

.cp-site-header .cph-call .elementor-button-content-wrapper {
  gap: 10px;
}

.cp-site-header .cph-call .elementor-button-icon svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

/* No arrow on header buttons */
.cp-site-header .elementor-button-text::after {
  content: none !important;
}

/* Menu button: hidden on desktop */
.cp-site-header .cph-burger {
  display: none;
}

/* Over the dark sections */
body.cp-invert .cp-site-header.cp-site-header {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(28, 19, 61, 0.9);
  color: var(--cp-white);
  box-shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.6);
}

body.cp-invert .cp-site-header .cph-call .elementor-button:hover {
  background: var(--cp-white);
  color: var(--cp-dark);
}

/* ---------- Logo as an image (Image widget in the header bar) ----------
   Sized by height so its box matches the logo (Elementor's % width would
   make the box as wide as the original file and squash the menu). */
.cp-site-header .elementor-widget-image {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
}

.cp-site-header .elementor-widget-image .elementor-widget-container,
.cp-site-header .elementor-widget-image a {
  display: block;
  line-height: 0;
}

.cp-site-header .elementor-widget-image img {
  display: block;
  width: auto !important;
  max-width: none !important;
  height: 52px !important;
}

/* Menu links always on one line */
.cp-site-header .cph-nav-link .elementor-heading-title {
  white-space: nowrap;
}

.cp-site-header .cph-call,
.cp-site-header .cph-burger {
  flex: 0 0 auto !important;
}

/* An image logo has dark lettering, so the bar stays white (rather than
   turning dark) over dark sections and when the phone menu is open */
body.cp-invert .cp-site-header.cp-site-header:has(.elementor-widget-image),
body.cp-menu-open .cp-site-header.cp-site-header:has(.elementor-widget-image) {
  border-color: rgba(28, 19, 61, 0.08);
  background: rgba(255, 255, 255, 0.92);
  color: var(--cp-ink);
  box-shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.45);
}

@media (max-width: 860px) {
  .cp-site-header .elementor-widget-image img {
    height: 48px !important;
  }
}

@media (max-width: 767px) {
  .cp-site-header .elementor-widget-image img {
    height: 44px !important;
  }
}

/* ---------- Phone menu ---------- */

.cph-menu.cph-menu {
  position: fixed !important;
  inset: 0;
  z-index: 99; /* just under the header bar */
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh;
  padding: 120px 28px 48px !important;
  justify-content: center !important;
  gap: 18px !important;
  background: var(--cp-dark);
  color: var(--cp-white);
  visibility: hidden;
  clip-path: circle(0% at calc(100% - 40px) 40px);
  transition: clip-path 0.7s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s linear 0.7s;
}

body.cp-menu-open .cph-menu.cph-menu {
  visibility: visible;
  clip-path: circle(150% at calc(100% - 40px) 40px);
  transition: clip-path 0.7s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s;
}

.cph-menu .cph-menu-link .elementor-heading-title {
  font-family: "Oswald", "Arial Narrow", sans-serif !important;
  font-size: clamp(44px, 12vw, 72px) !important;
  font-weight: 600 !important;
  line-height: 1.05 !important;
  text-transform: uppercase;
  color: var(--cp-white) !important;
}

.cph-menu .cph-menu-link a {
  color: inherit;
}

.cph-menu .cph-menu-link a:hover {
  color: #a59ef2;
}

.cph-menu .cph-menu-label .elementor-heading-title {
  margin-top: 24px;
  font-family: "Oswald", "Arial Narrow", sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6) !important;
}

.cph-menu .cph-menu-phone .elementor-heading-title,
.cph-menu .cph-menu-phone a {
  font-family: "Oswald", "Arial Narrow", sans-serif !important;
  font-size: 34px !important;
  font-weight: 600 !important;
  color: #a59ef2 !important;
}

/* ---------- Header on phones ---------- */

@media (max-width: 860px) {
  .cp-site-header.cp-site-header {
    top: 10px;
    width: calc(100% - 20px) !important;
    height: 58px;
    gap: 12px !important;
    padding: 0 8px 0 20px !important;
  }

  .cp-site-header .cph-nav.cph-nav {
    display: none !important;
  }

  .cp-site-header .cph-logo .elementor-heading-title {
    font-size: 19px !important;
  }

  /* Call button becomes a round phone icon */
  .cp-site-header .cph-call {
    margin-left: auto !important;
  }

  .cp-site-header .cph-call .elementor-button {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
  }

  .cp-site-header .cph-call .elementor-button-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  /* Menu button: two lines that turn into a cross */
  .cp-site-header .cph-burger {
    display: block;
  }

  .cp-site-header .cph-burger .elementor-button {
    position: relative;
    display: block;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--cp-dark);
    font-size: 0;
    color: transparent;
    box-shadow: none;
  }

  .cp-site-header .cph-burger .elementor-button:hover,
  .cp-site-header .cph-burger .elementor-button:focus {
    background: var(--cp-accent);
    border: 0;
  }

  .cp-site-header .cph-burger .elementor-button::before,
  .cp-site-header .cph-burger .elementor-button::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    height: 2px;
    border-radius: 2px;
    background: var(--cp-white);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .cp-site-header .cph-burger .elementor-button::before {
    top: 18px;
  }

  .cp-site-header .cph-burger .elementor-button::after {
    top: 24px;
  }

  .cp-site-header.is-open .cph-burger .elementor-button::before {
    transform: translateY(3px) rotate(45deg);
  }

  .cp-site-header.is-open .cph-burger .elementor-button::after {
    transform: translateY(-3px) rotate(-45deg);
  }

  body.cp-menu-open .cp-site-header.cp-site-header {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--cp-white);
  }
}

/* ---------- In the Elementor editor: everything in the page flow ---------- */

html.cp-editor .cp-site-header.cp-site-header,
body.elementor-editor-active .cp-site-header.cp-site-header {
  position: relative !important;
  top: 0;
  left: 0;
  margin: 16px auto;
  transform: none;
}

html.cp-editor .cp-header-wrap,
body.elementor-editor-active .cp-header-wrap {
  height: auto;
}

html.cp-editor .cph-menu.cph-menu,
body.elementor-editor-active .cph-menu.cph-menu {
  position: relative !important;
  inset: auto;
  min-height: 0;
  padding: 48px 28px !important;
  visibility: visible;
  clip-path: none;
}

/* ---------- Footer ---------- */

.cp-site-footer.cp-site-footer {
  position: relative;
  overflow: hidden;
  padding: 110px var(--cp-gutter) 36px !important;
  background:
    radial-gradient(60% 80% at 85% 0%, rgba(82, 69, 194, 0.35), transparent 70%),
    var(--cp-dark);
  color: rgba(255, 255, 255, 0.78);
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
}

.cp-site-footer .elementor-widget-text-editor {
  color: rgba(255, 255, 255, 0.78);
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

.cp-site-footer .elementor-widget-text-editor p {
  margin: 0;
}

.cp-site-footer a,
.cp-site-footer .elementor-widget-text-editor a {
  color: var(--cp-white);
  text-decoration: none;
}

.cp-site-footer .cpf-top.cpf-top {
  display: grid !important;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 48px !important;
  width: 100% !important;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 !important;
}

.cp-site-footer .cpf-col.cpf-col {
  width: auto !important;
  padding: 0 !important;
  gap: 0 !important;
}

.cp-site-footer .cpf-brand.cpf-col,
.cp-site-footer .cpf-cta.cpf-col {
  gap: 18px !important;
}

.cp-site-footer .cph-logo .elementor-heading-title {
  color: var(--cp-white);
}

.cp-site-footer .cpf-tagline {
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #a59ef2;
}

.cp-site-footer .cpf-intro > .elementor-widget-container {
  max-width: 34ch;
}

.cp-site-footer .cpf-phone .elementor-heading-title {
  font-family: "Oswald", "Arial Narrow", sans-serif !important;
  font-size: clamp(30px, 3vw, 40px) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  color: var(--cp-white) !important;
}

.cp-site-footer .cpf-phone a:hover {
  color: #a59ef2;
}

.cp-site-footer .cpf-heading .elementor-heading-title {
  margin: 4px 0 20px;
  font-family: "Oswald", "Arial Narrow", sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5) !important;
}

.cp-site-footer .cpf-links ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.cp-site-footer .cpf-links a {
  position: relative;
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-size: 17px;
  letter-spacing: 0.04em;
  opacity: 0.85;
  transition: opacity 0.25s ease, padding-left 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.cp-site-footer .cpf-links a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 2px;
  background: var(--cp-accent);
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.cp-site-footer .cpf-links a:hover {
  opacity: 1;
  padding-left: 22px;
}

.cp-site-footer .cpf-links a:hover::before {
  width: 14px;
}

.cp-site-footer .cpf-cta-text > .elementor-widget-container {
  max-width: 30ch;
  margin-bottom: 6px;
}

.cp-site-footer .cpf-button .elementor-button {
  display: inline-flex;
  align-items: center;
  padding: 15px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--cp-accent);
  color: var(--cp-white);
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 16px 34px -14px rgba(82, 69, 194, 0.9);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.cp-site-footer .cpf-button .elementor-button:hover,
.cp-site-footer .cpf-button .elementor-button:focus {
  background: var(--cp-white);
  color: var(--cp-dark);
  transform: translateY(-2px);
}

.cp-site-footer .elementor-button .elementor-button-text::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.55em;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.cp-site-footer .elementor-button:hover .elementor-button-text::after {
  transform: translateX(4px);
}

/* Giant wordmark (the script fits it to the footer's width) */
.cp-site-footer .cpf-wordmark {
  width: 100% !important;
  max-width: 1320px !important;
  margin: 80px auto 0 !important;
}

.cp-site-footer .cpf-wordmark .elementor-heading-title {
  display: inline-block;
  font-family: "Oswald", "Arial Narrow", sans-serif !important;
  font-size: calc(min(1320px, 100vw - 2 * var(--cp-gutter)) / 4.8);
  font-weight: 700 !important;
  line-height: 0.82 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(165, 158, 242, 0.95) 0%, rgba(82, 69, 194, 0.55) 55%, rgba(82, 69, 194, 0.05) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  user-select: none;
  will-change: transform;
}

.cp-site-footer .cpf-wordmark .elementor-widget-container {
  text-align: center;
}

.cp-site-footer .cpf-bottom.cpf-bottom {
  flex-direction: row !important;
  align-items: center !important;
  gap: 28px !important;
  width: 100% !important;
  max-width: 1320px;
  margin: 28px auto 0;
  padding: 24px 0 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.cp-site-footer .cpf-bottom .elementor-widget-text-editor {
  font-size: 15px;
  color: var(--cp-white);
}

.cp-site-footer .cpf-credit {
  flex: 1;
}

.cp-site-footer .cpf-credit a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cp-site-footer .cpf-top-button .elementor-button {
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: transparent;
  color: var(--cp-white);
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: none;
}

.cp-site-footer .cpf-top-button .elementor-button-text::after {
  content: "\2191";
}

.cp-site-footer .cpf-top-button .elementor-button:hover,
.cp-site-footer .cpf-top-button .elementor-button:focus {
  background: var(--cp-accent);
  border-color: var(--cp-accent);
  color: var(--cp-white);
  transform: none;
}

@media (max-width: 1024px) {
  .cp-site-footer .cpf-top.cpf-top {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .cp-site-footer.cp-site-footer {
    padding-top: 80px !important;
  }

  .cp-site-footer .cpf-top.cpf-top {
    grid-template-columns: 1fr;
    gap: 40px !important;
  }

  .cp-site-footer .cpf-bottom.cpf-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cph-menu.cph-menu {
    transition: none;
  }
}