/* =========================================================
CYBERSANCTUARY STUDIO — FINAL PREMIUM STYLE
Green metallic · rose bronze · luxury sand movement
========================================================= */

:root {
 --bg-1: #030504;
 --bg-2: #07110d;
 --bg-3: #13080d;

 --green-metal: #32f0a2;
 --green-deep: #063f2c;
 --rose-metal: #ff8faf;
 --rose-bronze: #d99a7c;
 --bronze-soft: #f0c0a0;

 --text-main: rgba(255, 248, 244, 0.96);
 --text-soft: rgba(255, 238, 232, 0.72);
 --text-faint: rgba(255, 238, 232, 0.48);

 --surface: rgba(255,255,255,0.045);
 --surface-strong: rgba(255,255,255,0.075);
 --line: rgba(255,255,255,0.10);

 --container: 1180px;
 --radius-lg: 28px;
 --radius-pill: 999px;
 --ticker-speed: 30s;
}

/* RESET */
*,
*::before,
*::after {
 box-sizing: border-box;
}

html {
 scroll-behavior: smooth;
}

body {
 margin: 0;
 min-width: 320px;
 overflow-x: hidden;
 font-family: "Inter", sans-serif;
 color: var(--text-main);
 background:
 radial-gradient(circle at 20% 18%, rgba(50,240,162,0.18), transparent 28%),
 radial-gradient(circle at 75% 24%, rgba(255,143,175,0.16), transparent 30%),
 radial-gradient(circle at 50% 85%, rgba(217,154,124,0.12), transparent 34%),
 linear-gradient(140deg, var(--bg-1), var(--bg-2) 48%, var(--bg-3));
}

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

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

/* INTRO VIDEO FULL PAGE */
.intro-video {
 position: fixed;
 inset: 0;
 z-index: 9999;
 background: #000;
 overflow: hidden;
 transition: opacity 1.1s ease, visibility 1.1s ease;
}

.intro-video video {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.intro-video::after {
 content: "";
 position: absolute;
 inset: 0;
 background:
 radial-gradient(circle at 50% 50%, transparent 35%, rgba(0,0,0,0.42) 100%),
 linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.42));
}

.intro-video.hide {
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
}

/* CONTAINER */
.container {
 width: min(100% - 2rem, var(--container));
 margin: 0 auto;
}

.section {
 position: relative;
 padding: 5.5rem 0;
}

/* HEADER */
.site-header {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 100;
 background: rgba(3, 5, 4, 0.58);
 border-bottom: 1px solid rgba(255,255,255,0.06);
 backdrop-filter: blur(18px);
 -webkit-backdrop-filter: blur(18px);
}

.nav-wrap {
 width: min(100% - 2rem, var(--container));
 min-height: 78px;
 margin: 0 auto;
 display: grid;
 grid-template-columns: 1fr auto 1fr;
 align-items: center;
 gap: 1rem;
}

.brand {
 justify-self: center;
 font-size: 0.9rem;
 font-weight: 800;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 background: linear-gradient(120deg, #bfffe4, #ff9fba, #f0b58f, #fff0e2);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 text-shadow: 0 0 22px rgba(255,150,180,0.14);
}

.site-nav {
 display: flex;
 align-items: center;
 gap: 1.2rem;
}

.nav-left {
 justify-self: start;
}

.nav-right {
 justify-self: end;
}

.site-nav a {
 position: relative;
 font-size: 0.88rem;
 font-weight: 600;
 letter-spacing: 0.04em;
 color: rgba(255,238,232,0.72);
 transition: color 0.3s ease, transform 0.3s ease;
}

.site-nav a:hover {
 color: #ffe3d6;
 transform: translateY(-1px);
}

.site-nav a::after {
 content: "";
 position: absolute;
 left: 0;
 bottom: -7px;
 width: 0;
 height: 1px;
 background: linear-gradient(90deg, var(--green-metal), var(--rose-metal), var(--rose-bronze));
 box-shadow: 0 0 14px rgba(255,143,175,0.35);
 transition: width 0.3s ease;
}

.site-nav a:hover::after {
 width: 100%;
}

/* CONTACT NAV BUTTON */
.site-nav .nav-cta {
 padding: 0.72rem 1.15rem;
 border-radius: var(--radius-pill);
 color: #fff5ef;
 border: 1px solid rgba(255,210,195,0.22);
 background:
 linear-gradient(135deg, rgba(255,143,175,0.16), rgba(217,154,124,0.18)),
 rgba(255,255,255,0.045);
}

.site-nav .nav-cta::after {
 display: none;
}

/* LANGUAGE */
.language-switch {
 display: flex;
 gap: 0.45rem;
 padding-left: 0.4rem;
}

.language-switch a {
 font-size: 0.74rem;
 opacity: 0.72;
}

/* MOBILE MENU BUTTON */
.nav-toggle {
 display: none;
 justify-self: end;
 width: 44px;
 height: 44px;
 border: 0;
 background: transparent;
 cursor: pointer;
}

.nav-toggle span {
 display: block;
 width: 24px;
 height: 2px;
 margin: 5px auto;
 border-radius: 999px;
 background: #fff;
}

/* HERO */
.hero {
 position: relative;
 min-height: 100vh;
 padding: 10rem 0 7rem;
 overflow: hidden;
 isolation: isolate;
 display: flex;
 align-items: center;
}

.hero-content {
 position: relative;
 z-index: 8;
 width: min(100%, 920px);
 text-align: center;
}

/* SAND MOVING BACKGROUND */
.sand-layer {
 position: absolute;
 inset: -20%;
 z-index: 0;
 background:
 radial-gradient(circle at 20% 30%, rgba(50,240,162,0.22), transparent 26%),
 radial-gradient(circle at 70% 35%, rgba(255,143,175,0.18), transparent 28%),
 radial-gradient(circle at 45% 70%, rgba(217,154,124,0.18), transparent 32%),
 conic-gradient(from 180deg at 50% 50%,
 rgba(50,240,162,0.08),
 rgba(255,143,175,0.12),
 rgba(217,154,124,0.10),
 rgba(50,240,162,0.08)
 );
 filter: blur(40px) saturate(1.25);
 animation: sandMove 18s ease-in-out infinite alternate;
}

.noise-layer {
 position: absolute;
 inset: 0;
 z-index: 2;
 opacity: 0.065;
 mix-blend-mode: soft-light;
 background-image:
 repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.14) 0 1px, transparent 1px 3px);
}

.cursor-light {
 position: absolute;
 inset: 0;
 z-index: 3;
 pointer-events: none;
 opacity: 0.38;
 background:
 radial-gradient(
 360px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
 rgba(255,180,160,0.18),
 rgba(50,240,162,0.08) 32%,
 transparent 68%
 );
 mix-blend-mode: screen;
}

/* ORBS */
.gradient-orb {
 position: absolute;
 border-radius: 50%;
 pointer-events: none;
 filter: blur(110px);
 mix-blend-mode: screen;
 opacity: 0.72;
 z-index: 1;
}

.orb-1 {
 top: -6rem;
 left: -5rem;
 width: 34rem;
 height: 34rem;
 background: rgba(50,240,162,0.20);
 animation: floatOne 13s ease-in-out infinite;
}

.orb-2 {
 right: -6rem;
 bottom: -7rem;
 width: 42rem;
 height: 42rem;
 background: rgba(255,143,175,0.18);
 animation: floatTwo 16s ease-in-out infinite;
}

.orb-3 {
 top: 36%;
 left: 50%;
 width: 26rem;
 height: 26rem;
 background: rgba(217,154,124,0.14);
 transform: translate(-50%, -50%);
 animation: floatThree 20s ease-in-out infinite;
}

/* TICKER */
.ticker {
 position: absolute;
 top: 78px;
 left: 0;
 z-index: 9;
 width: 100%;
 overflow: hidden;
 border-top: 1px solid rgba(255,255,255,0.05);
 border-bottom: 1px solid rgba(255,255,255,0.07);
 background: rgba(3,5,4,0.28);
 backdrop-filter: blur(14px);
 -webkit-backdrop-filter: blur(14px);
}

.ticker-track {
 display: flex;
 width: max-content;
 animation: tickerScroll var(--ticker-speed) linear infinite;
}

.ticker-track span {
 display: inline-flex;
 align-items: center;
 min-height: 3rem;
 padding: 0.85rem 1.8rem;
 white-space: nowrap;
 font-size: 0.78rem;
 font-weight: 700;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 background: linear-gradient(120deg, #9fffd6, #ff9fba, #e7a982, #fff0df);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

/* HERO TEXT */
.pill {
 display: inline-flex;
 margin-bottom: 1.4rem;
 padding: 0.72rem 1.25rem;
 border-radius: var(--radius-pill);
 border: 1px solid rgba(255,255,255,0.11);
 background: rgba(255,255,255,0.055);
 color: rgba(255,244,238,0.84);
 backdrop-filter: blur(14px);
 -webkit-backdrop-filter: blur(14px);
}

.hero h1,
.page-hero h1 {
 margin: 0 0 1.2rem;
 font-size: clamp(3rem, 7vw, 6.4rem);
 line-height: 0.95;
 letter-spacing: -0.06em;
 color: #fff8f2;
}

.hero-lead,
.page-hero p {
 max-width: 740px;
 margin: 0 auto;
 color: var(--text-soft);
 font-size: clamp(1.05rem, 2vw, 1.3rem);
 line-height: 1.7;
}

.hero-actions {
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
 gap: 1rem;
 margin-top: 2.2rem;
}

/* BUTTONS */
.btn,
button,
input[type="submit"],
input[type="button"] {
 position: relative;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 200px;
 min-height: 3.35rem;
 padding: 0.95rem 1.65rem;
 border-radius: var(--radius-pill);
 border: 0;
 overflow: hidden;
 cursor: pointer;
 font: inherit;
 font-size: 0.95rem;
 font-weight: 700;
 letter-spacing: 0.03em;
 transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

.btn-primary,
input[type="submit"] {
 color: #25110f;
 background:
 linear-gradient(135deg, #ffb3c6 0%, #d98d9d 22%, #d99a7c 55%, #f0c0a0 100%);
 box-shadow:
 inset 0 1px 0 rgba(255,255,255,0.48),
 inset 0 -10px 20px rgba(70,30,24,0.18),
 0 18px 44px rgba(217,112,140,0.26);
}

.btn-secondary {
 color: #fff4ee;
 border: 1px solid rgba(255,255,255,0.13);
 background: rgba(255,255,255,0.055);
 backdrop-filter: blur(14px);
 -webkit-backdrop-filter: blur(14px);
}

.btn:hover,
button:hover,
input[type="submit"]:hover {
 transform: translateY(-2px);
 filter: saturate(1.08);
}

.btn-primary:hover {
 box-shadow:
 inset 0 1px 0 rgba(255,255,255,0.58),
 0 22px 54px rgba(217,112,140,0.34);
}

.btn::after,
button::after,
input[type="submit"]::after {
 content: "";
 position: absolute;
 top: -60%;
 left: -80%;
 width: 52%;
 height: 220%;
 background: linear-gradient(120deg, transparent, rgba(255,255,255,0.34), transparent);
 transform: rotate(25deg);
 transition: left 0.7s ease;
}

.btn:hover::after,
button:hover::after,
input[type="submit"]:hover::after {
 left: 130%;
}

/* SECTIONS / HEADINGS */
.section-heading {
 max-width: 760px;
 margin: 0 auto 2.4rem;
 text-align: center;
}

.eyebrow {
 display: inline-block;
 margin-bottom: 0.9rem;
 font-size: 0.78rem;
 font-weight: 800;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: var(--text-faint);
}

.section-heading h2,
.cta-box h2,
.card h2 {
 margin: 0 0 0.9rem;
 font-size: clamp(1.8rem, 3vw, 2.9rem);
 line-height: 1.08;
 letter-spacing: -0.04em;
 padding: 0 24px;
 text-align: center;

}
.csservices,
.section-heading p,
.cta-box p,
.card p,
.service-card p,
.work-card p,
.about-card p {
 margin: 0;
 color: var(--text-soft);
 line-height: 1.75;

}

/* CARDS */
.cards-grid,
.about-grid.three {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 1.35rem;
}

.split-grid,
.work-grid,
.about-grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 1.35rem;
}

.card,
.service-card,
.work-card,
.about-card,
.cta-box {
 position: relative;
 overflow: hidden;
 border-radius: var(--radius-lg);
 border: 1px solid rgba(255,255,255,0.09);
 background:
 linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025)),
 rgba(255,255,255,0.035);
 box-shadow:
 inset 0 1px 0 rgba(255,255,255,0.055),
 0 22px 70px rgba(0,0,0,0.28);
 backdrop-filter: blur(18px);
 -webkit-backdrop-filter: blur(18px);
}

.card,
.service-card,
.about-card {
 padding: 2rem;
}

.card::before,
.service-card::before,
.work-card::before,
.about-card::before,
.cta-box::before {
 content: "";
 position: absolute;
 inset: 0;
 border-radius: inherit;
 padding: 1px;
 background: linear-gradient(135deg, rgba(50,240,162,0.24), rgba(255,143,175,0.22), rgba(217,154,124,0.18));
 mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
 mask-composite: exclude;
 pointer-events: none;
 opacity: 0.6;
}

.card:hover,
.service-card:hover,
.about-card:hover,
.work-card:hover {
 transform: translateY(-4px);
 border-color: rgba(255,180,160,0.18);
 transition: all 0.35s ease;
}

.service-card h3,
.work-card h3,
.about-card h3 {
 margin: 0 0 0.8rem;
 font-size: 1.22rem;
 letter-spacing: -0.02em;
}

/* PAGE HERO */
.page-hero {
 position: relative;
 padding: 10rem 0 4rem;
 text-align: center;
 overflow: hidden;
}

.page-hero::before {
 content: "";
 position: absolute;
 inset: -20%;
 background:
 radial-gradient(circle at 20% 20%, rgba(50,240,162,0.15), transparent 28%),
 radial-gradient(circle at 80% 35%, rgba(255,143,175,0.14), transparent 30%),
 radial-gradient(circle at 50% 90%, rgba(217,154,124,0.12), transparent 34%);
 filter: blur(34px);
 animation: sandMove 20s ease-in-out infinite alternate;
 z-index: -1;
}

.about-text {
 max-width: 760px;
 margin: 0 auto 1.4rem;
 color: var(--text-soft);
 line-height: 1.8;
}

/* TAGS */
.tag-list {
 display: flex;
 flex-wrap: wrap;
 gap: 0.85rem;
 justify-content: center;
}

.tag-list span,
.work-meta span {
 display: inline-flex;
 padding: 0.7rem 1rem;
 border-radius: var(--radius-pill);
 border: 1px solid rgba(255,255,255,0.10);
 background: rgba(255,255,255,0.04);
 color: var(--text-soft);
}

/* CONTACT */
.contact-grid {
 display: grid;
 grid-template-columns: 0.9fr 1.1fr;
 gap: 1.35rem;
}

.contact-form {
 display: grid;
 gap: 1rem;
}

.form-row {
 display: grid;
 gap: 0.45rem;
}

.form-row label {
 color: rgba(255,245,240,0.86);
 font-size: 0.95rem;
 font-weight: 600;
}

.form-row input,
.form-row select,
.form-row textarea {
 width: 100%;
 border: 1px solid rgba(255,255,255,0.11);
 border-radius: 16px;
 background: rgba(255,255,255,0.045);
 color: #fff;
 font: inherit;
 padding: 0.95rem 1rem;
 outline: none;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
 border-color: rgba(255,143,175,0.42);
 box-shadow: 0 0 0 3px rgba(255,143,175,0.10);
}

.form-note {
 color: var(--text-faint);
 font-size: 0.92rem;
}

/* FOOTER */
.site-footer {
 position: relative;
 text-align: center;
 padding: 5rem 1.25rem 6rem;
}

.footer-line {
 width: min(820px, 88%);
 height: 1px;
 margin: 0 auto 2.6rem;
 background: linear-gradient(90deg, transparent, rgba(50,240,162,0.25), rgba(255,143,175,0.34), rgba(217,154,124,0.3), transparent);
 box-shadow: 0 0 24px rgba(255,143,175,0.14);
}

.footer-tagline {
 margin: 0;
 font-size: 0.96rem;
 letter-spacing: 0.1em;
 color: rgba(255,244,238,0.78);
}

.footer-copy {
 margin: 0.8rem 0 0;
 font-size: 0.78rem;
 letter-spacing: 0.08em;
 color: rgba(255,244,238,0.42);
}

/* ANIMATIONS */
@keyframes tickerScroll {
 from { transform: translateX(0); }
 to { transform: translateX(-50%); }
}

@keyframes sandMove {
 0% {
 transform: translate3d(-2%, -1%, 0) scale(1);
 }
 50% {
 transform: translate3d(2%, 2%, 0) scale(1.06) rotate(2deg);
 }
 100% {
 transform: translate3d(-1%, 3%, 0) scale(1.03) rotate(-2deg);
 }
}

@keyframes floatOne {
 0%, 100% { transform: translate3d(0,0,0) scale(1); }
 50% { transform: translate3d(40px,-20px,0) scale(1.06); }
}

@keyframes floatTwo {
 0%, 100% { transform: translate3d(0,0,0) scale(1); }
 50% { transform: translate3d(-38px,26px,0) scale(1.08); }
}

@keyframes floatThree {
 0%, 100% { transform: translate(-50%,-50%) scale(1); }
 50% { transform: translate(-48%,-46%) scale(1.08); }
}

/* RESPONSIVE */
@media (max-width: 980px) {
 .nav-wrap {
 grid-template-columns: auto 1fr auto;
 }

 .brand {
 justify-self: start;
 font-size: 0.78rem;
 }

 .site-nav {
 position: fixed;
 top: 78px;
 left: 1rem;
 right: 1rem;
 display: none;
 flex-direction: column;
 align-items: stretch;
 padding: 1.2rem;
 border-radius: 24px;
 background: rgba(4,7,6,0.95);
 border: 1px solid rgba(255,255,255,0.09);
 backdrop-filter: blur(20px);
 }

 .site-nav.open {
 display: flex;
 }

 .nav-left,
 .nav-right {
 justify-self: stretch;
 }

 .nav-toggle {
 display: block;
 }

 .cards-grid,
 .about-grid.three,
 .split-grid,
 .work-grid,
 .about-grid,
 .contact-grid {
 grid-template-columns: 1fr;
 }

 .ticker {
 top: 78px;
 }
}

@media (max-width: 640px) {
 .hero {
 padding: 9rem 0 5rem;
 }

 .hero h1 {
 font-size: clamp(2.65rem, 13vw, 4.4rem);
 }

 .hero-actions {
 flex-direction: column;
 }

 .btn {
 width: 100%;
 }

 .section {
 padding: 4.2rem 0;
 }

 .ticker-track span {
 font-size: 0.68rem;
 padding: 0.8rem 1.15rem;
 }
}

@media (prefers-reduced-motion: reduce) {
 html {
 scroll-behavior: auto;
 }

 .ticker-track,
 .gradient-orb,
 .sand-layer {
 animation: none !important;
 }
}

.intro-video.hide {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.cta-box .btn-primary {
display: block;
width: fit-content;
margin: 1.5rem auto 0;
}

.cta-box > p {
text-align: center;
}

.services-positioning .service-card ul {
text-align: left;
padding-left: 1.2rem;
margin: 0;
}

.services-positioning .service-card li {
text-align: left;
margin-bottom: 0.45rem;
}

/* =========================
PORTFOLIO ART SECTION
========================= */

.portfolio-art-section {
position: relative;
padding: 6rem 0 7rem;
overflow: hidden;
}

.portfolio-ticker {
width: 100%;
overflow: hidden;
border-top: 2px solid rgba(54, 240, 165, 0.45);
border-bottom: 2px solid rgba(217, 154, 124, 0.45);
background:
linear-gradient(
90deg,
rgba(54, 240, 165, 0.08),
rgba(255, 143, 175, 0.14),
rgba(217, 154, 124, 0.12)
);
box-shadow:
0 0 28px rgba(54, 240, 165, 0.12),
inset 0 0 24px rgba(255, 143, 175, 0.08);
}

.portfolio-ticker-track {
display: flex;
width: max-content;
animation: portfolioMoveRight 24s linear infinite;
}

.portfolio-ticker-track span {
display: inline-flex;
align-items: center;
padding: 1.4rem 3rem;
white-space: nowrap;
font-size: clamp(2.2rem, 6vw, 6rem);
font-weight: 900;
letter-spacing: -0.05em;
text-transform: uppercase;

background: linear-gradient(
120deg,
#ff8faf,
#ffc1d0,
#d99a7c,
#fff0df,
#ff8faf
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

text-shadow:
0 0 22px rgba(255, 143, 175, 0.18),
0 0 44px rgba(217, 154, 124, 0.12);
}

@keyframes portfolioMoveRight {
from {
transform: translateX(-50%);
}
to {
transform: translateX(0);
}
}

/* LARGE PROJECT CARD */

.portfolio-feature {
margin-top: 4rem;
}

.portfolio-card-large {
display: block;
max-width: 980px;
margin: 0 auto;
padding: 3rem;
border-radius: 34px;
position: relative;
overflow: hidden;

border: 1px solid rgba(255, 255, 255, 0.1);
background:
linear-gradient(
135deg,
rgba(54, 240, 165, 0.10),
rgba(255, 143, 175, 0.10),
rgba(217, 154, 124, 0.08)
),
rgba(255, 255, 255, 0.035);

box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 30px 90px rgba(0, 0, 0, 0.35);

backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);

transition:
transform 0.35s ease,
border-color 0.35s ease,
box-shadow 0.35s ease;
}

.portfolio-card-large::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1.5px;
background: linear-gradient(
135deg,
rgba(54, 240, 165, 0.75),
rgba(255, 143, 175, 0.65),
rgba(217, 154, 124, 0.75)
);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
pointer-events: none;
}

.portfolio-card-large:hover {
transform: translateY(-6px);
border-color: rgba(255, 180, 160, 0.28);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.1),
0 38px 110px rgba(0, 0, 0, 0.42),
0 0 35px rgba(255, 143, 175, 0.12);
}

.portfolio-label {
margin-bottom: 1rem;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 238, 232, 0.52);
}

.portfolio-card-large h2 {
margin: 0 0 1rem;
font-size: clamp(2.6rem, 6vw, 5.8rem);
line-height: 0.95;
letter-spacing: -0.06em;

background: linear-gradient(
120deg,
#bfffe4,
#ff9fba,
#f0b58f,
#fff0e2
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.portfolio-card-large p {
max-width: 640px;
margin: 0;
color: var(--text-soft);
font-size: 1.05rem;
line-height: 1.7;
}

.portfolio-link {
display: inline-flex;
margin-top: 2rem;
font-weight: 800;
letter-spacing: 0.04em;
color: #ffc1d0;
}

/* MOBILE */
@media (max-width: 768px) {
.portfolio-card-large {
padding: 2rem;
border-radius: 26px;
}

.portfolio-ticker-track span {
padding: 1rem 2rem;
}
}

.form-success {
display: none;
margin-top: 18px;
text-align: center;
font-size: 0.92rem;
line-height: 1.6;
color: rgba(255,255,255,0.72);
}

.service-card,
.glass-card {
display: flex;
flex-direction: column;
justify-content: flex-start;
text-align: left;
}

.service-card h2,
.glass-card h2 {
margin: 0 0 14px 0;
text-align: left;
line-height: 1.05;
}

.service-card p,
.glass-card p {
margin: 0;
text-align: left;
line-height: 1.6;
max-width: 100%;
}

.service-card h2,
.glass-card h2 {
font-weight: 800;
letter-spacing: -0.03em;
}


.services-positioning .cards-grid {
margin-top: 2.4rem;
}

.services-positioning .service-card {
text-align: left !important;
align-items: flex-start !important;
padding: 34px 36px !important;
}

.services-positioning .service-card h3 {
width: 100%;
margin: 0 0 18px 0 !important;
padding: 0 !important;
text-align: left !important;
}

.services-positioning .service-card ul {
margin: 0 !important;
padding-left: 20px !important;
text-align: left !important;
}

.services-positioning .service-card li {
margin: 0 0 6px 0 !important;
text-align: left !important;
line-height: 1.35;
}
.services-positioning .cards-grid > .service-card,
.services-positioning .cards-grid > article.service-card {
padding: 34px 36px !important;
text-align: left !important;
align-items: flex-start !important;
}

.services-positioning .cards-grid > .service-card h3,
.services-positioning .cards-grid > article.service-card h3 {
width: 100% !important;
margin: 0 0 18px 0 !important;
padding: 0 !important;
text-align: left !important;
}

.services-positioning .cards-grid > .service-card ul,
.services-positioning .cards-grid > article.service-card ul {
width: 100% !important;
margin: 0 !important;
padding-left: 20px !important;
text-align: left !important;
list-style-position: outside !important;
}

.services-positioning .cards-grid > .service-card li,
.services-positioning .cards-grid > article.service-card li {
margin: 0 0 6px 0 !important;
padding: 0 !important;
text-align: left !important;
}

/* FIX UNIQUEMENT HOME 2 CARDS + SERVICES 3 CARDS */

.split-grid .glass-card,
.services-positioning .service-card {
text-align: left !important;
align-items: flex-start !important;
}

.split-grid .glass-card h2,
.split-grid .glass-card p,
.services-positioning .service-card h3,
.services-positioning .service-card ul,
.services-positioning .service-card li {
text-align: left !important;
}

.split-grid .glass-card h2,
.services-positioning .service-card h3 {
margin-left: 0 !important;
padding-left: 0 !important;
}

.services-positioning .service-card ul {
margin-left: 0 !important;
padding-left: 1.2rem !important;
}

/* HOME — moins d’espace entre les lignes */

.split-grid .glass-card p {
line-height: 1.35 !important;
}

/* SERVICES — grandes cards du bas centrées */

.cta-box {
text-align: center !important;
line-height: 1.35 !important;
}

.cta-box h2,
.cta-box p {
text-align: center !important;
margin-left: auto;
margin-right: auto;
}

.cta-box p {
line-height: 1.4;
}
@media (max-width: 768px) {
.site-header {
display: block !important;
}

.nav-wrap {
display: flex !important;
flex-direction: column;
align-items: center;
gap: 12px;
}

.site-nav {
display: flex !important;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
}

.site-nav a,
.brand,
.nav-cta {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
}
}

/* MOBILE NAV — FIX FINAL */
@media (max-width: 768px) {

.nav-wrap {
position: relative;
justify-content: center;
}

.brand {
position: absolute;
top: 18px;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
letter-spacing: 4px;
white-space: nowrap;
}

.nav-toggle {
position: absolute;
top: 52px;
left: 50%;
transform: translateX(-50%);
z-index: 1005;
}

.site-nav {
display: none;
}

.site-header.is-open .site-nav {
display: flex;
}

.site-header.is-open .nav-left,
.site-header.is-open .nav-right {
position: fixed;
left: 50%;
transform: translateX(-50%);
width: 86%;
max-width: 320px;

background: rgba(8, 12, 12, 0.96);
backdrop-filter: blur(18px);
border-radius: 28px;
padding: 18px;

flex-direction: column;
align-items: center;
gap: 12px;

z-index: 1001;
}

.site-header.is-open .nav-left {
top: 120px;
}

.site-header.is-open .nav-right {
top: 310px;
}

.site-header.is-open .site-nav a {
width: 100%;
max-width: 260px;
margin: 0 auto;
text-align: center;
justify-content: center;
}

.language-switch {
width: 100%;
display: flex;
justify-content: center;
gap: 14px;
margin: 6px 0;
}
}
@media (max-width: 768px) {
.site-header:not(.is-open) .site-nav {
display: none !important;
}

.site-header.is-open .site-nav {
display: flex !important;
}
}
/* MOBILE NAV — COMPACT RIGHT DROPDOWN */
@media (max-width: 768px) {

.site-header {
height: 108px;
}

.nav-wrap {
position: relative;
height: 108px;
}

.brand {
position: absolute;
top: 22px;
left: 50%;
transform: translateX(-50%);
font-size: 11px;
letter-spacing: 4px;
white-space: nowrap;
}

.nav-toggle {
position: absolute;
top: 66px;
right: 28px;
left: auto;
transform: none;
z-index: 1005;
}

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

.site-header.is-open .nav-left,
.site-header.is-open .nav-right {
display: flex !important;
}

.site-header.is-open .nav-left {
position: absolute;
top: 104px;
right: 18px;
left: auto;
transform: none;

width: 210px;
padding: 18px 16px;
border-radius: 24px;

background: rgba(5, 10, 10, 0.96);
backdrop-filter: blur(18px);

flex-direction: column;
align-items: center;
gap: 10px;

z-index: 1004;
}

.site-header.is-open .nav-right {
position: absolute;
top: 318px;
right: 18px;
left: auto;
transform: none;

width: 210px;
padding: 16px;
border-radius: 24px;

background: rgba(5, 10, 10, 0.96);
backdrop-filter: blur(18px);

flex-direction: column;
align-items: center;
gap: 12px;

z-index: 1004;
}

.site-header.is-open .site-nav a {
width: 150px;
max-width: 150px;
margin: 0 auto;
text-align: center;
justify-content: center;

font-size: 15px;
line-height: 1;
padding: 10px 14px;
}

.site-header.is-open .nav-cta {
width: 150px;
max-width: 150px;
padding: 12px 16px;
border-radius: 999px;
}

.language-switch {
width: 150px;
display: flex;
justify-content: space-between;
gap: 0;
margin: 2px auto 0;
}

.language-switch a {
width: auto !important;
max-width: none !important;
padding: 4px 0 !important;
font-size: 12px !important;
}
}

/* ==============================
MOBILE HERO — COMPACT PREMIUM
À coller tout en bas de cs.css
============================== */

@media (max-width: 768px) {

.site-header {
height: 92px !important;
padding: 0 !important;
}

.nav-wrap {
height: 92px !important;
position: relative !important;
}

.brand {
top: 18px !important;
font-size: 11px !important;
letter-spacing: 4px !important;
}

.nav-toggle {
top: 52px !important;
right: 28px !important;
left: auto !important;
transform: none !important;
}

.hero {
padding: 58px 32px 72px !important;
min-height: calc(100vh - 92px) !important;
}

.hero .pill {
max-width: 270px !important;
margin: 0 auto 34px !important;
padding: 10px 18px !important;
font-size: 14px !important;
text-align: center !important;
}

.hero h1 {
max-width: 315px !important;
margin: 0 auto 24px !important;
text-align: center !important;

font-size: clamp(42px, 11vw, 54px) !important;
line-height: 0.96 !important;
letter-spacing: -2px !important;
}

.hero p {
max-width: 280px !important;
margin: 0 auto 34px !important;
text-align: center !important;

font-size: 16px !important;
line-height: 1.55 !important;
}

.hero-actions {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 14px !important;
}

.hero-actions .btn,
.hero .btn,
.btn {
width: 210px !important;
max-width: 210px !important;
min-width: 0 !important;

margin: 0 auto !important;
padding: 14px 22px !important;

display: flex !important;
justify-content: center !important;
align-items: center !important;

font-size: 15px !important;
text-align: center !important;
border-radius: 999px !important;
}
}

@media (max-width: 768px) {

.nav-wrap {
position: relative !important;
}

.nav-toggle {
position: absolute !important;
top: 38px !important;

left: 50% !important;
right: auto !important;

width: 44px !important;
height: 34px !important;
padding: 0 !important;
margin: 0 !important;

display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;

transform: translateX(-50%) !important;
z-index: 1005 !important;
}

.nav-toggle span {
display: block !important;
width: 32px !important;
height: 3px !important;
margin: 0 !important;
border-radius: 999px !important;
}
}
@media (max-width: 768px) {

.hero h1 {
max-width: 290px !important;

margin: 0 auto 18px !important;

font-size: clamp(38px, 10vw, 50px) !important;

line-height: 0.88 !important;

letter-spacing: -3px !important;

text-align: center !important;
}

}
@media (max-width: 768px) {

.site-header {
height: 86px !important;
}

.nav-wrap {
height: 86px !important;
}

.brand {
top: 14px !important;
}

.nav-toggle {
top: 42px !important;
}

.hero {
padding-top: 92px !important;
}

.hero .pill,
.hero-pill,
.pill {
margin-top: 0 !important;
margin-bottom: 34px !important;
}

.ticker,
.marquee,
.ticker-wrap {
margin-bottom: 0 !important;
}
}
@media (max-width: 768px) {

.hero .pill,
.hero-pill,
.pill {

margin-top: 42px !important;

margin-bottom: 34px !important;

position: relative !important;
z-index: 2 !important;
}

}
/* ====================================
MOBILE SPACING — COMPACT LUXURY
==================================== */

@media (max-width: 768px) {

/* HERO */
.hero {
padding-top: 34px !important;
padding-bottom: 52px !important;
}

.hero .pill,
.hero-pill,
.pill {
margin-top: 8px !important;
margin-bottom: 18px !important;
}

.hero h1 {
margin-bottom: 18px !important;
}

.hero p {
margin-bottom: 28px !important;
}

/* SECTION GAP */
section {
padding-top: 58px !important;
padding-bottom: 58px !important;
}

/* WHO IT'S FOR */
.who-for,
.who-its-for,
.target-section {
padding-top: 36px !important;
}

.who-for h2,
.who-its-for h2,
.target-section h2 {
margin-bottom: 24px !important;
}

/* CARDS */
.card,
.service-card,
.target-card {

padding: 28px 22px !important;

margin-bottom: 18px !important;

border-radius: 28px !important;
}

.card h3,
.service-card h3,
.target-card h3 {
margin-bottom: 12px !important;
}

/* CTA BOX */
.container.cta-box,
.cta-box {

margin-top: 36px !important;

padding: 34px 24px !important;

border-radius: 32px !important;
}

.cta-box h2 {
margin-bottom: 18px !important;

line-height: 0.95 !important;
}

.cta-box p {
margin-bottom: 24px !important;

line-height: 1.5 !important;
}

.cta-box .btn {
width: 210px !important;
}
}

@media (max-width: 768px) {

.hero .pill,
.hero-pill,
.pill {

margin-top: 54px !important;

}

}

@media (max-width: 768px) {

/* HOME seulement */
body.home .hero .pill,
body.home .hero-pill,
body.home .pill {
margin-top: 18px !important;
}

/* SERVICES seulement */
body.services .hero .pill,
body.services .hero-pill,
body.services .pill {
margin-top: 54px !important;
}

}
@media (max-width: 768px) {

/* =========================
HERO CONTAINER
========================= */

.container.hero-content {

display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;

padding-top: 84px !important;

text-align: center !important;
}

/* =========================
PILL
========================= */

.pill {

position: relative !important;

top: 0 !important;

margin: 0 auto 22px auto !important;

padding: 10px 22px !important;

font-size: 0.95rem !important;

border-radius: 999px !important;

text-align: center !important;
}

/* =========================
H1
========================= */

.hero-content h1 {

max-width: 320px !important;

margin: 0 auto 12px auto !important;

font-size: 3.35rem !important;

line-height: 0.9 !important;

letter-spacing: -3px !important;

text-align: center !important;

text-wrap: balance !important;
}
/* =========================
HERO LEAD
========================= */

p.hero-lead {

max-width: 290px !important;

margin: 0 auto 28px auto !important;

font-size: 1rem !important;

line-height: 1.32 !important;

letter-spacing: -0.2px !important;

text-align: center !important;
}

/* =========================
BUTTONS
========================= */

.hero-actions {

display: flex !important;
flex-direction: column !important;
align-items: center !important;

gap: 16px !important;
}

.btn.btn-primary,
.btn.btn-secondary {

width: 260px !important;

justify-content: center !important;
}

}

@media (max-width: 768px) {

body.about .pill {

margin-top: 46px !important;

margin-bottom: 18px !important;

position: relative !important;

z-index: 5 !important;
}

}
@media (max-width: 768px) {

.ticker-wrap {

margin-top: 42px !important;

}

}

@media (max-width: 768px) {

.nav-wrap {

height: 52px !important;

min-height: 52px !important;

padding: 0 !important;

margin-bottom: 18px !important;
}

}

@media (max-width: 768px) {

.portfolio-ticker {
margin-top: 48px !important;
}

}

@media (max-width: 768px) {

body.contact .container.hero-content {
padding-top: 92px !important;
}

body.contact .pill {
margin-top: 32px !important;
margin-bottom: 24px !important;
}

body.contact .hero-content h1 {
max-width: 330px !important;
font-size: 3.4rem !important;
line-height: 0.9 !important;
letter-spacing: -3px !important;
margin: 0 auto 18px auto !important;
text-align: center !important;
}

body.contact p.hero-lead {
max-width: 310px !important;
margin: 0 auto 34px auto !important;
font-size: 1rem !important;
line-height: 1.45 !important;
text-align: center !important;
}
}

@media (max-width: 768px) {

body.about .page-hero p,
body.services .page-hero p,
body.contact .page-hero p,
body.work .page-hero p {

max-width: 220px !important;

margin: 0 auto 22px auto !important;

text-align: center !important;

font-size: 0.9rem !important;

line-height: 1.32 !important;

letter-spacing: -0.2px !important;
}

}

@media (max-width: 768px) {

/* =========================
GLOBAL SECTION SPACING
========================= */

body.services section {
padding-top: 72px !important;
padding-bottom: 72px !important;
}

/* =========================
SECTION HEADING WRAP
========================= */

body.services .section-heading {
width: 100% !important;

max-width: 360px !important;

margin: 0 auto 56px auto !important;

padding-left: 28px !important;
padding-right: 28px !important;

text-align: center !important;
}

/* =========================
SMALL LABEL / KICKER
========================= */

body.services .section-kicker,
body.services .eyebrow {
display: block !important;

margin: 0 auto 18px auto !important;

text-align: center !important;

font-size: 0.72rem !important;

letter-spacing: 4.5px !important;

opacity: 0.78 !important;
}

/* =========================
TITLES
========================= */

body.services .section-heading h1,
body.services .section-heading h2 {

max-width: 320px !important;

margin: 0 auto 22px auto !important;

text-align: center !important;

font-size: 2.55rem !important;

line-height: 0.94 !important;

letter-spacing: -3px !important;

font-weight: 700 !important;
}

/* =========================
INTRO TEXT
========================= */

body.services .section-heading .section-intro {

max-width: 255px !important;

margin: 0 auto !important;

text-align: center !important;

font-size: 0.92rem !important;

line-height: 1.48 !important;

letter-spacing: -0.1px !important;

opacity: 0.9 !important;
}

/* =========================
POSITIONING BLOCK
========================= */

body.services .positioning .section-heading,
body.services .section-heading.positioning {

margin-top: 82px !important;

margin-bottom: 42px !important;
}

/* =========================
CARDS PREMIUM
========================= */

body.services .service-card,
body.services .about-card,
body.services .manifesto-card {

width: calc(100% - 42px) !important;

max-width: 350px !important;

margin-left: auto !important;
margin-right: auto !important;

padding: 26px 24px !important;

border-radius: 28px !important;
}

/* =========================
CARD TITLES
========================= */

body.services .service-card h3,
body.services .about-card h3,
body.services .manifesto-card h3 {

font-size: 1.6rem !important;

line-height: 1.05 !important;

margin-bottom: 16px !important;

letter-spacing: -1px !important;
}

/* =========================
CARD TEXT
========================= */

body.services .service-card p,
body.services .about-card p,
body.services .manifesto-card p {

font-size: 0.96rem !important;

line-height: 1.55 !important;

opacity: 0.9 !important;
}

}

@media (max-width: 768px) {

.intro-video {
background: #050605 !important;
overflow: hidden !important;
}

.intro-video video,
#introVideoFile {

position: absolute !important;
top: 50% !important;
left: 50% !important;

width: 100vw !important;
height: 100vh !important;

object-fit: contain !important;
object-position: center center !important;

transform: translate(-50%, -50%) scale(0.99) !important;
}

}