/* SEPNOIR V22 — Unified glass design system. Loaded after legacy CSS.
   Focused glass surfaces; avoid continuous backdrop-filter layers on low-end mobile. */
:root{--g-ink:#211a3a;--g-line:rgba(110,93,152,.18);--g-light:rgba(255,255,255,.67);--g-purple:#8666e8;--g-shadow:0 16px 55px rgba(47,34,88,.10)}
html{scroll-padding-top:104px}body{overflow-x:clip}
html:not([data-theme=dark]) .v15-header-bar{background:rgba(255,255,255,.72)!important;border-color:rgba(159,137,205,.28)!important;box-shadow:0 14px 48px rgba(40,25,85,.07);-webkit-backdrop-filter:blur(17px) saturate(145%);backdrop-filter:blur(17px) saturate(145%)}
html:not([data-theme=dark]) .v15-header{background:rgba(249,248,252,.50)!important}
html:not([data-theme=dark]) .v15-drawer{background:rgba(251,249,255,.96)!important;box-shadow:0 25px 80px rgba(43,26,82,.14)!important}
html[data-theme=dark] .v15-header-bar{background:rgba(27,23,45,.82)!important;box-shadow:0 16px 70px rgba(5,2,18,.27)!important;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
:is(.v15-header,.v20-work-body) a:focus-visible,:is(.v15-header,.v20-work-body) button:focus-visible{outline:3px solid #9d86fa;outline-offset:3px}
/* Home: add tactile depth without changing existing brand layout. */
.v9-home :is(.v9-work-card,.v9-concept-card,.v8-brand-card,.service-tile,.post-card){border-radius:clamp(19px,2.5vw,30px)!important}
.v9-home :is(.hero-title,.hero-title-accent){text-wrap:balance}
.v9-home .v20-process-card{background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.025));border:1px solid rgba(240,233,255,.18);box-shadow:inset 0 1px rgba(255,255,255,.06)}
.v9-home .v20-process-card:nth-child(2){background:linear-gradient(145deg,rgba(150,117,235,.27),rgba(255,255,255,.035))}
@media(hover:hover) and (min-width:900px){.v9-home .v20-process-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}
/* Case-study and archive pages visually use the SAME brand header as home. */
.v20-work-body{font-family:"Sepnoir Estedad",Tahoma,sans-serif;color:var(--g-ink);background:radial-gradient(ellipse 76% 45% at 100% 18%,rgba(199,183,249,.29),transparent 80%),#f8f7fa;min-width:0}
html[lang=en] .v20-work-body{font-family:Inter,system-ui,sans-serif}
.v20-work-body .v15-header{position:sticky!important;top:0!important}
.v20-work-body .v9-skip-link{position:fixed;top:8px;inset-inline-start:12px;z-index:99999;transform:translateY(-180%)}
.v20-work-body .v9-skip-link:focus-visible{transform:translateY(0)}
.v20-work-body main{min-height:62vh;display:block}
.v20-work-shell{width:min(calc(100% - 48px),1190px)}
.v20-work-hero{background:radial-gradient(ellipse at 18% 8%,rgba(128,104,228,.42),transparent 46%),radial-gradient(ellipse at 83% 95%,rgba(137,107,188,.27),transparent 45%),linear-gradient(140deg,#1b1731,#151222);padding:clamp(74px,11vw,156px) 0 clamp(62px,8vw,108px);border-radius:0 0 clamp(28px,5vw,56px) clamp(28px,5vw,56px);isolation:isolate}
.v20-work-hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 80% 18%,rgba(215,194,255,.15),transparent 21%);z-index:-1}
.v20-work-hero .v20-work-shell{position:relative;z-index:1}
.v20-work-hero h1{max-width:930px;letter-spacing:-.06em;font-weight:650;line-height:1.11;text-wrap:balance}
html[lang=fa] .v20-work-hero h1{font-size:clamp(2.9rem,7.4vw,7.5rem);line-height:1.29;letter-spacing:0}
.v20-work-hero p{font-size:clamp(.96rem,1.45vw,1.15rem);line-height:2;max-width:700px;color:#dcd5ed}
.v22-glass-label{display:inline-flex;align-items:center;gap:9px;padding:10px 18px;border-radius:999px;border:1px solid rgba(238,227,255,.2);background:rgba(249,244,255,.08);color:#ddd4ff;font-size:.75rem;letter-spacing:.07em;box-shadow:inset 0 1px rgba(255,255,255,.09)}
.v22-hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,4vw,44px)}
.v22-hero-action{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:49px;padding:12px 22px;border-radius:999px;text-decoration:none;font-weight:650;font-size:.93rem;border:1px solid rgba(248,243,255,.26);background:rgba(255,255,255,.1);color:white;transition:background .24s ease,transform .26s ease}
.v22-hero-action:first-child{background:#ede5ff;color:#211a38;border-color:#ede5ff}
.v22-hero-action:hover{transform:translateY(-2px);background:#fff;color:#211a38}
.v22-hero-foot{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:clamp(40px,7vw,72px);color:#a9a0c9;font-size:.72rem;letter-spacing:.10em;text-transform:uppercase}
.v22-hero-foot span{display:inline-flex;align-items:center;gap:10px}.v22-hero-foot span:not(:last-child):after{content:'•';color:#7466a3}
.v20-work-index{padding:clamp(55px,7vw,96px) 0}
.v20-title-row{margin-bottom:28px;gap:16px}.v20-title-row h2{font-size:clamp(1.75rem,3.2vw,3.25rem);line-height:1.5;font-weight:650;text-wrap:balance}.v20-title-row p{max-width:460px;line-height:1.9;color:#6e6581}
.v22-index-label{display:block;margin-bottom:12px;color:#856cb5;font:700 .74rem/1.4 Inter,"Sepnoir Estedad",sans-serif;letter-spacing:.13em}
.v20-card-grid{gap:clamp(14px,2vw,25px);align-items:stretch}
.v20-card{border:1px solid rgba(144,125,186,.2);background:rgba(255,255,255,.74);box-shadow:var(--g-shadow);border-radius:clamp(22px,2.8vw,32px);min-width:0;overflow:hidden;transform:translateZ(0)}
.v20-card-media{aspect-ratio:1.52/1;background:linear-gradient(140deg,#dcd5f2,#f4edf6)}
.v20-card-media:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 65%,rgba(32,23,57,.08));opacity:.8}
.v20-card-info{padding:clamp(20px,2.8vw,31px)}
.v20-card-info h3{font-weight:650;font-size:clamp(1.3rem,2.1vw,1.9rem);line-height:1.5}
.v20-card-info b{border-radius:50%;background:#30264e;flex:none;min-width:42px;height:42px}
.v20-filters,.v22-filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.v22-filter,.v20-filter{font:inherit;min-height:44px;padding:9px 18px;border-radius:999px;cursor:pointer;color:#483a69;border:1px solid rgba(130,108,180,.27);background:rgba(255,255,255,.78);font-weight:650;transition:background .25s ease,color .25s ease,transform .25s ease}
.v22-filter[aria-pressed=true],.v20-filter[aria-pressed=true]{background:#2e254b;border-color:#2e254b;color:#fff}
.v22-filter:hover,.v20-filter:hover{transform:translateY(-1px)}
.v22-filtered-out{display:none!important}
.v22-note{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:40px 0 0;padding:20px 23px;border:1px solid rgba(125,107,175,.2);border-radius:22px;background:rgba(255,255,255,.57);color:#685a7d;line-height:1.9}
.v22-note a{color:#5742a0;text-decoration:underline;text-underline-offset:4px}
.v22-case-hero{border-radius:0 0 clamp(24px,5vw,50px) clamp(24px,5vw,50px);background:radial-gradient(ellipse at 15% 18%,#453a6d,transparent 55%),#171426}
.v20-case-hero{background:transparent}.v22-case-hero>.v20-case-hero{padding:clamp(60px,8vw,112px) 0}
.v20-case-hero h1{line-height:1.32;font-size:clamp(2.1rem,5.8vw,5.6rem)}
.v20-case-cover{border-radius:clamp(20px,3vw,32px);box-shadow:0 28px 80px rgba(0,0,0,.16)}
.v20-case-details .v20-work-shell{padding:clamp(26px,4vw,50px);background:rgba(255,255,255,.72);border:1px solid rgba(143,126,182,.19);border-radius:32px;box-shadow:var(--g-shadow)}
.v20-case-prose{overflow-wrap:anywhere;color:#544b67}
.v20-case-gallery img{border-radius:22px;max-height:540px}
.v20-bottom{margin-top:clamp(50px,7vw,95px);padding:clamp(28px,4vw,45px) 20px;background:#1b1730;color:#d9d3e9;border-radius:clamp(26px,4vw,48px) clamp(26px,4vw,48px) 0 0}
.v22-footer-inner{width:min(calc(100% - 12px),1190px);margin:auto;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.v22-footer-inner a{color:#f2eaff;text-decoration:none}.v22-footer-inner a:hover{text-decoration:underline;text-underline-offset:5px}
.v22-footer-credit{color:#c4badb}
.v22-footer-links{display:flex;gap:17px;flex-wrap:wrap}
.v20-work-body .v15-brand img{max-width:none}
html[data-theme=dark] .v20-work-body{background:radial-gradient(ellipse at 78% 14%,rgba(96,69,148,.24),transparent 65%),#161321;color:#f3efff}
html[data-theme=dark] .v20-title-row p,html[data-theme=dark] .v22-note{color:#c3bad9}
html[data-theme=dark] .v20-card,html[data-theme=dark] .v22-note,html[data-theme=dark] .v20-case-details .v20-work-shell{background:rgba(37,31,56,.84);border-color:rgba(198,182,231,.15)}
html[data-theme=dark] .v20-card-info h3,html[data-theme=dark] .v20-card{color:#f3efff}
html[data-theme=dark] .v20-case-prose{color:#d4cce8}
html[data-theme=dark] .v22-filter,html[data-theme=dark] .v20-filter{background:rgba(47,39,67,.85);border-color:rgba(207,191,238,.25);color:#eee4ff}
html[data-theme=dark] .v22-filter[aria-pressed=true],html[data-theme=dark] .v20-filter[aria-pressed=true]{background:#9f84fa;color:#1c1530}
/* Do not stack multiple expensive blur effects on mobile or users who request less transparency. */
@media(hover:hover) and (min-width:900px){.v20-card{-webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px)}.v22-glass-label{-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}}
@media(max-width:800px){.v20-work-shell{width:min(calc(100% - 32px),1190px)}.v20-work-hero{padding:58px 0 70px}.v20-work-hero h1{font-size:clamp(2.4rem,11vw,4.3rem)}html[lang=fa] .v20-work-hero h1{font-size:clamp(2.4rem,9.5vw,4.3rem)}.v22-footer-inner{flex-direction:column;text-align:center}.v20-work-body .v15-header-bar{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}.v20-work-body .v20-card{-webkit-backdrop-filter:none;backdrop-filter:none}.v20-case-details .v20-work-shell{border-radius:23px;padding:23px}}
@media(max-width:480px){.v20-card-grid{grid-template-columns:1fr;gap:17px}.v20-work-hero p{font-size:.96rem;line-height:1.95}.v20-title-row h2{font-size:1.75rem}.v22-hero-foot{font-size:.64rem;gap:7px}.v20-card-info{padding:21px}.v20-work-hero{border-radius:0 0 25px 25px}}
@media(prefers-reduced-motion:reduce){.v20-card,.v20-card img,.v22-filter,.v20-filter,.v22-hero-action{transition:none!important;transform:none!important}html{scroll-behavior:auto!important}}
@media(prefers-reduced-transparency:reduce){.v15-header-bar,.v20-card,.v22-glass-label{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background-color:#f7f5fb!important}html[data-theme=dark] .v15-header-bar,html[data-theme=dark] .v20-card{background-color:#242039!important}}