/* WORKSON Visual Design v2 — refinement layer on top of the v1.3.4 functional theme.
   Purely decorative SVG/CSS graphics; no external dependencies. */
:root {
  --ws-accent-cyan:#a8e6ff;
  --ws-border-soft:#e6edfa;
  --ws-elevation:0 20px 54px rgba(27,58,119,.085);
  --ws-ring-image:url('../images/workson-orbits.svg');
}

/* Make the site feel deliberate without changing any saved header navigation. */
.ws-header { background:#fff; box-shadow:0 1px 0 rgba(26,53,91,.025); }
.ws-header .ws-site-title a { letter-spacing:-.075em!important; font-weight:850!important; }
.ws-header .ws-nav-contact a { box-shadow:0 7px 17px rgba(21,93,252,.13); }

/* HERO: glass ribbon replaces the older double-border blob CSS. */
.wp-site-blocks .ws-hero {
  min-height:580px;
  background:
    radial-gradient(ellipse 54% 86% at 82% 44%,rgba(207,227,255,.62) 0%,transparent 80%),
    linear-gradient(112deg,#fff 0%,#fff 36%,#f8fbff 67%,#edf4ff 100%);
  border-bottom:1px solid #eff4fe;
}
.wp-site-blocks .ws-hero::before {
  content:""; position:absolute; z-index:0; inset:0;
  background-image:radial-gradient(#3379e4 0.65px,transparent .65px);
  background-size:23px 23px;
  opacity:.07;
  -webkit-mask-image:linear-gradient(90deg,transparent 45%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 45%,#000 100%);
  pointer-events:none;
}
.wp-site-blocks .ws-hero-inner { min-height:580px; z-index:3; padding:100px 0 108px; }
.ws-hero-inner h1 { max-width:670px!important; letter-spacing:-.062em!important; }
.ws-hero-inner h3 { max-width:610px!important; }
.ws-hero-inner .ws-eyebrow { letter-spacing:.26em; }
.ws-hero-inner .wp-block-buttons { margin-top:23px!important; }
.ws-hero-inner .wp-block-button__link { box-shadow:0 12px 26px rgba(21,93,252,.12); }
.ws-hero-inner .ws-button-outline .wp-block-button__link { box-shadow:none; }
.wp-site-blocks .ws-hero .ws-hero-art {
  position:absolute!important;
  top:0!important; bottom:auto!important; right:-3.4%!important;
  height:100%!important; width:59%!important; max-width:none!important;
  background-image:url('../images/workson-glass-ribbon.svg')!important;
  background-position:center right!important;
  background-repeat:no-repeat!important;
  background-size:contain!important;
  opacity:1!important; pointer-events:none;
  z-index:1;
  filter:drop-shadow(4px 18px 24px rgba(65,106,212,.10));
}
.ws-hero .ws-hero-art::before,
.ws-hero .ws-hero-art::after { display:none!important; content:none!important; }

/* SERVICE SECTION: very subtle orbit accent + tactile white cards. */
.wp-site-blocks .ws-services { position:relative; isolation:isolate; }
.ws-services::before {
  content:""; position:absolute; z-index:-1; pointer-events:none;
  top:-40px; right:-34px; width:360px; height:290px;
  background:var(--ws-ring-image) no-repeat center/contain; opacity:.20;
}
.ws-service-grid { gap:20px!important; }
.ws-service-card {
  position:relative; isolation:isolate; overflow:hidden;
  border:1px solid #e5ecf9; border-radius:17px;
  background:linear-gradient(153deg,#fff 0%,#fff 70%,#fbfdff 100%);
  box-shadow:0 6px 21px rgba(29,59,106,.035);
  padding:30px 26px; min-height:272px;
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}
.ws-service-card::before {
  content:""; pointer-events:none; position:absolute; top:-42px; right:-46px;
  width:128px; height:128px; border:1px solid rgba(21,93,252,.10);
  border-radius:50%; box-shadow:0 0 0 25px rgba(21,93,252,.021),0 0 0 49px rgba(21,93,252,.015);
}
.ws-service-card::after { content:""; position:absolute; height:3px; top:0; left:22px; right:70%; border-radius:0 0 8px 8px; background:linear-gradient(90deg,#185bfe,#a6d4ff); opacity:.9; }
.ws-service-card:hover { transform:translateY(-5px); border-color:#bbd0ff; box-shadow:var(--ws-elevation); }
.ws-service-card h3 { letter-spacing:-.045em; }
.ws-service-card a { text-decoration:none!important; }
.ws-service-card a:hover { color:#073b9c; }

/* SELECTED WORKS: polished framing and gentle high-tech orbital transitions. */
.wp-site-blocks .ws-works { position:relative; isolation:isolate; }
.ws-works::before {
  content:""; pointer-events:none; position:absolute; z-index:-1;
  top:-40px; right:-40px; width:470px; height:320px;
  background:var(--ws-ring-image) no-repeat center/contain; opacity:.23;
}
.ws-works .ws-legacy-image { border:1px solid rgba(42,78,137,.08); border-radius:15px; background:#eff5fd; box-shadow:0 10px 30px rgba(15,44,96,.05); }
.ws-works .ws-legacy-image img { transition:transform .45s ease; }
.ws-works .ws-project-card:hover .ws-legacy-image img { transform:scale(1.045); }
.ws-works .ws-project-card h3 { letter-spacing:-.035em; }
.ws-works .ws-archived-card { padding-bottom:5px; }
.ws-works-actions a { font-weight:700; }

/* JAPAN feature gets a light-blue editorial panel; art never covers content. */
.wp-site-blocks .ws-japan-feature {
  position:relative; border:1px solid #dfeaff; border-radius:20px;
  background:linear-gradient(132deg,#f8fbff,#eaf3ff);
  box-shadow:0 18px 48px rgba(32,68,127,.07);
}
.ws-japan-copy { position:relative; z-index:2; }
.ws-japan-copy::before {
  content:""; position:absolute; z-index:-1; inset:0;
  background:var(--ws-ring-image) no-repeat 90% 100%/80% auto; opacity:.12; pointer-events:none;
}
.ws-japan-visual { overflow:hidden; }
.ws-japan-visual img { transition:transform .55s ease; }
.ws-japan-feature:hover .ws-japan-visual img { transform:scale(1.03); }

/* Site-wide CTA with clean edge to footer, but richer background. */
.wp-site-blocks .ws-cta {
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(103deg,#f2f7ff 0%,#e7f0ff 50%,#c7dcff 100%);
  border-top:1px solid #e4eeff;
}
.ws-cta::before {
  content:""; position:absolute; z-index:-1; right:-3%; top:-45%;
  width:54%; height:195%; pointer-events:none;
  background:var(--ws-ring-image) no-repeat center/contain; opacity:.45;
}
.ws-cta::after {
  content:""; position:absolute; pointer-events:none; right:0; bottom:0;
  width:36%; height:55%; background:radial-gradient(ellipse at bottom right,rgba(95,149,247,.15),transparent 70%);
}
.ws-cta h2,.ws-cta p,.ws-cta .wp-block-buttons { position:relative; z-index:1; }
.ws-cta .wp-block-button__link { box-shadow:0 10px 22px rgba(21,93,252,.14); }
.ws-cta + .wp-block-template-part { margin-block-start:0!important; }
.ws-footer { position:relative; }
.ws-footer .wp-block-separator { display:none!important; }
.ws-footer a { text-decoration:none!important; }

/* INNER PAGE HEADERS — the same orbit language, with distinct compositions. */
.wp-site-blocks .ws-page-hero {
  position:relative; isolation:isolate; overflow:hidden;
  min-height:320px; margin-top:48px!important;
  padding:76px 58px 68px!important;
  border:1px solid #e8effa; border-radius:23px;
  background:
    radial-gradient(ellipse 48% 110% at 91% 46%,rgba(204,225,255,.69),transparent 87%),
    linear-gradient(112deg,#fff 0%,#f7fbff 63%,#edf5ff 100%);
}
.ws-page-hero::before {
  content:""; position:absolute; z-index:-1; right:-11%; top:-64%;
  width:61%; height:190%; pointer-events:none;
  background:var(--ws-ring-image) no-repeat center / contain; opacity:.57;
}
.ws-page-hero::after {
  content:""; position:absolute; z-index:-1; bottom:0; right:5%;
  width:24%; height:35%; background:radial-gradient(ellipse at bottom,rgba(82,141,255,.10),transparent 72%);
  pointer-events:none;
}
.ws-page-hero > * { position:relative; z-index:1; max-width:790px!important; margin-left:0!important; margin-right:0!important; }
.ws-page-hero h1 { font-size:clamp(37px,4.15vw,58px)!important; line-height:1.24!important; letter-spacing:-.063em!important; }
.ws-page-hero p:last-child { color:#566780; font-size:17px; max-width:720px!important; }
/* Services: hint at the hero ribbon so the main/inner pages belong together. */
.ws-page-services .ws-page-hero::before,
.ws-page-hero-services::before {
  top:-25%; right:-5%; height:147%; width:45%;
  background-image:url('../images/workson-glass-ribbon.svg'); opacity:.33;
}
/* Portfolio: more precise outlines and room for photography. */
.ws-page-works .ws-page-hero,
.ws-page-hero-works { background:linear-gradient(117deg,#fdfefe 0%,#f6faff 65%,#edf4ff 100%); }
.ws-page-works .ws-page-hero::before,
.ws-page-hero-works::before { opacity:.73; right:-14%; width:65%; }
/* About: clean concentric orbit, calm and trust-forward. */
.ws-page-about .ws-page-hero::before,
.ws-page-hero-about::before { opacity:.41; right:-6%; top:-52%; width:55%; }
.ws-page-about .ws-about { position:relative; padding-top:78px; }
.ws-about .ws-info-card {
  height:100%; padding:32px 28px; border-radius:16px;
  border:1px solid #e5edfa;
  background:linear-gradient(140deg,#fff 62%,#f8fbff 100%);
  box-shadow:0 8px 27px rgba(25,57,115,.045);
}
.ws-about .ws-info-card::before { content:""; display:block; width:33px; height:3px; margin:0 0 22px; border-radius:10px; background:linear-gradient(90deg,#155dfc,#a4d6ff); }
.ws-about .ws-info-card h3 { margin:0 0 11px!important; font-size:20px; letter-spacing:-.03em; }
.ws-about .ws-info-card p { color:var(--ws-gray); }

/* CONTACT: keep the form the focus, add light orbital texture to introduction. */
.ws-page-contact main { overflow:hidden; }
.wp-site-blocks .ws-contact-intro {
  position:relative; isolation:isolate; max-width:1100px!important;
  padding:86px 20px 38px!important;
}
.ws-contact-intro::before {
  content:""; position:absolute; z-index:-1; top:-125px; left:50%;
  width:min(850px,110vw); height:500px; transform:translateX(-50%);
  background:var(--ws-ring-image) no-repeat center / contain;
  opacity:.20; pointer-events:none;
}
.ws-contact-intro::after {
  content:""; position:absolute; z-index:-1; top:0; left:5%; right:5%; bottom:0;
  background:radial-gradient(ellipse at 50% 22%,rgba(205,224,255,.30),transparent 72%);
  pointer-events:none;
}
.ws-contact-intro h1 { font-size:clamp(38px,4.3vw,58px)!important; letter-spacing:-.064em!important; }
.wp-site-blocks .ws-contact-form-wrap { max-width:990px!important; margin-top:12px!important; margin-bottom:94px!important; }
.ws-contact-form-container {
  padding:34px 42px 42px;
  border:1px solid #e5edf9; border-radius:20px;
  background:linear-gradient(152deg,#fff 65%,#f9fbff 100%);
  box-shadow:0 18px 55px rgba(32,66,123,.065);
}
.ws-contact-form { margin-top:0!important; }
.ws-form-field input,.ws-form-field select,.ws-form-field textarea { border-radius:10px; border-color:#d6deed; }
.ws-form-field input:hover,.ws-form-field select:hover,.ws-form-field textarea:hover { border-color:#b8cbee; }
.ws-form-submit { box-shadow:0 11px 23px rgba(21,93,252,.15); }

/* Responsive treatments, preserving the tested v1.2 full-screen mobile menu. */
@media (max-width:1050px) {
  .wp-site-blocks .ws-hero .ws-hero-art { width:60%!important; right:-11%!important; opacity:.69!important; }
  .ws-services::before,.ws-works::before { right:-100px; opacity:.14; }
  .wp-site-blocks .ws-page-hero { padding:60px 38px!important; }
}
@media (max-width:780px) {
  .wp-site-blocks .ws-hero .ws-hero-art { width:78%!important; right:-27%!important; opacity:.26!important; }
  .ws-page-hero::before { right:-25%; width:75%; opacity:.38; }
  .ws-service-card { min-height:250px; }
  .ws-cta::before { width:74%; right:-26%; opacity:.28; }
  .ws-contact-form-container { padding:28px; }
}
@media (max-width:600px) {
  .wp-site-blocks .ws-hero { min-height:0; }
  .wp-site-blocks .ws-hero-inner { min-height:610px!important; padding:64px 0 176px!important; }
  .wp-site-blocks .ws-hero .ws-hero-art {
    width:98%!important; height:265px!important;
    top:auto!important; bottom:-56px!important; right:-23%!important;
    opacity:.48!important; background-position:center right!important;
  }
  .wp-site-blocks .ws-hero::before { opacity:.045; }
  .ws-hero-inner .wp-block-buttons { gap:9px; }
  .ws-service-card { min-height:0; padding:26px 23px; }
  .ws-services::before { width:240px; right:-105px; }
  .wp-site-blocks .ws-page-hero { margin-top:18px!important; min-height:0; padding:52px 25px 48px!important; border-radius:16px; }
  .ws-page-hero h1 { font-size:clamp(32px,9vw,42px)!important; }
  .ws-page-hero p:last-child { font-size:15px; }
  .ws-page-hero::before { right:-46%; top:-75%; width:125%; height:180%; opacity:.26; }
  .ws-page-services .ws-page-hero::before,.ws-page-hero-services::before { opacity:.17; right:-38%; width:110%; }
  .ws-about .ws-info-card { padding:27px 22px; }
  .wp-site-blocks .ws-contact-intro { padding:59px 10px 25px!important; }
  .ws-contact-intro::before { top:-80px; opacity:.11; }
  .ws-contact-intro h1 { font-size:37px!important; }
  .wp-site-blocks .ws-contact-form-wrap { width:calc(100% - 32px); margin-bottom:68px!important; }
  .ws-contact-form-container { border-radius:15px; padding:24px 19px 27px; }
  .ws-cta::before { width:110%; right:-65%; opacity:.20; }
}
@media (prefers-reduced-motion:reduce) {
  .ws-service-card,.ws-works .ws-legacy-image img,.ws-japan-visual img { transition:none!important; }
  .ws-service-card:hover,.ws-works .ws-project-card:hover img,.ws-japan-feature:hover img { transform:none!important; }
}

/* Explicit button layout also makes standalone design previews match WP block styling. */
.ws-hero-inner .wp-block-buttons,.ws-cta .wp-block-buttons { display:flex; flex-wrap:wrap; align-items:center; }
.ws-hero-inner .wp-block-button:not(.ws-button-outline) .wp-block-button__link,
.ws-cta .wp-block-button__link { display:inline-flex; align-items:center; background:#155dfc; color:#fff; border:1px solid #155dfc; text-decoration:none; font-weight:700; }
.ws-hero-inner .ws-button-outline .wp-block-button__link { display:inline-flex; align-items:center; background:#fff; color:#155dfc; border-color:#b7ccff; font-weight:700; text-decoration:none; }