/* sitelyx-scoped: portfolio-dark v1 */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/tenant/frontend/themes/fonts/pdk/inter.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url('/assets/tenant/frontend/themes/fonts/pdk/space-grotesk.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/tenant/frontend/themes/fonts/pdk/poppins-300.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/tenant/frontend/themes/fonts/pdk/poppins-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/tenant/frontend/themes/fonts/pdk/poppins-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/tenant/frontend/themes/fonts/pdk/poppins-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

.portfolio-dark{--bg:#070707;--bg-soft:#0d0d0f;--panel:#121214;--panel-2:#17171a;--line:rgba(255,255,255,.10);--line-soft:rgba(255,255,255,.06);--text:#f5f2ea;--muted:#b1ada5;--muted-2:#7c7770;--orange:#d9e449;--orange-2:#9cc72c;--orange-3:#eff06f;--forest:#1f6a2e;--leaf:#4c922b;--shadow:0 20px 60px rgba(0,0,0,.32);--radius:24px;--sans: "Poppins", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;--display: "Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif;--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;--max: 1320px}
.portfolio-dark *{box-sizing:border-box}
body.portfolio-dark{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.55;overflow-x:hidden}
.portfolio-dark a{text-decoration:none;color:inherit}
.portfolio-dark img{display:block;max-width:100%}
.portfolio-dark button,.portfolio-dark input,.portfolio-dark textarea,.portfolio-dark select{font:inherit}
.portfolio-dark ::selection{background:var(--orange);color:#120d08}
.portfolio-dark .site-noise{position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.035;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='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.66'/%3E%3C/svg%3E")}
.portfolio-dark .bg-orb,.portfolio-dark .bg-orb-2{position:fixed;border-radius:50%;filter:blur(68px);pointer-events:none;z-index:0}
.portfolio-dark .bg-orb{width:380px;height:380px;right:-120px;top:70px;background:rgba(var(--accent-rgb),.18)}
.portfolio-dark .bg-orb-2{width:280px;height:280px;left:-80px;top:48vh;background:rgba(var(--accent2-rgb),.10)}
.portfolio-dark .page{position:relative;z-index:1}
.portfolio-dark .wrap{width:min(calc(100% - 28px), var(--max));margin:0 auto}
.portfolio-dark .progress{position:fixed;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--orange),var(--orange-2),var(--orange-3));z-index:999}
.portfolio-dark .header{position:fixed;left:0;right:0;top:0;z-index:80;padding:14px 0;transition:background .35s,border-color .35s,backdrop-filter .35s}
.portfolio-dark .header.scrolled{background:rgba(7,7,7,.68);backdrop-filter:blur(18px);border-bottom:1px solid var(--line-soft)}
.portfolio-dark .nav{display:flex;align-items:center;justify-content:space-between;gap:18px}
.portfolio-dark .brand{display:flex;align-items:center;gap:12px}
.portfolio-dark .brand-mark{width:38px;height:38px;border-radius:12px;border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;font:700 11px var(--mono);position:relative;overflow:hidden;background:rgba(255,255,255,.02)}
.portfolio-dark .brand-mark:after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--orange),var(--orange-2))}
.portfolio-dark .brand-copy strong{display:block;font:700 15px var(--display);letter-spacing:-.03em}
.portfolio-dark .brand-copy span{display:block;font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.portfolio-dark .nav-links{display:flex;align-items:center;gap:24px}
.portfolio-dark .nav-links a{font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#d8d3cb;position:relative}
.portfolio-dark .nav-links a:after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:1px;background:var(--orange);transition:right .32s ease}
.portfolio-dark .nav-links a:hover:after,.portfolio-dark .nav-links a.active:after{right:0}
.portfolio-dark .cta-row{display:flex;align-items:center;gap:10px}
.portfolio-dark .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 18px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.03);font:700 10px var(--mono);letter-spacing:.11em;text-transform:uppercase;position:relative;overflow:hidden;transition:transform .28s ease,border-color .28s ease}
.portfolio-dark .btn:before{content:"";position:absolute;inset:0;background:var(--orange);transform:translateY(102%);transition:transform .35s ease;z-index:-1}
.portfolio-dark .btn:hover{transform:translateY(-2px);border-color:var(--orange)}
.portfolio-dark .btn:hover:before{transform:none}
.portfolio-dark .btn.primary{background:linear-gradient(135deg,var(--orange),var(--orange-2));border-color:transparent;color:#120b07}
.portfolio-dark .btn.primary:before{background:#fff}
.portfolio-dark .btn.small{padding:12px 14px;font-size:9px}
.portfolio-dark .menu-toggle{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#121214;color:#fff}
.portfolio-dark .menu-toggle span,.portfolio-dark .menu-toggle:before,.portfolio-dark .menu-toggle:after{content:"";display:block;width:16px;height:1px;background:#fff;margin:4px auto}
.portfolio-dark .mobile-menu{position:fixed;inset:0;background:#09090b;z-index:79;display:flex;flex-direction:column;justify-content:center;transform:translateY(-105%);transition:transform .45s ease;padding:24px}
.portfolio-dark .mobile-menu.open{transform:none}
.portfolio-dark .mobile-menu a{font:700 clamp(40px,10vw,64px)/1 var(--display);letter-spacing:-.05em;padding:10px 0;border-bottom:1px solid var(--line)}
.portfolio-dark .mobile-menu small{margin-top:20px;color:var(--muted-2);font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.portfolio-dark .hero{padding:120px 0 34px;position:relative;overflow:hidden}
.portfolio-dark .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:end}
.portfolio-dark .hero-copy{padding:28px 0 30px}
.portfolio-dark .eyebrow{display:inline-flex;align-items:center;gap:12px;color:#d3cec7;font:700 10px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.portfolio-dark .eyebrow i{display:block;width:40px;height:1px;background:linear-gradient(90deg,var(--orange),transparent)}
.portfolio-dark .hero-title{margin:22px 0 20px;font:700 clamp(52px,8vw,116px)/.88 var(--display);letter-spacing:-.07em}
.portfolio-dark .hero-title .thin{font-weight:300;color:#a9a39a}
.portfolio-dark .hero-title .accent{display:inline-block;background:linear-gradient(90deg,var(--orange),var(--orange-3));-webkit-background-clip:text;background-clip:text;color:transparent}
.portfolio-dark .hero-intro{display:grid;grid-template-columns:minmax(0,460px) 1fr;gap:28px;align-items:end}
.portfolio-dark .hero-intro p{margin:0;color:#c2bdb6;font-size:16px;line-height:1.8}
.portfolio-dark .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.portfolio-dark .hero-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:42px}
.portfolio-dark .meta-card{padding:16px;border:1px solid var(--line-soft);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));border-radius:18px}
.portfolio-dark .meta-card strong{display:block;font:700 14px var(--display);letter-spacing:-.03em}
.portfolio-dark .meta-card span{display:block;margin-top:8px;color:var(--muted-2);font:600 9px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.portfolio-dark .hero-visual{position:relative;min-height:740px}
.portfolio-dark .photo-stack{position:relative;height:100%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1.18fr .84fr;gap:14px}
.portfolio-dark .card-photo{position:relative;border-radius:28px;overflow:hidden;background:#111;min-height:180px;border:1px solid rgba(255,255,255,.12);box-shadow:var(--shadow)}
.portfolio-dark .card-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08) brightness(.88);transition:transform .9s ease, filter .6s ease}
.portfolio-dark .card-photo:hover img{transform:scale(1.04);filter:grayscale(.28) contrast(1.05) brightness(.92)}
.portfolio-dark .card-photo:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(0,0,0,.42)),radial-gradient(circle at 80% 18%,rgba(var(--accent-rgb),.22),transparent 25%);z-index:1;pointer-events:none}
.portfolio-dark .card-photo.large{grid-row:1 / span 2}
.portfolio-dark .card-photo.large img{object-position:center 18%}
.portfolio-dark .card-photo.split-top img{object-position:center 25%}
.portfolio-dark .card-photo.split-bottom img{object-position:center 24%}
.portfolio-dark .photo-badge{position:absolute;left:14px;bottom:14px;z-index:2;padding:10px 12px;border-radius:999px;background:rgba(7,7,7,.72);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);font:700 9px var(--mono);letter-spacing:.11em;text-transform:uppercase}
.portfolio-dark .hero-stats{position:absolute;left:20px;right:20px;bottom:20px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;z-index:2}
.portfolio-dark .stat{padding:14px;background:rgba(7,7,7,.72);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:18px}
.portfolio-dark .stat strong{display:block;font:700 clamp(22px,2.2vw,30px)/1 var(--display);letter-spacing:-.05em}
.portfolio-dark .stat span{display:block;margin-top:7px;color:#9c978f;font:600 8px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.portfolio-dark .role-rail{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);overflow:hidden;background:#0a0a0c}
.portfolio-dark .role-track{display:flex;width:max-content;animation:marquee 26s linear infinite}
.portfolio-dark .role-track span{padding:16px 22px;white-space:nowrap;font:700 clamp(22px,3.8vw,42px)/1 var(--display);letter-spacing:-.05em;color:#ddd8d1}
.portfolio-dark .role-track span:after{content:"✦";margin-left:22px;color:var(--orange)}
@keyframes marquee{to{transform:translateX(-50%)}
}
.portfolio-dark .section{padding:88px 0}
.portfolio-dark .section.topless{padding-top:28px}
.portfolio-dark .section-head{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:end;margin-bottom:34px}
.portfolio-dark .kicker-row{display:flex;justify-content:space-between;gap:18px;border-top:1px solid var(--line);padding-top:14px;margin-bottom:26px;color:#c4bfb7;font:700 10px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.portfolio-dark .kicker-row span:last-child{color:var(--muted-2);text-align:right}
.portfolio-dark .section-title{margin:0;font:700 clamp(42px,6vw,84px)/.93 var(--display);letter-spacing:-.06em}
.portfolio-dark .section-title .accent{background:linear-gradient(90deg,var(--orange),var(--orange-3));-webkit-background-clip:text;background-clip:text;color:transparent}
.portfolio-dark .section-copy{margin:0;color:#b2ada5;max-width:560px;font-size:15px;line-height:1.8}
.portfolio-dark .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.portfolio-dark .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.portfolio-dark .feature-card,.portfolio-dark .service-card,.portfolio-dark .story-card,.portfolio-dark .case-card,.portfolio-dark .stack-card{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));border:1px solid var(--line-soft);border-radius:26px;padding:24px;position:relative;overflow:hidden;min-height:260px}
.portfolio-dark .feature-card:before,.portfolio-dark .service-card:before,.portfolio-dark .story-card:before,.portfolio-dark .case-card:before,.portfolio-dark .stack-card:before{content:"";position:absolute;width:180px;height:180px;right:-60px;top:-60px;border-radius:50%;background:rgba(var(--accent-rgb),.11);filter:blur(32px)}
.portfolio-dark .feature-card small,.portfolio-dark .service-card small,.portfolio-dark .story-card small,.portfolio-dark .case-card small,.portfolio-dark .stack-card small{display:block;color:var(--muted-2);font:700 9px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.portfolio-dark .feature-card h3,.portfolio-dark .service-card h3,.portfolio-dark .story-card h3,.portfolio-dark .case-card h3,.portfolio-dark .stack-card h3{margin:62px 0 12px;font:700 28px/1 var(--display);letter-spacing:-.04em}
.portfolio-dark .feature-card p,.portfolio-dark .service-card p,.portfolio-dark .story-card p,.portfolio-dark .case-card p,.portfolio-dark .stack-card p{margin:0;color:#b1ada5;font-size:14px;line-height:1.7}
.portfolio-dark .sticky-shell{display:grid;grid-template-columns:.88fr 1.12fr;gap:18px;align-items:start}
.portfolio-dark .sticky-card{position:sticky;top:96px;border:1px solid var(--line-soft);border-radius:32px;padding:22px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02))}
.portfolio-dark .sticky-card .portrait{height:560px;border-radius:24px;overflow:hidden;margin-top:14px;position:relative}
.portfolio-dark .sticky-card .portrait img{width:100%;height:100%;object-fit:cover;object-position:center 24%;filter:grayscale(1) contrast(1.09) brightness(.88)}
.portfolio-dark .sticky-card .portrait:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.45)),radial-gradient(circle at 82% 18%,rgba(var(--accent-rgb),.22),transparent 24%)}
.portfolio-dark .story-stack{display:grid;gap:16px}
.portfolio-dark .story-card{min-height:unset;padding:22px}
.portfolio-dark .story-card h3{margin-top:34px}
.portfolio-dark .tabs-layout{display:grid;grid-template-columns:340px 1fr;gap:16px}
.portfolio-dark .tabs-nav{display:grid;gap:10px}
.portfolio-dark .tab-btn{display:grid;grid-template-columns:32px 1fr auto;gap:12px;align-items:center;text-align:left;padding:18px 16px;background:#121214;border:1px solid var(--line-soft);border-radius:18px;color:#f2efe8;transition:transform .28s ease,border-color .28s ease}
.portfolio-dark .tab-btn span{font:700 9px var(--mono);letter-spacing:.12em;color:var(--muted-2)}
.portfolio-dark .tab-btn strong{font:700 15px var(--display);letter-spacing:-.03em}
.portfolio-dark .tab-btn i{font-style:normal;color:#fff}
.portfolio-dark .tab-btn.active,.portfolio-dark .tab-btn:hover{transform:translateX(4px);border-color:rgba(var(--accent-rgb),.45)}
.portfolio-dark .tab-panel{border:1px solid var(--line-soft);border-radius:28px;padding:28px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));min-height:620px;position:relative;overflow:hidden}
.portfolio-dark .tab-panel:before{content:"";position:absolute;width:460px;height:460px;right:-150px;top:-150px;border-radius:50%;background:rgba(var(--accent-rgb),.14);filter:blur(52px)}
.portfolio-dark .tab-panel .lead{position:relative;z-index:1}
.portfolio-dark .tab-panel .lead h3{margin:18px 0 10px;font:700 clamp(32px,4vw,64px)/.94 var(--display);letter-spacing:-.05em}
.portfolio-dark .tab-panel .lead p{margin:0;color:#b1ada5;max-width:620px;line-height:1.8}
.portfolio-dark .arch-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
.portfolio-dark .arch-card{padding:18px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.14);min-height:148px}
.portfolio-dark .arch-card strong{display:block;margin-top:26px;font:700 17px var(--display)}
.portfolio-dark .arch-card p{margin:8px 0 0;color:#99938b;font-size:12px;line-height:1.6}
.portfolio-dark .pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;position:relative;z-index:1}
.portfolio-dark .pills span{padding:9px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.10);color:#d9d4cc;font:700 8px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.portfolio-dark .terminal{border:1px solid var(--line-soft);border-radius:26px;overflow:hidden;background:#0c0c0d}
.portfolio-dark .terminal-bar{display:flex;gap:6px;padding:14px 16px;border-bottom:1px solid var(--line-soft)}
.portfolio-dark .terminal-bar i{width:8px;height:8px;border-radius:50%;background:#414141}
.portfolio-dark .terminal-bar i:first-child{background:var(--orange)}
.portfolio-dark .terminal-body{padding:20px;font:600 11px/1.9 var(--mono);color:#d2cdc5;min-height:340px}
.portfolio-dark .terminal-body .orange{color:var(--orange-3)}
.portfolio-dark .terminal-body .green{color:var(--orange)}
.portfolio-dark .stack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.portfolio-dark .stack-card{min-height:200px}
.portfolio-dark .stack-card h3{margin-top:48px;font-size:22px}
.portfolio-dark .photo-carousel{position:relative}
.portfolio-dark .carousel-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:none}
.portfolio-dark .carousel-track::-webkit-scrollbar{display:none}
.portfolio-dark .carousel-item{flex:0 0 min(76vw,620px);scroll-snap-align:start;border:1px solid var(--line-soft);border-radius:28px;overflow:hidden;background:#111}
.portfolio-dark .carousel-item .visual{height:360px;position:relative}
.portfolio-dark .carousel-item .visual img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08) brightness(.88)}
.portfolio-dark .carousel-item .visual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.44)),radial-gradient(circle at 82% 18%,rgba(var(--accent-rgb),.20),transparent 26%)}
.portfolio-dark .carousel-item .copy{padding:22px}
.portfolio-dark .carousel-item .copy h3{margin:12px 0 10px;font:700 clamp(30px,4vw,52px)/.94 var(--display);letter-spacing:-.05em}
.portfolio-dark .carousel-item .copy p{margin:0;color:#aea99f;font-size:13px;line-height:1.7}
.portfolio-dark .carousel-controls{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.portfolio-dark .circle-btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:#111;color:#fff}
.portfolio-dark .case-shell{display:grid;grid-template-columns:.78fr 1.22fr;gap:16px}
.portfolio-dark .case-summary{border:1px solid var(--line-soft);border-radius:28px;padding:22px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));position:sticky;top:96px;align-self:start}
.portfolio-dark .case-summary h3{margin:18px 0 12px;font:700 30px/1 var(--display);letter-spacing:-.04em}
.portfolio-dark .case-summary p{margin:0;color:#b1ada5;font-size:14px;line-height:1.7}
.portfolio-dark .kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}
.portfolio-dark .kpi{padding:16px;border-radius:18px;background:#0f0f10;border:1px solid rgba(255,255,255,.08)}
.portfolio-dark .kpi strong{display:block;font:700 34px/1 var(--display);letter-spacing:-.05em}
.portfolio-dark .kpi span{display:block;margin-top:8px;color:#948f87;font:700 8px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.portfolio-dark .timeline{display:grid;gap:14px}
.portfolio-dark .tline{border:1px solid var(--line-soft);border-radius:22px;padding:18px;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.015))}
.portfolio-dark .tline strong{display:block;font:700 16px var(--display)}
.portfolio-dark .tline p{margin:8px 0 0;color:#9e9992;font-size:13px;line-height:1.7}
.portfolio-dark .case-visual{border:1px solid var(--line-soft);border-radius:28px;padding:18px;background:#0d0d0f;min-height:620px;position:relative;overflow:hidden}
.portfolio-dark .case-visual .diagram{position:relative;height:100%;min-height:560px;background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);background-size:40px 40px;border-radius:18px}
.portfolio-dark .case-visual .diagram:before{content:"";position:absolute;width:440px;height:440px;right:-140px;top:-140px;background:rgba(var(--accent-rgb),.12);filter:blur(48px);border-radius:50%}
.portfolio-dark .node{position:absolute;min-width:130px;padding:12px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:#131315;box-shadow:0 20px 60px rgba(0,0,0,.32);font:700 8px var(--mono);letter-spacing:.11em;text-transform:uppercase}
.portfolio-dark .node:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--orange);margin-right:8px}
.portfolio-dark .node.n1{left:7%;top:10%}
.portfolio-dark .node.n2{right:7%;top:12%}
.portfolio-dark .node.n3{left:38%;top:38%}
.portfolio-dark .node.n4{left:7%;bottom:14%}
.portfolio-dark .node.n5{right:7%;bottom:16%}
.portfolio-dark .node.n6{left:38%;bottom:8%}
.portfolio-dark .diagram svg{position:absolute;inset:0;width:100%;height:100%}
.portfolio-dark .diagram path{stroke:#454545;stroke-dasharray:5 7;stroke-width:1.2;fill:none;animation:dash 12s linear infinite}
@keyframes dash{to{stroke-dashoffset:-160}
}
.portfolio-dark .form-shell{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.portfolio-dark .form-card{border:1px solid var(--line-soft);border-radius:28px;padding:24px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02))}
.portfolio-dark .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.portfolio-dark .field{display:grid;gap:8px}
.portfolio-dark .field label{font:700 9px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#cfc9c1}
.portfolio-dark .field input,.portfolio-dark .field textarea,.portfolio-dark .field select{border-radius:16px;border:1px solid rgba(255,255,255,.10);background:#101012;color:#f3f1ea;padding:14px 16px;outline:none}
.portfolio-dark .field input:focus,.portfolio-dark .field textarea:focus,.portfolio-dark .field select:focus{border-color:rgba(var(--accent-rgb),.55)}
.portfolio-dark .field textarea{min-height:140px;resize:vertical}
.portfolio-dark .faq{display:grid;gap:10px}
.portfolio-dark .acc{border:1px solid var(--line-soft);border-radius:18px;overflow:hidden;background:rgba(255,255,255,.02)}
.portfolio-dark .acc button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;background:none;border:0;color:#fff;text-align:left;font:700 15px var(--display)}
.portfolio-dark .acc .panel{max-height:0;overflow:hidden;transition:max-height .35s ease}
.portfolio-dark .acc .panel p{margin:0;padding:0 18px 18px;color:#aba69f;font-size:14px;line-height:1.7}
.portfolio-dark .footer{padding:18px 0;border-top:1px solid var(--line-soft);color:#857f77;font:700 8px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.portfolio-dark .footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.portfolio-dark .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease}
.portfolio-dark .reveal.in{opacity:1;transform:none}
.portfolio-dark .magnetic{transition:transform .2s ease}
@media (max-width:1100px){.portfolio-dark .nav-links,.portfolio-dark .cta-row .btn{display:none}
.portfolio-dark .menu-toggle{display:block}
.portfolio-dark .hero-grid,.portfolio-dark .section-head,.portfolio-dark .sticky-shell,.portfolio-dark .tabs-layout,.portfolio-dark .case-shell,.portfolio-dark .form-shell{grid-template-columns:1fr}
.portfolio-dark .hero-intro{grid-template-columns:1fr}
.portfolio-dark .hero-visual{min-height:auto}
.portfolio-dark .tabs-nav{grid-template-columns:repeat(2,1fr)}
.portfolio-dark .tab-btn{grid-template-columns:28px 1fr auto}
.portfolio-dark .sticky-card,.portfolio-dark .case-summary{position:relative;top:0}
.portfolio-dark .stack-grid,.portfolio-dark .grid-3,.portfolio-dark .grid-2,.portfolio-dark .arch-grid,.portfolio-dark .kpi-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){.portfolio-dark .wrap{width:min(calc(100% - 20px), var(--max))}
.portfolio-dark .hero{padding-top:92px}
.portfolio-dark .hero-title{font-size:clamp(46px,14vw,72px)}
.portfolio-dark .hero-actions{display:grid;grid-template-columns:1fr}
.portfolio-dark .hero-meta{grid-template-columns:1fr}
.portfolio-dark .photo-stack{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr auto}
.portfolio-dark .card-photo.large{grid-column:1 / -1;grid-row:auto;min-height:420px}
.portfolio-dark .card-photo.split-top,.portfolio-dark .card-photo.split-bottom{min-height:190px}
.portfolio-dark .hero-stats{grid-template-columns:repeat(2,1fr)}
.portfolio-dark .role-track span{font-size:30px;padding:14px 18px}
.portfolio-dark .section{padding:72px 0}
.portfolio-dark .kicker-row{font-size:8px;gap:10px}
.portfolio-dark .section-title{font-size:clamp(38px,12vw,56px)}
.portfolio-dark .tabs-nav,.portfolio-dark .stack-grid,.portfolio-dark .grid-3,.portfolio-dark .grid-2,.portfolio-dark .arch-grid,.portfolio-dark .kpi-grid,.portfolio-dark .form-grid{grid-template-columns:1fr}
.portfolio-dark .carousel-item{flex-basis:88vw}
.portfolio-dark .carousel-item .visual{height:280px}
.portfolio-dark .case-visual .diagram{min-height:460px}
.portfolio-dark .node{min-width:unset;padding:10px 10px}
.portfolio-dark .node.n3,.portfolio-dark .node.n6{left:26%}
.portfolio-dark .form-shell{gap:12px}
.portfolio-dark .field label{font-size:8px}
.portfolio-dark .footer .wrap{flex-direction:column}
}
@media (max-width:460px){.portfolio-dark .brand-copy span{display:none}
.portfolio-dark .hero-title{font-size:44px}
.portfolio-dark .card-photo.large{min-height:360px}
.portfolio-dark .card-photo.split-top,.portfolio-dark .card-photo.split-bottom{min-height:160px}
.portfolio-dark .photo-badge{font-size:8px;padding:8px 10px}
.portfolio-dark .stat strong{font-size:22px}
.portfolio-dark .section-title{font-size:36px}
.portfolio-dark .feature-card,.portfolio-dark .service-card,.portfolio-dark .story-card,.portfolio-dark .case-card,.portfolio-dark .stack-card,.portfolio-dark .case-summary,.portfolio-dark .case-visual,.portfolio-dark .form-card,.portfolio-dark .sticky-card,.portfolio-dark .tab-panel{border-radius:22px}
}
/* Concept 06 green/yellow atmosphere */
.portfolio-dark{--glow-lime:#d9e449;--glow-yellow:#eff06f;--glow-green:#4c922b;--glow-deep:#1f6a2e}
body.portfolio-dark{
  background:
    radial-gradient(circle at 88% 6%,rgba(var(--accent-rgb),.07),transparent 22%),
    radial-gradient(circle at 4% 45%,rgba(var(--accent2-rgb),.05),transparent 30%),
    var(--bg);
}
.portfolio-dark .bg-orb{width:520px;height:520px;right:-190px;top:-80px;background:radial-gradient(circle at 70% 25%,rgba(var(--accent3-rgb),.64),rgba(var(--accent-rgb),.25) 28%,rgba(var(--accent2-rgb),.20) 53%,transparent 72%);filter:blur(70px);opacity:.52;animation:liquidGlow 10s ease-in-out infinite alternate}
.portfolio-dark .bg-orb-2{width:460px;height:460px;left:-180px;top:50vh;background:radial-gradient(circle at 60% 45%,rgba(var(--accent2-rgb),.42),rgba(var(--accent2-rgb),.18) 47%,transparent 72%);filter:blur(82px);opacity:.46;animation:liquidGlow2 12s ease-in-out infinite alternate}
@keyframes liquidGlow{to{transform:translate(-8vw,8vh) scale(1.16) rotate(12deg);border-radius:42% 58% 38% 62%}
}
@keyframes liquidGlow2{to{transform:translate(10vw,-6vh) scale(.9) rotate(-14deg);border-radius:62% 38% 60% 40%}
}
.portfolio-dark .hero-title,.portfolio-dark .section-title,.portfolio-dark .footer-cta h2,.portfolio-dark .tab-panel .lead h3,.portfolio-dark .carousel-item .copy h3{font-family:"Space Grotesk",Inter,sans-serif}
.portfolio-dark .hero-intro p,.portfolio-dark .section-copy,.portfolio-dark .feature-card p,.portfolio-dark .story-card p,.portfolio-dark .service-card p,.portfolio-dark .footer-brand p{font-family:"Poppins",Inter,sans-serif;font-weight:300}
.portfolio-dark .eyebrow,.portfolio-dark .kicker-row,.portfolio-dark .brand-copy span,.portfolio-dark .photo-badge{font-family:"Poppins",Inter,sans-serif;font-weight:400}
.portfolio-dark .hero-title .thin{font-family:"Poppins",Inter,sans-serif;font-weight:300}
.portfolio-dark .hero-title .accent,.portfolio-dark .section-title .accent,.portfolio-dark .footer-cta h2 .accent{font-family:"Poppins",Inter,sans-serif!important;font-style:normal!important;font-weight:300!important;background:linear-gradient(100deg,var(--glow-yellow),var(--glow-lime) 45%,#7dbb2f 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.portfolio-dark .card-photo:before,.portfolio-dark .carousel-item .visual:after,.portfolio-dark .sticky-card .portrait:after{background:linear-gradient(180deg,transparent 48%,rgba(0,0,0,.48)),radial-gradient(circle at 82% 18%,rgba(var(--accent-rgb),.16),transparent 28%)}
.portfolio-dark .card-photo:hover img,.portfolio-dark .carousel-item:hover .visual img{filter:grayscale(.55) contrast(1.04) brightness(.94) sepia(.05)}
.portfolio-dark .feature-card,.portfolio-dark .service-card,.portfolio-dark .story-card,.portfolio-dark .stack-card{transition:transform .32s ease,border-color .32s ease,background .32s ease}
.portfolio-dark .feature-card:hover,.portfolio-dark .service-card:hover,.portfolio-dark .story-card:hover,.portfolio-dark .stack-card:hover{border-color:rgba(var(--accent-rgb),.28);transform:translateY(-4px)}
.portfolio-dark .sticky-card{background:radial-gradient(circle at 92% 8%,rgba(var(--accent-rgb),.08),transparent 32%),linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015))}
.portfolio-dark .photo-stack{perspective:1000px}
.portfolio-dark .card-photo{transition:transform .45s ease,border-color .35s ease}
.portfolio-dark .card-photo:hover{transform:translateY(-4px) rotateX(.8deg);border-color:rgba(var(--accent-rgb),.28)}
@media(hover:none){.portfolio-dark .card-photo:hover,.portfolio-dark .feature-card:hover,.portfolio-dark .service-card:hover,.portfolio-dark .story-card:hover,.portfolio-dark .stack-card:hover{transform:none}
}
.portfolio-dark .mega-footer{padding:0;background:#080809;border-top:1px solid var(--line-soft)}
.portfolio-dark .footer-cta{padding:78px 0;border-bottom:1px solid var(--line-soft);position:relative;overflow:hidden}
.portfolio-dark .footer-cta:after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-210px;top:-210px;background:radial-gradient(circle,rgba(var(--accent3-rgb),.36),rgba(var(--accent2-rgb),.18) 45%,transparent 72%);filter:blur(70px)}
.portfolio-dark .footer-cta-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:end;position:relative;z-index:1}
.portfolio-dark .footer-cta h2{margin:0;font:700 clamp(50px,7vw,98px)/.88 "Space Grotesk",sans-serif;letter-spacing:-.07em}
.portfolio-dark .footer-cta p{font:300 14px/1.8 "Poppins",sans-serif;color:#aba69f;margin:0 0 22px}
.portfolio-dark .footer-main{padding:44px 0 30px}
.portfolio-dark .footer-grid{display:grid;grid-template-columns:1.2fr repeat(3,.8fr);gap:28px}
.portfolio-dark .footer-brand p{max-width:340px;font:300 13px/1.75 "Poppins",sans-serif;color:#8f8982;margin-top:16px}
.portfolio-dark .footer-col h4{margin:0 0 14px;font:500 9px "Poppins",sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#d7d1c9}
.portfolio-dark .footer-col a{display:block;color:#8e8880;font:300 13px "Poppins",sans-serif;padding:5px 0;transition:.25s}
.portfolio-dark .footer-col a:hover{color:var(--orange-3);transform:translateX(4px)}
.portfolio-dark .footer-status{display:flex;align-items:center;gap:8px;margin-top:20px;width:max-content;padding:10px 12px;border:1px solid var(--line-soft);border-radius:14px;font:500 8px "Poppins",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#bdb7af}
.portfolio-dark .footer-status i{width:8px;height:8px;border-radius:50%;background:var(--glow-lime);box-shadow:0 0 14px rgba(217,228,73,.7)}
.portfolio-dark .footer-bottom{border-top:1px solid var(--line-soft);padding:18px 0}
.portfolio-dark .footer-bottom .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:#716b64;font:500 8px "Poppins",sans-serif;letter-spacing:.12em;text-transform:uppercase}
@media(max-width:1000px){.portfolio-dark .footer-cta-grid,.portfolio-dark .footer-grid{grid-template-columns:1fr}
.portfolio-dark .footer-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){.portfolio-dark .footer-grid{grid-template-columns:1fr}
.portfolio-dark .footer-cta{padding:58px 0}
.portfolio-dark .footer-cta h2{font-size:clamp(44px,13vw,70px)}
}
/* ---- Portfolio Dark: platform integration (appended after the original design) ---- */

/* Palette follows General Settings -> Color Settings (--main-color-one / -two and their rgb
   twins, which the platform defines per theme); the literals are only the design's own defaults.
   Every glow, gradient and highlight below reads these, so one setting recolours the theme. */
.portfolio-dark{
  --orange: var(--main-color-one, #d9e449);
  --orange-2: var(--main-color-two, #9cc72c);
  --orange-3: color-mix(in srgb, var(--orange) 62%, #fff);
  --accent-rgb: var(--main-color-one-rgb, 217, 228, 73);
  --accent2-rgb: var(--main-color-two-rba, 156, 199, 44);
  --accent3-rgb: var(--accent-rgb);
  --glow-lime: var(--orange);
  --glow-yellow: var(--orange-3);
  --glow-green: var(--orange-2);
  --glow-deep: var(--orange-2);
}

/* `overflow-x:hidden` on body makes it a scroll container and kills position:sticky. */
body.portfolio-dark{overflow-x:clip}

/* Orbs sit behind the page without a wrapper element. */
.portfolio-dark .bg-orb,.portfolio-dark .bg-orb-2{z-index:-1}

/* Reveal-on-scroll only hides content once the theme script is running. */
.portfolio-dark .reveal{opacity:1;transform:none}
.portfolio-dark .pdk-js .reveal{opacity:0;transform:translateY(24px)}
.portfolio-dark .pdk-js .reveal.in{opacity:1;transform:none}

.portfolio-dark .btn{isolation:isolate}
.portfolio-dark .btn:focus-visible,.portfolio-dark .nav-links a:focus-visible,.portfolio-dark .menu-toggle:focus-visible,.portfolio-dark .tab-btn:focus-visible,.portfolio-dark .acc button:focus-visible,.portfolio-dark .circle-btn:focus-visible,.portfolio-dark .brand:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* Menus come from the CMS as <ul><li><a>; lay them out like the original link rows. */
.portfolio-dark .nav-links ul{display:flex;align-items:center;gap:24px;list-style:none;margin:0;padding:0}
.portfolio-dark .nav-links li{position:relative;margin:0;padding:0}
.portfolio-dark .nav-links li ul{display:none;position:absolute;top:100%;left:-14px;flex-direction:column;align-items:stretch;gap:0;min-width:220px;padding:10px;background:rgba(13,13,15,.96);border:1px solid var(--line);border-radius:16px;backdrop-filter:blur(18px)}
.portfolio-dark .nav-links li:hover>ul,.portfolio-dark .nav-links li:focus-within>ul{display:flex}
.portfolio-dark .nav-links li ul a{display:block;padding:10px 12px;white-space:nowrap}
.portfolio-dark .nav-links li ul a:after{display:none}
.portfolio-dark .mobile-menu nav ul{list-style:none;margin:0;padding:0}
.portfolio-dark .mobile-menu li ul{list-style:none;margin:0;padding:0 0 0 18px}
.portfolio-dark .mobile-menu a{display:block}
.portfolio-dark .brand-logo,.portfolio-dark .brand img{max-height:42px;width:auto}

/* Inner-page spacing under the fixed header */
.portfolio-dark .pdk-crumb{padding-top:112px}
.portfolio-dark .pdk-crumb a:hover{color:var(--orange)}

/* Page header (kicker + the page's own h1) for pages that do not bring a header of their own */
/* Banner height is a Theme Options setting (Page header -> Banner height). The base is the compact size. */
.portfolio-dark .pdk-pagehead{padding-top:112px;padding-bottom:6px}
.portfolio-dark .pdk-pagehead--standard{padding-top:clamp(124px,12vw,152px);padding-bottom:clamp(22px,3vw,44px)}
.portfolio-dark .pdk-pagehead--tall{padding-top:clamp(136px,15vw,188px);padding-bottom:clamp(40px,5.5vw,80px)}
.portfolio-dark .pdk-pagehead .kicker-row{margin-bottom:20px;align-items:center}
.portfolio-dark .pdk-pagehead .kicker-row a{color:inherit}
.portfolio-dark .pdk-pagehead .kicker-row a:hover{color:var(--orange)}
/* A label that is the section's heading is an <h2> (pdk/partials/kicker): same look as the <div> version.
   The ": " between its two parts is for screen readers and search engines only. */
.portfolio-dark h2.kicker-row{margin-top:0;word-spacing:normal}
.portfolio-dark .kicker-row .pdk-sr-sep{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.portfolio-dark .pdk-pagehead-title{margin:0;font:700 clamp(40px,6vw,76px)/.95 var(--display);letter-spacing:-.055em;color:var(--text)}
.portfolio-dark .pdk-pagehead-title.is-long{font-size:clamp(26px,3.8vw,48px);line-height:1.06;letter-spacing:-.04em;max-width:28ch}
/* the band already clears the fixed header, so the content under it does not need the full clearance */
.portfolio-dark .pdk-pagehead ~ .pb-section:first-of-type .xgp-widget>[class*="section-padding"]{padding-top:36px}
.portfolio-dark .pdk-pagehead ~ .section-padding{padding-top:36px}
.portfolio-dark .pdk-pagehead .rss-subscribe--inline{margin:0;padding:6px 12px;font:700 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-color:var(--line);opacity:1}
.portfolio-dark .pdk-pagehead .rss-subscribe--inline:hover{color:var(--text);border-color:var(--orange)}
/* Post share row: the RSS pill reads as a sibling of the round share icons */
.portfolio-dark .footer-social .rss-subscribe--inline{color:var(--muted);border-color:var(--line);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.portfolio-dark .footer-social .rss-subscribe--inline:hover{color:var(--text);border-color:var(--orange)}
.portfolio-dark .section.pdk-first{padding-top:136px}

@media (prefers-reduced-motion:reduce){
  .portfolio-dark *,.portfolio-dark *:before,.portfolio-dark *:after{animation:none!important;transition:none!important}
  .portfolio-dark .role-track{animation:none}
}

/* Portrait photos fill their card instead of sizing it, so the hero keeps a calm, natural
   proportion: a tall portrait on the left, two stacked 3:4 shots on the right. */
.portfolio-dark .card-photo img{position:absolute;inset:0}
.portfolio-dark .hero-visual{min-height:0}
.portfolio-dark .photo-stack{height:auto;min-height:0;aspect-ratio:1 / 1.12;grid-template-rows:1.2fr .8fr}
.portfolio-dark .card-photo.large img{object-position:center 22%}
@media (max-width:1100px){.portfolio-dark .photo-stack{aspect-ratio:1 / 1.05;max-width:680px;margin-inline:auto}}
@media (max-width:760px){.portfolio-dark .photo-stack{aspect-ratio:auto;max-width:none}}

.portfolio-dark .hero-grid{align-items:center}

/* the stats strip sits on the bottom edge, so the badge goes on top */
.portfolio-dark .photo-badge{bottom:auto;top:14px}

/* Only the header is sticky. The glow orbs scroll away with the page, and the portrait and
   case-summary cards sit in the normal flow instead of following the reader down the page. */
.portfolio-dark .bg-orb,.portfolio-dark .bg-orb-2{position:absolute}
.portfolio-dark .sticky-card,.portfolio-dark .case-summary{position:static;top:auto}

/* Hero banner proportions: a calmer headline so the banner fits the first screen. */
.portfolio-dark .hero{padding-top:124px}
.portfolio-dark .hero-title{font-size:clamp(42px,5.8vw,86px);line-height:.94;margin:18px 0 18px}
.portfolio-dark .hero-meta{margin-top:30px}
@media (max-width:1100px){.portfolio-dark .hero-title{font-size:clamp(42px,9vw,72px)}}
@media (max-width:760px){.portfolio-dark .hero{padding-top:92px}.portfolio-dark .hero-title{font-size:clamp(40px,12vw,60px)}}

/* A builder page that opens with a platform section (blog list, FAQ, testimonials…) needs clearance under the fixed header. */
.portfolio-dark .pb-section:first-of-type .xgp-widget>[class*="section-padding"]{padding-top:128px}

/* The off-canvas menu must be fully hidden when closed (its links overflowed the panel on short screens), and is mobile-only. */
.portfolio-dark .mobile-menu{overflow-y:auto;visibility:hidden;transition:transform .45s ease,visibility 0s linear .45s}
.portfolio-dark .mobile-menu.open{visibility:visible;transition:transform .45s ease,visibility 0s}
.portfolio-dark .mobile-menu a{font-size:clamp(28px,7vw,48px)}
@media (min-width:1101px){.portfolio-dark .mobile-menu{display:none}}

/* Mobile menu: it is parked above the viewport with a transform, but its content is taller than
   the panel on short windows and spilled out of the bottom edge ("Contact" peeking in at the top
   of the page). Clip it to its own box, let it scroll when open, and keep it out of the
   accessibility tree and tab order while closed. */
.portfolio-dark .mobile-menu{overflow-y:auto;overscroll-behavior:contain;visibility:hidden;justify-content:flex-start;transition:transform .45s ease,visibility 0s linear .45s}
.portfolio-dark .mobile-menu.open{visibility:visible;transition:transform .45s ease,visibility 0s}
.portfolio-dark .mobile-menu nav{margin:auto 0}
.portfolio-dark .mobile-menu a{font-size:clamp(30px,8vw,52px);padding:8px 0}

/* Footer call-to-action: a headline that fits its column, with the copy and button
   vertically centred beside it. */
.portfolio-dark .footer-cta{padding:72px 0}
.portfolio-dark .footer-cta-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr);gap:40px 64px;align-items:center}
.portfolio-dark .footer-cta h2{font-size:clamp(32px,4.2vw,62px);line-height:1;letter-spacing:-.05em;margin:18px 0 0;text-wrap:balance}
.portfolio-dark .footer-cta p{max-width:46ch}
@media (max-width:1000px){.portfolio-dark .footer-cta-grid{grid-template-columns:1fr}.portfolio-dark .footer-cta h2{font-size:clamp(32px,8vw,52px)}}
@media (max-width:600px){.portfolio-dark .footer-cta{padding:52px 0}.portfolio-dark .footer-cta h2{font-size:clamp(30px,9.5vw,44px)}}

/* Footer brand column: name and blurb read as one block, pill sits close beneath the columns. */
/* the platform .mb-40 utility is !important */
.portfolio-dark .mega-footer .footer-logo.mb-40{margin-bottom:14px!important}
.portfolio-dark .mega-footer .footer-logo .site-brand-text{font-family:var(--display);letter-spacing:-.03em;color:var(--text)}
.portfolio-dark .mega-footer .footer-pera .pera{max-width:36ch;margin:0;font-size:14px;line-height:1.75;color:var(--muted)}
.portfolio-dark .mega-footer .footer-widget.mb-24{margin-bottom:0}
.portfolio-dark .mega-footer .footer-main{padding:52px 0 36px}
.portfolio-dark .mega-footer .footer-status{margin-top:40px}

/* Page background behind and beyond the content (overscroll, short pages, preview shells) */
html:has(body.portfolio-dark){background:#070707;scroll-behavior:smooth}

/* Soft moss palette: the design's lighter accent and the glows follow the CMS accent colour. */
.portfolio-dark{--orange-3:color-mix(in srgb,var(--orange) 72%,#fff);--glow-yellow:var(--orange-3)}
.portfolio-dark .bg-orb{background:radial-gradient(circle at 70% 25%,color-mix(in srgb,var(--orange) 55%,transparent),color-mix(in srgb,var(--orange-2) 22%,transparent) 45%,transparent 72%)}
.portfolio-dark .bg-orb-2{background:radial-gradient(circle at 60% 45%,color-mix(in srgb,var(--orange-2) 40%,transparent),transparent 72%)}

/* The glow orbs are absolutely positioned and bleed past the right edge. Anchoring them to the body (which clips
   overflow-x) stops the page from being scrollable sideways, which shifted the whole layout left. */
body.portfolio-dark{position:relative}

/* Themed 404 page */
.portfolio-dark .pdk-404{min-height:100vh;display:flex;align-items:center;padding:120px 0 80px}
.portfolio-dark .pdk-404 .section-title{margin:18px 0 14px}
.portfolio-dark .pdk-404 .section-copy{max-width:52ch;margin-bottom:28px}

/* Author initials are drawn with an inline purple by render_blog_author_avatar_markup(), which no
   stylesheet can beat without !important. Keep them on the theme accent instead. */
.portfolio-dark .blog-author-avatar{background:linear-gradient(135deg,var(--orange),var(--orange-2))!important;color:#120b07!important}

/* Footer bottom bar: the platform copyright line (name, year, "Made with ♥ by Sitelyx") */
.portfolio-dark .footer-bottom .pdk-copyright p{margin:0;font:400 12px/1.6 var(--sans);letter-spacing:0;text-transform:none;color:#8e8880}
.portfolio-dark .footer-bottom .pdk-copyright a{color:#c4bfb7;transition:color .2s}
.portfolio-dark .footer-bottom .pdk-copyright a:hover{color:var(--orange)}
.portfolio-dark .footer-bottom .pdk-tagline{align-self:center}
.portfolio-dark .footer-bottom .wrap{align-items:center}

/* The photo carousel's slides are called .carousel-item, the same class Bootstrap's carousel hides
   (`.carousel-item{display:none;float:left;margin-right:-100%}` unless .active). Every slide on /work and the
   homepage disappeared once bootstrap.css loaded on these pages. Undo that inside this theme's track only. */
.portfolio-dark .carousel-track > .carousel-item { display: block; float: none; width: auto; margin-right: 0; position: relative; transition: none; backface-visibility: visible; }
/* case study heading may be an h1/h2 (heading_level) - style it like the original h3 */
.portfolio-dark .case-summary h1,.portfolio-dark .case-summary h2{margin:18px 0 12px;font:700 30px/1 var(--display);letter-spacing:-.04em}
/* Contact + FAQ section: the Form Builder markup laid out as the design's two-column field grid */
.portfolio-dark .form-card small{display:block;color:var(--muted-2);font:700 9px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.portfolio-dark .form-card .card-title{margin:16px 0 18px;font:700 clamp(26px,3vw,34px)/1 var(--display);letter-spacing:-.05em}
.portfolio-dark .form-alt{margin:16px 0 0}
.portfolio-dark .pdk-form form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.portfolio-dark .pdk-form form>.error-message,.portfolio-dark .pdk-form form>.textarea,.portfolio-dark .pdk-form form>.btn-wrapper,.portfolio-dark .pdk-form form>.checkbox,.portfolio-dark .pdk-form form>.file{grid-column:1 / -1}
.portfolio-dark .pdk-form .form-group{display:grid;gap:8px;margin:0}
.portfolio-dark .pdk-form .form-group label{font:700 9px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#cfc9c1;margin:0}
.portfolio-dark .pdk-form .form-control{width:100%;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:#101012;color:#f3f1ea;padding:14px 16px;outline:none;box-shadow:none;font:inherit}
.portfolio-dark .pdk-form .form-control::placeholder{color:#7c7770}
.portfolio-dark .pdk-form .form-control:focus{border-color:rgba(var(--accent-rgb),.55)}
.portfolio-dark .pdk-form textarea.form-control{min-height:140px;resize:vertical}
.portfolio-dark .pdk-form select.form-control{appearance:none}
.portfolio-dark .pdk-form .btn-wrapper{display:flex;align-items:center;gap:12px}
.portfolio-dark .pdk-form .btn-wrapper button{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border:0;border-radius:999px;background:linear-gradient(135deg,var(--orange),var(--orange-2));color:#120b07;font:700 10px var(--mono);letter-spacing:.11em;text-transform:uppercase;cursor:pointer}
.portfolio-dark .pdk-form .btn-wrapper button:hover{filter:brightness(1.08)}
.portfolio-dark .pdk-form .btn-wrapper button:disabled{opacity:.6;cursor:progress}
.portfolio-dark .pdk-form .alert{margin:0 0 4px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);font-size:13px;list-style:none}
.portfolio-dark .pdk-form .alert-success{background:rgba(var(--accent2-rgb),.12);border-color:rgba(var(--accent-rgb),.4);color:var(--orange-3)}
.portfolio-dark .pdk-form .alert-danger{background:rgba(220,70,60,.12);border-color:rgba(220,70,60,.4);color:#f4b4ad}
@media (max-width:760px){.portfolio-dark .pdk-form form{grid-template-columns:1fr}}
/* Footer columns are CMS widgets (Appearance -> Widgets); style the markup they emit like the design's .footer-col / .footer-brand */
.portfolio-dark .footer-grid>.widget{min-width:0}
.portfolio-dark .footer-widget{margin:0}
.portfolio-dark .footer-widget .footer-tittle h4.footerTittle{margin:0 0 14px;font:500 9px "Poppins",sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#d7d1c9}
.portfolio-dark .footer-widget ul.listing{list-style:none;margin:0;padding:0}
.portfolio-dark .footer-widget ul.listing li{margin:0;padding:0}
.portfolio-dark .footer-widget a.singleLinks{display:block;color:#8e8880;font:300 13px "Poppins",sans-serif;padding:5px 0;transition:color .25s,transform .25s}
.portfolio-dark .footer-widget a.singleLinks:hover{color:#e9ec9a;transform:translateX(4px)}
.portfolio-dark .footer-logo{margin:0 0 16px}
.portfolio-dark .footer-logo a{display:inline-block;color:var(--text);font:700 22px var(--display);letter-spacing:-.03em}
.portfolio-dark .footer-logo img{max-height:40px;width:auto}
.portfolio-dark .footer-pera p{max-width:340px;margin:0;font:300 13px/1.75 "Poppins",sans-serif;color:#8f8982}
.portfolio-dark .footer-social{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.portfolio-dark .footer-social a.social{display:inline-grid;place-items:center;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;color:#cfc9c1;transition:border-color .25s,color .25s}
.portfolio-dark .footer-social a.social:hover{border-color:var(--orange);background:var(--orange);color:#120b07} /* filled, as the common skin; an accent icon on the accent fill was invisible */
.portfolio-dark .footer-main .footer-status{margin-top:30px}
.portfolio-dark .mega-footer{position:relative;z-index:1}

/* Footer widgets ship the platform's `wow fadeInUp` classes, which start invisible until a script runs.
   This theme has its own reveal, so they stay visible. */
.portfolio-dark .mega-footer .wow{visibility:visible!important;opacity:1!important;animation:none!important;transform:none!important}

/* Status pill + social profile icons share one row under the columns (theme-drawn, Theme Options -> Footer) */
.portfolio-dark .pdk-footer-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;margin-top:30px}
.portfolio-dark .pdk-footer-meta .footer-status{margin-top:0}
.portfolio-dark .footer-social.pdk-footer-social{list-style:none;margin:0;padding:0;gap:10px}
.portfolio-dark .footer-social.pdk-footer-social li{margin:0;padding:0}
.portfolio-dark .footer-social.pdk-footer-social a.social{width:40px;height:40px;font-size:15px}
.portfolio-dark .footer-social.pdk-footer-social a.social:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
@media(max-width:600px){.portfolio-dark .pdk-footer-meta{flex-direction:column;align-items:flex-start}}
.portfolio-dark .footer-social.pdk-social-about{margin-top:20px}
.portfolio-dark .faq-sticky-anchor{display:none}
@media (min-width:992px){.portfolio-dark .faqArea-global .collapse-wrapper .row>.col-xl-4{position:sticky;top:112px;align-self:flex-start}}
/* FAQ page: the category tabs and the ask-a-question form stay in view while the answers scroll. Needs align-self flex-start (flex row) and no overflow on ancestors. */
/* GENERATED twin rules: card titles render as <h2> when their section title is the page <h1>
   (pdk card-grid / story / terminal / carousel). Same look as the <h3> rules they copy. Regenerate if those change. */
.portfolio-dark .feature-card h2,.portfolio-dark .service-card h2,.portfolio-dark .story-card h2,.portfolio-dark .case-card h2,.portfolio-dark .stack-card h2{margin:62px 0 12px;font:700 28px/1 var(--display);letter-spacing:-.04em}
.portfolio-dark .story-card h2{margin-top:34px}
.portfolio-dark .stack-card h2{margin-top:48px;font-size:22px}
.portfolio-dark .carousel-item .copy h2{margin:12px 0 10px;font:700 clamp(30px,4vw,52px)/.94 var(--display);letter-spacing:-.05em}
.portfolio-dark .carousel-item .copy h2{font-family:"Space Grotesk",Inter,sans-serif}
/* Photo carousel section with Display = "Masonry grid": the same cards in columns, each photo at its own shape.
   The theme JS packs them (grid rows of 2px, a card spans its height + the 14px gap); without JS they sit in rows. */
.portfolio-dark .photo-masonry .carousel-track{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:14px;overflow:visible;scroll-snap-type:none;padding-bottom:0;align-items:start}
.portfolio-dark .photo-masonry.is-packed .carousel-track{grid-auto-rows:2px;row-gap:0}
.portfolio-dark .photo-masonry .carousel-track > .carousel-item{flex:none;scroll-snap-align:none}
.portfolio-dark .photo-masonry .carousel-item .visual{height:auto}
.portfolio-dark .photo-masonry .carousel-item .visual img{display:block;height:auto}
.portfolio-dark .photo-masonry .carousel-item .copy h3,.portfolio-dark .photo-masonry .carousel-item .copy h2{font-size:clamp(26px,2.6vw,38px)}
/* Whole card is the link (carousel and masonry): the title's link stretches over the card; the button stays on top */
.portfolio-dark .carousel-item .copy .card-link{color:inherit;text-decoration:none}
.portfolio-dark .carousel-item .copy .card-link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.portfolio-dark .carousel-item .copy .btn{position:relative;z-index:2}
.portfolio-dark .carousel-item:has(.card-link){cursor:pointer}
.portfolio-dark .carousel-item:has(.card-link:hover) .copy .card-link,.portfolio-dark .carousel-item .copy .card-link:focus-visible{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.portfolio-dark .carousel-item .copy .card-link:focus-visible{outline:none}
.portfolio-dark .carousel-item:has(.card-link:focus-visible){outline:2px solid var(--orange);outline-offset:3px}
/* Portfolio item page, "More projects" cards (shared markup, theme look): same card language as the /work grid */
.portfolio-dark .portfolioSlider .pf-more-media{border:1px solid var(--line-soft);border-radius:22px;background:#111}
.portfolio-dark .portfolioSlider .pf-more-cat{font:600 10px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);opacity:1}
.portfolio-dark .portfolioSlider .pf-more-title{font:700 clamp(20px,1.8vw,26px)/1.05 "Space Grotesk",Inter,sans-serif;letter-spacing:-.03em;color:var(--text)}
.portfolio-dark .portfolioSlider .pf-more-card:hover .pf-more-title{color:var(--orange);text-decoration:none}
/* Timeline, horizontal loop variant (widget option "Horizontal loop"). It scrolls by itself and never
   pauses on hover. No JS or reduced motion: a plain row you can swipe or scroll. */
.portfolio-dark .timeline-loop{overflow-x:auto;padding:6px 0 12px;scrollbar-width:thin;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.portfolio-dark .timeline-loop.is-looping{overflow:hidden}
.portfolio-dark .timeline-track{display:flex;flex-wrap:nowrap}
.portfolio-dark .timeline-loop .tline{position:relative;flex:0 0 clamp(270px,26vw,380px);margin-right:14px;padding:40px 22px 24px;min-height:200px}
.portfolio-dark .timeline-loop .tline:before{content:"";position:absolute;top:17px;left:22px;width:10px;height:10px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 5px rgba(255,255,255,.07)}
.portfolio-dark .timeline-loop .tline:after{content:"";position:absolute;top:21px;left:44px;right:-36px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.22),rgba(255,255,255,.06))}
.portfolio-dark .timeline-loop .tline strong{font-size:18px}
.portfolio-dark .timeline-loop .tline p{font-size:14px}
.portfolio-dark .timeline-loop.is-looping .timeline-track{animation:tlLoop var(--tl-seconds,40s) linear infinite;will-change:transform}
.portfolio-dark .timeline-loop:hover .timeline-track,.portfolio-dark .timeline-loop .tline:hover{animation-play-state:running}
@keyframes tlLoop{to{transform:translateX(calc(var(--tl-shift,0px) * -1))}}
@media (prefers-reduced-motion:reduce){
  .portfolio-dark .timeline-loop.is-looping .timeline-track{animation:none}
}
/* ---- Portfolio Dark: dark common skin ----
   Restyles the platform's shared markup (Bootstrap grid + platform class names) so system pages
   (blog, FAQ, contact, about, team, gallery, 404 ...) match the theme without any markup change.
   Authored unscoped; build.sh prefixes every selector with `.portfolio-dark`. */

/* Local aliases built on the design variables */
.portfolio-dark{
  --sk-card:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.02));
  --sk-body:#c4bfb7;            /* body copy on #070707 = 10.9:1 */
  --sk-head:#f5f2ea;            /* headings = 17.7:1 */
  --sk-field:#0d0d0f;
}

/* Platform design tokens: every shared widget stylesheet reads these (set on :root with light-page values),
   so re-pointing them on body recolours the whole family at once. */
body.portfolio-dark{
  --heading-color:#f5f2ea;--heading-color-tow:#f5f2ea;--body-color:#b1ada5;--paragraph-color:#c4bfb7;--peragraph-color:#c4bfb7;--paragraph-color-two:#c4bfb7;
  --light-color:#b1ada5;--extra-light-color:#b1ada5;--border-color:rgba(255,255,255,.10);--border-color-two:rgba(255,255,255,.06);
  --heading-font:var(--display);--body-font:var(--sans);--portfolio-section-bg:#0d0d0f;--portfolio-section-bg-2:#121214;--portfolio-section-bg-3:#17171a;
}

/* ---------- Page width and section rhythm ---------- */
.portfolio-dark .container{max-width:var(--max);padding-left:14px;padding-right:14px}
.portfolio-dark .section-padding{padding-top:72px;padding-bottom:72px}
.portfolio-dark .section-padding2{padding-top:64px;padding-bottom:64px}
.portfolio-dark .padding-top-70{padding-top:70px}
.portfolio-dark .padding-bottom-70{padding-bottom:70px}
.portfolio-dark .pb-section{background:transparent;position:relative}
.portfolio-dark .pb-section-container-gR1CmeFLS5Tr{background:transparent}
.portfolio-dark .section-inner,.portfolio-dark .xgp_row,.portfolio-dark .xgp_column{background:transparent}
.portfolio-dark .sectionBg1-global,.portfolio-dark .bg-light,.portfolio-dark .bg-white{background:transparent}
.portfolio-dark .mb-10{margin-bottom:10px}.portfolio-dark .mb-20{margin-bottom:20px}.portfolio-dark .mb-24{margin-bottom:24px}
.portfolio-dark .mb-30{margin-bottom:30px}.portfolio-dark .mb-40{margin-bottom:40px}.portfolio-dark .mb-50{margin-bottom:50px}
.portfolio-dark .mt-20{margin-top:20px}.portfolio-dark .mt-40{margin-top:40px}.portfolio-dark .mt-50{margin-top:50px}
@media (max-width:760px){
  .portfolio-dark .section-padding{padding-top:48px;padding-bottom:48px}
  .portfolio-dark .section-padding2{padding-top:44px;padding-bottom:44px}
  .portfolio-dark .section-padding[data-padding-top],.portfolio-dark .contactArea.section-padding{padding-top:48px!important;padding-bottom:48px!important} /* widget inline padding is 110px: too tall on phones */
}

/* ---------- Typography inside content ---------- */
.portfolio-dark .section-tittle h2,.portfolio-dark .section-tittle .tittle,.portfolio-dark .section-tittle h3{margin:0;font:700 clamp(34px,4.6vw,64px)/.98 var(--display);letter-spacing:-.055em;color:var(--sk-head)}
.portfolio-dark .section-tittle .color,.portfolio-dark .section-tittle .tittle .color{background:linear-gradient(90deg,var(--orange),var(--orange-3));-webkit-background-clip:text;background-clip:text;color:transparent}
.portfolio-dark .section-tittle p{margin:16px 0 0;color:var(--muted);font-size:15px;line-height:1.8}
.portfolio-dark .section-tittle.text-center p{margin-left:auto;margin-right:auto;max-width:620px}
.portfolio-dark .small-tittle h3,.portfolio-dark .small-tittle .tittle,.portfolio-dark .small-tittle h4{font:700 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.portfolio-dark .pera,.portfolio-dark .testiPera,.portfolio-dark .footer-pera p,.portfolio-dark .dynamic-page-content-area p{color:var(--sk-body);font-size:15px;line-height:1.8}
.portfolio-dark .dynamic-page-content-area,.portfolio-dark .dynamic-page-content-wrap{color:var(--sk-body)}
.portfolio-dark .dynamic-page-content-area h1,.portfolio-dark .dynamic-page-content-area h2,.portfolio-dark .dynamic-page-content-area h3,.portfolio-dark .dynamic-page-content-area h4,.portfolio-dark .dynamic-page-content-area h5,.portfolio-dark .dynamic-page-content-area h6{font-family:var(--display);color:var(--sk-head);letter-spacing:-.04em;line-height:1.15;margin:1.6em 0 .55em}
.portfolio-dark .dynamic-page-content-area h1{font-size:clamp(34px,4vw,52px)}
.portfolio-dark .dynamic-page-content-area h2{font-size:clamp(26px,3vw,38px)}
.portfolio-dark .dynamic-page-content-area h3{font-size:24px}
.portfolio-dark .dynamic-page-content-area ul,.portfolio-dark .dynamic-page-content-area ol{padding-left:1.5em;margin:0 0 1.1em}
.portfolio-dark .dynamic-page-content-area ul{list-style:disc outside}
.portfolio-dark .dynamic-page-content-area ol{list-style:decimal outside}
.portfolio-dark .dynamic-page-content-area li{margin-bottom:.4em;color:var(--sk-body)}
.portfolio-dark .dynamic-page-content-area li::marker{color:var(--orange)}
.portfolio-dark .dynamic-page-content-area a,.portfolio-dark .blog-rich-content a{color:var(--orange);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.portfolio-dark .dynamic-page-content-area a:hover,.portfolio-dark .blog-rich-content a:hover{color:var(--orange-3);opacity:1}
.portfolio-dark .dynamic-page-content-area strong,.portfolio-dark .blog-rich-content strong{color:var(--sk-head)}
.portfolio-dark .dynamic-page-content-area hr,.portfolio-dark .blog-rich-content hr{border:0;border-top:1px solid var(--line);opacity:1;margin:2em 0}

/* Titles/links used all over the platform widgets */
.portfolio-dark .tittle,.portfolio-dark .title{font-family:var(--display);letter-spacing:-.035em;color:var(--sk-head)}
.portfolio-dark a.tittle:hover,.portfolio-dark .tittle a:hover,.portfolio-dark a.itemsTittle:hover{color:var(--orange)}

/* ---------- Buttons ---------- */
.portfolio-dark .cmn-btn1,.portfolio-dark .cmn-btn2,.portfolio-dark .cmn-btn3,.portfolio-dark .cmn-btn-outline1,.portfolio-dark .cmn-btn-outline2,.portfolio-dark .cmn-btn-outline3,.portfolio-dark .btn-default,.portfolio-dark .btn_bg_1,.portfolio-dark .portfolio_cmn_btn,.portfolio-dark .hero-btn a,.portfolio-dark button.cmn-btn1,.portfolio-dark a.cmn-btn1{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border-radius:999px;border:1px solid transparent;
  background:linear-gradient(135deg,var(--orange),var(--orange-2));color:#120b07;
  font:700 10px/1.2 var(--mono);letter-spacing:.11em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:transform .28s ease,border-color .28s ease,background .28s ease,color .28s ease;box-shadow:none}
.portfolio-dark .cmn-btn1:hover,.portfolio-dark .cmn-btn2:hover,.portfolio-dark .cmn-btn3:hover,.portfolio-dark .btn-default:hover,.portfolio-dark .btn_bg_1:hover,.portfolio-dark .portfolio_cmn_btn:hover{transform:translateY(-2px);background:linear-gradient(135deg,var(--orange-3),var(--orange));color:#120b07;border-color:transparent}
.portfolio-dark .cmn-btn-outline1,.portfolio-dark .cmn-btn-outline2,.portfolio-dark .cmn-btn-outline3{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.18);color:var(--sk-head)}
.portfolio-dark .cmn-btn-outline1:hover,.portfolio-dark .cmn-btn-outline2:hover,.portfolio-dark .cmn-btn-outline3:hover{background:var(--orange);border-color:var(--orange);color:#120b07;transform:translateY(-2px)}
.portfolio-dark .cmn-btn1:focus-visible,.portfolio-dark .cmn-btn-outline3:focus-visible,.portfolio-dark .btn-default:focus-visible,.portfolio-dark .page-link:focus-visible,.portfolio-dark .form-control:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.portfolio-dark .btn-wrapper{display:flex;flex-wrap:wrap;gap:10px}
.portfolio-dark .btn-wrapper.justify-content-center{justify-content:center}
.portfolio-dark .btn-wrapper .cmn-btn1,.portfolio-dark .btn-wrapper .cmn-btn-outline3,.portfolio-dark .btn-wrapper button{width:auto}
.portfolio-dark .btn-wrapper .w-100,.portfolio-dark .cmn-btn1.w-100{width:100%}

/* ---------- Forms ---------- */
.portfolio-dark .form-group{margin-bottom:16px}
.portfolio-dark label,.portfolio-dark .form-group label,.portfolio-dark .input-form label{display:block;margin-bottom:8px;font:700 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.portfolio-dark .form-control,.portfolio-dark .input-form input,.portfolio-dark .input-form textarea,.portfolio-dark .input-form select,.portfolio-dark .input-form2 input,.portfolio-dark .input-form2 textarea,.portfolio-dark .input-form2 select,
.portfolio-dark input[type=text],.portfolio-dark input[type=email],.portfolio-dark input[type=password],.portfolio-dark input[type=tel],.portfolio-dark input[type=number],.portfolio-dark input[type=url],.portfolio-dark input[type=search],.portfolio-dark input[type=date],.portfolio-dark textarea,.portfolio-dark select,.portfolio-dark .keyup-input{
  width:100%;display:block;padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:var(--sk-field);color:var(--text);
  font:400 14px/1.5 var(--sans);box-shadow:none;outline:0;transition:border-color .25s ease,background .25s ease,box-shadow .25s ease}
.portfolio-dark textarea,.portfolio-dark .input-form textarea,.portfolio-dark .input-form2 textarea{min-height:150px;resize:vertical}
.portfolio-dark select,.portfolio-dark .form-select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23b1ada5' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.portfolio-dark .form-control:focus,.portfolio-dark .input-form input:focus,.portfolio-dark .input-form textarea:focus,.portfolio-dark .input-form2 input:focus,.portfolio-dark .input-form2 textarea:focus,.portfolio-dark input:focus,.portfolio-dark textarea:focus,.portfolio-dark select:focus{
  border-color:rgba(var(--accent-rgb),.6);background:#101012;color:var(--text);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12);outline:0}
.portfolio-dark ::placeholder{color:#8f8a82;opacity:1}
.portfolio-dark input[type=file]{padding:10px;color:var(--muted)}
.portfolio-dark input[type=file]::file-selector-button{margin-right:12px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.04);color:var(--text);font:700 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.portfolio-dark input:-webkit-autofill{-webkit-text-fill-color:var(--text);box-shadow:0 0 0 1000px var(--sk-field) inset;caret-color:var(--text)}
.portfolio-dark .input-form{position:relative;margin-bottom:16px}
.portfolio-dark .input-form .icon{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.portfolio-dark .input-form .icon:hover{color:var(--orange)}
.portfolio-dark .input-form .keyup-input{padding-right:52px}
/* search box (other themes style it with 3-4 class chains) */
.portfolio-dark .searchBox-wrapper .search-box .input-form input,.portfolio-dark .searchBox-wrapper.searchBox-wrapper-sidebar .search-box .input-form input,.portfolio-dark .search-box .input-form input{height:52px;padding:9px 60px 9px 20px;border-radius:999px;border:1px solid var(--line);background:var(--sk-field);color:var(--text)}
.portfolio-dark .searchBox-wrapper .search-box .input-form input:focus,.portfolio-dark .search-box .input-form input:focus{border-color:rgba(var(--accent-rgb),.6);background:#101012}
.portfolio-dark .search-box .input-form .icon,.portfolio-dark .search-box .input-form button,.portfolio-dark .searchBox-wrapper .search-box .input-form .icon{position:absolute;right:6px;top:6px;width:40px;height:40px;border:0;border-radius:50%;background:linear-gradient(135deg,var(--orange),var(--orange-2));color:#120b07;display:grid;place-items:center;padding:0;transform:none}
.portfolio-dark .search-box .input-form button:hover,.portfolio-dark .search-box .input-form .icon:hover{background:var(--orange-3);color:#120b07}
.portfolio-dark .search-box .input-form button i{color:inherit}
.portfolio-dark .error-message,.portfolio-dark .error-wrap{color:#ff8f8f}
.portfolio-dark .text-danger{color:#ff8f8f!important} /* bootstrap utility uses !important */
.portfolio-dark .text-success{color:var(--orange)!important}
.portfolio-dark .custom-control,.portfolio-dark .checkWrap{position:relative;display:flex;align-items:center;gap:10px;color:var(--sk-body);font-size:14px;cursor:pointer;margin:0 0 10px}
.portfolio-dark .checkWrap{font:500 14px var(--sans);letter-spacing:0;text-transform:none;color:var(--sk-body);padding-left:32px}
.portfolio-dark .checkWrap input{position:absolute;opacity:0;width:0;height:0}
.portfolio-dark .checkWrap .checkmark{position:absolute;left:0;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:6px;border:1px solid var(--line);background:var(--sk-field)}
.portfolio-dark .checkWrap input:checked~.checkmark{background:var(--orange);border-color:var(--orange)}
.portfolio-dark .checkWrap:hover .checkmark{border-color:rgba(var(--accent-rgb),.6)}
.portfolio-dark .custom-control-label,.portfolio-dark .int{color:var(--sk-body);font:400 14px var(--sans);letter-spacing:0;text-transform:none;margin:0}
.portfolio-dark .custom-control-input{accent-color:var(--orange)}
.portfolio-dark a.int:hover{color:var(--orange)}
.portfolio-dark input[type=checkbox],.portfolio-dark input[type=radio]{accent-color:var(--orange);width:auto;display:inline-block}

/* ---------- Glass cards (shared by blog sidebar, forms, contact, login) ---------- */
.portfolio-dark .simplePresentCart,.portfolio-dark .login-form,.portfolio-dark .contact_form,.portfolio-dark .singleContact,.portfolio-dark .singleTeam-global,.portfolio-dark .singleTestimonial-global,.portfolio-dark .client-single,.portfolio-dark .singleGallery-global,.portfolio-dark .singleLinks,.portfolio-dark .singleLinks2,.portfolio-dark .itemReview,.portfolio-dark .cart{
  color:var(--sk-body)}
.portfolio-dark .simplePresentCart,.portfolio-dark .login-form{background:var(--sk-card);border:1px solid var(--line-soft);border-radius:26px;padding:24px;box-shadow:none}
.portfolio-dark .simplePresentCart .title,.portfolio-dark .simplePresentCart h4{margin:0 0 18px;font:700 22px/1.1 var(--display);letter-spacing:-.04em;color:var(--sk-head)}
.portfolio-dark .login-form .login-form{padding:0;border:0;background:none;border-radius:0}
.portfolio-dark .login-form .title{font:700 24px/1.1 var(--display);letter-spacing:-.04em;margin-bottom:22px}
.portfolio-dark .searchBox-wrapper{margin-bottom:20px}
.portfolio-dark .searchByTopic{margin-top:6px}

/* ---------- Blog cards ----------
   Other themes' stylesheets are loaded unscoped on every tenant (e.g. `.singleBlog-global .blogCaption .cartTop .listItmes`),
   so the card family below repeats the same descendant chains to win on specificity (our scope class adds one). */
.portfolio-dark .singleBlog-global{margin:0 0 24px;background:var(--sk-card);border:1px solid var(--line-soft);border-radius:26px;overflow:hidden;position:relative;box-shadow:none;transition:transform .3s ease,border-color .3s ease}
.portfolio-dark .singleBlog-global:hover{transform:translateY(-4px);border-color:rgba(var(--accent-rgb),.4);box-shadow:none}
.portfolio-dark .singleBlog-global .blog-img{position:relative;overflow:hidden;border-radius:0;background:#111}
.portfolio-dark .singleBlog-global .blog-img img,.portfolio-dark .blog-thumb-img{display:block;width:100%;height:auto;object-fit:cover;filter:grayscale(.35) contrast(1.05) brightness(.9);transition:transform .8s ease,filter .5s ease}
.portfolio-dark .singleBlog-global:hover .blog-img img{transform:scale(1.04);filter:grayscale(0) contrast(1.04) brightness(.95)}
.portfolio-dark .singleBlog-global .blog-img.overlay1:before,.portfolio-dark .overlay1:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.45));z-index:1;pointer-events:none}
.portfolio-dark .singleBlog-global .blog-img .img-text{position:absolute;left:14px;top:14px;bottom:auto;right:auto;z-index:2;background:none;padding:0;margin:0}
.portfolio-dark .singleBlog-global .blog-img .img-text a{display:inline-block}
.portfolio-dark .singleBlog-global .blog-img .content,.portfolio-dark .singleBlog-global .blog-img .img-text>span.content{display:inline-block;position:static;padding:9px 12px;border-radius:999px;background:rgba(7,7,7,.72);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);color:var(--sk-head);font:700 9px/1.2 var(--mono);letter-spacing:.11em;text-transform:uppercase}
.portfolio-dark .singleBlog-global .blog-img .img-text a:hover .content{border-color:var(--orange);color:var(--orange)}
.portfolio-dark .singleBlog-global .blogCaption{padding:22px 22px 20px;margin:0;background:transparent;border:0;border-radius:0}
.portfolio-dark .singleBlog-global .blogCaption .cartTop,.portfolio-dark .cartTop{display:flex;flex-wrap:wrap;gap:6px 14px;list-style:none;margin:0 0 14px;padding:0}
.portfolio-dark .singleBlog-global .blogCaption .cartTop .listItmes,.portfolio-dark .singleBlog-global .blogCaption .cartTop .listItmes:last-child{margin:0;padding:0;border:0;display:inline-flex;align-items:center;gap:7px;font:700 9px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.portfolio-dark .singleBlog-global .blogCaption .cartTop a{color:var(--muted)}
.portfolio-dark .singleBlog-global .blogCaption .cartTop a:hover{color:var(--orange)}
.portfolio-dark .singleBlog-global .blogCaption .cartTop .listItmes .icon,.portfolio-dark .singleBlog-global .blogCaption .cartTop i{color:var(--orange);margin:0;font-size:11px}
.portfolio-dark .singleBlog-global .blogCaption h3{margin:0 0 12px;font:700 24px/1.12 var(--display);letter-spacing:-.04em}
.portfolio-dark .singleBlog-global .blogCaption .tittle,.portfolio-dark .singleBlog-global .blogCaption h3 a{color:var(--sk-head);font:inherit;letter-spacing:inherit;display:inline}
.portfolio-dark .singleBlog-global .blogCaption .tittle:hover,.portfolio-dark .singleBlog-global .blogCaption h3 a:hover{color:var(--orange)}
.portfolio-dark .singleBlog-global .blogCaption .pera{margin:0 0 18px;color:var(--muted);font-size:14px;line-height:1.7}
.portfolio-dark .singleBlog-global .blogFooter{border-top:1px solid var(--line-soft);padding-top:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0}
.portfolio-dark .singleBlog-global .blogFooter .mb-20{margin-bottom:0}
.portfolio-dark .singleBlog-global .blogFooter .blogPostUser{display:flex;align-items:center;gap:10px;margin:0}
.portfolio-dark .singleBlog-global .blogFooter .blogPostUser h3{margin:0;font:700 13px var(--display);letter-spacing:-.02em}
.portfolio-dark .singleBlog-global .blogFooter .blogPostUser .tittle{color:var(--sk-body);font:700 13px var(--display);letter-spacing:-.02em}
.portfolio-dark .singleBlog-global .blogFooter .blogPostUser .tittle:hover{color:var(--orange)}
.portfolio-dark .blog-author-avatar{flex:none}
.portfolio-dark .singleBlog-global .blogFooter .contacts{display:flex;align-items:center;gap:8px;margin:0}
.portfolio-dark .footer-social{display:flex;align-items:center;gap:8px}
.portfolio-dark .social,.portfolio-dark .footer-social .social,.portfolio-dark .singleBlog-global .blogFooter .contacts .social{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--sk-body);font-size:13px;transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease}
.portfolio-dark .social .icon,.portfolio-dark .social i,.portfolio-dark .footer-social .social .icon{color:inherit;font-size:13px}
.portfolio-dark .social:hover,.portfolio-dark .footer-social .social:hover{background:var(--orange);border-color:var(--orange);color:#120b07;transform:translateY(-2px)}
.portfolio-dark .footer-social .social:hover .icon{color:#120b07}
.portfolio-dark .footer-social.float-md-end{margin-bottom:24px}
@media (max-width:760px){.portfolio-dark .singleBlog-global .blogFooter{flex-wrap:wrap}}

/* Masonry variant keeps natural heights; rows stay aligned to the top */
.portfolio-dark .blog-masonry{align-items:flex-start}
.portfolio-dark .blog-masonry>[class*=col-]{display:block}

/* ---------- Pagination ---------- */
.portfolio-dark .pagination,.portfolio-dark .pagination .pagination-list{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none;padding:0;margin-left:0;margin-right:0}
.portfolio-dark .pagination .pagination-list li,.portfolio-dark .page-item{margin:0;padding:0;border:0;background:none}
.portfolio-dark .page-link,.portfolio-dark .pagination a,.portfolio-dark .pagination .pagination-list li .page-number{display:inline-grid;place-items:center;min-width:42px;height:42px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--sk-body);font:700 11px/1 var(--mono);letter-spacing:.08em;text-decoration:none;box-shadow:none;transition:background .25s ease,color .25s ease,border-color .25s ease}
.portfolio-dark .page-link:hover,.portfolio-dark .pagination a:hover,.portfolio-dark .pagination .pagination-list li .page-number:hover{background:rgba(var(--accent-rgb),.12);border-color:rgba(var(--accent-rgb),.5);color:var(--orange)}
.portfolio-dark .page-item.active .page-link,.portfolio-dark .pagination .active>a,.portfolio-dark .pagination .active>span,.portfolio-dark .pagination a.active,.portfolio-dark .pagination .pagination-list li .page-number.current{background:linear-gradient(135deg,var(--orange),var(--orange-2));border-color:transparent;color:#120b07}
.portfolio-dark .page-item.disabled .page-link{opacity:.4;pointer-events:none;background:rgba(255,255,255,.02);color:var(--muted)}

/* ---------- Blog detail ---------- */
.portfolio-dark .blogDetails{color:var(--sk-body)}
.portfolio-dark .blog-sidebar-col .widget-area-wrapper>*+*{margin-top:0}
.portfolio-dark .popularServices-global{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line-soft)}
.portfolio-dark .popularServices-global:first-of-type{border-top:0;padding-top:0}
.portfolio-dark .popularServices-global .itemsImg{flex:none;width:76px;height:76px;border-radius:16px;background-size:cover;background-position:center;border:1px solid var(--line);filter:grayscale(.3)}
.portfolio-dark .itemsCaption{min-width:0}
.portfolio-dark .itemsCaption h5{margin:0 0 6px;font:700 14px/1.3 var(--display);letter-spacing:-.02em}
.portfolio-dark .simplePresentCart .itemsMeta{margin:.4rem 0 0;gap:.4rem .85rem}
.portfolio-dark .simplePresentCart .itemsMeta li{font:700 9px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.portfolio-dark .simplePresentCart .itemsMeta li i{color:var(--orange)}
.portfolio-dark .capImg,.portfolio-dark .servicesDiscription-global .capImg{border-radius:26px;overflow:hidden;border:1px solid var(--line);margin-bottom:22px;background:#111}
.portfolio-dark .capImg img{width:100%;height:auto;display:block;filter:grayscale(.25) contrast(1.05) brightness(.92)}
.portfolio-dark .singleBlog-details .blogCaption{padding:0 0 4px}
.portfolio-dark .singleBlog-details .blogCaption .cartTop{margin-bottom:22px}
.portfolio-dark .singleBlog-details .blogCaption .cartTop .listItmes{display:inline-flex;margin-right:0;font:700 9px/1.4 var(--mono);letter-spacing:.12em;font-weight:700}
.portfolio-dark .singleBlog-details .blogCaption .cartTop .listItmes .icon{color:var(--orange);margin-right:0}
.portfolio-dark .blog-rich-content{color:var(--sk-body);font-size:1.02rem;line-height:1.85}
.portfolio-dark .blog-rich-content p,.portfolio-dark .blog-rich-content li{color:var(--sk-body)}
.portfolio-dark .blog-rich-content h1,.portfolio-dark .blog-rich-content h2,.portfolio-dark .blog-rich-content h3,.portfolio-dark .blog-rich-content h4,.portfolio-dark .blog-rich-content h5,.portfolio-dark .blog-rich-content h6{font-family:var(--display);color:var(--sk-head);letter-spacing:-.045em}
.portfolio-dark .blog-rich-content h2{font-size:clamp(28px,3.2vw,40px);padding-top:.4em;line-height:1.08} /* no rule above section headings (owner, 2026-10-22): spacing alone separates them */
.portfolio-dark .blog-rich-content h3{font-size:clamp(21px,2.2vw,27px)}
.portfolio-dark .blog-rich-content h4{font-size:20px}
.portfolio-dark .blog-rich-content h5,.portfolio-dark .blog-rich-content h6{font:700 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.portfolio-dark .blog-rich-content li::marker{color:var(--orange)}
.portfolio-dark .blog-rich-content img{border-radius:20px;border:1px solid var(--line);box-shadow:none;background:#111}
.portfolio-dark .blog-rich-content p>img,.portfolio-dark .blog-rich-content figure img{box-shadow:var(--shadow);border:1px solid var(--line)}
.portfolio-dark .blog-rich-content figure figcaption{color:var(--muted-2);font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase}

/* ---------- Blockquote, code, tables ---------- */
.portfolio-dark blockquote,.portfolio-dark .blog-rich-content blockquote{margin:1.6em 0;padding:20px 24px;border:1px solid var(--line-soft);border-left:3px solid var(--orange);border-radius:0 20px 20px 0;background:var(--sk-card);color:var(--text);font-style:normal}
.portfolio-dark blockquote p:last-child{margin-bottom:0}
.portfolio-dark code,.portfolio-dark kbd,.portfolio-dark samp,.portfolio-dark .blog-rich-content code{padding:.18em .5em;border-radius:8px;border:1px solid rgba(var(--accent-rgb),.22);background:rgba(var(--accent-rgb),.08);color:var(--orange);font:600 .86em var(--mono);word-break:break-word}
.portfolio-dark pre,.portfolio-dark .blog-rich-content pre{margin:1.5em 0;padding:18px 20px;border:1px solid var(--line-soft);border-radius:20px;background:#0c0c0d;color:var(--text);overflow:auto;line-height:1.65}
.portfolio-dark pre code,.portfolio-dark .blog-rich-content pre code{padding:0;border:0;background:none;color:inherit;font-size:13px;word-break:normal}
.portfolio-dark .table,.portfolio-dark table{width:100%;border-collapse:separate;border-spacing:0;color:var(--sk-body);--bs-table-bg:transparent;--bs-table-color:var(--sk-body);--bs-table-striped-bg:rgba(255,255,255,.03);--bs-table-border-color:var(--line-soft)}
.portfolio-dark .blog-rich-content table,.portfolio-dark .dynamic-page-content-area table{display:block;overflow-x:auto;border:1px solid var(--line-soft);border-radius:20px;background:var(--sk-card)}
.portfolio-dark .blog-rich-content th,.portfolio-dark .blog-rich-content td,.portfolio-dark .dynamic-page-content-area th,.portfolio-dark .dynamic-page-content-area td,.portfolio-dark .table th,.portfolio-dark .table td{padding:12px 16px;border:0;border-bottom:1px solid var(--line-soft);color:var(--sk-body);text-align:left;background:transparent}
.portfolio-dark .blog-rich-content th,.portfolio-dark .dynamic-page-content-area th,.portfolio-dark .table th{font:700 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sk-head);background:rgba(255,255,255,.04)}
.portfolio-dark .blog-rich-content tr:last-child td{border-bottom:0}
.portfolio-dark .table-striped>tbody>tr:nth-of-type(odd)>*{background:rgba(255,255,255,.03);color:var(--sk-body)}

/* ---------- Blog FAQ shortcode (inline styles from the editor are light) ---------- */
.portfolio-dark .blog-rich-content .sitelyx-faq-shortcode{margin:12px 0!important;border:1px solid var(--line-soft)!important;border-radius:20px!important;background:var(--sk-card)!important;overflow:hidden} /* inline style="" on the element */
.portfolio-dark .blog-rich-content .sitelyx-faq-shortcode[open]{border-color:rgba(var(--accent-rgb),.4)!important}
.portfolio-dark .blog-rich-content .sitelyx-faq-question{padding:16px 20px!important;color:var(--sk-head);font:700 16px var(--display)!important;letter-spacing:-.02em}
.portfolio-dark .blog-rich-content .sitelyx-faq-question::-webkit-details-marker{display:none}
.portfolio-dark .blog-rich-content .sitelyx-faq-question span[aria-hidden]{color:var(--orange);font:700 20px var(--mono)!important}
.portfolio-dark .blog-rich-content .sitelyx-faq-answer{padding:0 20px 18px!important;color:var(--sk-body)!important;line-height:1.75!important} /* inline color:#4b5563 */

/* ---------- Comments ---------- */
.portfolio-dark .itemReview .small-tittle h3,.portfolio-dark .comment_load_show h3{font:700 26px/1.1 var(--display);letter-spacing:-.04em;text-transform:none;color:var(--sk-head)}
.portfolio-dark .comment-container{margin-bottom:16px;padding:18px 20px;border:1px solid var(--line-soft);border-radius:20px;background:var(--sk-card);color:var(--sk-body)}
.portfolio-dark .reply-container{margin-left:24px;padding:16px 18px;border:1px solid var(--line-soft);border-radius:18px;background:rgba(255,255,255,.025);color:var(--sk-body)}
.portfolio-dark .comment-container h5,.portfolio-dark .comment-container h6,.portfolio-dark .reply-container h5,.portfolio-dark .reply-container h6{color:var(--sk-head);font-family:var(--display)}
.portfolio-dark .avatar,.portfolio-dark .user-thumb,.portfolio-dark .testimonial-avatar{border-radius:50%;border:1px solid var(--line)}
.portfolio-dark .blogDetails .login-form{margin-top:32px}

/* ---------- FAQ / accordion / tab menus ---------- */
.portfolio-dark .collapse-wrapper{color:var(--sk-body)}
.portfolio-dark .accordion{--bs-accordion-bg:transparent;--bs-accordion-color:var(--sk-body);--bs-accordion-border-color:var(--line-soft);--bs-accordion-btn-color:var(--sk-head);--bs-accordion-btn-bg:transparent;--bs-accordion-active-bg:transparent;--bs-accordion-active-color:var(--orange);--bs-accordion-btn-focus-box-shadow:none;--bs-accordion-border-radius:22px}
.portfolio-dark .accordion-item{margin-bottom:12px;background:var(--sk-card);border:1px solid var(--line-soft);border-radius:22px!important;overflow:hidden;color:var(--sk-body)} /* bootstrap first/last-child radius rules */
.portfolio-dark .accordion-item:has(.accordion-button:not(.collapsed)){border-color:rgba(var(--accent-rgb),.4)}
.portfolio-dark .accordion-header{margin:0}
.portfolio-dark .accordion-button{display:flex;width:100%;padding:20px 22px;background:transparent;color:var(--sk-head);font:700 17px/1.3 var(--display);letter-spacing:-.03em;text-align:left;border:0;border-radius:0;box-shadow:none}
.portfolio-dark .accordion-button:not(.collapsed){background:transparent;color:var(--orange);box-shadow:none}
.portfolio-dark .accordion-button:focus{box-shadow:none;border-color:transparent;outline:0}
.portfolio-dark .accordion-button:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.portfolio-dark .accordion-button::after{filter:invert(1) brightness(1.4);opacity:.8}
.portfolio-dark .accordion-button:not(.collapsed)::after{filter:invert(88%) sepia(60%) saturate(500%) hue-rotate(20deg);opacity:1}
.portfolio-dark .accordion-body{padding:0 22px 22px;color:var(--sk-body)}
.portfolio-dark .accordion-body p{margin:0;color:var(--sk-body);font-size:15px;line-height:1.8}
.portfolio-dark .accordion-collapse{border:0}
.portfolio-dark .tab-menu-global ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.portfolio-dark .tab-menu-global li{margin:0}
.portfolio-dark .tab-menu-global a{display:inline-block;padding:11px 16px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--sk-body);font:700 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;transition:all .25s ease}
.portfolio-dark .tab-menu-global a:hover{border-color:rgba(var(--accent-rgb),.5);color:var(--orange)}
.portfolio-dark .tab-menu-global a.active,.portfolio-dark .tab-menu-global li.active a{background:linear-gradient(135deg,var(--orange),var(--orange-2));border-color:transparent;color:#120b07}
.portfolio-dark .faqArea-global .input-form2{padding:24px;background:var(--sk-card);border:1px solid var(--line-soft);border-radius:26px}
.portfolio-dark .faqArea-global .input-form2 h5{margin:0 0 18px;font:700 20px/1.15 var(--display);letter-spacing:-.04em;color:var(--sk-head)}
.portfolio-dark .faqArea-global .input-form2 .form-control,.portfolio-dark .faqArea-global .input-form2 textarea{margin-bottom:12px}

/* ---------- Breadcrumb / inner hero (usually replaced by .pdk-crumb; kept harmless) ---------- */
.portfolio-dark .breadcrumb{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;background:transparent;--bs-breadcrumb-divider-color:var(--muted-2);--bs-breadcrumb-item-active-color:var(--text);font:700 10px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.portfolio-dark .breadcrumb-item,.portfolio-dark .breadcrumb-item a{color:var(--muted)}
.portfolio-dark .breadcrumb-item.active{color:var(--text)}
.portfolio-dark .breadcrumb-item a:hover{color:var(--orange)}
.portfolio-dark .breadcrumb-item+.breadcrumb-item::before{color:var(--muted-2)}
.portfolio-dark .heroPadding2,.portfolio-dark .innerHeroContent{background:transparent;color:var(--text)}
.portfolio-dark .innerHeroContent h1,.portfolio-dark .innerHeroContent .title{font:700 clamp(40px,6vw,84px)/.95 var(--display);letter-spacing:-.06em;color:var(--sk-head)}

/* ---------- About / mission / brands ---------- */
.portfolio-dark .abutArea-global1,.portfolio-dark .missionArea,.portfolio-dark .ourBranding-global{color:var(--sk-body)}
.portfolio-dark .aboutImg-global img,.portfolio-dark .aboutCaption-global+* img,.portfolio-dark .imgHeight1 img,.portfolio-dark .areaHeight1 img{border-radius:28px;border:1px solid var(--line)}
.portfolio-dark .aboutCaption-global .tittle,.portfolio-dark .aboutCaption-global h2{color:var(--sk-head)}
.portfolio-dark .aboutCaption-global .pera{color:var(--sk-body)}
.portfolio-dark .missionArea .tittle{color:var(--sk-head)}
.portfolio-dark .listItems,.portfolio-dark .listing,.portfolio-dark .listing2,.portfolio-dark .listingStyle{color:var(--sk-body)}
.portfolio-dark .listing li,.portfolio-dark .listing2 li,.portfolio-dark .listItems li,.portfolio-dark .listingStyle li{color:var(--sk-body);margin-bottom:10px}
.portfolio-dark .listing .icon,.portfolio-dark .listing2 .icon,.portfolio-dark .listItems .icon{color:var(--orange)}
.portfolio-dark .brandWrapper{display:flex;align-items:center;justify-content:center;padding:22px;border:1px solid var(--line-soft);border-radius:22px;background:var(--sk-card);min-height:100px}
.portfolio-dark .brandWrapper img{max-height:56px;width:auto;filter:grayscale(1) brightness(1.6);opacity:.75;transition:opacity .3s ease,filter .3s ease}
.portfolio-dark .brandWrapper:hover img{filter:none;opacity:1}
.portfolio-dark .backCircle,.portfolio-dark .icon-wrap .icon,.portfolio-dark .itemsMeta .icon{color:var(--orange)}

/* ---------- Contact ---------- */
.portfolio-dark .singleContact{padding:24px 18px;border:1px solid var(--line-soft);border-radius:22px;background:var(--sk-card);height:calc(100% - 24px)}
.portfolio-dark .singleContact .icon-wrap .icon{display:inline-grid;place-items:center;width:54px;height:54px;margin:0 auto 14px;border-radius:50%;border:1px solid rgba(var(--accent-rgb),.35);background:rgba(var(--accent-rgb),.08);color:var(--orange);font-size:22px}
.portfolio-dark .singleContact .tittle{font:700 15px/1.2 var(--display);color:var(--sk-head)}
.portfolio-dark .singleContact .pera{margin:6px 0 0;font-size:13px;color:var(--muted)}
.portfolio-dark .contactArea .simplePresentCart,.portfolio-dark .contact_form{padding:30px}
.portfolio-dark .contactArea .simplePresentCart .tittle,.portfolio-dark .contact_form .tittle{margin:0 0 22px;font:700 clamp(28px,3vw,40px)/1 var(--display);letter-spacing:-.05em}
.portfolio-dark .mapArea{margin-top:10px}
.portfolio-dark .mapWrapper-contact{border:1px solid var(--line);border-radius:24px;overflow:hidden;background:#111}
.portfolio-dark .mapWrapper-contact iframe{display:block;width:100%;filter:grayscale(1) invert(.92) contrast(.9) hue-rotate(180deg)}

/* ---------- Testimonials / clients ---------- */
.portfolio-dark .testimonialarea-global,.portfolio-dark .clients{color:var(--sk-body)}
.portfolio-dark .singleTestimonial-global{background:var(--sk-card);border:1px solid var(--line-soft);border-radius:26px;padding:26px;display:flex;flex-direction:column;justify-content:space-between;gap:22px;height:calc(100% - 24px)}
.portfolio-dark .testiPera,.portfolio-dark .clinetDisCrip,.portfolio-dark .clientText{color:var(--sk-body);font-size:15px;line-height:1.8}
.portfolio-dark .testimonialClient{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:18px;border-top:1px solid var(--line-soft)}
.portfolio-dark .testimonialClient .clients{display:flex;align-items:center;gap:12px}
.portfolio-dark .testimonialClient .clientText p{margin:2px 0 0;font:700 9px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.portfolio-dark .testimonialClient .feedback{text-align:right}
.portfolio-dark .testimonialClient .dateTime{font:700 9px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.portfolio-dark .clientName,.portfolio-dark .clientImg+* h5,.portfolio-dark .testimonialClient h5{font:700 16px var(--display);letter-spacing:-.03em;color:var(--sk-head)}
.portfolio-dark .clientImg img{border-radius:50%;border:1px solid var(--line);width:56px;height:56px;object-fit:cover}
.portfolio-dark .rattingList,.portfolio-dark .itemReview .rattingList{display:flex;gap:3px;list-style:none;margin:0 0 12px;padding:0}
.portfolio-dark .rattingList li,.portfolio-dark .rattingList i,.portfolio-dark .fa-star,.portfolio-dark .la-star{color:var(--orange)}
.portfolio-dark .quotes,.portfolio-dark .client-single .icon{color:var(--orange)}

/* ---------- Team ---------- */
.portfolio-dark .teamArea,.portfolio-dark .singleTeam-global{color:var(--sk-body)}
.portfolio-dark .singleTeam-global{padding:0;overflow:hidden;background:var(--sk-card);border:1px solid var(--line-soft);border-radius:26px;position:relative}
.portfolio-dark .team-img{position:relative;overflow:hidden}
.portfolio-dark .team-img img{width:100%;height:auto;display:block;filter:grayscale(1) contrast(1.08) brightness(.88);transition:transform .8s ease,filter .5s ease}
.portfolio-dark .singleTeam-global:hover .team-img img{transform:scale(1.04);filter:grayscale(.2)}
.portfolio-dark .teamCaption{padding:20px 22px 22px}
.portfolio-dark .teamCaption h3,.portfolio-dark .teamCaption h4,.portfolio-dark .teamCaption .tittle{margin:0 0 4px;font:700 20px var(--display);letter-spacing:-.04em;color:var(--sk-head)}
.portfolio-dark .teamCaption p,.portfolio-dark .teamCaption span,.portfolio-dark .teamCaption .pera{color:var(--muted);font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.portfolio-dark .teamSocial{display:flex;gap:8px;margin-top:14px}
.portfolio-dark .teamSocial a{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--sk-body)}
.portfolio-dark .teamSocial a:hover{background:var(--orange);border-color:var(--orange);color:#120b07}

/* ---------- Gallery / video / portfolio ---------- */
.portfolio-dark .galleryArea,.portfolio-dark .galleryArea-global,.portfolio-dark .videoGallery,.portfolio-dark .portfolioArea{color:var(--sk-body)}
.portfolio-dark .singleGallery-global{position:relative;overflow:hidden;border-radius:24px;border:1px solid var(--line-soft);background:#111}
.portfolio-dark .singleGallery-global img,.portfolio-dark .galleryArea img{width:100%;height:auto;display:block;filter:grayscale(.3) contrast(1.04) brightness(.92);transition:transform .8s ease,filter .5s ease}
.portfolio-dark .singleGallery-global:hover img{transform:scale(1.04);filter:none}
.portfolio-dark .img-wrap,.portfolio-dark .thumb-wrap,.portfolio-dark .thumb-link{display:block;position:relative;overflow:hidden;border-radius:24px}
.portfolio-dark .videoGallery .popup-video,.portfolio-dark .popup-video{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--orange);color:#120b07;border:0;box-shadow:0 0 0 10px rgba(var(--accent-rgb),.18)}
.portfolio-dark .popup-video:hover{background:var(--orange-3);color:#120b07}
.portfolio-dark .portfolioArea .img-text,.portfolio-dark .portfolioArea .caption{color:var(--text)}
.portfolio-dark .caption h3,.portfolio-dark .caption h4,.portfolio-dark .caption .tittle{color:var(--sk-head);font-family:var(--display)}
.portfolio-dark .caption p,.portfolio-dark .caption .pera{color:var(--sk-body)}
.portfolio-dark .itemsImg,.portfolio-dark .itemsCaption .tittle{color:var(--sk-head)}
.portfolio-dark .imgEffect img{border-radius:inherit}
.portfolio-dark .tab-menu-global.tabStyleThree{margin-bottom:28px}
.portfolio-dark .filters-menu,.portfolio-dark .portfolio-filter{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- Services ---------- */
.portfolio-dark .servicesArea{color:var(--sk-body)}
.portfolio-dark .servicesArea .tittle a,.portfolio-dark .servicesArea h3 a{color:var(--sk-head)}
.portfolio-dark .service_category_item_in_sidebar{accent-color:var(--orange)}
.portfolio-dark .arrowStyleThree,.portfolio-dark .sliderArrow button{border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);border-radius:50%}
.portfolio-dark .arrowStyleThree:hover,.portfolio-dark .sliderArrow button:hover{background:var(--orange);color:#120b07;border-color:var(--orange)}

/* ---------- 404 ----------
   The 404 template is standalone (plain <body>, own inline <style>), so it only picks this up once it carries the
   theme body class and stylesheet. #notfound raises specificity over its inline rules. */
.portfolio-dark #notfound .notfound,.portfolio-dark .notfound{color:var(--sk-body);text-align:center;padding:40px 15px}
.portfolio-dark #notfound .notfound .notfound-404{height:auto;line-height:1;margin-bottom:22px}
.portfolio-dark #notfound .notfound .notfound-404 h1{font:700 clamp(96px,18vw,240px)/.85 var(--display);letter-spacing:-.08em;text-transform:none;background:linear-gradient(90deg,var(--orange),var(--orange-3));-webkit-background-clip:text;background-clip:text;color:transparent;margin:0}
.portfolio-dark #notfound .notfound h2{font:700 clamp(24px,3vw,36px)/1.1 var(--display);letter-spacing:-.04em;color:var(--sk-head)}
.portfolio-dark #notfound .notfound p{font:400 15px/1.8 var(--sans);color:var(--muted);margin:0 auto 26px}
.portfolio-dark #notfound .notfound a{display:inline-flex;align-items:center;justify-content:center;padding:14px 24px;border-radius:999px;border:1px solid transparent;background:linear-gradient(135deg,var(--orange),var(--orange-2));color:#120b07;font:700 10px/1.2 var(--mono);letter-spacing:.11em;text-transform:uppercase;margin-top:0;transition:transform .28s ease}
.portfolio-dark #notfound .notfound a:hover{opacity:1;transform:translateY(-2px);background:linear-gradient(135deg,var(--orange-3),var(--orange))}

/* ---------- Cookie banner (ihavecookies) ---------- */
.portfolio-dark #gdpr-cookie-message{background:rgba(13,13,15,.96);color:var(--sk-body);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);backdrop-filter:blur(18px);font-family:var(--sans);padding:22px 24px}
.portfolio-dark #gdpr-cookie-message h4{font:700 18px var(--display);letter-spacing:-.03em;color:var(--sk-head)}
.portfolio-dark #gdpr-cookie-message p{color:var(--sk-body);font-size:13px;line-height:1.7}
.portfolio-dark #gdpr-cookie-message a{color:var(--orange);text-decoration:underline;border-bottom:0}
.portfolio-dark #gdpr-cookie-message button{border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);font:700 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:11px 16px}
.portfolio-dark #gdpr-cookie-message button#ihavecookiesBtn,.portfolio-dark #gdpr-cookie-message button:hover{background:var(--orange);border-color:var(--orange);color:#120b07}
.portfolio-dark #gdpr-cookie-advanced{background:var(--panel);color:var(--sk-body)}
.portfolio-dark .cookie-consent,.portfolio-dark .cookie-bar,.portfolio-dark .cookie-notice{background:rgba(13,13,15,.96);color:var(--sk-body);border:1px solid var(--line)}

/* ---------- Back to top ---------- */
.portfolio-dark .progressParent{background:rgba(13,13,15,.92);border:1px solid var(--line);border-radius:50%;box-shadow:var(--shadow);color:var(--orange)}
.portfolio-dark .progressParent .backCircle{color:var(--orange);fill:none}
.portfolio-dark .progressParent svg path{stroke:var(--orange)}
.portfolio-dark .progressParent:hover{border-color:var(--orange)}

/* ---------- Modals, toastr, search overlay, alerts ---------- */
.portfolio-dark .modal-content{background:var(--panel);color:var(--sk-body);border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow)}
.portfolio-dark .modal-header,.portfolio-dark .modal-footer{border-color:var(--line-soft)}
.portfolio-dark .modal-title{font-family:var(--display);color:var(--sk-head)}
.portfolio-dark .btn-close{filter:invert(1) grayscale(1) brightness(1.6)}
.portfolio-dark .modal-backdrop{--bs-backdrop-bg:#000}
.portfolio-dark #toast-container>div{background-color:#17171a;color:var(--text);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);opacity:1;font-family:var(--sans)}
.portfolio-dark #toast-container>.toast-success{background-color:#17171a;border-left:3px solid var(--orange)}
.portfolio-dark #toast-container>.toast-error{background-color:#17171a;border-left:3px solid #ff6b6b}
.portfolio-dark #toast-container>.toast-warning{background-color:#17171a;border-left:3px solid #f5b74b}
.portfolio-dark #toast-container>.toast-info{background-color:#17171a;border-left:3px solid #6aa7ff}
.portfolio-dark .toast-title{font-family:var(--display)}
.portfolio-dark .toast-message{color:var(--sk-body)}
.portfolio-dark .alert{border-radius:18px;border:1px solid var(--line);background:var(--sk-card);color:var(--sk-body)}
.portfolio-dark .alert-success{border-color:rgba(var(--accent-rgb),.4);color:var(--orange)}
.portfolio-dark .alert-danger{border-color:rgba(255,107,107,.45);color:#ff9b9b}
.portfolio-dark .alert-warning{border-color:rgba(245,183,75,.45);color:#f5b74b}
.portfolio-dark .search-suggestion-overlay{background:rgba(13,13,15,.97);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);color:var(--sk-body)}
.portfolio-dark .search-suggestion-overlay a{color:var(--sk-body)}
.portfolio-dark .search-suggestion-overlay a:hover{color:var(--orange);background:rgba(255,255,255,.04)}
.portfolio-dark .loader-section,.portfolio-dark .ajax-loading-wrap{background:var(--bg)}
.portfolio-dark .sk-circle .sk-child:before,.portfolio-dark .sk-circle>div:before{background:var(--orange)}

/* ---------- Generic content media ---------- */
.portfolio-dark .dynamic-page-content-area img{border-radius:20px;border:1px solid var(--line);max-width:100%;height:auto}
.portfolio-dark hr{border-color:var(--line);opacity:1}

/* ---------- Refinements ---------- */
.portfolio-dark .section-tittle .tittle:before,.portfolio-dark .section-tittle .tittle:after,.portfolio-dark .section-tittle h2:before,.portfolio-dark .section-tittle h2:after{content:none;display:none} /* old-theme ornaments */
.portfolio-dark .section-tittle .tittle,.portfolio-dark .section-tittle h2.tittle{font-size:clamp(34px,4.6vw,64px)!important;line-height:.98;margin-bottom:0;display:block} /* other themes pin 24-44px with !important at breakpoints */
.portfolio-dark .blogDetails .section-tittle .tittle{font-size:clamp(28px,3vw,40px)!important}
.portfolio-dark .section-tittle{margin-bottom:34px}
.portfolio-dark .custom-control-input[type=checkbox],.portfolio-dark .login-form input[type=checkbox]{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:6px;border:1px solid var(--line);background:var(--sk-field);display:inline-grid;place-items:center;cursor:pointer;flex:none;margin:0}
.portfolio-dark .custom-control-input[type=checkbox]:checked,.portfolio-dark .login-form input[type=checkbox]:checked{background:var(--orange);border-color:var(--orange)}
.portfolio-dark .custom-control-input[type=checkbox]:checked:after,.portfolio-dark .login-form input[type=checkbox]:checked:after{content:"";width:5px;height:9px;border:solid #120b07;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.portfolio-dark .custom-control.custom-checkbox{display:flex;align-items:center;gap:10px}
.portfolio-dark .blog-rich-content table{width:100%;min-width:100%}

/* FAQ widget: same chains the shared stylesheet uses */
.portfolio-dark .faqArea-global .collapse-wrapper .accordion-item{border:1px solid var(--line-soft);margin-bottom:12px;border-radius:22px;background:var(--sk-card);position:relative;z-index:0;overflow:hidden}
.portfolio-dark .faqArea-global .collapse-wrapper .accordion-item:has(.accordion-button:not(.collapsed)){border-color:rgba(var(--accent-rgb),.4)}
.portfolio-dark .faqArea-global .collapse-wrapper .accordion-header{padding:0;border:0;border-radius:0;margin:0}
.portfolio-dark .faqArea-global .collapse-wrapper .accordion-header .accordion-button{display:block;position:relative;text-align:left;color:var(--sk-head);background:none;border:0;padding:20px 64px 20px 22px;font:700 17px/1.3 var(--display);letter-spacing:-.03em;border-radius:0;box-shadow:none}
.portfolio-dark .faqArea-global .collapse-wrapper .accordion-header .accordion-button:not(.collapsed){color:var(--orange);background:none;box-shadow:none}
.portfolio-dark .faqArea-global .collapse-wrapper .accordion-header .accordion-button::after{position:absolute;top:50%;right:18px;margin-top:-16px;width:32px;height:32px;line-height:30px;text-align:center;font-size:14px;color:var(--orange);border:1px solid rgba(var(--accent-rgb),.35);border-radius:50%;background:rgba(var(--accent-rgb),.08);filter:none;transform:none}
.portfolio-dark .faqArea-global .collapse-wrapper .accordion-header .accordion-button:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.portfolio-dark .faqArea-global .collapse-wrapper .accordion-collapse{border:0;border-radius:0}
.portfolio-dark .faqArea-global .collapse-wrapper .accordion-collapse .accordion-body{padding:0 64px 22px 22px;border-radius:0;color:var(--sk-body)}
.portfolio-dark .faqArea-global .collapse-wrapper .accordion-collapse .accordion-body p{margin:0;color:var(--sk-body)}
.portfolio-dark .faqArea-global .input-form textarea{background:var(--sk-field);color:var(--text);height:170px;min-height:150px;width:100%;font:400 14px/1.5 var(--sans);padding:14px 16px;border-radius:16px;margin-bottom:14px;border:1px solid var(--line)}
.portfolio-dark .faqArea-global .input-form textarea:focus{box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12);border-color:rgba(var(--accent-rgb),.6)}
.portfolio-dark .tab-menu-global.tabStyleTwo ul li{display:block}
.portfolio-dark .tab-menu-global.tabStyleTwo ul li a,.portfolio-dark .tab-menu-global.tabStyleOne ul li a,.portfolio-dark .tab-menu-global.tabStyleThree ul li a{font:700 10px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sk-body);border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);display:inline-block;padding:11px 16px;margin:0;text-decoration:none}
.portfolio-dark .tab-menu-global.tabStyleTwo ul li a:hover,.portfolio-dark .tab-menu-global.tabStyleOne ul li a:hover,.portfolio-dark .tab-menu-global.tabStyleThree ul li a:hover{color:var(--orange);border-color:rgba(var(--accent-rgb),.5)}
.portfolio-dark .tab-menu-global.tabStyleTwo ul li a.active,.portfolio-dark .tab-menu-global.tabStyleOne ul li a.active,.portfolio-dark .tab-menu-global.tabStyleThree ul li a.active{background:linear-gradient(135deg,var(--orange),var(--orange-2));border-color:transparent;color:#120b07;text-decoration:none}
.portfolio-dark .tab-menu-global.tabStyleTwo ul,.portfolio-dark .tab-menu-global.tabStyleOne ul,.portfolio-dark .tab-menu-global.tabStyleThree ul{margin-bottom:0}

.portfolio-dark .missionArea .section-tittle,.portfolio-dark .missionArea .section-tittle+*{margin-bottom:34px}
.portfolio-dark .aboutImg-global img,.portfolio-dark .capImg img{filter:grayscale(.2) brightness(.85)}

/* Content imagery: rounded, hairline border, slightly toned so bright photos do not glare on the dark page */
.portfolio-dark .imgEffect,.portfolio-dark .aboutImg-global{border-radius:28px;overflow:hidden;border:1px solid var(--line);background:#111}
.portfolio-dark .imgEffect img,.portfolio-dark .aboutImg-global img,.portfolio-dark .missionArea img,.portfolio-dark .abutArea-global1 img{display:block;width:100%;height:auto;border-radius:0;filter:grayscale(.3) contrast(1.04) brightness(.9);transition:transform .8s ease,filter .5s ease}
.portfolio-dark .imgEffect:hover img{transform:scale(1.03);filter:grayscale(0) brightness(.95)}
.portfolio-dark .capImg.imgEffect{border-radius:26px}
.portfolio-dark .singleTestimonial-global .testiPera,.portfolio-dark .singleTestimonial-global .testiPera .pera,.portfolio-dark .singleTestimonial-global .testiPera p{color:var(--sk-body);font-size:15px;line-height:1.8;margin:0}
.portfolio-dark .clientImg{flex:none}
.portfolio-dark .clientImg img,.portfolio-dark .clients .avatar{width:56px;height:56px;max-width:none;object-fit:cover;border-radius:50%;flex:none}

/* search buttons: donation/support stylesheets pin width with !important */
.portfolio-dark .searchBox-wrapper .search-box .input-form .icon,.portfolio-dark .searchBox-wrapper .search-box .input-form button{width:40px!important;height:40px!important;right:6px!important;top:6px!important}

/* Video gallery */
.portfolio-dark .single-main-image{position:relative;border-radius:28px;overflow:hidden;border:1px solid var(--line);background:#111}
.portfolio-dark .single-main-image .long-img,.portfolio-dark .single-main-image img{display:block;width:100%;height:auto;filter:grayscale(.3) brightness(.85)}
.portfolio-dark .single-main-image .video-icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2}
.portfolio-dark .single-main-image .video-icon .popup-video,.portfolio-dark .single-main-image .video-icon .btn-icon{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--orange);color:#120b07;box-shadow:0 0 0 10px rgba(var(--accent-rgb),.18);font-size:18px}
.portfolio-dark .single-main-image .video-icon .popup-video i{color:#120b07;margin-left:3px}
.portfolio-dark .videoGallery .section-tittle .tittle,.portfolio-dark .missionArea .section-tittle .tittle,.portfolio-dark .testimonialarea-global .section-tittle .tittle{font-size:clamp(30px,3.6vw,52px)!important}
.portfolio-dark .team-img img{filter:grayscale(1) contrast(1.08) brightness(.75)}

/* The page-builder wrapper uses width:100% with margin -15px and padding 15px, which leaves the content 30px short
   on the right (visibly off-centre). The theme's own containers already provide the gutters. */
.portfolio-dark .section-layout-full_width .section-inner{width:auto;margin-left:0;margin-right:0;padding-left:0;padding-right:0}
.portfolio-dark .prev-icon,.portfolio-dark .next-icon,.portfolio-dark .slick-arrow.prev-icon,.portfolio-dark .slick-arrow.next-icon{background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--text);border-radius:50%}
.portfolio-dark .prev-icon:hover,.portfolio-dark .next-icon:hover{background:var(--orange);border-color:var(--orange);color:#120b07}

/* Bootstrap pagination (laravel links) - chains match the shared stylesheet */
.portfolio-dark .pagination .page-item .page-link{display:inline-grid;place-items:center;width:auto;min-width:42px;height:42px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--sk-body);font:700 11px/1 var(--mono);box-shadow:none}
.portfolio-dark .pagination .page-item .page-link:hover,.portfolio-dark .pagination .page-item .page-link:focus{background:rgba(var(--accent-rgb),.12);border-color:rgba(var(--accent-rgb),.5);color:var(--orange);box-shadow:none}
.portfolio-dark .pagination .page-item.active .page-link{background:linear-gradient(135deg,var(--orange),var(--orange-2));border-color:transparent;color:#120b07}
.portfolio-dark .pagination .page-item.disabled .page-link{opacity:.4;background:rgba(255,255,255,.02);color:var(--muted);border-color:var(--line)}
.portfolio-dark .pagination-wrapper{display:flex;justify-content:center;margin-top:30px}
.portfolio-dark nav>ul.pagination{margin:0}
.portfolio-dark div.pagination{margin-top:40px;margin-bottom:30px}

/* Tag / category pills on system pages (portfolio item, blog post): a generic stylesheet paints them white,
   which left white text on white. Outline pills like the theme's small buttons. */
.portfolio-dark .selectTag { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.portfolio-dark .selectTag .listItem { background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 0; margin: 0; }
.portfolio-dark .selectTag .listItem a, .portfolio-dark .selectTag a .listItem { display: inline-block; padding: 6px 14px; color: var(--sk-body, #c9c4bb); font-size: 13px; }
.portfolio-dark .selectTag .listItem:hover { border-color: var(--orange); }
.portfolio-dark .selectTag .listItem:hover a { color: var(--orange); }
/* Technology logos (widget option "Show technology logos"): drawn in the text colour so they follow the theme. */
.portfolio-dark .tech-ico{width:1em;height:1em;fill:currentColor;flex:none;vertical-align:-.12em;margin-right:.3em}
.portfolio-dark .role-track span .tech-ico{width:.82em;height:.82em;margin-right:.32em;vertical-align:-.06em;color:#c4bfb6}
.portfolio-dark .pills span .tech-ico{width:13px;height:13px;margin-right:7px;vertical-align:-2px;opacity:.9}
.portfolio-dark .stack-logos{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 16px;color:#d9d4cb}
.portfolio-dark .stack-logos .tech-ico{width:26px;height:26px;margin:0;vertical-align:baseline}