/* ------------------------------------------------------------------
   site-custom.css — every style change made on top of the Liko template.
   main.css and main.js are never edited, so a vendor update cannot wipe
   any of this.
   ------------------------------------------------------------------ */

/* ---- Wordmark -----------------------------------------------------
   Replaces the vendor's logo images, which were raster files reading
   "Liko." and so could not be rebranded in markup. One text element
   covers both themes via colour. */
.nex-logo {
   display: inline-block;
   font-family: var(--tp-ff-marcellus, "Marcellus", serif);
   font-size: 34px;
   font-weight: 400;
   line-height: 1;
   letter-spacing: -0.5px;
   color: #121212;
   white-space: nowrap;
}
.liko-dark-active .nex-logo { color: #f5f7f5; }
.tp-footer-3-logo .nex-logo,
.black-bg .nex-logo,
.black-bg-2 .nex-logo { color: #f5f7f5; }
.tp-footer-3-logo .nex-logo { font-size: 40px; }

/* ---- Gallery curve edges ------------------------------------------
   The curved masks stop just short of the section edge, letting a sliver
   of the bright slide show through as a thin white line. Cap both ends
   with the page colour. */
.tp-gallery-area::before,
.tp-gallery-area::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   height: 8px;
   background: #fff;
   z-index: 3;
   pointer-events: none;
}
.tp-gallery-area::before { top: -1px; }
.tp-gallery-area::after  { bottom: -1px; }
.liko-dark-active .tp-gallery-area::before,
.liko-dark-active .tp-gallery-area::after { background: #121212; }

/* ---- Services rows ------------------------------------------------
   Even breathing room, and a full-row click target that sits inside the
   row rather than wrapping it (wrapping made every row a :first-child
   and knocked out the template's padding). */
.tp-award-area .tp-award-list-item {
   padding-top: 26px;
   padding-bottom: 26px;
}
.tp-award-area .tp-award-list-wrap .tp-award-list-item:first-child { padding-top: 0; }
.tp-award-area .tp-award-list-content-left {
   align-items: baseline;
   gap: 32px;
}
.tp-award-list-link {
   position: absolute;
   inset: 0;
   z-index: 2;
}

/* ---- One heading treatment ----------------------------------------
   The template sized section headings from 30px to 200px across two font
   families. All pulled onto .tp-section-title-90's setup, including its
   responsive steps. !important because main.css re-declares each of these
   at several breakpoints of its own. */
.tp-section-title-90,
.tp-hero-3-title,
.showcase-details-2-section-title,
.tp-cta-title,
.sv-hero-title,
.tm-hero-title,
.tm-hero-title-big,
.cn-contact-2-title,
.tp-portfolio-9-title,
.project-details-1-title,
.tp-error-title {
   font-family: var(--tp-ff-marcellus) !important;
   font-size: 90px !important;
   font-weight: 400 !important;
   line-height: 1.08 !important;
   letter-spacing: -1.8px !important;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
   .tp-section-title-90,
   .tp-hero-3-title,
   .showcase-details-2-section-title,
   .tp-cta-title,
   .sv-hero-title,
   .tm-hero-title,
   .tm-hero-title-big,
   .cn-contact-2-title,
   .tp-portfolio-9-title,
   .project-details-1-title,
   .tp-error-title { font-size: 80px !important; }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
   .tp-section-title-90,
   .tp-hero-3-title,
   .showcase-details-2-section-title,
   .tp-cta-title,
   .sv-hero-title,
   .tm-hero-title,
   .tm-hero-title-big,
   .cn-contact-2-title,
   .tp-portfolio-9-title,
   .project-details-1-title,
   .tp-error-title { font-size: 60px !important; }
}
@media (max-width: 767px) {
   .tp-section-title-90,
   .tp-hero-3-title,
   .showcase-details-2-section-title,
   .tp-cta-title,
   .sv-hero-title,
   .tm-hero-title,
   .tm-hero-title-big,
   .cn-contact-2-title,
   .tp-portfolio-9-title,
   .project-details-1-title,
   .tp-error-title { font-size: 45px !important; }
}

/* The scroll-invert effect paints glyphs with a background clipped to the
   text, and the background only covers the element's box. At 90px with a
   serif, ascenders and descenders sit outside that box, so parts of letters
   went unpainted. Grow the paint box and pull it back with a matching
   negative margin, so the text does not move. */
.tp_text_invert > div {
   padding: 0.16em 0.08em;
   margin: -0.16em -0.08em;
   overflow: visible;
}

/* ---- Section openings --------------------------------------------- */
.nex-section-head { margin-bottom: 60px; }
.nex-section-head .tp-section-title-90 { margin: 0; }
.tp-brand-3-area .nex-section-head { padding: 0 20px; }
/* the gallery's curved masks are pinned to its section, so its heading
   sits outside to keep the images under the curve */
.nex-section-head-outer {
   max-width: 1200px;
   margin: 0 auto 60px;
   padding: 0 12px;
}
.nex-work-head {
   max-width: 640px;
   margin: 0 auto 80px;
   padding: 0 20px;
   text-align: center;
}
.nex-work-head p { margin: 20px 0 32px; opacity: .75; }
.nex-gallery-cta { text-align: center; padding: 70px 20px 0; }

/* ---- One button for the whole site --------------------------------
   The template shipped five CTA styles. All rebuilt as this pill with a
   circled arrow, in the site's monochrome rather than an accent colour
   that would fight the hero gradient. Inverts with the theme. */
.liko-btn {
   display: inline-flex;
   align-items: center;
   gap: 16px;
   padding: 8px 8px 8px 30px;
   border: 0;
   border-radius: 999px;
   background: #121212;
   color: #fff;
   font-family: var(--tp-ff-heading, "Syne", sans-serif);
   font-size: 18px;
   font-weight: 500;
   line-height: 1;
   text-align: left;
   text-decoration: none;
   cursor: pointer;
   transition: background-color .3s ease, color .3s ease, transform .3s ease;
}
.liko-btn:hover,
.liko-btn:focus-visible { color: #fff; transform: translateY(-2px); }
.liko-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.liko-btn.w-100 { justify-content: center; }
.liko-btn-label { white-space: nowrap; }
.liko-btn-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 44px;
   height: 44px;
   flex: 0 0 auto;
   border-radius: 50%;
   background: #fff;
   color: #121212;
   transition: transform .3s ease;
}
.liko-btn:hover .liko-btn-icon { transform: translateX(4px); }
.liko-btn-icon svg { width: 16px; height: 16px; display: block; }
.liko-dark-active .liko-btn { background: #f5f7f5; color: #121212; }
.liko-dark-active .liko-btn:hover,
.liko-dark-active .liko-btn:focus-visible { color: #121212; }
.liko-dark-active .liko-btn-icon { background: #121212; color: #f5f7f5; }
@media (max-width: 767px) {
   .liko-btn { font-size: 16px; padding-left: 24px; gap: 12px; }
   .liko-btn-icon { width: 38px; height: 38px; }
}

/* ---- Dark / light switch ------------------------------------------
   The floating gear panel the template injects is the same control, so it
   is hidden to avoid having two. */
.tp-theme-settings-area { display: none !important; }
.tp-mode-toggle {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   margin-left: 18px;
   padding: 0;
   border: 1px solid rgba(0, 0, 0, 0.14);
   border-radius: 50%;
   background: transparent;
   color: #121212;
   cursor: pointer;
   flex: 0 0 auto;
   transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.tp-mode-toggle:hover { background-color: rgba(0, 0, 0, 0.06); }
.tp-mode-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.liko-dark-active .tp-mode-toggle {
   border-color: rgba(255, 255, 255, 0.2);
   color: #fff;
}
.liko-dark-active .tp-mode-toggle:hover { background-color: rgba(255, 255, 255, 0.09); }
.tp-mode-toggle-icon { display: none; line-height: 0; }
.tp-mode-toggle-icon svg { width: 18px; height: 18px; display: block; }
/* show the mode you would switch TO */
.tp-mode-moon { display: inline-flex; }
.liko-dark-active .tp-mode-moon { display: none; }
.liko-dark-active .tp-mode-sun { display: inline-flex; }

/* ---- Hero ---------------------------------------------------------
   The hero shipped at a fixed 599px, so the next section showed above the
   fold on anything taller than about 720px. min-height, not height, so it
   still grows if the headline wraps on a short window. */
.tp-hero-3-area {
   position: relative;
   min-height: 100vh;
   min-height: 100svh;
   display: flex;
   align-items: center;
}
.tp-hero-3-area > .container,
.tp-hero-3-area > .container-fluid { width: 100%; }

/* The blob is lifted out of .tp-hero-3-content-box in the build: that box
   carries a z-index and so forms a stacking context, which put the blob
   above the fade below. Flat layering: blob 1, fade 2, text 3. */
.tp-hero-3-circle-shape {
   z-index: 1;
   /* masks tile by default; the blob's 35px blur paints past its box, so the
      repeated tiles drew a thin seam across the gradient */
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   -webkit-mask-size: 100% 100%;
   mask-size: 100% 100%;
   -webkit-mask-image: radial-gradient(ellipse 60% 52% at 50% 50%,
      #000 0%, rgba(0,0,0,.7) 48%, transparent 92%);
   mask-image: radial-gradient(ellipse 60% 52% at 50% 50%,
      #000 0%, rgba(0,0,0,.7) 48%, transparent 92%);
   will-change: transform;
}
/* fade the hero's last 320px to the page colour so the blob dissolves
   rather than ending on a hard horizontal cut */
.tp-hero-3-area::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 320px;
   z-index: 2;
   pointer-events: none;
   background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 52%);
}
.liko-dark-active .tp-hero-3-area::after {
   background: linear-gradient(to bottom, rgba(18,18,18,0) 0%, #121212 52%);
}
.tp-hero-3-content-box { position: relative; z-index: 3; }
.tp-hero-3-content-box .liko-btn { margin: 0 8px; }
.tp-hero-3-category {
   display: block;
   max-width: 62ch;
   margin-left: auto;
   margin-right: auto;
   text-transform: none;
}
@keyframes liko-blob-morph {
   0%, 100% { border-radius: 62% 47% 82% 35% / 45% 45% 80% 66%; }
   33%      { border-radius: 47% 62% 40% 70% / 62% 38% 68% 44%; }
   66%      { border-radius: 70% 38% 62% 46% / 38% 66% 44% 72%; }
}
.tp-hero-3-circle-shape span {
   animation: liko-blob-morph 14s ease-in-out infinite;
   will-change: transform, border-radius;
}
@media (prefers-reduced-motion: reduce) {
   .tp-hero-3-circle-shape span { animation: none; }
}

/* ---- CTA section --------------------------------------------------
   The template positions the button box absolutely beside the paragraph.
   Adding the email microcopy made it taller and it ran into the body
   text. Back in normal flow as a centred stack. */
.tp-cta-title-box {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
}
.tp-cta-title-box .tp-cta-title { width: 100%; }
.tp-cta-title-box > p { max-width: 60ch; margin: 28px auto 0; }
.tp-cta-btn-box {
   position: static;
   width: auto;
   margin-top: 44px;
   display: flex;
   flex-direction: column;
   align-items: center;
}
.tp-cta-icon { display: none; }
.nex-cta-microcopy { margin: 20px 0 0; font-size: 15px; opacity: .6; }

/* ---- Footer -------------------------------------------------------
   The middle column carried a gap sized for the vendor's one-line blurb,
   and the sitemap split five links across two columns leaving an orphan. */
.tp-footer-3-area .tp-footer-3-widget-wrapper p.mb-100 { margin-bottom: 44px !important; }
.tp-footer-3-menu ul li { width: 100%; float: none; }
.tp-footer-3-area .tp-footer-3-title { margin-bottom: 26px; }
/* uppercase contact details left "E:" stranded on its own line */
.tp-footer-2-contact-item span,
.tp-footer-2-contact-item a { text-transform: none; }

/* The Horizontal page carries a fixed bottom bar from when it had no
   footer. Now that it has one, the bar sits behind it. */
.tp-portfolio-9-social-wrap { z-index: 1; }
.tp-footer-3-area,
.tp-copyright-2-area { position: relative; z-index: 50; }

/* ---- Prose band (About page) --------------------------------------- */
.nex-prose-area {
   padding: 120px 0;
}
.nex-prose {
   max-width: 75ch;
}
.nex-prose p {
   margin-bottom: 28px;
}
.nex-prose p:last-child { margin-bottom: 0; }

/* >>> seo_hostinger.py - generated, do not edit by hand */
/* ---- Heading outline (seo_hostinger.py) -----------------------------
   Panel titles became divs; keep the typography they had as h3s. */
div.tp-offcanvas-title {
   font-family: var(--tp-ff-heading);
   margin-top: 0;
   transition: color 0.3s ease-out;
}
.nex-sr-only {
   position: absolute !important;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}
/* ---- Contact form spam trap (seo_hostinger.py) --------------------- */
.nex-hp {
   position: absolute !important;
   left: -9999px !important;
   width: 1px;
   height: 1px;
   overflow: hidden;
}
/* <<< seo_hostinger.py */