/* ShopWordWeb — Premium monochrome card system, 20 Oct 2026.
   CSS-only decorative motion: never duplicates text, images, buttons or accessible content.
   Keep existing card geometry and mobile navigation intact. */
:root{--sww-card-ink:#191919;--sww-card-paper:#fff;--sww-card-edge:#d9d9d9;--sww-card-muted:#656565}
.serviceGrid>.service,.swwFeature,.swwWorkProject,.swwLwCard,.swwLwModuleCard,.swwInsightCard {
  position:relative;
  isolation:isolate;
  outline-offset:4px;
  transform:translateZ(0);
  backface-visibility:hidden;
  will-change:auto;
}
/* A single flat monochrome light wash instead of cloning or masking card content. */
.serviceGrid>.service::before,.swwFeature::before,.swwWorkProject::before,.swwLwModuleCard::after,.swwInsightCard::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:0;
  background:radial-gradient(ellipse at 85% 0%,rgba(25,25,25,.065),transparent 63%);
  opacity:0;
}
.serviceGrid>.service>* ,.swwFeature>*,.swwInsightCard>*,.swwLwModuleCard>*,.swwWorkProject>*{position:relative;z-index:1}
/* Existing black UI cards become tactile, but never jump, obscure copy or enlarge dramatically */
.serviceGrid>.service {
  border:1px solid #dcdcdc!important;
  background:linear-gradient(155deg,#fff 0%,#f8f8f8 100%)!important;
  border-radius:24px!important;
  box-shadow:0 4px 26px rgba(0,0,0,.035);
}
.serviceGrid>.service h3,.serviceGrid>.service .more{color:#1a1a1a!important}
.serviceGrid>.service p{color:#5f5f5f!important}
.serviceGrid>.service .tag{border-color:#c8c8c8!important;color:#414141!important}
.swwFeature {
  border:1px solid #dedede!important;
  background:linear-gradient(150deg,#fff,#f7f7f7)!important;
  box-shadow:0 9px 26px rgba(0,0,0,.028);
}
.swwFeature h3{color:#202020!important}
.swwFeature span{color:#444!important}
.swwFeature p{color:#626262!important}
.swwWorkProject{border:1px solid #dadada!important;box-shadow:0 13px 38px rgba(0,0,0,.045)}
.swwWorkProject .swwWorkVisual{background:linear-gradient(140deg,#171717,#2f2f2f)!important;overflow:hidden}
.swwWorkVisual::before {
  content:"";position:absolute;right:-125px;bottom:-110px;width:320px;height:320px;
  border:1px solid rgba(255,255,255,.14);border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 42px rgba(255,255,255,.025),0 0 0 85px rgba(255,255,255,.013);
}
.swwWorkProject .swwWorkCopy{background:#fff}
.swwWorkProject .swwWorkCopy h3{color:#1b1b1b!important}
.swwLwCard{border-color:#ddd!important}
.swwLwModuleCard{box-shadow:0 12px 32px rgba(0,0,0,.035)!important}
.swwLwModuleCard::after{background:radial-gradient(ellipse at 85% 15%,rgba(0,0,0,.075),transparent 60%);z-index:0}
/* Spotlight travels with the pointer via CSS custom props, without any fake text layer. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .serviceGrid>.service,.swwFeature,.swwWorkProject,.swwLwCard,.swwLwModuleCard,.swwInsightCard{
   transition:transform .27s cubic-bezier(.2,.8,.2,1),box-shadow .27s ease,border-color .27s ease!important;
 }
 .serviceGrid>.service:hover,.swwFeature:hover,.swwInsightCard:hover{transform:translate3d(0,-5px,0) scale(1.006)!important;border-color:#9e9e9e!important;box-shadow:0 24px 58px rgba(0,0,0,.105)!important}
 .swwWorkProject:hover{transform:none!important;border-color:#9e9e9e!important;box-shadow:0 26px 62px rgba(0,0,0,.11)!important}
 .swwLwCard:hover,.swwLwModuleCard:hover{transform:translate3d(0,-4px,0)!important;border-color:#aaa!important;box-shadow:0 23px 56px rgba(0,0,0,.11)!important}
 .serviceGrid>.service::before,.swwFeature::before,.swwWorkProject::before,.swwInsightCard::before,.swwLwModuleCard::after {transition:opacity .28s}
 .serviceGrid>.service:hover::before,.swwFeature:hover::before,.swwWorkProject:hover::before,.swwInsightCard:hover::before,.swwLwModuleCard:hover::after{opacity:1}
 .serviceGrid>.service .more,.swwFeature>span:last-child,.swwInsightCard .swwInsightRead {transition:letter-spacing .28s ease}
 .serviceGrid>.service:hover .more,.swwFeature:hover>span:last-child,.swwInsightCard:hover .swwInsightRead{letter-spacing:.018em}
}
/* Accessibility: same visual emphasis on focus, without a mouse. */
.serviceGrid>.service:focus-visible,.swwFeature:focus-visible,.swwWorkCopy a:focus-visible,.swwInsightCard:focus-visible,.swwLwModuleCard:focus-visible{outline:2px solid #161616!important;outline-offset:4px}
.serviceGrid>.service:focus-visible::before,.swwFeature:focus-visible::before,.swwInsightCard:focus-visible::before{opacity:1}
.swwLwCardLink,.swwLwModuleCard{text-decoration:none}
/* Editorial / insights system */
.swwInsights{background:#f4f4f4;padding:87px 0 100px;color:#181818;overflow:hidden}
.swwInsights .eyebrow,.swwInsightEyebrow{color:#616161!important;font:760 11px ui-monospace,monospace;letter-spacing:.11em;text-transform:uppercase}
.swwInsightTop{display:flex;justify-content:space-between;align-items:end;gap:18px;flex-wrap:wrap;margin-bottom:28px}
.swwInsightIntro{max-width:730px;margin:13px 0 0!important;color:#616161!important;font-size:15px;line-height:1.75}
.swwInsightAll{display:inline-flex;white-space:nowrap;align-items:center;gap:12px;border:1px solid #b7b7b7;border-radius:999px;padding:11px 17px;color:#222!important;text-decoration:none;font-size:12px;font-weight:750}
.swwInsightAll:hover{border-color:#222;background:#fff}
.swwInsightGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.swwInsightCard{display:flex;flex-direction:column;min-height:335px;overflow:hidden;border:1px solid var(--sww-card-edge);border-radius:25px;background:#fff;text-decoration:none!important;color:#222!important;padding:26px;box-shadow:0 8px 27px rgba(0,0,0,.035)}
.swwInsightCard>span:first-child{font:760 10px ui-monospace,monospace;letter-spacing:.11em;color:#666}
.swwInsightVisual{height:86px;display:grid;place-items:center;position:relative;overflow:hidden;border-radius:16px;background:linear-gradient(145deg,#ededed,#f8f8f8);border:1px solid #e8e8e8;margin:19px 0 23px}
.swwInsightVisual .swwInsightShape{position:absolute;display:block;border:1px solid #777;width:90px;height:42px;border-radius:13px;transform:rotate(-13deg) translateX(-24px)}
.swwInsightVisual .swwInsightShape:nth-child(2){transform:rotate(13deg) translateX(24px);border-color:#999}
.swwInsightVisual .swwInsightShape:nth-child(3){width:15px;height:15px;border-radius:50%;background:#232323;transform:translateY(-1px)}
.swwInsightCard h3{font-size:clamp(20px,2vw,26px);font-weight:800;letter-spacing:-.045em;line-height:1.18;color:#1b1b1b!important;margin:0 0 13px}
.swwInsightCard p{font-size:13px;line-height:1.72;color:#666!important;margin:0 0 24px;flex:1}
.swwInsightRead{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #e5e5e5;padding-top:18px;font:760 12px ui-monospace,monospace;color:#2c2c2c}
.swwInsightsHero{background:#151515;color:#f6f6f6;padding:80px 0 67px}
.swwInsightsHero .eyebrow{color:#c9c9c9}
.swwInsightsHero h1{font-size:clamp(46px,6vw,82px);line-height:1.02;letter-spacing:-.07em;max-width:920px;margin:15px 0 20px;color:#f8f8f8}
.swwInsightsHero p{font-size:clamp(14px,1.6vw,19px);line-height:1.8;color:#c3c3c3;max-width:770px}
.swwArticleWrap{background:#f5f5f5;color:#1a1a1a;padding:70px 0 105px}
.swwArticleGrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.34fr);gap:53px;align-items:start}
.swwArticleMain{max-width:800px}
.swwArticleMain section{padding:24px 0 29px;border-bottom:1px solid #dcdcdc}
.swwArticleMain h2{font-size:clamp(25px,3vw,35px);line-height:1.17;letter-spacing:-.042em;color:#222;margin:0 0 17px}
.swwArticleMain p,.swwArticleMain li{font-size:15px;color:#525252;line-height:1.9}
.swwArticleMain ul{padding-left:23px}
.swwArticleAside{position:sticky;top:110px;background:#fff;border:1px solid #ddd;border-radius:23px;padding:24px}
.swwArticleAside h3{font-size:18px;color:#191919;margin:0 0 13px}
.swwArticleAside p{font-size:13px;color:#646464;line-height:1.8}
.swwArticleAside a{display:inline-flex;padding:12px 16px;border-radius:30px;background:#222;color:#fff!important;text-decoration:none;font-size:12px;font-weight:700}
.swwArticleBack{color:#4b4b4b!important;text-decoration:underline;text-underline-offset:4px;font-size:13px}
.swwArticleReading{display:inline-block;border:1px solid #565656;border-radius:100px;padding:8px 12px;color:#ddd;font:680 10px ui-monospace,monospace;margin-top:8px}
@media(max-width:950px){.swwInsightGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.swwArticleGrid{grid-template-columns:minmax(0,1fr)}.swwArticleAside{position:static}}
@media(max-width:650px){.swwInsights{padding:60px 0 66px}.swwInsightGrid{grid-template-columns:minmax(0,1fr);gap:12px}.swwInsightCard{min-height:0;padding:22px}.swwInsightVisual{height:65px;margin:15px 0}.swwInsightsHero{padding:54px 0}.swwInsightsHero h1{font-size:clamp(40px,11vw,56px)}.swwArticleWrap{padding:38px 0 65px}}
@media(prefers-reduced-motion:reduce){.serviceGrid>.service,.swwFeature,.swwWorkProject,.swwLwCard,.swwLwModuleCard,.swwInsightCard{animation:none!important;transition:none!important;transform:none!important}}

/* RESTORE SERVICE SIMULATOR BASE LAYOUT — all 9 service pages */
.swwSimSection{position:relative;isolation:isolate;background:#f5f5f5!important;padding:82px 0!important;overflow:hidden}
.swwSimSection>.wrap{max-width:1240px;margin:0 auto}
.swwSimSection .eyebrow{color:#626262!important}
.swwSimSection>.wrap>.display{color:#151515!important;max-width:960px;font-size:clamp(32px,4.6vw,68px);letter-spacing:-.06em;line-height:1.05}
.swwSimSection>.wrap>.lead{color:#686868!important;max-width:790px;line-height:1.8;font-size:15px;margin-top:20px}
.swwSimShell{margin:33px auto 0;max-width:1110px;display:grid!important;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)!important;border:1px solid #d8d8d8;border-radius:28px!important;overflow:hidden;min-height:420px;background:#fff!important;box-shadow:0 25px 75px rgba(0,0,0,.10)}
.swwSimRail{display:flex!important;flex-direction:column;gap:12px;min-width:0;padding:35px 32px!important;background:linear-gradient(150deg,#151515,#2d2d2d)!important;color:#f6f6f6!important}
.swwSimRail .swwSLabel{display:block;font:750 10px ui-monospace,monospace!important;letter-spacing:.12em;color:#c9c9c9!important;line-height:1.5}
.swwSimRail h3{font-size:clamp(23px,2.65vw,36px)!important;line-height:1.16;letter-spacing:-.045em;color:#fff!important;margin:8px 0!important;font-weight:800}
.swwSimRail>p{color:#d5d5d5!important;line-height:1.7!important;font-size:14px!important;margin:0!important;opacity:1!important}
.swwSimRail .swwSimSteps{display:flex!important;flex-wrap:wrap;gap:7px;margin:10px 0 3px}
.swwSimRail .swwSimSteps span{display:inline-flex;padding:8px 10px;border:1px solid #656565!important;border-radius:999px;background:transparent;color:#e6e6e6!important;font:650 10px ui-monospace,monospace;line-height:1.45}
.swwSimRail button.swwSimRun{display:inline-flex!important;align-items:center;justify-content:center;width:max-content;max-width:100%;border:1px solid #fff!important;border-radius:999px!important;background:#fff!important;color:#161616!important;font-size:12px!important;font-weight:800!important;padding:13px 20px!important;min-height:44px;line-height:1.25!important;cursor:pointer;margin:12px 0 0;box-shadow:none;transition:background .2s,transform .2s}
.swwSimRail button.swwSimRun:hover{background:#dedede!important;transform:translateY(-2px)}
.swwSimRail button.swwSimRun:focus-visible{outline:2px solid #fff;outline-offset:3px}
.swwSimRail .swwSimState{font-size:12px!important;line-height:1.7!important;color:#cfcfcf!important;min-height:46px;margin-top:9px!important;white-space:normal}
.swwSimCanvas{position:relative;min-width:0;padding:27px!important;background:radial-gradient(circle at 80% 10%,#eeeeee,transparent 42%),#fafafa!important;display:flex;align-items:stretch}
.swwMockBrowser{border:1px solid #dcdcdc!important;border-radius:19px;background:#fff!important;overflow:hidden;display:flex!important;flex-direction:column;flex:1;min-height:350px}
.swwMockTop{display:flex!important;gap:6px;align-items:center;height:43px;min-height:43px;padding:0 14px;background:#f4f4f4!important;border-bottom:1px solid #e4e4e4!important}
.swwMockTop i{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:#bababa!important}
.swwMockTop em{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:10px;font:650 9px ui-monospace,monospace;font-style:normal;color:#6c6c6c!important;letter-spacing:.05em}
.swwMockBody{padding:23px!important;flex:1;min-width:0}
.swwMockAccent{display:block;font:760 10px ui-monospace,monospace;letter-spacing:.10em;color:#555!important;line-height:1.5}
.swwMockHeading{color:#171717!important;font-size:clamp(23px,2.5vw,33px)!important;line-height:1.15;letter-spacing:-.05em;font-weight:800!important;margin:12px 0 10px!important}
.swwMockText{font-size:12px!important;line-height:1.7!important;color:#676767!important;margin:0 0 16px!important}
.swwMockCards{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:16px;align-items:stretch}
.swwMockCard{display:flex!important;flex-direction:column;gap:5px;min-width:0;min-height:126px;padding:11px 10px!important;border:1px solid #dfdfdf!important;border-radius:13px!important;background:linear-gradient(160deg,#fafafa,#f1f1f1)!important;color:#222!important;box-shadow:none!important}
.swwMockCard .swwMockIllustration{width:100%;max-width:75px;height:40px;margin-bottom:4px;border-radius:9px;background:linear-gradient(135deg,#e2e2e2,#b5b5b5)!important}
.swwMockCard b{display:block;font-size:11px!important;line-height:1.35!important;color:#222!important;white-space:normal}
.swwMockCard small{display:block;font-size:10px!important;line-height:1.45!important;color:#777!important;white-space:normal}
.swwSimFooter{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:18px auto 0;max-width:1110px}
.swwSimFooter p{color:#696969!important;font-size:12px!important;line-height:1.7!important;margin:0!important;max-width:650px}
.swwSimFooter a{display:inline-flex;align-items:center;padding:12px 17px;border:1px solid #b9b9b9;border-radius:50px;color:#282828!important;font-size:12px;font-weight:780;text-decoration:none!important}
.swwSimFooter a:hover{background:#fff;border-color:#333}
/* Responsive all nine preview variants */
@media(max-width:940px){.swwSimShell{grid-template-columns:minmax(0,1fr)!important}.swwSimRail{padding:27px 24px!important}.swwSimCanvas{padding:20px!important}.swwMockBrowser{min-height:320px}.swwSimSection{padding:63px 0!important}}
@media(max-width:560px){.swwSimSection{padding:54px 0!important}.swwSimShell{margin-top:24px;border-radius:22px!important}.swwSimRail{padding:25px 19px!important}.swwSimRail h3{font-size:27px!important}.swwSimRail .swwSimSteps{gap:6px}.swwSimCanvas{padding:12px!important}.swwMockBody{padding:17px!important}.swwMockHeading{font-size:24px!important}.swwMockCards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.swwMockCard{min-height:118px}.swwMockTop em{font-size:8px}.swwSimFooter{align-items:flex-start;flex-direction:column}.swwSimFooter a{width:100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){.swwSimShell *{animation:none!important;transition:none!important;transform:none!important}}