/* Nex Creatives on Liko: brand overrides and the ring carousel from the original site. */

/* logo: Nex lockup is wider than the Liko mark */
.tp-header-logo img,
.tp-offcanvas-logo img,
.tp-copyright-logo img { width: 112px; height: auto; }

.nex-skip { position: fixed; left: 16px; top: -60px; z-index: 99999; padding: 10px 16px; background: #fff; color: #19191a; border-radius: 999px; }
.nex-skip:focus { top: 16px; }

.nex-mt-30 { margin-top: 30px; }
.nex-mt-50 { margin-top: 50px; }
.nex-link { text-decoration: underline; text-underline-offset: 3px; }

/* hero */
.nex-hero-lede { max-width: 640px; margin: 0 auto 36px; font-size: 18px; line-height: 1.7; color: inherit; opacity: .72; }
.nex-btn-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.nex-btn-ghost { background: transparent !important; color: #19191a !important; box-shadow: inset 0 0 0 1px currentColor; }
.liko-dark-active .nex-btn-ghost { color: #fff !important; }
.tp-hero-3-category { display: block; margin-bottom: 26px; }

/* ring carousel (ported from the original public_html) */
.nex-ring-area { padding: 40px 0 90px; }
.nex-ring-head { margin-bottom: 30px; }
.nex-lede { max-width: 620px; margin: 18px auto 0; color: inherit; opacity: .7; font-size: 18px; }
.ring-area { position: relative; overflow: hidden; padding-bottom: 40px; }
.ring-stage { position: relative; height: 520px; perspective-origin: 50% 50%; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ring-stage.is-dragging { cursor: grabbing; }
.ring-stage:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.ring { position: absolute; inset: 0; transform-style: preserve-3d; }
.ring-card { position: absolute; left: 50%; top: 50%; margin: 0; width: 230px; height: 405px; translate: -50% -50%; overflow: hidden; background: #1e1e1e; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); will-change: transform; border-radius: 0; }
.ring-card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.ring-card[hidden] { display: block; visibility: hidden; }
.ring-cta { margin-top: 8px; }

/* what we do list as links */
a.tp-award-list-item { color: inherit; }
.tp-award-list-item p { margin: 0; }

/* selected work rows: keep banner proportions */
.showcase-details-2-slider-item img { height: auto; }

/* work grid: tall posters */
.nex-poster .tp_img_reveal img { width: 100%; height: auto; aspect-ratio: 420 / 740; object-fit: cover; }

/* projects wrapper */
.tp-project-3-thumb { position: relative; }
.tp-project-3-thumb img { width: 100%; height: auto; }
.nex-thumb-cap { display: block; margin-top: 12px; font-size: 14px; letter-spacing: .02em; opacity: .65; }
.nex-proj-also { margin: 6px 0 18px; opacity: .65; }

/* perspective slider below a normal header */
.nex-perspective .tp-image { background-size: cover; background-position: center; }

/* before / after */
.nex-ba { position: relative; }
.nex-ba .beforeAfter img { width: 100%; height: auto; }
.nex-ba-tag { position: absolute; top: 18px; z-index: 5; padding: 6px 14px; border-radius: 999px; background: rgba(25, 25, 26, .78); color: #fff; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.nex-ba-tag-b { left: 18px; }
.nex-ba-tag-a { right: 18px; }

/* services */
.nex-jump { display: flex; flex-wrap: wrap; gap: 10px 14px; padding: 0; margin: 0 0 40px; list-style: none; }
.nex-jump a { display: inline-block; padding: 10px 20px; border: 1px solid rgba(128, 128, 128, .4); border-radius: 999px; color: inherit; font-size: 15px; transition: opacity .3s; }
.nex-jump a:hover { opacity: .65; }
.nex-svc-logos { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.nex-svc-logos a, .nex-svc-logos img { display: block; height: 100%; }
.nex-svc-logos img { width: 100%; object-fit: cover; }
.sv-service-thumb > a { display: block; height: 100%; }
.sv-service-text p + p { margin-top: 12px; }

/* about */
.ab-about-content p.nex-about-p { margin-top: 28px; font-size: 22px; line-height: 1.55; max-width: 900px; opacity: .8; }
.nex-about-h { font-size: 22px; font-weight: 500; margin: 0 0 22px; opacity: .7; }

/* contact */
.nex-contact-aside { position: relative; height: 100%; min-height: 420px; }
.nex-contact-aside-img { position: absolute; inset: 0; overflow: hidden; }
.nex-contact-aside-img img { width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.nex-contact-aside-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18, 18, 18, .95) 10%, rgba(18, 18, 18, .2) 70%); }
.nex-contact-aside-text { position: absolute; left: 40px; right: 40px; bottom: 40px; }
.nex-contact-aside-text p { color: rgba(255, 255, 255, .8); font-size: 18px; max-width: 420px; }
.nex-select { width: 100%; height: 45px; border: none; border-bottom: 1px solid rgba(255, 255, 255, .24); background: transparent; color: #b2b2b2; font-size: 18px; padding: 0; }
.nex-select option { color: #19191a; }
.nex-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ajax-response.error { color: #ff8a80; }
.ajax-response.success { color: #8fe3b5; }

/* closing call to action: longer line than the Liko demo, so smaller type and the button below */
.nex-cta .tp-cta-title { font-size: clamp(54px, 8.6vw, 150px); letter-spacing: -2px; }
.nex-cta .tp-cta-btn-box { position: static; margin-top: 44px; transform: none; }
.nex-cta .tp-cta-title-box p { margin-top: 26px; }

/* footer */
.nex-ftr-tag { color: rgba(255, 255, 255, .6); margin: 0; }
.nex-shape-icon { width: 54px; height: 54px; border-radius: 50%; }

@media (max-width: 991px) {
  .nex-contact-aside { min-height: 360px; margin-bottom: 30px; }
}
@media (max-width: 767px) {
  .nex-hero-lede { font-size: 16px; }
  .nex-contact-aside-text { left: 24px; right: 24px; bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .ring-card { will-change: auto; }
}

/* services hero: Nex image is narrower than the Liko demo photo */
.sv-hero-thumb-box img { width: 100%; height: auto; min-height: 100%; object-fit: cover; }

@media (max-width: 767px) {
  .tp-hero-3-category { white-space: normal; padding: 0 12px; line-height: 1.6; }
  .tp-footer-shape-wrap { display: none; }
}

/* Liko home-3 header: Nex call to action on the right */
.nex-hdr-cta { align-items: center; height: 46px; padding: 0 22px; border-radius: 999px; background: #19191a; color: #fff; font-size: 15px; font-weight: 500; margin-right: 12px; transition: opacity .3s; }
.nex-hdr-cta:hover { color: #fff; opacity: .85; }
.liko-dark-active .nex-hdr-cta { background: #fff; color: #19191a; }
.tp-header-3-logo img { width: 112px; height: auto; }

/* ring carousel inside the Liko home-3 gallery band */
.nex-ring-band { padding: 120px 0 110px; background: #f6f6f9; }
.liko-dark-active .nex-ring-band { background: #1e1e1e; }
.nex-ring-band .ring-area { padding-bottom: 0; }

/* selected work block */
.nex-selected-head { gap: 24px; margin-bottom: 60px; }
.nex-selected-head .tp-section-title-90 { font-size: clamp(40px, 5vw, 70px); max-width: 820px; }

/* footer-3 menus */
.tp-footer-3-menu ul { padding: 0; list-style: none; }
.tp-footer-3-logo img { width: 140px; height: auto; }
.tp-footer-3-title { font-size: 18px; }

/* header light/dark switch */
.nex-theme-btn { width: 46px; height: 46px; display: inline-grid; place-items: center; padding: 0; margin-right: 10px; border: 1px solid rgba(25, 25, 26, .18); border-radius: 50%; background: transparent; color: #19191a; cursor: pointer; transition: background .25s; }
.nex-theme-btn:hover { background: rgba(25, 25, 26, .06); }
.nex-theme-btn svg { width: 18px; height: 18px; }
.nex-theme-btn .ico-sun { display: none; }
.liko-dark-active .nex-theme-btn { color: #fff; border-color: rgba(255, 255, 255, .25); }
.liko-dark-active .nex-theme-btn:hover { background: rgba(255, 255, 255, .08); }
.liko-dark-active .nex-theme-btn .ico-sun { display: block; }
.liko-dark-active .nex-theme-btn .ico-moon { display: none; }

/* horizontal page: project line under the client name */
.nex-slide-desc { margin: 10px 0 0; color: #fff; font-size: 18px; opacity: .85; }

/* project rows: keep the project line inside the middle column */
.tp-project-3-content .nex-proj-also { white-space: normal; max-width: 300px; margin-left: auto; margin-right: auto; line-height: 1.5; }

/* ===== One design system across Liko and original sections =====
   Type: Marcellus (display) + Manrope (text). Colour: the original Nex palette (old-site vars in nex-old.css).
   Buttons: the original pill button. Liko variables are pointed at the same values. */
:root {
  --brass: #b4996a;
  --tp-ff-body: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --tp-ff-p: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --tp-ff-syne: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --tp-ff-heading: "Marcellus", Georgia, serif;
  --tp-ff-marcellus: "Marcellus", Georgia, serif;
  --tp-ff-gallery: "Marcellus", Georgia, serif;
  --tp-ff-shoulders: "Marcellus", Georgia, serif;
  --tp-common-black: #121614;
  --tp-common-black-2: #121614;
  --tp-text-body: rgba(18, 22, 20, .66);
  --tp-common-white: #ece6d9;
}
html.liko-dark-active { --tp-common-dark: #0d1110; --tp-common-black: #141917; --tp-common-black-2: #141917; --tp-common-black-3: #0d1110; }
body { background: var(--bg); color: var(--ink-2); font-family: var(--f-text); }
html.liko-dark-active body { background-color: var(--bg); }
.black-bg { background-color: var(--obsidian-2) !important; }

/* every Liko heading in the display face, regular weight, like the original site */
h1, h2, h3,
.tm-hero-title, .tm-hero-title-big, .tp-hero-3-title, .tp-section-title, .tp-section-title-90,
.tp-project-3-title-sm, .tp-project-5-2-title-sm, .project-details-1-title, .ab-inner-hero-title,
.tp-portfolio-9-title, .tp-error-title, .tp-error-title-sm, .tp-award-list-content-left p {
  font-family: var(--f-display) !important; font-weight: 400 !important;
}
.tm-hero-title, .tm-hero-title-big, .ab-inner-hero-title, .tp-hero-3-title { letter-spacing: -.012em !important; }
.tm-hero-text p, .tp-about-3-content p, .ab-inner-hero-content p, .project-details-1-title-box p,
.tp-hero-3-category, .nex-proj-also, .nex-thumb-cap { font-family: var(--f-text) !important; }
.tp-hero-3-category { color: var(--ink-2); letter-spacing: .08em; }
html:not(.liko-dark-active) .tm-hero-title, html:not(.liko-dark-active) .tm-hero-title-big,
html:not(.liko-dark-active) .tp-hero-3-title, html:not(.liko-dark-active) .tp-section-title,
html:not(.liko-dark-active) .tp-section-title-90, html:not(.liko-dark-active) .project-details-1-title { color: var(--ink); }
.tm-hero-text p, .tp-about-3-content p { color: var(--ink-2); }

/* accent: Liko blue/orange details become the Nex green */
.tp-award-list-item.active, .tp-award-list-item:hover { border-color: var(--accent) !important; }
a:hover { color: var(--accent); }

/* buttons */
.nex-btn-wrap { display: inline-flex; }
.nex-btn-row { gap: 14px; }
.nex-btn-row .nex-btn-wrap .btn { min-height: 56px; }
.tp-header-3-right .nex-btn-wrap .btn { color: var(--bg); }

/* ring band and section backgrounds follow the palette */
.nex-ring-band { background: var(--bg-2) !important; }
.nex-jump-wrap { padding: 0 0 20px; }
.nex-jump-wrap .jump { margin-top: 0; }

/* Marcellus runs wider than Liko's Syne: keep the big hero titles inside their columns */
.ab-inner-hero-title { font-size: clamp(56px, 8vw, 140px) !important; line-height: 1 !important; }
.tm-hero-title-big { font-size: clamp(60px, 9vw, 170px) !important; line-height: 1 !important; margin-bottom: 30px; }
.tm-hero-title { line-height: 1.05 !important; }

/* home: hero and ring carousel read as one block, one background, less gap */
.tp-hero-3-area, html.liko-dark-active .tp-hero-3-area { background: var(--bg) !important; }
.tp-hero-3-ptb { padding-bottom: 40px !important; }
.nex-ring-band, html.liko-dark-active .nex-ring-band { background: var(--bg) !important; padding: 10px 0 80px !important; }
.nex-ring-band .tp-gallery-shape-1, .nex-ring-band .tp-gallery-shape-2 { display: none; }

/* hero gradient: keep it above the hero background (it sits at z-index -1) */
.tp-hero-3-content-box { position: relative; z-index: 0; }

/* tighter gap between the carousel and the studio intro */
.nex-ring-band, html.liko-dark-active .nex-ring-band { padding-bottom: 0 !important; }
.nex-ring-band + .tp-about-3-area { padding-top: 50px !important; }

/* side margins: at least 100px on desktop, everywhere */
@media (min-width: 1200px) {
  .container, .container-fluid, [class*="container-1"], .nex-old .wrap {
    padding-left: 112px !important; padding-right: 112px !important;
  }
  .nex-old .wrap { max-width: calc(var(--wrap) + 224px); }
  .container-fluid.p-0 { padding-left: 0 !important; padding-right: 0 !important; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .container, .container-fluid, [class*="container-1"] { padding-left: 48px !important; padding-right: 48px !important; }
}

html.liko-dark-active { --tp-text-body: rgba(236, 230, 217, .66); }

/* studio intro on the home page: centred */
.nex-about-center { text-align: center; }
.nex-about-center .tp-section-title-90 { max-width: 1000px; margin: 0 auto 40px; }
.nex-about-center .tp-about-3-shape img { width: 90px; margin: 0 auto 30px; display: block; }
.nex-about-center .tp-about-3-content { max-width: 620px; margin: 0 auto; }
.nex-about-center .tp-about-3-content p { margin-left: auto; margin-right: auto; }

/* hero gradient: smaller, and free to follow the pointer */
.tp-hero-3-circle-shape span { width: 260px !important; height: 250px !important; filter: blur(40px); will-change: transform; }

/* "What we do" on one line */
.nex-one-line { white-space: nowrap; }

.nex-about-center .tp-about-3-content { display: flex; justify-content: center; }

.nex-about-center .tp-about-3-content { padding-left: 0 !important; padding-right: 0 !important; margin-left: auto; margin-right: auto; width: 100%; max-width: none; }

/* no divider lines between sections */
.nex-old.cta, .nex-old .cta, .nex-old.ftr, .nex-old .ftr { border-top: 0 !important; }

/* one vertical rhythm: every section boundary gets the same gap */
:root { --nex-gap: clamp(100px, 10vw, 170px); }
main > section, main > div { padding-top: var(--nex-gap) !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; }
main > :last-child { padding-bottom: var(--nex-gap) !important; }
/* first block keeps room for the fixed header */
main > .tp-hero-3-area { padding-top: 220px !important; padding-bottom: 0 !important; }
main > .tm-hero-area { padding-top: 220px !important; }
main > .ab-inner-hero-area { padding-top: 220px !important; padding-bottom: var(--nex-gap) !important; }
main > .tp-error-area { padding-top: 220px !important; }
/* the carousel stays tight under the hero, as asked */
main > .nex-ring-band { padding-top: 40px !important; }
/* inner spacers Liko adds at the end of blocks */
.tp-award-list-wrap > :last-child, .showcase-details-2-section-box { margin-bottom: 0 !important; }
.nex-old .sw-head .btn-row { margin-bottom: clamp(48px, 5vw, 80px) !important; }

/* gap fine-tuning: cancel the extra space some blocks carry inside */
/* carousel spaced by its middle card: 80px under the hero buttons, one section gap above the next heading
   (but never letting the tall edge cards reach the heading) */
html body main > section.nex-ring-band.tp-gallery-area { padding-top: var(--nex-gap) !important; padding-bottom: 0 !important; margin: 0 !important; }

.nex-old .faq-grid .head { position: static !important; }
.nex-old .svc-block:first-child { padding-top: 0 !important; border-top: 0 !important; }
.nex-old .svc-block:last-child { padding-bottom: 0 !important; }
.tm-hero-text p { margin-bottom: 0 !important; }
.tm-hero-area .tm-hero-text, .tm-hero-area .tm-hero-content { margin-bottom: 0 !important; padding-bottom: 0 !important; }


/* the carousel band now tucks under the hero: hero stays on top and clickable, both see-through */
.tp-hero-3-area, html.liko-dark-active .tp-hero-3-area { background: transparent !important; position: relative; z-index: 3; pointer-events: none; }
.tp-hero-3-area a, .tp-hero-3-area button { pointer-events: auto; }
.nex-ring-band, html.liko-dark-active .nex-ring-band { background: transparent !important; position: relative; z-index: 1; }

/* ===== home page, client-confirmed layout ===== */
.nex-hero-one-line { font-size: clamp(44px, 6.2vw, 104px) !important; line-height: 1.05 !important; white-space: nowrap; margin-bottom: 28px; }
.nex-hero-home .nex-hero-lede { max-width: 620px; margin: 0 auto 40px; }
.nex-hero-home { display: block; }
.nex-hero-home > .container { width: 100%; }
.nex-section-h { font-family: var(--f-display) !important; font-weight: 400 !important; font-size: clamp(40px, 5.4vw, 84px); line-height: 1.06; letter-spacing: -.01em; color: var(--ink); margin: 0 0 clamp(32px, 4vw, 56px); }
.nex-ring-band .ring-area { margin-bottom: 36px; }
.nex-ring-cta { position: relative; z-index: 2; }
.nex-trusted .nex-section-h { margin-bottom: clamp(28px, 3vw, 44px); }
.nex-trusted .tp-brand-item { display: flex; align-items: center; justify-content: center; height: 70px; }
.nex-wordmark { font-family: var(--f-text); font-weight: 600; font-size: 20px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); opacity: .5; white-space: nowrap; transition: opacity .3s; }
.nex-trusted .tp-brand-item:hover .nex-wordmark { opacity: .95; }
.nex-award-cta { margin-top: 50px; }
@media (max-width: 991px) {
  .nex-hero-one-line { white-space: normal; }
  .nex-hero-home { min-height: 0; }
}

/* home gaps: the hero bottom and the brand row carry no extra space of their own */
main > .nex-hero-home { padding-bottom: 0 !important; }
.nex-trusted .tp-brand-slider-wrapper { line-height: 0; }
.nex-trusted .tp-brand-item { height: auto; line-height: 1; }
.nex-trusted .nex-wordmark { line-height: 1; display: block; }

/* client logos (light grey artwork): full strength in dark mode, turned dark in light mode */
.nex-trusted .tp-brand-item { height: 64px !important; padding: 0 22px; }
.nex-client-logo { max-height: 46px; max-width: 150px; width: auto; height: auto; object-fit: contain; opacity: .9; filter: brightness(1.3); transition: opacity .3s; }
.nex-trusted .tp-brand-item:hover .nex-client-logo { opacity: 1; }
html:not(.liko-dark-active) .nex-client-logo { filter: brightness(0); opacity: .55; }
html:not(.liko-dark-active) .nex-trusted .tp-brand-item:hover .nex-client-logo { opacity: .85; }

/* header pill drawn by the menu box itself (Liko's measured .menu-bg drifted when fonts loaded late) */
.tp-header-3-area .menu-bg { display: none !important; }
.tp-header-3-menu-box { background: rgba(46, 46, 46, .9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 100px; padding: 0 22px !important; }
.tp-header-3-menu > nav > ul { display: flex; flex-wrap: nowrap; margin: 0; padding: 0; }
.tp-header-3-menu > nav > ul > li { margin: 0 14px; }

/* hero title: one line, centred even when wider than its column */
@media (min-width: 992px) { .nex-hero-one-line { margin-left: -20vw !important; margin-right: -20vw !important; } }

/* Craft, before claims: original spacing straight under the hero */
main > section.nex-craft { padding-top: clamp(40px, 5vw, 80px) !important; }
.nex-craft .ring-area { padding-bottom: 0; }

/* footer with four columns */
.nex-old .ftr-top { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .nex-old .ftr-top { grid-template-columns: 1fr 1fr; } }

/* careers */
.nex-jobs-empty { color: var(--ink-2); padding: 28px 0; margin: 0; border-bottom: 1px solid var(--line); }
.nex-old .faq summary .nex-job-title { flex: 1; }
.nex-old .faq summary .nex-job-meta { font-size: 14px; color: var(--ink-2); font-weight: 400; white-space: nowrap; }
.nex-old .faq .ans h3 { font: 500 15px/1.4 var(--f-text); color: var(--ink); margin: 18px 0 8px; }
.nex-old .faq .ans ul { margin: 0; padding-left: 18px; color: var(--ink-2); }
.nex-old .faq .ans p + p { margin-top: 14px; }
.nex-old .field input[type="file"] { padding: 13px 16px; cursor: pointer; }
.nex-old .field input[type="file"]::file-selector-button { margin-right: 14px; padding: 8px 16px; border: 0; border-radius: 999px; background: var(--ink); color: var(--bg); font: 500 14px var(--f-text); cursor: pointer; }

/* footer Connect: round icon buttons */
.nex-old .nex-social { display: flex; flex-wrap: wrap; gap: 12px; }
.nex-old .nex-social a { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); transition: background-color .3s, border-color .3s, color .3s; }
.nex-old .nex-social a:hover { background: var(--jade); border-color: var(--jade); color: var(--forest); }
.nex-old .nex-social svg { width: 20px; height: 20px; }

/* header: six links in the pill */
.tp-header-3-menu > nav > ul > li { margin: 0 12px; }

/* Connect icons under the footer logo and tagline */
.nex-old .nex-connect { margin-top: 28px; }

/* footer logo: smaller */
.nex-old .ftr-word .logo-img { height: clamp(70px, 8vw, 110px) !important; width: auto; }