:root {
  --purple: #61245c;
  --purple-deep: #32112f;
  --purple-ink: #1e0b1d;
  --orange: #f5a623;
  --orange-light: #ffc65e;
  --ivory: #f6f0e6;
  --warm-white: #fffdf9;
  --charcoal: #191617;
  --muted: #756c72;
  --line: rgba(97, 36, 92, .16);
  --display: "Iowan Old Style", "Baskerville", Georgia, serif;
  --sans: var(--font-geist-sans), Arial, sans-serif;
}

/* Hostinger v16 — online editor, stable service flow and performance-safe motion */
.portfolio-loading,.portfolio-load-error { grid-column:1/-1; min-height:260px; display:grid; place-content:center; gap:16px; color:rgba(255,255,255,.72); text-align:center; }
.portfolio-load-error button { justify-self:center; padding:10px 18px; color:#180714; border:0; border-radius:999px; background:#d9ff37; cursor:pointer; }
.services-v3 { overflow:hidden !important; }
.service-stack { display:grid !important; min-height:0 !important; gap:14px; padding:0 !important; perspective:none !important; }
.service-panel,.service-panel:not(:last-child) { position:relative !important; inset:auto !important; top:auto !important; z-index:auto !important; margin:0 !important; transform:none !important; will-change:auto !important; contain:layout paint; }
.service-stack .service-panel:hover { transform:none !important; }
.service-panel__lead b { font-size:2rem; font-weight:500; }
.service-panel__arrow { font-size:2rem; }
.reveal { opacity:0; transform:translateY(32px); transition:opacity .7s cubic-bezier(.2,.75,.2,1),transform .7s cubic-bezier(.2,.75,.2,1); transition-delay:var(--delay,0ms); }
.reveal.is-visible { opacity:1; transform:none; }
.client-card-v3__visual>img { width:100% !important; height:100% !important; padding:0; object-fit:contain !important; }
.detail-loading { min-height:100vh; display:grid; place-content:center; color:#fff; background:#180714; }
.detail-missing { min-height:100vh; display:grid; place-content:center; justify-items:center; gap:18px; padding:30px; color:#fff; background:#180714; text-align:center; }
.detail-missing img { width:190px; }.detail-missing h1 { margin:0; font-family:var(--display); font-size:3rem; font-weight:400; }.detail-missing a { color:#d9ff37; }
.detail-page>#client-content { display:block; }.detail-page>#client-content[hidden] { display:none; }
.detail-gallery-v5__grid { opacity:0; transform:translateY(12px); transition:opacity .35s ease,transform .35s ease; }.detail-gallery-v5__grid.media-ready { opacity:1; transform:none; }
.lightbox[hidden] { display:none !important; }

.editor-body { min-height:100vh; background:#f7f2e9; }
.editor-login { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 82% 16%,rgba(255,107,0,.48),transparent 24%),radial-gradient(circle at 12% 82%,rgba(139,44,255,.34),transparent 28%),linear-gradient(135deg,#150612,#4d1746); }
.editor-login__card { width:min(430px,100%); padding:42px; border-radius:22px; background:#fffaf3; box-shadow:0 30px 90px rgba(0,0,0,.35); }
.editor-login__card img { width:180px; margin-bottom:44px; }.editor-login__card>p { margin:0;color:#ff6b00;font-size:.65rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase; }.editor-login__card h1 { margin:8px 0 28px;font-family:var(--display);font-size:2.8rem;font-weight:400; }.editor-login__card label { display:grid;gap:8px;font-size:.72rem;font-weight:800; }.editor-login__card input { min-height:52px;padding:13px 15px;border:1px solid #d8cbd3;border-radius:10px;background:#fff; }.editor-login__card>a { display:block;margin-top:22px;color:#6e5f69;font-size:.72rem;text-align:center; }.login-error { min-height:20px;margin-top:12px;color:#b21f3d;font-size:.76rem;text-align:center; }
.editor-shell { min-height:100vh; display:grid; grid-template-columns:300px minmax(0,1fr); }
.editor-sidebar { position:fixed; inset:0 auto 0 0; z-index:20; display:flex; width:300px; flex-direction:column; padding:28px 22px; overflow-y:auto; color:#fff; }
.editor-brand { display:block;width:172px;margin-bottom:36px; }.editor-brand img { width:100%; }.editor-heading span { color:rgba(255,255,255,.48);font-size:.58rem;font-weight:850;letter-spacing:.14em;text-transform:uppercase; }.editor-heading h1 { margin:7px 0 22px;font-family:var(--display);font-size:2.5rem;font-weight:400; }
.editor-primary { min-height:46px;padding:12px 18px;color:#180714;border:0;border-radius:999px;background:linear-gradient(90deg,#ff6b00,#ffbd21);font-weight:900;cursor:pointer; }
.client-list { display:grid;gap:6px;margin:20px 0; }.client-list>button { display:grid;grid-template-columns:34px 1fr;gap:10px;width:100%;align-items:center;padding:12px;color:rgba(255,255,255,.7);border:1px solid transparent;border-radius:10px;background:transparent;text-align:left;cursor:pointer; }.client-list>button:hover,.client-list>button.selected { color:#fff;border-color:rgba(217,255,55,.32);background:rgba(255,255,255,.08); }.client-list>button>span { color:#d9ff37;font-family:var(--display);font-size:1rem; }.client-list b,.client-list small { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.client-list b { font-size:.76rem; }.client-list small { margin-top:4px;color:rgba(255,255,255,.42);font-size:.55rem; }
.editor-side-actions { display:grid;gap:8px;margin-top:auto;padding-top:20px;border-top:1px solid rgba(255,255,255,.12); }.editor-side-actions a,.editor-side-actions button,.editor-side-actions label { padding:9px 4px;color:rgba(255,255,255,.62);border:0;background:transparent;font-size:.64rem;font-weight:800;text-align:left;cursor:pointer; }.editor-side-actions input { display:none; }
.editor-main { grid-column:2;min-width:0; }.editor-topbar { position:sticky;z-index:15;top:0;display:flex;min-height:76px;align-items:center;justify-content:space-between;gap:18px;padding:14px clamp(20px,4vw,52px);border-bottom:1px solid #ded2d9;background:rgba(250,247,243,.94);backdrop-filter:blur(14px); }.editor-topbar>div { display:flex;align-items:center;gap:9px; }.editor-topbar>div:first-child { flex-direction:column;align-items:flex-start; }.editor-topbar b { font-size:.82rem; }.editor-topbar span { color:#6f626b;font-size:.65rem; }.editor-topbar span[data-state="saving"] { color:#bd5a00; }.editor-topbar span[data-state="error"] { color:#b51d3b; }.editor-topbar button { padding:8px 11px;border:1px solid #d7cbd3;border-radius:8px;background:#fff;font-size:.62rem;font-weight:800;cursor:pointer; }.editor-topbar button.danger { color:#ac1936; }
.editor-form { width:min(1120px,100%);margin:0 auto;padding:clamp(28px,5vw,70px); }.editor-form>section { margin-bottom:26px;padding:clamp(24px,4vw,48px);border:1px solid #dfd4da;border-radius:20px;background:#fffdf9;box-shadow:0 18px 50px rgba(50,17,47,.045); }.editor-form h2 { margin:5px 0 24px;color:#32112f;font-family:var(--display);font-size:clamp(2rem,4vw,3.4rem);font-weight:400;line-height:.95; }.form-kicker { margin:0;color:#ff6b00;font-size:.63rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase; }.form-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px; }.editor-form label { display:grid;gap:8px;margin-bottom:16px;color:#4b3945;font-size:.68rem;font-weight:850; }.editor-form input:not([type=file]),.editor-form textarea { width:100%;min-height:48px;padding:12px 14px;color:#271023;border:1px solid #d9ced4;border-radius:10px;background:#fff;font:inherit; }.editor-form textarea { min-height:116px;resize:vertical;line-height:1.55; }.editor-form input:focus,.editor-form textarea:focus { outline:2px solid #ffbd21;border-color:transparent; }
.visibility-switch { display:flex!important;align-items:center;gap:10px!important;width:fit-content;margin-top:10px; }.visibility-switch input { width:18px;height:18px;accent-color:#57204f; }
.project-type-grid>button>b { color:#ff6b00;font-size:1.5rem; }.project-type-grid>button span strong,.project-type-grid>button span small { display:block; }.project-type-grid>button span small { margin-top:6px;color:#8a7784;font-size:.68rem; }.project-type-grid>button.active span small { color:rgba(255,255,255,.64); }
.upload-box { position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;cursor:pointer; }.upload-box input { position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer; }.upload-box>b { font-size:.82rem; }.upload-box>span { color:#81717c;font-size:.66rem; }.upload-box>i { font-style:normal;font-weight:900; }.upload-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px; }
.card-visual-preview { position:relative; }.card-visual-preview button { position:absolute;top:12px;right:12px;padding:8px 12px;border:0;border-radius:999px;background:#fff;color:#a11732;font-size:.62rem;font-weight:900;cursor:pointer; }
.media-strip { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px; }.media-strip figure { min-width:0;margin:0;overflow:hidden;border:1px solid #dfd4da;border-radius:12px;background:#fff; }.media-strip img,.media-strip video { width:100%;height:190px;object-fit:contain;background:#21101e; }.media-strip figcaption { display:grid;grid-template-columns:1fr auto;gap:6px;padding:9px; }.media-strip figcaption input { grid-column:1/-1;min-height:34px!important;padding:7px 8px!important;font-size:.62rem!important; }.media-strip figcaption span { align-self:center;font-size:.58rem; }.media-strip figcaption button { width:26px;height:26px;color:#a11732;border:0;border-radius:50%;background:#fff0f3;font-size:1rem;cursor:pointer; }
.editor-empty { min-height:55vh;display:grid;place-content:center;justify-items:center;text-align:center; }.editor-empty>span { color:#ff6b00;font-family:var(--display);font-size:2rem; }.editor-empty p { max-width:500px;color:#756873;line-height:1.6; }.editor-empty .editor-primary { margin-top:12px; }
.upload-progress { position:sticky;z-index:14;top:76px;margin:18px clamp(20px,4vw,52px) 0;padding:16px 18px;color:#fff;border-radius:14px;background:linear-gradient(120deg,#241020,#61245c);box-shadow:0 18px 50px rgba(30,8,27,.2); }.upload-progress[hidden] { display:none; }.upload-progress>div { display:flex;justify-content:space-between;gap:12px;font-size:.72rem; }.upload-progress>i { display:block;height:7px;margin:12px 0 8px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.15); }.upload-progress>i>span { display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff6b00,#ffbd21,#d9ff37);transition:width .2s linear; }.upload-progress small { color:rgba(255,255,255,.62);font-size:.6rem; }

@media(max-width:900px){.editor-shell{display:block}.editor-sidebar{position:relative;width:100%;max-height:none}.editor-main{grid-column:auto}.client-list{grid-template-columns:repeat(2,minmax(0,1fr))}.editor-side-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.editor-topbar{top:0;align-items:flex-start;flex-direction:column}.upload-progress{top:128px}.form-grid,.upload-grid{grid-template-columns:1fr}.media-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.editor-sidebar{padding:22px 16px}.editor-topbar{padding:12px 14px}.editor-topbar>div:last-child{width:100%;overflow-x:auto}.editor-topbar button{white-space:nowrap}.editor-form{padding:18px 12px}.editor-form>section{padding:22px 16px;border-radius:14px}.client-list{grid-template-columns:1fr}.media-strip{grid-template-columns:1fr}.upload-progress{top:128px;margin:10px 12px 0}.detail-gallery-v5__grid{grid-template-columns:1fr}.client-card-v3__visual{padding:26px}}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.marquee__track,.cockpit-card,.cockpit-spark,.contact-v3__shape,.detail-hero-v4__orb{animation:none!important}.reveal{opacity:1!important;transform:none!important;transition:none!important}*{scroll-behavior:auto!important}}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--warm-white); }
body { margin: 0; color: var(--charcoal); background: var(--warm-white); font-family: var(--sans); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
img, video { display: block; max-width: 100%; }
::selection { color: #fff; background: var(--purple); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }

.public-site { min-height: 100vh; background: var(--warm-white); }
.section { padding: clamp(90px, 10vw, 160px) clamp(24px, 6vw, 100px); }
.nav-shell { position: absolute; inset: 0 0 auto; z-index: 30; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; padding: 22px clamp(24px, 5vw, 76px); color: #fff; border-bottom: 1px solid rgba(255,255,255,.12); }
.brand { display: block; width: 132px; padding: 6px 10px; background: rgba(255,255,255,.94); border-radius: 2px; }
.brand img { width: 100%; }
.nav-links { display: flex; gap: clamp(24px, 3vw, 50px); font-size: .73rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.nav-links a { position: relative; padding: 12px 0; }
.nav-links a::after { content: ""; position: absolute; right: 0; bottom: 4px; left: 0; height: 1px; background: var(--orange); transform: scaleX(0); transition: transform .3s ease; }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-cta { display: flex; align-items: center; justify-self: end; gap: 10px; padding: 13px 18px; font-size: .72rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.35); }

.hero { position: relative; display: grid; min-height: 100svh; place-items: center; overflow: hidden; padding: 150px clamp(24px, 8vw, 132px) 90px; color: #fff; background: radial-gradient(circle at 78% 30%, rgba(245,166,35,.2), transparent 24%), radial-gradient(circle at 12% 90%, rgba(171,83,151,.26), transparent 28%), linear-gradient(135deg, #160714 0%, #3a1336 46%, #5d2257 100%); }
.hero-grid { position: absolute; inset: 0; opacity: .07; background-image: linear-gradient(rgba(255,255,255,.8) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.8) 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(to bottom, transparent, black 20%, black 75%, transparent); }
.hero::before { content: ""; position: absolute; inset: auto -10% -38% auto; width: 65vw; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255,198,94,.18); box-shadow: 0 0 0 54px rgba(255,198,94,.02), 0 0 0 108px rgba(255,198,94,.02); }
.hero-orbit { position: absolute; width: min(64vw, 930px); aspect-ratio: 1; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; }
.hero-orbit::after { content: ""; position: absolute; top: 11%; right: 8%; width: 11px; height: 11px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 30px var(--orange); }
.hero-orbit--one { right: -25vw; bottom: -35vw; animation: orbitIn 1.5s cubic-bezier(.2,.8,.2,1) both; }
.hero-orbit--two { right: -14vw; bottom: -26vw; width: min(50vw, 700px); opacity: .5; }
.hero-copy { position: relative; z-index: 2; width: min(1120px, 100%); justify-self: start; }
.eyebrow, .section-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 28px; font-size: .68rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.eyebrow { color: rgba(255,255,255,.7); animation: revealUp .7s ease .1s both; }
.eyebrow i { width: 4px; height: 4px; border-radius: 50%; background: var(--orange); }
.hero-mark { width: clamp(150px, 17vw, 245px); margin-bottom: 40px; padding: 10px 14px; background: rgba(255,255,255,.95); clip-path: inset(0 100% 0 0); animation: wipeIn .95s cubic-bezier(.2,.8,.2,1) .25s forwards; }
.hero-mark img { width: 100%; }
.hero h1 { display: flex; flex-direction: column; margin: 0; font-family: var(--display); font-size: clamp(3.9rem, 8.6vw, 9.2rem); font-weight: 400; letter-spacing: -.055em; line-height: .82; text-transform: uppercase; }
.hero h1 span { opacity: 0; transform: translateY(42px); animation: revealUp .9s cubic-bezier(.2,.8,.2,1) .6s forwards; }
.hero h1 span:last-child { margin-left: clamp(0px, 9vw, 145px); animation-delay: .78s; }
.hero h1 em { color: var(--orange-light); font-style: italic; text-transform: none; }
.hero-actions { display: flex; gap: 14px; margin-top: 52px; opacity: 0; animation: revealUp .8s ease 1.02s forwards; }
.button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 11px; padding: 15px 24px; font-size: .72rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; transition: transform .25s ease, background .25s ease, color .25s ease; }
.button:hover { transform: translateY(-2px); }
.button--primary { color: var(--purple-ink); background: var(--orange-light); }
.button--ghost { color: #fff; border: 1px solid rgba(255,255,255,.35); }
.hero-side { position: absolute; z-index: 2; top: 50%; right: clamp(24px, 5vw, 80px); display: flex; width: 165px; flex-direction: column; align-items: center; gap: 18px; transform: translateY(-30%); }
.hero-side > span, .hero-side p { margin: 0; color: rgba(255,255,255,.48); font-size: .58rem; font-weight: 750; letter-spacing: .18em; text-align: center; text-transform: uppercase; }
.motion-dial { position: relative; display: grid; width: 132px; aspect-ratio: 1; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; }
.motion-dial::before, .motion-dial::after { content: ""; position: absolute; inset: 13px; border: 1px dashed rgba(255,198,94,.48); border-radius: 50%; animation: spin 18s linear infinite; }
.motion-dial::after { inset: 29px; border-style: solid; animation-direction: reverse; animation-duration: 11s; }
.motion-dial b { color: var(--orange-light); font-family: var(--display); font-size: 2.4rem; font-weight: 400; }
.motion-dial i { position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: #fff; transform: rotate(calc(var(--n, 0) * 120deg)) translateX(63px); }
.motion-dial i:nth-of-type(2) { --n: 1; }.motion-dial i:nth-of-type(3) { --n: 2; }
.scroll-cue { position: absolute; z-index: 2; bottom: 30px; left: 50%; display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.48); font-size: .57rem; font-weight: 750; letter-spacing: .2em; text-transform: uppercase; transform: translateX(-50%); }
.scroll-cue i { width: 46px; height: 1px; background: linear-gradient(90deg, var(--orange), transparent); }

.section-kicker { color: var(--orange); }
.intro { background: var(--ivory); }
.intro-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .7fr); gap: clamp(45px, 8vw, 140px); align-items: end; }
.intro h2, .section-heading h2 { max-width: 1050px; margin: 0; color: var(--purple-deep); font-family: var(--display); font-size: clamp(3rem, 6.4vw, 7rem); font-weight: 400; letter-spacing: -.05em; line-height: .92; }
.intro-grid > p, .section-heading > p { margin: 0; color: var(--muted); font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.8; }

.services { color: #fff; background: var(--purple-ink); }
.section-heading { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(280px, .7fr); gap: 50px; align-items: end; margin-bottom: clamp(55px, 7vw, 100px); }
.services .section-heading h2 { color: #fff; }
.services .section-heading > p { color: rgba(255,255,255,.56); }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.14); border-left: 1px solid rgba(255,255,255,.14); }
.service-card { position: relative; min-height: 600px; overflow: hidden; padding: clamp(28px, 3.2vw, 54px); border-right: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); transition: background .35s ease, color .35s ease; }
.service-card:hover { color: var(--purple-ink); background: var(--orange-light); }
.service-card__top { display: flex; align-items: center; justify-content: space-between; color: var(--orange-light); }
.service-card:hover .service-card__top { color: var(--purple); }
.service-card__top span { font-family: var(--display); font-size: 1.4rem; }
.service-card h3 { max-width: 370px; margin: 120px 0 22px; font-family: var(--display); font-size: clamp(2rem, 3vw, 3.7rem); font-weight: 400; line-height: .98; }
.service-card > p { max-width: 390px; color: rgba(255,255,255,.55); line-height: 1.7; }
.service-card:hover > p { color: rgba(30,11,29,.72); }
.service-card ul { display: grid; gap: 9px; margin: 42px 0 0; padding: 0; list-style: none; color: rgba(255,255,255,.7); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.service-card:hover ul { color: rgba(30,11,29,.7); }
.service-card li::before { content: "↗"; margin-right: 9px; color: var(--orange); }
.service-card__arc { position: absolute; right: -95px; bottom: -120px; width: 270px; aspect-ratio: 1; border: 1px solid rgba(255,198,94,.18); border-radius: 50%; box-shadow: 0 0 0 28px rgba(255,198,94,.02), 0 0 0 56px rgba(255,198,94,.02); }

.featured { background: #ece2d4; }
.featured-card { display: grid; grid-template-columns: 1.6fr .7fr; min-height: 620px; background: var(--purple-deep); }
.featured-card > div { overflow: hidden; }
.featured-card img { width: 100%; height: 100%; object-fit: cover; }
.featured-card aside { display: flex; flex-direction: column; justify-content: end; padding: 55px; color: #fff; }
.featured-card aside > span { color: var(--orange-light); font-size: .65rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.featured-card h2 { margin: 22px 0; font-family: var(--display); font-size: clamp(3rem, 5vw, 6rem); font-weight: 400; line-height: .9; }
.featured-card p { color: rgba(255,255,255,.65); line-height: 1.7; }
.featured-card b { display: flex; align-items: center; gap: 10px; margin-top: 35px; color: var(--orange-light); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }

.work { background: var(--warm-white); }
.section-heading--work { grid-template-columns: 1fr; }
.filter-shell { position: sticky; z-index: 10; top: 14px; display: flex; width: fit-content; max-width: 100%; margin: 0 0 64px; padding: 6px; overflow-x: auto; background: rgba(255,253,249,.92); border: 1px solid var(--line); box-shadow: 0 12px 44px rgba(50,17,47,.08); backdrop-filter: blur(14px); }
.filter-shell button { position: relative; min-width: max-content; padding: 15px 22px; cursor: pointer; background: transparent; border: 0; font-size: .67rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.filter-shell button.active { color: #fff; background: var(--purple); }
.filter-shell button span { position: absolute; right: 20%; bottom: 7px; left: 20%; height: 2px; background: var(--orange); transform: scaleX(0); transition: transform .25s ease; }
.filter-shell button.active span { transform: scaleX(1); }
.client-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.5vw, 38px); }
.client-card { min-width: 0; background: #fff; border: 1px solid var(--line); transition: transform .35s ease, box-shadow .35s ease; }
.client-card:hover { transform: translateY(-7px); box-shadow: 0 24px 70px rgba(50,17,47,.12); }
.client-card__visual { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--purple-deep); }
.client-card__visual > img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s cubic-bezier(.2,.7,.2,1); }
.client-card:hover .client-card__visual > img { transform: scale(1.045); }
.client-card__line { position: absolute; right: 0; bottom: 0; left: 0; height: 4px; background: linear-gradient(90deg, var(--orange), var(--purple)); transform: scaleX(.2); transform-origin: left; transition: transform .4s ease; }
.client-card:hover .client-card__line { transform: scaleX(1); }
.client-placeholder { position: relative; display: grid; width: 100%; height: 100%; place-items: center; overflow: hidden; color: var(--orange-light); background: radial-gradient(circle at 70% 30%, #713269, transparent 28%), linear-gradient(135deg, #210b20, #51204d); }
.client-placeholder span { z-index: 2; font-family: var(--display); font-size: 7rem; }
.client-placeholder i { position: absolute; width: 70%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.client-placeholder i:last-child { width: 48%; }
.client-card__body { padding: 25px; }
.client-card__identity { display: flex; min-width: 0; align-items: center; gap: 16px; }
.client-card__identity > img, .client-monogram { display: grid; width: 54px; height: 54px; flex: 0 0 auto; place-items: center; object-fit: contain; padding: 7px; background: #fff; border: 1px solid var(--line); }
.client-monogram { color: var(--purple); font-family: var(--display); font-size: 1.6rem; }
.client-card h3 { margin: 0; overflow: hidden; font-family: var(--display); font-size: 1.8rem; font-weight: 400; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.client-card__identity p { margin: 7px 0 0; color: var(--muted); font-size: .62rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.client-card__footer { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.tag-row { display: flex; flex-wrap: wrap; gap: 5px; }
.tag-row span { padding: 6px 8px; color: var(--purple); background: #f4edf3; font-size: .54rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.view-project { display: flex; min-width: max-content; align-items: center; gap: 7px; color: var(--purple); font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.public-empty { display: grid; min-height: 430px; place-items: center; align-content: center; gap: 12px; color: var(--purple); border: 1px solid var(--line); background: linear-gradient(135deg, #fff, #faf4eb); text-align: center; }
.public-empty p { margin: 18px 0 0; font-family: var(--display); font-size: clamp(2rem, 4vw, 4rem); }
.public-empty > span { color: var(--muted); }
.empty-motion { position: relative; width: 90px; height: 90px; }
.empty-motion i { position: absolute; inset: 0; border: 1px solid var(--orange); border-radius: 50%; }
.empty-motion i:nth-child(2) { inset: 12px; border-color: var(--purple); }.empty-motion i:nth-child(3) { inset: 24px; border-style: dashed; animation: spin 8s linear infinite; }

.contact { position: relative; min-height: 76vh; overflow: hidden; color: #fff; background: linear-gradient(135deg, var(--purple-deep), var(--purple)); }
.contact h2 { position: relative; margin: 0; font-family: var(--display); font-size: clamp(3.4rem, 8vw, 9rem); font-weight: 400; letter-spacing: -.05em; line-height: .82; }
.contact h2 em { color: var(--orange-light); font-style: italic; }
.contact > p:not(.section-kicker) { position: relative; max-width: 560px; margin: 45px 0 35px; color: rgba(255,255,255,.66); font-size: 1.05rem; line-height: 1.8; }
.button--light { position: relative; color: var(--purple-deep); background: var(--warm-white); }
.contact-orbit { position: absolute; top: -35%; right: -14%; width: 67vw; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 50px rgba(255,255,255,.015), 0 0 0 100px rgba(255,255,255,.015); }
footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 34px clamp(24px, 6vw, 100px); color: rgba(255,255,255,.65); background: var(--purple-ink); font-size: .61rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.footer-brand { width: 108px; padding: 6px; background: #fff; }
footer p { margin: 0; } footer > span { justify-self: end; }
.preview-ribbon { position: fixed; z-index: 80; right: 20px; bottom: 20px; padding: 10px 14px; color: #fff; background: var(--purple); border: 1px solid rgba(255,255,255,.25); font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .75s ease var(--delay, 0ms), transform .75s cubic-bezier(.2,.75,.25,1) var(--delay, 0ms); }
.reveal.is-visible { opacity: 1; transform: none; }
@keyframes revealUp { to { opacity: 1; transform: none; } }
@keyframes wipeIn { to { clip-path: inset(0); } }
@keyframes orbitIn { from { opacity: 0; transform: scale(.72) rotate(-35deg); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1024px) {
  .hero-side { display: none; }
  .intro-grid, .section-heading { grid-template-columns: 1fr; }
  .intro-grid > p, .section-heading > p { max-width: 650px; }
  .service-grid, .client-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-card:last-child { grid-column: 1 / -1; min-height: 480px; }
  .featured-card { grid-template-columns: 1.2fr .8fr; }
}

@media (max-width: 720px) {
  .section { padding: 78px 18px; }
  .nav-shell { grid-template-columns: 1fr auto; padding: 16px 18px; }
  .brand { width: 110px; }
  .nav-links { display: none; }
  .nav-cta { padding: 11px 13px; font-size: .58rem; }
  .hero { min-height: 100svh; padding: 120px 18px 78px; }
  .hero h1 { font-size: clamp(3rem, 15.5vw, 5.2rem); line-height: .86; }
  .hero h1 span:last-child { margin-left: 0; }
  .hero-mark { width: 150px; margin-bottom: 30px; }
  .hero-actions { width: 100%; flex-direction: column; margin-top: 38px; }
  .button { width: 100%; }
  .intro h2, .section-heading h2 { font-size: clamp(2.7rem, 12vw, 4.4rem); }
  .service-grid, .client-grid { grid-template-columns: 1fr; }
  .service-card, .service-card:last-child { min-height: 510px; grid-column: auto; }
  .service-card h3 { margin-top: 80px; }
  .filter-shell { width: 100%; margin-bottom: 38px; }
  .filter-shell button { flex: 1; min-width: max-content; padding: 14px 17px; }
  .featured-card { grid-template-columns: 1fr; }
  .featured-card > div { min-height: 360px; }
  .featured-card aside { padding: 32px 24px; }
  .client-card__footer { align-items: flex-start; flex-direction: column; }
  .contact { min-height: 70svh; }
  footer { grid-template-columns: 1fr; gap: 18px; text-align: center; }
  .footer-brand, footer > span { justify-self: center; }
}

@media (max-width: 380px) {
  .nav-cta { display: none; }
  .hero h1 { font-size: 2.8rem; }
  .filter-shell { scroll-snap-type: x mandatory; }
  .filter-shell button { scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Local portfolio editor */
.editor-shell { min-height: 100vh; color: #291528; background: #f3eee8; }
.editor-sidebar { position: fixed; z-index: 20; inset: 0 auto 0 0; display: flex; width: 290px; flex-direction: column; padding: 26px 20px; color: #fff; background: #250923; }
.editor-brand { width: 126px; padding: 7px; background: #fff; }
.editor-brand img { display: block; width: 100%; }
.editor-heading { margin: 48px 6px 18px; }
.editor-heading span { color: #dba43c; font-size: .58rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.editor-heading h1 { margin: 8px 0 0; font-family: var(--display); font-size: 2.4rem; font-weight: 400; }
.editor-primary { padding: 14px 18px; color: #241121; border: 0; background: #f9ad32; font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.client-list { display: grid; max-height: 42vh; gap: 5px; margin-top: 18px; overflow: auto; }
.client-list > button { display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: center; padding: 13px 10px; color: rgba(255,255,255,.64); border: 1px solid transparent; background: transparent; text-align: left; cursor: pointer; }
.client-list > button:hover,.client-list > button.selected { color: #fff; border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.06); }
.client-list > button > span { color: #dba43c; font-family: var(--display); }
.client-list b,.client-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.client-list b { font-size: .76rem; }.client-list small { margin-top: 4px; font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.editor-side-actions { display: grid; gap: 2px; margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); }
.editor-side-actions a,.editor-side-actions button,.editor-side-actions label { padding: 9px 6px; color: rgba(255,255,255,.7); border: 0; background: none; font: inherit; font-size: .65rem; font-weight: 700; text-align: left; cursor: pointer; }
.editor-side-actions input { display: none; }
.editor-main { min-height: 100vh; margin-left: 290px; }
.editor-topbar { position: sticky; z-index: 10; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; padding: 15px clamp(22px,4vw,54px); border-bottom: 1px solid #ddd1d9; background: rgba(250,247,243,.92); backdrop-filter: blur(15px); }
.editor-topbar b,.editor-topbar span { display: block; }.editor-topbar b { font-size: .8rem; }.editor-topbar span { margin-top: 4px; color: #82727f; font-size: .62rem; }
.editor-topbar > div:last-child { display: flex; flex-wrap: wrap; gap: 7px; }.editor-topbar button { padding: 9px 11px; color: #5f2a58; border: 1px solid #d5c7d1; background: #fff; font-size: .6rem; font-weight: 750; cursor: pointer; }.editor-topbar button.danger { color: #9e2e3c; }
.editor-form { display: grid; gap: 22px; max-width: 1080px; margin: auto; padding: 42px clamp(20px,5vw,70px) 90px; }
.editor-form > section { padding: clamp(24px,4vw,48px); border: 1px solid #ded3da; background: #fffdf9; box-shadow: 0 16px 60px rgba(47,12,42,.035); }
.form-kicker { margin: 0 0 10px; color: #bd7c15; font-size: .6rem; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.editor-form h2 { margin: 0 0 32px; font-family: var(--display); font-size: clamp(2.2rem,4vw,3.6rem); font-weight: 400; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.editor-form label { display: grid; gap: 8px; margin-top: 18px; color: #55304f; font-size: .62rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.editor-form input,.editor-form textarea { width: 100%; padding: 14px 15px; color: #291528; border: 1px solid #d9ced6; outline: none; background: #fff; font: inherit; font-size: .85rem; font-weight: 500; letter-spacing: 0; text-transform: none; }.editor-form input:focus,.editor-form textarea:focus { border-color: #8c4d82; box-shadow: 0 0 0 3px rgba(104,38,95,.08); }
.check-row { display: flex; flex-wrap: wrap; gap: 10px; }.check-row label { position: relative; margin: 0; }.check-row input { position: absolute; opacity: 0; }.check-row span { display: block; padding: 13px 16px; border: 1px solid #d9ced6; cursor: pointer; }.check-row input:checked + span { color: #fff; border-color: #68265f; background: #68265f; }.switches { margin-top: 22px; }
.upload-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }.upload-box { min-height: 150px; place-content: center; place-items: center; padding: 24px; border: 1px dashed #a58e9f; background: #faf5ef; text-align: center; cursor: pointer; }.upload-box input { display: none; }.upload-box b { color: #5e2856; }.upload-box span { color: #8c7e89; font-size: .62rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.asset-preview,.media-strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 18px; }.asset-preview img,.media-strip img,.media-strip video { width: 100%; aspect-ratio: 16/10; object-fit: cover; border: 1px solid #e0d5db; background: #f4eee9; }.media-strip figure { margin: 0; }.media-strip figcaption { display: flex; gap: 6px; align-items: center; justify-content: space-between; overflow: hidden; padding: 8px; background: #f3ece8; font-size: .58rem; white-space: nowrap; }.media-strip figcaption button { border: 0; background: none; font-size: 1rem; cursor: pointer; }
.editor-danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-color: #e9c0c5 !important; }.editor-danger-zone h3 { margin: 0; }.editor-danger-zone p { margin: 6px 0 0; color: #857780; }.editor-danger-zone button { padding: 12px 16px; color: #a11e32; border: 1px solid #dba8b0; background: transparent; cursor: pointer; }
.editor-empty { display: grid; min-height: calc(100vh - 76px); place-content: center; justify-items: start; padding: 40px; }.editor-empty > span { color: #f0a72e; font-family: var(--display); font-size: 4rem; }.editor-empty h2 { max-width: 700px; margin: 10px 0; font-family: var(--display); font-size: clamp(3rem,7vw,7rem); font-weight: 400; line-height: .9; }.editor-empty p { color: #776874; }

/* Preview */
.preview-shell { min-height: 100vh; padding: 22px; background: #160a15; }.preview-shell > header { display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: auto; padding: 0 0 20px; }.preview-shell a { color: #fff; font-size: .7rem; font-weight: 750; text-decoration: none; }.preview-shell header div { display: flex; gap: 5px; }.preview-shell button { padding: 9px 12px; color: #b9a9b5; border: 1px solid #493043; background: transparent; }.preview-shell button.active { color: #1d0c1b; background: #f8ad35; }.preview-stage { height: calc(100vh - 85px); margin: auto; overflow: hidden; border: 1px solid #493043; background: #fff; transition: width .35s ease; }.preview-stage.desktop { width: 100%; }.preview-stage.tablet { width: min(820px,100%); }.preview-stage.mobile { width: min(390px,100%); }.preview-stage iframe { width: 100%; height: 100%; border: 0; }

/* Client detail */
.detail-loading,.detail-missing { display: grid; min-height: 100vh; place-content: center; justify-items: center; color: #fff; background: #290b27; }.detail-missing img { width: 160px; padding: 0; background: transparent; }.detail-missing h1 { font-family: var(--display); font-size: 4rem; font-weight: 400; }.detail-missing a { color: #f7af37; }
.detail-page { min-height: 100vh; color: #281326; background: #faf5ed; }.detail-page > nav { position: absolute; z-index: 5; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 24px clamp(20px,6vw,90px); }.detail-page > nav img { display: block; width: clamp(125px,11vw,175px); height: auto; padding: 0; background: transparent; filter: drop-shadow(0 8px 22px rgba(16,4,14,.22)); }.detail-page > nav > a:last-child { color: #fff; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.detail-page > header { position: relative; display: grid; min-height: 82vh; align-items: end; overflow: hidden; padding: 150px clamp(20px,7vw,110px) 70px; color: #fff; background: linear-gradient(135deg,#270d25,#64235b); }.detail-page > header > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.4) saturate(.7); }.detail-page > header > div { position: relative; }.detail-page header p,.detail-media > div p,.detail-intro > div > p { font-size: .62rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }.detail-page header h1 { max-width: 1100px; margin: 18px 0 0; font-family: var(--display); font-size: clamp(4rem,12vw,11rem); font-weight: 400; letter-spacing: -.05em; line-height: .78; }
.detail-intro { display: grid; grid-template-columns: 1.5fr .5fr; gap: 70px; padding: 100px clamp(20px,7vw,110px); }.detail-intro h2 { max-width: 900px; margin: 20px 0 0; font-family: var(--display); font-size: clamp(2.5rem,5vw,5.4rem); font-weight: 400; line-height: 1; }.detail-intro aside img { max-width: 160px; max-height: 90px; object-fit: contain; }.detail-intro aside > div { display: flex; flex-wrap: wrap; gap: 6px; margin: 25px 0; }.detail-intro aside span { padding: 7px 9px; color: #65265d; background: #ece1e8; font-size: .56rem; font-weight: 750; text-transform: uppercase; }.detail-intro aside a { color: #68265f; font-size: .7rem; font-weight: 850; text-transform: uppercase; }
.detail-media { padding: 90px clamp(20px,7vw,110px); background: #fff; }.detail-media:nth-of-type(even) { background: #2a0c27; color: #fff; }.detail-media h2 { margin: 12px 0 45px; font-family: var(--display); font-size: clamp(3rem,6vw,6rem); font-weight: 400; }.detail-media-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),420px)); align-items: start; justify-content: center; gap: 22px; }.detail-media-grid button { position: relative; display: flex; width: 100%; min-height: 0; align-items: center; justify-content: center; overflow: hidden; padding: 0; border: 1px solid rgba(81,37,75,.13); border-radius: 14px; background: #f7f0e7; box-shadow: 0 18px 50px rgba(44,15,40,.08); cursor: zoom-in; }.detail-media:nth-of-type(even) .detail-media-grid button { border-color: rgba(255,255,255,.12); background: #160a15; }.detail-media-grid img,.detail-media-grid video { display: block; width: auto; max-width: 100%; height: auto; max-height: min(640px,68vh); aspect-ratio: auto; object-fit: contain; transition: transform .6s ease; }.detail-media-grid button:hover img,.detail-media-grid button:hover video { transform: scale(1.018); }.detail-media-grid span { position: absolute; right: 14px; bottom: 14px; padding: 8px 10px; color: #271024; background: #f7ad35; font-size: .58rem; font-weight: 800; text-transform: uppercase; }.detail-page > footer { display: flex; justify-content: space-between; padding: 32px clamp(20px,7vw,110px); color: #fff; background: #1c091a; }.detail-page footer a { color: #fff; }
.lightbox { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 5vw; background: rgba(17,4,15,.94); }.lightbox > button { position: absolute; top: 20px; right: 28px; color: #fff; border: 0; background: none; font-size: 2.5rem; cursor: pointer; }.lightbox img,.lightbox video { max-width: 94vw; max-height: 88vh; object-fit: contain; }

@media (max-width: 760px) {
  .editor-sidebar { position: static; width: 100%; min-height: auto; }.editor-main { margin-left: 0; }.client-list { max-height: 240px; }.editor-side-actions { margin-top: 24px; }.editor-topbar { align-items: flex-start; flex-direction: column; }.form-grid,.upload-grid,.asset-preview,.media-strip { grid-template-columns: 1fr; }.editor-form { padding: 24px 14px 60px; }.editor-form > section { padding: 24px 18px; }.editor-danger-zone { align-items: flex-start; flex-direction: column; }
  .detail-page > header { min-height: 72svh; }.detail-page > nav img { width: 132px; }.detail-intro { grid-template-columns: 1fr; gap: 40px; padding-top: 70px; padding-bottom: 70px; }.detail-media-grid { grid-template-columns: minmax(0,1fr); }.detail-media-grid img,.detail-media-grid video { max-height: 72vh; }.detail-page > footer { gap: 15px; flex-direction: column; }
  .preview-shell { padding: 12px; }.preview-shell > header { gap: 10px; flex-wrap: wrap; }.preview-shell header div { order: 3; width: 100%; }.preview-shell header button { flex: 1; }
}

/* Fekra Portfolio Maintenance v5 — performance-first creative motion. */
html { scroll-behavior: smooth; }
body { overflow-x: clip; text-rendering: optimizeLegibility; }
.portfolio-v3 .section,
.detail-gallery-v5 { content-visibility: auto; contain-intrinsic-size: 900px; }
.work-v3,.services-v3,.contact-v3 { contain: layout paint style; }
.client-card-v3,.service-panel,.detail-gallery-v5__grid > button { contain: layout paint; }
.client-card-v3__visual > img,.detail-gallery-v5__grid img { transform: translateZ(0); backface-visibility: hidden; }

/* Keep the same rich glow, but animate composited properties only. */
.hero-v3::after { will-change: transform,opacity; }
.hero-cockpit {
  transform: perspective(1000px) rotateX(var(--cockpit-rx,0deg)) rotateY(var(--cockpit-ry,0deg)) translateZ(0);
  transition: transform .34s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
  contain: layout paint style;
}
.cockpit-glow {
  border-radius: 50%;
  filter: blur(30px);
  animation: v5GlowOrbit 14s linear infinite;
  will-change: transform,opacity;
}
.cockpit-core {
  border-radius: 48% 52% 46% 54% / 52% 46% 54% 48%;
  animation: v5CorePulse 4.8s ease-in-out infinite;
  will-change: transform;
}
.cockpit-card { backdrop-filter: none; -webkit-backdrop-filter: none; will-change: transform; contain: paint; }
.cockpit-orbit,.cockpit-card,.marquee__track,.contact-v3__shape { will-change: transform; }

.social-signal {
  position: absolute;
  z-index: 7;
  display: grid;
  width: clamp(28px,3.2vw,46px);
  aspect-ratio: 1;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 13px;
  background: rgba(25,7,23,.88);
  box-shadow: 0 10px 28px rgba(8,1,8,.28),0 0 24px rgba(255,79,167,.22);
  animation: v5SignalFloat 4.6s ease-in-out infinite;
  will-change: transform;
}
.social-signal svg { width: 48%; fill: currentColor; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.social-signal--play { top: 1%; left: 49%; color: var(--v3-ink); background: var(--v3-acid); transform: rotate(8deg); }
.social-signal--heart { top: 45%; right: -1%; color: #fff; background: var(--v3-pink); animation-delay: -.8s; }
.social-signal--comment { bottom: 19%; left: 0; color: var(--v3-ink); background: var(--v3-yellow); animation-delay: -1.6s; }
.social-signal--share { top: 18%; left: 10%; color: #fff; background: var(--v3-violet); animation-delay: -2.3s; }
.social-signal--cursor { right: 18%; bottom: 4%; color: var(--v3-ink); background: var(--v3-blue); animation-delay: -3.1s; }

.contact-v3__detail > i svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.contact-v3__detail:hover > i { transform: translateY(-2px) scale(1.06); }
.social-constellation { display: block; border: 2px solid rgba(22,9,18,.82); border-radius: 50%; animation: v5Constellation 18s linear infinite; }
.social-constellation > span { position: absolute; z-index: 2; display: grid; width: 21%; aspect-ratio: 1; place-items: center; color: #fff; border: 2px solid var(--v3-ink); border-radius: 28%; background: var(--v3-violet); box-shadow: 0 12px 26px rgba(22,9,18,.18); }
.social-constellation > span:nth-child(1) { top: 5%; left: 42%; color: var(--v3-ink); background: var(--v3-acid); }
.social-constellation > span:nth-child(2) { top: 48%; right: -3%; background: var(--v3-pink); }
.social-constellation > span:nth-child(3) { bottom: 2%; left: 13%; color: var(--v3-ink); background: var(--v3-yellow); }
.social-constellation svg { width: 48%; fill: currentColor; stroke: currentColor; stroke-width: 1.5; }
.social-constellation > i { position: absolute; inset: 18%; border: 1px dashed rgba(22,9,18,.5); border-radius: 50%; }
.social-constellation > i:last-child { inset: 35%; border-style: solid; background: rgba(255,255,255,.18); }

/* Pausing invisible loops prevents scroll jank without removing the visual language. */
.motion-paused *,
.hero-v3:not(.motion-active) .cockpit-glow,
.hero-v3:not(.motion-active) .cockpit-orbit,
.hero-v3:not(.motion-active) .cockpit-core,
.hero-v3:not(.motion-active) .cockpit-card,
.hero-v3:not(.motion-active) .social-signal,
.marquee:not(.motion-active) .marquee__track,
.services-v3:not(.motion-active) *,
.contact-v3:not(.motion-active) .contact-v3__shape { animation-play-state: paused !important; }

.portfolio-skeleton { grid-column: 1/-1; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
.portfolio-skeleton i { display: block; aspect-ratio: 1; border-radius: 18px; background: linear-gradient(105deg,#2a1027 20%,#43203f 38%,#2a1027 56%); background-size: 220% 100%; animation: v5Skeleton 1.15s linear infinite; }
.detail-loading--skeleton { gap: 22px; }
.detail-loading--skeleton > div { display: grid; width: min(520px,78vw); gap: 13px; }
.detail-loading--skeleton i { display: block; height: 16px; border-radius: 999px; background: linear-gradient(105deg,#3a1736 20%,#62305b 38%,#3a1736 56%); background-size: 220% 100%; animation: v5Skeleton 1.15s linear infinite; }
.detail-loading--skeleton i:nth-child(1) { width: 28%; }.detail-loading--skeleton i:nth-child(2) { width: 92%; height: 64px; }.detail-loading--skeleton i:nth-child(3) { width: 74%; }.detail-loading--skeleton i:nth-child(4) { width: 58%; }
.detail-loading--skeleton > span { color: rgba(255,255,255,.58); font-size: .64rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }

.detail-gallery-v5__grid { align-content: start; }
.detail-gallery-v5__grid > button { content-visibility: auto; contain-intrinsic-size: 280px; transform: translateZ(0); }
.detail-gallery-v5__grid[data-kind="videos"] > button { padding: 0; background: #170714; }
.video-card-v5 > img { width: 100%; height: 100%; object-fit: cover; }
.video-poster-fallback { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; overflow: hidden; color: rgba(255,255,255,.82); background: radial-gradient(circle at 72% 24%,rgba(255,189,33,.34),transparent 24%),radial-gradient(circle at 18% 84%,rgba(139,44,255,.42),transparent 28%),linear-gradient(135deg,#1a0717,#5f2057); }
.video-poster-fallback::before { content: ""; position: absolute; inset: -25%; opacity: .25; background-image: linear-gradient(rgba(255,255,255,.24) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.24) 1px,transparent 1px); background-size: 38px 38px; transform: rotate(-8deg); }
.video-poster-fallback i { position: relative; width: 54px; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; box-shadow: 0 0 28px rgba(255,63,155,.28); }
.video-poster-fallback b,.video-poster-fallback small { position: relative; z-index: 1; }
.video-poster-fallback b { font-size: .72rem; letter-spacing: .28em; }.video-poster-fallback small { color: rgba(255,255,255,.55); font-size: .5rem; letter-spacing: .15em; text-transform: uppercase; }
.video-play-v5 { z-index: 3; }
.video-play-v5 svg { width: 15px; fill: currentColor; }

.editor-video-fallback { display: grid; min-height: 180px; place-content: center; justify-items: center; gap: 9px; color: #fff; background: radial-gradient(circle at 70% 20%,rgba(255,189,33,.26),transparent 24%),linear-gradient(135deg,#170714,#54204e); }
.editor-video-fallback b { display: grid; width: 48px; aspect-ratio: 1; place-items: center; border-radius: 50%; background: #d9ff37; color: #180714; }
.editor-video-fallback span { color: rgba(255,255,255,.64); font-size: .66rem; font-weight: 800; text-transform: uppercase; }
.editor-video-poster { object-fit: cover !important; }

@keyframes v5GlowOrbit { 0% { transform: rotate(0deg) scale(.98); opacity:.66; } 50% { transform: rotate(180deg) scale(1.08); opacity:.86; } 100% { transform: rotate(360deg) scale(.98); opacity:.66; } }
@keyframes v5CorePulse { 0%,100% { transform: translateZ(0) scale(1) rotate(-.5deg); } 50% { transform: translateZ(0) scale(1.035) rotate(.5deg); } }
@keyframes v5SignalFloat { 0%,100% { translate:0 0; rotate:-2deg; } 50% { translate:0 -10px; rotate:3deg; } }
@keyframes v5Constellation { to { transform: rotate(360deg); } }
@keyframes v5Skeleton { to { background-position-x:-220%; } }

@media (max-width: 900px) {
  .portfolio-skeleton { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .cockpit-glow { filter: blur(24px); }
}
@media (max-width: 760px) {
  html { scroll-behavior: auto; }
  .portfolio-v3 .section,.detail-gallery-v5 { contain-intrinsic-size: 680px; }
  .social-signal { width: 30px; border-radius: 9px; }
  .social-signal--share { left: 7%; }.social-signal--cursor { right: 13%; }
  .cockpit-glow { filter: blur(18px); opacity: .68; }
  .contact-v3__detail { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .social-signal,.social-constellation,.portfolio-skeleton i,.detail-loading--skeleton i { animation: none !important; }
  .hero-cockpit { transition: none; }
}

/* Simplified public portfolio */
.portfolio-v2 .nav-shell { grid-template-columns: 1fr auto; padding: 24px clamp(24px, 5vw, 72px); }
.portfolio-v2 .brand { width: clamp(150px, 15vw, 220px); padding: 0; background: transparent; }
.portfolio-v2 .brand img { width: 100%; height: auto; }
.portfolio-v2 .hero { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(380px, .78fr); min-height: max(760px, 100svh); align-items: center; gap: clamp(24px, 4vw, 72px); padding: 150px clamp(24px, 6vw, 100px) 100px; background: radial-gradient(circle at 80% 20%, rgba(255,164,27,.27), transparent 24%), radial-gradient(circle at 76% 82%, rgba(237,78,177,.23), transparent 28%), radial-gradient(circle at 12% 90%, rgba(171,83,151,.26), transparent 28%), linear-gradient(125deg, #160714 0%, #391035 42%, #6b225d 70%, #34102f 100%); background-size: 120% 120%; animation: heroGradient 12s ease-in-out infinite alternate; isolation: isolate; }
.portfolio-v2 .hero::before { display: none; }
.portfolio-v2 .hero-copy { width: min(940px, 100%); }
.portfolio-v2 .eyebrow { margin-bottom: 34px; color: var(--orange-light); }
.portfolio-v2 .hero h1 { display: grid; max-width: 940px; gap: 4px; font-size: clamp(4.3rem, 6.7vw, 7.7rem); line-height: .87; }
.portfolio-v2 .hero h1 span:last-child { margin-left: 0; }
.portfolio-v2 .hero-summary { max-width: 590px; margin: 34px 0 30px; color: rgba(255,255,255,.68); font-size: clamp(.95rem, 1.25vw, 1.12rem); line-height: 1.75; opacity: 0; animation: revealUp .8s ease .92s forwards; }
.portfolio-v2 .hero .button { width: fit-content; opacity: 0; animation: revealUp .8s ease 1.05s forwards; }
.portfolio-v2 .hero .button--primary { position: relative; overflow: hidden; background: linear-gradient(110deg, #ff9e18, #ffd369 48%, #ffad23); background-size: 200% 100%; box-shadow: 0 14px 44px rgba(255,166,35,.24); animation: revealUp .8s ease 1.05s forwards, buttonGlow 3.2s ease-in-out 1.8s infinite; }
.portfolio-v2 .hero .button--primary::after { content: ""; position: absolute; inset: -20% auto -20% -45%; width: 32%; background: rgba(255,255,255,.55); filter: blur(8px); transform: skewX(-18deg); animation: buttonShine 3.8s ease-in-out 2s infinite; }
.portfolio-v2 .hero-aurora { position: absolute; z-index: -1; border-radius: 50%; filter: blur(10px); opacity: .7; pointer-events: none; }
.portfolio-v2 .hero-aurora--one { top: 15%; right: 18%; width: 260px; aspect-ratio: 1; background: radial-gradient(circle, rgba(255,190,75,.28), transparent 68%); animation: auroraFloat 7s ease-in-out infinite; }
.portfolio-v2 .hero-aurora--two { right: -5%; bottom: 3%; width: 420px; aspect-ratio: 1; background: radial-gradient(circle, rgba(255,71,172,.25), transparent 68%); animation: auroraFloat 9s ease-in-out -3s infinite reverse; }
.portfolio-v2 .hero-studio { position: relative; z-index: 3; width: min(38vw, 560px); aspect-ratio: 1; justify-self: end; opacity: 0; animation: studioReveal 1s cubic-bezier(.2,.8,.2,1) .45s forwards; }
.portfolio-v2 .hero-studio::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: conic-gradient(from 90deg, rgba(255,165,30,.2), rgba(255,99,190,.15), rgba(118,62,224,.18), rgba(255,165,30,.2)); filter: blur(24px); animation: studioSpin 14s linear infinite; }
.studio-orbit { position: absolute; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; }
.studio-orbit--outer { inset: 5%; animation: studioSpin 20s linear infinite; }
.studio-orbit--outer::before, .studio-orbit--outer::after { content: ""; position: absolute; border-radius: 50%; background: var(--orange-light); box-shadow: 0 0 30px rgba(255,198,94,.9); }
.studio-orbit--outer::before { top: 7%; left: 22%; width: 11px; height: 11px; }
.studio-orbit--outer::after { right: 3%; bottom: 27%; width: 7px; height: 7px; }
.studio-orbit--outer i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.9); box-shadow: 0 0 14px #fff; }
.studio-orbit--outer i:nth-child(1) { top: 50%; left: -3px; }.studio-orbit--outer i:nth-child(2) { top: 14%; right: 17%; }.studio-orbit--outer i:nth-child(3) { right: 25%; bottom: 8%; }
.studio-orbit--inner { inset: 21%; border-style: dashed; border-color: rgba(255,198,94,.33); animation: studioSpin 14s linear infinite reverse; }
.studio-core { position: absolute; inset: 31%; display: grid; place-content: center; justify-items: center; overflow: hidden; color: #fff; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; background: linear-gradient(145deg, rgba(255,180,52,.92), rgba(255,89,184,.82) 46%, rgba(94,31,120,.96)); box-shadow: 0 0 0 14px rgba(255,255,255,.035), 0 26px 80px rgba(12,2,19,.45), inset 0 1px rgba(255,255,255,.5); backdrop-filter: blur(12px); animation: corePulse 4s ease-in-out infinite; }
.studio-core::after { content: ""; position: absolute; inset: -40%; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); transform: translateX(-70%) rotate(12deg); animation: coreShine 4.2s ease-in-out infinite; }
.studio-core__burst { position: relative; z-index: 1; display: grid; width: clamp(74px, 7vw, 108px); aspect-ratio: 1; place-items: center; color: #fff7db; border: 1px solid rgba(255,255,255,.5); border-radius: 30% 70% 62% 38% / 40% 34% 66% 60%; background: conic-gradient(from 25deg, rgba(255,212,90,.42), rgba(255,255,255,.06), rgba(255,87,181,.36), rgba(255,212,90,.42)); box-shadow: inset 0 0 28px rgba(255,255,255,.2), 0 0 34px rgba(255,214,93,.35); animation: burstMorph 7s ease-in-out infinite, burstTurn 16s linear infinite; }
.studio-core__burst::before, .studio-core__burst::after { content: ""; position: absolute; inset: -14%; border: 1px dashed rgba(255,246,206,.48); border-radius: 50%; animation: studioSpin 10s linear infinite; }
.studio-core__burst::after { inset: 14%; border-style: solid; border-color: rgba(255,255,255,.32); animation-direction: reverse; animation-duration: 7s; }
.studio-core__burst svg { position: relative; z-index: 2; width: 55%; height: 55%; filter: drop-shadow(0 8px 14px rgba(81,10,72,.45)); animation: sparkPulse 2.8s ease-in-out infinite; }
.studio-core__burst i { position: absolute; z-index: 3; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px #fff7b0; }
.studio-core__burst i:nth-of-type(1) { top: -10%; left: 48%; }.studio-core__burst i:nth-of-type(2) { right: -7%; bottom: 20%; width: 5px; height: 5px; }.studio-core__burst i:nth-of-type(3) { bottom: -8%; left: 18%; width: 4px; height: 4px; }
.studio-core small { position: relative; z-index: 1; margin-top: 15px; font-size: .5rem; font-weight: 850; letter-spacing: .2em; text-transform: uppercase; }
.studio-card { position: absolute; display: flex; min-width: 145px; align-items: center; gap: 12px; padding: 14px 17px; color: #fff; border: 1px solid rgba(255,255,255,.28); border-radius: 14px; box-shadow: 0 18px 45px rgba(14,2,16,.3); backdrop-filter: blur(14px); font-size: .62rem; font-weight: 820; letter-spacing: .1em; line-height: 1.35; text-transform: uppercase; }
.studio-card svg { flex: 0 0 auto; }
.studio-card--social { top: 1%; left: 3%; background: linear-gradient(135deg, rgba(255,154,25,.94), rgba(255,196,79,.76)); animation: cardFloatA 5.5s ease-in-out infinite; }
.studio-card--web { top: 15%; right: -2%; background: linear-gradient(135deg, rgba(142,57,173,.92), rgba(255,78,173,.74)); animation: cardFloatB 6.2s ease-in-out -1.2s infinite; }
.studio-card--video { right: 2%; bottom: 11%; background: linear-gradient(135deg, rgba(245,91,71,.88), rgba(255,164,33,.8)); animation: cardFloatA 6s ease-in-out -.8s infinite reverse; }
.studio-card--design { bottom: 4%; left: -1%; background: linear-gradient(135deg, rgba(88,47,168,.92), rgba(225,76,188,.74)); animation: cardFloatB 5.8s ease-in-out -2s infinite reverse; }
.studio-spark { position: absolute; color: var(--orange-light); text-shadow: 0 0 18px rgba(255,198,94,.8); animation: sparkPulse 2.8s ease-in-out infinite; }
.studio-spark--one { top: 4%; left: 49%; font-size: 1.25rem; }.studio-spark--two { top: 48%; right: -1%; font-size: .75rem; animation-delay: -1s; }.studio-spark--three { bottom: 20%; left: 2%; font-size: .95rem; animation-delay: -1.8s; }
.portfolio-v2 .simple-heading { max-width: 850px; margin-bottom: clamp(45px, 6vw, 76px); }
.portfolio-v2 .simple-heading h2 { margin: 0; color: var(--purple-deep); font-family: var(--display); font-size: clamp(3.2rem, 5.6vw, 6.2rem); font-weight: 400; letter-spacing: -.045em; line-height: .94; }
.portfolio-v2 .services { color: var(--purple-deep); background: var(--ivory); }
.portfolio-v2 .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; border: 0; }
.portfolio-v2 .service-card { min-height: 500px; padding: clamp(30px, 3vw, 48px); color: var(--purple-deep); border: 1px solid var(--line); background: var(--warm-white); box-shadow: 0 18px 60px rgba(50,17,47,.035); transition: transform .45s cubic-bezier(.2,.75,.2,1), background .4s ease, color .4s ease, box-shadow .45s ease; }
.portfolio-v2 .service-card:nth-child(even) { background: linear-gradient(145deg, #fffdf9 55%, #fff2d8); }
.portfolio-v2 .service-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, var(--orange), var(--orange-light), transparent 88%); transform: scaleX(.22); transform-origin: left; transition: transform .45s ease; }
.portfolio-v2 .service-card:hover { color: var(--purple-ink); border-color: #f3a11b; background: linear-gradient(135deg, #ff9f12 0%, #ffc54f 58%, #ffe08b 100%); box-shadow: 0 34px 90px rgba(245,166,35,.34); transform: translateY(-10px) rotate(-.25deg) scale(1.008); }
.portfolio-v2 .service-card:hover::before { transform: scaleX(1); }
.portfolio-v2 .service-card__top { color: var(--orange); }
.portfolio-v2 .service-card:hover .service-card__top { color: var(--purple-deep); }
.portfolio-v2 .service-card__top svg { transition: transform .45s cubic-bezier(.2,.75,.2,1); }
.portfolio-v2 .service-card:hover .service-card__top svg { transform: translateY(-4px) rotate(-6deg) scale(1.12); }
.portfolio-v2 .service-card h3 { max-width: 520px; margin: 58px 0 18px; font-size: clamp(2.35rem, 3.2vw, 4rem); line-height: .96; }
.portfolio-v2 .service-card > p { max-width: 360px; margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.7; }
.portfolio-v2 .service-card:hover > p { color: rgba(37,9,35,.72); }
.portfolio-v2 .service-card ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 26px; max-width: 590px; margin-top: 38px; color: var(--purple); font-size: clamp(.76rem, .78vw, .88rem); line-height: 1.42; }
.portfolio-v2 .service-card:hover ul { color: var(--purple-deep); }
.portfolio-v2 .service-card li { position: relative; padding-left: 23px; }
.portfolio-v2 .service-card li::before { content: ""; position: absolute; top: .43em; left: 0; width: 10px; height: 10px; margin: 0; border-radius: 50%; background: linear-gradient(135deg, var(--orange), #ffd264); box-shadow: 0 0 0 5px rgba(245,166,35,.14), 0 4px 12px rgba(245,166,35,.22); transition: transform .3s ease, box-shadow .3s ease; }
.portfolio-v2 .service-card:hover li::before { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(84,25,79,.1), 0 5px 14px rgba(84,25,79,.18); }
.portfolio-v2 .work { background: var(--warm-white); }
.portfolio-v2 .filter-shell { position: static; margin-bottom: 44px; box-shadow: none; }
.portfolio-v2 .public-empty { min-height: 300px; padding: 40px 20px; }
.portfolio-v2 .public-empty p { margin: 0; font-size: clamp(2rem, 3.6vw, 3.6rem); }
.portfolio-v2 .contact { display: grid; min-height: 580px; align-items: center; background: linear-gradient(135deg, #260c24, #5f2259); }
.portfolio-v2 .contact-copy { position: relative; width: min(1050px, 100%); }
.portfolio-v2 .contact h2 { max-width: 950px; font-size: clamp(3.8rem, 7vw, 7.5rem); line-height: .9; }
.portfolio-v2 .contact-email { display: flex; width: fit-content; max-width: 100%; align-items: center; gap: 14px; margin-top: 54px; padding-bottom: 10px; color: var(--orange-light); border-bottom: 1px solid rgba(255,198,94,.6); font-size: clamp(1rem, 2vw, 1.8rem); overflow-wrap: anywhere; }
.portfolio-v2 footer { display: block; padding: 0; background: #160714; text-transform: none; }
.portfolio-v2 .footer-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 34px clamp(24px, 6vw, 100px); }
.portfolio-v2 .footer-brand { width: 150px; padding: 0; background: transparent; }
.portfolio-v2 .footer-main > a:nth-child(2) { color: rgba(255,255,255,.78); }
.portfolio-v2 .footer-main > span { justify-self: end; }
.portfolio-v2 .copyright { margin: 0; padding: 20px 24px; color: rgba(255,255,255,.52); border-top: 1px solid rgba(255,166,30,.2); background: #160714; font-size: .62rem; letter-spacing: .16em; text-align: center; text-transform: uppercase; }

@media (max-width: 1024px) {
  .portfolio-v2 .hero { grid-template-columns: minmax(0, 1.2fr) minmax(310px, .8fr); gap: 10px; padding-inline: 46px; }
  .portfolio-v2 .hero h1 { font-size: clamp(3.8rem, 7.4vw, 6rem); }
  .portfolio-v2 .hero-studio { width: min(39vw, 450px); }
  .studio-card { min-width: 122px; padding: 11px 13px; font-size: .53rem; }
  .portfolio-v2 .service-card:last-child { grid-column: auto; min-height: 500px; }
}

@media (max-width: 720px) {
  .portfolio-v2 .nav-shell { grid-template-columns: 1fr; padding: 20px; }
  .portfolio-v2 .brand { width: 150px; }
  .portfolio-v2 .nav-links { display: none; }
  .portfolio-v2 .hero { display: flex; min-height: 100svh; flex-direction: column; align-items: stretch; justify-content: center; gap: 34px; padding: 122px 20px 82px; }
  .portfolio-v2 .hero-copy { z-index: 5; }
  .portfolio-v2 .hero h1 { gap: 6px; max-width: 100%; font-size: clamp(3.15rem, 14.2vw, 5.1rem); line-height: .9; }
  .portfolio-v2 .hero h1 span { display: block; }
  .portfolio-v2 .hero h1 em { display: block; }
  .portfolio-v2 .hero-summary { max-width: 480px; margin: 28px 0 26px; font-size: .92rem; }
  .portfolio-v2 .hero-studio { width: min(88vw, 390px); margin: -15px auto 0; flex: 0 0 auto; }
  .studio-card { min-width: 118px; padding: 10px 12px; border-radius: 11px; font-size: .5rem; }
  .studio-card svg { width: 20px; }
  .studio-core small { font-size: .42rem; }
  .portfolio-v2 .scroll-cue { display: none; }
  .portfolio-v2 .simple-heading { margin-bottom: 38px; }
  .portfolio-v2 .simple-heading h2 { font-size: clamp(2.65rem, 12vw, 4rem); line-height: .96; }
  .portfolio-v2 .service-grid { grid-template-columns: 1fr; gap: 12px; }
  .portfolio-v2 .service-card, .portfolio-v2 .service-card:last-child { grid-column: auto; min-height: 470px; padding: 28px 24px; }
  .portfolio-v2 .service-card h3 { margin-top: 52px; font-size: 2.45rem; }
  .portfolio-v2 .service-card ul { grid-template-columns: 1fr; gap: 14px; margin-top: 30px; font-size: .79rem; }
  .portfolio-v2 .filter-shell { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; padding: 5px; overflow: visible; }
  .portfolio-v2 .filter-shell button { min-width: 0; padding: 14px 9px; font-size: .58rem; white-space: normal; }
  .portfolio-v2 .filter-shell button:last-child { grid-column: 1 / -1; }
  .portfolio-v2 .public-empty { min-height: 250px; }
  .portfolio-v2 .contact { min-height: 520px; }
  .portfolio-v2 .contact h2 { font-size: clamp(3.1rem, 14vw, 5rem); line-height: .92; }
  .portfolio-v2 .contact-email { gap: 9px; margin-top: 38px; font-size: clamp(.95rem, 4.7vw, 1.3rem); }
  .portfolio-v2 .footer-main { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .portfolio-v2 .footer-brand, .portfolio-v2 .footer-main > span { justify-self: center; }
}

@keyframes heroGradient { 0% { background-position: 0% 30%; } 100% { background-position: 100% 70%; } }
@keyframes auroraFloat { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-28px,24px,0) scale(1.15); } }
@keyframes studioReveal { from { opacity: 0; transform: translateY(35px) scale(.92); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes studioSpin { to { transform: rotate(360deg); } }
@keyframes burstMorph { 0%,100% { border-radius: 30% 70% 62% 38% / 40% 34% 66% 60%; } 50% { border-radius: 66% 34% 38% 62% / 58% 68% 32% 42%; } }
@keyframes burstTurn { 0% { rotate: 0deg; } 100% { rotate: 360deg; } }
@keyframes corePulse { 0%,100% { transform: scale(1); box-shadow: 0 0 0 14px rgba(255,255,255,.035), 0 26px 80px rgba(12,2,19,.45); } 50% { transform: scale(1.045); box-shadow: 0 0 0 22px rgba(255,180,64,.035), 0 30px 95px rgba(255,91,187,.24); } }
@keyframes coreShine { 0%,45% { transform: translateX(-70%) rotate(12deg); } 70%,100% { transform: translateX(70%) rotate(12deg); } }
@keyframes cardFloatA { 0%,100% { transform: translate3d(0,0,0) rotate(-1deg); } 50% { transform: translate3d(0,-15px,0) rotate(1.5deg); } }
@keyframes cardFloatB { 0%,100% { transform: translate3d(0,0,0) rotate(1deg); } 50% { transform: translate3d(8px,-12px,0) rotate(-1.5deg); } }
@keyframes sparkPulse { 0%,100% { opacity: .3; transform: scale(.7) rotate(0); } 50% { opacity: 1; transform: scale(1.25) rotate(90deg); } }
@keyframes buttonGlow { 0%,100% { background-position: 0 0; box-shadow: 0 14px 44px rgba(255,166,35,.24); } 50% { background-position: 100% 0; box-shadow: 0 18px 55px rgba(255,174,45,.42); } }
@keyframes buttonShine { 0%,55% { left: -45%; } 85%,100% { left: 120%; } }

/* Fekra creative portfolio — kinetic direction */
.portfolio-v3 {
  --v3-ink: #160912;
  --v3-purple: #5f225b;
  --v3-violet: #8f2d8b;
  --v3-orange: #ff7a00;
  --v3-yellow: #ffc83d;
  --v3-acid: #d8ff3e;
  --v3-pink: #ff5b9c;
  --v3-blue: #67c9ff;
  color: var(--v3-ink);
  background: #f7f2e9;
}

.nav-v3 { position: absolute; z-index: 40; inset: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; min-height: 96px; padding: 18px clamp(22px, 4.5vw, 74px); color: #fff; border-bottom: 1px solid rgba(255,255,255,.14); }
.brand-v3 { width: clamp(145px, 13vw, 205px); }
.brand-v3 img { width: 100%; height: auto; filter: saturate(1.08) brightness(1.15); }
.nav-v3__links { display: flex; align-items: center; justify-content: center; gap: clamp(22px, 3.2vw, 52px); font-size: .66rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.nav-v3__links a { position: relative; padding: 14px 0; }
.nav-v3__links a::after { content: ""; position: absolute; right: 0; bottom: 7px; left: 0; height: 2px; background: var(--v3-acid); transform: scaleX(0); transform-origin: right; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.nav-v3__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-v3__cta { display: flex; align-items: center; justify-self: end; gap: 9px; padding: 14px 18px; color: var(--v3-ink); border-radius: 999px; background: var(--v3-acid); font-size: .65rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; transition: transform .3s ease, box-shadow .3s ease; }
.nav-v3__cta:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 12px 30px rgba(216,255,62,.25); }

.hero-v3 { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(430px, .92fr); min-height: max(820px, 100svh); align-items: center; gap: clamp(30px, 3.5vw, 68px); overflow: hidden; padding: 150px clamp(22px, 5.2vw, 86px) 90px; color: #fff; background: radial-gradient(circle at 82% 20%, rgba(255,105,52,.48), transparent 24%), radial-gradient(circle at 68% 87%, rgba(246,48,156,.36), transparent 28%), linear-gradient(118deg, #150812 0%, #30102d 36%, #6c245f 72%, #32102d 100%); isolation: isolate; }
.hero-v3::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .11; background-image: linear-gradient(rgba(255,255,255,.7) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.7) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, transparent 3%, #000 20%, #000 85%, transparent); }
.hero-v3::after { content: ""; position: absolute; z-index: -1; right: 30%; bottom: -120px; width: 540px; height: 220px; border-radius: 50%; background: rgba(255,92,166,.22); filter: blur(80px); animation: v3Glow 7s ease-in-out infinite; }
.hero-v3__noise { position: absolute; z-index: 1; inset: 0; opacity: .065; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.hero-v3__copy { position: relative; z-index: 5; min-width: 0; }
.hero-v3__kicker { display: flex; align-items: center; gap: 11px; margin: 0 0 36px; color: rgba(255,255,255,.72); font-size: .66rem; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; }
.hero-v3__kicker i { width: 30px; height: 3px; background: linear-gradient(90deg, var(--v3-acid), var(--v3-yellow)); }
.hero-v3__kicker span { margin-left: 6px; padding: 6px 9px; color: var(--v3-ink); border-radius: 999px; background: var(--v3-yellow); }
.hero-v3 h1 { margin: 0; font-family: var(--sans); font-size: clamp(4rem, 7.15vw, 8.2rem); font-weight: 900; letter-spacing: -.075em; line-height: .77; text-transform: uppercase; }
.hero-line { display: block; overflow: hidden; padding: .05em 0 .1em; }
.hero-line > span { display: block; transform-origin: left center; }
.hero-line--accent > span { width: fit-content; padding: .06em .16em .12em; color: var(--v3-ink); background: var(--v3-acid); font-family: var(--display); font-style: italic; font-weight: 500; letter-spacing: -.06em; text-transform: none; transform: rotate(-1.5deg); }
.hero-v3__bottom { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 28px; max-width: 750px; margin-top: 38px; }
.hero-v3__bottom p { max-width: 470px; margin: 0; color: rgba(255,255,255,.68); font-size: clamp(.9rem, 1.1vw, 1.03rem); line-height: 1.7; }
.hero-v3__bottom a { display: flex; min-width: max-content; align-items: center; gap: 11px; padding-bottom: 9px; color: var(--v3-yellow); border-bottom: 1px solid currentColor; font-size: .67rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }

.hero-cockpit { position: relative; z-index: 4; width: min(43vw, 650px); aspect-ratio: 1; justify-self: end; perspective: 1000px; transform-style: preserve-3d; }
.cockpit-glow { position: absolute; inset: 18%; border-radius: 48% 52% 42% 58% / 62% 42% 58% 38%; background: conic-gradient(from 30deg, var(--v3-orange), var(--v3-pink), #a83fd2, var(--v3-yellow), var(--v3-orange)); opacity: .72; filter: blur(34px); animation: cockpitMorph 8s ease-in-out infinite, cockpitTurn 18s linear infinite; }
.cockpit-orbit { position: absolute; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; animation: cockpitTurn 22s linear infinite; }
.cockpit-orbit--one { inset: 7%; }
.cockpit-orbit--two { inset: 23%; border-style: dashed; border-color: rgba(255,219,97,.5); animation-duration: 15s; animation-direction: reverse; }
.cockpit-orbit--one::before,.cockpit-orbit--one::after,.cockpit-orbit i { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--v3-acid); box-shadow: 0 0 22px rgba(216,255,62,.9); }
.cockpit-orbit--one::before { top: 11%; left: 23%; }.cockpit-orbit--one::after { right: 3%; bottom: 29%; width: 12px; height: 12px; background: var(--v3-yellow); }
.cockpit-orbit i:nth-child(1) { top: 48%; left: -4px; background: #fff; }.cockpit-orbit i:nth-child(2) { top: 10%; right: 20%; width: 5px; height: 5px; background: #fff; }.cockpit-orbit i:nth-child(3) { right: 27%; bottom: 7%; width: 6px; height: 6px; background: var(--v3-pink); }
.cockpit-core { position: absolute; inset: 28%; display: grid; place-content: center; justify-items: center; overflow: hidden; color: var(--v3-ink); border: 2px solid rgba(255,255,255,.55); border-radius: 42% 58% 63% 37% / 50% 40% 60% 50%; background: linear-gradient(145deg, #ffd647, #ff841c 54%, #ff5c9e); box-shadow: 0 30px 100px rgba(18,3,17,.48), inset 0 1px rgba(255,255,255,.9); animation: cockpitCore 5s ease-in-out infinite; }
.cockpit-core::before { content: ""; position: absolute; inset: -50%; background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%); animation: cockpitShine 4.2s ease-in-out infinite; }
.cockpit-core span,.cockpit-core strong,.cockpit-core small { position: relative; z-index: 2; }
.cockpit-core span { font-size: clamp(.68rem, .9vw, .86rem); font-weight: 950; letter-spacing: .35em; }
.cockpit-core strong { margin: 2px 0; font-size: clamp(2.25rem, 4vw, 4.4rem); font-weight: 950; letter-spacing: -.09em; line-height: .9; }
.cockpit-core small { padding: 6px 10px; color: #fff; border-radius: 999px; background: rgba(35,8,30,.82); font-size: .48rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.cockpit-card { position: absolute; z-index: 5; display: flex; align-items: center; gap: 12px; color: #fff; border: 1px solid rgba(255,255,255,.34); border-radius: 18px; box-shadow: 0 24px 55px rgba(16,3,15,.34); backdrop-filter: blur(15px); transform-style: preserve-3d; }
.cockpit-card b { font-size: .65rem; font-weight: 900; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; }
.cockpit-card small { display: block; margin-bottom: 3px; color: rgba(255,255,255,.65); font-size: .47rem; letter-spacing: .13em; text-transform: uppercase; }
.cockpit-card--social { top: 3%; left: 0; padding: 15px 18px; background: linear-gradient(135deg, rgba(255,121,0,.96), rgba(255,203,48,.84)); animation: v3FloatA 5.2s ease-in-out infinite; }
.cockpit-card--social > span { align-self: flex-start; padding: 4px 6px; color: var(--v3-ink); border-radius: 5px; background: var(--v3-acid); font-size: .5rem; font-weight: 900; }
.cockpit-card--web { top: 18%; right: -2%; padding: 16px 20px; background: linear-gradient(135deg, rgba(115,45,181,.95), rgba(255,79,167,.86)); animation: v3FloatB 6.2s ease-in-out -1.3s infinite; }
.cockpit-card--motion { right: 2%; bottom: 13%; padding: 16px 18px; background: linear-gradient(135deg, rgba(255,80,105,.96), rgba(255,125,0,.9)); animation: v3FloatA 5.8s ease-in-out -.8s infinite reverse; }
.cockpit-card--motion > span { margin-left: 7px; font-size: 1.3rem; }
.cockpit-card--design { bottom: 4%; left: -1%; padding: 16px 20px; background: linear-gradient(135deg, rgba(34,26,115,.97), rgba(143,45,139,.9)); animation: v3FloatB 5.5s ease-in-out -2s infinite reverse; }
.cockpit-card--design > span { color: var(--v3-acid); font-size: 1.8rem; animation: cockpitTurn 8s linear infinite; }
.cockpit-spark { position: absolute; z-index: 6; color: var(--v3-acid); text-shadow: 0 0 22px currentColor; animation: v3Spark 2.8s ease-in-out infinite; }
.cockpit-spark--a { top: 1%; left: 48%; font-size: 1.5rem; }.cockpit-spark--b { top: 48%; right: 0; font-size: .85rem; animation-delay: -1s; }.cockpit-spark--c { bottom: 22%; left: 2%; font-size: 1rem; animation-delay: -1.8s; }
.hero-v3__stamp { position: absolute; z-index: 6; right: clamp(22px, 5.2vw, 86px); bottom: 24px; display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.46); font-size: .55rem; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; }
.hero-v3__stamp i { display: grid; width: 34px; height: 34px; place-items: center; color: var(--v3-ink); border-radius: 50%; background: var(--v3-acid); font-style: normal; }

.marquee { position: relative; z-index: 10; overflow: hidden; color: var(--v3-ink); background: var(--v3-orange); border-top: 2px solid var(--v3-ink); border-bottom: 2px solid var(--v3-ink); transform: rotate(-.45deg) scale(1.01); transform-origin: center; }
.marquee__track { display: flex; width: max-content; animation: marqueeMove 24s linear infinite; }
.marquee__track > div { display: flex; flex-shrink: 0; }
.marquee span { display: flex; align-items: center; gap: 27px; padding: 22px 27px; font-size: clamp(1.6rem, 2.6vw, 3.2rem); font-weight: 700; letter-spacing: -.045em; text-transform: lowercase; white-space: nowrap; }
.marquee b { font-size: .65em; animation: cockpitTurn 5s linear infinite; }

.services-v3 { position: relative; overflow: hidden; padding-top: clamp(120px, 12vw, 190px); background: #f7f2e9; }
.services-v3::before { content: "✦"; position: absolute; top: 50px; right: 5vw; color: var(--v3-pink); font-size: clamp(5rem, 11vw, 11rem); line-height: 1; animation: cockpitTurn 20s linear infinite; }
.section-head-v3 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, .5fr); align-items: end; gap: 35px; margin-bottom: clamp(60px, 8vw, 110px); }
.section-head-v3 > p,.work-v3__head p { grid-column: 1 / -1; margin: 0 0 -8px; color: var(--v3-orange); font-size: .68rem; font-weight: 950; letter-spacing: .2em; text-transform: uppercase; }
.section-head-v3 h2 { max-width: 980px; margin: 0; font-family: var(--sans); font-size: clamp(3.6rem, 7vw, 8rem); font-weight: 850; letter-spacing: -.07em; line-height: .84; }
.section-head-v3 h2 em { color: var(--v3-violet); font-family: var(--display); font-weight: 400; }
.section-head-v3 > span { max-width: 330px; padding: 0 0 8px 22px; color: #756b72; border-left: 2px solid var(--v3-orange); font-size: .95rem; line-height: 1.65; }
.service-stack { display: grid; perspective: 1200px; }
.service-panel { position: relative; display: grid; grid-template-columns: 150px minmax(280px, 1.05fr) minmax(310px, .8fr) 70px; min-height: 310px; align-items: center; gap: clamp(22px, 3vw, 54px); overflow: hidden; padding: clamp(30px, 4vw, 64px); border: 2px solid var(--v3-ink); transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease; transform-origin: center top; }
.service-panel + .service-panel { margin-top: -2px; }
.service-panel:hover { z-index: 3; box-shadow: 0 32px 80px rgba(33,9,28,.22); transform: scale(1.012) rotate(-.25deg); }
.service-panel--1 { background: #fffdfa; }.service-panel--2 { background: var(--v3-acid); }.service-panel--3 { background: var(--v3-orange); }.service-panel--4 { color: #fff; background: linear-gradient(125deg, #1c0a19, #61235b 72%, #8e2e8b); }
.service-panel__lead { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; color: var(--v3-orange); }
.service-panel--2 .service-panel__lead,.service-panel--3 .service-panel__lead { color: var(--v3-ink); }.service-panel--4 .service-panel__lead { color: var(--v3-yellow); }
.service-panel__lead > span { font-family: var(--display); font-size: 3rem; }
.service-panel__lead svg { transition: transform .45s ease; }
.service-panel:hover .service-panel__lead svg { transform: rotate(-12deg) scale(1.25); }
.service-panel__title small { display: block; margin-bottom: 18px; font-size: .62rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.service-panel__title h3 { margin: 0; font-family: var(--sans); font-size: clamp(2.4rem, 4vw, 5.2rem); font-weight: 800; letter-spacing: -.065em; line-height: .9; }
.service-panel__details { opacity: .72; transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1); transform: translateX(22px); }
.service-panel:hover .service-panel__details { opacity: 1; transform: translateX(0); }
.service-panel__details p { max-width: 490px; margin: 0 0 28px; font-size: .92rem; line-height: 1.65; }
.service-panel__details ul { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.service-panel__details li { padding: 9px 12px; border: 1px solid currentColor; border-radius: 999px; font-size: .58rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.service-panel--4 .service-panel__details { color: rgba(255,255,255,.8); }
.service-panel__arrow { display: grid; width: 58px; aspect-ratio: 1; place-items: center; justify-self: end; border: 1px solid currentColor; border-radius: 50%; transition: color .35s ease, background .35s ease, transform .4s ease; }
.service-panel:hover .service-panel__arrow { color: var(--v3-ink); background: var(--v3-yellow); transform: rotate(-35deg) scale(1.1); }

.work-v3 { color: #fff; background: var(--v3-ink); }
.work-v3__head { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 55px; }
.work-v3__head p { margin: 0 0 18px; color: var(--v3-yellow); }
.work-v3__head h2 { margin: 0; font-family: var(--sans); font-size: clamp(4rem, 8vw, 9rem); font-weight: 850; letter-spacing: -.08em; line-height: .78; }
.work-v3__head h2 em { color: var(--v3-pink); font-family: var(--display); font-weight: 400; }
.work-v3__head > span { max-width: none; padding-bottom: 10px; color: rgba(255,255,255,.52); font-size: .7rem; font-weight: 800; letter-spacing: .12em; line-height: 1.8; text-align: right; text-transform: uppercase; white-space: nowrap; }
.filter-v3 { display: flex; width: fit-content; max-width: 100%; gap: 8px; margin-bottom: 38px; overflow-x: auto; }
.filter-v3 button { position: relative; min-width: max-content; padding: 13px 17px; color: rgba(255,255,255,.58); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: transparent; cursor: pointer; font-size: .61rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; transition: all .3s ease; }
.filter-v3 button:hover,.filter-v3 button.active { color: var(--v3-ink); border-color: var(--v3-acid); background: var(--v3-acid); }
.filter-v3 button span { display: none; }
.client-grid-v3 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.client-card-v3,.client-card-v3:nth-child(3n + 1) { grid-column: auto; min-width: 0; color: #fff; }
.client-card-v3__visual { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 22px; background: #63265d; }
.client-card-v3__visual > img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .5s ease; }
.client-card-v3:hover .client-card-v3__visual > img { filter: saturate(1.15); transform: scale(1.055); }
.client-card-v3__index { position: absolute; top: 18px; left: 18px; display: grid; width: 42px; height: 42px; place-items: center; color: var(--v3-ink); border-radius: 50%; background: var(--v3-yellow); font-size: .65rem; font-weight: 950; }
.client-card-v3__arrow { position: absolute; right: 18px; bottom: 18px; display: grid; width: 52px; height: 52px; place-items: center; color: var(--v3-ink); border-radius: 50%; background: var(--v3-acid); transition: transform .4s ease; }
.client-card-v3:hover .client-card-v3__arrow { transform: rotate(-35deg) scale(1.12); }
.client-placeholder-v3 { position: relative; display: grid; width: 100%; height: 100%; place-content: center; justify-items: center; overflow: hidden; background: radial-gradient(circle at 75% 25%, rgba(255,198,59,.55), transparent 18%), linear-gradient(135deg, #8e2e8a, #ff5b9c 55%, #ff7a00); }
.client-placeholder-v3 b { position: relative; z-index: 2; font-family: var(--display); font-size: clamp(5rem, 10vw, 10rem); font-weight: 400; line-height: .8; }
.client-placeholder-v3 span { position: relative; z-index: 2; margin-top: 15px; font-size: .58rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.client-placeholder-v3 i { position: absolute; width: 58%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; animation: cockpitTurn 15s linear infinite; }.client-placeholder-v3 i:last-child { width: 82%; border-style: dashed; animation-direction: reverse; }
.client-card-v3__body { display: flex; align-items: start; justify-content: space-between; gap: 24px; padding: 22px 4px 38px; }
.client-card-v3__body p { margin: 0 0 8px; color: rgba(255,255,255,.45); font-size: .58rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.client-card-v3__body h3 { margin: 0; font-family: var(--display); font-size: clamp(1.75rem,2.2vw,2.6rem); font-weight: 400; line-height: .95; }
.client-card-v3__tags { display: flex; max-width: 240px; flex-wrap: wrap; justify-content: end; gap: 5px; }
.client-card-v3__tags span { padding: 7px 9px; color: var(--v3-acid); border: 1px solid rgba(216,255,62,.32); border-radius: 999px; font-size: .52rem; font-weight: 800; text-transform: uppercase; }
.empty-showcase { position: relative; display: grid; grid-template-columns: minmax(300px,.8fr) minmax(380px,1.2fr) auto; min-height: 560px; align-items: center; gap: clamp(25px, 5vw, 90px); overflow: hidden; padding: clamp(30px,5vw,80px); color: var(--v3-ink); border-radius: 28px; background: linear-gradient(120deg, var(--v3-acid) 0 55%, var(--v3-yellow) 55% 100%); }
.empty-showcase::after { content: ""; position: absolute; right: -8%; bottom: -40%; width: 42%; aspect-ratio: 1; border: 2px solid var(--v3-ink); border-radius: 50%; box-shadow: 0 0 0 42px rgba(22,9,18,.06), 0 0 0 84px rgba(22,9,18,.035); }
.empty-showcase__cards { position: relative; min-height: 350px; perspective: 900px; }
.empty-showcase__cards span { position: absolute; display: grid; width: 220px; aspect-ratio: 4/3; place-items: center; color: #fff; border: 2px solid var(--v3-ink); border-radius: 18px; box-shadow: 0 26px 50px rgba(22,9,18,.2); font-size: 1.3rem; font-weight: 950; letter-spacing: .08em; }
.empty-showcase__cards span:nth-child(1) { top: 7%; left: 4%; background: var(--v3-violet); transform: rotate(-12deg); animation: emptyCardA 5.5s ease-in-out infinite; }.empty-showcase__cards span:nth-child(2) { top: 27%; left: 25%; background: var(--v3-pink); transform: rotate(7deg); animation: emptyCardB 6s ease-in-out infinite; }.empty-showcase__cards span:nth-child(3) { top: 47%; left: 2%; color: var(--v3-ink); background: var(--v3-orange); transform: rotate(-3deg); animation: emptyCardA 6.4s ease-in-out -2s infinite reverse; }
.empty-showcase > div:nth-child(2) { position: relative; z-index: 2; }
.empty-showcase > div:nth-child(2) p { margin: 0 0 18px; font-size: .63rem; font-weight: 950; letter-spacing: .14em; text-transform: uppercase; }
.empty-showcase h3 { margin: 0; font-family: var(--sans); font-size: clamp(3rem,5vw,6rem); font-weight: 900; letter-spacing: -.07em; line-height: .84; }
.empty-showcase h3 em { color: var(--v3-violet); font-family: var(--display); font-weight: 400; }
.empty-showcase > a { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 15px 18px; color: #fff; border-radius: 999px; background: var(--v3-ink); font-size: .62rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }

.contact-v3 { position: relative; min-height: 820px; overflow: hidden; color: var(--v3-ink); background: linear-gradient(135deg, var(--v3-orange), #ff9650 42%, var(--v3-pink) 100%); }
.contact-v3::before { content: ""; position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(var(--v3-ink) 1px, transparent 1px), linear-gradient(90deg, var(--v3-ink) 1px, transparent 1px); background-size: 76px 76px; }
.contact-v3__top { position: relative; z-index: 3; display: flex; justify-content: space-between; gap: 25px; margin-bottom: clamp(70px,9vw,130px); padding-bottom: 20px; border-bottom: 2px solid var(--v3-ink); }
.contact-v3__top p,.contact-v3__top span { margin: 0; font-size: .67rem; font-weight: 950; letter-spacing: .15em; text-transform: uppercase; }
.contact-v3__word { position: relative; z-index: 3; overflow: hidden; margin: 0; font-family: var(--sans); font-size: clamp(4.8rem, 11vw, 13rem); font-weight: 950; letter-spacing: -.09em; line-height: .74; text-transform: uppercase; }
.contact-v3__word span { display: block; }
.contact-v3__word--outline { color: transparent; -webkit-text-stroke: 2px var(--v3-ink); }
.contact-v3__email { position: relative; z-index: 4; display: flex; width: fit-content; max-width: 100%; align-items: center; gap: 22px; margin-top: 80px; font-size: clamp(1.1rem,2.2vw,2rem); font-weight: 850; overflow-wrap: anywhere; }
.contact-v3__email i { display: grid; width: 70px; aspect-ratio: 1; flex: 0 0 auto; place-items: center; color: #fff; border-radius: 50%; background: var(--v3-ink); font-style: normal; transition: transform .4s ease; }
.contact-v3__email:hover i { transform: rotate(-35deg) scale(1.12); }
.contact-v3__shape { position: absolute; right: 4%; bottom: -22%; width: min(35vw,500px); aspect-ratio: 1; border: 2px solid var(--v3-ink); border-radius: 50%; animation: cockpitTurn 25s linear infinite; }
.contact-v3__shape b { position: absolute; top: 18%; left: 10%; font-size: 5rem; }.contact-v3__shape i { position: absolute; inset: 20%; border: 2px dashed var(--v3-ink); border-radius: 50%; }.contact-v3__shape i:last-child { inset: 36%; border-style: solid; }
.footer-v3 { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 34px clamp(22px,5vw,86px); color: rgba(255,255,255,.65); background: var(--v3-ink); font-size: .6rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.footer-v3 img { width: 145px; filter: brightness(1.2); }.footer-v3 span { justify-self: center; }.footer-v3 p { justify-self: end; }

@media (max-width: 1100px) {
  .hero-v3 { grid-template-columns: minmax(0, 1.05fr) minmax(350px,.8fr); gap: 8px; padding-inline: 44px; }
  .hero-v3 h1 { font-size: clamp(3.7rem,7vw,6rem); }
  .hero-cockpit { width: min(43vw,500px); }
  .cockpit-card { border-radius: 14px; }.cockpit-card b { font-size: .54rem; }.cockpit-card svg { width: 22px; }
  .service-panel { grid-template-columns: 100px 1fr 1fr 60px; gap: 24px; }
  .client-grid-v3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .client-card-v3,.client-card-v3:nth-child(3n + 1) { grid-column: auto; }
  .empty-showcase { grid-template-columns: minmax(260px,.75fr) 1.25fr; }.empty-showcase > a { grid-column: 2; width: fit-content; }
}

@media (max-width: 760px) {
  .portfolio-v3 .section { padding: 88px 18px; }
  .nav-v3 { grid-template-columns: 1fr auto; min-height: 82px; padding: 15px 18px; }
  .brand-v3 { width: 132px; }.nav-v3__links { display: none; }.nav-v3__cta { padding: 11px 13px; font-size: .54rem; }
  .hero-v3 { display: flex; min-height: 100svh; flex-direction: column; align-items: stretch; justify-content: center; gap: 42px; padding: 124px 18px 74px; }
  .hero-v3__kicker { margin-bottom: 28px; font-size: .55rem; }
  .hero-v3 h1 { font-size: clamp(3.2rem,15vw,5.8rem); line-height: .79; }
  .hero-line--accent > span { padding-inline: .12em; }
  .hero-v3__bottom { grid-template-columns: 1fr; gap: 22px; margin-top: 28px; }.hero-v3__bottom a { width: fit-content; }
  .hero-cockpit { width: min(92vw,440px); margin: 0 auto; align-self: center; }
  .cockpit-card { padding: 10px 12px; border-radius: 11px; }.cockpit-card b { font-size: .45rem; }.cockpit-card small { font-size: .4rem; }.cockpit-card svg { width: 19px; }
  .cockpit-card--social { left: 0; }.cockpit-card--web { right: 0; }.cockpit-card--motion { right: 0; }.cockpit-card--design { left: 0; }
  .cockpit-core strong { font-size: clamp(1.7rem,9vw,3rem); }.cockpit-core small { font-size: .35rem; }
  .hero-v3__stamp { display: none; }
  .marquee span { gap: 17px; padding: 17px; font-size: 1.65rem; }
  .section-head-v3 { grid-template-columns: 1fr; gap: 24px; }.section-head-v3 > p { margin: 0; }.section-head-v3 h2 { font-size: clamp(3.2rem,14vw,5.2rem); }.section-head-v3 > span { max-width: 100%; }
  .service-stack { gap: 10px; }
  .service-panel { grid-template-columns: 60px 1fr 48px; min-height: 0; gap: 18px; margin: 0 !important; padding: 28px 22px; border-width: 2px; }
  .service-panel:hover { transform: none; }
  .service-panel__lead { min-height: 120px; }.service-panel__lead > span { font-size: 2.1rem; }.service-panel__lead svg { width: 30px; }
  .service-panel__title small { margin-bottom: 12px; font-size: .52rem; }.service-panel__title h3 { font-size: clamp(2.1rem,9.5vw,3.2rem); }
  .service-panel__details { grid-column: 1 / -1; opacity: 1; transform: none; }.service-panel__details p { margin-bottom: 22px; }.service-panel__details li { padding: 8px 10px; font-size: .5rem; }
  .service-panel__arrow { grid-column: 3; grid-row: 1; width: 44px; }
  .work-v3__head { align-items: start; flex-direction: column; margin-bottom: 38px; }.work-v3__head h2 { font-size: clamp(3.8rem,15vw,6.2rem); }.work-v3__head > span { max-width: 100%; text-align: left; white-space: normal; }
  .filter-v3 { width: 100%; padding-bottom: 4px; }.filter-v3 button { padding: 12px 14px; font-size: .54rem; }
  .client-grid-v3 { grid-template-columns: 1fr; gap: 8px; }.client-card-v3,.client-card-v3:nth-child(3n + 1) { grid-column: auto; }.client-card-v3__body { align-items: start; flex-direction: column; }.client-card-v3__tags { justify-content: start; }
  .empty-showcase { grid-template-columns: 1fr; min-height: 0; gap: 30px; padding: 28px 22px 36px; border-radius: 20px; background: linear-gradient(145deg,var(--v3-acid) 0 62%,var(--v3-yellow) 62%); }.empty-showcase__cards { min-height: 270px; }.empty-showcase__cards span { width: 170px; }.empty-showcase > a { grid-column: 1; width: fit-content; }.empty-showcase h3 { font-size: clamp(3.1rem,13vw,5rem); }
  .contact-v3 { min-height: 680px; }.contact-v3__top { align-items: start; flex-direction: column; margin-bottom: 75px; }.contact-v3__word { font-size: clamp(4rem,17vw,7rem); line-height: .8; }.contact-v3__word--outline { -webkit-text-stroke-width: 1px; }.contact-v3__email { gap: 12px; margin-top: 60px; font-size: clamp(.92rem,4vw,1.25rem); }.contact-v3__email i { width: 52px; }
  .footer-v3 { grid-template-columns: 1fr; gap: 18px; text-align: center; }.footer-v3 img,.footer-v3 span,.footer-v3 p { justify-self: center; }
}

@keyframes marqueeMove { to { transform: translateX(-50%); } }
@keyframes v3Glow { 0%,100% { opacity: .6; transform: translateX(0) scale(1); } 50% { opacity: 1; transform: translateX(-60px) scale(1.2); } }
@keyframes cockpitTurn { to { transform: rotate(360deg); } }
@keyframes cockpitMorph { 0%,100% { border-radius: 48% 52% 42% 58% / 62% 42% 58% 38%; } 50% { border-radius: 66% 34% 61% 39% / 38% 60% 40% 62%; } }
@keyframes cockpitCore { 0%,100% { border-radius: 42% 58% 63% 37% / 50% 40% 60% 50%; transform: scale(1) rotate(-1deg); } 50% { border-radius: 61% 39% 44% 56% / 39% 62% 38% 61%; transform: scale(1.045) rotate(1deg); } }
@keyframes cockpitShine { 0%,45% { transform: translateX(-55%) rotate(10deg); } 75%,100% { transform: translateX(55%) rotate(10deg); } }
@keyframes v3FloatA { 0%,100% { transform: translate3d(0,0,0) rotate(-1deg); } 50% { transform: translate3d(0,-16px,0) rotate(1.5deg); } }
@keyframes v3FloatB { 0%,100% { transform: translate3d(0,0,0) rotate(1deg); } 50% { transform: translate3d(10px,-12px,0) rotate(-1.5deg); } }
@keyframes v3Spark { 0%,100% { opacity: .35; transform: scale(.7) rotate(0); } 50% { opacity: 1; transform: scale(1.3) rotate(90deg); } }
@keyframes emptyCardA { 0%,100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes emptyCardB { 0%,100% { translate: 0 0; } 50% { translate: 10px -10px; } }

/* Fekra portfolio v4 — simplified editor, stacked services and project gallery */
.portfolio-v3 {
  --v3-ink: #180714;
  --v3-purple: #57204f;
  --v3-violet: #8b2cff;
  --v3-orange: #ff6b00;
  --v3-yellow: #ffbd21;
  --v3-acid: #d9ff37;
  --v3-pink: #ff3f9b;
  --v3-blue: #34d8ff;
}

.hero-v3 { background: radial-gradient(circle at 85% 15%, rgba(255,107,0,.58), transparent 24%), radial-gradient(circle at 68% 88%, rgba(255,63,155,.44), transparent 29%), radial-gradient(circle at 18% 82%, rgba(139,44,255,.3), transparent 26%), linear-gradient(118deg,#130611 0%,#32102f 38%,#742262 73%,#260b23 100%); }
.cockpit-glow { background: conic-gradient(from 20deg,var(--v3-orange),var(--v3-pink),var(--v3-violet),var(--v3-blue),var(--v3-yellow),var(--v3-orange)); }
.marquee { background: linear-gradient(90deg,var(--v3-orange),var(--v3-yellow) 44%,var(--v3-pink)); }

.service-stack { display: block; padding-bottom: 8vh; perspective: 1400px; }
.service-panel { position: sticky; top: calc(92px + (var(--stack-index) * 17px)); z-index: calc(10 + var(--stack-index)); margin: 0 0 13vh !important; border-radius: 24px; box-shadow: 0 26px 80px rgba(31,7,26,.13); will-change: transform; }
.service-panel--1 { background: linear-gradient(120deg,#fffdf8 0%,#fff2db 100%); }
.service-panel--2 { background: linear-gradient(120deg,var(--v3-acid),#f3ff78); }
.service-panel--3 { background: linear-gradient(120deg,var(--v3-orange),#ffad24 70%,var(--v3-yellow)); }
.service-panel--4 { background: radial-gradient(circle at 86% 25%,rgba(255,63,155,.58),transparent 22%),linear-gradient(125deg,#180714,#57204f 58%,#8b2cff); }

.client-card-v3__visual { display: grid; place-items: center; padding: clamp(20px,3vw,46px); background: radial-gradient(circle at 85% 15%,rgba(255,189,33,.34),transparent 25%),radial-gradient(circle at 12% 88%,rgba(52,216,255,.22),transparent 28%),linear-gradient(145deg,#381031,#6d245f); }
.client-card-v3__visual > img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 22px 35px rgba(12,3,11,.24)); }
.client-card-v3:hover .client-card-v3__visual > img { filter: drop-shadow(0 28px 44px rgba(12,3,11,.32)) saturate(1.1); transform: scale(1.025); }
.client-card-v3__index,.client-card-v3__arrow { z-index: 3; }

.contact-v3 { background: radial-gradient(circle at 88% 15%,rgba(217,255,55,.72),transparent 18%),radial-gradient(circle at 16% 86%,rgba(52,216,255,.35),transparent 26%),linear-gradient(135deg,var(--v3-orange),var(--v3-yellow) 40%,var(--v3-pink) 100%); }
.contact-v3__address { position: relative; z-index: 4; max-width: 680px; margin-top: 26px; font-style: normal; font-size: clamp(.85rem,1.2vw,1.08rem); font-weight: 700; line-height: 1.75; }
.footer-v3--simple { display: flex; min-height: 86px; align-items: center; justify-content: center; text-align: center; }
.footer-v3--simple p { justify-self: auto; margin: 0; color: rgba(255,255,255,.72); }

/* Simplified editor */
.editor-shell--v4 .editor-sidebar { background: radial-gradient(circle at 8% 8%,rgba(255,107,0,.18),transparent 24%),linear-gradient(180deg,#24081f,#160712); }
.editor-shell--v4 .editor-brand { padding: 0; background: transparent; }
.editor-help { max-width: 720px; margin: -14px 0 24px; color: #7e6d79; font-size: .86rem; line-height: 1.65; }
.project-type-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.project-type-grid > button { display: grid; grid-template-columns: auto 1fr auto; min-height: 118px; align-items: center; gap: 18px; padding: 22px; color: #32112f; border: 1px solid #dfd2da; border-radius: 14px; background: #fff; text-align: left; cursor: pointer; transition: transform .25s ease,border-color .25s ease,box-shadow .25s ease,background .25s ease; }
.project-type-grid > button:hover { border-color: #ff9b20; box-shadow: 0 18px 45px rgba(73,24,67,.09); transform: translateY(-3px); }
.project-type-grid > button.active { color: #fff; border-color: #5c2055; background: linear-gradient(135deg,#35102f,#7a286f); box-shadow: 0 20px 50px rgba(70,20,64,.2); }
.project-type-grid > button > svg { color: #ff7800; }
.project-type-grid > button.active > svg { color: #d9ff37; }
.project-type-grid > button span b,.project-type-grid > button span small { display: block; }
.project-type-grid > button span b { font-size: 1rem; }
.project-type-grid > button span small { margin-top: 7px; color: #8a7784; font-size: .68rem; line-height: 1.5; }
.project-type-grid > button.active span small { color: rgba(255,255,255,.62); }
.project-type-grid > button > i { display: grid; width: 30px; height: 30px; place-items: center; color: #32112f; border-radius: 50%; background: #ffbd21; font-style: normal; font-weight: 900; }
.upload-box--v4 { min-height: 188px; gap: 8px; border: 1.5px dashed #bfa8b7; border-radius: 14px; background: linear-gradient(145deg,#fffaf3,#f7eef5); transition: border-color .25s ease,transform .25s ease,box-shadow .25s ease; }
.upload-box--v4:hover { border-color: #ff7900; box-shadow: 0 18px 45px rgba(65,18,58,.08); transform: translateY(-3px); }
.upload-box--v4 > i { display: grid; width: 54px; height: 54px; place-items: center; margin-bottom: 6px; color: #fff; border-radius: 50%; background: linear-gradient(135deg,#ff6b00,#ff3f9b); }
.card-visual-preview { display: grid; min-height: 260px; place-items: center; margin-top: 20px; padding: 28px; overflow: hidden; border: 1px solid #e1d5dc; border-radius: 16px; background: radial-gradient(circle at 80% 15%,rgba(255,189,33,.32),transparent 25%),linear-gradient(145deg,#35102f,#702666); }
.card-visual-preview img { width: auto; max-width: 100%; height: auto; max-height: 280px; object-fit: contain; filter: drop-shadow(0 18px 28px rgba(0,0,0,.2)); }
.media-group-editor { margin-top: 30px; }
.media-group-editor > h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: .9rem; }
.media-group-editor > h3 svg { color: #ff6b00; }
.media-group-editor > h3 span { display: grid; min-width: 26px; height: 26px; place-items: center; margin-left: auto; border-radius: 50%; background: #d9ff37; font-size: .62rem; }
.media-strip img,.media-strip video { height: 180px; aspect-ratio: auto; object-fit: contain; background: #21101e; }
.media-strip figcaption span { overflow: hidden; text-overflow: ellipsis; }
.media-empty { margin-top: 24px; padding: 28px; color: #8c7c87; border: 1px dashed #d7c9d2; border-radius: 12px; text-align: center; }

/* Client project — no cover, media separated automatically */
.detail-page--v4 { --detail-ink:#180714; --detail-orange:#ff6b00; --detail-yellow:#ffbd21; --detail-acid:#d9ff37; --detail-pink:#ff3f9b; --detail-violet:#8b2cff; color: var(--detail-ink); background: #fffaf3; }
.detail-page--v4 > .detail-nav-v4 { position: absolute; z-index: 30; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 22px clamp(20px,5vw,76px); border-bottom: 1px solid rgba(255,255,255,.14); }
.detail-nav-v4 > a:first-child { display: block; width: clamp(142px,13vw,200px); }
.detail-page--v4 > .detail-nav-v4 img { width: 100%; height: auto; padding: 0; background: transparent; filter: saturate(1.1) brightness(1.15) drop-shadow(0 8px 20px rgba(0,0,0,.2)); }
.detail-nav-v4 > a:last-child { display: flex; align-items: center; gap: 9px; color: #fff; font-size: .64rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.detail-page--v4 #client-content > .detail-hero-v4 { position: relative; display: grid; min-height: 720px; align-items: end; overflow: hidden; padding: 150px clamp(22px,6vw,100px) 76px; color: #fff; background: radial-gradient(circle at 84% 18%,rgba(255,107,0,.58),transparent 23%),radial-gradient(circle at 72% 82%,rgba(255,63,155,.5),transparent 28%),linear-gradient(125deg,#130611,#3a1235 48%,#702661 100%); }
.detail-hero-v4__grid { position: absolute; inset: 0; opacity: .1; background-image: linear-gradient(rgba(255,255,255,.75) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.75) 1px,transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent); }
.detail-hero-v4__orb { position: absolute; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; }
.detail-hero-v4__orb--one { top: 18%; right: 6%; width: min(38vw,520px); aspect-ratio: 1; box-shadow: 0 0 0 35px rgba(255,189,33,.04),0 0 0 70px rgba(255,189,33,.025); animation: cockpitTurn 24s linear infinite; }
.detail-hero-v4__orb--two { top: 24%; right: 12%; width: min(25vw,340px); aspect-ratio: 1; border-style: dashed; animation: cockpitTurn 16s linear infinite reverse; }
.detail-hero-v4__content { position: relative; z-index: 3; max-width: 1250px; }
.detail-hero-v4__types { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 26px; }
.detail-hero-v4__types span { padding: 8px 11px; color: var(--detail-ink); border-radius: 999px; background: var(--detail-acid); font-size: .58rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.detail-hero-v4__content > p { margin: 0 0 16px; color: var(--detail-yellow); font-size: .65rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.detail-page--v4 .detail-hero-v4 h1 { max-width: 1100px; margin: 0; font-family: var(--display); font-size: clamp(4.5rem,10vw,10rem); font-weight: 400; letter-spacing: -.065em; line-height: .78; }
.detail-hero-v4__bottom { display: flex; max-width: 1000px; align-items: end; justify-content: space-between; gap: 36px; margin-top: 48px; }
.detail-hero-v4__bottom > p { max-width: 650px; margin: 0; color: rgba(255,255,255,.68); font-size: clamp(.95rem,1.25vw,1.12rem); line-height: 1.75; }
.detail-hero-v4__bottom > a { display: flex; min-width: max-content; align-items: center; gap: 10px; padding: 15px 18px; color: var(--detail-ink); border-radius: 999px; background: var(--detail-yellow); font-size: .64rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.detail-hero-v4__count { position: absolute; z-index: 4; top: 160px; right: clamp(22px,6vw,100px); display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 5px 10px; color: rgba(255,255,255,.72); }
.detail-hero-v4__count b { color: var(--detail-yellow); font-family: var(--display); font-size: 2.2rem; font-weight: 400; }
.detail-hero-v4__count span { font-size: .55rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.detail-media-v4 { padding: clamp(90px,9vw,145px) clamp(22px,6vw,100px); }
.detail-media-v4--images { background: #fffaf3; }
.detail-media-v4--videos { color: #fff; background: radial-gradient(circle at 12% 15%,rgba(139,44,255,.35),transparent 25%),var(--detail-ink); }
.detail-media-v4__head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 56px; padding-bottom: 22px; border-bottom: 1px solid currentColor; }
.detail-media-v4__head p { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; color: var(--detail-orange); font-size: .63rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.detail-media-v4--videos .detail-media-v4__head p { color: var(--detail-acid); }
.detail-media-v4__head h2 { margin: 0; font-family: var(--display); font-size: clamp(3.4rem,7vw,7.4rem); font-weight: 400; letter-spacing: -.045em; line-height: .86; }
.detail-media-v4__head > span { font-size: .62rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.detail-media-v4__grid { display: grid; align-items: start; gap: 22px; }
.detail-media-v4__grid--images { grid-template-columns: repeat(12,minmax(0,1fr)); }
.detail-media-v4__grid--images > button { grid-column: span 4; }
.detail-media-v4__grid--images > button:nth-child(5n + 1),.detail-media-v4__grid--images > button:nth-child(5n + 4) { grid-column: span 6; }
.detail-media-v4__grid--videos { grid-template-columns: repeat(2,minmax(0,1fr)); }
.detail-media-v4__grid > button { position: relative; display: grid; width: 100%; min-width: 0; place-items: center; overflow: hidden; padding: 0; color: inherit; border: 1px solid rgba(67,22,61,.16); border-radius: 18px; background: #f2e8dd; box-shadow: 0 20px 55px rgba(40,10,35,.09); cursor: zoom-in; }
.detail-media-v4--videos .detail-media-v4__grid > button { border-color: rgba(255,255,255,.14); background: #2a1027; }
.detail-media-v4__grid img,.detail-media-v4__grid video { display: block; width: 100%; height: auto; max-height: 680px; object-fit: contain; transition: transform .5s ease,filter .5s ease; }
.detail-media-v4__grid > button:hover img,.detail-media-v4__grid > button:hover video { filter: saturate(1.08); transform: scale(1.018); }
.detail-media-v4__grid > button > span { position: absolute; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 8px; padding: 10px 12px; color: var(--detail-ink); border-radius: 999px; background: var(--detail-acid); font-size: .58rem; font-weight: 900; text-transform: uppercase; }
.detail-empty-v4 { display: grid; min-height: 520px; place-content: center; justify-items: center; gap: 18px; text-align: center; }
.detail-empty-v4 svg { color: var(--detail-orange); }
.detail-empty-v4 h2 { margin: 0; font-family: var(--display); font-size: clamp(2.5rem,5vw,5rem); font-weight: 400; }
.detail-empty-v4 a { color: var(--detail-violet); font-weight: 850; text-transform: uppercase; }
.detail-footer-v4 { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 34px clamp(22px,6vw,100px); color: rgba(255,255,255,.7); background: var(--detail-ink); font-size: .62rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }

@media (max-width: 1100px) {
  .detail-media-v4__grid--images > button,.detail-media-v4__grid--images > button:nth-child(5n + 1),.detail-media-v4__grid--images > button:nth-child(5n + 4) { grid-column: span 6; }
}

@media (max-width: 760px) {
  .service-stack { display: grid; gap: 12px; padding-bottom: 0; }
  .service-panel { position: relative; top: auto; margin: 0 !important; border-radius: 18px; }
  .project-type-grid { grid-template-columns: 1fr; }
  .project-type-grid > button { min-height: 105px; }
  .editor-help { margin-top: -12px; }
  .detail-page--v4 > .detail-nav-v4 { padding: 18px; }
  .detail-nav-v4 > a:first-child { width: 132px; }
  .detail-page--v4 #client-content > .detail-hero-v4 { min-height: 700px; padding: 150px 18px 64px; }
  .detail-page--v4 .detail-hero-v4 h1 { font-size: clamp(4rem,19vw,6.4rem); }
  .detail-hero-v4__count { top: 112px; right: 18px; }
  .detail-hero-v4__bottom { align-items: start; flex-direction: column; margin-top: 34px; }
  .detail-media-v4 { padding: 80px 18px; }
  .detail-media-v4__head { align-items: start; flex-direction: column; margin-bottom: 36px; }
  .detail-media-v4__grid--images,.detail-media-v4__grid--videos { grid-template-columns: 1fr; }
  .detail-media-v4__grid--images > button,.detail-media-v4__grid--images > button:nth-child(5n + 1),.detail-media-v4__grid--images > button:nth-child(5n + 4) { grid-column: auto; }
  .detail-media-v4__grid img,.detail-media-v4__grid video { max-height: 72vh; }
  .detail-footer-v4 { align-items: start; flex-direction: column; }
  .contact-v3__address { font-size: .82rem; }
}

/* Fekra portfolio v5 — compact kinetic stack, contact alignment and tabbed media */
.service-stack {
  --stack-step: clamp(112px,10vw,158px);
  position: relative;
  display: block;
  min-height: calc(310px + (var(--stack-step) * 3));
  padding-top: calc(var(--stack-step) * 3);
  padding-bottom: 0;
  perspective: none;
}
.service-panel {
  position: absolute;
  inset: calc(var(--stack-step) * 3) 0 auto;
  z-index: calc(20 + var(--stack-index));
  margin: 0 0 -2px !important;
  border-radius: 18px;
  box-shadow: 0 22px 54px rgba(31,7,26,.12);
  backface-visibility: hidden;
  contain: layout paint;
  will-change: transform, opacity;
}
.service-panel:last-child { margin-bottom: 0 !important; }
.service-panel:not(:last-child) { transform: translateY(calc((var(--stack-index) - 3) * var(--stack-step))); }
.service-stack .service-panel:hover { box-shadow: 0 22px 54px rgba(31,7,26,.12); transform: none; }
.services-v3 { overflow: visible; }

.contact-v3 {
  min-height: 940px;
  padding-bottom: clamp(80px,8vw,130px);
}
.contact-v3__word {
  max-width: calc(100% - clamp(0px,10vw,150px));
  overflow: visible;
  font-size: clamp(4.6rem,9.7vw,11.2rem);
  letter-spacing: -.075em;
  line-height: .79;
}
.contact-v3__word--outline {
  display: grid;
  gap: .02em;
  padding-bottom: .09em;
}
.contact-v3__word--outline span { width: fit-content; max-width: 100%; }
.contact-v3__details {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(320px,.8fr) minmax(420px,1.2fr);
  width: min(1120px,calc(100% - min(25vw,330px)));
  align-items: stretch;
  gap: 14px;
  margin-top: clamp(52px,6vw,80px);
}
.contact-v3__detail {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 17px 20px;
  color: var(--v3-ink);
  border: 2px solid var(--v3-ink);
  border-radius: 18px;
  background: rgba(255,255,255,.18);
  font-style: normal;
  font-size: clamp(.82rem,1.05vw,1rem);
  font-weight: 800;
  line-height: 1.5;
  backdrop-filter: blur(8px);
}
.contact-v3__detail > i {
  display: grid;
  width: 52px;
  aspect-ratio: 1;
  flex: 0 0 auto;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: var(--v3-ink);
  font-style: normal;
  transition: transform .25s ease,background .25s ease;
}
.contact-v3__detail:hover > i { background: var(--v3-violet); transform: rotate(-12deg) scale(1.06); }
.contact-v3__detail span { min-width: 0; overflow-wrap: anywhere; }
.contact-v3__detail small {
  display: block;
  margin-bottom: 4px;
  font-size: .54rem;
  font-weight: 950;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.contact-v3__shape {
  right: 2.5%;
  bottom: 6%;
  width: min(24vw,350px);
}

.detail-page--v4 > .detail-nav-v4 {
  position: relative;
  color: #fff;
  background: var(--detail-ink);
}
.detail-page--v4 #client-content > .detail-hero-v4 {
  min-height: 480px;
  align-items: center;
  padding: clamp(56px,6vw,82px) clamp(22px,6vw,100px);
}
.detail-page--v4 #client-content > .detail-hero-v4 > .detail-hero-v4__grid,
.detail-page--v4 #client-content > .detail-hero-v4 > .detail-hero-v4__orb { position: absolute; }
.detail-page--v4 #client-content > .detail-hero-v4 > .detail-hero-v4__content { position: relative; }
.detail-page--v4 #client-content > .detail-hero-v4 > .detail-hero-v4__count { position: absolute; }
.detail-hero-v4__orb--one { top: 4%; right: 4%; width: min(28vw,390px); }
.detail-hero-v4__orb--two { top: 12%; right: 10%; width: min(19vw,260px); }
.detail-hero-v4__content { width: min(1180px,calc(100% - 170px)); }
.detail-page--v4 .detail-hero-v4 h1 {
  font-size: clamp(3.8rem,8vw,8rem);
  line-height: .82;
}
.detail-hero-v4__bottom { margin-top: 30px; }
.detail-hero-v4__count { top: 44px; right: clamp(22px,6vw,100px); }

.detail-gallery-v5 {
  min-height: 520px;
  padding: clamp(52px,6vw,90px) clamp(22px,6vw,100px) clamp(70px,7vw,110px);
  background: #fffaf3;
}
.detail-gallery-v5__top {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 34px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(24,7,20,.25);
}
.detail-gallery-v5__top p {
  margin: 0 0 9px;
  color: var(--detail-orange);
  font-size: .6rem;
  font-weight: 950;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.detail-gallery-v5__top h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.8rem,5vw,5.6rem);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .88;
}
.detail-gallery-v5__tabs {
  display: flex;
  gap: 8px;
  padding: 6px;
  border: 1px solid rgba(24,7,20,.16);
  border-radius: 999px;
  background: #fff;
}
.detail-gallery-v5__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.detail-gallery-v5__visit {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 8px;
  padding: 0 17px;
  color: #fff;
  border: 1px solid rgba(24,7,20,.14);
  border-radius: 999px;
  background: linear-gradient(110deg,var(--detail-orange),var(--detail-pink));
  box-shadow: 0 10px 26px rgba(255,63,155,.2);
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: transform .2s ease,box-shadow .2s ease;
}
.detail-gallery-v5__visit:hover { box-shadow: 0 15px 34px rgba(255,63,155,.3); transform: translateY(-2px); }
.detail-gallery-v5__tabs button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 15px;
  color: #6b5666;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: color .2s ease,background .2s ease,transform .2s ease;
}
.detail-gallery-v5__tabs button:hover { color: var(--detail-ink); transform: translateY(-1px); }
.detail-gallery-v5__tabs button.active { color: var(--detail-ink); background: var(--detail-acid); }
.detail-gallery-v5__tabs button b {
  display: grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: rgba(24,7,20,.1);
  font-size: .55rem;
}
.detail-gallery-v5__grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 14px;
}
.detail-gallery-v5__grid > button {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  padding: 12px;
  color: var(--detail-ink);
  border: 1px solid rgba(24,7,20,.28);
  border-radius: 14px;
  background: linear-gradient(145deg,#fff,#f3e8de);
  box-shadow: 0 14px 36px rgba(40,10,35,.07);
  cursor: zoom-in;
  transition: transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.detail-gallery-v5__grid[data-kind="videos"] { align-items: start; grid-auto-flow: dense; }
.detail-gallery-v5__grid[data-kind="videos"] > button { aspect-ratio: var(--media-ratio,16 / 9); }
.detail-gallery-v5__grid > button::before,
.detail-gallery-v5__grid > button::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 24px;
  height: 24px;
  pointer-events: none;
}
.detail-gallery-v5__grid > button::before { top: 6px; left: 6px; border-top: 2px solid var(--detail-orange); border-left: 2px solid var(--detail-orange); }
.detail-gallery-v5__grid > button::after { right: 6px; bottom: 6px; border-right: 2px solid var(--detail-violet); border-bottom: 2px solid var(--detail-violet); }
.detail-gallery-v5__grid > button:hover { z-index: 3; border-color: var(--detail-orange); box-shadow: 0 20px 45px rgba(40,10,35,.13); transform: translateY(-4px); }
.detail-gallery-v5__grid img,
.detail-gallery-v5__grid video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
}
.detail-gallery-v5__grid > button > span {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border-radius: 999px;
  background: var(--detail-acid);
  font-size: .52rem;
  font-weight: 900;
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  .contact-v3__details { grid-template-columns: 1fr; width: min(760px,calc(100% - 270px)); }
  .detail-gallery-v5__grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .service-stack { display: block; min-height: 0; padding-top: 0; }
  .service-panel { position: relative; top: auto; margin: 0 0 -2px !important; border-radius: 14px; }
  .service-panel:not(:last-child) { transform: none; }
  .service-stack .service-panel:hover { transform: none; }
  .contact-v3 { min-height: 820px; }
  .contact-v3__word { max-width: 100%; font-size: clamp(3.6rem,16vw,6.2rem); line-height: .82; }
  .contact-v3__details { grid-template-columns: 1fr; width: 100%; gap: 9px; margin-top: 44px; }
  .contact-v3__detail { padding: 13px 14px; font-size: .76rem; }
  .contact-v3__detail > i { width: 44px; }
  .contact-v3__shape { right: -8%; bottom: 2%; width: 180px; opacity: .35; }
  .detail-page--v4 > .detail-nav-v4 { padding: 16px 18px; }
  .detail-page--v4 #client-content > .detail-hero-v4 { min-height: 420px; padding: 54px 18px; }
  .detail-hero-v4__content { width: 100%; padding-top: 48px; }
  .detail-page--v4 .detail-hero-v4 h1 { font-size: clamp(3.5rem,17vw,5.8rem); }
  .detail-hero-v4__count { top: 28px; right: 18px; }
  .detail-hero-v4__bottom { align-items: start; flex-direction: column; gap: 20px; margin-top: 24px; }
  .detail-gallery-v5 { min-height: 420px; padding: 54px 16px 70px; }
  .detail-gallery-v5__top { align-items: stretch; flex-direction: column; gap: 20px; margin-bottom: 22px; }
  .detail-gallery-v5__actions { align-items: stretch; flex-direction: column; }
  .detail-gallery-v5__tabs { width: fit-content; }
  .detail-gallery-v5__visit { width: fit-content; }
  .detail-gallery-v5__grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .detail-gallery-v5__grid > button { padding: 7px; border-radius: 10px; }
}

@media (max-width: 390px) {
  .detail-gallery-v5__tabs { width: 100%; }
  .detail-gallery-v5__tabs button { flex: 1; justify-content: center; padding-inline: 10px; }
}

/* Final Hostinger flow overrides: keep all service cards connected and non-sticky. */
.services-v3 { overflow: hidden !important; }
.services-v3 .service-stack { display: grid !important; min-height: 0 !important; gap: 14px !important; padding: 0 !important; perspective: none !important; }
.services-v3 .service-panel,
.services-v3 .service-panel:not(:last-child) { position: relative !important; inset: auto !important; top: auto !important; z-index: auto !important; margin: 0 !important; transform: none !important; will-change: auto !important; }
.services-v3 .service-panel:hover { transform: none !important; }
.editor-body .editor-shell { min-height: 100vh; }
.editor-body .editor-sidebar { background: radial-gradient(circle at 8% 8%,rgba(255,107,0,.18),transparent 24%),linear-gradient(180deg,#24081f,#160712); }
.editor-body .editor-form > section { position: relative; }
.editor-body .media-strip { overflow: visible; }
.editor-body .media-strip figure { width: auto; }
.editor-body .media-strip img,
.editor-body .media-strip video { width: 100%; height: 190px; object-fit: contain; }

@media (max-width: 760px) {
  .services-v3 .service-stack { gap: 10px !important; }
  .services-v3 .service-panel { border-radius: 14px !important; }
}

/* Fekra portfolio v6 — flexible ordering and source-accurate media ratios. */
.editor-body .client-list { gap: 7px; }
.editor-body .client-list__item {
  display: grid;
  grid-template-columns: 30px minmax(0,1fr);
  align-items: stretch;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  transition: border-color .2s ease,background .2s ease,opacity .2s ease,transform .2s ease,box-shadow .2s ease;
}
.editor-body .client-list__item:hover,
.editor-body .client-list__item.selected { border-color: rgba(217,255,55,.32); background: rgba(255,255,255,.08); }
.editor-body .client-list__item > [data-client-id] {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 12px 10px 12px 4px;
  color: rgba(255,255,255,.7);
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.editor-body .client-list__item.selected > [data-client-id],
.editor-body .client-list__item:hover > [data-client-id] { color: #fff; }
.editor-body .client-list__item > [data-client-id] > span { color: #d9ff37; font-family: var(--display); font-size: 1rem; }
.editor-body .client-list__item b,
.editor-body .client-list__item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-body .client-list__item b { font-size: .76rem; }
.editor-body .client-list__item small { margin-top: 4px; color: rgba(255,255,255,.48); font-size: .53rem; }
.sort-handle {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.sort-handle:active { cursor: grabbing; }
.sort-handle--client { color: rgba(255,255,255,.58); background: rgba(255,255,255,.045); font-size: .82rem; letter-spacing: -3px; }
.sort-handle--client:hover { color: #d9ff37; background: rgba(217,255,55,.1); }
.editor-body .media-group-editor > h3 small { margin-left: 4px; color: #8c7c87; font-size: .56rem; font-weight: 750; letter-spacing: .04em; }
.editor-body .media-strip figure {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  transition: opacity .2s ease,transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.editor-body .media-strip img,
.editor-body .media-strip video {
  width: 100%;
  height: auto;
  min-height: 150px;
  max-height: 310px;
  aspect-ratio: var(--media-ratio,1 / 1);
  object-fit: contain;
  background: #21101e;
}
.sort-handle--media {
  position: absolute;
  z-index: 4;
  top: 8px;
  left: 8px;
  width: 38px;
  height: 38px;
  color: #21101e;
  border: 1px solid rgba(33,16,30,.15);
  border-radius: 999px;
  background: rgba(217,255,55,.95);
  box-shadow: 0 8px 22px rgba(20,5,17,.18);
  font-size: .8rem;
  font-weight: 950;
  letter-spacing: -3px;
  backdrop-filter: blur(8px);
}
.sort-handle--media:hover { background: #ffbd21; transform: scale(1.06); }
.client-list__item.is-dragging,
.media-strip figure.is-dragging { z-index: 20; opacity: .58; border-color: #ff7900; box-shadow: 0 20px 50px rgba(42,9,36,.22); transform: scale(.975); }
body.is-sorting { cursor: grabbing; user-select: none; }

.detail-gallery-v5__grid[data-kind="videos"] > button {
  min-height: 0;
  aspect-ratio: var(--media-ratio,16 / 9);
}
.detail-gallery-v5__grid[data-kind="videos"] > button[data-orientation="portrait"] { align-self: start; }
.detail-gallery-v5__grid[data-kind="videos"] video { object-fit: contain; }

@media (max-width: 560px) {
  .editor-body .client-list__item { grid-template-columns: 34px minmax(0,1fr); }
  .editor-body .media-strip img,.editor-body .media-strip video { max-height: 68vh; }
}

/* Fekra Portfolio v4 final update — wide editor, multi-client uploads and legible client cards. */
.editor-shell--v4 { display: block; min-height: 100vh; }
.editor-shell--v4 .editor-sidebar { position: fixed; inset: 0 auto 0 0; width: 310px; }
.editor-shell--v4 .editor-main { min-width: 0; margin-left: 310px; }
.editor-shell--v4 .editor-form {
  width: min(1480px,100%);
  max-width: 1480px;
  margin: 0 auto;
  padding: clamp(30px,4vw,64px) clamp(20px,3.5vw,56px) 110px;
}
.editor-shell--v4 .editor-form > section { padding: clamp(28px,3vw,50px); }
.editor-shell--v4 .editor-form label { font-size: .75rem; }
.editor-shell--v4 .editor-help { max-width: 900px; color: #685a64; font-size: .94rem; }
.editor-shell--v4 .form-kicker { color: #d95800; font-size: .72rem; letter-spacing: .12em; }
.editor-shell--v4 .editor-form h2 { font-size: clamp(2.35rem,3.6vw,4.2rem); }
.editor-shell--v4 .project-type-grid > button span strong { display: block; font-size: 1.05rem; }
.editor-shell--v4 .project-type-grid > button span small { font-size: .75rem; }
.editor-shell--v4 .upload-box--v4 { min-height: 210px; }
.editor-shell--v4 .upload-box--combined { min-height: 245px; }
.editor-shell--v4 .upload-box--v4 > b { font-size: .96rem; }
.editor-shell--v4 .upload-box--v4 > span { font-size: .75rem; }
.editor-shell--v4 .upload-box--v4.is-dragover {
  border-color: #ff6b00;
  background: linear-gradient(145deg,#fff0d7,#ffe6f3);
  box-shadow: 0 0 0 5px rgba(255,107,0,.11),0 22px 55px rgba(63,17,56,.12);
  transform: translateY(-4px) scale(1.005);
}
.editor-body .client-list__item.is-uploading { border-color: rgba(255,189,33,.58); }
.editor-body .client-list__item.is-uploading small { color: #ffcf51; }
.editor-body .client-list__item b { font-size: .82rem; }
.editor-body .client-list__item small { font-size: .6rem; }
.editor-body .media-group-editor > h3 { font-size: 1rem; }
.editor-body .media-group-editor > h3 small { font-size: .64rem; }

.upload-dock {
  position: fixed;
  z-index: 90;
  right: 24px;
  bottom: 0;
  display: none;
  width: min(370px,calc(100vw - 32px));
  max-height: min(72vh,680px);
  flex-direction: column-reverse;
  gap: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  direction: ltr;
}
.upload-dock.has-jobs { display: flex; }
.upload-job {
  flex: 0 0 auto;
  overflow: hidden;
  color: #202124;
  border: 1px solid #dadce0;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #fff;
  box-shadow: 0 2px 12px rgba(60,64,67,.32);
  contain: layout paint;
}
.upload-job > header { display: grid; min-height: 60px; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 12px; padding: 11px 14px 10px 16px; color: #fff; background: #323232; }
.upload-job > header div { min-width: 0; }
.upload-job > header b,.upload-job > header span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-job > header b { font-size: .88rem; font-weight: 650; line-height: 1.35; }
.upload-job > header span { margin-top: 2px; color: #d2d2d2; font-size: .72rem; line-height: 1.35; }
.upload-job > header strong { min-width: 42px; color: #fff; font-size: .8rem; font-weight: 600; text-align: right; }
.upload-job > header button { display: grid; width: 28px; height: 28px; place-items: center; padding: 0; color: #fff; border: 0; border-radius: 50%; background: transparent; font-size: 1.15rem; cursor: pointer; }
.upload-job > header button:hover { background: rgba(255,255,255,.14); }
.upload-files { display: grid; max-height: 300px; padding: 0; overflow-y: auto; background: #fff; }
.upload-file { display: grid; min-height: 66px; grid-template-columns: 30px minmax(0,1fr) 32px; align-items: center; gap: 10px; padding: 10px 12px 9px 15px; border-bottom: 1px solid #edf0f2; }
.upload-file:last-child { border-bottom: 0; }
.upload-file__icon { display: grid; width: 28px; height: 28px; place-items: center; color: #1a73e8; border-radius: 4px; background: #e8f0fe; font-size: .65rem; font-weight: 800; }
.upload-file > div { min-width: 0; }
.upload-file > div > b,.upload-file > div > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-file > div > b { color: #202124; font-size: .76rem; font-weight: 550; line-height: 1.35; }
.upload-file > div > span { margin-top: 3px; color: #5f6368; font-size: .66rem; line-height: 1.3; }
.upload-file > div > i { display: block; height: 3px; margin-top: 7px; overflow: hidden; border-radius: 99px; background: #e8eaed; }
.upload-file > div > i > span { display: block; width: 0; height: 100%; background: #1a73e8; }
.upload-file > button { display: grid; width: 30px; height: 30px; place-items: center; padding: 0; color: #5f6368; border: 0; border-radius: 50%; background: transparent; font-size: 1.12rem; line-height: 1; cursor: pointer; }
.upload-file > button:hover { color: #202124; background: #f1f3f4; }
.upload-file > button:disabled { cursor: default; opacity: .42; }
.upload-file[data-state="complete"] .upload-file__icon { color: #fff; background: #188038; }
.upload-file[data-state="complete"] .upload-file__icon::before { content: "✓"; }
.upload-file[data-state="complete"] .upload-file__icon { font-size: 0; }
.upload-file[data-state="complete"] .upload-file__icon::before { font-size: .72rem; }
.upload-file[data-state="complete"] > div > i > span { background: #188038; }
.upload-file[data-state="cancelled"] { opacity: .62; }
.upload-file[data-state="cancelled"] .upload-file__icon,.upload-file[data-state="failed"] .upload-file__icon { color: #d93025; background: #fce8e6; }
.upload-file[data-state="cancelled"] > div > i > span,.upload-file[data-state="failed"] > div > i > span { background: #d93025; }
.upload-job > footer { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px 10px; color: #3c4043; background: #fff; font-size: .74rem; line-height: 1.4; }
.upload-job > footer span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-job > footer em { min-width: max-content; color: #5f6368; font-style: normal; font-weight: 600; }
.upload-job > i { display: block; height: 4px; overflow: hidden; background: #e8eaed; }
.upload-job > i span { display: block; width: 0; height: 100%; background: #1a73e8; }
.upload-job--complete > i span { background: #188038; }
.upload-job--complete > footer::before { content: "✓"; display: grid; width: 22px; height: 22px; flex: 0 0 22px; place-items: center; color: #fff; border-radius: 50%; background: #188038; font-size: .7rem; font-weight: 800; }
.upload-job--complete > footer span { margin-right: auto; }
.upload-job--failed > i span,.upload-job--interrupted > i span { background: #d93025; }

.client-grid-v3 { grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(12px,1.35vw,22px); }
.client-card-v3,.client-card-v3:nth-child(3n + 1) { grid-column: auto; }
.client-card-v3__visual { padding: clamp(16px,2vw,30px); border-radius: 18px; }
.client-card-v3__body { display: block; min-width: 0; padding: 18px 2px 34px; }
.client-card-v3__body p {
  min-height: 2.7em;
  margin: 0 0 9px;
  color: rgba(255,255,255,.76);
  font-size: clamp(.66rem,.66vw,.76rem);
  font-weight: 900;
  letter-spacing: .09em;
  line-height: 1.35;
}
.client-card-v3__body h3 { font-size: clamp(1.75rem,2vw,2.35rem); line-height: .95; }
.client-card-v3__tags { display: flex; max-width: none; justify-content: flex-start; gap: 7px; margin-top: 14px; }
.client-card-v3__tags span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 8px 11px;
  color: #e4ff62;
  border-color: rgba(217,255,55,.58);
  font-size: .63rem;
  font-weight: 950;
  letter-spacing: .04em;
  line-height: 1.1;
  white-space: nowrap;
}
.client-card-v3__index { top: 12px; left: 12px; width: 38px; height: 38px; }
.client-card-v3__arrow { right: 12px; bottom: 12px; width: 46px; height: 46px; }

.detail-hero-v4__types { gap: 9px; margin-bottom: 22px; }
.detail-hero-v4__types span { padding: 9px 13px; font-size: .7rem; letter-spacing: .06em; white-space: nowrap; }
.detail-hero-v4__content > p { color: #ffd14f; font-size: clamp(.76rem,.85vw,.92rem); letter-spacing: .12em; line-height: 1.45; }
.detail-hero-v4__bottom > p { max-width: 760px; color: rgba(255,255,255,.86); font-size: clamp(1rem,1.25vw,1.2rem); font-weight: 520; line-height: 1.7; }
.detail-hero-v4__count { gap: 8px 12px; }
.detail-hero-v4__count b { font-size: 2.45rem; }
.detail-hero-v4__count span { color: rgba(255,255,255,.85); font-size: .66rem; }
.detail-gallery-v5__top p { font-size: .72rem; }
.detail-gallery-v5__tabs button,.detail-gallery-v5__visit { font-size: .68rem; }
.detail-gallery-v5__grid > button,.client-card-v3__visual,[data-protected-media],.lightbox img,.lightbox video {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
video::-webkit-media-controls-download-button { display: none !important; }
video::-internal-media-controls-download-button { display: none !important; }

/* Maintenance v5 final cascade guards. */
.hero-cockpit { transform: perspective(1000px) rotateX(var(--cockpit-rx,0deg)) rotateY(var(--cockpit-ry,0deg)) translateZ(0); transition: transform .34s cubic-bezier(.2,.8,.2,1); contain: layout paint style; }
.cockpit-glow { border-radius:50%; filter:blur(30px); animation:v5GlowOrbit 14s linear infinite; will-change:transform,opacity; }
.cockpit-core { border-radius:48% 52% 46% 54% / 52% 46% 54% 48%; animation:v5CorePulse 4.8s ease-in-out infinite; will-change:transform; }
.cockpit-card { backdrop-filter:none; -webkit-backdrop-filter:none; contain:paint; }
.contact-v3__detail:hover > i { transform:translateY(-2px) scale(1.06); }
.contact-v3__shape.social-constellation { display:block; border:2px solid rgba(22,9,18,.82); border-radius:50%; animation:v5Constellation 18s linear infinite; }
.detail-gallery-v5__grid[data-kind="videos"] > button { padding:0; background:#170714; }

@media (max-width: 1180px) {
  .client-grid-v3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .editor-shell--v4 .editor-sidebar { position: relative; width: 100%; }
  .editor-shell--v4 .editor-main { margin-left: 0; }
  .editor-shell--v4 .editor-form { padding-inline: 18px; }
  .client-grid-v3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .portfolio-v3 .work-v3 { padding-inline: 14px; }
  .client-grid-v3 { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .client-card-v3,.client-card-v3:nth-child(3n + 1) { grid-column: auto; }
  .client-card-v3__visual { padding: 12px; border-radius: 13px; }
  .client-card-v3__body { padding: 13px 1px 25px; }
  .client-card-v3__body p { min-height: 3.6em; margin-bottom: 7px; font-size: .59rem; line-height: 1.3; }
  .client-card-v3__body h3 { font-size: clamp(1.28rem,6vw,1.75rem); }
  .client-card-v3__tags { gap: 5px; margin-top: 10px; }
  .client-card-v3__tags span { min-height: 30px; padding: 7px 8px; font-size: .54rem; }
  .client-card-v3__index { top: 7px; left: 7px; width: 30px; height: 30px; font-size: .55rem; }
  .client-card-v3__arrow { right: 7px; bottom: 7px; width: 34px; height: 34px; }
  .detail-hero-v4__content > p { font-size: .72rem; }
  .detail-hero-v4__bottom > p { font-size: 1rem; }
  .detail-hero-v4__types span { font-size: .62rem; }
  .detail-hero-v4__count { position: relative; top: auto; right: auto; display: flex; align-items: baseline; margin-top: 22px; }
  .detail-hero-v4__count b { font-size: 1.8rem; }
  .detail-hero-v4__count span { margin-right: 10px; font-size: .6rem; }
  .upload-dock { right: 10px; bottom: 0; width: calc(100vw - 20px); max-height: 58vh; }
  .cockpit-glow { filter:blur(18px); }
  .contact-v3__detail { backdrop-filter:none; -webkit-backdrop-filter:none; }
}

/* Keep project media totals in the normal mobile layout so they never cover the title. */
@media (max-width: 760px) {
  .detail-page--v4 #client-content > .detail-hero-v4 > .detail-hero-v4__count {
    position: relative;
    top: auto;
    right: auto;
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 22px;
  }
}

.services-v3::before { content:"▶"; display:grid; place-items:center; width:clamp(72px,9vw,128px); aspect-ratio:1; color:var(--v3-ink); border:2px solid var(--v3-ink); border-radius:28%; background:var(--v3-pink); font-size:clamp(2rem,4vw,4rem); box-shadow:0 16px 42px rgba(255,63,155,.2); animation:v5SignalFloat 5.4s ease-in-out infinite; }


/* ==========================================================================
   FEKRA ELITE REBRAND v60 — Loud Ideas, Controlled
   Public experience only. Editor and functional contracts remain untouched.
   ========================================================================== */
:root{
  --f-ink:#11100f;
  --f-paper:#f2efe7;
  --f-acid:#d8ff39;
  --f-orange:#ff5a1f;
  --f-muted:#837f76;
  --f-rule:rgba(17,16,15,.18);
  --f-display:"Arial Black","Helvetica Neue",Arial,sans-serif;
  --f-body:"Helvetica Neue",Arial,sans-serif;
}
html{scroll-behavior:smooth}
body{margin:0;background:var(--f-paper);color:var(--f-ink);font-family:var(--f-body)}
.public-site{overflow:clip;background:var(--f-paper)}
.public-site *{box-sizing:border-box}
.public-site a{color:inherit}
.section{padding-inline:clamp(22px,4vw,72px)}
.nav-v3{
  position:absolute;inset:0 0 auto;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;padding:22px clamp(22px,4vw,72px);color:var(--f-paper);background:transparent;
}
.brand-v3{display:flex;align-items:center;gap:16px;width:max-content;text-decoration:none}
.brand-v3 img{width:112px;height:auto;filter:brightness(0) invert(1)}
.brand-v3 span{font-size:10px;line-height:1.1;letter-spacing:.13em;text-transform:uppercase;opacity:.6}
.nav-v3__links{display:flex;gap:30px}
.nav-v3__links a{display:flex;gap:8px;font-size:12px;text-decoration:none}
.nav-v3__links b{font-size:9px;font-weight:500;opacity:.5}
.nav-v3__cta{justify-self:end;display:flex;align-items:center;gap:20px;padding:8px 8px 8px 18px;border:1px solid rgba(255,255,255,.35);border-radius:999px;text-decoration:none;font-size:12px}
.nav-v3__cta i{display:grid;width:34px;height:34px;place-items:center;border-radius:50%;background:var(--f-acid);color:var(--f-ink);font-style:normal;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.nav-v3__cta:hover i{transform:rotate(45deg)}
.hero-v3{
  position:relative;min-height:100svh;padding:clamp(126px,15vh,170px) clamp(22px,4vw,72px) 46px;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);gap:4vw;align-items:end;
  background:var(--f-ink);color:var(--f-paper);
}
.hero-v3::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 49.95%,rgba(255,255,255,.08) 50%,transparent 50.05%)}
.hero-v3__noise{opacity:.09;mix-blend-mode:screen}
.hero-v3__copy{position:relative;z-index:3;align-self:center}
.hero-v3__kicker{display:flex;align-items:center;gap:10px;margin:0 0 28px;font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.hero-v3__kicker i{width:7px;height:7px;border-radius:50%;background:var(--f-acid);box-shadow:none}
.hero-v3__kicker span{margin-left:auto;opacity:.48}
.hero-v3 h1{margin:0;font-family:var(--f-display);font-size:clamp(4.2rem,8.6vw,10.8rem);font-weight:900;line-height:.78;letter-spacing:-.075em;text-transform:uppercase}
.hero-line{display:block;overflow:hidden}
.hero-line>span{display:block;transform-origin:left center}
.hero-line--accent>span{color:var(--f-acid)}
.hero-v3__bottom{display:grid;grid-template-columns:minmax(220px,390px) auto;gap:34px;align-items:end;margin-top:42px;padding-top:18px;border-top:1px solid rgba(255,255,255,.18)}
.hero-v3__bottom p{margin:0;font-size:clamp(.95rem,1.2vw,1.15rem);line-height:1.45;color:rgba(242,239,231,.7)}
.hero-v3__bottom a{justify-self:end;font-size:12px;text-decoration:none;text-transform:uppercase;letter-spacing:.08em}
.hero-v3__stamp{position:absolute;right:clamp(22px,4vw,72px);bottom:22px;display:flex;gap:12px;align-items:center;font-size:9px;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
.hero-v3__stamp i{font-style:normal}
.hero-assembly{
  --cockpit-rx:0deg;--cockpit-ry:0deg;position:relative;z-index:2;align-self:center;width:min(100%,720px);aspect-ratio:1;
  border:1px solid rgba(255,255,255,.18);overflow:hidden;transform:perspective(1200px) rotateX(var(--cockpit-rx)) rotateY(var(--cockpit-ry));
  transition:transform .45s cubic-bezier(.2,.8,.2,1);background:#171614;
}
.assembly-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.075) 1px,transparent 1px);background-size:12.5% 12.5%}
.assembly-note{position:absolute;z-index:2;display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:.14em}
.assembly-note--top{inset:20px 22px auto}
.assembly-note b{font-weight:500;color:var(--f-acid)}
.assembly-word{position:absolute;inset:19% 4% auto;display:flex;justify-content:space-between;font-family:var(--f-display);font-size:clamp(4rem,8vw,9rem);font-weight:900;line-height:1;color:rgba(255,255,255,.08)}
.assembly-word span:nth-child(2),.assembly-word span:nth-child(4){transform:translateY(16%)}
.assembly-card{position:absolute;z-index:4;padding:15px;border:1px solid rgba(255,255,255,.22);background:rgba(17,16,15,.94);box-shadow:12px 12px 0 rgba(0,0,0,.28)}
.assembly-card small,.assembly-card em{font-size:8px;letter-spacing:.13em;text-transform:uppercase;font-style:normal}
.assembly-card--signal{left:8%;top:43%;width:32%;background:var(--f-acid);color:var(--f-ink);transform:rotate(-5deg)}
.assembly-card--signal strong{display:block;font-family:var(--f-display);font-size:clamp(2rem,4vw,4.5rem);line-height:.9;letter-spacing:-.06em}
.assembly-card--signal i{font-size:10px;font-style:normal}
.assembly-card--strategy{right:8%;top:22%;width:28%;transform:rotate(4deg)}
.assembly-card--craft{right:21%;bottom:18%;width:30%;transform:rotate(-2deg);background:var(--f-orange)}
.assembly-card--launch{left:13%;bottom:8%;width:27%;transform:rotate(3deg)}
.assembly-card span{display:block;margin-bottom:18px;color:var(--f-acid);font-size:9px}
.assembly-card b{display:block;margin-bottom:18px;font-size:clamp(1rem,1.8vw,1.7rem);line-height:.94;text-transform:uppercase}
.assembly-card--craft span,.assembly-card--craft em{color:var(--f-ink)}
.assembly-path{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:rgba(216,255,57,.65);stroke-width:1.5;stroke-dasharray:6 7}
.assembly-path circle{fill:var(--f-acid);stroke:none}
.assembly-output{position:absolute;right:18px;bottom:18px;display:grid;justify-items:end;font-size:8px;letter-spacing:.12em}
.assembly-output b{margin-top:4px;font-size:12px;color:var(--f-acid)}
.idea-rail{border:0;background:var(--f-acid);color:var(--f-ink);transform:rotate(-1deg) scale(1.02)}
.idea-rail .marquee__track{padding:13px 0}
.idea-rail span{font-family:var(--f-display);font-size:clamp(1rem,2vw,1.8rem);text-transform:uppercase}
.idea-rail b{color:var(--f-orange)}
.manifesto-v4{display:grid;grid-template-columns:180px minmax(0,1fr);gap:6vw;padding-top:clamp(100px,14vw,190px);padding-bottom:clamp(100px,14vw,190px)}
.manifesto-v4__index,.chapter-marker{display:flex;align-items:flex-start;gap:12px;font-size:9px;letter-spacing:.15em;text-transform:uppercase}
.manifesto-v4__index i,.chapter-marker i{flex:1;height:1px;margin-top:6px;background:var(--f-rule)}
.manifesto-v4__index b,.chapter-marker b{font-weight:600;white-space:nowrap}
.manifesto-v4__lead{max-width:1180px;margin:0;font-size:clamp(2.4rem,5.5vw,6.5rem);line-height:.95;letter-spacing:-.06em}
.manifesto-v4__lead em{font-family:var(--f-display);font-style:normal;text-transform:uppercase;color:var(--f-orange)}
.manifesto-v4__meta{grid-column:2;display:flex;justify-content:space-between;gap:20px;margin-top:48px;padding-top:16px;border-top:1px solid var(--f-rule);font-size:11px;text-transform:uppercase}
.services-v3{padding-top:40px;padding-bottom:clamp(110px,15vw,190px);background:var(--f-ink);color:var(--f-paper)}
.section-head-v3{display:grid;grid-template-columns:180px minmax(0,1fr) minmax(180px,280px);gap:6vw;align-items:start;padding-bottom:64px}
.section-head-v3 p,.section-head-v3 span{margin:0;font-size:10px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:rgba(242,239,231,.55)}
.section-head-v3 h2{margin:0;font-size:clamp(2.5rem,5vw,6rem);font-weight:400;line-height:.92;letter-spacing:-.05em}
.section-head-v3 h2 em{font-family:var(--f-display);font-style:normal;color:var(--f-acid);text-transform:uppercase}
.service-stack{display:grid!important;gap:0!important;border-top:1px solid rgba(255,255,255,.2)}
.service-panel,.service-panel:not(:last-child){
  min-height:230px!important;display:grid!important;grid-template-columns:100px minmax(280px,.8fr) minmax(300px,1fr) 50px!important;
  align-items:center!important;gap:3vw!important;padding:32px 0!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.2)!important;
  border-radius:0!important;background:transparent!important;color:inherit!important;transition:background .35s,color .35s!important;
}
.service-panel:hover{background:var(--f-acid)!important;color:var(--f-ink)!important}
.service-panel__lead{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between}
.service-panel__lead span{font-size:11px}
.service-panel__lead b{font-size:3rem!important;color:var(--f-acid)}
.service-panel:hover .service-panel__lead b{color:var(--f-orange)}
.service-panel__title small{display:block;margin-bottom:14px;font-size:9px;letter-spacing:.12em;text-transform:uppercase;opacity:.55}
.service-panel__title h3{margin:0;font-family:var(--f-display);font-size:clamp(2rem,4.5vw,5.8rem);line-height:.84;letter-spacing:-.06em;text-transform:uppercase}
.service-panel__details{display:grid;grid-template-columns:minmax(180px,1fr) minmax(160px,.8fr);gap:30px}
.service-panel__details p{margin:0;font-size:clamp(.95rem,1.2vw,1.15rem);line-height:1.45;opacity:.7}
.service-panel__details ul{margin:0;padding:0;list-style:none;columns:2}
.service-panel__details li{margin:0 0 8px;font-size:10px;text-transform:uppercase}
.service-panel__arrow{font-size:2.5rem!important;transition:transform .35s}
.service-panel:hover .service-panel__arrow{transform:rotate(-35deg)}
.work-v3{padding-top:clamp(90px,12vw,150px);padding-bottom:clamp(110px,15vw,190px);background:var(--f-paper)}
.chapter-marker{margin-bottom:70px}
.work-v3__head{display:grid;grid-template-columns:1fr 260px;gap:30px;align-items:end}
.work-v3__head p{font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.work-v3__head h2{margin:20px 0 0;font-size:clamp(3.2rem,7vw,8.5rem);line-height:.79;letter-spacing:-.07em;font-weight:400}
.work-v3__head h2 em{font-family:var(--f-display);font-style:normal;text-transform:uppercase;color:var(--f-orange)}
.work-v3__head>span{padding-bottom:10px;font-size:11px;line-height:1.5;text-transform:uppercase}
.filter-v3{display:flex;gap:5px;margin:58px 0 36px;border-top:1px solid var(--f-rule);padding-top:14px}
.filter-v3 button{padding:10px 16px;border:1px solid var(--f-rule);border-radius:0;background:transparent;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.filter-v3 button.active{background:var(--f-ink);color:var(--f-paper)}
.client-grid-v3{display:grid!important;grid-template-columns:repeat(12,1fr)!important;gap:clamp(18px,2.4vw,38px)!important}
.client-card-v3{grid-column:span 6;display:block;text-decoration:none}
.client-card-v3:nth-child(4n+2),.client-card-v3:nth-child(4n+3){grid-column:span 5}
.client-card-v3:nth-child(4n+3){grid-column-start:3}
.client-card-v3__visual{position:relative;aspect-ratio:4/3!important;overflow:hidden!important;border-radius:0!important;background:#d9d4c9!important}
.client-card-v3:nth-child(3n+2) .client-card-v3__visual{aspect-ratio:3/4!important}
.client-card-v3__visual>img{object-fit:cover!important;filter:saturate(.82);transition:transform .8s cubic-bezier(.16,1,.3,1),filter .5s}
.client-card-v3:hover .client-card-v3__visual>img{transform:scale(1.035);filter:saturate(1)}
.client-card-v3__visual::after{content:"VIEW SIGNAL ↗";position:absolute;inset:auto 14px 14px auto;padding:9px 12px;background:var(--f-acid);color:var(--f-ink);font-size:9px;letter-spacing:.1em;transform:translateY(150%);transition:transform .35s}
.client-card-v3:hover .client-card-v3__visual::after{transform:none}
.client-card-v3__index{top:12px!important;left:12px!important;padding:7px 9px!important;border-radius:0!important;background:var(--f-ink)!important;color:var(--f-paper)!important}
.client-card-v3__arrow{display:none!important}
.client-card-v3__body{display:grid!important;grid-template-columns:1fr auto!important;gap:18px!important;padding:14px 0 48px!important;border-top:0!important}
.client-card-v3__body p{margin:0 0 7px;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--f-muted)}
.client-card-v3__body h3{margin:0;font-family:var(--f-display);font-size:clamp(1.6rem,2.7vw,3.2rem);line-height:.9;text-transform:uppercase;letter-spacing:-.045em}
.client-card-v3__tags{display:flex!important;align-items:flex-start;gap:5px!important}
.client-card-v3__tags span{padding:6px 8px!important;border:1px solid var(--f-rule)!important;border-radius:0!important;background:transparent!important;font-size:8px!important;text-transform:uppercase}
.contact-v3{position:relative;padding-top:38px;padding-bottom:40px;background:var(--f-orange);color:var(--f-ink)}
.chapter-marker--light{margin-bottom:clamp(70px,10vw,130px)}
.contact-v3__top{border-top:1px solid rgba(17,16,15,.25);padding-top:14px}
.contact-v3__top p,.contact-v3__top span{font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.contact-v3__word{margin:0;font-family:var(--f-display);font-size:clamp(4rem,11vw,13.5rem)!important;line-height:.73!important;letter-spacing:-.075em!important;text-transform:uppercase}
.contact-v3__word--outline{-webkit-text-stroke:2px var(--f-ink);color:transparent!important}
.contact-v3__details{margin-top:80px;border-color:rgba(17,16,15,.25)!important}
.contact-v3__detail{color:inherit!important}
.contact-v3__detail i{border-color:rgba(17,16,15,.3)!important}
.contact-v3__shape{opacity:.22}
.footer-v3{padding:22px clamp(22px,4vw,72px)!important;background:var(--f-ink)!important;color:rgba(242,239,231,.6)!important}
.reveal{opacity:1;transform:none}
.js-motion .reveal{opacity:0;transform:translateY(22px)}
.js-motion .reveal.is-visible{opacity:1;transform:none}

@media (max-width:980px){
  .nav-v3{grid-template-columns:1fr auto}.nav-v3__links{display:none}
  .brand-v3 span{display:none}
  .hero-v3{grid-template-columns:1fr;align-items:start;padding-top:130px}
  .hero-v3__copy{align-self:start}
  .hero-assembly{width:min(100%,620px);justify-self:end;margin-top:30px}
  .manifesto-v4{grid-template-columns:1fr}.manifesto-v4__lead,.manifesto-v4__meta{grid-column:1}
  .section-head-v3{grid-template-columns:1fr}.section-head-v3 span{max-width:320px}
  .service-panel,.service-panel:not(:last-child){grid-template-columns:62px 1fr!important}
  .service-panel__details{grid-column:2}.service-panel__arrow{grid-column:1;grid-row:2}
}
@media (max-width:680px){
  .nav-v3{padding:16px 18px}.brand-v3 img{width:92px}.nav-v3__cta span{display:none}.nav-v3__cta{padding:5px;border:0}
  .hero-v3{min-height:auto;padding:116px 18px 32px;display:block}
  .hero-v3 h1{font-size:clamp(3.65rem,18vw,6.8rem);line-height:.8}
  .hero-v3__bottom{grid-template-columns:1fr;margin-top:28px}.hero-v3__bottom a{justify-self:start}
  .hero-assembly{aspect-ratio:.9;margin-top:48px}.assembly-card{padding:10px}
  .assembly-card--signal{width:40%;left:4%}.assembly-card--strategy{width:37%;right:4%}.assembly-card--craft{width:40%;right:8%}.assembly-card--launch{width:37%;left:5%}
  .assembly-word{font-size:20vw}
  .hero-v3__stamp{display:none}
  .manifesto-v4{padding:90px 18px}.manifesto-v4__meta{display:grid;margin-top:30px}
  .services-v3,.work-v3,.contact-v3{padding-inline:18px}
  .section-head-v3{padding-bottom:38px}
  .service-panel,.service-panel:not(:last-child){min-height:0!important;grid-template-columns:42px 1fr!important;gap:18px!important;padding:28px 0!important}
  .service-panel__title h3{font-size:clamp(2rem,11vw,4rem)}
  .service-panel__details{grid-template-columns:1fr}.service-panel__details ul{columns:1}
  .service-panel__arrow{display:none}
  .work-v3__head{grid-template-columns:1fr}.work-v3__head>span{max-width:240px}
  .client-grid-v3{display:block!important}.client-card-v3{margin-bottom:24px}
  .client-card-v3:nth-child(3n+2) .client-card-v3__visual{aspect-ratio:4/5!important}
  .client-card-v3__body{grid-template-columns:1fr!important}.client-card-v3__tags{display:none!important}
  .contact-v3__details{display:grid!important;gap:18px!important;margin-top:54px!important}
  .contact-v3__word--outline{-webkit-text-stroke:1px var(--f-ink)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-assembly,.client-card-v3__visual>img,.nav-v3__cta i{transition:none!important;transform:none!important}
  .js-motion .reveal{opacity:1!important;transform:none!important}
}

/* FEKRA ELITE REBRAND v60 — project detail */
.detail-page--v4{min-height:100vh;background:var(--f-paper);color:var(--f-ink);font-family:var(--f-body)}
.detail-nav-v4{position:absolute;z-index:30;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:22px clamp(22px,4vw,72px);color:var(--f-paper)}
.detail-nav-v4 img{width:110px;filter:brightness(0) invert(1)}
.detail-nav-v4 a:last-child{padding:10px 14px;border:1px solid rgba(255,255,255,.3);border-radius:999px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.detail-hero-v4{position:relative;min-height:88svh;padding:150px clamp(22px,4vw,72px) 52px;display:grid;align-items:end;overflow:hidden;background:var(--f-ink);color:var(--f-paper)}
.detail-hero-v4__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:12.5% 12.5%}
.detail-hero-v4__orb{display:none}
.detail-hero-v4__content{position:relative;z-index:2;max-width:1200px}
.detail-hero-v4__types{display:flex;gap:6px;margin-bottom:24px}
.detail-hero-v4__types span{padding:7px 9px;border:1px solid rgba(255,255,255,.25);font-size:8px;letter-spacing:.12em;text-transform:uppercase}
.detail-hero-v4__content>p{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--f-acid)}
.detail-hero-v4 h1{margin:18px 0 38px;font-family:var(--f-display);font-size:clamp(4.5rem,12vw,14rem);line-height:.76;letter-spacing:-.075em;text-transform:uppercase}
.detail-hero-v4__bottom{max-width:600px;padding-top:18px;border-top:1px solid rgba(255,255,255,.22)}
.detail-hero-v4__bottom p{margin:0;font-size:clamp(1rem,1.3vw,1.25rem);line-height:1.5;color:rgba(242,239,231,.7)}
.detail-hero-v4__count{position:absolute;z-index:2;right:clamp(22px,4vw,72px);bottom:52px;display:grid;grid-template-columns:auto auto;gap:3px 12px;align-items:baseline}
.detail-hero-v4__count b{font-family:var(--f-display);font-size:1.8rem}
.detail-hero-v4__count span{font-size:8px;letter-spacing:.12em;text-transform:uppercase}
.detail-gallery-v5{padding:clamp(80px,10vw,140px) clamp(22px,4vw,72px)}
.detail-gallery-v5__top{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;margin-bottom:48px;padding-bottom:18px;border-bottom:1px solid var(--f-rule)}
.detail-gallery-v5__top p{font-size:9px;letter-spacing:.14em;text-transform:uppercase}
.detail-gallery-v5__top h2{margin:12px 0 0;font-size:clamp(2.6rem,5vw,6rem);line-height:.9;letter-spacing:-.05em}
.detail-gallery-v5__tabs button,.detail-gallery-v5__visit{border-radius:0!important}
.detail-gallery-v5__grid{display:grid!important;grid-template-columns:repeat(12,1fr)!important;gap:clamp(14px,2vw,28px)!important}
.detail-gallery-v5__grid>button{grid-column:span 6;border:0;padding:0;background:#d9d4c9;overflow:hidden;cursor:zoom-in}
.detail-gallery-v5__grid>button:nth-child(3n+2){grid-column:span 5}
.detail-gallery-v5__grid img,.detail-gallery-v5__grid video{display:block;width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.16,1,.3,1)}
.detail-gallery-v5__grid>button:hover img{transform:scale(1.025)}
.detail-footer-v4{display:flex;justify-content:space-between;padding:26px clamp(22px,4vw,72px);background:var(--f-ink);color:rgba(242,239,231,.62);font-size:10px;text-transform:uppercase}
.lightbox{background:rgba(17,16,15,.95)!important}
@media(max-width:680px){
 .detail-nav-v4{padding:16px 18px}.detail-hero-v4{min-height:78svh;padding:130px 18px 34px}
 .detail-hero-v4 h1{font-size:clamp(4rem,21vw,7rem)}
 .detail-hero-v4__count{position:static;margin-top:42px}
 .detail-gallery-v5{padding:72px 18px}.detail-gallery-v5__top{grid-template-columns:1fr}
 .detail-gallery-v5__grid{display:block!important}.detail-gallery-v5__grid>button{display:block;width:100%;margin-bottom:14px}
 .detail-footer-v4{display:grid;gap:12px;padding:24px 18px}
}

/* =========================================================
   FEKRA ELITE REBRAND v70 — production closure layer
   ========================================================= */
html { scroll-behavior:smooth; }
body { overflow-x:hidden; }
:focus-visible { outline:3px solid #d9ff37; outline-offset:4px; }
.nav-v3 { backdrop-filter:saturate(120%) blur(10px); -webkit-backdrop-filter:saturate(120%) blur(10px); }
.nav-v3__links { gap:clamp(14px,2vw,34px); }
.nav-v3__links a { white-space:nowrap; }
.process-v7 { position:relative; color:#1b0a18; background:#f1eadf; overflow:hidden; }
.process-v7::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.35; background:linear-gradient(90deg,transparent 49.8%,rgba(97,36,92,.1) 50%,transparent 50.2%); }
.process-v7__intro { display:grid; grid-template-columns:minmax(120px,.45fr) 1.6fr .8fr; gap:clamp(28px,5vw,88px); align-items:end; margin:clamp(48px,8vw,120px) 0 clamp(44px,7vw,96px); }
.process-v7__intro>p { margin:0; color:#7f6678; font-size:.72rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.process-v7__intro h2 { margin:0; font-family:var(--display); font-size:clamp(3rem,7vw,7.8rem); font-weight:400; line-height:.88; letter-spacing:-.055em; }
.process-v7__intro h2 em { color:#f05a24; font-weight:400; }
.process-v7__intro>span { max-width:26ch; color:#766b71; font-size:clamp(.92rem,1.2vw,1.12rem); line-height:1.6; }
.process-v7__track { border-top:1px solid rgba(97,36,92,.22); }
.process-v7__step { position:relative; display:grid; grid-template-columns:90px minmax(0,1fr) auto; gap:clamp(24px,4vw,72px); align-items:start; padding:clamp(28px,4vw,58px) 0; border-bottom:1px solid rgba(97,36,92,.22); transition:background .45s ease,padding .45s ease; }
.process-v7__step::after { content:""; position:absolute; left:0; bottom:-1px; width:0; height:2px; background:#f05a24; transition:width .65s cubic-bezier(.2,.8,.2,1); }
.process-v7__step:hover::after { width:100%; }
.process-v7__step>span { font-family:var(--display); font-size:clamp(1.35rem,2vw,2.2rem); color:#f05a24; }
.process-v7__step small { display:block; margin-bottom:8px; color:#7b6374; font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.process-v7__step h3 { margin:0 0 10px; font-size:clamp(1.45rem,2.4vw,3rem); letter-spacing:-.035em; }
.process-v7__step p { max-width:62ch; margin:0; color:#6c6268; line-height:1.65; }
.process-v7__step>b { align-self:center; color:#ac9fa7; font-size:clamp(.72rem,1vw,.9rem); letter-spacing:.2em; writing-mode:vertical-rl; }
.portfolio-v3::selection { color:#180714; background:#d9ff37; }
.client-card-v3:focus-visible { outline-offset:8px; }
.client-card-v3__arrow { transition:transform .35s ease,background .35s ease,color .35s ease; }
.client-card-v3:hover .client-card-v3__arrow { transform:rotate(-35deg) scale(1.08); }
.contact-v3__detail { transition:transform .3s ease,opacity .3s ease; }
.contact-v3__detail:hover { transform:translateY(-4px); }
@media (max-width:980px) {
  .nav-v3__links { display:none; }
  .process-v7__intro { grid-template-columns:1fr; }
  .process-v7__intro>span { max-width:42ch; }
}
@media (max-width:700px) {
  .process-v7__step { grid-template-columns:44px 1fr; gap:16px; }
  .process-v7__step>b { display:none; }
  .process-v7__intro h2 { font-size:clamp(3.15rem,15vw,5.5rem); }
  .nav-v3__cta span { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
  .reveal { opacity:1 !important; transform:none !important; }
}


/* =========================================================
   FEKRA COSMIC REBRAND V80 — approved production layer
   Presentation-only overrides. Existing content and data remain untouched.
   ========================================================= */
:root{
  --fekra-ink:#321c48;
  --fekra-soft:#f7f3fb;
  --fekra-lilac:#eee6fb;
  --fekra-purple:#6e43b9;
  --fekra-violet:#8f58e8;
  --fekra-blue:#4d6cff;
  --fekra-yellow:#ffe600;
  --fekra-orange:#ff8a18;
  --fekra-pink:#e854d9;
}
html{background:var(--fekra-soft)}
body{background:linear-gradient(180deg,#faf7fc 0%,#f4eefb 28%,#eee4fb 58%,#e4d7f7 78%,#d7c4f2 100%);color:var(--fekra-ink)}
.public-site.portfolio-v3{background:transparent;overflow:clip}
.nav-v3{background:rgba(250,247,252,.78);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom-color:rgba(76,40,112,.12)}
.nav-v3__links a,.nav-v3__cta,.brand-v3 span{color:var(--fekra-ink)}
.nav-v3__cta{background:var(--fekra-yellow);border-color:var(--fekra-yellow)}
.hero-v3{min-height:100svh;background:
  radial-gradient(60% 55% at 82% 35%,rgba(77,108,255,.34),transparent 58%),
  radial-gradient(36% 42% at 79% 36%,rgba(143,88,232,.26),transparent 72%),
  linear-gradient(180deg,#faf7fc 0%,#f4effa 100%);
}
.hero-v3::after{content:"";position:absolute;inset:auto 0 0;height:28%;background:linear-gradient(180deg,transparent,#eee6f8);pointer-events:none}
.hero-v3__noise{opacity:.05;mix-blend-mode:multiply}
.hero-v3__kicker,.hero-v3__bottom p{color:#685879}
.hero-v3 h1{color:var(--fekra-ink)}
.hero-line--accent>span{display:inline-block;position:relative;z-index:0}
.hero-line--accent>span::before{content:"";position:absolute;z-index:-1;left:-.04em;right:-.04em;bottom:.05em;height:.48em;background:var(--fekra-yellow);transform:skewX(-4deg)}
.hero-v3__bottom a{background:var(--fekra-purple);color:#fff;border-color:var(--fekra-purple)}
.hero-assembly{filter:drop-shadow(0 24px 60px rgba(74,37,117,.2));transform-style:preserve-3d}
.hero-assembly::before{content:"";position:absolute;inset:12% 5% 8% 18%;background:radial-gradient(circle at center,rgba(72,108,255,.82),rgba(106,72,210,.4) 32%,transparent 68%);filter:blur(35px);z-index:-2}
.assembly-grid{opacity:.28}
.assembly-card--signal{background:linear-gradient(145deg,#ff9d26,#ff6a1d);color:#381431}
.assembly-card--strategy{background:linear-gradient(145deg,#ffe600,#d8ff29);color:#271b3f}
.assembly-card--craft{background:linear-gradient(145deg,#8c52ff,#5e46cc);color:#fff}
.assembly-card--launch{background:linear-gradient(145deg,#f06de3,#a24bd3);color:#fff}
.assembly-output{background:#3e1c59;color:#fff}
.idea-rail{background:var(--fekra-purple);color:#fff;border-color:transparent}
.manifesto-v4{background:rgba(255,255,255,.32);border-color:rgba(72,42,99,.14)}
.manifesto-v4__lead{color:var(--fekra-ink)}
.manifesto-v4__lead em{color:var(--fekra-purple)}

.services-v3{position:relative;min-height:100svh;padding-top:clamp(6rem,10vw,10rem);background:transparent}
.services-v3::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(245,239,251,.2),rgba(231,218,248,.58));z-index:-1}
.service-stack{
  position:relative;
  width:min(94vw,1480px);
  margin-inline:auto;
  min-height:min(76vh,850px);
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:clamp(12px,1.6vw,26px);
  perspective:1400px;
  transform-style:preserve-3d;
}
.service-panel{
  position:relative!important;
  inset:auto!important;
  flex:1 1 0;
  width:auto!important;
  min-width:0;
  min-height:clamp(540px,66vh,740px);
  border-radius:28px;
  overflow:hidden;
  transform-origin:center center;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  box-shadow:0 22px 60px rgba(45,19,70,.16);
  border:1px solid rgba(60,30,83,.12);
  display:flex;
  flex-direction:column;
  isolation:isolate;
}
.service-panel--1{background:linear-gradient(160deg,#f7f2ff 0%,#e6d8fb 52%,#cab3f0 100%)}
.service-panel--2{background:linear-gradient(160deg,#f5fbd5 0%,#e4fa37 56%,#bcdd2c 100%)}
.service-panel--3{background:linear-gradient(160deg,#fff2de 0%,#ffb43a 55%,#ff7b18 100%)}
.service-panel--4{background:linear-gradient(160deg,#f8e9fb 0%,#dc74e6 54%,#9651d9 100%)}
.service-panel__lead,.service-panel__title,.service-panel__details,.service-panel__arrow{position:relative;z-index:3}
.service-panel__details{padding-bottom:.75rem}
.service-panel__details ul{display:flex;flex-wrap:wrap;gap:.4rem}
.service-panel__details li{background:rgba(255,255,255,.3);border:1px solid rgba(53,25,72,.2);border-radius:999px;padding:.36rem .62rem}
.service-panel__visual{
  position:relative;
  z-index:1;
  margin-top:auto;
  width:100%;
  height:42%;
  min-height:230px;
  overflow:hidden;
  transform-style:preserve-3d;
}
.service-panel__visual::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.05) 22%,rgba(28,10,42,.08) 100%);z-index:2;pointer-events:none}
.service-panel__visual img{
  width:100%;height:100%;object-fit:cover;object-position:center 63%;
  display:block;transform:scale(1.08);filter:saturate(1.05) contrast(1.02);
}
.service-panel__arrow{position:absolute;right:1.2rem;bottom:1.2rem;z-index:5;background:rgba(255,255,255,.78);color:var(--fekra-ink);backdrop-filter:blur(8px)}
.process-v7{background:linear-gradient(180deg,rgba(236,228,250,.25),rgba(222,207,246,.65));color:var(--fekra-ink)}
.process-v7__step{background:rgba(255,255,255,.54);border-color:rgba(76,44,106,.14)}
.process-v7__step:nth-child(1){--step-accent:#ffe600}
.process-v7__step:nth-child(2){--step-accent:#ff9828}
.process-v7__step:nth-child(3){--step-accent:#e65dde}
.process-v7__step:nth-child(4){--step-accent:#6b5bf2}
.process-v7__step>span,.process-v7__step>b{color:var(--step-accent)}
.work-v3{background:linear-gradient(180deg,rgba(222,207,246,.2),rgba(201,179,239,.72));color:var(--fekra-ink)}
.filter-v3 button.active{background:var(--fekra-yellow);color:var(--fekra-ink)}
.client-card-v3{background:rgba(255,255,255,.72);border-color:rgba(70,41,93,.14)}
.client-card-v3__visual img{transition:opacity .25s ease}
.client-card-v3__visual img.is-broken{opacity:0}
.contact-v3{background:
  radial-gradient(48% 80% at 86% 44%,rgba(77,108,255,.55),transparent 68%),
  linear-gradient(135deg,#3b1952 0%,#6e43b9 50%,#9b56d7 100%);
  color:#fff;
}
.contact-v3__word--outline{-webkit-text-stroke-color:rgba(255,255,255,.78)}
.contact-v3__detail{color:#fff}
.footer-v3--simple{display:none!important}

/* Client page mobile counters + media reliability */
.detail-page--v4{background:linear-gradient(180deg,#f8f4fb,#e8dcf7)}
.detail-hero-v4{background:
  radial-gradient(40% 80% at 82% 20%,rgba(77,108,255,.45),transparent 70%),
  linear-gradient(145deg,#4a215f,#8052c4 60%,#bd75d6);color:#fff}
.detail-hero-v4__count{z-index:5}
.video-card-v5 video{background:#22142b}
.media-status{position:absolute;left:.75rem;bottom:.75rem;z-index:5;background:rgba(20,12,27,.78);color:#fff;border-radius:999px;padding:.35rem .6rem;font-size:.72rem}
.editor-media-status{display:flex;align-items:center;gap:.35rem;color:#2e7d32;font-size:.78rem;margin-top:.4rem}
.editor-media-status[data-state="error"]{color:#b3261e}

@media (max-width:900px){
  .service-stack{display:block;min-height:auto;perspective:1000px}
  .service-panel{min-height:620px;margin-bottom:1rem}
  .service-panel__visual{height:44%}
  .detail-hero-v4__count{
    position:absolute!important;
    top:max(78px,calc(env(safe-area-inset-top) + 58px))!important;
    right:16px!important;
    left:auto!important;
    bottom:auto!important;
    display:grid!important;
    grid-template-columns:auto!important;
    grid-auto-flow:row!important;
    gap:1px!important;
    text-align:right!important;
    padding:.65rem .75rem!important;
    border-radius:14px!important;
    background:rgba(22,10,34,.5)!important;
    backdrop-filter:blur(10px);
  }
  .detail-hero-v4__count b,.detail-hero-v4__count span{display:block!important}
  .detail-hero-v4__count b{font-size:1.1rem!important}
  .detail-hero-v4__count span{font-size:.65rem!important;margin-bottom:.35rem}
}
@media (max-width:560px){
  .hero-v3{min-height:auto;padding-top:7rem}
  .hero-assembly{min-height:440px}
  .services-v3{padding-inline:1rem}
  .service-panel{min-height:560px;border-radius:22px}
  .service-panel__visual{min-height:210px}
}
@media (prefers-reduced-motion:reduce){
  .service-panel,.service-panel__visual img{transform:none!important;transition:none!important}
  .services-v3{min-height:auto!important}
}