:root {
  --nav-accent: #00f08a;
  --nav-accent-soft: color-mix(in srgb, var(--nav-accent) 12%, transparent);
  --page-bg: #03100d;
  --surface: rgba(13, 27, 24, .78);
  --surface-solid: #0d1b18;
  --nav-text: #f5fbf8;
  --nav-muted: #98aaa4;
  --nav-border: rgba(255, 255, 255, .09);
  --nav-shadow: 0 18px 60px rgba(0, 0, 0, .26);
}

html[data-theme="light"] {
  --page-bg: #f4f8f6;
  --surface: rgba(255, 255, 255, .86);
  --surface-solid: #ffffff;
  --nav-text: #13241f;
  --nav-muted: #65746f;
  --nav-border: rgba(10, 45, 34, .1);
  --nav-shadow: 0 18px 55px rgba(28, 64, 52, .12);
}

html[data-theme="dark"] {
  --nav-text: var(--dark-page-text); --nav-muted: var(--dark-muted-text);
  --theme-base: var(--dark-theme-base);
  --navbar-bg: color-mix(in srgb, var(--dark-theme-base) 90%, var(--nav-accent) 10%);
  --surface: color-mix(in srgb, var(--dark-theme-base) 91%, var(--dark-page-text) 9%);
  --surface-solid: color-mix(in srgb, var(--dark-theme-base) 86%, var(--dark-page-text) 14%);
}
html[data-theme="light"] {
  --nav-text: var(--light-page-text); --nav-muted: var(--light-muted-text);
  --theme-base: var(--light-theme-base);
  --navbar-bg: color-mix(in srgb, var(--light-theme-base) 94%, var(--nav-accent) 6%);
  --surface: color-mix(in srgb, var(--light-theme-base) 94%, var(--light-page-text) 6%);
  --surface-solid: color-mix(in srgb, var(--light-theme-base) 97%, var(--light-page-text) 3%);
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; transition: background .3s ease, color .3s ease; }
html[data-theme="dark"] body { background: var(--dark-page-background) fixed !important; color: var(--dark-page-text) !important; }
html[data-theme="light"] body { background: var(--light-page-background) fixed !important; color: var(--light-page-text) !important; }
html[data-theme="light"] body :is(.home-content p, .about-text p, .contact-section p, .stat span) { color: var(--light-muted-text); }
html[data-theme="light"] :is(.services-section, .about, .section-title, .stat h2) { color: var(--light-page-text); }
html[data-theme="light"] .service-card { background: rgba(255,255,255,.74); border-color: rgba(10,45,34,.1); }
html[data-theme="light"] .card-content p { color: var(--light-page-text); }

.profile { position: relative; overflow: visible; }
.profile .profile-theme-image { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; }
.profile::before { content: ''; position: absolute; z-index: 1; inset: 14% 10% 8%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--nav-accent) 22%, transparent) 0%, color-mix(in srgb, var(--nav-accent) 10%, transparent) 42%, transparent 72%); filter: blur(24px); opacity: .8; pointer-events: none; }
.profile::after { content: ''; position: absolute; z-index: 4; inset: auto 8% 3%; height: 20%; background: linear-gradient(transparent, var(--theme-base)); filter: blur(5px); opacity: .78; pointer-events: none; }
.hero-art-layer { position: absolute; z-index: 1; inset: 5% -2% -1%; overflow: visible; border: 0; border-radius: 42%; background: radial-gradient(ellipse at 48% 44%, color-mix(in srgb, var(--surface-solid) 82%, transparent) 0%, color-mix(in srgb, var(--nav-accent) 9%, var(--theme-base)) 48%, transparent 78%); box-shadow: none; opacity: .9; -webkit-mask-image: radial-gradient(ellipse 78% 82% at 50% 48%, #000 38%, rgba(0,0,0,.78) 58%, transparent 100%); mask-image: radial-gradient(ellipse 78% 82% at 50% 48%, #000 38%, rgba(0,0,0,.78) 58%, transparent 100%); }
.hero-art-layer::after { content: ''; position: absolute; z-index: -1; inset: 12% 8%; border-radius: 50%; background: var(--nav-accent); opacity: .14; filter: blur(55px); }
.hero-art-watermark { position: absolute; inset-inline: 8%; top: 18%; color: transparent; font-family: Georgia, serif; font-size: clamp(130px, 22vw, 285px); line-height: 1; letter-spacing: -.08em; -webkit-text-stroke: 1px color-mix(in srgb, var(--nav-accent) 9%, var(--nav-text) 5%); opacity: .32; white-space: nowrap; }
.hero-art-dots { position: absolute; inset-inline-start: -42px; top: 18%; width: 84px; height: 84px; background-image: radial-gradient(circle, color-mix(in srgb, var(--nav-accent) 32%, var(--nav-muted)) 1.5px, transparent 2px); background-size: 17px 17px; opacity: .3; }
.hero-art-line { position: absolute; inset-inline-start: -8px; bottom: 24%; width: 1px; height: 72px; background: linear-gradient(transparent, var(--nav-accent), transparent); opacity: .28; }
.hero-art-caption { position: absolute; z-index: 4; inset-inline-end: 7%; bottom: 8%; max-width: 125px; padding-inline-start: 14px; color: var(--nav-muted); border-inline-start: 2px solid var(--nav-accent); font-size: clamp(11px, 1vw, 14px); line-height: 1.5; font-weight: 700; text-align: start; }
html[data-theme="light"] .hero-art-layer { background: radial-gradient(ellipse at 48% 44%, rgba(255,255,255,.7) 0%, color-mix(in srgb, var(--nav-accent) 8%, var(--light-theme-base)) 50%, transparent 80%); }
@media (max-width: 992px) { .hero-art-dots { inset-inline-start: -30px; transform: scale(.72); } .hero-art-caption { bottom: 6%; } }
@media (max-width: 576px) { .hero-art-layer { inset: 8% 4% 4%; border-radius: 18px; } .hero-art-dots, .hero-art-line { display: none; } .hero-art-caption { max-width: 100px; font-size: 10px; } }
html[data-theme="dark"] .profile-image-light, html[data-theme="light"] .profile-image-dark { display: none !important; }
html[data-theme="dark"] .profile-image-dark, html[data-theme="light"] .profile-image-light { display: block !important; }

:is(.project-card, .testimonial-card, .service-card, .blog-card, .category-box, .resume-card) { background-color: var(--surface-solid) !important; }
:is(.contact-form, .contact2-form, .testimonial-form-wrap, .brief-container, .form-container) { background-color: var(--surface) !important; }
.brief-form { background: transparent !important; }
:is(.contact-form input, .contact-form select, .contact-form textarea, .contact2-form input, .contact2-form select, .contact2-form textarea,
    .testimonial-form input, .testimonial-form select, .testimonial-form textarea, .brief-form input, .brief-form select, .brief-form textarea) {
  color: var(--nav-text) !important; background-color: var(--surface-solid) !important; border-color: var(--nav-border) !important;
}
.home-brife { color: var(--nav-text) !important; }
.brief-container { border: 1px solid color-mix(in srgb, var(--nav-accent) 22%, transparent); box-shadow: 0 18px 55px color-mix(in srgb, var(--nav-accent) 10%, transparent) !important; }
.brief-title { color: var(--nav-text) !important; }
.brief-section-title, .brief-container a { color: var(--nav-accent) !important; }
.brief-button { background: transparent !important; }
.logo-type-grid label { color: var(--nav-text) !important; background: var(--surface-solid) !important; }
.logo-type-grid label:hover { background: color-mix(in srgb, var(--surface-solid) 84%, var(--nav-accent) 16%) !important; }

/* One dynamic accent-text contract for legacy pages. */
:is(.home-content h1 span, .about-text h2, .section-title, .resume-kicker, .resume-card span,
    .project-hero > span, .testimonials-heading span, .contact-section h2,
    .portfolio-intro h1, .blog-title, .categories-box h3, .post-meta i) {
  color: var(--accent-text) !important;
}
:is(.home-content p, .about-text p, .contact-section p, .portfolio-intro p,
    .testimonials-heading p, .testimonial-author small, .project-hero p) { color: var(--nav-muted); }

/* One button contract for every legacy page */
:is(.btn, .cta-btn, .nav-cta, .drawer-cta, .footer-btn, .contact-form button, .contact2-form button, .sb-btn, .brief-button button) {
  background: var(--nav-accent) !important;
  border-color: var(--nav-accent) !important;
  color: var(--button-text) !important;
}
:is(.btn, .cta-btn, .nav-cta, .drawer-cta, .footer-btn, .contact-form button, .contact2-form button, .sb-btn, .brief-button button):hover {
  background: var(--button-hover) !important;
  border-color: var(--button-hover) !important;
  color: var(--button-hover-text) !important;
}
.buttons .btn.secondary, .cv-view { background: #191b1a !important; border-color: #191b1a !important; color: #fff !important; }
.buttons .btn.secondary:hover, .cv-view:hover { background: #303532 !important; border-color: #303532 !important; color: #fff !important; }

.site-header {
  position: sticky;
  top: 16px;
  z-index: 1000;
  width: min(1180px, calc(100% - 40px));
  min-height: 72px;
  margin: 18px auto 24px;
  padding: 10px 12px 10px 18px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  border: 1px solid var(--nav-border);
  border-radius: 22px;
  background: color-mix(in srgb, var(--navbar-bg) 92%, transparent);
  box-shadow: var(--nav-shadow);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--nav-text); text-decoration: none; white-space: nowrap; }
.brand-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; color: #06100d; background: var(--nav-accent); font-weight: 900; letter-spacing: -.8px; box-shadow: 0 8px 22px rgba(0,240,138,.2); }
.brand-logo { width:auto; height:42px; max-width:150px; object-fit:contain; display:block; }
[data-theme="dark"] .brand-logo-light,
[data-theme="light"] .brand-logo-dark { display:none; }
.brand-name { font-size: 20px; font-weight: 800; letter-spacing: -.7px; }
.brand-name span { color: var(--nav-accent); }

.desktop-nav { justify-self: center; display: flex; align-items: center; gap: 4px; }
.desktop-nav a { position: relative; padding: 10px 12px; border-radius: 10px; color: var(--nav-muted); text-decoration: none; font-size: 14px; font-weight: 600; transition: .2s ease; }
.desktop-nav a:hover, .desktop-nav a.active { color: var(--nav-text); background: var(--nav-accent-soft); }
.desktop-nav a.active::after { content: ""; position: absolute; inset-inline: 12px; bottom: 3px; height: 2px; border-radius: 4px; background: var(--nav-accent); }

.nav-actions { display: flex; align-items: center; gap: 8px; }
.nav-language-switch { display: flex; padding: 3px; border: 1px solid var(--nav-border); border-radius: 12px; background: rgba(120,140,133,.08); }
.nav-language-switch button { min-width: 38px; height: 34px; padding: 0 8px; border: 0; border-radius: 9px; color: var(--nav-muted); background: transparent; cursor: pointer; font-weight: 800; }
.nav-language-switch button.active { color: var(--button-text); background: var(--nav-accent); }
.icon-button { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--nav-border); border-radius: 12px; background: transparent; color: var(--nav-text); cursor: pointer; font-size: 17px; transition: .2s ease; }
.icon-button:hover { color: var(--nav-accent); border-color: rgba(0,240,138,.35); background: var(--nav-accent-soft); }
.nav-cta, .drawer-cta { display: inline-flex; justify-content: center; align-items: center; gap: 10px; padding: 12px 17px; border-radius: 12px; color: #05110d; background: var(--nav-accent); text-decoration: none; font-size: 13px; font-weight: 800; transition: transform .2s, box-shadow .2s; }
.nav-cta:hover, .drawer-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0,240,138,.2); }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 11px; border: 1px solid var(--nav-border); border-radius: 12px; background: transparent; cursor: pointer; }
.menu-toggle span { display: block; height: 2px; margin: 4px 0; border-radius: 2px; background: var(--nav-text); transition: .25s; }

.nav-overlay { position: fixed; inset: 0; z-index: 1090; background: rgba(0,0,0,.52); backdrop-filter: blur(4px); opacity: 0; transition: opacity .25s; }
.nav-overlay.visible { opacity: 1; }
.nav-drawer { position: fixed; z-index: 1100; top: 0; inset-inline-end: 0; width: min(390px, 92vw); height: 100dvh; padding: 22px; display: flex; flex-direction: column; gap: 24px; color: var(--nav-text); background: var(--surface-solid); border-inline-start: 1px solid var(--nav-border); box-shadow: -25px 0 70px rgba(0,0,0,.28); transform: translateX(105%); visibility: hidden; transition: transform .32s cubic-bezier(.22,.8,.22,1), visibility .32s; overflow-y: auto; }
[dir="rtl"] .nav-drawer { transform: translateX(-105%); }
.nav-drawer.open { transform: translateX(0); visibility: visible; }
.drawer-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--nav-border); }
.drawer-links { display: grid; gap: 7px; }
.drawer-links a { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 11px 14px; border-radius: 13px; color: var(--nav-muted); text-decoration: none; font-weight: 600; transition: .2s; }
.drawer-links a i { width: 22px; color: var(--nav-muted); text-align: center; }
.drawer-links a:hover, .drawer-links a.active { color: var(--nav-text); background: var(--nav-accent-soft); }
.drawer-links a.active i { color: var(--nav-accent); }
.drawer-settings { margin-top: auto; padding: 16px; border: 1px solid var(--nav-border); border-radius: 16px; background: var(--nav-accent-soft); }
.settings-title { margin: 0 0 8px; color: var(--nav-muted); font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; }
.setting-row { width: 100%; min-height: 51px; padding: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 0; border-bottom: 1px solid var(--nav-border); color: var(--nav-text); background: transparent; font: inherit; text-align: start; }
.setting-row:last-child { border-bottom: 0; }
.setting-row > span { display: flex; align-items: center; gap: 10px; }
.setting-row i { width: 20px; color: var(--nav-accent); }
.switch { position: relative; width: 42px; height: 24px; padding: 3px; border-radius: 20px; background: rgba(125,140,135,.45); }
.switch span { display: block; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; }
html[data-theme="dark"] .switch { background: var(--nav-accent); }
html[data-theme="dark"] .switch span { transform: translateX(18px); }
[dir="rtl"][data-theme="dark"] .switch span { transform: translateX(-18px); }
.language-switch { display: flex; padding: 3px; border-radius: 9px; background: rgba(100,120,113,.18); }
.language-switch button { padding: 5px 8px; border: 0; border-radius: 7px; color: var(--nav-muted); background: transparent; cursor: pointer; font-weight: 700; }
.language-switch button.active { color: #07120e; background: var(--nav-accent); }
.drawer-cta { width: 100%; min-height: 48px; }
[dir="rtl"] .drawer-cta i { transform: rotate(180deg); }
body.drawer-open { overflow: hidden; }

@media (max-width: 1080px) {
  .site-header { width: calc(100% - 32px); }
  .desktop-nav a { padding-inline: 8px; }
  .brand-name { display: none; }
}

@media (max-width: 860px) {
  .site-header { top: 10px; min-height: 64px; margin-top: 10px; padding: 8px 10px 8px 12px; grid-template-columns: 1fr auto; border-radius: 18px; }
  .brand-name { display: inline; }
  .desktop-nav, .nav-cta, .theme-quick-toggle, .nav-language-switch { display: none; }
  .menu-toggle { display: block !important; color: var(--nav-text); }
  .nav-actions { justify-self: end; }
}

/* Video content hub */
.video-content-page,.video-watch-page{position:relative;z-index:1;width:min(1180px,calc(100% - 32px));margin:clamp(40px,7vw,80px) auto}
.content-intro>span,.video-watch-page header>span{color:var(--nav-accent);font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.content-type-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:0 auto 34px}
.content-type-tabs button{padding:11px 18px;border:1px solid var(--nav-border);border-radius:999px;color:var(--nav-text);background:var(--surface-solid);font-weight:800;cursor:pointer;transition:.2s}
.content-type-tabs button:hover,.content-type-tabs button.active{color:var(--button-text);border-color:var(--nav-accent);background:var(--nav-accent);box-shadow:0 10px 25px color-mix(in srgb,var(--nav-accent) 20%,transparent)}
.video-card-media{position:relative}.video-card-media iframe{width:100%;height:100%;border:0;pointer-events:none}.video-card--reel .video-card-media{aspect-ratio:9/12}.video-card--long .video-card-media{aspect-ratio:16/10}
.video-card--design .video-card-media{aspect-ratio:4/3}.video-card-media>img{width:100%;height:100%;object-fit:cover}.carousel-count{position:absolute;z-index:3;right:12px;bottom:12px;padding:5px 9px;display:flex;align-items:center;gap:6px;border-radius:999px;color:#fff;background:rgba(0,0,0,.72);font-size:.72rem;font-weight:800}
.video-placeholder{width:100%;height:100%;display:grid;place-items:center;color:var(--nav-accent);background:linear-gradient(135deg,var(--surface-solid),var(--nav-accent-soft));font-size:3rem}
.video-play{position:absolute;z-index:3;inset:50% auto auto 50%;width:58px;height:58px;display:grid;place-items:center;border-radius:50%;color:var(--button-text);background:var(--nav-accent);box-shadow:0 12px 34px rgba(0,0,0,.3);transform:translate(-50%,-50%);transition:.2s}
.video-card-media:hover .video-play{transform:translate(-50%,-50%) scale(1.08)}
.video-provider{position:absolute;z-index:3;top:13px;inset-inline-start:13px;padding:5px 9px;border-radius:999px;color:#fff;background:rgba(0,0,0,.72);font-size:.68rem;font-weight:850}
.video-card .project-meta{display:flex;justify-content:space-between;gap:8px}.video-card .project-meta span{max-width:70%}
.content-empty{grid-column:1/-1;padding:50px 20px;text-align:center;color:var(--nav-muted);border:1px dashed var(--nav-border);border-radius:18px}
.video-watch-page{max-width:1050px}.video-watch-page header{max-width:780px;margin:24px auto 32px;text-align:center}.video-watch-page h1{margin:10px 0;font-size:clamp(2rem,5vw,4rem)}.video-watch-page header p{color:var(--nav-muted);line-height:1.8}
.video-back{display:inline-flex;align-items:center;gap:9px;color:var(--nav-text);text-decoration:none;font-weight:800}.video-back:hover{color:var(--nav-accent)}html[dir=rtl] .video-back i{transform:rotate(180deg)}
.video-player{position:relative;overflow:hidden;width:100%;aspect-ratio:16/9;border:1px solid var(--nav-border);border-radius:24px;background:#000;box-shadow:0 28px 80px rgba(0,0,0,.3)}.video-player--reel{width:min(470px,100%);margin-inline:auto;aspect-ratio:9/16}.video-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:780px){.content-browser{grid-template-columns:1fr}.content-browser .blog-sidebar{position:static}.video-player{border-radius:16px}.video-content-page{width:min(100% - 20px,1180px)}}

/* Portfolio cards: equal content levels and calmer call-to-action. */
.portfolio-tabs { width: min(1180px, calc(100% - 32px)) !important; max-width: none !important; margin: 30px auto 0 !important; padding: 0 !important; background: transparent !important; }
.portfolio-filter-shell { padding: 12px; display: flex; align-items: center; gap: 14px; border: 1px solid var(--nav-border); border-radius: 18px; background: color-mix(in srgb, var(--surface-solid) 88%, transparent); box-shadow: 0 12px 35px color-mix(in srgb, var(--nav-text) 5%, transparent); backdrop-filter: blur(14px); }
.portfolio-filter-label { min-height: 44px; padding-inline: 10px 15px; display: flex; align-items: center; gap: 9px; color: var(--nav-muted); border-inline-end: 1px solid var(--nav-border); white-space: nowrap; font-size: 13px; font-weight: 700; }
.portfolio-filter-label i { color: var(--nav-accent); }
.portfolio-filter-shell .p-tabs { min-width: 0; padding: 0; display: flex; flex: 1; align-items: center; justify-content: flex-start; gap: 7px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.portfolio-filter-shell .p-tabs::-webkit-scrollbar { display: none; }
.portfolio-filter-shell .p-tab-btn { min-height: 44px; padding: 6px 8px 6px 14px; display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; border: 1px solid transparent; border-radius: 12px; color: var(--nav-muted); background: transparent; box-shadow: none; font-size: 13px; font-weight: 700; cursor: pointer; transition: .2s ease; }
.portfolio-filter-shell .p-tab-btn small { min-width: 27px; height: 27px; padding-inline: 7px; display: grid; place-items: center; border-radius: 9px; color: var(--nav-muted); background: color-mix(in srgb, var(--nav-text) 7%, transparent); font-size: 11px; }
.portfolio-filter-shell .p-tab-btn:hover { color: var(--nav-text); background: var(--nav-accent-soft); transform: none; }
.portfolio-filter-shell .p-tab-btn.active { color: var(--button-text); border-color: var(--nav-accent); background: var(--nav-accent); box-shadow: 0 8px 22px color-mix(in srgb, var(--nav-accent) 20%, transparent); }
.portfolio-filter-shell .p-tab-btn.active small { color: var(--nav-accent); background: var(--button-text); }
.portfolio-showcase { width: min(1220px, 100%); margin-inline: auto; padding-top: 24px !important; }
.portfolio-showcase .projects-grid { width: 100%; max-width: 1180px; margin: 0 auto 50px; padding: 0 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.portfolio-showcase .project-col { width: 100% !important; max-width: none !important; padding: 0 !important; }
.portfolio-showcase .project-card { height: 100%; min-height: 435px; padding: 0; display: flex; flex-direction: column; overflow: hidden; text-align: start; border: 1px solid var(--nav-border); border-radius: 19px; background: var(--surface-solid) !important; box-shadow: 0 16px 42px color-mix(in srgb, var(--nav-text) 7%, transparent); transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
.portfolio-showcase .project-card:hover { transform: translateY(-7px); border-color: color-mix(in srgb, var(--nav-accent) 55%, transparent); box-shadow: 0 24px 65px color-mix(in srgb, var(--nav-accent) 12%, transparent); }
.project-card-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: color-mix(in srgb, var(--surface) 92%, var(--nav-accent) 8%); }
.portfolio-showcase .project-card-media img { width: 100%; height: 100%; aspect-ratio: auto; display: block; object-fit: cover; border-radius: 0; transition: transform .45s ease; }
.project-card:hover .project-card-media img { transform: scale(1.045); }
.project-card-open { position: absolute; inset-inline-end: 14px; top: 14px; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: #fff; background: rgba(5,12,10,.66); backdrop-filter: blur(8px); opacity: 0; transform: translateY(5px); transition: .25s ease; }
.project-card:hover .project-card-open { opacity: 1; transform: translateY(0); }
.project-card-body { min-height: 0; padding: 18px; display: flex; flex: 1; flex-direction: column; align-items: stretch; }
.portfolio-showcase .project-meta { min-height: 29px; margin: 0 0 14px; justify-content: flex-start; }
.portfolio-showcase .project-meta span { max-width: 100%; padding: 6px 10px; display: inline-flex; align-items: center; gap: 7px; overflow: hidden; border-radius: 999px; color: var(--nav-accent) !important; background: var(--nav-accent-soft); font-size: 12px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.portfolio-showcase .project-meta i { margin: 0; color: currentColor !important; }
.portfolio-showcase .project-card h3 { min-height: 49px; margin: 0 0 8px; display: -webkit-box; overflow: hidden; color: var(--nav-text); font-size: 17px; line-height: 1.45; font-weight: 800; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.portfolio-showcase .project-excerpt { min-height: 66px; margin: 0 0 16px; display: -webkit-box; overflow: hidden; color: var(--nav-muted); font-size: 13px; line-height: 1.7; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.portfolio-showcase .project-link { min-height: 48px; margin-top: auto; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid var(--nav-border); border-radius: 13px; color: var(--nav-text); background: var(--nav-accent-soft); text-decoration: none; font-weight: 800; transition: .22s ease; }
.portfolio-showcase .project-link i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--button-text); background: var(--nav-accent); transition: transform .22s ease; }
.portfolio-showcase .project-link:hover { color: var(--button-text); border-color: var(--nav-accent); background: var(--nav-accent); }
.portfolio-showcase .project-link:hover i { color: var(--nav-accent); background: var(--button-text); transform: translateX(3px); }
html[dir="rtl"] .portfolio-showcase .project-link:hover i { transform: translateX(-3px) rotate(180deg); }
html[dir="rtl"] .portfolio-showcase .project-link i { transform: rotate(180deg); }
@media (max-width: 1100px) { .portfolio-showcase .projects-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .portfolio-filter-label { display: none; } .portfolio-filter-shell { padding: 8px; } .portfolio-showcase .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .portfolio-tabs { width: calc(100% - 20px) !important; margin-top: 20px !important; } .portfolio-filter-shell .p-tab-btn { min-height: 40px; padding-block: 4px; } .portfolio-showcase { padding-top: 16px !important; } .portfolio-showcase .projects-grid { grid-template-columns: 1fr; padding-inline: 12px; } .portfolio-showcase .project-card { min-height: 445px; } .project-card-open { opacity: 1; transform: none; } }

@media (max-width: 576px) {
  .site-header { width: calc(100% - 24px); margin-bottom: 14px; }
  .brand-mark { width: 38px; height: 38px; border-radius: 12px; }
  .brand-logo { height:38px; max-width:120px; }
  .brand-name { font-size: 18px; }
  .home { padding-inline: 20px !important; gap: 16px !important; }
  .home-content { width: 100%; }
  .home-content h1 { font-size: clamp(28px, 9vw, 38px) !important; }
  .profile { width: min(100%, 330px) !important; }
  .buttons { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .buttons .btn { width: 100%; margin: 0; text-align: center; }
  .about { padding-inline: 20px !important; }
  .about-img img { max-width: 100%; height: auto; }
  .services-section .container { grid-template-columns: 1fr !important; }
}

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

/* Unified surfaces and complete light theme */
html[data-theme="light"] :is(.footer, .contact-section, .contact2-section, .brands, .blog-sidebar, .post-card-dark, .project-card, .brief-container) {
  background: #fff !important;
  color: #13241f !important;
  border-color: rgba(10,45,34,.1) !important;
}
html[data-theme="light"] :is(.footer-column h3, .footer-column2 h3, .footer-links a, .footer-column p, .contact2-section p, .blog-heading h1, .post-title-dark, .post-excerpt-dark, .project-card h3, .portfolio-intro h1, .portfolio-intro p) { color: #243b33 !important; }
html[data-theme="light"] :is(.contact-form input, .contact-form select, .contact-form textarea, .contact2-form input, .contact2-form select, .contact2-form textarea, .brief-form input, .brief-form select, .brief-form textarea) {
  background: #f1f6f4 !important; color: #13241f !important; border: 1px solid #d8e4df !important;
}
html[data-theme="light"] .project-card { box-shadow: 0 14px 38px rgba(27,65,52,.1) !important; }
html[data-theme="light"] .p-tab-btn { color: #53665f !important; border-color: #b8c8c2 !important; }
html[data-theme="light"] .p-tab-btn.active { background: #13241f !important; color: var(--nav-accent) !important; }
html[data-theme="light"] .portfolio-filter-shell .p-tab-btn { color: var(--nav-muted) !important; border-color: transparent !important; }
html[data-theme="light"] .portfolio-filter-shell .p-tab-btn:hover { color: var(--nav-text) !important; background: var(--nav-accent-soft) !important; }
html[data-theme="light"] .portfolio-filter-shell .p-tab-btn.active { color: var(--button-text) !important; border-color: var(--nav-accent) !important; background: var(--nav-accent) !important; }

/* Portfolio reuses the blog layout/sidebar classes verbatim. */
.blog-layout.portfolio-browser { overflow: visible; }
.portfolio-browser .portfolio-category-sidebar { height: fit-content; }
.portfolio-browser .portfolio-showcase { width: 100%; margin: 0; padding: 0 !important; }
.portfolio-browser .portfolio-showcase .projects-grid { max-width: none; margin: 0 0 28px; padding: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.portfolio-browser .portfolio-pagination { width: 100%; margin: 0 auto 50px; }
.portfolio-category-sidebar .category-tab.active { border-color: color-mix(in srgb, var(--nav-accent) 45%, #262626); }
@media (max-width: 1300px) { .portfolio-browser .portfolio-showcase .projects-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991px) { .blog-layout.portfolio-browser { grid-template-columns: 1fr; grid-template-areas: "posts" "sidebar"; } .portfolio-category-sidebar { grid-area: sidebar; } .portfolio-showcase { grid-area: posts; } }
@media (max-width: 720px) { .portfolio-browser .portfolio-showcase .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .portfolio-browser .portfolio-showcase .projects-grid { grid-template-columns: 1fr; } }
html[data-theme="light"] .social-icons-grid a { border-color: #243b33; color: #243b33; }
html[data-theme="light"] :is(.blog-heading, .blog-sidebar h3, .post-title-dark, .post-title-dark a, .blog-main h1, .blog-main h2, .blog-main h3, .post-content-dark h3) { color: var(--light-page-text) !important; }
html[data-theme="light"] :is(.post-excerpt-dark, .post-meta-dark, .category-tab, .blog-sidebar p) { color: #5d6f69 !important; }
html[data-theme="light"] .post-card-dark { background: #fff !important; border: 1px solid rgba(10,45,34,.1) !important; box-shadow: 0 12px 34px rgba(27,65,52,.09) !important; }
html[data-theme="light"] .read-more-dark { color: #087d4d !important; }

/* Portfolio category sidebar: keep the light theme genuinely light. */
html[data-theme="light"] .portfolio-category-sidebar {
  background: rgba(255,255,255,.94) !important;
  border: 1px solid color-mix(in srgb, var(--nav-accent) 14%, #dce8e3) !important;
  box-shadow: 0 14px 38px rgba(27,65,52,.11) !important;
}
html[data-theme="light"] .portfolio-category-sidebar h3 {
  color: var(--light-page-text) !important;
  border-bottom-color: rgba(19,36,31,.18) !important;
}
html[data-theme="light"] .portfolio-category-sidebar .categories-list li a {
  background: color-mix(in srgb, #fff 92%, var(--nav-accent) 8%) !important;
  color: var(--light-page-text) !important;
  border: 1px solid color-mix(in srgb, var(--nav-accent) 12%, #d9e5e0) !important;
  box-shadow: none !important;
}
html[data-theme="light"] .portfolio-category-sidebar .categories-list li a:hover {
  background: color-mix(in srgb, #fff 78%, var(--nav-accent) 22%) !important;
  color: var(--light-page-text) !important;
  border-color: color-mix(in srgb, var(--nav-accent) 42%, #d9e5e0) !important;
  transform: translateX(3px);
}
html[dir="rtl"][data-theme="light"] .portfolio-category-sidebar .categories-list li a:hover {
  transform: translateX(-3px);
}
html[data-theme="light"] .portfolio-category-sidebar .categories-list li a.active {
  background: var(--nav-accent) !important;
  color: var(--button-text, #06110d) !important;
  border-color: var(--nav-accent) !important;
  box-shadow: 0 9px 22px color-mix(in srgb, var(--nav-accent) 22%, transparent) !important;
}
html[data-theme="light"] .portfolio-category-sidebar .sidebar-banner {
  background:
    radial-gradient(100% 90% at 50% 0%, color-mix(in srgb, var(--nav-accent) 28%, transparent) 0%, transparent 66%),
    linear-gradient(180deg, #f8fcfa 0%, color-mix(in srgb, #fff 91%, var(--nav-accent) 9%) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--nav-accent) 18%, #d9e5e0) !important;
  box-shadow: 0 12px 30px rgba(27,65,52,.1) !important;
}
html[data-theme="light"] .portfolio-category-sidebar .sidebar-banner:hover {
  box-shadow: 0 16px 38px rgba(27,65,52,.15) !important;
}
html[data-theme="light"] .portfolio-category-sidebar .sidebar-banner .sb-inner,
html[data-theme="light"] .portfolio-category-sidebar .sidebar-banner .sb-title {
  color: var(--light-page-text) !important;
}
html[data-theme="light"] .portfolio-category-sidebar .sidebar-banner :is(.sb-eyebrow, .sb-text) {
  color: #536b62 !important;
}

/* Resume rebuilt as a responsive, theme-aware layout */
.resume-page { width: min(1180px, calc(100% - 40px)); margin: 70px auto 100px; color: var(--nav-text); }
.resume-intro { display: flex; align-items: end; justify-content: space-between; gap: 36px; padding-bottom: 36px; border-bottom: 1px solid var(--nav-border); }
.resume-intro > div:first-child { max-width: 720px; }
.resume-kicker { color: var(--nav-accent); font-size: 13px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; }
.resume-intro h1 { margin: 8px 0 12px; font-size: clamp(38px, 6vw, 72px); line-height: 1; color: var(--nav-text); }
.resume-intro p { color: var(--nav-muted); line-height: 1.8; }
.cv-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cv-actions .btn { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; margin: 0; }
.resume-layout { display: grid; grid-template-columns: 230px 1fr; gap: 44px; margin-top: 42px; }
.resume-tabs { display: flex; flex-direction: column; gap: 8px; }
.resume-tabs .tab-btn { padding: 14px 16px; border: 1px solid var(--nav-border); border-radius: 12px; color: var(--nav-muted); background: var(--surface); text-align: start; font-weight: 700; }
.resume-tabs .tab-btn.active { color: #06110d; border-color: var(--nav-accent); background: var(--nav-accent); }
.resume-content h2 { margin-bottom: 22px; color: var(--nav-text); font-size: 30px; }
.resume-content .tab-content { display: none; }
.resume-content .tab-content.active { display: block; }
.resume-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.resume-card { min-width: 0; padding: 24px; border: 1px solid var(--nav-border); border-radius: 18px; color: var(--nav-muted); background: var(--surface); }
.resume-card span { color: var(--nav-accent); font-size: 13px; font-weight: 700; }
.resume-card h3 { margin: 10px 0 5px; color: var(--nav-text); font-size: 19px; }
.skill-list { display: flex; flex-wrap: wrap; gap: 10px; }
.skill-list span { padding: 11px 15px; border: 1px solid rgba(0,240,138,.24); border-radius: 99px; color: var(--nav-text); background: var(--nav-accent-soft); }
.resume-about { max-width: 720px; color: var(--nav-muted); font-size: 18px; line-height: 1.9; }

/* Featured portfolio carousel */
.featured-projects { position: relative; width: 100%; padding: clamp(14px, 2.5vw, 28px) 0; overflow: hidden; background: transparent; }
.featured-projects-title { margin: 0 auto clamp(16px, 2.5vw, 30px); padding-inline: 20px; text-align: center; color: var(--dark-page-text); font-size: clamp(26px, 3vw, 44px); line-height: 1.2; }
html[data-theme="light"] .featured-projects-title { color: var(--light-page-text); }
.featured-projects-viewport { width: 100%; overflow: hidden; }
.featured-projects-track { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); width: max-content; direction: ltr; will-change: transform; }
.featured-project-slide { position:relative; flex:0 0 auto; width:auto; height:clamp(205px, 23.5vw, 360px); aspect-ratio:var(--slide-ratio, 16 / 9); max-width:82vw; border-radius:10px; overflow:hidden; opacity:.38; transform:scale(.94); transition:height .45s cubic-bezier(.22,.75,.25,1), opacity .45s, transform .45s, filter .45s, box-shadow .45s; filter:brightness(.62); background:var(--surface-solid); }
.featured-project-slide.is-active { height:clamp(235px, 27.2vw, 418px); opacity:1; transform:none; filter:brightness(1.04); z-index:2; box-shadow:0 18px 52px rgba(0,0,0,.3); }
.featured-project-slide img { width: 100%; height: 100%; object-fit: contain; display: block; }
.featured-project-slide > span { position: absolute; inset: auto 0 0; display: flex; flex-direction: column; gap: 4px; padding: 42px 24px 20px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.86)); opacity: 0; transition: opacity .3s; }
html[dir="rtl"] .featured-project-slide > span { direction: rtl; text-align: right; }
html[dir="ltr"] .featured-project-slide > span { direction: ltr; text-align: left; }
.featured-project-slide.is-active > span { opacity: 1; }
.featured-project-slide strong { font-size: clamp(18px, 2vw, 28px); }.featured-project-slide small { color: #ddd; }
.featured-arrow { position: absolute; z-index: 5; top: 50%; translate: 0 -50%; width: 58px; height: 58px; border: 0; border-radius: 50%; background: rgba(0,0,0,.62); color: #fff; font-size: 24px; cursor: pointer; backdrop-filter: blur(8px); }
.featured-prev { left:clamp(18px, 17vw, 280px); }.featured-next { right:clamp(18px, 17vw, 280px); }
.featured-arrow:hover { background: var(--site-primary, #00ed8a); color: var(--site-button-text, #07150f); }
@media (max-width: 640px) { .featured-projects { padding:12px 0; }.featured-project-slide { height:clamp(175px, 51vw, 245px); max-width:86vw; }.featured-project-slide.is-active { height:clamp(205px, 60vw, 288px); transform:none; }.featured-arrow { width:40px; height:40px; font-size:17px; }.featured-prev { left:10px; }.featured-next { right:10px; } }

.custom-section { padding: 70px 20px; color: var(--nav-text); }
.custom-section-inner { width: min(1100px, 100%); margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 50px; }
.custom-section.centered .custom-section-inner { max-width: 760px; display: block; text-align: center; }
.custom-section-copy { flex: 1; }
.custom-section h2 { margin-bottom: 16px; font-size: clamp(28px, 5vw, 46px); }
.custom-section-copy > div { color: var(--nav-muted); line-height: 1.8; }
.custom-section img { width: min(460px, 48%); max-height: 420px; object-fit: cover; border-radius: 22px; }

.brands-track img { height: 48px !important; width: auto; object-fit: contain; }

/* Senior design process — editable from the admin panel. */
.site-ambient { position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.72; background-image:radial-gradient(circle at 13% 12%, color-mix(in srgb, var(--nav-accent) 13%, transparent), transparent 25%),radial-gradient(circle at 86% 48%, color-mix(in srgb, var(--nav-accent) 8%, transparent), transparent 28%),linear-gradient(color-mix(in srgb, var(--nav-accent) 4%, transparent) 1px, transparent 1px),linear-gradient(90deg, color-mix(in srgb, var(--nav-accent) 4%, transparent) 1px, transparent 1px); background-size:auto,auto,48px 48px,48px 48px; mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.25)); }
html[data-theme="light"] .site-ambient { opacity:.38; }
.positioned-process { width:100%; visibility:hidden; }
.positioned-process.is-positioned { visibility:visible; }
.design-process {
  width:min(1180px, calc(100% - 40px));
  margin:clamp(42px, 6vw, 78px) auto;
  padding:clamp(24px, 3.5vw, 44px);
  position:relative;
  overflow:hidden;
  color:var(--nav-text);
  border:1px solid color-mix(in srgb, var(--process-accent) 22%, var(--nav-border));
  border-radius:clamp(24px, 3vw, 40px);
  background:
    radial-gradient(circle at 85% 5%, color-mix(in srgb, var(--process-accent) 12%, transparent), transparent 30%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-solid) 95%, transparent), color-mix(in srgb, var(--card-bg) 94%, transparent));
  box-shadow:0 30px 90px color-mix(in srgb, var(--nav-text) 8%, transparent);
}
.design-process::before { content:""; position:absolute; width:320px; height:320px; inset:-210px auto auto -130px; border:1px solid color-mix(in srgb, var(--process-accent) 28%, transparent); border-radius:50%; }
.design-process__head { max-width:740px; margin:0 auto clamp(26px, 4vw, 40px); text-align:center; position:relative; }
.design-process__head > span { display:inline-flex; padding:8px 13px; color:var(--process-accent); border:1px solid color-mix(in srgb, var(--process-accent) 35%, transparent); border-radius:999px; background:color-mix(in srgb, var(--process-accent) 8%, transparent); font-size:.78rem; font-weight:850; letter-spacing:.08em; }
.design-process__head h2 { margin:10px 0; color:var(--nav-text); font-size:clamp(1.65rem, 3.2vw, 2.8rem); line-height:1.12; letter-spacing:-.025em; }
.design-process__head p { max-width:680px; margin:auto; color:var(--nav-muted); font-size:clamp(.9rem, 1.25vw, 1.03rem); line-height:1.7; }
.design-process__map { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(20px, 2.5vw, 34px) 16px; position:relative; counter-reset:process; }
.design-process__map::before { content:""; position:absolute; top:38px; inset-inline:9% 9%; height:2px; background:linear-gradient(90deg, transparent, var(--process-accent) 12%, var(--process-accent) 88%, transparent); opacity:.5; }
.design-process__step { min-width:0; position:relative; z-index:1; }
.design-process__node { width:60px; height:60px; margin:0 auto 15px; position:relative; display:grid; place-items:center; color:var(--button-text); border:5px solid var(--surface-solid); border-radius:19px; background:var(--process-accent); box-shadow:0 0 0 1px color-mix(in srgb, var(--process-accent) 32%, transparent), 0 12px 35px color-mix(in srgb, var(--process-accent) 24%, transparent); transform:rotate(7deg); }
.design-process__node i { font-size:1.35rem; transform:rotate(-7deg); }
.design-process__node span { position:absolute; top:-15px; inset-inline-end:-15px; width:29px; height:29px; display:grid; place-items:center; color:var(--nav-text); border:1px solid var(--nav-border); border-radius:50%; background:var(--surface-solid); font-size:.68rem; font-weight:900; transform:rotate(-7deg); }
.design-process__card { height:calc(100% - 75px); padding:15px; border:1px solid var(--nav-border); border-radius:17px; background:color-mix(in srgb, var(--card-bg) 88%, transparent); transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
.design-process__step:hover .design-process__card { transform:translateY(-7px); border-color:color-mix(in srgb, var(--process-accent) 55%, var(--nav-border)); box-shadow:0 18px 46px color-mix(in srgb, var(--nav-text) 10%, transparent); }
.design-process__card small { color:var(--process-accent); font-size:.72rem; font-weight:850; text-transform:uppercase; letter-spacing:.08em; }
.design-process__card h3 { margin:7px 0 8px; color:var(--nav-text); font-size:1.06rem; line-height:1.35; }
.design-process__card p { margin:0; color:var(--nav-muted); font-size:.83rem; line-height:1.58; }
.design-process__output { margin-top:12px; padding-top:10px; display:flex; align-items:center; gap:8px; color:var(--nav-text); border-top:1px solid var(--nav-border); font-size:.75rem; font-weight:750; }
.design-process__output i { width:22px; height:22px; display:grid; place-items:center; flex:0 0 22px; color:var(--button-text); border-radius:50%; background:var(--process-accent); font-size:.65rem; }
.design-process--map .design-process__step:nth-child(even) { margin-top:38px; }
.design-process--map .design-process__map::before { top:58px; height:110px; border:2px dashed color-mix(in srgb, var(--process-accent) 42%, transparent); border-top:0; border-radius:0 0 50% 50%; background:none; }
.design-process--cards .design-process__map::before { display:none; }
.design-process--cards .design-process__node { margin-inline-start:18px; margin-inline-end:auto; }
.design-process--zigzag .design-process__map::before { top:33%; height:34%; border:2px dashed color-mix(in srgb, var(--process-accent) 42%, transparent); border-inline:0; background:none; }
.design-process--zigzag .design-process__step:nth-child(even) { transform:translateY(36px); }
.design-process--vertical { max-width:860px; }
.design-process--vertical .design-process__map { grid-template-columns:1fr; gap:16px; max-width:720px; margin:auto; }
.design-process--vertical .design-process__map::before { top:0; bottom:0; inset-inline-start:33px; inset-inline-end:auto; width:2px; height:auto; }
.design-process--vertical .design-process__step { display:grid; grid-template-columns:68px 1fr; gap:18px; }
.design-process--vertical .design-process__node { margin:0; }
.design-process--vertical .design-process__card { height:auto; }
.design-process--orbit .design-process__map { grid-template-columns:repeat(4,minmax(0,1fr)); }
.design-process--orbit .design-process__map::before { width:52%; height:72%; inset:8% 24% auto; border:2px solid color-mix(in srgb,var(--process-accent) 35%,transparent); border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--process-accent) 10%,transparent),transparent 62%); }
.design-process--orbit .design-process__step:nth-child(2n) { margin-top:42px; }
@media (max-width:1100px) { .design-process__map,.design-process--orbit .design-process__map { grid-template-columns:repeat(2, minmax(0,1fr)); }.design-process__map::before { display:none; }.design-process--map .design-process__step:nth-child(even),.design-process--zigzag .design-process__step:nth-child(even),.design-process--orbit .design-process__step:nth-child(2n) { margin-top:0; transform:none; } }
@media (max-width:650px) {
  .design-process { width:min(100% - 20px, 560px); padding:28px 18px; border-radius:24px; }
  .design-process__head { text-align:start; margin-bottom:38px; }
  .design-process__map { grid-template-columns:1fr; gap:18px; }
  .design-process__step { display:grid; grid-template-columns:58px 1fr; gap:13px; }
  .design-process__node { width:56px; height:56px; margin:3px 0 0; border-width:5px; border-radius:17px; }
  .design-process__card { height:auto; padding:18px; }
}

/* Seamless home gallery + image lightbox */
.double-slider { margin: 0 !important; padding: 55px 0 !important; overflow: hidden; }
.slider-row { overflow: hidden; direction: ltr; }
.slider-track { width: max-content; display: flex; gap: 22px; direction: ltr; will-change: transform; }
.gallery-image-button { width: auto; height: clamp(210px, 19vw, 286px); aspect-ratio: var(--gallery-ratio, 16 / 9); max-width: 78vw; flex: 0 0 auto; display: grid; place-items: center; padding: 0; border: 0; border-radius: 18px; background: color-mix(in srgb,var(--surface) 88%,transparent); overflow: hidden; cursor: zoom-in; box-shadow: 0 12px 35px rgba(0,0,0,.18); }
.gallery-image-button img { display: block; width: 100%; height: 100% !important; max-width: 100%; object-fit: contain; border-radius: 18px; transition: transform .35s ease, filter .35s ease; }
.gallery-image-button:hover img { transform: scale(1.035); filter: brightness(1.07); }
.top-row .slider-track { animation: gallery-scroll-forward var(--gallery-top-duration, 42s) linear infinite !important; }
.bottom-row { margin-top: 22px !important; }
.bottom-row .slider-track { animation: gallery-scroll-backward var(--gallery-bottom-duration, 46s) linear infinite !important; }
.slider-row:hover .slider-track { animation-play-state: paused !important; }
@keyframes gallery-scroll-forward { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 11px)); } }
@keyframes gallery-scroll-backward { from { transform: translateX(calc(-50% - 11px)); } to { transform: translateX(0); } }
[dir="rtl"] .top-row .slider-track { animation-direction: reverse !important; }
[dir="rtl"] .bottom-row .slider-track { animation-direction: reverse !important; }
.brands-slider, .brands-track { direction: ltr; }
[dir="rtl"] .brands-track { animation-direction: reverse; }
.image-lightbox { width: min(1200px, 94vw); height: min(88vh, 900px); padding: 0; border: 0; border-radius: 20px; background: rgba(5,8,7,.96); overflow: hidden; box-shadow: 0 30px 100px rgba(0,0,0,.55); }
.image-lightbox::backdrop { background: rgba(0,0,0,.8); backdrop-filter: blur(8px); }
.image-lightbox img { width: 100%; height: 100%; object-fit: contain; }
.lightbox-close { position: absolute; z-index: 2; top: 14px; inset-inline-end: 14px; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: #fff; background: rgba(0,0,0,.55); cursor: pointer; font-size: 20px; }

/* Portfolio details */
.project-detail { width: min(1120px, calc(100% - 36px)); margin: 65px auto 100px; color: var(--nav-text); }
.project-hero { text-align: center; }
.project-back { display: inline-flex; gap: 8px; align-items: center; color: var(--nav-muted); text-decoration: none; }
[dir="rtl"] .project-back i { transform: rotate(180deg); }
.project-hero > span { display: block; margin: 22px 0 8px; color: var(--nav-accent); font-weight: 800; }
.project-hero h1 { max-width: 850px; margin: auto; font-size: clamp(38px,7vw,78px); color: var(--nav-text); }
.project-hero p { max-width: 720px; margin: 18px auto 32px; color: var(--nav-muted); font-size: 18px; line-height: 1.8; }
.project-hero > img { width: 100%; max-height: 680px; object-fit: cover; border-radius: 25px; }
.project-rich-content { max-width: 820px; margin: 55px auto; color: var(--nav-muted); font-size: 18px; line-height: 1.9; }
.project-rich-content :is(h1,h2,h3,h4) { margin: 30px 0 12px; color: var(--nav-text); }
.project-rich-content img { margin: 25px 0; border-radius: 18px; }
.project-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.project-gallery button { padding: 0; border: 0; border-radius: 18px; background: transparent; overflow: hidden; cursor: zoom-in; }
.project-gallery img { width: 100%; height: 360px; object-fit: cover; transition: transform .3s; }
.project-gallery button:hover img { transform: scale(1.025); }
.project-blocks { margin: 64px auto; }
.project-block { margin-block: 28px; }
.block-width-narrow { width: min(620px, 100%); }
.block-width-medium { width: min(820px, 100%); }
.block-width-wide { width: min(1020px, 100%); }
.block-width-full { width: 100%; }
.block-position-start, .block-align-start { margin-inline-start: 0; margin-inline-end: auto; text-align: start; }
.block-position-center, .block-align-center { margin-inline: auto; text-align: center; }
.block-position-end, .block-align-end { margin-inline-start: auto; margin-inline-end: 0; text-align: end; }
.project-text-block { color: var(--nav-muted); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.95; }
.project-text-block :is(h1,h2,h3,h4) { color: var(--nav-text); line-height: 1.25; margin: 0 0 18px; }
.project-text-block p { margin: 0 0 16px; }
.project-text-block.text-style-highlight { padding: clamp(24px, 5vw, 56px); border: 1px solid color-mix(in srgb, var(--nav-text) 14%, transparent); border-radius: 24px; background: color-mix(in srgb, var(--nav-text) 5%, transparent); }
.project-text-block.text-style-quote { padding-inline-start: 26px; border-inline-start: 4px solid var(--primary, #2ed3a0); font-size: clamp(22px, 3vw, 34px); color: var(--nav-text); }
.project-image-block button, .project-grid button, .project-image-text button { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; overflow: hidden; }
.project-image-block button, .project-image-block img { border-radius: 20px; }
.project-image-block img { display: block; width: 100%; height: auto; }
.project-image-block.image-fit-cover img { height: min(70vh, 720px); object-fit: cover; }
.project-image-block figcaption { margin-top: 10px; color: var(--nav-muted); font-size: 14px; text-align: center; }
.project-grid { display: grid; grid-template-columns: repeat(var(--project-grid-columns), minmax(0, 1fr)); gap: var(--project-grid-gap); }
.grid-columns-1 { --project-grid-columns: 1; }.grid-columns-2 { --project-grid-columns: 2; }.grid-columns-3 { --project-grid-columns: 3; }.grid-columns-4 { --project-grid-columns: 4; }
.grid-gap-none { --project-grid-gap: 0; }.grid-gap-small { --project-grid-gap: 8px; }.grid-gap-medium { --project-grid-gap: 18px; }.grid-gap-large { --project-grid-gap: 32px; }
.project-grid img { display: block; width: 100%; height: auto; transition: transform .3s ease; }
.project-grid button:hover img, .project-image-block button:hover img, .project-image-text button:hover img { transform: scale(1.015); }
.grid-gap-small button, .grid-gap-medium button, .grid-gap-large button { border-radius: 16px; }
.grid-ratio-square img { aspect-ratio: 1; object-fit: cover; }.grid-ratio-portrait img { aspect-ratio: 4/5; object-fit: cover; }.grid-ratio-landscape img { aspect-ratio: 16/10; object-fit: cover; }
.project-image-text { display: grid; grid-template-columns: var(--project-split); align-items: center; gap: clamp(24px, 5vw, 70px); margin-block: clamp(40px, 8vw, 100px); }
.project-image-text.split-half { --project-split: minmax(0, 1fr) minmax(0, 1fr); }.project-image-text.split-image_wide { --project-split: minmax(0, 1.35fr) minmax(0, .65fr); }.project-image-text.split-text_wide { --project-split: minmax(0, .65fr) minmax(0, 1.35fr); }
.project-image-text.image-position-end button { order: 2; }.project-image-text.image-position-end .project-image-text-copy { order: 1; }
.project-image-text button, .project-image-text img { border-radius: 20px; }
.project-image-text img { display: block; width: 100%; height: auto; }
.project-image-text-copy { color: var(--nav-muted); font-size: 18px; line-height: 1.9; }
.project-image-text-copy :is(h1,h2,h3,h4) { color: var(--nav-text); line-height: 1.3; }
.project-spacer.spacer-small { height: 24px; }.project-spacer.spacer-medium { height: 64px; }.project-spacer.spacer-large { height: 120px; }
.project-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 35px; }

/* Testimonials */
.testimonials-section { padding: 80px 20px; color: var(--nav-text); }
.testimonials-page { min-height: 70vh; padding-top: 20px; background: var(--dark-page-bg); }
html[data-theme="light"] .testimonials-page { background: var(--light-page-bg); }
.testimonials-empty { width: min(720px,100%); margin: 25px auto; padding: 22px; border: 1px dashed var(--nav-border); border-radius: 16px; color: var(--nav-muted); text-align: center; background: var(--surface); }
.form-error { color: #ff6b6b; text-align: center; }.form-success { color: var(--nav-accent); text-align: center; }
.testimonials-heading { max-width: 700px; margin: 0 auto 35px; text-align: center; }
.testimonials-heading span { color: var(--nav-accent); font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; font-size: 12px; }
.testimonials-heading h2 { margin: 8px 0; font-size: clamp(32px,5vw,52px); }
.testimonials-heading p { color: var(--nav-muted); }
.testimonials-grid { width: min(1120px,100%); margin: auto; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.testimonial-card { padding: 26px; border: 1px solid var(--nav-border); border-radius: 20px; background: var(--surface-solid); box-shadow: var(--nav-shadow); cursor: zoom-in; transition: transform .25s, border-color .25s; }
.testimonial-card:hover { transform: translateY(-4px); border-color: var(--nav-accent); }
.testimonial-stars { color: #f5b800 !important; letter-spacing: 2px; text-shadow: 0 1px 8px rgba(245,184,0,.18); }
.testimonial-card blockquote { min-height: 110px; margin: 18px 0; color: var(--nav-text); line-height: 1.75; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-author > :is(img,span) { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; object-fit: cover; color: var(--button-text); background: var(--nav-accent); font-weight: 900; }
.testimonial-author div { display: grid; }.testimonial-author small { color: var(--nav-muted); }
.review-image-lightbox { width: min(900px,94vw); max-height: 92vh; padding: 52px 16px 16px; border: 1px solid var(--nav-border); border-radius: 20px; background: rgba(5,12,10,.96); }
.review-image-lightbox::backdrop { background: rgba(0,0,0,.82); backdrop-filter: blur(7px); }
.review-image-lightbox img { display: block; max-width: 100%; max-height: calc(92vh - 70px); margin: auto; border-radius: 14px; object-fit: contain; }
.review-lightbox-close { position: absolute; top: 10px; inset-inline-end: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; color: #fff; background: rgba(255,255,255,.12); cursor: pointer; }
.testimonial-form-wrap { width: min(760px,100%); margin: 35px auto 0; padding: 18px; border: 1px solid var(--nav-border); border-radius: 18px; background: var(--surface); }
.testimonial-form-wrap summary { cursor: pointer; color: var(--nav-text); font-weight: 800; text-align: center; }
.testimonial-form { margin-top: 20px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.testimonial-form :is(input,select,textarea) { width: 100%; padding: 13px 14px; border: 1px solid var(--nav-border); border-radius: 11px; color: var(--nav-text); background: var(--surface-solid); }
.testimonial-form textarea, .testimonial-form button { grid-column: 1/-1; }.testimonial-form button { padding: 13px; border: 0; border-radius: 11px; color: var(--button-text); background: var(--nav-accent); font-weight: 800; cursor: pointer; }
.form-success { margin: 14px 0; color: var(--nav-accent); text-align: center; }

/* Global responsive safety net for legacy pages */
img, video, iframe { max-width: 100%; }
.portfolio-intro, .portfolio-showcase, .portfolio-tabs, .blog-layout, .contact-section, .contact2-section { max-width: 100%; overflow: hidden; }
.projects-grid { width: 100% !important; margin-inline: 0 !important; }
.project-card { height: 100%; }
.project-card img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.footer { width: 100%; }

@media (max-width: 900px) {
  .resume-layout { grid-template-columns: 1fr; gap: 26px; }
  .resume-tabs { display: grid; grid-template-columns: repeat(4, 1fr); }
  .resume-tabs .tab-btn { text-align: center; }
  .custom-section-inner { gap: 28px; }
  .footer-container { gap: 30px !important; }
  .testimonials-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 700px) {
  .resume-page { width: calc(100% - 28px); margin-top: 38px; }
  .resume-intro { align-items: start; flex-direction: column; }
  .resume-intro h1 { font-size: 42px; }
  .cv-actions { width: 100%; }
  .cv-actions .btn { flex: 1; justify-content: center; }
  .resume-tabs { grid-template-columns: repeat(2, 1fr); }
  .resume-cards { grid-template-columns: 1fr; }
  .custom-section-inner { flex-direction: column; text-align: center; }
  .custom-section img { width: 100%; }
  .portfolio-intro { padding-inline: 18px !important; }
  .p-tabs { width: 100%; padding-inline: 14px; }
  .p-tab-btn { flex: 1 1 160px; }
  .contact-form, .contact2-form { width: 100% !important; }
  .footer-container { display: grid !important; grid-template-columns: 1fr !important; text-align: center; }
  .footer-column, .footer-column2 { min-width: 0 !important; text-align: center !important; }
  .double-slider { padding-block: 35px !important; }
  .gallery-image-button { height: 184px; max-width: 84vw; border-radius: 14px; }
  .gallery-image-button img { height: 100% !important; border-radius: 14px; }
  .project-gallery, .testimonials-grid, .testimonial-form { grid-template-columns: 1fr; }
  .project-gallery img { height: 240px; }
  .project-grid.grid-columns-3, .project-grid.grid-columns-4 { --project-grid-columns: 2; }
  .project-image-text { grid-template-columns: 1fr; }
  .project-image-text.image-position-end button, .project-image-text.image-position-end .project-image-text-copy { order: initial; }
}
@media (max-width: 560px) {
  .project-grid { --project-grid-columns: 1 !important; }
  .grid-gap-large { --project-grid-gap: 16px; }
  .project-spacer.spacer-large { height: 72px; }
}

@media (max-width: 420px) {
  .brand-name { max-width: 145px; overflow: hidden; text-overflow: ellipsis; }
  .resume-tabs { grid-template-columns: 1fr; }
  .cv-actions { display: grid; }
  .home-content h1 { overflow-wrap: anywhere; }
  .stats { grid-template-columns: 1fr 1fr !important; }
  .stat { justify-content: center; }
}
.promotion-banners { width: min(1000px, calc(100% - 32px)); margin: 30px auto 12px; padding: 0 !important; display: grid; gap: 18px; background: transparent !important; background-color: transparent !important; box-shadow: none !important; border: 0 !important; }
.promotion-banner { display: block; overflow: hidden; border-radius: 18px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--nav-accent) 18%, transparent); box-shadow: 0 14px 42px color-mix(in srgb, var(--nav-text) 10%, transparent); }
.promotion-banner img { display: block; width: 100%; height: auto; max-height: 365px; object-fit: contain; }
@media (max-width: 640px) { .promotion-banners { width: min(100% - 20px, 1000px); margin-top: 18px; gap: 12px; } .promotion-banner { border-radius: 12px; } }

/* Full document direction follows the selected language. */
html[dir="rtl"] body { direction: rtl; text-align: right; }
html[dir="ltr"] body { direction: ltr; text-align: left; }
html, body { width: 100%; max-width: 100%; overflow-x: clip; }
body > :is(section, main, header, footer, div) { max-width: 100%; }
@media (min-width: 993px) {
  .home { flex-wrap: nowrap; }
  .home-content { min-width: 0; flex: 1 1 600px; }
  .profile { width: min(38vw, 470px); height: min(38vw, 470px); flex: 0 1 470px; }

  /* Align hero copy with the navbar's logical start in both LTR and RTL. */
  .home {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
    padding: 30px 18px;
    box-sizing: border-box;
  }
  .home-content { text-align: start; }

  /* Give the statistics a little more breathing room below the hero. */
  .stats { margin-top: -30px; }
}

/* Offer strip and category sidebars inherit the global theme palette. */
.top-banner {
  color: var(--button-text) !important;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--nav-accent) 82%, var(--surface-solid) 18%),
    var(--nav-accent)
  ) !important;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--nav-accent) 22%, transparent) !important;
}
.top-banner :is(p, a) { color: var(--button-text) !important; }

.blog-sidebar {
  color: var(--nav-text);
  border-color: var(--nav-border);
  background: color-mix(in srgb, var(--surface-solid) 92%, transparent);
}
.blog-sidebar h3 {
  color: var(--nav-text);
  border-color: var(--nav-border);
}
.blog-sidebar .categories-list li a {
  color: var(--nav-text);
  border-color: var(--nav-border);
  background: color-mix(in srgb, var(--card-bg) 94%, transparent);
}
.blog-sidebar .categories-list li a:is(:hover, .active) {
  color: var(--button-text);
  border-color: var(--nav-accent);
  background: var(--nav-accent);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--nav-accent) 18%, transparent);
}
.blog-sidebar .sidebar-banner {
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--nav-accent) 18%, var(--nav-border));
  background:
    radial-gradient(100% 120% at 50% 0%, color-mix(in srgb, var(--nav-accent) 34%, transparent) 0%, color-mix(in srgb, var(--nav-accent) 10%, transparent) 38%, transparent 64%),
    linear-gradient(180deg, var(--surface-solid), var(--card-bg)) !important;
  box-shadow: 0 12px 35px color-mix(in srgb, var(--nav-text) 10%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--nav-accent) 8%, transparent);
}
.blog-sidebar .sidebar-banner::before,
.blog-sidebar .sidebar-banner::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(24px);
}
.blog-sidebar .sidebar-banner::before {
  width: 78%;
  aspect-ratio: 1;
  inset-inline-start: -30%;
  top: -16%;
  background: radial-gradient(circle, color-mix(in srgb, var(--nav-accent) 62%, transparent) 0%, color-mix(in srgb, var(--nav-accent) 22%, transparent) 44%, transparent 72%);
  opacity: .9;
}
.blog-sidebar .sidebar-banner::after {
  width: 58%;
  aspect-ratio: 1;
  inset-inline-end: -26%;
  bottom: -14%;
  background: radial-gradient(circle, color-mix(in srgb, var(--nav-accent) 30%, var(--button-hover) 18%) 0%, transparent 70%);
  opacity: .5;
}
.blog-sidebar .sidebar-banner .sb-inner { position: relative; z-index: 1; }
.blog-sidebar .sidebar-banner:hover::before { opacity: 1; }
.blog-sidebar .sidebar-banner .sb-inner,
.blog-sidebar .sidebar-banner .sb-title { color: var(--nav-text) !important; }
.blog-sidebar .sidebar-banner :is(.sb-eyebrow, .sb-text) { color: var(--nav-muted) !important; }
.blog-sidebar .sidebar-banner .sb-btn {
  color: var(--button-text);
  background: var(--nav-accent);
}
.blog-sidebar .sidebar-banner .sb-btn:hover { background: var(--button-hover); }

/* Site-wide motion system: subtle, vertical, and safe for RTL layouts. */
@keyframes site-page-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes site-header-enter { from { opacity: 0; transform: translateY(-14px) scale(.99); } to { opacity: 1; transform: none; } }
.motion-ready body { animation: site-page-enter .42s ease both; transition: opacity .23s ease, transform .23s ease, filter .23s ease; }
.motion-ready .site-header { animation: site-header-enter .58s cubic-bezier(.2,.8,.2,1) .05s both; }
.motion-ready.page-is-leaving body { opacity: 0; transform: translateY(-5px); filter: blur(2px); pointer-events: none; }
.motion-ready .site-reveal { opacity: 0; transform: translateY(22px) scale(.992); transition: opacity .62s cubic-bezier(.2,.75,.2,1) var(--reveal-delay, 0ms), transform .62s cubic-bezier(.2,.75,.2,1) var(--reveal-delay, 0ms); }
.motion-ready .site-reveal.is-revealed { opacity: 1; transform: none; }
.motion-ready :is(.service-card, .project-card, .post-card-dark, .resume-card, .testimonial-card, .promotion-banner) { will-change: transform; }
.motion-ready :is(.service-card, .resume-card, .promotion-banner):hover { transform: translateY(-5px); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .site-reveal { opacity: 1 !important; transform: none !important; }
}
html[dir="rtl"] :is(.home-content, .about-text, .footer, .footer-column, .resume-content, .resume-card, .blog-sidebar, .post-card-dark, .project-card, .contact-form, .contact2-form, .brief-container, .testimonial-card, .custom-section-inner) { text-align: right; }
html[dir="ltr"] :is(.home-content, .about-text, .footer, .footer-column, .resume-content, .resume-card, .blog-sidebar, .post-card-dark, .project-card, .contact-form, .contact2-form, .brief-container, .testimonial-card, .custom-section-inner) { text-align: left; }
html[dir="rtl"] :is(input, textarea, select) { direction: rtl; text-align: right; }
html[dir="ltr"] :is(input, textarea, select) { direction: ltr; text-align: left; }
html[dir="rtl"] .site-header { padding: 10px 18px 10px 12px; }
html[dir="rtl"] .nav-actions { justify-self: start; }
html[dir="rtl"] .brand { justify-self: end; }
html[dir="rtl"] :is(.buttons, .socials, .cv-actions, .project-actions, .testimonial-author) { direction: rtl; }

/* All social/contact icons follow the identity palette. */
:is(.social-links, .socials, .social-icons-grid) a {
  color: var(--nav-accent) !important;
  border-color: color-mix(in srgb, var(--nav-accent) 48%, transparent) !important;
}
:is(.social-links, .socials) a:hover {
  color: var(--button-hover) !important;
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--nav-accent) 34%, transparent));
}
.social-icons-grid a:hover {
  color: var(--button-text) !important;
  border-color: var(--nav-accent) !important;
  background: var(--nav-accent) !important;
}
html[dir="rtl"] .footer-links { padding-right: 0; }
html[dir="rtl"] .fa-arrow-right { transform: rotate(180deg); }
.brief-reference-email {
  display: flex; align-items: center; gap: 12px; padding: 15px 17px; border-radius: 13px;
  border: 1px solid color-mix(in srgb, var(--nav-accent) 28%, var(--nav-border));
  background: color-mix(in srgb, var(--nav-accent) 8%, var(--surface-solid)); color: var(--nav-text);
}
.brief-reference-email[hidden] { display: none !important; }
.brief-reference-email i, .brief-reference-email a { color: var(--nav-accent); }

/* Refined contact form */
.contact-section { padding-inline: 18px; }
.contact-section .contact-form {
  width: min(780px, 100%);
  max-width: 780px;
  margin: 30px auto 0;
  padding: clamp(20px, 3vw, 32px);
  gap: 22px;
  border: 1px solid color-mix(in srgb, var(--nav-accent) 20%, var(--nav-border));
  border-radius: 22px;
  box-shadow: 0 22px 60px color-mix(in srgb, var(--theme-base) 68%, transparent), inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(12px);
}
.contact-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.contact-field { display: grid; gap: 8px; min-width: 0; }
.contact-field > span:first-child { color: var(--nav-text); font-size: 14px; font-weight: 800; }
.contact-field-wide { grid-column: 1 / -1; }
.contact-section .contact-form :is(input, select, textarea) {
  width: 100%; min-width: 0; border: 1px solid var(--nav-border) !important; border-radius: 12px;
  padding: 13px 15px; background: color-mix(in srgb, var(--surface-solid) 92%, transparent) !important;
  color: var(--nav-text) !important; font: inherit; outline: none; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.contact-section .contact-form :is(input, select, textarea):focus {
  border-color: var(--nav-accent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--nav-accent) 13%, transparent);
}
.contact-section .contact-form textarea { min-height: 135px; resize: vertical; line-height: 1.7; }
.contact-section .contact-form :is(input, textarea)::placeholder { color: var(--nav-muted); opacity: .72; }
.contact-section .contact-phone-group { display: grid; grid-template-columns: 135px minmax(0,1fr); gap: 10px; direction: ltr; }
.contact-section .contact-phone-group select { direction: ltr !important; text-align: left !important; cursor: pointer; }
.contact-section .contact-phone-group input { direction: ltr !important; text-align: left !important; }
.contact-section .contact-form button {
  min-height: 52px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--nav-accent) 22%, transparent); transition: transform .2s ease, box-shadow .2s ease;
}
.contact-section .contact-form button:hover { transform: translateY(-2px); box-shadow: 0 16px 34px color-mix(in srgb, var(--nav-accent) 28%, transparent); }
#contactMessage { width: min(780px, 100%); margin-inline: auto; }
@media (max-width: 640px) {
  .contact-section .contact-form { padding: 18px; border-radius: 17px; }
  .contact-form-grid { grid-template-columns: 1fr; gap: 15px; }
  .contact-field-wide { grid-column: auto; }
  .contact-section .contact-phone-group { grid-template-columns: 112px minmax(0,1fr); }
}
@media (max-width: 860px) {
  html[dir="rtl"] .site-header { padding: 8px 12px 8px 10px; }
  html[dir="rtl"] .nav-actions { justify-self: start; }
}

/* Content cards are compact; they must not inherit portfolio equal-height cards. */
.video-content-page .content-intro { padding: 24px 20px 28px; }
.video-content-page .content-type-tabs { margin-bottom: 22px; }
.video-content-page .content-browser {
  margin-top: 0 !important;
  padding: 0 !important;
  gap: 20px;
  align-items: start;
}
.content-browser .portfolio-category-sidebar { max-width: 280px; padding: 22px; }
.content-browser .content-grid {
  align-items: start;
  align-content: start;
  gap: 16px !important;
  margin-bottom: 24px !important;
}
.content-browser .video-card-col { align-self: start; }
.content-browser .video-card {
  height: auto !important;
  min-height: 0 !important;
  align-self: start;
}
.content-browser .video-card .project-card-body { flex: 1 1 auto; min-height: 190px; padding: 14px; display: flex; flex-direction: column; }
.content-browser .video-card .project-meta { min-height: 0; margin-bottom: 10px; }
.content-browser .video-card h3 { min-height: 47px !important; margin-bottom: 7px; font-size: 16px; -webkit-line-clamp: 2; }
.content-browser .video-card .project-excerpt { min-height: 42px; margin-bottom: 10px; -webkit-line-clamp: 2; }
.content-browser .video-card .project-link { min-height: 42px; margin-top: auto; padding-inline: 13px; }
.content-browser .video-card .project-link i { width: 27px; height: 27px; }
@media (max-width: 991px) {
  .content-browser .portfolio-category-sidebar { max-width: none; }
}

/* Reels and long videos are two separate, equal-card sections. */
.content-sections { display: grid; gap: 44px; }
.content-video-section { min-width: 0; }
.content-section-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.content-section-heading h2 { margin: 0; color: var(--nav-text); font-size: clamp(1.35rem,2.5vw,1.9rem); }
.content-section-heading p { margin: 3px 0 0; color: var(--nav-muted); font-size: .82rem; }
.content-section-icon { width: 46px; height: 46px; display: grid; place-items: center; flex: none; border-radius: 14px; color: var(--button-text); background: var(--nav-accent); box-shadow: 0 10px 25px color-mix(in srgb,var(--nav-accent) 22%,transparent); }
.content-video-section .content-grid { display: grid; align-items: stretch; margin: 0 !important; padding: 0 !important; }
.content-grid--reel { grid-template-columns: repeat(auto-fill,minmax(185px,215px)) !important; justify-content: start; }
.content-grid--long { grid-template-columns: repeat(auto-fill,minmax(300px,410px)) !important; justify-content: start; }
.content-grid--design { grid-template-columns: repeat(auto-fill,minmax(230px,310px)) !important; justify-content: start; }
.content-video-section .video-card-col { display: flex; height: 100%; }
.content-video-section .video-card { width: 100%; height: 100% !important; }
.content-video-section .video-card .project-card-body { flex: 1 1 auto; }
.content-filter-empty { margin: 0; }
@media(max-width:700px){.content-grid--reel,.content-grid--long,.content-grid--design{grid-template-columns:minmax(0,1fr) !important}.content-grid--reel{max-width:300px}.content-sections{gap:34px}}

/* Standalone designs and swipeable carousel viewer. */
.visual-content-design{width:min(820px,100%);margin:0 auto;overflow:hidden;border:1px solid var(--nav-border);border-radius:24px;background:var(--surface-solid);box-shadow:0 25px 70px rgba(0,0,0,.25)}.visual-content-design img{width:100%;height:auto;display:block}
.social-design-embed{width:min(620px,100%);height:min(78vh,760px);margin:0 auto;overflow:hidden;border:1px solid var(--nav-border);border-radius:22px;background:#fff;box-shadow:0 25px 70px rgba(0,0,0,.25)}.social-design-embed iframe{width:100%;height:100%;border:0}.social-design-embed--instagram{width:min(560px,100%)}
.visual-carousel{position:relative;width:min(820px,calc(100% - 70px));margin:0 auto;overflow:visible;background:transparent}.visual-carousel-track{position:relative;display:grid;place-items:center}.visual-carousel-slide{position:absolute;z-index:0;inset:0;margin:0;display:grid;place-items:center;visibility:hidden;opacity:0;pointer-events:none;transform:scale(.97);transition:opacity .32s ease,transform .32s ease,filter .32s ease}.visual-carousel-slide.active{position:relative;z-index:2;visibility:visible;opacity:1;pointer-events:auto;transform:none}.visual-carousel-slide.is-next{z-index:1;visibility:visible;opacity:.2;filter:saturate(.65);transform:translateX(32px) scale(.975)}[data-visual-carousel][data-direction="rtl"] .visual-carousel-slide.is-next{transform:translateX(-32px) scale(.975)}.visual-carousel-slide img{display:block;width:auto;max-width:100%;height:auto;max-height:78vh;object-fit:contain;border-radius:16px;box-shadow:0 24px 65px rgba(0,0,0,.28)}.visual-carousel-prev,.visual-carousel-next{position:absolute;z-index:4;top:50%;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;color:var(--button-text);background:var(--nav-accent);box-shadow:0 8px 25px rgba(0,0,0,.25);transform:translateY(-50%);cursor:pointer}.visual-carousel-prev{left:-58px}.visual-carousel-next{right:-58px}.visual-carousel-prev:disabled,.visual-carousel-next:disabled{opacity:.28;cursor:default}.visual-carousel-dots{position:absolute;z-index:4;left:50%;bottom:14px;padding:7px 9px;display:flex;gap:7px;border-radius:999px;background:rgba(0,0,0,.58);transform:translateX(-50%)}.visual-carousel-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#fff;opacity:.45;cursor:pointer}.visual-carousel-dots button.active{width:22px;border-radius:8px;opacity:1;background:var(--nav-accent)}
@media(max-width:700px){.visual-carousel{width:min(100% - 32px,820px)}.visual-carousel-slide.is-next{transform:translateX(18px) scale(.98)}[data-visual-carousel][data-direction="rtl"] .visual-carousel-slide.is-next{transform:translateX(-18px) scale(.98)}.visual-carousel-prev,.visual-carousel-next{width:38px;height:38px}.visual-carousel-prev{left:-17px}.visual-carousel-next{right:-17px}}
[data-visual-carousel][data-direction="rtl"] .visual-carousel-prev{left:auto;right:-58px}[data-visual-carousel][data-direction="rtl"] .visual-carousel-next{right:auto;left:-58px}@media(max-width:700px){[data-visual-carousel][data-direction="rtl"] .visual-carousel-prev{right:-17px}[data-visual-carousel][data-direction="rtl"] .visual-carousel-next{left:-17px}}

/* Moderated video comments */
.video-comments{margin-top:clamp(48px,8vw,90px);padding-top:clamp(35px,5vw,60px);border-top:1px solid var(--nav-border)}
.video-comments-head{text-align:center;margin-bottom:30px}.video-comments-head>span{color:var(--nav-accent);font-size:.75rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.video-comments-head h2{margin:7px 0 4px;font-size:clamp(1.7rem,4vw,2.5rem)}.video-comments-head p{margin:0;color:var(--nav-muted)}
.video-comments-layout{display:grid;grid-template-columns:minmax(280px,380px) minmax(0,1fr);gap:24px;align-items:start}
.video-comment-form,.video-comment-list{border:1px solid var(--nav-border);border-radius:20px;background:var(--surface-solid)}.video-comment-form{display:grid;gap:15px;padding:22px}.video-comment-form h3{margin:0 0 2px}.video-comment-form>label{display:grid;gap:7px}.video-comment-form label>span,.comment-rating legend{color:var(--nav-text);font-size:.8rem;font-weight:800}.video-comment-form :is(input,textarea){width:100%;padding:11px 13px;border:1px solid var(--nav-border);border-radius:11px;color:var(--nav-text);background:var(--input-bg);outline:none}.video-comment-form :is(input,textarea):focus{border-color:var(--nav-accent);box-shadow:0 0 0 3px var(--nav-accent-soft)}.video-comment-form button{min-height:44px;border:0;border-radius:11px;color:var(--button-text);background:var(--nav-accent);font-weight:850;cursor:pointer}.video-comment-form button i{margin-inline-end:8px}
.comment-rating{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:7px;margin:0;padding:0;border:0}.comment-rating legend{width:100%;margin-bottom:7px}.comment-rating label{cursor:pointer}.comment-rating input{position:absolute;opacity:0}.comment-rating label span{position:absolute;opacity:0}.comment-rating i{color:var(--nav-border);font-size:1.15rem}.comment-rating label:has(input:checked) i,.comment-rating label:has(input:checked)~label i{color:#f5b301}
.video-comment-list{overflow:hidden}.video-comment-item{display:grid;grid-template-columns:42px 1fr;gap:12px;padding:18px;border-bottom:1px solid var(--nav-border)}.video-comment-item:last-child{border-bottom:0}.video-comment-avatar{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;color:var(--button-text);background:var(--nav-accent);font-weight:900}.video-comment-item header{display:flex;justify-content:space-between;gap:12px}.video-comment-item header span{color:#f5b301;font-size:.7rem}.video-comment-item p{margin:8px 0;color:var(--nav-text);line-height:1.75}.video-comment-item time{color:var(--nav-muted);font-size:.7rem}.video-comments-empty{min-height:230px;display:grid;place-items:center;align-content:center;gap:8px;color:var(--nav-muted);text-align:center}.video-comments-empty i{color:var(--nav-accent);font-size:2rem}.video-comments-empty strong{color:var(--nav-text)}.video-comment-success{margin:0 auto 20px;padding:12px 16px;max-width:620px;border:1px solid color-mix(in srgb,var(--nav-accent) 35%,transparent);border-radius:12px;color:var(--nav-text);background:var(--nav-accent-soft);text-align:center}.video-comment-success i{margin-inline-end:8px;color:var(--nav-accent)}.video-comment-error{margin:0;color:#ef4444;font-size:.8rem}
@media(max-width:760px){.video-comments-layout{grid-template-columns:1fr}.video-comment-form{order:2}.video-comment-list{order:1}}