/* ShopWordWeb — premium studio-wide visual polish 2026-10-20.
   Monochrome-only. Scoped improvements preserve routes, forms and both homepage Hero variants.
   No global color filter, text clones, layout shifts or unbounded animations. */
:root{
 --sww-studio-ink:#171717;--sww-studio-paper:#f7f7f7;--sww-studio-mist:#eee;
 --sww-studio-line:#dcdcdc;--sww-studio-muted:#636363;--sww-studio-ease:cubic-bezier(.19,1,.22,1);
}
html{scroll-behavior:smooth}
body{accent-color:#171717}
::selection{background:#222;color:white}
a:focus-visible,button:focus-visible,[tabindex="0"]:focus-visible{outline:2px solid #1a1a1a;outline-offset:3px}
/* Consistent interior hero typography with a restrained 2D lighting field. */
.detailHero:not(.swwWorkHero){position:relative;isolation:isolate;overflow:hidden}
.detailHero:not(.swwWorkHero)::before{
 content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
 background:radial-gradient(ellipse at 84% 20%,rgba(255,255,255,.08),transparent 48%);
}
.detailHero>.wrap{position:relative;z-index:1}
.detailHero .display{letter-spacing:-.058em;max-width:1090px;text-wrap:balance}
.detailHero .lead{line-height:1.83;max-width:810px}
.section .display,.swwInsights .display{letter-spacing:-.054em;text-wrap:balance}
/* 2D interactions: service cards, utility cards and proof cards */
.serviceGrid>.service,.swwFeature,.swwInsightCard{
 border-radius:24px;overflow:hidden;
 transition:border-color .3s ease,box-shadow .3s ease,transform .35s var(--sww-studio-ease);
}
.serviceGrid>.service{box-shadow:0 16px 46px rgba(0,0,0,.045)}
.serviceGrid>.service .more{display:inline-flex;align-items:center;gap:9px}
.serviceGrid>.service .more::after{content:"↗";font-size:16px;transition:transform .25s}
.serviceGrid>.service:hover .more::after{transform:translate(2px,-2px)}
.swwFeature{border:1px solid var(--sww-studio-line)!important;box-shadow:0 12px 40px rgba(0,0,0,.045)}
.swwFeature .swwFeatureIcon,.swwFeature svg{transition:transform .35s var(--sww-studio-ease)}
.swwFeature:hover .swwFeatureIcon,.swwFeature:hover>svg{transform:rotate(-5deg) scale(1.04)}
/* Work: depth inside art, not movement of the entire interactive card. */
.swwWorkProject{transform:none!important;transition:border-color .3s,box-shadow .3s!important}
.swwWorkProject:hover{transform:none!important;box-shadow:0 31px 75px rgba(0,0,0,.13)!important;border-color:#989898!important}
.swwWorkVisual{position:relative;overflow:hidden;isolation:isolate}
.swwWorkVisual::after{content:"";position:absolute;inset:-25%;z-index:0;pointer-events:none;opacity:.34;
 background:repeating-radial-gradient(circle at 80% 10%,transparent 0 39px,rgba(255,255,255,.13) 40px 41px,transparent 42px 82px);
 transform:rotate(-12deg);transition:transform 1.1s var(--sww-studio-ease),opacity .5s;
}
.swwWorkProject:hover .swwWorkVisual::after{transform:rotate(-6deg) scale(1.06);opacity:.55}
.swwWorkVisual>*{position:relative;z-index:1}
.swwWorkVisual .swwStageBox,.swwWorkVisual .swwProjectLogo{transition:transform .55s var(--sww-studio-ease)}
.swwWorkProject:hover .swwStageBox{transform:translate3d(0,-4px,0)}
.swwWorkingWith .swwBrandmark{background:linear-gradient(145deg,#fff,#eee)!important;
 border:1px solid #d5d5d5!important;box-shadow:0 4px 18px rgba(0,0,0,.04);
 transition:background .3s,border-color .3s,box-shadow .3s;
}
.swwWorkingWith .swwBrandmark:hover{background:#fff!important;border-color:#aaa!important;box-shadow:0 13px 31px rgba(0,0,0,.09)}
/* About: more legible values and connected design tokens. */
.section .split .listItem{position:relative;border-bottom:1px solid #ddd;padding:20px 18px!important;
 background:linear-gradient(95deg,rgba(255,255,255,0),rgba(255,255,255,.60));
 transition:border-color .3s,background .3s,box-shadow .3s;
}
.section .split .listItem:hover{background:#fff;border-bottom-color:#999;box-shadow:0 10px 25px rgba(0,0,0,.04)}
.section .split .listItem b:first-child{color:#242424!important}
.section .split .listItem b:last-child{color:#676767!important}
/* Process: progressive guide rather than competing moving blocks. */
.swwJourneyStep{position:relative;isolation:isolate;overflow:hidden;
 transition:border-color .35s,box-shadow .35s,background .35s!important;
}
.swwJourneyStep::after{content:"";position:absolute;top:0;left:0;width:3px;height:100%;z-index:0;
 background:linear-gradient(#929292,#252525);opacity:0;transition:opacity .3s;pointer-events:none}
.swwJourneyStep.is-active::after{opacity:1}
.swwJourneyStep h3{letter-spacing:-.04em}
.swwStageViz{border:1px solid #e4e4e4;background:#f9f9f9}
.swwStageViz>*{transition:transform .35s var(--sww-studio-ease)}
.swwJourneyStep.is-active .swwStageViz>*:nth-child(2){transform:translateY(-3px)}
/* Mini websites: keep sample interface clear and pointer stable. */
.swwSimShell{box-shadow:0 31px 82px rgba(0,0,0,.105)}
.swwMiniApp .swwMiniProductArt{transition:box-shadow .3s,background .3s}
.swwMiniApp .swwMiniProductLink:hover .swwMiniProductArt{box-shadow:inset 0 0 0 1px #c4c4c4,0 15px 26px rgba(0,0,0,.06)}
/* Insights editorial cards: gentle illustration depth. */
.swwInsightVisual{perspective:600px;isolation:isolate}
.swwInsightVisual::after{content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(140deg,rgba(255,255,255,.6),transparent 65%);
}
.swwInsightVisual .swwInsightShape{transition:transform .6s var(--sww-studio-ease),border-color .4s}
.swwInsightCard:hover .swwInsightShape:first-child{transform:rotate(-7deg) translateX(-20px) translateY(-5px)}
.swwInsightCard:hover .swwInsightShape:nth-child(2){transform:rotate(8deg) translateX(21px) translateY(5px)}
.swwInsightCard:hover{box-shadow:0 24px 66px rgba(0,0,0,.12)!important}
.swwArticleMain section{scroll-margin-top:105px}
/* Contact forms: clear modes and credible interaction, not duplicate forms. */
.swwContactTabs{background:#e9e9e9!important;border-color:#d2d2d2!important;box-shadow:inset 0 2px 5px rgba(0,0,0,.03)}
.swwContactTab[aria-pressed="true"]{background:#1e1e1e!important;color:#fff!important;box-shadow:0 10px 28px rgba(0,0,0,.13)}
#leadForm input:focus,#leadForm textarea:focus,#leadForm select:focus{outline:2px solid #292929!important;outline-offset:1px!important;box-shadow:0 0 0 5px rgba(0,0,0,.035)}
#leadForm label{color:#2b2b2b}
.swwConsent{background:#f7f7f7!important;color:#3d3d3d!important}
.swwConsent input{accent-color:#181818!important}
/* Homepage B: enhanced 2D art without changing the hero copy, layout or A/B state */
.swwHeroB .swwStudioFrame{box-shadow:0 46px 105px rgba(0,0,0,.46),0 0 0 8px rgba(255,255,255,.032)}
.swwHeroB .swwStudioGlass{transition:box-shadow .5s var(--sww-studio-ease),transform .5s var(--sww-studio-ease)}
.swwHeroB .swwStudioFloating{transition:transform .5s var(--sww-studio-ease)}
.swwHeroB .swwStudioFrame:hover .swwStudioFloatingOne{transform:translate3d(0,-5px,0)}
.swwHeroB .swwStudioFrame:hover .swwStudioFloatingTwo{transform:translate3d(0,5px,0)}
/* Soft professional image treatment and keyboard usability. */
img{max-width:100%}
.swwLwCardLink:focus-visible{outline:3px solid #202020!important;outline-offset:-5px}
.swwLwModuleCard:focus-visible{outline:3px solid #202020!important;outline-offset:3px}
@media(max-width:850px){.detailHero .display{text-wrap:wrap}.swwWorkProject:hover .swwStageBox{transform:none}}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .swwWorkVisual::after,.swwWorkVisual .swwStageBox,.swwWorkVisual .swwProjectLogo,
 .swwHeroB .swwStudioFloating,.swwHeroB .swwStudioGlass,
 .swwInsightVisual .swwInsightShape,.serviceGrid>.service .more::after,
 .swwJourneyStep .swwStageViz>*,.swwMiniProductArt{transition:none!important;transform:none!important;animation:none!important}
}