/* =====================================================
   HIDE THEME HEADER
===================================================== */
header.site-header,
.site-header,
header#masthead{
  display: none !important;
}

/* =====================================================
   VARIABLES
===================================================== */
:root{
  --cl-stage-vh: 70vh;

  --cl-nav-x: 3vw;
  --cl-nav-y: 3vh;

  --cl-nav-color: #000000;
  --cl-nav-hover: #c70000;

  --cl-main-font: 46.2px;
  --cl-list-font: calc(var(--cl-main-font) * 0.25);

  --cl-archive-gap: 32px;
  --cl-hover-bridge: 30px;

  --cl-bridge-left: 0px;
  --cl-bridge-right: 0px;

  --cl-archive-preview-top: 50%;
  --cl-archive-preview-h: var(--cl-stage-vh);
}

/* =========================
   GLOBAL RESET
========================= */
html, body{
  height: 100%;
  margin: 0 !important;
  overflow: hidden !important;
}
#page, #content, .site, .site-content{
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================
   PAGE LAYOUT
========================= */
.cl-page{ height: 100vh; }

.cl-center{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cl-viewer{
  width: 100vw;
  max-width: none;
  padding: 0 2vw;
}

/* =========================
   STAGE (VIEWER)
========================= */
.cl-stage{
  position: relative;
  height: var(--cl-stage-vh);
  overflow: hidden;
}

/* =========================
   SINGLE IMAGE
========================= */
.cl-media-image{
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;

  height: var(--cl-stage-vh) !important;
  width: auto !important;

  max-width: none !important;
  max-height: none !important;
}

/* =========================
   VIDEO
========================= */
.cl-media-video{
  position: absolute;
  inset: 0;
}
.cl-media-video iframe,
.cl-media-video video{
  height: var(--cl-stage-vh) !important;
  width: auto !important;
  min-width: 100%;
}

/* =========================
   CLICK ZONES
========================= */
.cl-zone{
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  border: 0;
  background: transparent !important;
  cursor: pointer;
  z-index: 50;
  padding: 0;
  margin: 0;
  pointer-events: none; /* allow drag/right-click on images; re-enabled for videos */
}
.cl-zone-left{ left: 0; z-index: 60 !important; }
.cl-zone-right{ right: 0; z-index: 59 !important; }

.cl-stage.cl-is-video .cl-zone{
  width: 50%;
  height: 90%;
  pointer-events: auto;
}

/* Media interaction:
   - Desktop: allow right-click / drag-save on images & spreads
   - Videos: zones handle navigation because iframes eat clicks
*/
@media (pointer: fine){
  .cl-stage .cl-media-image,
  .cl-stage .cl-media-spread,
  .cl-stage .cl-media-spread img{
    pointer-events: auto !important;
    -webkit-user-drag: auto;
    user-drag: auto;
    z-index: 1;
  }
}

/* Keep video itself behind zones */
.cl-stage .cl-media-video,
.cl-stage .cl-media-video iframe{
  z-index: 1;
}
/* =========================
   FIXED NAVIGATION
========================= */
.cl-footer{
  position: fixed;
  left: var(--cl-nav-x);
  bottom: var(--cl-nav-y);
  z-index: 30;

  display: flex;
  gap: 5vw;
  align-items: baseline;
}

.cl-nav{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: var(--cl-main-font);
  line-height: 1;
  text-decoration: none;
  color: var(--cl-nav-color);
}

.cl-nav:hover{
  color: var(--cl-nav-hover);
}

/* =========================
   ARCHIVE HOVER LOGIC
========================= */
.cl-nav-archive{
  position: relative;
}

.cl-nav-archive:hover > .cl-nav,
.cl-nav-archive:focus-within > .cl-nav{
  color: var(--cl-nav-hover) !important;
}

.cl-nav-archive::after{
  content: "";
  position: fixed;
  left: var(--cl-bridge-left);
  right: var(--cl-bridge-right);
  bottom: calc(var(--cl-nav-y) + var(--cl-main-font));
  height: calc(var(--cl-hover-bridge) + var(--cl-archive-gap));
  background: transparent;
  pointer-events: auto;
  z-index: 30;
}

/* PANEL: bounded area but NO SCROLL.
   We set a fixed box (top/bottom) but the content itself column-flows. */
.cl-archive-panel{
  position: fixed;
  left: var(--cl-nav-x);

  top: 10vh;
  bottom: 10vh;

  width: calc(50vw - var(--cl-nav-x));
  max-width: calc(50vw - var(--cl-nav-x));

  padding: 0;                 /* align with Work */
  z-index: 31;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(12px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;

  /* KEY: no scrolling */
  overflow: visible !important;
}

.cl-nav-archive:hover .cl-archive-panel,
.cl-nav-archive:focus-within .cl-archive-panel,
.cl-archive-panel:hover{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity .2s ease, transform .2s ease, visibility 0s;
}

/* =========================
   ARCHIVE: infinite columns, fill top->bottom then next
========================= */
.cl-archive-grid{ display:block; }

/* The panel’s height is constrained by top/bottom; this makes column fill respect it. */
.cl-archive-panel{
  height: auto;
}

/* Column flow: no cap on number of columns. */
.cl-archive-grid{
  /* KEY: fixed column width => browser creates as many columns as needed */
  column-width: 180px;
  column-gap: 3vw;

  /* fill columns top->bottom */
  column-fill: auto;
}

/* Prevent awkward breaks */
.cl-archive-section,
.cl-archive-item{
  display: inline-block;
  width: 100%;
  break-inside: avoid-column;
  -webkit-column-break-inside: avoid;
  margin: 0 0 6px 0;
}

/* section headers (red) */
.cl-archive-section{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: var(--cl-list-font);
  line-height: 1.15;
  white-space: nowrap;
  color: var(--cl-nav-hover);
  pointer-events: none;
  margin-top: 10px;
}

/* project links */
.cl-archive-item{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: var(--cl-list-font);
  line-height: 1.15;
  white-space: nowrap;
  text-decoration: none;
  color: #000;

  opacity: 0;
  transform: translateY(8px);
  animation: clArchiveReveal .3s ease forwards;
}

.cl-archive-item:hover{
  color: var(--cl-nav-hover);
}

.cl-archive-item:focus,
.cl-archive-item:active{
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

@keyframes clArchiveReveal{
  to{ opacity: 1; transform: translateY(0); }
}

/* =========================
   Double-page spreads
========================= */
.cl-media-spread{
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2vw;
  align-items: center;
}

.cl-media-spread-img{
  width: 100%;
  height: var(--cl-stage-vh);
  object-fit: contain;
}

@media (max-width: 768px){
  .cl-media-spread{
    grid-template-columns: 1fr;
    gap: 4vh;
  }
}

/* =========================
   ABOUT TEXT
========================= */
.cl-about-text{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: var(--cl-list-font);
  line-height: 1.4;
  color: #000;
  max-width: 42ch;
  text-align: left;
}

.cl-about-page .cl-zone-left,
.cl-about-page .cl-zone-right{
  display:none !important;
  pointer-events:none !important;
}

.cl-about-page{
  position:relative;
  z-index:50;
}

/* =========================
   PREVIEW: hide gallery while preview overlay is on
========================= */
body.cl-preview-active #cl-stage .cl-media-image,
body.cl-preview-active #cl-stage .cl-media-video,
body.cl-preview-active #cl-stage .cl-media-spread {
  opacity: 0 !important;
  visibility: hidden !important;
}
body.cl-preview-active #cl-stage,
body.cl-preview-active .cl-stage {
  opacity: 0 !important;
  transition: opacity .12s ease;
}

/* =====================================================
   MOBILE MODE (unchanged)
===================================================== */
@media (pointer: coarse){
  :root{ --cl-stage-vh: 100svh; }

  .cl-viewer{ padding: 0 !important; }
  .cl-stage{ height: 100svh !important; }

  .cl-zone, a, button{ -webkit-tap-highlight-color: rgba(0,0,0,0); }

  .cl-footer{ display: none !important; }

  .cl-mobile-sheet{
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(255,255,255,0.98);
    transform: translateY(100%);
    transition: transform .22s ease;
    pointer-events: none;
  }
  body.cl-mobile-nav-open .cl-mobile-sheet{
    transform: translateY(0);
    pointer-events: auto;
  }

  .cl-mobile-sheet-inner{
    position: absolute;
    left: var(--cl-nav-x);
    right: var(--cl-nav-x);
    top: calc(env(safe-area-inset-top) + 2vh);
    bottom: calc(env(safe-area-inset-bottom) + 2vh);

    display: flex;
    flex-direction: column;
    gap: 16px;

    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .cl-mobile-link{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 1;
    text-decoration: none;
    color: #000 !important;
  }

  .cl-mobile-sheet a,
  .cl-mobile-sheet a:link,
  .cl-mobile-sheet a:visited{
    color: #000 !important;
  }
  .cl-mobile-sheet a:hover,
  .cl-mobile-sheet a:active,
  .cl-mobile-sheet a:focus{
    color: var(--cl-nav-hover) !important;
  }

  .cl-mobile-archive-list{
    display: none;
    margin-top: 4px;
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
  body.cl-mobile-archive-open .cl-mobile-archive-list{
    display: block;
  }

  .cl-mobile-archive-list a{
    display: block;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.15;
    text-decoration: none;
    color: #000 !important;
    padding: 2px 0;
  }
  .cl-mobile-archive-list a:active,
  .cl-mobile-archive-list a:focus{
    color: var(--cl-nav-hover) !important;
  }

  .cl-mobile-archive-list > div{
    font-size: 22px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    margin: 10px 0 6px 0 !important;
  }
}
/* =====================================================
   FIX 1 — ARCHIVE: bounded (10vh top/bottom), NO SCROLL,
   and ALWAYS fills top->bottom then new columns.
===================================================== */

/* panel has a fixed height because of top/bottom */
.cl-archive-panel{
  top: 10vh !important;
  bottom: 10vh !important;

  /* keep it within left half of screen (as before) */
  width: calc(50vw - var(--cl-nav-x)) !important;
  max-width: calc(50vw - var(--cl-nav-x)) !important;

  /* IMPORTANT: no scrollbars */
  overflow: hidden !important;
}

/* make the column container actually inherit the panel height,
   otherwise it becomes "one tall column" */
.cl-archive-grid{
  height: 100% !important;

  /* infinite columns as needed */
  column-width: 180px !important;
  column-gap: 3vw !important;
  column-fill: auto !important;

  /* safety: do not use any grid from older iterations */
  display: block !important;
}

/* keep items from breaking weirdly across columns */
.cl-archive-section,
.cl-archive-item{
  display: inline-block !important;
  width: 100% !important;
  break-inside: avoid-column !important;
  -webkit-column-break-inside: avoid !important;
}

/* section headers stay red */
.cl-archive-section{
  color: var(--cl-nav-hover) !important;
}

/* =====================================================
   FIX 2 — MOBILE: restore proportional "contain" for singles
   (do NOT crop; always fit within screen)
===================================================== */
@media (pointer: coarse){
  .cl-stage{
    height: 100svh !important;
    overflow: hidden !important;
  }

  .cl-media-image{
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;

    width: auto !important;
    height: auto !important;

    max-width: 100vw !important;
    max-height: 100svh !important;
  }
}
/* =====================================================
   ARCHIVE SPACING: uniform gap everywhere
===================================================== */
:root{ --cl-archive-row-gap: 6px; }

/* Make both headers + items use the same bottom gap */
.cl-archive-section,
.cl-archive-item{
  margin: 0 0 var(--cl-archive-row-gap) 0 !important;
  padding: 0 !important;
}

/* Remove any special top spacing on section headers */
.cl-archive-section{
  margin-top: 0 !important;
}

/* If your JS builds wrappers, kill their gaps too */
.cl-archive-col{
  gap: 0 !important;
}
/* =====================================================
   MOBILE: center the gallery in the viewport
===================================================== */
@media (pointer: coarse){
  /* ensure the stage itself is a clean full-viewport box */
  .cl-viewer,
  .cl-center,
  .cl-page{
    width: 100vw !important;
    height: 100svh !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .cl-stage{
    width: 100vw !important;
    height: 100svh !important;
  }

  /* center any media container */
  .cl-media-video,
  .cl-media-spread{
    position: absolute !important;
    inset: 0 !important;
  }

  /* single images centered + proportional fit (no crop) */
  .cl-media-image{
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 100vw !important;
    max-height: 100svh !important;
  }
}
/* =====================================================
   DESKTOP ARCHIVE: deterministic columns (no CSS columns)
===================================================== */
@media (pointer: fine){

  /* archive panel bounds unchanged */
  .cl-archive-panel{
    top: 10vh !important;
    bottom: 10vh !important;
    left: var(--cl-nav-x) !important;
    width: calc(50vw - var(--cl-nav-x)) !important;
    max-width: calc(50vw - var(--cl-nav-x)) !important;

    padding: 0 !important;
    overflow: hidden !important; /* no scroll */
  }

  /* turn off CSS multi-columns */
  .cl-archive-grid{
    column-width: auto !important;
    column-count: auto !important;
    column-gap: 0 !important;

    display: flex !important;
    align-items: flex-start !important;
    gap: 3vw !important;
    height: 100% !important;
  }

  .cl-archive-col{
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    min-width: 180px !important;      /* same “column width” intent */
    max-width: 220px !important;      /* stops columns from becoming too wide */
  }

  /* uniform spacing everywhere */
  .cl-archive-section,
  .cl-archive-item{
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  /* section headers red */
  .cl-archive-section{
    color: var(--cl-nav-hover) !important;
    font-size: var(--cl-list-font) !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  .cl-archive-item{
    font-size: var(--cl-list-font) !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }
}
@media (pointer: fine){
  .cl-archive-grid{
    display: flex !important;
    align-items: flex-start !important;
    gap: 3vw !important;
    height: 100% !important;
  }
  .cl-archive-col{
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    min-width: 180px !important;
    max-width: 220px !important;
  }
}
/* =====================================================
   ABOUT page — MOBILE typography + layout
===================================================== */
@media (pointer: coarse){

  /* Make the About content sit exactly like the mobile sheet margins */
  body.cl-about-page .cl-stage{
    position: relative !important;
    height: 100svh !important;
    width: 100vw !important;
  }

  body.cl-about-page .cl-about-text{
    position: absolute !important;

    /* same margins as .cl-mobile-sheet-inner */
    left: var(--cl-nav-x) !important;
    right: var(--cl-nav-x) !important;
    top: calc(env(safe-area-inset-top) + 2vh) !important;

    max-width: none !important;
    margin: 0 !important;

    /* keep your existing font, just ensure it renders clean */
    color: #000 !important;
  }

  /* Links: underlined + never pink/visited */
  body.cl-about-page .cl-about-text a,
  body.cl-about-page .cl-about-text a:link,
  body.cl-about-page .cl-about-text a:visited{
    color: #000 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }

  body.cl-about-page .cl-about-text a:hover,
  body.cl-about-page .cl-about-text a:active,
  body.cl-about-page .cl-about-text a:focus{
    color: var(--cl-nav-hover) !important;
  }
}
/* =====================================================
   ABOUT page — MOBILE: full-height block, no line breaks
===================================================== */
@media (pointer: coarse){

  /* Full usable screen with the SAME margins as mobile nav */
  body.cl-about-page .cl-about-text{
    position: absolute !important;

    left: var(--cl-nav-x) !important;
    right: var(--cl-nav-x) !important;
    top: calc(env(safe-area-inset-top) + 2vh) !important;
    bottom: calc(env(safe-area-inset-bottom) + 2vh) !important;

    margin: 0 !important;
    max-width: none !important;

    text-align: left !important;
    white-space: normal !important;
  }

  /* REMOVE paragraph gaps */
  body.cl-about-page .cl-about-text p{
    margin: 0 !important;
  }

  /* REMOVE manual line breaks */
  body.cl-about-page .cl-about-text br{
    display: none !important;
  }

  /* Links stay underlined + black when visited */
  body.cl-about-page .cl-about-text a,
  body.cl-about-page .cl-about-text a:link,
  body.cl-about-page .cl-about-text a:visited{
    color: #000 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }

  body.cl-about-page .cl-about-text a:hover,
  body.cl-about-page .cl-about-text a:active,
  body.cl-about-page .cl-about-text a:focus{
    color: var(--cl-nav-hover) !important;
  }
}
/* =====================================================
   ABOUT page — MOBILE: force full-width Elementor wrappers
   (fixes the “only half screen” constraint)
===================================================== */
@media (pointer: coarse){

  /* make the Elementor layout containers full width on About */
  body.cl-about-page .elementor-section,
  body.cl-about-page .elementor-container,
  body.cl-about-page .elementor-column,
  body.cl-about-page .elementor-widget-wrap,
  body.cl-about-page .elementor-widget,
  body.cl-about-page .elementor{
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 100% !important;
  }

  /* remove any default inner padding that can “box” the text */
  body.cl-about-page .elementor-section,
  body.cl-about-page .elementor-container,
  body.cl-about-page .elementor-widget-wrap{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* now your about block can truly span the available width */
  body.cl-about-page .cl-about-text{
    width: auto !important;
    max-width: none !important;
    text-align: left !important;
  }
}
/* =====================================================
   NUCLEAR FIX — ABOUT page mobile width constraint
   (safe because it is:
    - mobile only
    - about page only)
===================================================== */
@media (pointer: coarse){
  body.cl-about-page *{
    max-width: none !important;
  }
}
/* =====================================================
   ABOUT page — MOBILE: force viewport layout (ignore Elementor widths)
===================================================== */
@media (pointer: coarse){
  body.cl-about-page .cl-about-text{
    position: fixed !important;   /* KEY CHANGE: not absolute */
    left: var(--cl-nav-x) !important;
    right: var(--cl-nav-x) !important;
    top: calc(env(safe-area-inset-top) + 2vh) !important;
    bottom: calc(env(safe-area-inset-bottom) + 2vh) !important;

    width: auto !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: left !important;
    z-index: 999 !important;
  }
}
/* =====================================================
   DESKTOP ABOUT PANEL (Option A)
===================================================== */
@media (pointer: fine){

  .cl-nav-about{ position: relative; }

  /* Panel position + bounds similar to archive */
  .cl-about-panel{
    position: fixed;
    left: var(--cl-nav-x);
    top: 10vh;
    bottom: 10vh;

    width: calc(50vw - var(--cl-nav-x));
    max-width: calc(50vw - var(--cl-nav-x));

    z-index: 31;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(12px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;

    overflow: hidden;
  }

  .cl-nav-about:hover .cl-about-panel,
  .cl-nav-about:focus-within .cl-about-panel,
  .cl-about-panel:hover{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity .2s ease, transform .2s ease, visibility 0s;
  }

  /* Hide gallery while panel is open (letters only; keeps your UX clean) */
  body.cl-about-active #cl-stage .cl-media-image,
  body.cl-about-active #cl-stage .cl-media-video,
  body.cl-about-active #cl-stage .cl-media-spread{
    opacity: 0 !important;
    visibility: hidden !important;
  }

  .cl-about-panel-inner{
    height: 100%;
    display: flex;
    align-items: flex-start;
  }

  .cl-about-panel-text{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: var(--cl-list-font);
    line-height: 1.4;
    color: #000;

    /* match your “left aligned to Work” feeling */
    margin: 0;
    padding: 0;
    max-width: 42ch;
  }

  /* Links: underlined, visited stays black */
  .cl-about-panel-text a,
  .cl-about-panel-text a:link,
  .cl-about-panel-text a:visited{
    color: #000;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }
  .cl-about-panel-text a:hover,
  .cl-about-panel-text a:active,
  .cl-about-panel-text a:focus{
    color: var(--cl-nav-hover);
  }
}
/* =====================================================
   DESKTOP ABOUT: hover bridge (keeps open, never opens)
===================================================== */
@media (pointer: fine){

  /* default: bridge cannot be interacted with */
  .cl-about-bridge{
    pointer-events: none;
  }

  /* Only when About is already active, the bridge becomes “hoverable” */
  body.cl-about-active .cl-about-bridge{
    pointer-events: auto;
    position: fixed;
    z-index: 30;         /* below panel (31), above gallery */
    background: transparent;

    /* TUNNEL GEOMETRY:
       from just above the nav text up to the panel area */
    left: var(--cl-nav-x);
    width: calc(50vw - var(--cl-nav-x));

    top: 10vh;
    bottom: calc(var(--cl-nav-y) + var(--cl-main-font));
  }
}

/* Mobile: tap shield over video iframes so tap-left/tap-right navigation works */
@media (pointer: coarse){
  .cl-video-tap-shield{
    position: absolute;
    inset: 0;
    z-index: 90; /* above iframe, below any mobile sheet/menu */
    background: transparent;
    pointer-events: auto;
  }
  body.cl-mobile-nav-open .cl-video-tap-shield{
    display: none !important;
  }
}

/* =====================================================
   MOBILE FIX — About/Contact links must be clickable
   (prevents invisible stage/tap handlers from eating taps)
===================================================== */
@media (pointer: coarse){
  body.cl-about-page .cl-stage,
  body.page-about .cl-stage,
  body.cl-contact-page .cl-stage,
  body.page-contact .cl-stage{
    pointer-events: none !important;
  }

  body.cl-about-page .cl-about-text,
  body.page-about .cl-about-text,
  body.cl-contact-page .cl-contact-text,
  body.page-contact .cl-contact-text{
    pointer-events: auto !important;
  }

  body.cl-about-page a,
  body.page-about a,
  body.cl-contact-page a,
  body.page-contact a{
    pointer-events: auto !important;
  }
}